From ab3b767297514e8c5457503ae457794a0e0a0f74 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 19 Sep 2023 15:12:01 -0400
Subject: [PATCH 01/10] Create function getChannelColor for use in multiple
 places

---
 .../web_client/vue/components/CompositeLayers.vue  | 14 ++++++--------
 .../web_client/vue/utils/colors.js                 |  9 +++++++++
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
index 268e6a4f0..0a4274977 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -2,7 +2,7 @@
 import {restRequest} from '@girder/core/rest';
 import {Chrome} from 'vue-color';
 
-import {CHANNEL_COLORS, OTHER_COLORS} from '../utils/colors';
+import {OTHER_COLORS, getChannelColor} from '../utils/colors';
 import HistogramEditor from './HistogramEditor.vue';
 
 export default {
@@ -114,13 +114,11 @@ export default {
             // 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);
-                        }
-                    });
+                    const channelColor = getChannelColor(layerName)
+                    if (channelColor) {
+                        this.compositeLayerInfo[layerName].palette = channelColor;
+                        usedColors.push(channelColor);
+                    }
                 }
             });
             this.layers.forEach((layerName) => {
diff --git a/girder/girder_large_image/web_client/vue/utils/colors.js b/girder/girder_large_image/web_client/vue/utils/colors.js
index 11a2e7034..a0c39796a 100644
--- a/girder/girder_large_image/web_client/vue/utils/colors.js
+++ b/girder/girder_large_image/web_client/vue/utils/colors.js
@@ -12,6 +12,15 @@ export const CHANNEL_COLORS = {
     '^gr[ae]y(|scale)$': '#FFFFFF'
 };
 
+export function getChannelColor(name) {
+    // Search for case-insensitive regex match among known channel-colors
+    for (const [channelPattern, color] of Object.entries(CHANNEL_COLORS)) {
+        if (name.match(new RegExp(channelPattern, 'i'))) {
+            return color
+        }
+    }
+}
+
 export const OTHER_COLORS = [
     '#FF0000',
     '#00FF00',

From ab79324f7d18d33f8dba683e2b0d391d2537bd99 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 19 Sep 2023 15:12:51 -0400
Subject: [PATCH 02/10] Add a "Max-Merge" option to DualInput and use max-merge
 values in computing style

---
 .../web_client/vue/components/DualInput.vue   | 26 ++++++-
 .../vue/components/FrameSelector.vue          | 67 ++++++++++++++++++-
 2 files changed, 89 insertions(+), 4 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/DualInput.vue b/girder/girder_large_image/web_client/vue/components/DualInput.vue
index 1586a5f94..584f374a7 100644
--- a/girder/girder_large_image/web_client/vue/components/DualInput.vue
+++ b/girder/girder_large_image/web_client/vue/components/DualInput.vue
@@ -1,10 +1,11 @@
 <script>
 export default {
-    props: ['label', 'currentValue', 'valueMax', 'sliderLabels'],
-    emits: ['updateValue'],
+    props: ['label', 'currentValue', 'valueMax', 'sliderLabels', 'maxMerge'],
+    emits: ['updateValue', 'updateMaxMerge'],
     data() {
         return {
-            value: this.currentValue
+            value: this.currentValue,
+            merge: this.maxMerge,
         };
     },
     watch: {
@@ -13,6 +14,12 @@ export default {
         },
         value(v) {
             this.$emit('updateValue', v);
+        },
+        maxMerge(v) {
+          this.merge = v;
+        },
+        merge(v) {
+          this.$emit('updateMaxMerge', v);
         }
     }
 };
@@ -28,6 +35,7 @@ export default {
         name="numberControl"
         min="0"
         :max="valueMax"
+        :disabled="merge"
       >
     </td>
     <td style="width:90%">
@@ -37,6 +45,7 @@ export default {
         name="sliderControl"
         min="0"
         :max="valueMax"
+        :disabled="merge"
       >
       <div class="bubble-wrap">
         <output
@@ -53,6 +62,17 @@ export default {
         />
       </div>
     </td>
+    <td v-show="merge !== undefined">
+      <input
+        v-model="merge"
+        type="checkbox"
+        name="maxMergeCheck"
+        style="margin: 0px 5px 0px 10px"
+      >
+    </td>
+    <td v-show="merge !== undefined">
+      <label for="maxMergeCheck">Max Merge</label>
+    </td>
   </tr>
 </template>
 
diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index dacd059ff..72d9d139e 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -1,5 +1,6 @@
 <script>
 import Vue from 'vue';
+import { getChannelColor } from '../utils/colors';
 
 import CompositeLayers from './CompositeLayers.vue';
 import DualInput from './DualInput.vue';
@@ -71,6 +72,10 @@ export default Vue.extend({
             this.indexInfo[event.index].current = event.frame;
             this.update();
         },
+        updateMaxMergeAxis(event) {
+            this.indexInfo[event.index].maxMerge = event.maxMerge;
+            this.update();
+        },
         updateFrameSlider(frame) {
             this.currentFrame = frame;
             this.frameUpdate(frame, undefined);
@@ -84,10 +89,68 @@ export default Vue.extend({
                 }
             });
             this.currentFrame = frame;
-            const style = this.currentModeId > 1 ? Object.assign({}, this.style[this.currentModeId]) : undefined;
+            // rerun update maxmerge?
+            let style = this.currentModeId > 1 ? Object.assign({}, this.style[this.currentModeId]) : undefined;
             if (style && style.preset) delete style.preset;
+            style = this.maxMergeStyle(style)
             this.frameUpdate(frame, style);
         },
+        maxMergeStyle(style) {
+            let bandsArray = (style ? style.bands : []) || []
+            let newBandsArray = []
+            let frameDeltas = []
+            Object.entries(this.indexInfo).forEach(([indexName, {range, stride, maxMerge}]) => {
+                if (this.currentModeId === 2 && indexName === 'IndexC') {
+                    // channel compositing is already in bandsArray
+                    // skip permutations for this axis
+                } else if (maxMerge) {
+                    const axisFrameDeltas = [...Array(range + 1).keys()].map((i) => i*stride)
+                    if (frameDeltas.length) {
+                        const newFrameDeltas = []
+                        frameDeltas.forEach((d) => {
+                            axisFrameDeltas.forEach((a) => {
+                                newFrameDeltas.push(d+a)
+                            })
+                        })
+                        frameDeltas = newFrameDeltas
+                    } else {
+                        frameDeltas = axisFrameDeltas
+                    }
+                }
+            })
+
+            if(frameDeltas.length) {
+                if (bandsArray.length) {
+                    // some style already applied, add permutations
+                    bandsArray.forEach((b) => {
+                        frameDeltas.forEach((framedelta) => {
+                            newBandsArray.push(
+                                Object.assign({}, b, {framedelta: b.framedelta + framedelta})
+                            )
+                        })
+                    })
+                } else {
+                    // no style applied yet, create new permutations list
+                    const { bands } = this.metadata
+                    bands.forEach((b, i) => {
+                        const bandPalette = getChannelColor(b)
+                        frameDeltas.forEach((framedelta) => {
+                            newBandsArray.push({
+                                band: i+1,
+                                framedelta,
+                                palette: bandPalette
+                            })
+                        })
+                    })
+                }
+            } else {
+                // no max merge permutations to apply, keep old bandsArray
+                newBandsArray = bandsArray
+            }
+
+            console.log(newBandsArray)
+            return {bands: newBandsArray}
+        },
         fillMetadata() {
             if (!this.metadata.frames) {
                 this.metadata.frames = [{
@@ -242,6 +305,8 @@ export default Vue.extend({
         :value-max="indexInfo[index].range"
         :label="index.replace('Index', '')"
         :slider-labels="index === 'IndexC' ? imageMetadata.channels : []"
+        :max-merge="indexInfo[index].maxMerge || false"
+        @updateMaxMerge="(v) => updateMaxMergeAxis({index, maxMerge: v})"
         @updateValue="(v) => updateAxisSlider({index, frame: v})"
       />
     </table>

From 1abc9cebe453e4e369dc854bee5fec6745269858 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 19 Sep 2023 15:45:04 -0400
Subject: [PATCH 03/10] Lint fixes

---
 .../vue/components/CompositeLayers.vue        |  2 +-
 .../web_client/vue/components/DualInput.vue   |  6 +--
 .../vue/components/FrameSelector.vue          | 52 +++++++++----------
 .../web_client/vue/utils/colors.js            |  2 +-
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
index 0a4274977..996e52f16 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -114,7 +114,7 @@ export default {
             // Assign colors
             this.layers.forEach((layerName) => {
                 if (!this.compositeLayerInfo[layerName].palette) {
-                    const channelColor = getChannelColor(layerName)
+                    const channelColor = getChannelColor(layerName);
                     if (channelColor) {
                         this.compositeLayerInfo[layerName].palette = channelColor;
                         usedColors.push(channelColor);
diff --git a/girder/girder_large_image/web_client/vue/components/DualInput.vue b/girder/girder_large_image/web_client/vue/components/DualInput.vue
index 584f374a7..d179c8ddf 100644
--- a/girder/girder_large_image/web_client/vue/components/DualInput.vue
+++ b/girder/girder_large_image/web_client/vue/components/DualInput.vue
@@ -5,7 +5,7 @@ export default {
     data() {
         return {
             value: this.currentValue,
-            merge: this.maxMerge,
+            merge: this.maxMerge
         };
     },
     watch: {
@@ -16,10 +16,10 @@ export default {
             this.$emit('updateValue', v);
         },
         maxMerge(v) {
-          this.merge = v;
+            this.merge = v;
         },
         merge(v) {
-          this.$emit('updateMaxMerge', v);
+            this.$emit('updateMaxMerge', v);
         }
     }
 };
diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index 72d9d139e..bc8b4ab25 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -1,6 +1,7 @@
 <script>
 import Vue from 'vue';
-import { getChannelColor } from '../utils/colors';
+
+import {getChannelColor} from '../utils/colors';
 
 import CompositeLayers from './CompositeLayers.vue';
 import DualInput from './DualInput.vue';
@@ -92,64 +93,63 @@ export default Vue.extend({
             // rerun update maxmerge?
             let style = this.currentModeId > 1 ? Object.assign({}, this.style[this.currentModeId]) : undefined;
             if (style && style.preset) delete style.preset;
-            style = this.maxMergeStyle(style)
+            style = this.maxMergeStyle(style);
             this.frameUpdate(frame, style);
         },
         maxMergeStyle(style) {
-            let bandsArray = (style ? style.bands : []) || []
-            let newBandsArray = []
-            let frameDeltas = []
+            const bandsArray = (style ? style.bands : []) || [];
+            let newBandsArray = [];
+            let frameDeltas = [];
             Object.entries(this.indexInfo).forEach(([indexName, {range, stride, maxMerge}]) => {
                 if (this.currentModeId === 2 && indexName === 'IndexC') {
                     // channel compositing is already in bandsArray
                     // skip permutations for this axis
                 } else if (maxMerge) {
-                    const axisFrameDeltas = [...Array(range + 1).keys()].map((i) => i*stride)
+                    const axisFrameDeltas = [...Array(range + 1).keys()].map((i) => i * stride);
                     if (frameDeltas.length) {
-                        const newFrameDeltas = []
+                        const newFrameDeltas = [];
                         frameDeltas.forEach((d) => {
                             axisFrameDeltas.forEach((a) => {
-                                newFrameDeltas.push(d+a)
-                            })
-                        })
-                        frameDeltas = newFrameDeltas
+                                newFrameDeltas.push(d + a);
+                            });
+                        });
+                        frameDeltas = newFrameDeltas;
                     } else {
-                        frameDeltas = axisFrameDeltas
+                        frameDeltas = axisFrameDeltas;
                     }
                 }
-            })
+            });
 
-            if(frameDeltas.length) {
+            if (frameDeltas.length) {
                 if (bandsArray.length) {
                     // some style already applied, add permutations
                     bandsArray.forEach((b) => {
                         frameDeltas.forEach((framedelta) => {
                             newBandsArray.push(
                                 Object.assign({}, b, {framedelta: b.framedelta + framedelta})
-                            )
-                        })
-                    })
+                            );
+                        });
+                    });
                 } else {
                     // no style applied yet, create new permutations list
-                    const { bands } = this.metadata
+                    const {bands} = this.metadata;
                     bands.forEach((b, i) => {
-                        const bandPalette = getChannelColor(b)
+                        const bandPalette = getChannelColor(b);
                         frameDeltas.forEach((framedelta) => {
                             newBandsArray.push({
-                                band: i+1,
+                                band: i + 1,
                                 framedelta,
                                 palette: bandPalette
-                            })
-                        })
-                    })
+                            });
+                        });
+                    });
                 }
             } else {
                 // no max merge permutations to apply, keep old bandsArray
-                newBandsArray = bandsArray
+                newBandsArray = bandsArray;
             }
 
-            console.log(newBandsArray)
-            return {bands: newBandsArray}
+            return {bands: newBandsArray};
         },
         fillMetadata() {
             if (!this.metadata.frames) {
diff --git a/girder/girder_large_image/web_client/vue/utils/colors.js b/girder/girder_large_image/web_client/vue/utils/colors.js
index a0c39796a..91487094a 100644
--- a/girder/girder_large_image/web_client/vue/utils/colors.js
+++ b/girder/girder_large_image/web_client/vue/utils/colors.js
@@ -16,7 +16,7 @@ export function getChannelColor(name) {
     // Search for case-insensitive regex match among known channel-colors
     for (const [channelPattern, color] of Object.entries(CHANNEL_COLORS)) {
         if (name.match(new RegExp(channelPattern, 'i'))) {
-            return color
+            return color;
         }
     }
 }

From b217e4342891e4a023f0b10a19a5961c25cbdc06 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 25 Sep 2023 23:32:27 -0400
Subject: [PATCH 04/10] Send a style object to histogram params

---
 .../vue/components/CompositeLayers.vue        | 19 +++++++++-----
 .../vue/components/FrameSelector.vue          | 26 ++++++++++++++++---
 .../vue/components/HistogramEditor.vue        |  3 +++
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
index 996e52f16..51f8c1871 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -10,7 +10,7 @@ export default {
         'color-picker': Chrome,
         HistogramEditor
     },
-    props: ['itemId', 'currentFrame', 'currentStyle', 'layers', 'layerMap', 'active'],
+    props: ['itemId', 'currentFrame', 'currentStyle', 'histogramParamStyle', 'layers', 'layerMap', 'active'],
     emits: ['updateStyle'],
     data() {
         return {
@@ -20,17 +20,21 @@ export default {
             compositeLayerInfo: {},
             expandedRows: [],
             autoRangeForAll: undefined,
-            histogramParams: {
+            showKeyboardShortcuts: false
+        };
+    },
+    computed: {
+        histogramParams() {
+            return {
                 frame: this.currentFrame,
                 width: 1024,
                 height: 1024,
                 bins: 512,
                 resample: false,
-                style: '{}',
+                style: this.histogramParamStyle,
                 roundRange: true
-            },
-            showKeyboardShortcuts: false
-        };
+            };
+        }
     },
     watch: {
         active() {
@@ -44,6 +48,9 @@ export default {
             if (this.currentStyle.preset) {
                 this.initializeStateFromStyle();
             }
+        },
+        histogramParams() {
+            this.fetchCurrentFrameHistogram()
         }
     },
     mounted() {
diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index bc8b4ab25..e9913985f 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -20,7 +20,8 @@ export default Vue.extend({
             indices: [],
             indexInfo: {},
             style: {},
-            modesShown: {1: true}
+            modesShown: {1: true},
+            histogramParamStyles: {}
         };
     },
     computed: {
@@ -65,8 +66,23 @@ export default Vue.extend({
                     })
             );
         },
+        updateHistogramParamStyles() {
+            this.histogramParamStyles = {}
+            Array.from([2,3]).forEach((modeID) => {
+                const mergedStyle = this.maxMergeStyle(this.style[modeID])
+                const simpleMergedStyleString = JSON.stringify({
+                    bands: mergedStyle.bands.map((b) => ({
+                        framedelta: b.framedelta,
+                        band: b.band,
+                        // including min, max, and palette gives strange results
+                    }))
+                });
+                this.histogramParamStyles[modeID] = simpleMergedStyleString
+            })
+        },
         updateStyle(idx, style) {
             this.$set(this.style, idx, style);
+            this.updateHistogramParamStyles()
             this.update();
         },
         updateAxisSlider(event) {
@@ -76,6 +92,7 @@ export default Vue.extend({
         updateMaxMergeAxis(event) {
             this.indexInfo[event.index].maxMerge = event.maxMerge;
             this.update();
+            this.updateHistogramParamStyles()
         },
         updateFrameSlider(frame) {
             this.currentFrame = frame;
@@ -86,11 +103,12 @@ export default Vue.extend({
             this.indices.forEach((index) => {
                 if (this.sliderIndices.includes(index)) {
                     const info = this.indexInfo[index];
-                    frame += info.current * info.stride;
+                    if (!info.maxMerge){
+                        frame += info.current * info.stride;
+                    }
                 }
             });
             this.currentFrame = frame;
-            // rerun update maxmerge?
             let style = this.currentModeId > 1 ? Object.assign({}, this.style[this.currentModeId]) : undefined;
             if (style && style.preset) delete style.preset;
             style = this.maxMergeStyle(style);
@@ -320,6 +338,7 @@ export default Vue.extend({
         :item-id="itemId"
         :current-frame="currentFrame"
         :current-style="style[2]"
+        :histogram-param-style="histogramParamStyles[2]"
         :layers="metadata.channels"
         :layer-map="metadata.channelmap"
         :active="currentModeId === 2"
@@ -332,6 +351,7 @@ export default Vue.extend({
         :item-id="itemId"
         :current-frame="currentFrame"
         :current-style="style[3]"
+        :histogram-param-style="histogramParamStyles[3]"
         :layers="metadata.bands"
         :layer-map="undefined"
         :active="currentModeId === 3"
diff --git a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
index d6a584469..e08c07b62 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -28,6 +28,9 @@ export default {
         currentFrame() {
             this.fetchHistogram();
         },
+        currentFrameHistogram() {
+            this.fetchHistogram();
+        },
         histogram() {
             // allow rerender to occur first
             Vue.nextTick().then(() => {

From dd2cdaf87bb5fe68023c706abfc1fbd154520728 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 25 Sep 2023 23:43:39 -0400
Subject: [PATCH 05/10] Fix null framedeltas in band compositing mode

---
 .../web_client/vue/components/FrameSelector.vue               | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index e9913985f..6d20b8ec7 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -144,7 +144,9 @@ export default Vue.extend({
                     bandsArray.forEach((b) => {
                         frameDeltas.forEach((framedelta) => {
                             newBandsArray.push(
-                                Object.assign({}, b, {framedelta: b.framedelta + framedelta})
+                                Object.assign({}, b, {
+                                    framedelta: b.framedelta ? b.framedelta + framedelta : framedelta
+                                })
                             );
                         });
                     });

From fbfe9399d26d2b84f3531d32bf98c3adcdfb7e71 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 25 Sep 2023 23:44:53 -0400
Subject: [PATCH 06/10] Fix appearance of histogram value range labels

---
 .../web_client/vue/components/HistogramEditor.vue           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
index e08c07b62..60f966819 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -293,10 +293,11 @@ export default {
         class="handles-svg"
       >
         <text
+          v-if="vRange[0] !== undefined"
           x="5"
           y="43"
           class="small"
-        >{{ vRange[0] }}</text>
+        >{{ +vRange[0].toFixed(2) || 0 }}</text>
         <rect
           ref="minExclusionBox"
           x="5"
@@ -317,10 +318,11 @@ export default {
           y2="30"
         />
         <text
+          v-if="vRange[1] !== undefined"
           :x="xRange[1] && vRange[1] ? xRange[1] - (`${vRange[1]}`.length * 6): 0"
           y="43"
           class="small"
-        >{{ vRange[1] }}</text>
+        >{{ +vRange[1].toFixed(2) || 1 }}</text>
         <rect
           ref="maxExclusionBox"
           x="5"

From 30afbe4b0c1078bf698bd83425ef0ed107873494 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 26 Sep 2023 08:54:32 -0400
Subject: [PATCH 07/10] Lint fixes

---
 .../vue/components/CompositeLayers.vue         |  2 +-
 .../vue/components/FrameSelector.vue           | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
index 51f8c1871..7c91c6277 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -50,7 +50,7 @@ export default {
             }
         },
         histogramParams() {
-            this.fetchCurrentFrameHistogram()
+            this.fetchCurrentFrameHistogram();
         }
     },
     mounted() {
diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index 6d20b8ec7..fb13216a4 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -67,22 +67,22 @@ export default Vue.extend({
             );
         },
         updateHistogramParamStyles() {
-            this.histogramParamStyles = {}
-            Array.from([2,3]).forEach((modeID) => {
-                const mergedStyle = this.maxMergeStyle(this.style[modeID])
+            this.histogramParamStyles = {};
+            Array.from([2, 3]).forEach((modeID) => {
+                const mergedStyle = this.maxMergeStyle(this.style[modeID]);
                 const simpleMergedStyleString = JSON.stringify({
                     bands: mergedStyle.bands.map((b) => ({
                         framedelta: b.framedelta,
-                        band: b.band,
+                        band: b.band
                         // including min, max, and palette gives strange results
                     }))
                 });
-                this.histogramParamStyles[modeID] = simpleMergedStyleString
-            })
+                this.histogramParamStyles[modeID] = simpleMergedStyleString;
+            });
         },
         updateStyle(idx, style) {
             this.$set(this.style, idx, style);
-            this.updateHistogramParamStyles()
+            this.updateHistogramParamStyles();
             this.update();
         },
         updateAxisSlider(event) {
@@ -92,7 +92,7 @@ export default Vue.extend({
         updateMaxMergeAxis(event) {
             this.indexInfo[event.index].maxMerge = event.maxMerge;
             this.update();
-            this.updateHistogramParamStyles()
+            this.updateHistogramParamStyles();
         },
         updateFrameSlider(frame) {
             this.currentFrame = frame;
@@ -103,7 +103,7 @@ export default Vue.extend({
             this.indices.forEach((index) => {
                 if (this.sliderIndices.includes(index)) {
                     const info = this.indexInfo[index];
-                    if (!info.maxMerge){
+                    if (!info.maxMerge) {
                         frame += info.current * info.stride;
                     }
                 }

From 1dfc28d59d34872b0b111dba95d0602fc26b6bf3 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 26 Sep 2023 13:47:17 -0400
Subject: [PATCH 08/10] Start with null style when calling maxMergeStyle for
 histogram use

---
 .../vue/components/FrameSelector.vue          | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index fb13216a4..30d16f553 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -69,15 +69,19 @@ export default Vue.extend({
         updateHistogramParamStyles() {
             this.histogramParamStyles = {};
             Array.from([2, 3]).forEach((modeID) => {
-                const mergedStyle = this.maxMergeStyle(this.style[modeID]);
-                const simpleMergedStyleString = JSON.stringify({
-                    bands: mergedStyle.bands.map((b) => ({
-                        framedelta: b.framedelta,
-                        band: b.band
-                        // including min, max, and palette gives strange results
-                    }))
-                });
-                this.histogramParamStyles[modeID] = simpleMergedStyleString;
+                const mergedStyle = this.maxMergeStyle();
+                if (mergedStyle.bands.length) {
+                    const simpleMergedStyleString = JSON.stringify({
+                        bands: mergedStyle.bands.map((b) => ({
+                            framedelta: b.framedelta,
+                            band: b.band
+                            // including min, max, and palette gives strange results
+                        }))
+                    });
+                    this.histogramParamStyles[modeID] = simpleMergedStyleString;
+                } else {
+                    this.histogramParamStyles[modeID] = '{}';
+                }
             });
         },
         updateStyle(idx, style) {
@@ -168,7 +172,6 @@ export default Vue.extend({
                 // no max merge permutations to apply, keep old bandsArray
                 newBandsArray = bandsArray;
             }
-
             return {bands: newBandsArray};
         },
         fillMetadata() {

From 1611f945c5d92c935063edb64744413bcde2d3aa Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 3 Oct 2023 12:30:43 -0400
Subject: [PATCH 09/10] Fix Max Merge label

---
 .../web_client/vue/components/DualInput.vue        | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/girder/girder_large_image/web_client/vue/components/DualInput.vue b/girder/girder_large_image/web_client/vue/components/DualInput.vue
index d179c8ddf..f1aad0b02 100644
--- a/girder/girder_large_image/web_client/vue/components/DualInput.vue
+++ b/girder/girder_large_image/web_client/vue/components/DualInput.vue
@@ -38,7 +38,7 @@ export default {
         :disabled="merge"
       >
     </td>
-    <td style="width:90%">
+    <td style="width: 100%">
       <input
         v-model="value"
         type="range"
@@ -62,16 +62,17 @@ export default {
         />
       </div>
     </td>
-    <td v-show="merge !== undefined">
+    <td
+      v-show="merge !== undefined"
+      style="min-width: 150px; text-align: right;"
+    >
       <input
+        :id="'maxMerge'+label"
         v-model="merge"
         type="checkbox"
-        name="maxMergeCheck"
         style="margin: 0px 5px 0px 10px"
       >
-    </td>
-    <td v-show="merge !== undefined">
-      <label for="maxMergeCheck">Max Merge</label>
+      <label :for="'maxMerge'+label">Max Merge</label>
     </td>
   </tr>
 </template>
@@ -79,6 +80,7 @@ export default {
 <style scoped>
 .dual-controls > * > * {
     margin-right: 15px;
+    white-space: nowrap;
 }
 .dual-controls.tall {
     height: 40px;

From 97c22d7394c2bc18883a8b7a73ca52c0c27ec363 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 3 Oct 2023 12:34:11 -0400
Subject: [PATCH 10/10] Add dtype: 'source' to histogram style parameters when
 using max-merge

---
 .../web_client/vue/components/FrameSelector.vue                  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
index 30d16f553..9fb676713 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -72,6 +72,7 @@ export default Vue.extend({
                 const mergedStyle = this.maxMergeStyle();
                 if (mergedStyle.bands.length) {
                     const simpleMergedStyleString = JSON.stringify({
+                        dtype: 'source',
                         bands: mergedStyle.bands.map((b) => ({
                             framedelta: b.framedelta,
                             band: b.band