Add extended graph and dummy auto-layout #59 by handreyrc · Pull Request #77 · serverlessworkflow/editor

handreyrc · 2026-04-13T22:59:37Z

Closes #59

Summary

This PR adds dummy auto-layout and extended graph types.

Changes

Added custom graph implementation with extended types to support:
- Node size
- Node position
- Edge types (DEFAULT, ERROR and CONDITION)
- Edge waypoints
Added buildGraph function to sdk wrapper
Added dummy auto-layout with fixed coordinates
Tests for extended graph types
Test for dummy auto-layout

Copilot

Pull request overview

Adds SDK graph generation support to the diagram editor core by introducing extended graph types (node size/position, edge types/waypoints), exposing a buildGraph wrapper, and providing a dummy auto-layout implementation with accompanying tests/snapshots.

Changes:

Added extended graph type definitions and edge-type enrichment (solveEdgeTypes).
Exposed buildGraph via the core SDK wrapper and re-exported core modules.
Added a dummy applyAutoLayout implementation plus integration/unit tests and snapshots.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/tests/fixtures/workflows.ts	Added new JSON/YAML workflow fixtures used by graph + auto-layout tests.
packages/serverless-workflow-diagram-editor/tests/core/workflowSdk.integration.test.ts	Added integration coverage for `buildGraph` and extended graph typing/snapshot.
packages/serverless-workflow-diagram-editor/tests/core/graph.test.ts	New unit tests for edge type enrichment across default/error/condition/nested cases.
packages/serverless-workflow-diagram-editor/tests/core/autoLayout.integration.test.ts	New integration test verifying dummy auto-layout positions/sizes and snapshot.
packages/serverless-workflow-diagram-editor/tests/core/snapshots/workflowSdk.integration.test.ts.snap	Snapshot for `buildGraph` result.
packages/serverless-workflow-diagram-editor/tests/core/snapshots/autoLayout.integration.test.ts.snap	Snapshot for `applyAutoLayout` result.
packages/serverless-workflow-diagram-editor/src/core/workflowSdk.ts	Switched to SDK namespace import; added `buildGraph` wrapper returning extended graph.
packages/serverless-workflow-diagram-editor/src/core/index.ts	Re-exported `graph` and `autoLayout` modules.
packages/serverless-workflow-diagram-editor/src/core/graph.ts	Added extended graph types and `solveEdgeTypes`.
packages/serverless-workflow-diagram-editor/src/core/autoLayout.ts	Added dummy `applyAutoLayout` implementation to set size/position.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

lornakelly

Thanks for PR Handrey, nice work. Just a few comments

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

lornakelly

LGTM

handreyrc · 2026-04-16T21:22:50Z

@fantonangeli,

Could you review this PR, please?

fantonangeli

@handreyrc this is a placeholder for the future real code, but I would make the structure a bit stronger if you agree

fantonangeli · 2026-04-17T10:59:01Z

If these tests are testing buildGraph and parseWorkflow from packages/serverless-workflow-diagram-editor/src/core/workflowSdk.ts with the input from the SDK, I expected them to be in workflowSdk.integration.test.ts.
Otherwise I would suggest testing only solveEdgeTypes and have a better output about an error, if something gets broken.
I would prefer the 2n option. Wdyt?

@fantonangeli,
The issue here is that there it no other way test 'solveEdgeTypes' without parsing a workflow and then call buildGraph from the SDK to get a loaded graph.
I created an external test function to get a graph from the SDK and then called 'solveEdgeTypes' in the tests to make them more specifc and easy to understand.
I also moved the buildGraph error to workflowSdk.integration.test.ts.
It looks better IMO.
WDYT?

@handreyrc For instance, I was thinking to mocking the object like this for the first test:

const graph = {"id":"root","type":"root","entryNode":{"type":"start","id":"root-entry-node"},"exitNode":{"type":"end","id":"root-exit-node"},"nodes":[{"type":"start","id":"root-entry-node"},{"type":"end","id":"root-exit-node"},{"type":"set","id":"/do/0/step1","label":"step1"},{"type":"set","id":"/do/1/step2","label":"step2"},{"type":"set","id":"/do/2/step3","label":"step3"},{"type":"set","id":"/do/3/step4","label":"step4"},{"type":"set","id":"/do/4/step5","label":"step5"}],"edges":[{"label":"","id":"/do/4/step5-root-exit-node","sourceId":"/do/4/step5","destinationId":"root-exit-node"},{"label":"","id":"/do/3/step4-/do/4/step5","sourceId":"/do/3/step4","destinationId":"/do/4/step5"},{"label":"","id":"/do/2/step3-/do/3/step4","sourceId":"/do/2/step3","destinationId":"/do/3/step4"},{"label":"","id":"/do/1/step2-/do/2/step3","sourceId":"/do/1/step2","destinationId":"/do/2/step3"},{"label":"","id":"/do/0/step1-/do/1/step2","sourceId":"/do/0/step1","destinationId":"/do/1/step2"},{"label":"","id":"root-entry-node-/do/0/step1","sourceId":"root-entry-node","destinationId":"/do/0/step1"}]} as sdk.Graph;

