jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
canvas-website/backlog/tasks/task-042 - 3D-Network-Graph...

1.7 KiB
Raw Blame History

id title status assignee created_date labels dependencies priority
task-042 3D Network Graph Visualization & Edge Metadata Editor To Do
2025-12-06 06:46
feature
visualization
3d
networking
task-041
medium

Description

Build the 3D interactive network visualization at graph.jeffemmett.com and implement the edge metadata editor modal. This extends the 2D minimap created in task-041.

Key Features:

  1. 3D Force Graph at graph.jeffemmett.com

    • Three.js / react-force-graph-3d visualization
    • Full-screen, interactive (spin, zoom, pan)
    • Click nodes to view user profiles
    • Click edges to edit metadata
    • Same trust level coloring (grey/yellow/green)
    • Real-time presence sync with canvas rooms

  2. Edge Metadata Editor Modal

    • Opens on edge click in 2D minimap or 3D view
    • Edit: label, notes, color, strength (1-10)
    • Private to each party on the edge
    • Bidirectional - each user has their own metadata view

  3. Expand Button Integration

    • 2D minimap expand button opens 3D view
    • URL sharing for specific graph views
    • Optional: embed 3D graph back in canvas as iframe

Acceptance Criteria

  • #1 3D force graph at graph.jeffemmett.com renders user network
  • #2 Graph is interactive: spin, zoom, pan, click nodes/edges
  • #3 Edge metadata editor modal allows editing label, notes, color, strength
  • #4 Edge metadata persists to D1 and is private per-user
  • #5 Expand button in 2D minimap opens 3D view
  • #6 Real-time updates when connections change
  • #7 Trust level colors match 2D minimap (grey/yellow/green)