Skip to content

Component | Graph: ELK Support - #161

Merged
rokotyan merged 9 commits into
mainfrom
feature/graph-layout-elk
Mar 27, 2023
Merged

rokotyan merged 9 commits into
mainfrom
feature/graph-layout-elk

Conversation

@rokotyan

Copy link
Copy Markdown
Contributor

This PR implements initial ELK support, which is the best layout engine for diagrams as of today. ELK Layered Layout can be a good alternative for our Parallel Layout when you need more nesting (panels within panels ...). Besides that ELK has other layouts available. #141

SCR-20230313-otnw

SCR-20230313-otfu

image

@rokotyan rokotyan added the enhancement New feature or request label Mar 13, 2023
@rokotyan rokotyan added this to the Release v1.1.0 milestone Mar 13, 2023
@rokotyan
rokotyan requested a review from reb-dev March 13, 2023 23:59
@rokotyan rokotyan linked an issue Mar 13, 2023 that may be closed by this pull request
@rokotyan
rokotyan force-pushed the feature/graph-layout-elk branch from 13d8c66 to 824afd6 Compare March 14, 2023 00:00
Comment thread packages/website/docs/networks-and-flows/Graph.mdx Outdated
Comment thread packages/ts/src/components/graph/modules/panel/helper.ts Outdated

@reb-dev reb-dev left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is really cool! Nice work.

One thing I'm not sure about: is there a straight forward way to change the layout algorithm? Because when I change the dev example's props to layoutElkSettings={{ 'elk.algorithm': 'radial' }} I get an error, but inside the component itself I can just add that to the layout options and it works:

Screen Shot 2023-03-17 at 12 31 56 PM

Screen Shot 2023-03-17 at 12 31 34 PM

@rokotyan
rokotyan force-pushed the feature/graph-layout-elk branch from 6f25389 to 40351d7 Compare March 20, 2023 20:46
@rokotyan

Copy link
Copy Markdown
Contributor Author

One thing I'm not sure about: is there a straight forward way to change the layout algorithm? Because when I change the dev example's props to layoutElkSettings={{ 'elk.algorithm': 'radial' }} I get an error, but inside the component itself I can just add that to the layout options and it works

@reb-dev Thanks! ELK has a quite sophisticated layout configuration logic that I've tried to wrap it a little to suit our primary use case out of the box. But it looks like it broke some other things, so I've simplified my logic to avoid issues like the one you've found.

@reb-dev reb-dev left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@rokotyan
rokotyan merged commit ed145ab into main Mar 27, 2023
@rokotyan rokotyan mentioned this pull request Apr 19, 2023
@rokotyan
rokotyan deleted the feature/graph-layout-elk branch May 22, 2023 19:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component | Graph: ELK Layout support

2 participants