Last Updated: 2025-11-08 | Branch: feature/sigma-graph-spike | Commit: 4d5c8c9
Problem: Common import nodes (like Python's re module) have 1,123+ callers. The UI loads and renders ALL of them at once, causing browser timeout and sluggish performance.
Evidence:
reimport: 1,123 callers + 495 callees = 1,618 total connections- All rendered as DOM nodes (no virtualization)
- Page screenshot timeout at 5000ms
- Tiny vertical scrollbar indicates massive list
Required Fixes:
-
Backend Pagination - Add
limitandoffsetparams to query endpoints:/api/graph/query/callers?symbol=X&limit=50&offset=0/api/graph/query/callees?symbol=X&limit=50&offset=0/api/graph/query/references?symbol=X&limit=50&offset=0
-
Frontend Progressive Disclosure:
- Show "First 50 of 1,123" with "Load More" button
- Or implement virtual scrolling (vue-virtual-scroller)
- Display total count prominently
-
Import Node Filtering:
- Exclude stdlib imports (
re,asyncio,logging, etc.) from "Entry Points" category - Or create separate "Library Imports" category
- Focus entry points on actual application entry functions
- Exclude stdlib imports (
Problem: UI designed mobile-first, not optimized for desktop workflow app.
User Feedback:
- "seems to be designed primarily for mobile"
- Horizontal scroll bar always present (slim edge cut off)
- Not suitable for knowledge mining workflow tool
Required Fixes:
- Fix horizontal overflow in responsive grid layout
- Redesign for desktop-first (multi-column, pinned panels)
- Add code preview panel for desktop screens
- Implement keyboard navigation
Vision: Not an IDE, but a knowledge mining and codebase-wide event-action-result flow analyzer.
Use Cases:
- Hidden business logic discovery (find use cases in boilerplate)
- Iterative LLM workflows (feed code structure to Claude)
- Stack trace & data-state analysis
- Graph-based observability (visualize traversal/touches)
- Diagnostics & root cause analysis
Desktop UI Requirements:
- Multi-column layout - Pinned sidebars, resizable panels
- Code preview - Show actual code snippets on node selection
- Data table view - Alternative to tiles for large datasets
- Keyboard shortcuts - Navigate without mouse (arrow keys, Enter, Esc)
- Comparison mode - Side-by-side node details
- Saved searches - Bookmark interesting subgraphs
- Export/Share - Generate URLs or JSON exports
Problem: Unknown if graph building is deterministic and complete across languages.
Validation Strategy:
- Create test modules - Known call graphs in Python, TypeScript, C#
- Symbol counting tools - Verify AST-grep matches expected counts
- Multi-parser comparison - Compare AST-grep vs tree-sitter vs language-specific parsers
- Deterministic testing - Run analysis multiple times, ensure identical results
Questions to Answer:
- Are we missing implicit calls (decorators, metaclasses, dynamic dispatch)?
- Do higher-order functions create correct relationships?
- What about async/await, generators, context managers?
- Cross-language seams: Are C# → Node.js calls detected?
Question: Is Redis → Neo4j worth the effort?
Pros:
- Native graph queries (Cypher) more powerful than custom traversal
- Built-in pattern matching and relationship analysis
- ACID compliance for consistency
- Visualization tools and query optimization
- Scales better for complex graph algorithms
Cons:
- Added infrastructure complexity
- Requires ETL pipeline (Redis → Neo4j)
- Learning curve for Cypher
- Resource overhead vs pure Redis cache
Decision Point: Evaluate after Python domain stabilized. Would enable sophisticated analysis impossible with Redis alone (e.g., "find all code paths from HTTP endpoint to database query").
Vision: Real-time node highlighting during traversal or "touches"
Implementation:
- WebSocket connection for live graph events
- Highlight nodes as LLM or analysis engine traverses them
- Particle animations for data flow
- Timeline scrubber to replay analysis sessions
Workflows to Enable:
- Feed code structure to Claude for analysis
- Generate architectural recommendations
- Find business logic buried in boilerplate
- Suggest refactoring opportunities based on graph patterns
- Answer questions like "What happens when user clicks checkout?"
- Backend: 974 nodes, 12,767 relationships, 25 language support
- Relationship Queries: find_callers returning 21+ results (was 0)
- UI Navigation: Browse → Select → Connections → Navigate flow
- Styling: Beautiful consistent design with NodeTile components
- Docker Stack: All services healthy, Redis caching operational
- Performance: Large result sets (1,600+ connections) crash browser
- Desktop Layout: Horizontal scroll, mobile-first responsive design
- No Pagination: API returns unlimited results
- Import Noise: Stdlib imports dominate "Entry Points" category
- Relationship Type Deserialization - Fixed Redis cache enum conversion
- API Response Format - Fixed callers/callees field mapping
- UI Styling - NodeTile components, card layouts, consistent design
- Codegraph Integration - Used for architecture analysis
- Parser: AST-grep with 25 language support
- Graph: Rustworkx (489 nodes, 4,475 relationships for core codebase)
- Cache: Redis with msgpack serialization
- API: FastAPI with async endpoints
- Framework: Vue 3 + Vite + Pinia
- UI: DaisyUI + Tailwind CSS
- Components: NodeTile, ConnectionsList, CategoryCard
- API Client: Axios with type-safe wrappers
- Docker Compose: Multi-service stack (HTTP, SSE, Redis, Frontend)
- Networking: Frontend localhost:5173 → Backend localhost:8000
- Deployment: Dev and prod Dockerfiles for each service
- 95%+ relationship accuracy for Python (vs manual validation)
- Deterministic analysis (same results across runs)
- Support for implicit calls (decorators, async, etc.)
- Cross-language seam detection working
- Handle 10,000+ node graphs without lag
- Desktop-optimized layout with multi-column views
- Code preview on hover/selection
- Keyboard navigation throughout
- Clear documentation for new contributors
- Comprehensive test coverage (unit + integration)
- Easy local development setup
- CI/CD pipeline for automated testing
- Add limit/offset to backend query endpoints
- Implement "Load More" in ConnectionsList
- Fix horizontal scroll layout bug
- Filter stdlib imports from categories
- Multi-column layout with pinned panels
- Code preview panel integration
- Keyboard navigation implementation
- Data table view for large lists
- Create Python test suite with known call graphs
- Implement symbol counting validation tools
- Test TypeScript and C# support
- Document relationship accuracy metrics
- Neo4j migration spike
- Force-graph visualization with WebSocket events
- LLM integration for code analysis
- Saved searches and bookmarking
- Export/share functionality
- Parser patterns for all languages
- Relationship generation (CALLS, CONTAINS, IMPORTS)
- Category detection (entry points, hubs, leaves)
- Redis cache persistence
- End-to-end API flows
- Frontend component interactions
- Docker stack deployment
- Known call graph comparison
- Symbol count verification
- Multi-parser accuracy comparison
- Performance benchmarks
- Graph Completeness: How do we measure if we're capturing all relationships?
- Import Filtering: Should we exclude all stdlib imports or just from certain views?
- Pagination Strategy: Virtual scrolling vs "Load More" vs traditional pagination?
- Neo4j Migration: Worth the complexity for Cypher query power?
- Desktop vs Mobile: Build separate UIs or one responsive design?
- Cortexgraph MCP is excellent for session continuity (8 memories saved Session 12)
- Codegraph MCP useful for architecture insights (circular deps, critical nodes)
- Always test with high-degree nodes like
reto catch performance issues - Playwright essential for real UX validation
- Trust rustworkx - focus on AST-grep pattern accuracy, not graph library bugs