fix: prevent GUI update loop by replacing v-treeview

Due to vuetifyjs/vuetify#13181 v-treeview causes the update loop
mariobuikhuizen · Mar 2, 2021 · 6b9d20f · 6b9d20f
1 parent b13d56e
commit 6b9d20f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/jdaviz/app.py b/jdaviz/app.py
@@ -866,7 +866,14 @@ def vue_data_item_selected(self, event):
         event : dict
             Traitlet event provided the 'old' and 'new' values.
         """
-        viewer_id, selected_items = event['id'], event['selected_items']
+        viewer_id, item_id, checked = event['id'], event['item_id'], event['checked']
+        viewer_item = self._viewer_item_by_id(viewer_id)
+
+        if checked:
+            selected_items = [*viewer_item['selected_data_items'], item_id]
+        else:
+            selected_items = list(filter(
+                lambda id: id != item_id, viewer_item['selected_data_items']))
 
         self._update_selected_data_items(viewer_id, selected_items)
 

diff --git a/jdaviz/container.vue b/jdaviz/container.vue
@@ -75,16 +75,16 @@
 
               <v-tabs-items v-model="viewer.tab" style="max-height: 500px; width: 350px;">
                 <v-tab-item key="0" class="overflow-y-auto" style="height: 450px">
-                  <v-treeview
-                    dense
-                    selectable
-                    :items="dataItems"
-                    hoverable
-                    v-model="viewer.selected_data_items"
-                    activatable
-                    item-disabled="locked"
-                    @input="$emit('data-item-selected', {'id': viewer.id, 'selected_items': $event})"
-                  ></v-treeview>
+                  <v-checkbox
+                    v-for="item in dataItems" :key="item.id" :label="item.name" dense hide-details
+                    :input-value="viewer.selected_data_items.includes(item.id)"
+                    @change="$emit('data-item-selected', {
+                      id: viewer.id,
+                      item_id: item.id,
+                      checked: $event
+                    })"
+                    class="pl-2"
+                  />
                 </v-tab-item>
 
                 <v-tab-item key="1" eager class="overflow-y-auto" style="height: 100%">