Merge pull request #936 from kecnry/mosviz-table-row-select

Mosviz: table row select/scroll

jdaviz/app.py

@@ -56,7 +56,6 @@
                                     os.path.join(os.path.dirname(__file__),
                                                  'components/tooltip.vue'))
 
-
 ipyvue.register_component_from_file(None, 'j-external-link',
                                     os.path.join(os.path.dirname(__file__),
                                                  'components/external_link.vue'))
@@ -65,6 +64,10 @@
                                     os.path.join(os.path.dirname(__file__),
                                                  'components/docs_link.vue'))
 
+ipyvue.register_component_from_file(None, 'j-play-pause-widget',
+                                    os.path.join(os.path.dirname(__file__),
+                                                 'components/play_pause_widget.vue'))
+
 
 class ApplicationState(State):
     """
@@ -1007,6 +1010,12 @@ def vue_close_snackbar_message(self, event):
         """
         self.state.snackbar_queue.close_current_message(self.state)
 
+    def vue_call_viewer_method(self, event):
+        viewer_id, method = event['id'], event['method']
+        args = event.get('args', [])
+        kwargs = event.get('kwargs', {})
+        return getattr(self._viewer_store[viewer_id], method)(*args, **kwargs)
+
     def _update_selected_data_items(self, viewer_id, selected_items):
         # Find the active viewer
         viewer_item = self._viewer_item_by_id(viewer_id)

jdaviz/app.vue

@@ -49,6 +49,7 @@
                   @destroy="destroy_viewer_item($event)"
                   @data-item-selected="data_item_selected($event)"
                   @save-figure="save_figure($event)"
+                  @call-viewer-method="call_viewer_method($event)"
                 ></g-viewer-tab>
               </gl-row>
             </golden-layout>

jdaviz/components/play_pause_widget.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-toolbar-items :class="{active: activeInterval}">
+    <j-tooltip tipid='table-play-pause-toggle'>
+      <v-btn icon @click="togglePlayPause" color="white">
+        <v-icon>mdi-play-pause</v-icon>
+      </v-btn>
+    </j-tooltip>
+    <j-tooltip tipid='table-play-pause-delay'>
+      <v-text-field
+        v-model="delaySeconds"
+        type="number"
+        min="1"
+        max="60"
+        @change="changeDelay"
+        @mousedown="changeDelay"
+        class="mt-0 pt-0 theme--dark"
+        style="width: 60px"
+        hide-details
+        single-line
+        filled
+        dense
+      />
+    </j-tooltip>
+  </v-toolbar-items>
+</template>
+
+<script>
+
+//var activeInterval = null;
+
+module.exports = {
+  data: function () {
+    return {
+      activeInterval: null,
+      delaySeconds: 2
+    }
+  },
+  props: [],
+  methods: {
+    eachIteration() {
+      this.$emit('event')
+    },
+    clearActiveInterval() {
+      if (this.activeInterval) {
+        clearInterval(this.activeInterval)
+      }
+      this.activeInterval = null
+    },
+    createNewInterval() {
+      this.activeInterval = setInterval(() => this.eachIteration(), this.delaySeconds*1000)
+    },
+    changeDelay(event) {
+      if (this.delaySeconds <= 0) {
+        // reject zero and negative values
+        this.delaySeconds = 1
+      }
+      if (this.activeInterval !== null) {
+        // then we want to clear the current interval and immediately create a new one,
+        // while leaving it in the play state
+        this.clearActiveInterval()
+        this.createNewInterval()     
+      }
+    },
+    togglePlayPause() {
+      if (this.activeInterval === null) {
+        // make sure to call IMMEDIATELY for feedback that something is happening
+        this.eachIteration()
+        this.createNewInterval()
+      } else {
+        this.clearActiveInterval()
+      }
+
+    },
+  }
+};
+</script>

jdaviz/components/tooltip.vue

