gscan: improve startup performance

[oliver-sanders]

When the UI is started it populates the GScan column with all workflows.

Unfortunately the time it takes to add each workflow increases with the number of workflows.

Currently we are adding workflows one by one, ideally we would batch them together to reduce the number of updates. This batching cannot presently be done in the deltas, and doing so wouldn't help because its more about the way the workflows are registered with Vue than the way they arrive at the UI.

I had a go at batching the addition of new workflows into GScan. This did speed things up a bit, however, not as much as anticipated or enough to justify putting it in. Here's my branch - oliver-sanders@40c4c37.

In this commit I batched together added workflows within a specified time frame, then applied the whole lot at a later time using Object.assign rather than Vue.set.

This approach works ok, rather than workflows being added one at a time, they come through in larger batches, the size depending on the configured time and browser performance. Unfortunately whilst it reduces the rendering cost, it doesn't reduce the impact of adding workflows so much.

I think it's all of the re-computation associated with finding the right insertion point for each workflow, adding it and, probably cascading stuff up the tree?

May need some better UI debugging skills to work out where the main CPU costs lie.

1. It takes ages for 100 workflows to load in GScan, yet it's quick to load 100 cycles in the tree view! Why?
2. If sorting is costly could we delay the sorting until after the workflows have been added?
3. Is there a better way of getting Vue to batch changes together than Object.assign?
4. Can we slim down the GScan tree down somehow. We can remove those tooltips for a start (info soon to be in the context menu).
5. The workflows are coming through in a random order, for hierarchical workflows that could result in a bit of re-ordering (e.g. if runs 1 & 3 arrive before run 2). Are some insertions more efficient than others? Would a little pre-sorting help?

[kinow]

Also worth testing with Vue 3 if possible (maybe move part of the code to a test project with Vue 2 and to a similar small project with Vue 3):

Overall, Vue 3 is about 55 percent faster, updates are up to 133 percent faster, and memory usage is down to 54 percent. This is achieved by completely rewriting the DOM implementation using TypeScript. Other performance improvements include: More efficient component initialization.

That could help focusing where to improve performance in the UI 👍