Toggling element visibility causes noticeable slowdown and lags

[MatthewAry]

So I'm using Vue Flow to render components as nodes for a data graph. They are fairly complex in comparison to the examples shown on the docs. I've made it so I can hide all descendant nodes by clicking a button on a parent node. The action of hiding descendants is fast but unhiding them is very slow and locks up the main thread.

When unhiding elements from the root node, the operation took over 100ms to complete. The flame graph on the perf monitor is pretty deep here.

Unhiding should be fairly quick. Would it be possible to do some kind of memoization of previously hidden elements instead of completely un-rendering them? That, or hide them using CSS?

The hide operation is handled by Vue Flow itself so I don't really have control over it too much.

Also, I'm not able to use Vue Flow's built in node parent referencing capabilities because it affects the way layouts are computed in an undesirable way.

[bcakmakoglu]

The issue seems to be performance which could be anything really, since you haven't presented any repro or code-snippets I don't know what your application looks like and if you're not doing somehow causing some excessive re-renders unknowingly.
This sort of report really needs a reproduction.

Looking at the screenshot, re-mounting 5 nodes should not have any noticeable impact on performance whatsoever, even if they have a bit more complexity, which they don't look like they do in your img but who knows - could it be you're doing some heavy computations in those nodes? Is that necessary?

Anyway, I'm moving this to discussions since there's no actual bug described here; possibly a feature/refactor request for how visibility of nodes could be handled instead :)

[bcakmakoglu]

Also, I'm not able to use Vue Flow's built in node parent referencing capabilities because it affects the way layouts are computed in an undesirable way.

Check out the Nested Nodes example.

This feature is meant for these sort of graphs, where you use nested nodes.
VueFlow doesn't compute any "layout", what you're most likely referring to is the change of the relation of node.position from viewport to parent node.
When you use the parentNode option this relation changes as I mentioned, so a regular node with { x: 0, y: 0 } would be top-left of the viewport (the big white background), given the viewport is at it's default position, whereas a node using parentId and { x: 0, y: 0 } would be at the top-left corner of the specified parent node.

[MatthewAry]

Reproduction https://github.com/MatthewAry/vue-flow-1444

[bcakmakoglu]

A small performance improvement will be released in the next minor version which should help a bit in this case :)

[MatthewAry]

One issue I noticed is the passing through of props with v-bind.

That sounds like something upstream on the Vue level. It doesn't make sense to me why passing an object to v-bind should have any affect on perf unless there is a lot of ops needed to wire up the props in object to a component. I don't think you can use a compiler to pre-wire an object to props because you can't know ahead of time for sure what the object will contain when it's passed in at runtime. Is there any thing that documents these optimization type best practices for vue?

[MatthewAry]

Another thing that seems to speed things up significantly is removing the vuetify tooltip buttons except for the visibility toggle.

I'll work on making a reproduction that demonstrates performance issues with VTooltip in Vuetify. If I can reproduce I will share with the Vuetify team.

[MatthewAry]

Vuetify has VTooltips prepared in an eager manner by default. This can be changed by setting eager to false on the component. Setting this adds a 33% perf improvement. In otherwords, Not A Bug

[bcakmakoglu]

Could you update to 1.35.0 and see if that helps a bit with the performance? :)