Merge pull request #456 from mariobuikhuizen/replace_treeview_with_li…

…st_of_checkboxes

A better fix for the GUI update loop #185

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)
 
@@ -884,10 +891,12 @@ def vue_save_figure(self, event):
 
  def _update_selected_data_items(self, viewer_id, selected_items):
  # Find the active viewer
+ viewer_item = self._viewer_item_by_id(viewer_id)
  viewer = self._viewer_by_id(viewer_id)
 
  # Update the stored selected data items
- data_ids = selected_items
+ viewer_item['selected_data_items'] = selected_items
+ data_ids = viewer_item['selected_data_items']
 
  active_data_labels = []
 

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-4"
+ />
  </v-tab-item>
 
  <v-tab-item key="1" eager class="overflow-y-auto" style="height: 100%">