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;
     },
 
+    _createVueModal(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;
@@ -109,7 +122,7 @@ var ImageViewerSelectWidget = View.extend({
     setFrames: function (metadata, frameUpdate) {
         if (metadata.frames && metadata.frames.length > 1) {
             this._frameUpdate = frameUpdate;
-            this.$('.image-controls-frame').removeClass('hidden');
+            // this.$('.image-controls-frame').removeClass('hidden');
             var ctrl = this.$('#image-frame'),
                 ctrlnum = this.$('#image-frame-number');
             ctrl.attr('max', metadata.frames.length - 1);
@@ -121,6 +134,9 @@ var ImageViewerSelectWidget = View.extend({
             }
             ctrlnum.val(frame);
             frameUpdate(frame);
+
+            // Vue frame control
+            this._createVueModal(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,86 @@ 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);
-                this._layer2.moveDown();
-                setFrameQuad((this._layer.setFrameQuad.status || {}).tileinfo, this._layer2, (this._layer.setFrameQuad.status || {}).options);
-                this._layer2.setFrameQuad(0);
-            }
+            // 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);
+            this._layer2.moveDown();
+            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) {
+                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) {
+                    this._layer2.setFrameQuad(frame);
+                    this._layer2.frame = frame;
+                } else {
+                    this._layer2.setFrameQuad(undefined);
+                    this._layer2.frame = undefined;
+                }
                 this.viewer.onIdle(() => {
                     this._layer.moveDown();
                     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/components/CompositeChannels.vue

@@ -0,0 +1,184 @@
+<script>
+import { Chrome } from 'vue-color';
+
+const CHANNEL_COLORS = {
+  Red: '#FF0000',
+  Green: '#008000',
+  Orange: '#FFA500',
+  RoyalBlue: '#4169E1',
+  Purple: '#800080',
+  Yellow: '#FFFF00',
+  Magenta: '#FF00FF',
+  Teal: '#008080',
+  Maroon: '#800000',
+  Navy: '#000080',
+  Violet: '#EE82EE',
+};
+
+
+export default {
+    props: ['channels', 'channelMap', 'frameIndices'],
+    emits: ['updateActiveChannels'],
+    components: {
+        'color-picker': Chrome
+    },
+    data() {
+        return {
+            enabledChannels: this.channels,
+            colorPickerShown: undefined,
+            currentColorPickerRef: undefined,
+        }
+    },
+    methods: {
+        toggleColorPicker(channel) {
+            this.colorPickerShown = channel
+            if (this.colorPickerShown === undefined) {
+                document.removeEventListener('click', this.documentClick);
+                // Only update style when picker is closed
+                this.updateStyle()
+            }
+            else {
+                this.currentColorPickerRef = document.getElementById(channel+'_picker')
+                document.addEventListener('click', this.documentClick);
+            }
+        },
+        documentClick(e) {
+            const picker = this.currentColorPickerRef;
+            if (picker && picker !== e.target && !picker.contains(e.target)) {
+                this.toggleColorPicker(undefined);
+            }
+        },
+        updateChannelColor(channel, swatch) {
+            this.compositeChannelInfo[channel].falseColor = swatch.hex;
+        },
+        updateChannelMin(event, channel) {
+            const newVal = event.target.value;
+            const newMinVal = parseFloat(newVal);
+            this.compositeChannelInfo[channel].min = newMinVal;
+            this.updateStyle();
+        },
+        updateChannelMax(event, channel) {
+            const newVal = event.target.valueAsNumber;
+            const newMaxVal = parseFloat(newVal);
+            this.compositeChannelInfo[channel].max = newMaxVal;
+            this.updateStyle();
+        },
+        updateActiveChannels() {
+            this.channels.forEach((channel) => {
+                this.compositeChannelInfo[channel].enabled = this.enabledChannels.includes(channel);
+            })
+            this.updateStyle();
+        },
+        updateStyle() {
+            const activeChannels = Object.values(
+                this.compositeChannelInfo
+            ).filter((channel) => channel.enabled);
+            this.$emit('updateActiveChannels', activeChannels);
+        },
+    },
+    computed: {
+        compositeChannelInfo() {
+            return Object.fromEntries(this.channels.map((channel, index) => {
+                return [channel, {
+                    number: this.channelMap[channel],
+                    enabled: true,
+                    falseColor: Object.values(CHANNEL_COLORS)[index % Object.values(CHANNEL_COLORS).length],
+                    min: 0,
+                    max: 0,
+                }]
+            }))
+        }
+    },
+    mounted() {
+        this.updateStyle()
+    }
+}
+</script>
+
+<template>
+    <div class="table-container">
+        <table id="composite-channel-table" class="table table-condensed">
+            <thead>
+                <tr>
+                    <th class="channel-col">Channel</th>
+                    <th class="enabled-col">Enabled?</th>
+                    <th class="color-col">Color</th>
+                    <th class="precision-col">Min</th>
+                    <th class="precision-col">Max</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr
+                    v-for="channel in channels.filter(c => compositeChannelInfo[c] !== undefined)"
+                    :key="channel"
+                >
+                    <td>{{ channel }}</td>
+                    <td>
+                        <input
+                            type="checkbox"
+                            :value="channel"
+                            v-model="enabledChannels"
+                            @change="updateActiveChannels"
+                        >
+                    </td>
+                    <td :id="channel+'_picker'">
+                        <span
+                            class="current-color"
+                            :style="{ 'background-color': compositeChannelInfo[channel].falseColor }"
+                            @click="() => toggleColorPicker(channel)"
+                        />
+                        <color-picker
+                            class="picker-offset"
+                            v-if="colorPickerShown === channel"
+                            :value="compositeChannelInfo[channel].falseColor"
+                            @input="(swatch) => {updateChannelColor(channel, swatch)}"
+                        />
+                    </td>
+                    <td>
+                        <input
+                            type="number"
+                            step="0.01"
+                            min="0"
+                            max="1"
+                            :value="compositeChannelInfo[channel].min"
+                            @change.prevent="(event) => updateChannelMin(event, channel)"
+                        >
+                    </td>
+                    <td>
+                        <input
+                            type="number"
+                            step="0.01"
+                            min="0"
+                            max="1"
+                            :value="compositeChannelInfo[channel].max"
+                            @change.prevent="(event) => updateChannelMax(event, channel)"
+                        >
+                    </td>
+                    <td></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<style scoped>
+.current-color {
+    display: inline-block;
+    width: 50px;
+    height: 20px;
+    background-color: #000;
+    cursor: pointer;
+}
+.picker-offset {
+    position: absolute;
+    z-index: 100;
+    margin-left: 50px;
+}
+.table-container {
+    max-height: 200px;
+    overflow: scroll;
+}
+.table-container input {
+    max-width: 70px;
+}
+</style>