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>
49 lines
1.8 KiB
Markdown
49 lines
1.8 KiB
Markdown
# 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
|