SUPER large algos crash chrome tab

[hchaudhary1]

This is a real algo -- it takes up about 1.1GB of ram on chrome.
It is very difficult to navigate and edit.
What can be done to increase the responsiveness?

[b4rtaz]

Hello @hchaudhary1!

Wow, this algorithm is huge. I thought that the stress test example is big, but your example is bigger (2871 steps). 😅

I think the main problem is not the designer but your design overall. Even if the designer would be better optimized and use less memory, then still with that many elements on the canvas the user experience would be poor.

I think you need a way to apply the "don't repeat yourself" principle by your users. You can achieve that in many ways like creating a way to reuse a logic. For example you can create a step that executes another flow.

Another way is to move conditions at the step level, in this example you can see that, each branch has own "condition". It's a simple string but it could be a complex editor. Additionaly check this example.

Also, you could use the folder step component to group some parts of your logic.

[hchaudhary1]

Thanks for reviewing this. Our users are not programers unfortunately, and didn't understand the concept of functions, instead they just copy-paste the logic everywhere. Perhaps we can run a script that automatically groups the sub-routines.

A few follow-up questions:

1. Folders -- The JSON will still stay very large. Is the slowness due to large JSON or is it due to graphics rendering?
2. Any hope to offload rendering to WebGL for better speed?
3. Here is a zoom-in of the canvas... what do you mean by "move conditions at the step level"?

[b4rtaz]

1. I suppose the cause is a large amount of HTML nodes in the DOM. The designer is not responsible directly for rendering, it generates the DOM structure by using SVG and CSS. So less elements = faster rendering.

2. I don't see any chance at the moment. This would completely change the way how the designer works.

3. You as a designer can design how steps look like. For example you can enforce users to use the switch step instead hierarchical conditions (check this example).

For example you may limit depth of conditions.

Or maybe this executing logic may be placed inside a single step. This don't have be a graphical structure inside the canvas.

Another idea is to prepare a template with folders for main branches. This will guide users to continue with the proposed split.

Generally speaking it's very important how you design your steps and the initial template.

[hchaudhary1]

Folders seem like the way to go. Thanks. Closing for now