mirror of
https://github.com/tiennm99/goclaw.git
synced 2026-10-03 05:20:01 +00:00
viettranx
79b5dba5c7
Replace react-force-graph-2d (Canvas 2D, 500-node ceiling) with Sigma.js (WebGL, 5k+ nodes at 60fps) for vault and knowledge graph visualization. Layout pipeline uses Louvain community detection + grid seeding + FA2 refinement + noverlap post-processing. Communities are placed in a grid (sorted by size) so related nodes cluster visually instead of collapsing into a ring shape. Shared graph infrastructure in ui/web/src/components/graph/: - sigma-graph-container: lifecycle, synchronous pre-computed layout, 2-hop BFS highlight on hover, opacity edge pulse, prefers-reduced-motion - sigma-graph-controls: reusable zoom/stats bar with camera tracking - sigma-graph-search: combobox with ARIA wiring and keyboard navigation - sigma-graph-filters: type filter dropdown (outside-click + Escape) - sigma-graph-minimap: canvas overlay with viewport rect + click-to-jump - sigma-graph-keyboard-help: help popover triggered by ? key - use-sigma-keyboard: +/- R F Esc / shortcuts - graph-utils: sizing, middle-truncation helpers Adapters rewritten to output Graphology Graph instances. Both views use curved arrow edges, focus ring for keyboard users, role="application" ARIA, responsive top bar, and node limits up to 5k. Removes react-force-graph-2d, d3-force, @types/d3-force. Adds sigma, @sigma/edge-curve, graphology, graphology-layout, graphology-layout-forceatlas2, graphology-layout-noverlap, graphology-communities-louvain, graphology-types.