chore: remove debug artifacts from PR

Remove elk_viewer test page, console log dumps, and layout screenshots
that were used during development.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Guilhem
2026-03-04 12:44:45 +00:00
co-authored by Claude Opus 4.6
parent 6322988d45
commit 784c21ba77
27 changed files with 0 additions and 2208 deletions
-694
View File
@@ -1,694 +0,0 @@
Total messages: 23 (Errors: 0, Warnings: 1)
[DEBUG] Building graph @ http://localhost:5183/src/lib/components/graph/graphBuilder.svelte.ts?t=1772535251657:65
[DEBUG] layoutNodes same nodes @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:516
[DEBUG] [vite] connecting... @ http://localhost:5183/@vite/client:730
[DEBUG] [vite] connected. @ http://localhost:5183/@vite/client:832
[DEBUG] Building graph @ http://localhost:5183/src/lib/components/graph/graphBuilder.svelte.ts?t=1772535251657:65
[DEBUG] Building graph @ http://localhost:5183/src/lib/components/graph/graphBuilder.svelte.ts?t=1772535251657:65
[DEBUG] layoutNodes 3 @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:521
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [Input]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:535
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-Input-Result",
"sources": [
"Input"
],
"targets": [
"Result"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:536
[LOG] cancelling request: {reason: saveAndClear, abortController: undefined} @ http://localhost:5183/src/lib/components/copilot/chat/AIChatManager.svelte.ts?t=1772535251800:1024
[LOG] loadFlow @ http://localhost:5183/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte?t=1772544066222:100
[LOG] ELK result: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34,
"$H": 277,
"x": 12,
"y": 12
},
{
"id": "Input",
"width": 275,
"height": 34,
"$H": 279,
"x": 12,
"y": 108
},
{
"id": "Result",
"width": 275,
"height": 34,
"$H": 281,
"x": 12,
"y": 204
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
],
"sections": [
{
"id": "e-Trigger-Input_s0",
"startPoint": {
"x": 150,
"y": 46
},
"endPoint": {
"x": 150,
"y": 108
},
"incomingShape": "Trigger",
"outgoingShape": "Input"
}
],
"container": "root"
},
{
"id": "e-Input-Result",
"sources": [
"Input"
],
"targets": [
"Result"
],
"sections": [
{
"id": "e-Input-Result_s0",
"startPoint": {
"x": 150,
"y": 142
},
"endPoint": {
"x": 150,
"y": 204
},
"incomingShape": "Input",
"outgoingShape": "Result"
}
],
"container": "root"
}
],
"$H": 13,
"x": 0,
"y": 0,
"width": 299,
"height": 250
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:540
[LOG] Welcome back admin to testing @ http://localhost:5183/src/routes/(root)/+layout.svelte?t=1772535251800:68
[WARNING] using deprecated parameters for the initialization function; pass a single object instead @ http://localhost:5183/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=5452fe86:3211
[DEBUG] Building graph @ http://localhost:5183/src/lib/components/graph/graphBuilder.svelte.ts?t=1772535251657:65
[DEBUG] Building graph @ http://localhost:5183/src/lib/components/graph/graphBuilder.svelte.ts?t=1772535251657:65
[DEBUG] Building graph @ http://localhost:5183/src/lib/components/graph/graphBuilder.svelte.ts?t=1772535251657:65
[DEBUG] layoutNodes 14 @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:521
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [a-end], a(module) ← [Input], a-end(branchAllEnd) ← [c,d,g], a-branch-0(branchAllStart) ← [a], b(module) ← [a-branch-0], c(module) ← [b], a-branch-1(branchAllStart) ← [a], d(module) ← [a-branch-1], a-branch-2(branchAllStart) ← [a], e(module) ← [a-branch-2], f(module) ← [e], g(module) ← [f]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:535
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
},
{
"id": "a-end",
"width": 275,
"height": 34
},
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.spacing.nodeNode": "50",
"elk.separateConnectedComponents": "false",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
"elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
"elk.layered.nodePlacement.bk.fixedAlignment": "LEFTUP"
},
"children": [
{
"id": "a-branch-0",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "b",
"width": 275,
"height": 34
},
{
"id": "c",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-b-c",
"sources": [
"b"
],
"targets": [
"c"
]
}
]
},
{
"id": "a-branch-1",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "d",
"width": 275,
"height": 34
}
],
"edges": []
},
{
"id": "a-branch-2",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "e",
"width": 275,
"height": 34
},
{
"id": "f",
"width": 275,
"height": 34
},
{
"id": "g",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-e-f",
"sources": [
"e"
],
"targets": [
"f"
]
},
{
"id": "e-f-g",
"sources": [
"f"
],
"targets": [
"g"
]
}
]
}
]
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-a-end-Result",
"sources": [
"a-end"
],
"targets": [
"Result"
]
},
{
"id": "e-Input-a",
"sources": [
"Input"
],
"targets": [
"a"
]
},
{
"id": "e-a-a-end",
"sources": [
"a"
],
"targets": [
"a-end"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:536
[LOG] ELK result: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34,
"$H": 352,
"x": 385,
"y": 12
},
{
"id": "Input",
"width": 275,
"height": 34,
"$H": 354,
"x": 385,
"y": 108
},
{
"id": "Result",
"width": 275,
"height": 34,
"$H": 356,
"x": 385,
"y": 636
},
{
"id": "a-end",
"width": 275,
"height": 34,
"$H": 358,
"x": 385,
"y": 540
},
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.spacing.nodeNode": "50",
"elk.separateConnectedComponents": "false",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
"elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
"elk.layered.nodePlacement.bk.fixedAlignment": "LEFTUP"
},
"children": [
{
"id": "a-branch-0",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "b",
"width": 275,
"height": 34,
"$H": 364,
"x": 12,
"y": 12
},
{
"id": "c",
"width": 275,
"height": 34,
"$H": 366,
"x": 12,
"y": 108
}
],
"edges": [
{
"id": "e-b-c",
"sources": [
"b"
],
"targets": [
"c"
],
"sections": [
{
"id": "e-b-c_s0",
"startPoint": {
"x": 149.5,
"y": 46
},
"endPoint": {
"x": 149.5,
"y": 108
},
"incomingShape": "b",
"outgoingShape": "c"
}
],
"container": "a-branch-0"
}
],
"$H": 362,
"x": 12,
"y": 60,
"width": 299,
"height": 154
},
{
"id": "a-branch-1",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "d",
"width": 275,
"height": 34,
"$H": 370,
"x": 12,
"y": 12
}
],
"edges": [],
"$H": 368,
"x": 361,
"y": 108,
"width": 299,
"height": 58
},
{
"id": "a-branch-2",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "e",
"width": 275,
"height": 34,
"$H": 374,
"x": 12,
"y": 12
},
{
"id": "f",
"width": 275,
"height": 34,
"$H": 376,
"x": 12,
"y": 108
},
{
"id": "g",
"width": 275,
"height": 34,
"$H": 378,
"x": 12,
"y": 204
}
],
"edges": [
{
"id": "e-e-f",
"sources": [
"e"
],
"targets": [
"f"
],
"sections": [
{
"id": "e-e-f_s0",
"startPoint": {
"x": 149.5,
"y": 46
},
"endPoint": {
"x": 149.5,
"y": 108
},
"incomingShape": "e",
"outgoingShape": "f"
}
],
"container": "a-branch-2"
},
{
"id": "e-f-g",
"sources": [
"f"
],
"targets": [
"g"
],
"sections": [
{
"id": "e-f-g_s0",
"startPoint": {
"x": 149.5,
"y": 142
},
"endPoint": {
"x": 149.5,
"y": 204
},
"incomingShape": "f",
"outgoingShape": "g"
}
],
"container": "a-branch-2"
}
],
"$H": 372,
"x": 710,
"y": 12,
"width": 299,
"height": 250
}
],
"$H": 360,
"x": 12,
"y": 204,
"width": 1021,
"height": 274
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
],
"sections": [
{
"id": "e-Trigger-Input_s0",
"startPoint": {
"x": 523,
"y": 46
},
"endPoint": {
"x": 523,
"y": 108
},
"incomingShape": "Trigger",
"outgoingShape": "Input"
}
],
"container": "root"
},
{
"id": "e-a-end-Result",
"sources": [
"a-end"
],
"targets": [
"Result"
],
"sections": [
{
"id": "e-a-end-Result_s0",
"startPoint": {
"x": 523,
"y": 574
},
"endPoint": {
"x": 523,
"y": 636
},
"incomingShape": "a-end",
"outgoingShape": "Result"
}
],
"container": "root"
},
{
"id": "e-Input-a",
"sources": [
"Input"
],
"targets": [
"a"
],
"sections": [
{
"id": "e-Input-a_s0",
"startPoint": {
"x": 523,
"y": 142
},
"endPoint": {
"x": 523,
"y": 204
},
"incomingShape": "Input",
"outgoingShape": "a"
}
],
"container": "root"
},
{
"id": "e-a-a-end",
"sources": [
"a"
],
"targets": [
"a-end"
],
"sections": [
{
"id": "e-a-a-end_s0",
"startPoint": {
"x": 523,
"y": 478
},
"endPoint": {
"x": 523,
"y": 540
},
"incomingShape": "a",
"outgoingShape": "a-end"
}
],
"container": "root"
}
],
"$H": 350,
"x": 0,
"y": 0,
"width": 1045,
"height": 682
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:540
[DEBUG] Building graph @ http://localhost:5183/src/lib/components/graph/graphBuilder.svelte.ts?t=1772535251657:65
[DEBUG] layoutNodes same nodes @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772544066222:516
-425
View File
@@ -1,425 +0,0 @@
Total messages: 36 (Errors: 0, Warnings: 1)
Returning 22 messages for level "info"
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [Input]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:531
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-Input-Result",
"sources": [
"Input"
],
"targets": [
"Result"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:532
[LOG] cancelling request: {reason: saveAndClear, abortController: undefined} @ http://localhost:5183/src/lib/components/copilot/chat/AIChatManager.svelte.ts?t=1772535251800:1024
[LOG] loadFlow @ http://localhost:5183/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte?t=1772543608757:100
[LOG] Welcome back admin to testing @ http://localhost:5183/src/routes/(root)/+layout.svelte?t=1772535251800:68
[WARNING] using deprecated parameters for the initialization function; pass a single object instead @ http://localhost:5183/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=5452fe86:3211
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [a-end], a(module) ← [Input], a-end(branchAllEnd) ← [c,d,g], a-branch-0(branchAllStart) ← [a], b(module) ← [a-branch-0], c(module) ← [b], a-branch-1(branchAllStart) ← [a], d(module) ← [a-branch-1], a-branch-2(branchAllStart) ← [a], e(module) ← [a-branch-2], f(module) ← [e], g(module) ← [f]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:531
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
},
{
"id": "a-end",
"width": 275,
"height": 34
},
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "RIGHT",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "a-branch-0",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "b",
"width": 275,
"height": 34
},
{
"id": "c",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-b-c",
"sources": [
"b"
],
"targets": [
"c"
]
}
]
},
{
"id": "a-branch-1",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "d",
"width": 275,
"height": 34
}
],
"edges": []
},
{
"id": "a-branch-2",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "e",
"width": 275,
"height": 34
},
{
"id": "f",
"width": 275,
"height": 34
},
{
"id": "g",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-e-f",
"sources": [
"e"
],
"targets": [
"f"
]
},
{
"id": "e-f-g",
"sources": [
"f"
],
"targets": [
"g"
]
}
]
}
]
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-a-end-Result",
"sources": [
"a-end"
],
"targets": [
"Result"
]
},
{
"id": "e-Input-a",
"sources": [
"Input"
],
"targets": [
"a"
]
},
{
"id": "e-a-a-end",
"sources": [
"a"
],
"targets": [
"a-end"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:532
[LOG] RawScript module b without assets field, parsing @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:149
[LOG] Parsing assets for RawScript module b @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:121
[LOG] RawScript module c without assets field, parsing @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:149
[LOG] Parsing assets for RawScript module c @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:121
[LOG] RawScript module d without assets field, parsing @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:149
[LOG] Parsing assets for RawScript module d @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:121
[LOG] RawScript module e without assets field, parsing @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:149
[LOG] Parsing assets for RawScript module e @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:121
[LOG] RawScript module f without assets field, parsing @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:149
[LOG] Parsing assets for RawScript module f @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:121
[LOG] RawScript module g without assets field, parsing @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:149
[LOG] Parsing assets for RawScript module g @ http://localhost:5183/src/lib/components/flows/FlowAssetsHandler.svelte?t=1772535251800:121
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [a-end], a(module) ← [Input], a-end(branchAllEnd) ← [c,d,g], a-branch-0(branchAllStart) ← [a], b(module) ← [a-branch-0], c(module) ← [b], a-branch-1(branchAllStart) ← [a], d(module) ← [a-branch-1], a-branch-2(branchAllStart) ← [a], e(module) ← [a-branch-2], f(module) ← [e], g(module) ← [f]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:531
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
},
{
"id": "a-end",
"width": 275,
"height": 34
},
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "RIGHT",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "a-branch-0",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "b",
"width": 275,
"height": 34
},
{
"id": "c",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-b-c",
"sources": [
"b"
],
"targets": [
"c"
]
}
]
},
{
"id": "a-branch-1",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "d",
"width": 275,
"height": 34
}
],
"edges": []
},
{
"id": "a-branch-2",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "e",
"width": 275,
"height": 34
},
{
"id": "f",
"width": 275,
"height": 34
},
{
"id": "g",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-e-f",
"sources": [
"e"
],
"targets": [
"f"
]
},
{
"id": "e-f-g",
"sources": [
"f"
],
"targets": [
"g"
]
}
]
}
]
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-a-end-Result",
"sources": [
"a-end"
],
"targets": [
"Result"
]
},
{
"id": "e-Input-a",
"sources": [
"Input"
],
"targets": [
"a"
]
},
{
"id": "e-a-a-end",
"sources": [
"a"
],
"targets": [
"a-end"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:532
-149
View File
@@ -1,149 +0,0 @@
Total messages: 15 (Errors: 0, Warnings: 0)
Returning 6 messages for level "info"
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [Input]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:531
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-Input-Result",
"sources": [
"Input"
],
"targets": [
"Result"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:532
[LOG] cancelling request: {reason: saveAndClear, abortController: undefined} @ http://localhost:5183/src/lib/components/copilot/chat/AIChatManager.svelte.ts?t=1772535251800:1024
[LOG] loadFlow @ http://localhost:5183/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte?t=1772543608757:100
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [a-end], a(module) ← [Input], a-end(branchOneEnd) ← [a-branch-default], a-branch-default(branchOneStart) ← [a]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:531
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
},
{
"id": "a-end",
"width": 275,
"height": 34
},
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "RIGHT",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "a-branch-default",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [],
"edges": []
}
]
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-a-end-Result",
"sources": [
"a-end"
],
"targets": [
"Result"
]
},
{
"id": "e-Input-a",
"sources": [
"Input"
],
"targets": [
"a"
]
},
{
"id": "e-a-a-end",
"sources": [
"a"
],
"targets": [
"a-end"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543608757:532
-674
View File
@@ -1,674 +0,0 @@
Total messages: 21 (Errors: 0, Warnings: 1)
Returning 10 messages for level "info"
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [Input]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543797839:531
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-Input-Result",
"sources": [
"Input"
],
"targets": [
"Result"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543797839:532
[LOG] cancelling request: {reason: saveAndClear, abortController: undefined} @ http://localhost:5183/src/lib/components/copilot/chat/AIChatManager.svelte.ts?t=1772535251800:1024
[LOG] loadFlow @ http://localhost:5183/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte?t=1772543797839:100
[LOG] Welcome back admin to testing @ http://localhost:5183/src/routes/(root)/+layout.svelte?t=1772535251800:68
[LOG] ELK result: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34,
"$H": 277,
"x": 12,
"y": 12
},
{
"id": "Input",
"width": 275,
"height": 34,
"$H": 279,
"x": 12,
"y": 108
},
{
"id": "Result",
"width": 275,
"height": 34,
"$H": 281,
"x": 12,
"y": 204
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
],
"sections": [
{
"id": "e-Trigger-Input_s0",
"startPoint": {
"x": 150,
"y": 46
},
"endPoint": {
"x": 150,
"y": 108
},
"incomingShape": "Trigger",
"outgoingShape": "Input"
}
],
"container": "root"
},
{
"id": "e-Input-Result",
"sources": [
"Input"
],
"targets": [
"Result"
],
"sections": [
{
"id": "e-Input-Result_s0",
"startPoint": {
"x": 150,
"y": 142
},
"endPoint": {
"x": 150,
"y": 204
},
"incomingShape": "Input",
"outgoingShape": "Result"
}
],
"container": "root"
}
],
"$H": 13,
"x": 0,
"y": 0,
"width": 299,
"height": 250
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543797839:536
[WARNING] using deprecated parameters for the initialization function; pass a single object instead @ http://localhost:5183/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=5452fe86:3211
[LOG] ELK input nodes: [Trigger(trigger) ← [], Input(input2) ← [Trigger], Result(result) ← [a-end], a(module) ← [Input], a-end(branchAllEnd) ← [c,d,g], a-branch-0(branchAllStart) ← [a], b(module) ← [a-branch-0], c(module) ← [b], a-branch-1(branchAllStart) ← [a], d(module) ← [a-branch-1], a-branch-2(branchAllStart) ← [a], e(module) ← [a-branch-2], f(module) ← [e], g(module) ← [f]] @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543797839:531
[LOG] ELK graph: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34
},
{
"id": "Input",
"width": 275,
"height": 34
},
{
"id": "Result",
"width": 275,
"height": 34
},
{
"id": "a-end",
"width": 275,
"height": 34
},
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "a-branch-0",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "b",
"width": 275,
"height": 34
},
{
"id": "c",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-b-c",
"sources": [
"b"
],
"targets": [
"c"
]
}
]
},
{
"id": "a-branch-1",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "d",
"width": 275,
"height": 34
}
],
"edges": []
},
{
"id": "a-branch-2",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "e",
"width": 275,
"height": 34
},
{
"id": "f",
"width": 275,
"height": 34
},
{
"id": "g",
"width": 275,
"height": 34
}
],
"edges": [
{
"id": "e-e-f",
"sources": [
"e"
],
"targets": [
"f"
]
},
{
"id": "e-f-g",
"sources": [
"f"
],
"targets": [
"g"
]
}
]
}
]
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
]
},
{
"id": "e-a-end-Result",
"sources": [
"a-end"
],
"targets": [
"Result"
]
},
{
"id": "e-Input-a",
"sources": [
"Input"
],
"targets": [
"a"
]
},
{
"id": "e-a-a-end",
"sources": [
"a"
],
"targets": [
"a-end"
]
}
]
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543797839:532
[LOG] ELK result: {
"id": "root",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50",
"elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
"elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
"elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES"
},
"children": [
{
"id": "Trigger",
"width": 275,
"height": 34,
"$H": 352,
"x": 36,
"y": 12
},
{
"id": "Input",
"width": 275,
"height": 34,
"$H": 354,
"x": 36,
"y": 108
},
{
"id": "Result",
"width": 275,
"height": 34,
"$H": 356,
"x": 36,
"y": 888
},
{
"id": "a-end",
"width": 275,
"height": 34,
"$H": 358,
"x": 36,
"y": 792
},
{
"id": "a",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "a-branch-0",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "b",
"width": 275,
"height": 34,
"$H": 364,
"x": 12,
"y": 12
},
{
"id": "c",
"width": 275,
"height": 34,
"$H": 366,
"x": 12,
"y": 108
}
],
"edges": [
{
"id": "e-b-c",
"sources": [
"b"
],
"targets": [
"c"
],
"sections": [
{
"id": "e-b-c_s0",
"startPoint": {
"x": 149.5,
"y": 46
},
"endPoint": {
"x": 149.5,
"y": 108
},
"incomingShape": "b",
"outgoingShape": "c"
}
],
"container": "a-branch-0"
}
],
"$H": 362,
"x": 12,
"y": 90,
"width": 299,
"height": 154
},
{
"id": "a-branch-1",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "d",
"width": 275,
"height": 34,
"$H": 370,
"x": 12,
"y": 12
}
],
"edges": [],
"$H": 368,
"x": 12,
"y": 12,
"width": 299,
"height": 58
},
{
"id": "a-branch-2",
"layoutOptions": {
"elk.algorithm": "layered",
"elk.direction": "DOWN",
"elk.layered.spacing.nodeNodeBetweenLayers": "62",
"elk.spacing.nodeNode": "50"
},
"children": [
{
"id": "e",
"width": 275,
"height": 34,
"$H": 374,
"x": 12,
"y": 12
},
{
"id": "f",
"width": 275,
"height": 34,
"$H": 376,
"x": 12,
"y": 108
},
{
"id": "g",
"width": 275,
"height": 34,
"$H": 378,
"x": 12,
"y": 204
}
],
"edges": [
{
"id": "e-e-f",
"sources": [
"e"
],
"targets": [
"f"
],
"sections": [
{
"id": "e-e-f_s0",
"startPoint": {
"x": 149.5,
"y": 46
},
"endPoint": {
"x": 149.5,
"y": 108
},
"incomingShape": "e",
"outgoingShape": "f"
}
],
"container": "a-branch-2"
},
{
"id": "e-f-g",
"sources": [
"f"
],
"targets": [
"g"
],
"sections": [
{
"id": "e-f-g_s0",
"startPoint": {
"x": 149.5,
"y": 142
},
"endPoint": {
"x": 149.5,
"y": 204
},
"incomingShape": "f",
"outgoingShape": "g"
}
],
"container": "a-branch-2"
}
],
"$H": 372,
"x": 12,
"y": 264,
"width": 299,
"height": 250
}
],
"$H": 360,
"x": 12,
"y": 204,
"width": 323,
"height": 526
}
],
"edges": [
{
"id": "e-Trigger-Input",
"sources": [
"Trigger"
],
"targets": [
"Input"
],
"sections": [
{
"id": "e-Trigger-Input_s0",
"startPoint": {
"x": 174,
"y": 46
},
"endPoint": {
"x": 174,
"y": 108
},
"incomingShape": "Trigger",
"outgoingShape": "Input"
}
],
"container": "root"
},
{
"id": "e-a-end-Result",
"sources": [
"a-end"
],
"targets": [
"Result"
],
"sections": [
{
"id": "e-a-end-Result_s0",
"startPoint": {
"x": 174,
"y": 826
},
"endPoint": {
"x": 174,
"y": 888
},
"incomingShape": "a-end",
"outgoingShape": "Result"
}
],
"container": "root"
},
{
"id": "e-Input-a",
"sources": [
"Input"
],
"targets": [
"a"
],
"sections": [
{
"id": "e-Input-a_s0",
"startPoint": {
"x": 174,
"y": 142
},
"endPoint": {
"x": 174,
"y": 204
},
"incomingShape": "Input",
"outgoingShape": "a"
}
],
"container": "root"
},
{
"id": "e-a-a-end",
"sources": [
"a"
],
"targets": [
"a-end"
],
"sections": [
{
"id": "e-a-a-end_s0",
"startPoint": {
"x": 174,
"y": 730
},
"endPoint": {
"x": 174,
"y": 792
},
"incomingShape": "a",
"outgoingShape": "a-end"
}
],
"container": "root"
}
],
"$H": 350,
"x": 0,
"y": 0,
"width": 347,
"height": 934
} @ http://localhost:5183/src/lib/components/graph/FlowGraphV2.svelte?t=1772543797839:536
Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 137 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

