Clone this repository
For self-hosted knots, clone URLs may differ based on your setup.
Download tar.gz
- Replace dagre with cytoscape-elk for proper layered graph layout
- Add post-layout edge routing that curves skip connections around
intermediate nodes with staggered offsets to prevent crossovers
- Fixed-size 40px circular nodes with thin coloured borders
- Thin 1px black edges with small arrows
- Add Playwright browser env vars to flake.nix for NixOS
Implements Phase 6 tasks 1-4:
Task 1: Add physicalLayout() to layout.ts
- Exports new physical layout function with tighter spacing
- Uses dagre top-to-bottom layout for PE cluster visualization
Task 2: Add PE cluster, cross-PE, and intra-PE styles to style.ts
- PE cluster parent nodes: rounded rectangle with solid border
- Cross-PE edges: thicker, darker (3px, #5c6bc0)
- Intra-PE edges: lighter (1.5px, #bbb)
Task 3: Add view toggle and physical element building to main.ts
- buildPhysicalLabel(): formats nodes with [iram:offset, ctx:slot] annotations
- buildPhysicalElements(): creates PE cluster nodes and assigns children
- View mode tracking: logical (default) or physical
- Toggle button in index.html switches between views
- Physical view only available when stage == 'allocate'
- Disables toggle and reverts to logical if graph becomes incomplete
Task 4: Manual verification
- esbuild bundle succeeds without errors (1.2mb)
- Full test suite passes: 608/608 tests
- Frontend builds successfully with npm run build
Acceptance criteria covered:
- AC3.1: Nodes grouped into PE cluster boxes by PE ID
- AC3.2: Nodes annotated with IRAM offset and context slot
- AC3.3: Cross-PE edges visually distinct from intra-PE
- AC3.4: Physical view unavailable when stage != 'allocate'
- Add types.ts: TypeScript interfaces matching graph JSON from backend
- GraphNode, GraphEdge, GraphRegion, GraphUpdate types
- SourceLoc, AddrInfo, GraphError interfaces
- Add style.ts: cytoscape stylesheet for logical view
- Node styling: circular ellipses with centered labels
- Category-based colors from backend (arithmetic, logic, comparison, etc.)
- Edge annotations: port labels at target, branch labels at source
- Function regions: dashed bounding boxes
- Error styling: red dashed borders
- Add layout.ts: dagre hierarchical layout configuration
- Top-to-bottom layout with configurable spacing
- Settings: rankDir=TB, nodeSep=60, rankSep=80, edgeSep=20
- Rewrite main.ts: WebSocket client and graph rendering
- Connect to ws://host/ws, receive graph_update JSON messages
- Convert JSON to cytoscape elements with proper labels and styling
- buildLabel: includes opcode + constant value when present
- buildElements: creates nodes, regions, and edges from update
- renderGraph: batch update with dagre layout and auto-fit
- Auto-reconnect on WebSocket close (2s timeout)
- Handle routing ops: source labels (T/F) from source_port
- Handle regions: compound parent nodes for functions
All modules verified to build with esbuild. Bundle size: 1.2MB.
Test suite: 608/608 tests passing.