Michael Chihlas
cbb4b25671
CI surfaced react-hooks/set-state-in-effect on the synchronous setState(computeState(token)) inside the useEffect body. The earlier shape mirrored token -> state via an effect, which is exactly the "you might not need an effect" pattern React 19's eslint rule now flags. Switch to derived state: compute during render, use a useReducer tick to force re-render on the 30s cadence (so relative timestamps stay current even when token props don't change). Same observable behavior, no cascading renders. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1.8 KiB
1.8 KiB
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-shadowglow - Feel: Clean, understated, dark-mode friendly
Selected Node — Downstream Edges
- Color: Cyan brand gradient (
#06b6d4→#22d3ee) - Animation: Flowing dash animation moving downward (
stroke-dashoffsetkeyframe) - Scope: All edges from selected node through entire subtree (children, grandchildren, etc.)
- Glow: Soft cyan
drop-shadowfilter - 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-shadowfilter - Stroke: 2px
Cross-reference Edges
- Keep dashed + animated + cyan with arrows
- Use new bezier curves + glow treatment
Implementation
- One custom
GlowEdgecomponent registered as the default edge type in React Flow useTreeLayoutpassesedgeState: 'default' | 'downstream' | 'upstream'in edge data based onselectedNodeId- SVG
linearGradient+filterdefined 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