39 lines
1.7 KiB
Markdown
39 lines
1.7 KiB
Markdown
---
|
|
id: TASK-108
|
|
title: rNetwork CRM — inline force-directed graph in Graph tab
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-03-11 21:38'
|
|
updated_date: '2026-03-11 21:38'
|
|
labels:
|
|
- rnetwork
|
|
- frontend
|
|
- graph
|
|
dependencies:
|
|
- TASK-98
|
|
references:
|
|
- modules/rnetwork/components/folk-crm-view.ts
|
|
priority: medium
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Replace the Graph tab's external link with an interactive SVG graph rendered directly inside folk-crm-view.ts using the CRM data already loaded (people, companies, opportunities). Companies appear as colored clusters with people orbiting around them. Cross-org opportunity links shown as dashed purple edges. Includes pan/zoom/drag interactions and auto fit-to-view.
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 Graph tab renders inline SVG with company clusters and person nodes
|
|
- [x] #2 Force-directed layout with pan/zoom/drag interactions
|
|
- [x] #3 Cross-org edges from opportunities shown as dashed purple lines
|
|
- [x] #4 Auto fit-to-view on tab switch, empty state for no data
|
|
- [x] #5 Vite build passes with no TS errors
|
|
<!-- AC:END -->
|
|
|
|
## Final Summary
|
|
|
|
<!-- SECTION:FINAL_SUMMARY:BEGIN -->
|
|
Implemented in commit c36b0ab on dev, merged to main.\n\nAdded ~460 lines to folk-crm-view.ts:\n- buildGraphData() derives nodes/edges from CRM people, companies, opportunities\n- computeGraphLayout() runs 70-iteration force simulation\n- renderGraphTab() outputs SVG with cluster/edge/node layers + zoom controls + legend\n- Full pointer interactions: drag nodes, pan canvas, wheel zoom, click-to-select\n- updateGraphNodePosition() for incremental drag without re-render
|
|
<!-- SECTION:FINAL_SUMMARY:END -->
|