Lazy load and ui.tree

[A-n-d-r-e-a-s-M]

Hi,
I am not yet fully familiar with nicegui's software design. With lazy load, the problem is that in tree.py(https://github.com/zauberzeug/nicegui/blob/main/nicegui/elements/tree.py) self.update() resets the view state. If the tree is per example expanded, you don't want that it collapses if you add a node. To overcome this problem, I wrote my own tree component (custom_tree.vue and custom_tree.py) with lazy load and added double click functionality. LazyLoadTree.py is the test program. When Quasar generates the lazy-load event, the corresponding data is sent to the server using this.$emit. A JavaScript promise is used to wait for the server, which then resolves the promise via a JavaScript method call.

LazyLoadTree.zip

Kind regards,
Andreas

[falkoschindler]

Nice! Thank for sharing! 🙏

Do you think ui.tree could be improved to resolve this problem in the library. Or is it more like a special solution for certain use cases with its own drawbacks?

[A-n-d-r-e-a-s-M]

I made sure to find a universal solution with lazy loading. Take a look at my test program. Select, expand, and tick work. Lazy loading and tick, however, only work properly with strict. This is probably due to Quasar. However, it might be useful to outsource the double-click functionality. I think it's possible to update the nicegui library with my approach. However, since I don't use self.update() and I'm not yet familiar with everything, some residual uncertainty remains.

[A-n-d-r-e-a-s-M]

I just changed the template. You can use now custom styled icons and avatars.

<template>
  <q-tree
    :nodes="nodes"
    :node-key="node_key"
    :label-key="label_key"
    :children-key="children_key"
    @lazy-load="onLazyLoad"
    v-model:expanded="expandedKeys"
    v-model:selected="selectedKey"
    :tick-strategy="tick_strategy"
    v-model:ticked="ticked"
  >
    <template v-slot:default-header="scope">
      <div class="q-tree__node-header-content col row no-wrap items-center"
      @dblclick="onDblClick(scope.node)">
        <q-icon v-if="scope.node.icon" :name="scope.node.icon" class="q-tree__icon q-mr-sm" />
        <img v-if="scope.node.avatar" :src="scope.node.avatar" class="q-tree__avatar q-mr-sm" />
        <div>{{ scope.node.label }}</div>
      </div>
    </template>
    </q-tree>
</template>

But this only affects the double-click functionality which requires an inner template. I'm still learning 😉.

[A-n-d-r-e-a-s-M]

Hi,
here is an update:

LazyLoadTree.zip

self.update() is now used again. From what I understand, there was a data inconsistency between the server and client, which triggered the view state reset. By updating the nodes on the server side as well, I was able to resolve this issue. Perhaps with a few code changes, ui.tree could be updated.

Kind regards,
Andreas

[evnchn]

Consider putting your code in a GitHub public repo, so that it is easier to track changes, apply new versions, as well as to allow people to contribute. Thanks!