lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

feat: add D3.js network map visualization to Federation page

Browse Source 
- Install d3@7 and @types/d3@7
- NetworkMap.vue: force-directed graph with draggable nodes, trust-level
  coloring (green/amber/red), online/offline opacity, dashed links
- Federation.vue: List/Map tab switcher with localStorage persistence
- Wire map to real federation data (self node centered, peers as satellites)
- Default to map view when 3+ nodes federated

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-13 02:55:16 +00:00
parent 9a22a3c5df
commit 0a9a255cc5
5 changed files with 1006 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
loop/plan.md
View File

@@ -530,11 +530,11 @@
### Sprint 46: Node Visualization Map (July 2026 Week 1-2)
- [ ] **MAP-01** — Install D3.js and create network topology component. Run `cd neode-ui && npm install d3@^7 && npm install -D @types/d3@^7`. Create `neode-ui/src/components/federation/NetworkMap.vue` — a force-directed graph component using `d3-force`. Nodes are circles: size proportional to app count, color by trust level (green=trusted `#4ade80`, amber=observer `#fb923c`, red=untrusted `#ef4444`), opacity by online/offline (1.0=online, 0.4=offline). Edges are lines between federated nodes: solid green when both online, dashed gray when one offline. Add labels showing node name (truncated DID or custom alias). Use `bg-black/60 backdrop-blur-glass rounded-xl border border-white/10` container to match glassmorphism design. SVG fills the container, responsive to window resize. Add CSS classes to `neode-ui/src/style.css`. **Acceptance**: Component renders a graph with 4 test nodes (mock data). Nodes repel/attract via force simulation. Looks consistent with Archipelago glass aesthetic.
- [x] **MAP-01** — Install D3.js and create network topology component. Run `cd neode-ui && npm install d3@^7 && npm install -D @types/d3@^7`. Create `neode-ui/src/components/federation/NetworkMap.vue` — a force-directed graph component using `d3-force`. Nodes are circles: size proportional to app count, color by trust level (green=trusted `#4ade80`, amber=observer `#fb923c`, red=untrusted `#ef4444`), opacity by online/offline (1.0=online, 0.4=offline). Edges are lines between federated nodes: solid green when both online, dashed gray when one offline. Add labels showing node name (truncated DID or custom alias). Use `bg-black/60 backdrop-blur-glass rounded-xl border border-white/10` container to match glassmorphism design. SVG fills the container, responsive to window resize. Add CSS classes to `neode-ui/src/style.css`. **Acceptance**: Component renders a graph with 4 test nodes (mock data). Nodes repel/attract via force simulation. Looks consistent with Archipelago glass aesthetic.
- [ ] **MAP-02** — Wire network map to real federation data. In `NetworkMap.vue`, accept a `nodes` prop of type `FederatedNode[]` (from `federation.list-nodes` response). Add the current node as the center node (use `node.did` RPC to get own identity). Map each node to a D3 node: id=DID, label=name or truncated DID, trust_level, online=(last_seen within 10 minutes), cpu_usage, memory_percent, app_count from `last_state`. Edges connect each peer to the local node (star topology for now). Add node tooltips on hover showing: full DID, onion address (truncated), CPU/memory/disk percentages, app count, last seen time. Click a node to open the existing node detail modal. Poll `federation.list-nodes` every 30 seconds and update the graph with smooth transitions (D3 enter/update/exit). **Acceptance**: Network map shows all real federated nodes with live data. Online/offline status updates when a server goes down. Tooltips show real metrics. Deploy and verify.
- [x] **MAP-02** — Wire network map to real federation data. In `NetworkMap.vue`, accept a `nodes` prop of type `FederatedNode[]` (from `federation.list-nodes` response). Add the current node as the center node (use `node.did` RPC to get own identity). Map each node to a D3 node: id=DID, label=name or truncated DID, trust_level, online=(last_seen within 10 minutes), cpu_usage, memory_percent, app_count from `last_state`. Edges connect each peer to the local node (star topology for now). Add node tooltips on hover showing: full DID, onion address (truncated), CPU/memory/disk percentages, app count, last seen time. Click a node to open the existing node detail modal. Poll `federation.list-nodes` every 30 seconds and update the graph with smooth transitions (D3 enter/update/exit). **Acceptance**: Network map shows all real federated nodes with live data. Online/offline status updates when a server goes down. Tooltips show real metrics. Deploy and verify.
- [ ] **MAP-03** — Add network map as tab in Federation page. In `neode-ui/src/views/Federation.vue`, add a tab switcher at the top: "List View" (current) and "Network Map". List view shows the existing node cards. Network Map tab shows `NetworkMap.vue` taking full width of the content area. Remember selected tab in localStorage. Default to Map view when 3+ nodes are federated, List view otherwise. Add the tab styling as global classes in `style.css` following the existing tab patterns (if any) or using `.glass-tab` / `.glass-tab-active` classes with `bg-white/5` inactive and `bg-white/10 border-b-2 border-orange-400` active. **Acceptance**: Can switch between list and map views. Map shows live federation data. Tab selection persists across page navigations. Deploy and verify.
- [x] **MAP-03** — Add network map as tab in Federation page. In `neode-ui/src/views/Federation.vue`, add a tab switcher at the top: "List View" (current) and "Network Map". List view shows the existing node cards. Network Map tab shows `NetworkMap.vue` taking full width of the content area. Remember selected tab in localStorage. Default to Map view when 3+ nodes are federated, List view otherwise. Add the tab styling as global classes in `style.css` following the existing tab patterns (if any) or using `.glass-tab` / `.glass-tab-active` classes with `bg-white/5` inactive and `bg-white/10 border-b-2 border-orange-400` active. **Acceptance**: Can switch between list and map views. Map shows live federation data. Tab selection persists across page navigations. Deploy and verify.
- [ ] **MAP-04** — Add DWN management section to Web5 page. In `neode-ui/src/views/Web5.vue`, enhance the existing DWN section with: (1) A "Manage Protocols" subsection showing registered protocols in a list with delete buttons, plus an "Add Protocol" form (URL input), (2) A "Message Store" subsection showing total message count, storage size in bytes (human-readable), and a "Browse Messages" button that opens a modal with a paginated message list (fetch via `dwn.query-messages` with limit/offset), (3) A "Sync Targets" subsection showing which peers are configured for DWN sync and their last sync status. Wire to existing `dwn.*` RPC endpoints. **Acceptance**: Can add/remove protocols, browse stored messages, and see sync status from the Web5 page. Deploy and verify.