Jupyter Frame Selector component

girder/girder_large_image/web_client/package.json

@@ -24,7 +24,6 @@
         "jsonlint-mod": "^1.7.6",
         "sinon": "^2.1.0",
         "vue": "~2.6.14",
-        "vue-color": "^2.8.1",
         "vue-loader": "~15.9.8",
         "vue-template-compiler": "~2.6.14",
         "webpack": "^3",
@@ -67,7 +66,8 @@
             "promise/no-return-in-finally": "error",
             "promise/no-return-wrap": "error",
             "vue/require-prop-types": "off",
-            "vue/multiline-html-element-content-newline": "off"
+            "vue/multiline-html-element-content-newline": "off",
+            "vue/html-self-closing": "off"
         },
         "root": true
     },

girder/girder_large_image/web_client/views/imageViewerSelectWidget.js

@@ -1,17 +1,26 @@
 import $ from 'jquery';
 import _ from 'underscore';
+import Vue from 'vue';
 
 import {wrap} from '@girder/core/utilities/PluginUtils';
 import eventStream from '@girder/core/utilities/EventStream';
 import ItemView from '@girder/core/views/body/ItemView';
 import View from '@girder/core/views/View';
 
+import {restRequest} from '@girder/core/rest';
+
 import largeImageConfig from './configView';
 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 CompositeLayers from '../widgets/CompositeLayers.vue';
+import HistogramEditor from '../widgets/HistogramEditor.vue';
+import colors from '../widgets/colors.json';
+import PresetsMenu from '../vue/components/PresetsMenu.vue';
 
 wrap(ItemView, 'render', function (render) {
     // ItemView is a special case in which rendering is done asynchronously,
@@ -73,13 +82,32 @@ var ImageViewerSelectWidget = View.extend({
 
     _createVue(imageMetadata, frameUpdate) {
         const el = this.$('#vue-container').get(0);
-        const vm = new FrameSelector({
+        const getFrameHistogram = (params) => {
+            restRequest({
+                type: 'GET',
+                url: 'item/' + this.itemId + '/tiles/histogram',
+                data: params
+            }).then((response) => {
+                const frameHistograms = this.vueApp._props.frameHistograms || {};
+                frameHistograms[params.frame] = response;
+                this.vueApp._props.frameHistograms = Object.assign({}, frameHistograms);
+                return undefined;
+            });
+        };
+        CompositeLayers.components = {HistogramEditor};
+        FrameSelector.components = {DualInput, CompositeLayers, HistogramEditor, PresetsMenu};
+        const Component = Vue.extend(FrameSelector);
+        const vm = new Component({
             el,
             propsData: {
+                currentFrame: 0,
                 itemId: this.itemId,
                 imageMetadata: imageMetadata,
-                frameUpdate: frameUpdate,
-                liConfig: this._liConfig
+                frameUpdate,
+                liConfig: this._liConfig,
+                frameHistograms: undefined,
+                getFrameHistogram,
+                colors
             }
         });
         this.vueApp = vm;

girder/girder_large_image/web_client/views/imageViewerWidget/geojs.js

@@ -154,7 +154,7 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
     _postRender: function () {
     },
 
-    frameUpdate: function (frame, style) {
+    frameUpdate: function ({frame, style}) {
         if (this._frame === undefined) {
             // don't set up layers until the we access the first non-zero frame
             if (frame === 0 && style === undefined) {
@@ -242,8 +242,8 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
                     this._layer2 = ltemp;
                     this._updating = false;
                     this.trigger('g:imageFrameChanged', this, frame);
-                    if (frame !== this._nextframe || style !== this._nextstyle) {
-                        this.frameUpdate(this._nextframe, this._nextstyle);
+                    if (frame !== this._nextframe || JSON.stringify(style) !== JSON.stringify(this._nextstyle)) {
+                        this.frameUpdate({frame: this._nextframe, style: this._nextstyle});
                     }
                 });
             });

girder/girder_large_image/web_client/vue/components/PresetsMenu.vue

@@ -155,7 +155,7 @@ export default {
         },
         styleToAutoRange(band) {
             band = Object.assign({}, band); // new reference
-            if (band.min && band.min.includes('min:')) {
+            if (band.min && band.min.toString().includes('min:')) {
                 band.autoRange = parseFloat(band.min.replace('min:', '')) * 100;
                 delete band.min;
                 delete band.max;

girder/girder_large_image/web_client/widgets

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