Qtree search filter very slow when number of nodes is 1000s. How to optimize it?

[hpawar]

Qtree sesarch becomes very slow when number of nodes is 1000s. Is there any performance improvement that can be done for this?

Thanks

[qyloxe]

@hpawar said in Qtree search filter very slow when number of nodes is 1000s. How to optimize it?:

Qtree sesarch becomes very slow when number of nodes is 1000s. Is there any performance improvement that can be done for this?

large datasets in browsers are typically slow, because the search routine is blocking the main browser thread. If you want speed, like “real speed”, then you have at least two solutions:

1. you may consider searching, indexing, sorting in web workers. The results could be easily synchronized with visual components.
   There are some libraries for that like:
   https://www.defiantjs.com/

2. You can keep data in browsers indexedDB and perform queries which are asynchronous in the context of the main browser thread. There are much more libraries for that - like this one for example:
   https://dexie.org/

[s.molinari]

Don’t load 1000s of nodes? Use your server and lazy load, search for the nodes you need server-side?

Scott

[studio511]

hi how do you perform a qtree search? do you literally mean to search an item from a tree. I was trying to achieve this but unsure how. Would you like to advise?

[dobbel]

@studio511

you have this in q-tree:

https://quasar.dev/vue-components/tree#Custom-filter-method

https://quasar.dev/vue-components/tree#Example--Filtering-nodes

[studio511]

@hpawar hi, did you eventually manage to resolve this ? i got hit when processing large number of nodes as well.

[dobbel]

@studio511

You could try Object.Freeze(this.nodes):
https://vuedose.tips/improve-performance-on-large-lists-in-vue-js/

[studio511]

@dobbel thanks! it helped in the fast loading of nodes significantly!

[studio511]

@dobbel hi, i tried the expandAll() nodes function with the tree that has a large number of nodes and even when i’ve already freeze the nodes object, when i do the expandAll function ($ref.Tree.expandAll()), the expansion is slow… how else can i improve this?

[dobbel]

@studio511 said in Qtree search filter very slow when number of nodes is 1000s. How to optimize it?:

it helped in the fast loading of nodes significantly!

You could try a deep freeze:
https://www.30secondsofcode.org/blog/s/javascript-deep-freeze-object

What you probably really want is something like a virtual scroller build into qtree.

[studio511]

@dobbel i tried to do deepfreeze to all my objects. as long as the whole tree is not fully expanded, individual clicking on the nodes looks open. but once on the nodes are expanded (with all the children nodes opened) … clicking on each nodes (even a level 1 node with just 1 child & no subchild) becomes very delayed. wondering what else or what have people been doing otherwise to handle the massiveness of a tree

[suleiman_as]

@studio511 @dobbel said in Qtree search filter very slow when number of nodes is 1000s. How to optimize it?:

something like a virtual scroller

that’s the key