blob: 27a80ac96a543210d29df80a085ebf944a11377a (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import { useMemo } from "react";
import type { DirectiveStep } from "../../lib/api";
import { StepNode } from "./StepNode";
interface DirectiveDAGProps {
steps: DirectiveStep[];
onComplete?: (stepId: string) => void;
onFail?: (stepId: string) => void;
onSkip?: (stepId: string) => void;
}
interface Layer {
steps: DirectiveStep[];
}
function topoSort(steps: DirectiveStep[]): Layer[] {
if (steps.length === 0) return [];
// Group steps by orderIndex — each unique orderIndex is one execution phase
const byOrder = new Map<number, DirectiveStep[]>();
for (const step of steps) {
const group = byOrder.get(step.orderIndex) ?? [];
group.push(step);
byOrder.set(step.orderIndex, group);
}
// Sort groups by ascending orderIndex
const sortedKeys = [...byOrder.keys()].sort((a, b) => a - b);
return sortedKeys.map((key) => ({
steps: byOrder.get(key)!.sort((a, b) => a.name.localeCompare(b.name)),
}));
}
export function DirectiveDAG({ steps, onComplete, onFail, onSkip }: DirectiveDAGProps) {
const layers = useMemo(() => topoSort(steps), [steps]);
if (steps.length === 0) {
return (
<div className="text-center py-8 text-[#7788aa] font-mono text-sm">
No steps yet. Add steps to build the DAG.
</div>
);
}
return (
<div className="flex flex-col gap-4 items-center py-4">
{layers.map((layer, layerIdx) => (
<div key={layerIdx}>
{layerIdx > 0 && (
<div className="flex justify-center py-1">
<div className="w-px h-4 bg-[#2a3a5a]" />
</div>
)}
<div className="flex flex-wrap gap-3 justify-center">
{layer.steps.map((step) => (
<StepNode
key={step.id}
step={step}
onComplete={onComplete ? () => onComplete(step.id) : undefined}
onFail={onFail ? () => onFail(step.id) : undefined}
onSkip={onSkip ? () => onSkip(step.id) : undefined}
/>
))}
</div>
</div>
))}
</div>
);
}
|
