a108b57591
Batch 1 — Bug fixes: - #51: Pass group+routeId to stats/timeseries API for route-scoped data - #55: Propagate processor FAILED status to diagram error node highlighting Batch 2 — Visual polish: - #56: Brighter canvas background with amber/cyan radial gradients - #57: Stronger glow filters (stdDeviation 3→6, opacity 0.4→0.6) - #58: Uniform 200×40px leaf nodes with label truncation at 22 chars - #59: Diagram legend (node types, edge types, overlay indicators) - #64: SVG <title> tooltips on all nodes showing type, status, duration Batch 3 — Interactive features: - #60: Draggable minimap viewport (click-to-center, drag-to-pan) - #62: CSS View Transitions slide animation, back arrow, Backspace key Batch 4 — Advanced features: - #50: Execution picker dropdown scoped to group+routeId - #49: Iteration count badge (×N) on compound nodes - #63: Route header stats (Executions Today, Success Rate, Avg, P99) Closes #49 #50 #51 #55 #56 #57 #58 #59 #60 #62 #63 #64 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
/** SVG definitions: arrow markers, glow filters, gradient fills */
|
|
export function SvgDefs() {
|
|
return (
|
|
<defs>
|
|
{/* Arrow marker for edges */}
|
|
<marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3"
|
|
orient="auto" markerUnits="strokeWidth">
|
|
<path d="M0,0 L8,3 L0,6" fill="#4a5e7a" />
|
|
</marker>
|
|
<marker id="arrowhead-executed" markerWidth="8" markerHeight="6" refX="8" refY="3"
|
|
orient="auto" markerUnits="strokeWidth">
|
|
<path d="M0,0 L8,3 L0,6" fill="#3fb950" />
|
|
</marker>
|
|
<marker id="arrowhead-error" markerWidth="8" markerHeight="6" refX="8" refY="3"
|
|
orient="auto" markerUnits="strokeWidth">
|
|
<path d="M0,0 L8,3 L0,6" fill="#f85149" />
|
|
</marker>
|
|
|
|
{/* Glow filters */}
|
|
<filter id="glow-green" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur stdDeviation="6" result="blur" />
|
|
<feFlood floodColor="#3fb950" floodOpacity="0.6" result="color" />
|
|
<feComposite in="color" in2="blur" operator="in" result="shadow" />
|
|
<feMerge>
|
|
<feMergeNode in="shadow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow-red" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur stdDeviation="6" result="blur" />
|
|
<feFlood floodColor="#f85149" floodOpacity="0.6" result="color" />
|
|
<feComposite in="color" in2="blur" operator="in" result="shadow" />
|
|
<feMerge>
|
|
<feMergeNode in="shadow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow-blue" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur stdDeviation="6" result="blur" />
|
|
<feFlood floodColor="#58a6ff" floodOpacity="0.6" result="color" />
|
|
<feComposite in="color" in2="blur" operator="in" result="shadow" />
|
|
<feMerge>
|
|
<feMergeNode in="shadow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glow-purple" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feGaussianBlur stdDeviation="6" result="blur" />
|
|
<feFlood floodColor="#b87aff" floodOpacity="0.6" result="color" />
|
|
<feComposite in="color" in2="blur" operator="in" result="shadow" />
|
|
<feMerge>
|
|
<feMergeNode in="shadow" />
|
|
<feMergeNode in="SourceGraphic" />
|
|
</feMerge>
|
|
</filter>
|
|
|
|
{/* Flow particle gradient */}
|
|
<radialGradient id="particle-gradient">
|
|
<stop offset="0%" stopColor="#3fb950" stopOpacity="1" />
|
|
<stop offset="100%" stopColor="#3fb950" stopOpacity="0" />
|
|
</radialGradient>
|
|
</defs>
|
|
);
|
|
}
|