cameleer/cameleer-server
1
0
Fork 0
Code Issues 42 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add traversed/not-traversed visual states to DiagramEdge

Browse Source 
Add green solid edges for traversed paths and dashed gray for
not-traversed when execution overlay is active. Includes green
arrowhead marker and overlay threading through CompoundNode and
ErrorSection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-27 18:47:59 +01:00
parent 2b805ec196
commit 3029704051
4 changed files with 61 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/components/ProcessDiagram/DiagramEdge.tsx
View File

@@ -3,9 +3,11 @@ import type { DiagramEdge as DiagramEdgeType } from '../../api/queries/diagrams'
interface DiagramEdgeProps {
edge: DiagramEdgeType;
offsetY?: number;
/** undefined = no overlay (default gray solid), true = traversed (green solid), false = not traversed (gray dashed) */
traversed?: boolean | undefined;
}
export function DiagramEdge({ edge, offsetY = 0 }: DiagramEdgeProps) {
export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps) {
const pts = edge.points;
if (!pts || pts.length < 2) return null;
@@ -29,9 +31,10 @@ export function DiagramEdge({ edge, offsetY = 0 }: DiagramEdgeProps) {
<path
d={d}
fill="none"
stroke="#9CA3AF"
strokeWidth={1.5}
markerEnd="url(#arrowhead)"
stroke={traversed === true ? '#3D7C47' : '#9CA3AF'}
strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
strokeDasharray={traversed === false ? '4,3' : undefined}
markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
/>
{edge.label && pts.length >= 2 && (
<text