refactor: extract EXPLAIN parsers and AI client from VisualOptimizer

オープン
  • 何か問題がありますか？
#6 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
48/100
issue の種類
リファクタリング
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
mysql, postgresql, react, sqlite, typescript
領域
database, desktop, testing

調査の方向性

Start by reading src/components/results/VisualOptimizer.tsx to trace its EXPLAIN parsing, insight generation, AI calls, and plan tree rendering. Extract the parsers to utils/explainParser.ts, insights to utils/explainInsights.ts, the AI client to src/hooks/useAIExplain.ts, and the recursive tree row as described. Add at least six Vitest tests across the parser and insights modules; done means the component is under about 500 lines and PostgreSQL, MySQL, SQLite, and all four AI providers still work.

索引モデルが issue の本文から書いたものです。

説明

good first issue help wanted refactor

src/components/results/VisualOptimizer.tsx is 1,172 lines. The component parses three different EXPLAIN formats (PostgreSQL, MySQL, SQLite), runs heuristic insight generation, calls four AI providers, and renders the plan tree. Each of those is a clean extraction target.

What to extract

  1. utils/explainParser.ts — one exported function per DB type: parsePostgresPlan(raw), parseMySqlPlan(raw), parseSqlitePlan(raw). All return a normalized PlanNode tree.
  2. utils/explainInsights.ts — the heuristic recommendations (seq-scan warnings, missing-index hints, etc.) as pure functions over the normalized PlanNode.
  3. hooks/useAIExplain.ts — the OpenAI / Anthropic / Google / Ollama fetch with the 30s timeout that already landed in the pre-launch pass. Returns { run, response, error, loading }.
  4. <PlanTreeNode> — the recursive tree row, memoized.

Suggested approach

  • Parsers are pure functions — perfect Vitest targets. Aim for at least three test cases per parser (simple, nested, edge-case).
  • useAIExplain can sit in src/hooks/.

Done criteria

  • VisualOptimizer.tsx drops below ~500 lines and is mostly rendering glue.
  • The plan-tree visualization works for at least PostgreSQL EXPLAIN (mysql/sqlite already worked, regressions would be a no-go).
  • AI assist still works for all four providers.
  • At least 6 Vitest tests across the parser + insights modules.

Out of scope

  • Adding new EXPLAIN visualization features.
  • Adding new AI providers (separate issue).

Audit reference

K6 in the pre-launch audit.

主要言語
TypeScript
スター
6
フォーク
1
平均マージ
17分
マージ済み PR（30日）
2

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

openidle-dev/queryden のほかの issue

openidle-dev/queryden の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。