refactor: extract EXPLAIN parsers and AI client from VisualOptimizer

Aperta
  • Qualcosa non va?
#6 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Refactoring
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
mysql, postgresql, react, sqlite, typescript
Ambito
database, desktop, testing

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
6
Fork
1
Merge medio
17m
PR unite (30g)
2

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di openidle-dev/queryden

Tutte le issue di openidle-dev/queryden

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.