root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-3082): restructure dependency graph plugin with modular architectur

Browse Source 
Implements a modular dependency graph feature for the Fusion dashboard plugin, replacing the monolithic `DependencyGraphView` component with a factored architecture: graph types and filtering (Step 1), a data hook (Step 2), auto-layout engine (Step 3), SVG edge rendering (Step 4), an interaction hoo

Fusion-Task-Id: FN-3082
This commit is contained in:
Fusion
2026-05-07 01:34:57 -07:00
committed by gsxdsm
parent fa57034c05
commit 12326eeb00
28 changed files with 1021 additions and 928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
plugins/fusion-plugin-dependency-graph/README.md
View File

@@ -2,34 +2,19 @@
Plugin-provided top-level **Graph** dashboard view for Fusion.
- Registers `dashboardViews: [{ viewId: "graph", placement: "more" }]`
- Renders active task dependency graph for `triage`, `todo`, `in-progress`, `in-review`
- Excludes `done` and `archived`
- Persists drag positions in browser localStorage at:
- `kb:${projectId}:dependency-graph-positions`
## Rendering approach
The first version uses a lightweight custom SVG/HTML renderer (no React Flow dependency).
- **Filtering**: includes `triage`, `todo`, `in-progress`, `in-review`; excludes `done`, `archived`
- **Graph build**: edges are resolved only from `task.dependencies` as `source=dependent`, `target=dependency`
- **Auto-layout**: Sugiyama-style layered layout (`computeAutoLayout`) groups nodes by dependency depth and spaces layers consistently
- **Edge drawing**: SVG bezier curves from source bottom-center to target top-center, with arrowheads showing dependent → dependency direction
- **Interaction**: pan, wheel zoom, pinch zoom, zoom-in/out controls, reset, and fit-to-screen
- **Fit-to-screen**: computes node bounding box with layout node dimensions and applies zoom/pan so the graph fits in viewport with padding
## Mobile Support
## Controls
The dependency graph view is fully usable on mobile devices:
- **Fit to screen** (`Maximize`)
- **Zoom in** (`ZoomIn`)
- **Zoom out** (`ZoomOut`)
- **Pinch-to-zoom** — Two-finger pinch gestures scale the graph proportionally, clamped to `[0.4×, 2×]`
- **Mouse wheel zoom** — Desktop users can scroll-wheel to zoom toward the pointer position
- **Auto-fit on mobile** — On initial mobile load, the graph automatically fits all nodes into the viewport
- **Touch-friendly controls** — Zoom In, Zoom Out, and Fit buttons have 44px minimum touch targets on mobile
- **Sticky control bar** — Controls remain accessible at the top of the viewport while panning the graph on mobile
- **Touch-action isolation** — `touch-action: none` on the canvas prevents browser gesture interference with custom pan/zoom
- **Empty state** — When no active tasks exist, a centered message guides the user instead of showing an empty canvas
### Supported Interactions
| Input | Action |
|-------|--------|
| Single pointer drag on canvas | Pan the graph |
| Single pointer drag on node | Move the node |
| Single pointer click on node | Open task detail |
| Two-finger pinch | Zoom in/out |
| Mouse wheel | Zoom toward pointer |
| Zoom In / Zoom Out buttons | Step zoom ±0.1× |
| Fit button | Auto-fit all nodes to viewport |
All controls are rendered as floating `.btn-icon` actions in the bottom-right corner, with mobile-friendly sizing in the `@media (max-width: 768px)` override.