specs/002-add-graph-view/tasks.md

Tasks: Interactive Graph View

Feature: 002-add-graph-view Status: Pending Spec: spec.md

Phase 1: Setup (Project Initialization)

Goal: Install dependencies and define core data structures.

• T001 [P] Install react-force-graph-2d dependency in frontend/package.json
• T002 [P] Define Pydantic models (GraphNode, GraphLink, GraphData) in backend/src/models/graph.py
• T003 [P] Define TypeScript interfaces (GraphNode, GraphLink, GraphData) in frontend/src/types/graph.ts

Phase 2: Foundational Tasks

Goal: Establish core backend logic required for all user stories.

• T004 Update IndexerService with get_graph_data() method in backend/src/services/indexer.py
• T005 Implement GET /api/graph endpoint in backend/src/api/routes/graph.py
• T006 Register graph router in backend/src/api/main.py
• T007 [P] Add getGraphData function to frontend/src/services/api.ts
• T008 Create unit tests for graph API in backend/tests/unit/test_graph_api.py

Phase 3: User Story 1 - Structural Overview

Goal: Visualize the note vault structure as an interactive graph.

• T009 [US1] Create GraphView component with basic force-directed graph in frontend/src/components/GraphView.tsx
• T010 [US1] Integrate getGraphData hook into GraphView to load real data in frontend/src/components/GraphView.tsx
• T011 [US1] Add "Graph View" toggle button and conditional rendering logic in frontend/src/pages/MainApp.tsx
• T012 [US1] Style the graph container to occupy the full center panel in frontend/src/pages/MainApp.tsx

Phase 4: User Story 2 - Visual Navigation

Goal: Enable navigation from the graph to specific notes.

• T013 [US2] Implement onNodeClick handler to trigger onSelectNote callback in frontend/src/components/GraphView.tsx
• T014 [US2] Verify node hover tooltips display note titles correctly in frontend/src/components/GraphView.tsx
• T015 [US2] Ensure switching back from Graph View restores the standard Note View in frontend/src/pages/MainApp.tsx

Phase 5: User Story 3 - Orphan Identification & Visuals

Goal: Highlight node connectivity and grouping.

• T016 [US3] Implement node sizing logic (val based on link count) in backend/src/services/indexer.py
• T017 [US3] [P] Implement theme support (Dynamic Light/Dark colors) in frontend/src/components/GraphView.tsx
• T018 [US3] [P] Implement categorical node coloring based on group (folder) in frontend/src/components/GraphView.tsx

Final Phase: Polish

Goal: Ensure stability and good UX.

• T019 Implement loading state spinner in GraphView while fetching data in frontend/src/components/GraphView.tsx
• T020 Implement error handling banner in GraphView in frontend/src/components/GraphView.tsx
• T021 Implement graph state persistence (zoom/pan) to retain view when toggling in frontend/src/components/GraphView.tsx

Dependencies

1. Setup (T001-T003): Must be done first.
2. Foundational (T004-T008): Depends on Setup. Required for all US phases.
3. US1 (T009-T012): Depends on Foundational.
4. US2 (T013-T015): Depends on US1 (needs GraphView component).
5. US3 (T016-T018): Partially parallel with US2, but T016 (Backend sizing) is backend-only. T017/T018 modify GraphView.
6. Polish (T019-T020): Can be done anytime after US1.

Parallel Execution Strategy

• Backend vs Frontend: Once models (T002/T003) are agreed upon, T004-T006 (Backend) can run parallel to T007-T009 (Frontend).
• Within US3: T017 (Theme) and T018 (Group Colors) are independent UI tasks.

Implementation Strategy

1. MVP: Complete Phases 1, 2, and 3 (US1). This delivers the core value: seeing the graph.
2. Interaction: Phase 4 adds the critical navigation workflow.
3. Visuals: Phase 5 enhances utility (orphans, importance).