Files

chihlasm b28a096738 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>

2026-03-09 04:36:46 -04:00

1.8 KiB

Raw Blame History

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

1.8 KiB Raw Blame History