From b953d9c5c1d7a71104efe611dcdf1353e30a510c Mon Sep 17 00:00:00 2001
From: Mario Buikhuizen <mariobuikhuizen@gmail.com>
Date: Tue, 2 Mar 2021 18:18:14 +0100
Subject: [PATCH] fix: prevent GUI update loop by replacing v-treeview

Due to https://github.com/vuetifyjs/vuetify/issues/13181 v-treeview
causes the update loop
---
 jdaviz/app.py        |  8 +++++++-
 jdaviz/container.vue | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/jdaviz/app.py b/jdaviz/app.py
index e314e670b7..ed85ee74f1 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -866,7 +866,13 @@ 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
index 308c9bc937..58e9e4bad3 100644
--- 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%">