refactor: extract EXPLAIN parsers and AI client from VisualOptimizer

Đang mở
  • Có gì không ổn?
#6 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tái cấu trúc
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
mysql, postgresql, react, sqlite, typescript
Lĩnh vực
database, desktop, testing

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
6
Fork
1
Merge trung bình
17 phút
Pull request đã merge (30 ngày)
2

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của openidle-dev/queryden

Tất cả issue của openidle-dev/queryden

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.