New Frame selector Vue component

girder/girder_large_image/web_client/package.json

@@ -20,9 +20,13 @@
         "d3": "^3.5.16",
         "geojs": "^1.8.6",
         "hammerjs": "^2.0.8",
-        "jsonlint-mod": "^1.7.6",
         "js-yaml": "^4.1.0",
+        "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": "^2.7.0",
         "yaml": "^2.1.1"
     },

girder/girder_large_image/web_client/templates/imageViewerSelectWidget.pug

@@ -6,6 +6,7 @@
     each viewer in viewers
       option(value=viewer.name) #{viewer.label}
 .image-controls
+  #vue-container
   span.image-controls-frame.hidden
     label(for='image-frame') Frame:
     input#image-frame-number.image-controls-number(type='number', min='0', value='0')

girder/girder_large_image/web_client/views/imageViewerSelectWidget.js

@@ -11,6 +11,7 @@ import * as viewers from './imageViewerWidget';
 
 import imageViewerSelectWidget from '../templates/imageViewerSelectWidget.pug';
 import '../stylesheets/imageViewerSelectWidget.styl';
+import FrameSelector from '../vue/components/FrameSelector.vue';
 
 wrap(ItemView, 'render', function (render) {
     // ItemView is a special case in which rendering is done asynchronously,
@@ -65,6 +66,18 @@ var ImageViewerSelectWidget = View.extend({
         return this;
     },
 
+    _createVue(imageMetadata, frameUpdate) {
+        const el = this.$('#vue-container').get(0);
+        const vm = new FrameSelector({
+            el,
+            propsData: {
+                imageMetadata: imageMetadata,
+                frameUpdate: frameUpdate
+            }
+        });
+        this.vueApp = vm;
+    },
+
     _selectViewer: function (viewerName) {
         if (this.currentViewer && this.currentViewer.name === viewerName) {
             return;
@@ -107,21 +120,8 @@ var ImageViewerSelectWidget = View.extend({
      *      there is only one frame.
      */
     setFrames: function (metadata, frameUpdate) {
-        if (metadata.frames && metadata.frames.length > 1) {
-            this._frameUpdate = frameUpdate;
-            this.$('.image-controls-frame').removeClass('hidden');
-            var ctrl = this.$('#image-frame'),
-                ctrlnum = this.$('#image-frame-number');
-            ctrl.attr('max', metadata.frames.length - 1);
-            ctrlnum.attr('max', metadata.frames.length - 1);
-            var frame = +ctrl.val();
-            if (frame >= metadata.frames.length) {
-                ctrl.val(0);
-                frame = 0;
-            }
-            ctrlnum.val(frame);
-            frameUpdate(frame);
-        }
+        // Vue frame control
+        this._createVue(metadata, frameUpdate);
     },
 
     /**

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

@@ -81,15 +81,18 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
             params.layer.autoshareRenderer = false;
             this._layer = this.viewer.createLayer('osm', params.layer);
             if (this.metadata.frames && this.metadata.frames.length > 1) {
+                const baseUrl = this._getTileUrl('{z}', '{x}', '{y}');
+                const match = baseUrl.match(/[?&](_=[^&]*)/);
+                const updated = match && match[1] ? ('&' + match[1]) : '';
                 setFrameQuad(this.metadata, this._layer, {
                     // allow more and larger textures is slower, balancing
                     // performance and appearance
                     // maxTextures: 16,
                     // maxTotalTexturePixels: 256 * 1024 * 1024,
-                    baseUrl: this._getTileUrl('{z}', '{x}', '{y}').split('/tiles/')[0] + '/tiles',
+                    baseUrl: baseUrl.split('/tiles/')[0] + '/tiles',
                     restRequest: restRequest,
                     restUrl: 'item/' + this.itemId + '/tiles',
-                    query: 'cache=true'
+                    query: 'cache=true' + updated
                 });
                 this._layer.setFrameQuad(0);
             }
@@ -144,69 +147,106 @@ var GeojsImageViewerWidget = ImageViewerWidget.extend({
     _postRender: function () {
     },
 
-    frameUpdate: function (frame) {
+    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) {
+            if (frame === 0 && style === undefined) {
                 return;
             }
             this._frame = 0;
+            this._style = undefined;
             this._baseurl = this._layer.url();
-            const quadLoaded = ((this._layer.setFrameQuad || {}).status || {}).loaded;
-            if (!quadLoaded) {
-                // use two layers to get smooth transitions until we load
-                // background quads.
-                this._layer2 = this.viewer.createLayer('osm', this._layer._options);
+            // use two layers to get smooth transitions until we load
+            // background quads.  Always cteate this, as styles will use
+            // this, even if pure frame do not.
+            this._layer2 = this.viewer.createLayer('osm', this._layer._options);
+            if (this._layer2.zIndex() > this._layer.zIndex()) {
                 this._layer2.moveDown();
+                if (!this._layer2.options.keepLower) {
+                    this._layer.visible(true);
+                    this._layer2.visible(false);
+                }
+            }
+            if (this._layer.setFrameQuad) {
                 setFrameQuad((this._layer.setFrameQuad.status || {}).tileinfo, this._layer2, (this._layer.setFrameQuad.status || {}).options);
                 this._layer2.setFrameQuad(0);
             }
         }
+        frame = frame || 0;
         this._nextframe = frame;
-        if (frame !== this._frame && !this._updating) {
+        this._nextstyle = style;
+        if ((frame !== this._frame || style !== this._style) && !this._updating) {
             this._frame = frame;
+            this._style = style;
             this.trigger('g:imageFrameChanging', this, frame);
             const quadLoaded = ((this._layer.setFrameQuad || {}).status || {}).loaded;
-            if (quadLoaded) {
-                if (this._layer2) {
-                    this.viewer.deleteLayer(this._layer2);
-                    delete this._layer2;
-                }
+            if (quadLoaded && this._style === undefined) {
                 this._layer.url(this.getFrameAndUrl().url);
                 this._layer.setFrameQuad(frame);
                 this._layer.frame = frame;
                 this.trigger('g:imageFrameChanged', this, frame);
                 return;
             }
-
+            if (this._layer.frame !== undefined) {
+                if (this._layer.setFrameQuad) {
+                    this._layer.setFrameQuad(undefined);
+                }
+                this._layer.frame = undefined;
+            }
             this._updating = true;
             this.viewer.onIdle(() => {
                 this._layer2.url(this.getFrameAndUrl().url);
-                this._layer2.setFrameQuad(frame);
-                this._layer2.frame = frame;
+                if (this._style === undefined) {
+                    if (this._layer2.setFrameQuad) {
+                        this._layer2.setFrameQuad(frame);
+                    }
+                    this._layer2.frame = frame;
+                } else {
+                    if (this._layer2.setFrameQuad) {
+                        this._layer2.setFrameQuad(undefined);
+                    }
+                    this._layer2.frame = undefined;
+                }
                 this.viewer.onIdle(() => {
-                    this._layer.moveDown();
+                    if (this._layer.zIndex() > this._layer2.zIndex()) {
+                        this._layer.moveDown();
+                        if (!this._layer.options.keepLower) {
+                            this._layer2.visible(true);
+                            this._layer.visible(false);
+                        }
+                    }
                     var ltemp = this._layer;
                     this._layer = this._layer2;
                     this._layer2 = ltemp;
                     this._updating = false;
                     this.trigger('g:imageFrameChanged', this, frame);
-                    if (frame !== this._nextframe) {
-                        this.frameUpdate(this._nextframe);
+                    if (frame !== this._nextframe || style !== this._nextstyle) {
+                        this.frameUpdate(this._nextframe, this._nextstyle);
                     }
                 });
             });
         }
     },
 
     getFrameAndUrl: function () {
-        const frame = this._frame || 0;
+        let frame = this._frame || 0;
         let url = this._baseurl || this._layer.url();
+        // setting the frame to the first frame used in a style seems to
+        // resolve a caching issue, which is probably a bug in the styling
+        // functions.  Until that is resolved, we do this.
+        if (this._style && this._style.bands && !this._style.bands.some((b) => b.frame === undefined) && this._style.bands.length) {
+            frame = this._style.bands[0].frame;
+        }
         if (frame) {
             url += (url.indexOf('?') >= 0 ? '&' : '?') + 'frame=' + frame;
         }
+        if (this._style !== undefined) {
+            const encodedStyle = encodeURIComponent(JSON.stringify(this._style));
+            url += (url.indexOf('?') >= 0 ? '&' : '?') + 'style=' + encodedStyle;
+        }
         return {
             frame: frame,
+            style: this._style,
             url: url
         };
     },

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

@@ -147,7 +147,9 @@ function setFrameQuad(tileinfo, layer, options) {
         return status;
     });
     layer.setFrameQuad = function (frame) {
-        if (status.framesToIdx[frame] !== undefined && status.loaded) {
+        if (frame === undefined) {
+            layer.baseQuad = undefined;
+        } else if (status.framesToIdx[frame] !== undefined && status.loaded) {
             layer.baseQuad = Object.assign({}, status.quads[status.framesToIdx[frame]]);
         }
         status.frame = frame;

girder/girder_large_image/web_client/vue/colors.js

@@ -0,0 +1,73 @@
+
+export const CHANNEL_COLORS = {
+    BRIGHTFIELD: '#FFFFFF',
+    DAPI: '#0000FF',
+    A594: '#FF0000',
+    CY3: '#FF8000',
+    CY5: '#FF00FF',
+    YFP: '#00FF00',
+    GFP: '#00FF00'
+};
+
+export const OTHER_COLORS = [
+    '#FF0000',
+    '#00FF00',
+    '#0000FF',
+    '#FFFF00',
+    '#FF00FF',
+    '#00FFFF',
+    '#FF8000',
+    '#FF0080',
+    '#00FF80',
+    '#80FF00',
+    '#8000FF',
+    '#0080FF',
+    '#FF8080',
+    '#80FF80',
+    '#8080FF',
+    '#FFFF80',
+    '#80FFFF',
+    '#FF80FF',
+    '#FF4000',
+    '#FF0040',
+    '#00FF40',
+    '#40FF00',
+    '#4000FF',
+    '#0040FF',
+    '#FF4040',
+    '#40FF40',
+    '#4040FF',
+    '#FFFF40',
+    '#40FFFF',
+    '#FF40FF',
+    '#FFC000',
+    '#FF00C0',
+    '#00FFC0',
+    '#C0FF00',
+    '#C000FF',
+    '#00C0FF',
+    '#FFC0C0',
+    '#C0FFC0',
+    '#C0C0FF',
+    '#FFFFC0',
+    '#C0FFFF',
+    '#FFC0FF',
+    '#FF8040',
+    '#FF4080',
+    '#40FF80',
+    '#80FF40',
+    '#8040FF',
+    '#4080FF',
+    '#FF80C0',
+    '#FFC080',
+    '#C0FF80',
+    '#80FFC0',
+    '#80C0FF',
+    '#C080FF',
+    '#FFC040',
+    '#FF40C0',
+    '#40FFC0',
+    '#C0FF40',
+    '#C040FF',
+    '#40C0FF'
+];