Channel colors & sliders

girder/girder_large_image/web_client/vue/components/CompositeLayers.vue

@@ -47,10 +47,17 @@ export default {
                     autoRange: undefined
                 }
             })
-            Object.entries(CHANNEL_COLORS).forEach(([channelName, color]) => {
-                if(this.layers.includes(channelName)){
-                    this.compositeLayerInfo[channelName].palette = color
-                    usedColors.push(color)
+            // Assign colors
+            this.layers.forEach((layerName) => {
+                if (!this.compositeLayerInfo[layerName].palette) {
+                    // Search for case-insensitive regex match among known channel-colors
+                    Object.entries(CHANNEL_COLORS).forEach(([channelPattern, color]) => {
+                        if (layerName.match(new RegExp(channelPattern, 'i')) && !usedColors.includes(color)) {
+                            this.compositeLayerInfo[layerName].palette = color
+                            usedColors.push(color)
+                        }
+                    })
+
                 }
             })
             this.layers.forEach((layerName) => {
@@ -193,7 +200,7 @@ export default {
 </script>
 
 <template>
-    <div class="table-container">
+    <div :class="colorPickerShown ? 'table-container tall' : 'table-container'">
         <table id="composite-layer-table" class="table table-condensed">
             <thead class="table-header">
                 <tr>
@@ -341,7 +348,8 @@ export default {
     width: 10%;
 }
 .name-col {
-    width: 40%;
+    max-width: 40%;
+    word-break: break-all;
 }
 .color-col {
     width: 25%;
@@ -408,6 +416,9 @@ export default {
     position: relative;
     max-height: 300px;
 }
+.table-container.tall {
+    height: 300px;
+}
 .table-container td {
     padding: 0 5px;
 }

girder/girder_large_image/web_client/vue/components/DualInput.vue

@@ -1,10 +1,10 @@
 <script>
 export default {
-    props: ['label', 'currentValue', 'valueMax'],
+    props: ['label', 'currentValue', 'valueMax', 'sliderLabels'],
     emits: ['updateValue'],
     data() {
         return {
-            value: this.currentValue
+            value: this.currentValue,
         }
     },
     watch: {
@@ -16,7 +16,7 @@ export default {
 </script>
 
 <template>
-    <tr class="dual-controls">
+    <tr :class="this.sliderLabels && this.sliderLabels.length ? 'dual-controls tall' : 'dual-controls'">
         <td><label for="numberControl">{{ label }}: </label></td>
         <td><input
             type="number"
@@ -25,18 +25,60 @@ export default {
             :max="valueMax"
             v-model="value"
         ></td>
-        <td style="width:90%"><input
-            type="range"
-            name="sliderControl"
-            min="0"
-            :max="valueMax"
-            v-model="value"
-        ></td>
+        <td style="width:90%">
+            <input
+                type="range"
+                name="sliderControl"
+                min="0"
+                :max="valueMax"
+                v-model="value"
+            >
+            <div class="bubble-wrap">
+                <output
+                    v-if="this.sliderLabels && this.sliderLabels.length > value"
+                    :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
+                    class="bubble"
+                >
+                    {{ this.sliderLabels[value] }}
+                </output>
+                <span v-if="this.sliderLabels && this.sliderLabels.length > value"
+                    :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
+                    class="bubble-after"></span>
+            </div>
+        </td>
     </tr>
 </template>
 
 <style scoped>
 .dual-controls > * > * {
     margin-right: 15px;
 }
+.dual-controls.tall {
+    height: 40px;
+    vertical-align: top;
+}
+.bubble-wrap {
+  position: relative;
+  width: calc(100% - 20px);
+  left: 10px;
+}
+.bubble {
+  background: rgb(120, 120, 120);
+  font-size: 10px;
+  color: white;
+  padding: 4px 12px;
+  position: absolute;
+  border-radius: 4px;
+  transform: translateX(-50%);
+  z-index: 10;
+  white-space: nowrap;
+}
+.bubble-after {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: rgb(120, 120, 120);
+  top: -1px;
+  left: 50%;
+}
 </style>

girder/girder_large_image/web_client/vue/components/FrameSelector.vue

@@ -189,6 +189,7 @@ export default Vue.extend({
                 :currentValue="indexInfo[index].current"
                 :valueMax="indexInfo[index].range"
                 :label="index.replace('Index', '')"
+                :sliderLabels="index === 'IndexC' ? imageMetadata.channels : []"
                 @updateValue="(v) => updateAxisSlider({index, frame: v})"
             />
         </table>

girder/girder_large_image/web_client/vue/components/HistogramEditor.vue

@@ -184,6 +184,9 @@ export default {
         this.fetchHistogram()
     },
     watch: {
+        currentFrame() {
+            this.fetchHistogram()
+        },
         histogram() {
             // allow rerender to occur first
             nextTick().then(() => {

girder/girder_large_image/web_client/vue/utils/colors.js

@@ -1,11 +1,11 @@
 export const CHANNEL_COLORS = {
-    BRIGHTFIELD: '#FFFFFF',
-    DAPI: '#0000FF',
-    A594: '#FF0000',
-    CY3: '#FF8000',
-    CY5: '#FF00FF',
-    YFP: '#00FF00',
-    GFP: '#00FF00'
+    '^BRIGHTFIELD.*$': '#FFFFFF',
+    '^DAPI.*$': '#0000FF',
+    '^A594(|[^\d].*)$': '#FF0000',  // eslint-disable-line
+    '^CY3(|[^\d].*)$': '#FF8000',  // eslint-disable-line
+    '^CY5(|[^\d].*)$': '#FF00FF',  // eslint-disable-line
+    '^YFP.*$': '#00FF00',
+    '^GFP.*$': '#00FF00'
 };
 
 export const OTHER_COLORS = [