@@ -43,6 +43,11 @@ const tooltips = {
   'viewer-toolbar-figure-save': 'Save figure',
   'viewer-toolbar-menu': 'Adjust display: contrast, bias, stretch',
   'viewer-toolbar-more': 'More options...',
+
+  'table-prev': 'Select previous row in table',
+  'table-next': 'Select next row in table',
+  'table-play-pause-toggle': 'Toggle cycling through rows of table',
+  'table-play-pause-delay': 'Set delay before cycling to next entry',
   
   'plugin-gaussian-apply': 'Apply to smooth your data',
   'plugin-collapse-apply': 'Apply to collapse your data set',

jdaviz/configs/mosviz/plugins/viewers.py

@@ -140,6 +140,34 @@ def redraw(self):
 
         super().redraw()
 
+    @property
+    def nrows(self):
+        return self.widget_table.get_state()['total_length']
+
+    def select_row(self, n):
+        if n < 0 or n >= self.nrows:
+            raise ValueError("n must be between 0 and {}".format(self.nrows-1))
+
+        # compute and set the appropriate page
+        # NOTE: traitlets won't detect internal changes to a dict
+        options = self.widget_table.get_state()['options']
+        page = int(n / options['itemsPerPage']) + 1
+        if options['page'] != page:
+            self.widget_table.set_state({'options': {**options, 'page': page}})
+            self.widget_table.send_state()
+        # select and highlight the row
+        self.widget_table.highlighted = n
+
+    def next_row(self):
+        current_row = self.widget_table.highlighted
+        new_row = 0 if current_row == self.nrows - 1 else current_row + 1
+        self.select_row(new_row)
+
+    def prev_row(self):
+        current_row = self.widget_table.highlighted
+        new_row = self.nrows - 1 if current_row == 0 else current_row - 1
+        self.select_row(new_row)
+
     def _on_row_selected(self, event):
         if self._on_row_selected_begin:
             self._on_row_selected_begin()

jdaviz/configs/mosviz/tests/test_helper.py

@@ -282,3 +282,23 @@ def test_to_csv(tmp_path, mosviz_app, spectrum_collection):
 
     assert found_index_label
     assert found_rows == 5
+
+
+@pytest.mark.filterwarnings('ignore')
+def test_table_scrolling(mosviz_app, image, spectrum1d, spectrum2d):
+    spectra1d = [spectrum1d] * 2
+    spectra2d = [spectrum2d] * 2
+
+    mosviz_app.load_data(spectra1d, spectra2d, images=image)
+
+    table = mosviz_app.app.get_viewer('table-viewer')
+    # first row is automatically selected in the UI
+    # (otherwise it would be None which is a case not handled)
+    table.widget_table.highlighted = 0
+    table.next_row()
+    assert(table.widget_table.highlighted == 1)
+    table.next_row()
+    # with only 2 rows, this should wrap back to 0
+    assert(table.widget_table.highlighted == 0)
+    table.prev_row()
+    assert(table.widget_table.highlighted == 1)

jdaviz/container.vue

@@ -9,6 +9,7 @@
       @destroy="$emit('destroy', $event)"
       @data-item-selected="$emit('data-item-selected', $event)"
       @save-figure="$emit('save-figure', $event)"
+      @call-viewer-method="$emit('call-viewer-method', $event)"
     ></g-viewer-tab>
     <gl-component
       v-for="(viewer, index) in stack.viewers"
@@ -53,6 +54,19 @@
 
 
               </v-col>
+              <v-toolbar-items v-if="viewer.reference === 'table-viewer'">
+                <j-tooltip tipid='table-prev'>
+                  <v-btn icon @click="$emit('call-viewer-method', {'id': viewer.id, 'method': 'prev_row'})" color="white">
+                    <v-icon>mdi-arrow-up-bold</v-icon>
+                  </v-btn>
+                </j-tooltip>
+                <j-tooltip tipid='table-next'>
+                  <v-btn icon @click="$emit('call-viewer-method', {'id': viewer.id, 'method': 'next_row'})" color="white">
+                    <v-icon>mdi-arrow-down-bold</v-icon>
+                  </v-btn>
+                </j-tooltip>
+              </v-toolbar-items>
+              <j-play-pause-widget v-if="viewer.reference == 'table-viewer'" @event="$emit('call-viewer-method', {'id': viewer.id, 'method': 'next_row'})"></j-play-pause-widget>
               <v-spacer></v-spacer>
                <v-toolbar-items>
                <j-tooltip tipid='viewer-toolbar-figure'>