feat: add glow edge system with directional selection animation

Custom bezier edges with gradient glow for the flow editor:
- Default: subtle white/gray gradient with soft glow
- Downstream (cyan): animated flowing dashes from selected node through subtree
- Upstream (amber): animated flow from selected node back to root
- Cross-reference: dashed cyan with arrow markers
- SVG gradient + filter defs for performant rendering

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-09 04:36:46 -04:00
parent d06abe5829
commit b28a096738
4 changed files with 311 additions and 15 deletions

View File

@@ -0,0 +1,48 @@
# Glow Edge System — Flow Editor
> **Date:** 2026-03-09
## Overview
Replace flat `smoothstep` edges in the troubleshooting flow editor with custom bezier edges featuring gradient strokes, soft glow, and directional animation on node selection.
## Default Edges (no selection)
- **Curve type:** Bezier (replacing right-angled `smoothstep`)
- **Stroke:** ~1.5px, subtle white/gray gradient with soft `drop-shadow` glow
- **Feel:** Clean, understated, dark-mode friendly
## Selected Node — Downstream Edges
- **Color:** Cyan brand gradient (`#06b6d4``#22d3ee`)
- **Animation:** Flowing dash animation moving downward (`stroke-dashoffset` keyframe)
- **Scope:** All edges from selected node through entire subtree (children, grandchildren, etc.)
- **Glow:** Soft cyan `drop-shadow` filter
- **Stroke:** 2px
## Selected Node — Upstream Edges
- **Color:** Amber gradient (`#f59e0b``#fbbf24`)
- **Animation:** Softer pulse/breathing opacity animation moving upward toward root
- **Scope:** All edges from selected node back to root
- **Glow:** Soft amber `drop-shadow` filter
- **Stroke:** 2px
## Cross-reference Edges
- Keep dashed + animated + cyan with arrows
- Use new bezier curves + glow treatment
## Implementation
- One custom `GlowEdge` component registered as the default edge type in React Flow
- `useTreeLayout` passes `edgeState: 'default' | 'downstream' | 'upstream'` in edge data based on `selectedNodeId`
- SVG `linearGradient` + `filter` defined once in a `<defs>` block
- CSS keyframe animation for flowing dash effect
## Files Touched
- **New:** `frontend/src/components/tree-editor/GlowEdge.tsx` (~60 lines)
- **Modified:** `useTreeLayout.ts` — add ancestor/descendant calculation, edge state
- **Modified:** `FlowCanvas.tsx` — register custom edge type
- **Modified:** `index.css` — keyframe animation for flowing dashes