@@ -1,266 +0,0 @@
<script lang="ts">
import '@xyflow/svelte/dist/base.css'
import {
SvelteFlow,
SvelteFlowProvider,
type Node,
type Edge,
Controls
} from '@xyflow/svelte'
let jsonInput = $state(SAMPLE_ELK_RESULT)
let error = $state('')
let nodes = $state.raw<Node[]>([])
let edges = $state.raw<Edge[]>([])
/**
* Parse an ELK layout result using SvelteFlow's parentId system.
*
* Approach:
* - Compound nodes (have children) → rendered as group wrappers (dashed border)
* Position is relative to their own parent (or absolute if at root).
* - Leaf nodes → rendered as regular nodes with parentId pointing to their
* compound parent. Position is relative to parent (ELK already gives relative coords).
* - Nodes must be ordered: parents before children.
*/
function parseElkResult(elkResult: any) {
const svelteNodes: Node[] = []
const svelteEdges: Edge[] = []
function walkNodes(elkNode: any, parentId: string | undefined) {
for (const child of elkNode.children ?? []) {
const isCompound = child.children?.length > 0
const node: Node = {
id: child.id,
position: { x: child.x ?? 0, y: child.y ?? 0 },
data: { label: child.id },
type: 'default',
...(parentId ? { parentId } : {}),
...(isCompound
? {
style: `width: ${child.width}px; height: ${child.height}px; background: rgba(100,149,237,0.06); border: 1px dashed #6495ed; border-radius: 8px; font-size: 10px; color: #6495ed; padding: 4px;`,
// Prevent group from intercepting pointer events on children
selectable: false
}
: {
style: `width: ${child.width ?? 275}px; height: ${child.height ?? 34}px; font-size: 11px;`
})
}
// Parent (compound) nodes must come before their children
svelteNodes.push(node)
if (isCompound) {
// Recurse: children will get parentId = this compound's id
walkNodes(child, child.id)
}
}
}
function walkEdges(elkNode: any) {
for (const edge of elkNode.edges ?? []) {
svelteEdges.push({
id: edge.id,
source: edge.sources?.[0] ?? '',
target: edge.targets?.[0] ?? '',
type: 'default'
})
}
for (const child of elkNode.children ?? []) {
walkEdges(child)
}
}
walkNodes(elkResult, undefined)
walkEdges(elkResult)
return { svelteNodes, svelteEdges }
}
function renderFromJson() {
try {
const parsed = JSON.parse(jsonInput)
const { svelteNodes, svelteEdges } = parseElkResult(parsed)
nodes = svelteNodes
edges = svelteEdges
error = ''
} catch (e: any) {
error = e.message
}
}
$effect(() => {
renderFromJson()
})
const proOptions = { hideAttribution: true }
</script>
<div class="flex h-screen w-screen">
<!-- Left: JSON editor -->
<div class="w-[500px] flex flex-col border-r border-gray-300 bg-white">
<div class="flex items-center justify-between p-2 border-b border-gray-200 bg-gray-50">
<h2 class="text-sm font-bold">ELK Result JSON</h2>
<button
class="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
onclick={renderFromJson}
>
Render
</button>
</div>
{#if error}
<div class="p-2 text-xs text-red-600 bg-red-50 border-b border-red-200">{error}</div>
{/if}
<textarea
class="flex-1 p-2 font-mono text-xs resize-none border-0 outline-none"
bind:value={jsonInput}
spellcheck="false"
></textarea>
</div>
<!-- Right: SvelteFlow canvas -->
<div class="flex-1 relative">
<SvelteFlowProvider>
<SvelteFlow
{nodes}
{edges}
fitView
{proOptions}
minZoom={0.1}
maxZoom={3}
nodesDraggable={false}
>
<Controls />
</SvelteFlow>
</SvelteFlowProvider>
</div>
</div>
<style>
:global(.svelte-flow) {
background: #fafafa;
}
</style>
<script module lang="ts">
/**
* Sample ELK result demonstrating the wrapper approach:
*
* - `a` is a regular leaf node (the branchAll step), rendered before the wrapper
* - `a__group` is the invisible compound wrapper (holds all branch lanes)
* - Each `a-branch-X` is a compound lane (dashed border for debug)
* with the branch-start label as its FIRST child node
* - Remaining nodes (b, c, d, ...) are leaf children inside their lane
*
* Edges at root: Trigger→Input→a→a__group→a-end→Result
* Edges inside lanes: branch-label→content nodes
*/
const SAMPLE_ELK_RESULT = JSON.stringify(
{
id: 'root',
layoutOptions: {
'elk.algorithm': 'layered',
'elk.direction': 'DOWN'
},
children: [
{ id: 'Trigger', width: 275, height: 34, x: 385, y: 12 },
{ id: 'Input', width: 275, height: 34, x: 385, y: 108 },
// `a` = branchAll step, rendered as a regular leaf node
{ id: 'a', width: 275, height: 34, x: 385, y: 204 },
// `a__group` = invisible wrapper compound for the branch lanes
// width/height must fully contain all children (no overflow)
// max child right = 710+299 = 1009, +12 padding = 1021
// max child bottom = 12+346 = 358, +12 padding = 370
{
id: 'a__group',
x: 12,
y: 300,
width: 1021,
height: 370,
children: [
// Lane 0: compound with branch-start label as first child
{
id: 'a-branch-0',
x: 12,
y: 12,
width: 299,
height: 250,
children: [
// First child = branch start label node
{ id: 'a-branch-0-label', width: 275, height: 34, x: 12, y: 12 },
{ id: 'b', width: 275, height: 34, x: 12, y: 108 },
{ id: 'c', width: 275, height: 34, x: 12, y: 204 }
],
edges: [
{
id: 'e-label0-b',
sources: ['a-branch-0-label'],
targets: ['b']
},
{ id: 'e-b-c', sources: ['b'], targets: ['c'] }
]
},
// Lane 1
{
id: 'a-branch-1',
x: 361,
y: 12,
width: 299,
height: 154,
children: [
{ id: 'a-branch-1-label', width: 275, height: 34, x: 12, y: 12 },
{ id: 'd', width: 275, height: 34, x: 12, y: 108 }
],
edges: [
{
id: 'e-label1-d',
sources: ['a-branch-1-label'],
targets: ['d']
}
]
},
// Lane 2
{
id: 'a-branch-2',
x: 710,
y: 12,
width: 299,
height: 346,
children: [
{ id: 'a-branch-2-label', width: 275, height: 34, x: 12, y: 12 },
{ id: 'e', width: 275, height: 34, x: 12, y: 108 },
{ id: 'f', width: 275, height: 34, x: 12, y: 204 },
{ id: 'g', width: 275, height: 34, x: 12, y: 300 }
],
edges: [
{
id: 'e-label2-e',
sources: ['a-branch-2-label'],
targets: ['e']
},
{ id: 'e-e-f', sources: ['e'], targets: ['f'] },
{ id: 'e-f-g', sources: ['f'], targets: ['g'] }
]
}
],
edges: []
},
// a__group bottom = 300+370 = 670, +62 gap = 732
{ id: 'a-end', width: 275, height: 34, x: 385, y: 732 },
{ id: 'Result', width: 275, height: 34, x: 385, y: 828 }
],
edges: [
{ id: 'e-Trigger-Input', sources: ['Trigger'], targets: ['Input'] },
{ id: 'e-Input-a', sources: ['Input'], targets: ['a'] },
{ id: 'e-a-group', sources: ['a'], targets: ['a__group'] },
{ id: 'e-group-end', sources: ['a__group'], targets: ['a-end'] },
{ id: 'e-a-end-Result', sources: ['a-end'], targets: ['Result'] }
],
width: 1045,
height: 874
},
null,
2
)
</script>