[dmn-editor] React flow vs Canvas based solutions

[christian0101]

Hello,

I’ve been trying the standalone editor and looking at how it handles large models with hundreds of nodes. Whilst it’s doing a great job at rendering everything, any interaction with the editor such as zooming in and out is quite slow. This is expected as react flow is DOM based and there have been similar questions in their space [1, 2].

The react flow developers seem to suggest canvas based solution for large visualisations [2].

I was wondering if you have plans to switch to a canvas based solution for the editor or is the assumption that the DMN models are not manageable when those have hundreds/thousands of nodes?

Thank you in advance

[1] xyflow/xyflow#723 (comment)
[2] xyflow/xyflow#3044 (comment)

[SySagar]

I have a simlar secnrio where assume u have around 1800 nodes and one parent node which links up all these nodes. We are use ELk for layouting however it seems to sloggy and the minimap we are using almost becomes invisible. I want to know what would be the best way to show a min map and handle such large data withou creating a sluggish app.

[jomarko]

Thank you for the question. I think our team will need to discuss it. I just want to share one of the aspects, and that is testability of the canvas element. The old editor was based on the canvas and its testability was quite limited. It was very challenging to write and automated tests for the editor that was using the canvas element.

[tiagobento]

Hey @christian0101 and @SySagar! Thank you for reaching out. I'd love to hear more about your use-cases and how you're using the new DMN Editor (You're using the new one, right? 😅). I tried to make the experience somewhat usable for ~500 nodes and ~500 edges on a M1 Pro MacBook, but maybe we need more than that...

If you could share 60fps videos of your experience (you can scramble the data or use mocks), it would be awesome to understand more, as we didn't invest too much time on performance benchmarking, but I'd love to help you overcome the limitations you're currently facing.

[christian0101]

Hi @jomarko and @tiagobento, thank you very much for looking into this.

DMN Editor (You're using the new one, right? 😅)

I believe so 😄 I used this https://www.npmjs.com/package/@ibm/bamoe-standalone-dmn-editor .

I was interested to use the dmn-editor package, but it is not published to npm yet, I see you have apache/incubator-kie-issues#1717 for this.

If you could share 60fps videos of your experience (you can scramble the data or use mocks), it would be awesome to understand more, as we didn't invest too much time on performance benchmarking

Of course! I’ll prepare a mock DMN model and try to share it here as well. I have tried the same setup on a M2 Pro MacBook and it’s better, but still slightly laggy when I fit the whole model on the screen (expected as everything has to render). However, there’s a bigger impact for a use case I was evaluating where this’s accessed on a windows remote server with CPU integrated graphics and a less powerful CPU using virtual desktop infrastructure. I’ll check this week and try to add a screen recording.

Edit

Looking at apache/incubator-kie-issues#1717 it seems that I’m loading the standalone editor from the wrong place, should have used https://www.npmjs.com/package/@kie-tools/kie-editors-standalone instead. I’ll test with this package and report the results, my bad.

I might be misunderstanding something here, I’m loading https://www.ibm.com/docs/en/ibamoe/9.1.x?topic=tools-dmn-bpmn-editors-javascript-libraries#_new_dmn_editor which matches the use of the react flow that I see in here https://github.com/apache/incubator-kie-tools/blob/main/packages/dmn-editor/package.json#L58 . However, this https://www.npmjs.com/package/@kie-tools/kie-editors-standalone is loading the old canvas based editor.

Am I looking at the wrong thing?