@fantonangeli,
We are relying on the sdk Graph, I would like those tests to break / throw exception as we update the sdk versions and things change. If we hardcode it we lose it.
WDYT?

I think this kind of testing is more integration tests, already tested in: workflowSdk.integration.test.ts
In addition, using plain object in tests allow to modify them easily and test also broken scenarios in the future

@fantonangeli,
Fixed!

fantonangeli · 2026-04-17T12:38:51Z

+  }
+
+  for (let i = 0; i < graph.nodes.length; i++) {
+    const graphNode = graph.nodes[i]! as ExtendedGraph;


In this point we are copying a memory reference, because graph.nodes[i]! is an object.
In general, as a good practice, we should clone the input without changing it.
Do you agree?

@fantonangeli,

The goal of the 'solveEdgeTypes' function is to traverse a brand new graph created by the sdk.buildGraph to set properties. As you can see 'solveEdgeTypes' is and must only be called from within the buildGraph wrapper in the workflowSdk.ts. It does not make sense to call it unless you have a brand new graph instance created straight from the skd, so I don't see any risk of messing with references elsewhere.
I exported 'solveEdgeTypes' in order to write unit tests for it.
If we really want to make a graph clone to work with, we should use lodash to create a deepclone before calling the recursive function 'solveEdgeTypes'. The graph is a pretty complex object to navigate so it may go prety deep and there are circular references (parent refs) to be handled.

WDYT?

@handreyrc I tried locally using https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone#browser_compatibility , which is a native deep clone.
TBH I never used it before, but it passed the tests.
Anyway there can be a bit of performance slow down with big graphs and I can also agree with your point:
"The goal of the 'solveEdgeTypes' function is to traverse a brand new graph created by the sdk.buildGraph to set properties"

@fantonangeli,

Thanks for the tip! The structuredClone worked well!
Fixed!

fantonangeli · 2026-04-17T14:28:43Z

+export function applyAutoLayout(graph: ExtendedGraph): ExtendedGraph {
+  // TODO: This is just a temporary implementation until the actual auto-layout engine is integrated
+  const nodeSize: Size = { height: 50, width: 70 };
+  let position: Position = { x: 0, y: 0 };

-  it("returns correct translation", () => {
-    const i18n = createI18n(dictionaries, "en");
-    expect(i18n.t("save")).toBe("Save");
+  // TODO: Containment is not supported for now.
+  graph.nodes.forEach((node) => {
+    node.size = { ...nodeSize };
+    node.position = { ...position };
+    position.y = position.y + 100;
  });

-  it("returns key if missing", () => {
-    const i18n = createI18n(dictionaries, "fr");
-    expect(i18n.t("cancel")).toBe("cancel");
-  });
-});
+  return graph;


Still to preserve an immutability code structure, even if it's a kind of placeholder ATM.
Also ok to skip this suggestion

Suggested change

export function applyAutoLayout(graph: ExtendedGraph): ExtendedGraph {

// TODO: This is just a temporary implementation until the actual auto-layout engine is integrated

const nodeSize: Size = { height: 50, width: 70 };

let position: Position = { x: 0, y: 0 };

it("returns correct translation", () => {

const i18n = createI18n(dictionaries, "en");

expect(i18n.t("save")).toBe("Save");

// TODO: Containment is not supported for now.

graph.nodes.forEach((node) => {

node.size = { ...nodeSize };

node.position = { ...position };

position.y = position.y + 100;

});

it("returns key if missing", () => {

const i18n = createI18n(dictionaries, "fr");

expect(i18n.t("cancel")).toBe("cancel");

});

});

return graph;

const nodeSize: Size = { height: 50, width: 70 };

const applyLayoutToNode = (node: ExtendedGraphNode) => ({

...node,

size: { ...nodeSize },

position: { x: 0, y: 100 },

});

export function applyAutoLayout(graph: ExtendedGraph): ExtendedGraph {

// TODO: This is just a temporary implementation until the actual auto-layout engine is integrated

// TODO: Containment is not supported for now.

return {

...graph,

nodes: graph.nodes.map(applyLayoutToNode),

entryNode: applyLayoutToNode(graph.entryNode),

exitNode: applyLayoutToNode(graph.exitNode),

};

}

@fantonangeli,
I agree that we need to return a new graph instance. I would leave as is because this code will be completely replaced as we move forward with ELKjs.
We may need lodash to handle it properly, we have to discuss about it.

WDYT?

The code will be replaced and I can agree to leave as is.
Anyway I found a native method to clone objects like with lodash: #77 (comment)

@fantonangeli,

Fixed! Thanks

Copilot

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Copilot

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

handreyrc · 2026-04-20T21:09:08Z

@fantonangeli,
Changes applied, could you check it again?

Thanks!

Copilot AI review requested due to automatic review settings April 13, 2026 22:59

Copilot started reviewing on behalf of handreyrc April 13, 2026 23:00 View session

handreyrc changed the title ~~Add extendended graph and dummy auto-layout #59~~ Add extended graph and dummy auto-layout #59 Apr 13, 2026

Copilot AI reviewed Apr 13, 2026

View reviewed changes

handreyrc force-pushed the add-graph branch from a39d614 to b06e5fe Compare April 13, 2026 23:42

handreyrc requested review from fantonangeli, kumaradityaraj and lornakelly April 13, 2026 23:49

lornakelly reviewed Apr 14, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/core/workflowSdk.ts

Comment thread packages/serverless-workflow-diagram-editor/tests/core/graph.test.ts Outdated

Comment thread packages/serverless-workflow-diagram-editor/tests/core/graph.test.ts

handreyrc force-pushed the add-graph branch from b06e5fe to 667e915 Compare April 14, 2026 20:42

Copilot AI review requested due to automatic review settings April 14, 2026 20:42

Copilot started reviewing on behalf of handreyrc April 14, 2026 20:43 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

handreyrc force-pushed the add-graph branch from 667e915 to a5f0557 Compare April 14, 2026 20:56

Copilot AI review requested due to automatic review settings April 14, 2026 21:03

handreyrc force-pushed the add-graph branch from a5f0557 to 4a4db49 Compare April 14, 2026 21:03

Copilot started reviewing on behalf of handreyrc April 14, 2026 21:03 View session

handreyrc requested a review from lornakelly April 14, 2026 21:06

Copilot AI reviewed Apr 14, 2026

View reviewed changes

kumaradityaraj approved these changes Apr 15, 2026

View reviewed changes

handreyrc force-pushed the add-graph branch from 4a4db49 to c8de6c9 Compare April 15, 2026 16:47

lornakelly approved these changes Apr 15, 2026

View reviewed changes

handreyrc requested a review from ricardozanini April 15, 2026 17:24

fantonangeli suggested changes Apr 17, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings April 18, 2026 04:15

handreyrc force-pushed the add-graph branch from c8de6c9 to fdb94ed Compare April 18, 2026 04:15

Copilot started reviewing on behalf of handreyrc April 18, 2026 04:15 View session

Copilot AI reviewed Apr 18, 2026

View reviewed changes

handreyrc force-pushed the add-graph branch from fdb94ed to 24f2460 Compare April 20, 2026 15:06

Copilot AI review requested due to automatic review settings April 20, 2026 15:12

handreyrc force-pushed the add-graph branch from 24f2460 to 69d982d Compare April 20, 2026 15:12

Copilot started reviewing on behalf of handreyrc April 20, 2026 15:17 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/core/workflowSdk.ts

Comment thread packages/serverless-workflow-diagram-editor/src/core/graph.ts

Comment thread packages/serverless-workflow-diagram-editor/src/core/graph.ts Outdated

handreyrc force-pushed the add-graph branch from 69d982d to 3071e02 Compare April 20, 2026 20:52

Add extended graph types

8df3e66

Signed-off-by: handreyrc <handrey.cunha@gmail.com>

Copilot AI review requested due to automatic review settings April 20, 2026 20:58

handreyrc force-pushed the add-graph branch from 3071e02 to 8df3e66 Compare April 20, 2026 20:58

Copilot started reviewing on behalf of handreyrc April 20, 2026 20:59 View session

Copilot AI reviewed Apr 20, 2026

View reviewed changes

Comment thread packages/serverless-workflow-diagram-editor/src/core/workflowSdk.ts

handreyrc requested a review from fantonangeli April 20, 2026 21:09

Conversation

handreyrc commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lornakelly left a comment

Choose a reason for hiding this comment

Uh oh!

handreyrc commented Apr 16, 2026

Uh oh!

fantonangeli left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

handreyrc Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

handreyrc Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

handreyrc Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

handreyrc commented Apr 13, 2026 •

edited

Loading

handreyrc Apr 18, 2026 •

edited

Loading

handreyrc Apr 18, 2026 •

edited

Loading

handreyrc Apr 18, 2026 •

edited

Loading