`TreeItem` component: computed properties that are only relevant for GScan

[Ronnie Dutta]

Problem

From #1416:

We have to be careful with computed properties for the TreeItem component as some workflows have thousands of tasks and having several computed properties per item that are only relevant to GScan is not good performance-wise.

Proposed Solution

Not sure what the best solution here is. One possibility is a separate GScanTreeItem component.

[Ronnie Dutta]

Copying some convo over

Computed properties only get re-evaluated when their reactive dependencies change, whereas methods get re-evaluated on every re-render, see https://vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods

Looking at TreeItem.vue there's actually very little in common between the tree view related stuff and the GScan related stuff, hence why I think splitting is the best option. But we can certainly use a mixin (or composable) for the common stuff.

Originally posted by @MetRonnie in #1416 (comment)

Good to know on the reactivity front.

IMO, there should be a simple abstract Tree component which just does tree thing, like indentation, recursion, expand-collapse, etc. GScan and the Tree view should both use this Tree component. We should be able to swap for another off-the-shelf tree component if it is desirable to do so e.g. the Element virtualised Tree. Unfortunately the logic has leaked and the Tree component is far from abstract.

Note we can solve this at the node level as suggested above, the GScan component is already defining its own node tree. We should be able to change the data going into the tree to reflect the state-totals trickling stuff?

Originally posted by @oliver-sanders in #1416 (comment)