Integrate ELKjs for automatic diagram layout by handreyrc · Pull Request #152 · serverlessworkflow/editor

handreyrc · 2026-05-20T21:47:36Z

Closes #54

Summary

This PR replaces the dummy auto-layout placeholder for an actual layout engine capable of layout nodes and edges.

Changes

Added latest ELKjs library as a dependency.
Added core function to consume ELK layout workers as an asynchronous operation.
Replaced dummy layout implemention in autoLayout.ts for an actual implementation that takes react flow nodes and edges, transforms it to elkGraph, calculate the layout then applies it back to react flow nodes and edges.
Integrated diagramBuilder and auto-layout in the Diagram component in order to render layouted workflows.
Tests for graph manipulation and auto-layout integration.

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Integrates ELK-based auto-layout into the diagram editor and expands test coverage around layout graph conversion, application, and error handling.

Changes:

Add elkjs dependency and introduce processElkLayout core helper.
Replace the previous placeholder auto-layout with ELK graph building + layout application (including edge bendpoints).
Update Diagram rendering/tests to use ReactFlowProvider and add extensive layout-focused tests.

Reviewed changes

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

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds `elkjs` to the workspace catalog for consistent versioning.
packages/serverless-workflow-diagram-editor/package.json	Consumes `elkjs` from the workspace catalog.
packages/serverless-workflow-diagram-editor/src/core/index.ts	Re-exports new ELK layout helper from core.
packages/serverless-workflow-diagram-editor/src/core/elkjs.ts	Adds `processElkLayout` wrapper around ELK with error handling.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/autoLayout.ts	Implements ELK graph conversion, layout application, and bendpoint mapping.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts	Stops applying auto-layout inside the builder; returns raw nodes/edges.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Applies auto-layout asynchronously on model changes and fits view.
packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx	Adds `ReactFlowProvider` to support `useReactFlow()` usage.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/Diagram.test.tsx	Wraps Diagram with `ReactFlowProvider` in tests.
packages/serverless-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts	Replaces old placeholder assertions with detailed auto-layout unit/integration coverage.
packages/serverless-workflow-diagram-editor/tests/core/elkjs.test.ts	Adds unit tests for `processElkLayout` success and error scenarios.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

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

fantonangeli

@handreyrc I left some comment. Please let me know what you think

fantonangeli · 2026-05-21T09:22:26Z

+      if (isActive) {
+        setNodes(nodes);
+        setEdges(edges);
+        reactFlowInstance.fitView();


Because useStates are async, reactFlowInstance.fitView(); will be executed before nodes and edges are updated.
I would suggest to move fitView() in a separate useEffect() bounded to nodes and edges

I too agree with this.

@fantonangeli @kumaradityaraj ,

This one is interesting because we cannot move fitView() to a separate useEffect(). It would be executed on every change on nodes and edges such as dragging a node (x/y changes).
I digged a bit about this matter and the recommended approach for cases like that is to create a microtask with setTimeout, so fitView will be queued to run after React updates the DOM.
e.g.
setTimeout(() => reactFlowInstance.fitView() , 0);

I fixed it this way.

WDYT?

fantonangeli · 2026-05-21T09:31:53Z

Should we also add a test to verify applyAutoLayout() is called. Wdyt?

fantonangeli · 2026-05-21T10:18:01Z

+    });
+
+    // Helper function to setup ELK mock with success or error response
+    function setupElkMock(returnValue: ElkNode | Error | string | null | undefined | object) {


fantonangeli · 2026-05-21T10:18:26Z

+    }
+
+    // Test data factory for simple graphs
+    function createSimpleGraph(nodeCount: number = 2): ElkNode {


Same as my previous comment

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

handreyrc · 2026-05-21T14:45:22Z

@fantonangeli @kumaradityaraj,

This PR is ready for reviews again.

Thanks!

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

Signed-off-by: handreyrc <handrey.cunha@gmail.com> # Conflicts: # packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

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 7 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

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

Copilot AI review requested due to automatic review settings May 20, 2026 21:47

Copilot AI reviewed May 20, 2026

View reviewed changes

handreyrc requested review from fantonangeli, kumaradityaraj and lornakelly May 20, 2026 23:07

fantonangeli suggested changes May 21, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings May 21, 2026 13:57

Copilot AI reviewed May 21, 2026

View reviewed changes

handreyrc requested a review from fantonangeli May 21, 2026 14:44

handreyrc added 5 commits May 21, 2026 17:16

Add ELKjs dependency

3a03a16

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

ELKjs auto-layout engine integration

0544ac6

Signed-off-by: handreyrc <handrey.cunha@gmail.com> # Conflicts: # packages/serverless-workflow-diagram-editor/src/diagram-editor/DiagramEditor.tsx

Fix copilot complaints

85bba13

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

Fix review comments

b8f28ba

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

Fix copilot complaints

96b2245

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

Copilot AI review requested due to automatic review settings May 21, 2026 21:29

handreyrc force-pushed the add-elkjs-engine branch from 40c903f to 96b2245 Compare May 21, 2026 21:29

Copilot AI reviewed May 21, 2026

View reviewed changes

Fix copilot complaints

b5fac89

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

Conversation

handreyrc commented May 20, 2026

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!

fantonangeli left a comment

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!

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!

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!

handreyrc commented May 21, 2026

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!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants