Simple vue frame slider working in Jupyter and Girder

Author: annehaley

Diff for: girder/girder_large_image/web_client/views/imageViewerSelectWidget.js

@@ -11,7 +11,10 @@ import * as viewers from './imageViewerWidget';
 
 import imageViewerSelectWidget from '../templates/imageViewerSelectWidget.pug';
 import '../stylesheets/imageViewerSelectWidget.styl';
-import FrameSelector from '../vue/components/FrameSelector.vue';
+
+import FrameSelector from '../widgets/FrameSelector.vue';
+import DualInput from '../widgets/DualInput.vue';
+import Vue from 'vue';
 
 wrap(ItemView, 'render', function (render) {
     // ItemView is a special case in which rendering is done asynchronously,
@@ -73,9 +76,12 @@ var ImageViewerSelectWidget = View.extend({
 
     _createVue(imageMetadata, frameUpdate) {
         const el = this.$('#vue-container').get(0);
-        const vm = new FrameSelector({
+        FrameSelector.components = { DualInput };
+        const component = Vue.extend(FrameSelector);
+        const vm = new component({
             el,
             propsData: {
+                currentFrame: 0,
                 itemId: this.itemId,
                 imageMetadata: imageMetadata,
                 frameUpdate: frameUpdate,

Diff for: girder/girder_large_image/web_client/widgets

@@ -0,0 +1 @@
+../../../large_image/widgets

Diff for: large_image/widgets/DualInput.vue

@@ -1,60 +1,76 @@
 <script>
 module.exports = {
+    name: 'DualInput',
     props: ['label', 'currentValue', 'valueMax', 'sliderLabels', 'maxMerge'],
+    emits: ['updateValue', 'updateMaxMerge'],
+    data() {
+      return {
+        value: this.currentValue,
+        merge: this.maxMerge,
+      };
+    },
     watch: {
-        currentValue() {
-            this.$emit('update', this.currentValue)
-        }
+      currentValue(v) {
+        this.value = v;
+      },
+      value(v) {
+        this.$emit('updateValue', v);
+      },
+      maxMerge(v) {
+        this.merge = v;
+      },
+      merge(v) {
+        this.$emit('updateMaxMerge', v);
+      }
     }
 };
 </script>
 
 <template>
   <tr :class="sliderLabels && sliderLabels.length ? 'dual-controls tall' : 'dual-controls'">
-    <td><label for="numberControl">{{ label }}:</label></td>
+    <td><label for="numberControl">{{ label }}: </label></td>
     <td>
       <input
-        v-model="currentValue"
+        v-model="value"
         type="number"
         name="numberControl"
         min="0"
         :max="valueMax"
-        :disabled="maxMerge"
+        :disabled="merge"
       >
     </td>
     <td class="slider-control-cell">
       <input
-        v-model="currentValue"
+        v-model="value"
         type="range"
         name="sliderControl"
         min="0"
         :max="valueMax"
-        :disabled="maxMerge"
-        style="width: 100%"
+        :disabled="merge"
       >
       <div class="bubble-wrap">
         <output
-          v-if="sliderLabels && sliderLabels.length > currentValue"
-          :style="'left:'+currentValue/valueMax*100+'%; transform:translateX(-'+currentValue/valueMax*100+'%)'"
+          v-if="sliderLabels && sliderLabels.length > value"
+          :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
           class="bubble"
         >
-          {{ sliderLabels[currentValue] }}
+          {{ sliderLabels[value] }}
         </output>
         <span
-          v-if="sliderLabels && sliderLabels.length > currentValue"
-          :style="'left:'+currentValue/valueMax*100+'%; transform:translateX(-'+currentValue/valueMax*100+'%)'"
+          v-if="sliderLabels && sliderLabels.length > value"
+          :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
           class="bubble-after"
         />
       </div>
     </td>
     <td
-      v-show="maxMerge !== undefined"
+      v-show="merge !== undefined"
       class="max-merge-cell"
       :title="'Max Merge ' + label"
     >
       <input
         :id="'maxMerge'+label"
-        v-model="maxMerge"
+        v-model="merge"
         type="checkbox"
       >
       <label :for="'maxMerge'+label">Max Merge</label>
@@ -95,7 +111,7 @@ module.exports = {
   top: -1px;
   left: 50%;
 }
-.slider-control-cell {
+.slider-control-cell, .slider-control-cell > input {
   width: 100%;
 }
 .max-merge-cell {

Diff for: large_image/widgets/FrameSelector.vue

@@ -1,5 +1,5 @@
 <script>
-modules.export = {
+module.exports = {
     name: 'FrameSelector',
     props: ['currentFrame', 'itemId', 'imageMetadata', 'frameUpdate', 'liConfig'],
     data() {
@@ -9,8 +9,9 @@ modules.export = {
         };
     },
     created() {
-        console.log(this.imageMetadata)
-        this.maxFrame = this.imageMetadata.frames.length - 1;
+        if (this.imageMetadata && this.imageMetadata.frames) {
+            this.maxFrame = this.imageMetadata.frames.length - 1;
+        }
     },
     watch: {
         currentFrame() {
@@ -32,13 +33,13 @@ modules.export = {
     <div id="current_image_frame" class="invisible">
         {{ currentFrame }}
     </div>
-    <dual-input
+    <DualInput
         v-if="currentModeId === 0"
         :currentValue.sync="currentFrame"
         :valueMax="maxFrame"
         :maxMerge="false"
         label="Frame"
-        @update="updateCurrentFrame"
+        @updateValue="updateCurrentFrame"
     />
   </div>
 </template>

Diff for: large_image/widgets/components.py

@@ -15,7 +15,7 @@ class DualInput(ipyvue.VueTemplate):
 class FrameSelector(ipyvue.VueTemplate, traitlets.HasTraits):
     template_file = __file__, 'FrameSelector.vue'
     components = traitlets.Dict({
-        'dual-input': DualInput().template.template,
+        'DualInput': DualInput().template.template,
     }).tag(sync=True)
 
     imageMetadata = traitlets.Dict().tag(sync=True)