From 1979d98a1e2713ea371cabb3254a7c250d80468b Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 26 May 2023 12:34:04 -0400
Subject: [PATCH 01/32] Send item Id through Frame Selector and maintain
 composite layers data

---
 .../views/imageViewerSelectWidget.js          |  1 +
 .../vue/components/FrameSelector.vue          | 27 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js b/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js
index b29389b39..544e31bff 100644
--- a/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js
+++ b/girder/girder_large_image/web_client/views/imageViewerSelectWidget.js
@@ -71,6 +71,7 @@ var ImageViewerSelectWidget = View.extend({
         const vm = new FrameSelector({
             el,
             propsData: {
+                itemId: this.itemId,
                 imageMetadata: imageMetadata,
                 frameUpdate: frameUpdate
             }
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 7eda00758..1507b3785 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -3,10 +3,11 @@ import Vue from 'vue';
 import CompositeLayers from './CompositeLayers.vue';
 import DualInput from './DualInput.vue'
 export default Vue.extend({
-    props: ['imageMetadata', 'frameUpdate'],
+    props: ['itemId', 'imageMetadata', 'frameUpdate'],
     components: { CompositeLayers, DualInput },
     data() {
         return {
+            loaded: false,
             currentFrame: 0,
             maxFrame: 0,
             sliderModes: [],
@@ -131,12 +132,13 @@ export default Vue.extend({
         this.maxFrame = this.imageMetadata.frames.length - 1
         this.populateIndices()
         this.populateModes()
+        this.loaded = true
     }
 });
 </script>
 
 <template>
-    <div class="image-frame-control-box">
+    <div class="image-frame-control-box" v-if="loaded">
         <div id="current_image_frame" style="display: none;">{{ currentFrame }}</div>
         <div id="current_image_style" style="display: none;">{{ style }}</div>
         <div>
@@ -172,10 +174,25 @@ export default Vue.extend({
             />
         </table>
 
-        <div v-if="currentModeId > 1" class="image-frame-simple-control">
+        <!-- Use composite layers component twice so state for each one is maintained while invisible -->
+        <!-- Use styling instead of v-if to make each invisible so that the components are not unmounted -->
+        <div  class="image-frame-simple-control" style="width: 500px">
             <composite-layers
-                :layers="currentModeId === 2 ? imageMetadata.channels : imageMetadata.bands"
-                :layerMap="currentModeId === 2 ? imageMetadata.channelmap : undefined"
+                key="channels"
+                :itemId="itemId"
+                :currentFrame="currentFrame"
+                :layers="imageMetadata.channels"
+                :layerMap="imageMetadata.channelmap"
+                :style="currentModeId === 2 ? {} : {display: 'none'}"
+                @updateStyle="updateStyle"
+            />
+            <composite-layers
+                key="bands"
+                :itemId="itemId"
+                :currentFrame="currentFrame"
+                :layers="imageMetadata.bands"
+                :layerMap="undefined"
+                :style="currentModeId === 3 ? {} : {display: 'none'}"
                 @updateStyle="updateStyle"
             />
         </div>

From 65b178d849d48c845f174391025969ca8389d641 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 26 May 2023 12:34:15 -0400
Subject: [PATCH 02/32] Create utils

---
 .../web_client/vue/utils/clamp.js             |  3 +
 .../web_client/vue/{ => utils}/colors.js      |  0
 .../web_client/vue/utils/drag.js              | 62 +++++++++++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 girder/girder_large_image/web_client/vue/utils/clamp.js
 rename girder/girder_large_image/web_client/vue/{ => utils}/colors.js (100%)
 create mode 100644 girder/girder_large_image/web_client/vue/utils/drag.js

diff --git a/girder/girder_large_image/web_client/vue/utils/clamp.js b/girder/girder_large_image/web_client/vue/utils/clamp.js
new file mode 100644
index 000000000..c738321f5
--- /dev/null
+++ b/girder/girder_large_image/web_client/vue/utils/clamp.js
@@ -0,0 +1,3 @@
+export default function clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
diff --git a/girder/girder_large_image/web_client/vue/colors.js b/girder/girder_large_image/web_client/vue/utils/colors.js
similarity index 100%
rename from girder/girder_large_image/web_client/vue/colors.js
rename to girder/girder_large_image/web_client/vue/utils/colors.js
diff --git a/girder/girder_large_image/web_client/vue/utils/drag.js b/girder/girder_large_image/web_client/vue/utils/drag.js
new file mode 100644
index 000000000..4ccdaf707
--- /dev/null
+++ b/girder/girder_large_image/web_client/vue/utils/drag.js
@@ -0,0 +1,62 @@
+// Modified from https://www.w3schools.com/howto/howto_js_draggable.asp
+
+import clamp from './clamp';
+
+export function makeDraggableSVG(svg, validateDrag, callback, xRange) {
+    let selectedShape;
+    let posOffset;
+    svg.addEventListener('mousedown', startDrag);
+    window.addEventListener('mousemove', drag);
+    window.addEventListener('mouseup', endDrag);
+
+    function getMousePosition(evt) {
+        if (!svg) return {x: 0, y: 0};
+        const CTM = svg.getScreenCTM();
+        if (!CTM) return {x: 0, y: 0};
+        return {
+            x: (evt.clientX - CTM.e) / CTM.a,
+            y: (evt.clientY - CTM.f) / CTM.d
+        };
+    }
+
+    function startDrag(evt) {
+        const target = evt.target;
+        if (target && target.classList.contains('draggable')) {
+            selectedShape = target;
+            posOffset = getMousePosition(evt);
+            posOffset.x -= parseFloat(
+                selectedShape.getAttributeNS(null, 'x1') || '0'
+            );
+            posOffset.y -= parseFloat(
+                selectedShape.getAttributeNS(null, 'y1') || '0'
+            );
+        }
+    }
+
+    function drag(evt) {
+        if (selectedShape) {
+            evt.preventDefault();
+            const coord = getMousePosition(evt);
+            if (posOffset) {
+                coord.x -= posOffset.x;
+                coord.y -= posOffset.y;
+            }
+            coord.x = clamp(coord.x, xRange[0], xRange[1]);
+            const [moveX, moveY] = validateDrag(selectedShape, coord);
+            if (!moveX) {
+                coord.x = parseFloat(selectedShape.getAttributeNS(null, 'x1') || '0');
+            }
+            if (!moveY) {
+                coord.y = parseFloat(selectedShape.getAttributeNS(null, 'y1') || '0');
+            }
+
+            selectedShape.setAttributeNS(null, 'x1', `${coord.x}`);
+            selectedShape.setAttributeNS(null, 'x2', `${coord.x}`);
+            selectedShape.setAttributeNS(null, 'y1', `${coord.y}`);
+            callback(selectedShape, coord);
+        }
+    }
+    function endDrag() {
+        selectedShape = undefined;
+    }
+}

From 4209768fb87f4638c573cfd7a02e801c4c9ce444 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 26 May 2023 12:34:24 -0400
Subject: [PATCH 03/32] Add Histogram Editor component

---
 .../vue/components/CompositeLayers.vue        | 172 +++++++++-----
 .../vue/components/HistogramEditor.vue        | 215 ++++++++++++++++++
 2 files changed, 336 insertions(+), 51 deletions(-)
 create mode 100644 girder/girder_large_image/web_client/vue/components/HistogramEditor.vue

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 4f55c96f0..cef5e6f60 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -1,12 +1,15 @@
 <script>
+import { restRequest } from '@girder/core/rest';
 import { Chrome } from 'vue-color';
-import { CHANNEL_COLORS, OTHER_COLORS } from '../colors'
+import { CHANNEL_COLORS, OTHER_COLORS } from '../utils/colors'
+import HistogramEditor from './HistogramEditor.vue';
 
 export default {
-    props: ['layers', 'layerMap'],
+    props: ['itemId', 'currentFrame', 'layers', 'layerMap'],
     emits: ['updateStyle'],
     components: {
-        'color-picker': Chrome
+        'color-picker': Chrome,
+        HistogramEditor,
     },
     data() {
         return {
@@ -14,13 +17,8 @@ export default {
             colorPickerShown: undefined,
             currentColorPickerRef: undefined,
             compositeLayerInfo: {},
-        }
-    },
-    watch: {
-        layers() {
-            this.enabledLayers = this.layers
-            this.initializeLayerInfo()
-            this.updateStyle()
+            histograms: [],
+            expandedRows: [],
         }
     },
     methods: {
@@ -29,11 +27,14 @@ export default {
             this.compositeLayerInfo = {}
             this.layers.forEach((layerName, i) => {
                 this.compositeLayerInfo[layerName] = {
-                    framedelta: this.layerMap ?this.layerMap[layerName] :undefined,
+                    layerName,
+                    index: i,
+                    framedelta: this.layerMap ? this.layerMap[layerName] : undefined,
                     band: this.layerMap ? undefined : i + 1,  // expected 1-based index
                     enabled: true,
                     min: undefined,
                     max: undefined,
+                    custom: false,
                 }
             })
             Object.entries(CHANNEL_COLORS).forEach(([channelName, color]) => {
@@ -57,6 +58,36 @@ export default {
                     usedColors.push(chosenColor)
                 }
             })
+            if (this.layerMap) {
+                // each layer has a frame delta
+                Promise.all(this.layers.map((layer) =>
+                    restRequest({
+                        type: 'GET',
+                        url: 'item/' + this.itemId + '/tiles/histogram',
+                        data: {
+                            frame: this.currentFrame + this.compositeLayerInfo[layer].framedelta,
+                        }
+                    }).then((response) => {
+                        if (response.length < 3) {
+                            return response[0]
+                        } else {
+                            return response[1]
+                        }
+                    }))).then((responses) => {
+                        this.histograms = responses
+                    })
+            } else {
+                // layers share the same frame
+                restRequest({
+                        type: 'GET',
+                        url: 'item/' + this.itemId + '/tiles/histogram',
+                        data: {
+                            frame: this.currentFrame,
+                        }
+                    }).then((response) => {
+                        this.histograms = response
+                    });
+            }
         },
         toggleEnableAll() {
             if (this.enabledLayers !== this.layers) {
@@ -78,6 +109,20 @@ export default {
                 document.addEventListener('click', this.documentClick);
             }
         },
+        toggleExpanded(index) {
+            if (this.expandedRows.includes(index)) {
+                this.expandedRows = this.expandedRows.filter((v) => v !== index)
+            } else {
+                this.expandedRows = [...this.expandedRows, index]
+            }
+        },
+        toggleAllExpanded() {
+            if (this.expandedRows.length === this.layers.length) {
+                this.expandedRows = []
+            } else {
+                this.expandedRows = Object.values(this.compositeLayerInfo).map(({index}) => index)
+            }
+        },
         documentClick(e) {
             const picker = this.currentColorPickerRef;
             if (picker && picker !== e.target && !picker.contains(e.target)) {
@@ -87,16 +132,22 @@ export default {
         updateLayerColor(layer, swatch) {
             this.compositeLayerInfo[layer].palette = swatch.hex;
         },
-        updateLayerMin(event, layer) {
-            const newVal = event.target.valueAsNumber;
+        updateLayerMin(layer, newVal, defaultValue=false) {
             const newMinVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
+            if (defaultValue){
+                this.compositeLayerInfo[layer].defaultMin = newMinVal;
+            }
             this.compositeLayerInfo[layer].min = newMinVal;
+            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
             this.updateStyle();
         },
-        updateLayerMax(event, layer) {
-            const newVal = event.target.valueAsNumber;
+        updateLayerMax(layer, newVal, defaultValue=false) {
             const newMaxVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
+            if (defaultValue){
+                this.compositeLayerInfo[layer].defaultMax = newMaxVal;
+            }
             this.compositeLayerInfo[layer].max = newMaxVal;
+            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
             this.updateStyle();
         },
         updateActiveLayers() {
@@ -130,68 +181,73 @@ export default {
         <table id="composite-layer-table" class="table table-condensed">
             <thead class="table-header">
                 <tr>
-                    <th class="layer-col">Layer</th>
                     <th class="enabled-col">
                         <input
                             type="checkbox"
                             :checked="enabledLayers === layers"
                             @input="toggleEnableAll"
                         >
-                        Enable
                     </th>
+                    <th class="layer-col">Layer</th>
                     <th class="color-col">Color</th>
-                    <th class="precision-col">Min</th>
-                    <th class="precision-col">Max</th>
+                    <div
+                        v-if="histograms.length"
+                        class="expand-btn"
+                        @click="toggleAllExpanded"
+                    >
+                        {{ expandedRows.length === layers.length ? '&#9651;' : '&#9661;'}}
+                    </div>
                 </tr>
             </thead>
             <tbody>
                 <tr
-                    v-for="[layer, layerInfo] in Object.entries(compositeLayerInfo).filter(([, layerInfo]) => layerInfo)"
-                    :key="layer"
+                    v-for="{layerName, index, min, max, palette, defaultMin, defaultMax} in Object.values(compositeLayerInfo)"
+                    :key="layerName"
+                    :style="expandedRows.includes(index) ? {height: '100px'} : {}"
                 >
-                    <td>{{ layer }}</td>
                     <td>
                         <input
                             type="checkbox"
-                            :value="layer"
+                            :value="layerName"
                             v-model="enabledLayers"
                             @change="updateActiveLayers"
                         >
                     </td>
-                    <td :id="layer+'_picker'">
+                    <td>{{ layerName }}</td>
+                    <td :id="layerName+'_picker'">
                         <span
                             class="current-color"
-                            :style="{ 'background-color': layerInfo.palette }"
-                            @click="() => toggleColorPicker(layer)"
+                            :style="{ 'background-color': palette }"
+                            @click="() => toggleColorPicker(layerName)"
                         />
                         <color-picker
+                            v-if="colorPickerShown === layerName"
                             class="picker-offset"
                             :disableAlpha="true"
-                            v-if="colorPickerShown === layer"
-                            :value="layerInfo.palette"
-                            @input="(swatch) => {updateLayerColor(layer, swatch)}"
+                            :value="palette"
+                            @input="(swatch) => {updateLayerColor(layerName, swatch)}"
                         />
                     </td>
-                    <td>
-                        <input
-                            type="number"
-                            step="0.01"
-                            min="0"
-                            max="65535"
-                            :value="layerInfo.min"
-                            @change.prevent="(event) => updateLayerMin(event, layer)"
-                        >
-                    </td>
-                    <td>
-                        <input
-                            type="number"
-                            step="0.01"
-                            min="0"
-                            max="65535"
-                            :value="layerInfo.max"
-                            @change.prevent="(event) => updateLayerMax(event, layer)"
-                        >
-                    </td>
+                    <div
+                        v-if="histograms[index]"
+                        class="expand-btn"
+                        @click="() => toggleExpanded(index)"
+                    >
+                    {{ (min === undefined && max === undefined) ||
+                       (min === defaultMin && max === defaultMax)
+                        ? expandedRows.includes(index) ? '&#9651;' : '&#9661;'
+                        : expandedRows.includes(index) ? '&#9650;' : '&#9660;'
+                    }}
+                    </div>
+                    <div v-if="expandedRows.includes(index)" class="advanced-section">
+                        <histogram-editor
+                            :histogram="histograms[index]"
+                            :currentMin="min"
+                            :currentMax="max"
+                            @updateMin="(v, d) => updateLayerMin(layerName, v, d)"
+                            @updateMax="(v, d) => updateLayerMax(layerName, v, d)"
+                        />
+                    </div>
                 </tr>
             </tbody>
         </table>
@@ -201,8 +257,8 @@ export default {
 <style scoped>
 .current-color {
     display: inline-block;
-    width: 50px;
-    height: 20px;
+    width: calc(100% - 10px);
+    height: 25px;
     background-color: #000;
     cursor: pointer;
 }
@@ -227,4 +283,18 @@ export default {
 .table-container input {
     max-width: 70px;
 }
+tr {
+    position: relative;
+}
+.expand-btn {
+    position: absolute;
+    right: 0;
+}
+.advanced-section {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    margin: 30px 5px 0px;
+    height: 55px;
+}
 </style>
diff --git a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
new file mode 100644
index 000000000..9598b5075
--- /dev/null
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -0,0 +1,215 @@
+<script>
+import { makeDraggableSVG } from '../utils/drag';
+
+export default {
+    props: ['histogram', 'currentMin', 'currentMax'],
+    emits: ['updateMin', 'updateMax'],
+    data() {
+        return {
+            xRange: [undefined, undefined],
+            vRange: [undefined, undefined],
+            tailsMode: false,
+        }
+    },
+    methods: {
+        simplifyHistogram(hist) {
+            let aggregationFactor = Math.round(1000 / (this.xRange[1] - this.xRange[0]))
+            if (aggregationFactor < 1) aggregationFactor = 1
+            const simpleHistogram = []
+            for (var i = 0; i < hist.length; i += aggregationFactor) {
+                simpleHistogram.push(
+                    hist.slice(i, i + aggregationFactor)
+                    .reduce((a,b) => a + b, 0)
+                )
+            }
+            return simpleHistogram
+        },
+        drawHistogram(hist){
+            // this makes the canvas lines not blurry
+            const {clientWidth, clientHeight} = this.$refs.canvas
+            this.$refs.canvas.setAttribute('width', clientWidth)
+            this.$refs.canvas.setAttribute('height', clientHeight)
+
+            const maxFrequency = Math.max(...hist)
+            const {width, height} = this.$refs.canvas
+            const ctx = this.$refs.canvas.getContext("2d");
+            const widthBetweenPoints = width / hist.length
+            ctx.clearRect(0, 0, width, height);
+            ctx.lineWidth = 4;
+            ctx.beginPath()
+            ctx.moveTo(0, height)
+            for (var i = 0; i < hist.length; i++) {
+                const frequency = hist[i]
+                const pointX = widthBetweenPoints * i
+                const pointY = height - (frequency / maxFrequency * height)
+                ctx.lineTo(pointX, pointY)
+            }
+            ctx.stroke();
+        },
+        xPositionToValue(xPosition) {
+            const xProportion = (xPosition - this.xRange[0]) / (this.xRange[1] - this.xRange[0])
+            return Math.round(
+                (this.histogram.max - this.histogram.min) * xProportion + this.histogram.min
+            )
+        },
+        valueToXPosition(value) {
+            const xProportion = (value - this.histogram.min) / (this.histogram.max - this.histogram.min)
+            return Math.round(
+                (this.xRange[1] - this.xRange[0]) * xProportion + this.xRange[0]
+            )
+        },
+        validateHandleDrag(selected, newLocation) {
+            let moveX = true;
+            let moveY = false;
+            const handleName = selected.getAttribute("name")
+            const newValue = this.xPositionToValue(newLocation.x)
+            if (handleName === 'updateMin' && newValue >= this.currentMax) {
+                moveX = false;
+            } else if (handleName === 'updateMax' && newValue <= this.currentMin) {
+                moveX = false;
+            }
+
+            return [moveX, moveY]
+        },
+        dragHandle(selected, newLocation) {
+            const handleName = selected.getAttribute("name")
+            const newValue = this.xPositionToValue(newLocation.x)
+            if (handleName === 'updateMin') {
+                this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newLocation.x - 5}`)
+            } else {
+                const exclusionBoxWidth = this.xRange[1] - newLocation.x
+                this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${newLocation.x}`)
+                this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
+            }
+            this.$emit(handleName, newValue)
+        },
+        update() {
+            this.vRange = [this.histogram.min, this.histogram.max]
+            this.$emit('updateMin', this.histogram.min, true)
+            this.$emit('updateMax', this.histogram.max, true)
+            this.drawHistogram(
+                this.simplifyHistogram(this.histogram.hist)
+            );
+        },
+    },
+    mounted() {
+        this.xRange = [5, this.$refs.svg.clientWidth - 5]
+        this.$refs.minHandle.setAttributeNS(null, 'x1', `${this.xRange[0]}`);
+        this.$refs.minHandle.setAttributeNS(null, 'x2', `${this.xRange[0]}`);
+        this.$refs.maxHandle.setAttributeNS(null, 'x1', `${this.xRange[1]}`);
+        this.$refs.maxHandle.setAttributeNS(null, 'x2', `${this.xRange[1]}`);
+        this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${this.xRange[1]}`)
+        this.update()
+        makeDraggableSVG(
+            this.$refs.svg,
+            this.validateHandleDrag,
+            this.dragHandle,
+            this.xRange,
+        )
+    },
+    watch: {
+        histogram() {
+            this.update()
+        },
+        currentMin() {
+            const currentPosition = parseFloat(this.$refs.minHandle.getAttribute('x1'))
+            const newPosition = this.valueToXPosition(this.currentMin)
+            if (newPosition !== currentPosition) {
+                this.$refs.minHandle.setAttributeNS(null, 'x1', `${newPosition}`)
+                this.$refs.minHandle.setAttributeNS(null, 'x2', `${newPosition}`)
+                this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newPosition - 5}`)
+            }
+        },
+        currentMax() {
+            const currentPosition = parseFloat(this.$refs.maxHandle.getAttribute('x1'))
+            const newPosition = this.valueToXPosition(this.currentMax)
+            const exclusionBoxWidth = this.xRange[1] - newPosition
+            if (newPosition !== currentPosition) {
+                this.$refs.maxHandle.setAttributeNS(null, 'x1', `${newPosition}`)
+                this.$refs.maxHandle.setAttributeNS(null, 'x2', `${newPosition}`)
+                this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${newPosition}`)
+                this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
+            }
+        },
+    }
+}
+</script>
+
+<template>
+    <div>
+        <div style="height: 20px">
+            <input
+                type="checkbox"
+                v-model="tailsMode"
+            >
+            Exclude distribution tails
+        </div>
+        <div class="range-editor">
+            <input
+                type="number"
+                :min="histogram.min"
+                :max="currentMax"
+                :value="currentMin"
+                style="width: 70px"
+                @input="(e) => $emit('updateMin', parseFloat(e.target.value))"
+            >
+            <svg ref="svg" class="handles-svg">
+                <text x="5" y="43" class="small">{{ this.vRange[0] }}</text>
+                <rect ref="minExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
+                <line
+                    class="draggable"
+                    name="updateMin"
+                    ref="minHandle"
+                    stroke="#f00"
+                    stroke-width="4"
+                    x1="5" x2="5"
+                    y1="0" y2="30"
+                />
+                <text x="90%" y="43" class="small">{{ this.vRange[1] }}</text>
+                <rect ref="maxExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
+                <line
+                    class="draggable"
+                    name="updateMax"
+                    ref="maxHandle"
+                    stroke="#f00"
+                    stroke-width="4"
+                    x1="5" x2="5"
+                    y1="0" y2="30"
+                />
+            </svg>
+            <canvas ref="canvas" class="canvas" />
+            <input
+                type="number"
+                :min="currentMin"
+                :max="histogram.max"
+                :value="currentMax"
+                style="width: 70px"
+                @input="(e) => $emit('updateMax', parseFloat(e.target.value))"
+            >
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.range-editor {
+    position: absolute;
+    top: 20px;
+    display: flex;
+    height: 30px;
+    width: 100%;
+}
+.canvas {
+    width: calc(100% - 150px);
+    max-height: 100%;
+    padding: 0px 5px;
+}
+.handles-svg {
+    position: absolute;
+    left: 70px;
+    width: calc(100% - 150px);
+    height: calc(100% + 15px);
+}
+.draggable {
+  cursor: move;
+}
+</style>

From 5654f648fff1759018ac475e901281696b82bbb4 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 29 May 2023 21:58:28 -0400
Subject: [PATCH 04/32] Add range column

---
 .../vue/components/CompositeLayers.vue        | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 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 cef5e6f60..4763f0c8e 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -59,7 +59,7 @@ export default {
                 }
             })
             if (this.layerMap) {
-                // each layer has a frame delta
+                // layers are channels; each layer has a frame delta
                 Promise.all(this.layers.map((layer) =>
                     restRequest({
                         type: 'GET',
@@ -77,7 +77,7 @@ export default {
                         this.histograms = responses
                     })
             } else {
-                // layers share the same frame
+                // layers are bands; they share the same frame
                 restRequest({
                         type: 'GET',
                         url: 'item/' + this.itemId + '/tiles/histogram',
@@ -132,20 +132,14 @@ export default {
         updateLayerColor(layer, swatch) {
             this.compositeLayerInfo[layer].palette = swatch.hex;
         },
-        updateLayerMin(layer, newVal, defaultValue=false) {
+        updateLayerMin(layer, newVal) {
             const newMinVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
-            if (defaultValue){
-                this.compositeLayerInfo[layer].defaultMin = newMinVal;
-            }
             this.compositeLayerInfo[layer].min = newMinVal;
             this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
             this.updateStyle();
         },
-        updateLayerMax(layer, newVal, defaultValue=false) {
+        updateLayerMax(layer, newVal) {
             const newMaxVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
-            if (defaultValue){
-                this.compositeLayerInfo[layer].defaultMax = newMaxVal;
-            }
             this.compositeLayerInfo[layer].max = newMaxVal;
             this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
             this.updateStyle();
@@ -169,6 +163,22 @@ export default {
             this.$emit('updateStyle', {bands: styleArray});
         },
     },
+    watch: {
+        histograms() {
+            this.layers.forEach((layer, index) => {
+                const { min, max } = this.histograms[index]
+                this.compositeLayerInfo[layer] = Object.assign(
+                    this.compositeLayerInfo[layer], {
+                        min,
+                        max,
+                        defaultMin: min,
+                        defaultMax: max,
+                    }
+                )
+                this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)
+            })
+        }
+    },
     mounted() {
         this.initializeLayerInfo()
         this.updateStyle()
@@ -190,6 +200,7 @@ export default {
                     </th>
                     <th class="layer-col">Layer</th>
                     <th class="color-col">Color</th>
+                    <th class="layer-col">Range</th>
                     <div
                         v-if="histograms.length"
                         class="expand-btn"
@@ -205,7 +216,7 @@ export default {
                     :key="layerName"
                     :style="expandedRows.includes(index) ? {height: '100px'} : {}"
                 >
-                    <td>
+                    <td style="width: 10%;">
                         <input
                             type="checkbox"
                             :value="layerName"
@@ -213,9 +224,9 @@ export default {
                             @change="updateActiveLayers"
                         >
                     </td>
-                    <td>{{ layerName }}</td>
-                    <td :id="layerName+'_picker'">
-                        <span
+                    <td  style="width: 40%;">{{ layerName }}</td>
+                    <td :id="layerName+'_picker'" style="width: 25%;">
+                    <span
                             class="current-color"
                             :style="{ 'background-color': palette }"
                             @click="() => toggleColorPicker(layerName)"
@@ -228,6 +239,7 @@ export default {
                             @input="(swatch) => {updateLayerColor(layerName, swatch)}"
                         />
                     </td>
+                    <td style="width: 25%;">{{ min !== undefined && max !== undefined ? `${min} - ${max}` : '' }}</td>
                     <div
                         v-if="histograms[index]"
                         class="expand-btn"

From d33938609a2b1240af4f75d9460b09f55ccca719 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 29 May 2023 21:58:47 -0400
Subject: [PATCH 05/32] Add distribution tails mode

---
 .../vue/components/HistogramEditor.vue        | 89 +++++++++++++++----
 1 file changed, 70 insertions(+), 19 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 9598b5075..63b996804 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -72,21 +72,49 @@ export default {
             return [moveX, moveY]
         },
         dragHandle(selected, newLocation) {
-            const handleName = selected.getAttribute("name")
+            const funcName = selected.getAttribute("name")
             const newValue = this.xPositionToValue(newLocation.x)
-            if (handleName === 'updateMin') {
+            if (funcName === 'updateMin') {
                 this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newLocation.x - 5}`)
             } else {
                 const exclusionBoxWidth = this.xRange[1] - newLocation.x
                 this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${newLocation.x}`)
                 this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
             }
-            this.$emit(handleName, newValue)
+
+            this.$emit(funcName, newValue)
+        },
+        fromDistributionPercentage(percentage) {
+            const numSamples = this.histogram.samples * percentage
+            let bucketIndex = 0
+            let sum = 0
+            this.histogram.hist.forEach((count, index) => {
+                sum += count
+                if (sum <= numSamples) {
+                    bucketIndex = index
+                }
+            })
+            return Math.round(this.histogram.bin_edges[bucketIndex]);
+
+        },
+        toDistributionPercentage(value) {
+            let numSamples = 0
+            this.histogram.hist.forEach((count, index) => {
+                if (value >= this.histogram.bin_edges[index]) {
+                    numSamples += count
+                }
+            })
+            return Math.round(numSamples / this.histogram.samples * 100)
+        },
+        updateFromInput(funcName, value) {
+            if (this.tailsMode) {
+                this.$emit(funcName, this.fromDistributionPercentage(parseFloat(value) / 100))
+            } else {
+                this.$emit(funcName, parseFloat(value))
+            }
         },
         update() {
             this.vRange = [this.histogram.min, this.histogram.max]
-            this.$emit('updateMin', this.histogram.min, true)
-            this.$emit('updateMax', this.histogram.max, true)
             this.drawHistogram(
                 this.simplifyHistogram(this.histogram.hist)
             );
@@ -131,6 +159,12 @@ export default {
                 this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
             }
         },
+        tailsMode() {
+            if (this.tailsMode) {
+                this.$emit('updateMin', this.fromDistributionPercentage(0.05)),
+                this.$emit('updateMax', this.fromDistributionPercentage(0.95))
+            }
+        }
     }
 }
 </script>
@@ -145,14 +179,18 @@ export default {
             Exclude distribution tails
         </div>
         <div class="range-editor">
-            <input
-                type="number"
-                :min="histogram.min"
-                :max="currentMax"
-                :value="currentMin"
-                style="width: 70px"
-                @input="(e) => $emit('updateMin', parseFloat(e.target.value))"
+            <span
+                :class="tailsMode ? 'percentage-input' : ''"
             >
+                <input
+                    type="number"
+                    :min="histogram.min"
+                    :max="tailsMode ? toDistributionPercentage(currentMax): currentMax"
+                    :value="tailsMode ? toDistributionPercentage(currentMin) : currentMin"
+                    style="width: 70px"
+                    @input="(e) => updateFromInput('updateMin', e.target.value)"
+                >
+            </span>
             <svg ref="svg" class="handles-svg">
                 <text x="5" y="43" class="small">{{ this.vRange[0] }}</text>
                 <rect ref="minExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
@@ -178,14 +216,18 @@ export default {
                 />
             </svg>
             <canvas ref="canvas" class="canvas" />
-            <input
-                type="number"
-                :min="currentMin"
-                :max="histogram.max"
-                :value="currentMax"
-                style="width: 70px"
-                @input="(e) => $emit('updateMax', parseFloat(e.target.value))"
+            <span
+                :class="tailsMode ? 'percentage-input' : ''"
             >
+                <input
+                    type="number"
+                    :max="histogram.max"
+                    :min="tailsMode ? toDistributionPercentage(currentMin): currentMin"
+                    :value="tailsMode ? toDistributionPercentage(currentMax): currentMax"
+                    style="width: 70px"
+                    @input="(e) => updateFromInput('updateMax', e.target.value)"
+                >
+            </span>
         </div>
     </div>
 </template>
@@ -212,4 +254,13 @@ export default {
 .draggable {
   cursor: move;
 }
+.percentage-input {
+    position: relative;
+}
+.percentage-input::after {
+    position: absolute;
+    content: '%';
+    left: 35px;
+    top: 3px;
+}
 </style>

From c18adbfddc58f5c31e75197929c44d4c333056df Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 31 May 2023 12:14:04 -0400
Subject: [PATCH 06/32] Fix fetching histograms, refetch on currentFrame change

---
 .../vue/components/CompositeLayers.vue        | 62 ++++++++++++-------
 1 file changed, 38 insertions(+), 24 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 4763f0c8e..75ce423e1 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -58,35 +58,43 @@ export default {
                     usedColors.push(chosenColor)
                 }
             })
+            this.fetchHistograms()
+        },
+        fetchHistograms() {
             if (this.layerMap) {
                 // layers are channels; each layer has a frame delta
-                Promise.all(this.layers.map((layer) =>
+                this.layers.forEach((layer) => {
                     restRequest({
                         type: 'GET',
                         url: 'item/' + this.itemId + '/tiles/histogram',
                         data: {
                             frame: this.currentFrame + this.compositeLayerInfo[layer].framedelta,
+                            width: 1024,
+                            height: 1024,
+                            bins: 512,
                         }
                     }).then((response) => {
                         if (response.length < 3) {
-                            return response[0]
+                            this.histograms.push(response[0])
                         } else {
-                            return response[1]
+                            this.histograms.push(response[1])
                         }
-                    }))).then((responses) => {
-                        this.histograms = responses
                     })
+                })
             } else {
                 // layers are bands; they share the same frame
                 restRequest({
-                        type: 'GET',
-                        url: 'item/' + this.itemId + '/tiles/histogram',
-                        data: {
-                            frame: this.currentFrame,
-                        }
-                    }).then((response) => {
-                        this.histograms = response
-                    });
+                    type: 'GET',
+                    url: 'item/' + this.itemId + '/tiles/histogram',
+                    data: {
+                        frame: this.currentFrame,
+                        width: 1024,
+                        height: 1024,
+                        bins: 512,
+                    }
+                }).then((response) => {
+                    this.histograms = response
+                });
             }
         },
         toggleEnableAll() {
@@ -164,18 +172,24 @@ export default {
         },
     },
     watch: {
+        currentFrame() {
+            this.histograms = []
+            this.fetchHistograms()
+        },
         histograms() {
             this.layers.forEach((layer, index) => {
-                const { min, max } = this.histograms[index]
-                this.compositeLayerInfo[layer] = Object.assign(
-                    this.compositeLayerInfo[layer], {
-                        min,
-                        max,
-                        defaultMin: min,
-                        defaultMax: max,
-                    }
-                )
-                this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)
+                if(this.histograms.length > index) {
+                    const { min, max } = this.histograms[index]
+                    this.compositeLayerInfo[layer] = Object.assign(
+                        this.compositeLayerInfo[layer], {
+                            min,
+                            max,
+                            defaultMin: min,
+                            defaultMax: max,
+                        }
+                    )
+                    this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)
+                }
             })
         }
     },
@@ -251,7 +265,7 @@ export default {
                         : expandedRows.includes(index) ? '&#9650;' : '&#9660;'
                     }}
                     </div>
-                    <div v-if="expandedRows.includes(index)" class="advanced-section">
+                    <div v-if="histograms[index] && expandedRows.includes(index)" class="advanced-section">
                         <histogram-editor
                             :histogram="histograms[index]"
                             :currentMin="min"

From 2c16c71fb4963785b34b8589fd9dc45ee116e3c4 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 31 May 2023 12:19:20 -0400
Subject: [PATCH 07/32] Make right tail value 100 - percentage

---
 .../web_client/vue/components/HistogramEditor.vue      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 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 63b996804..ac660b4bd 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -184,7 +184,7 @@ export default {
             >
                 <input
                     type="number"
-                    :min="histogram.min"
+                    :min="tailsMode ? 0 : histogram.min"
                     :max="tailsMode ? toDistributionPercentage(currentMax): currentMax"
                     :value="tailsMode ? toDistributionPercentage(currentMin) : currentMin"
                     style="width: 70px"
@@ -221,11 +221,11 @@ export default {
             >
                 <input
                     type="number"
-                    :max="histogram.max"
-                    :min="tailsMode ? toDistributionPercentage(currentMin): currentMin"
-                    :value="tailsMode ? toDistributionPercentage(currentMax): currentMax"
+                    :max="tailsMode ? 100 - toDistributionPercentage(currentMin) : histogram.max"
+                    :min="tailsMode ? 0: currentMin"
+                    :value="tailsMode ? 100 - toDistributionPercentage(currentMax) : currentMax"
                     style="width: 70px"
-                    @input="(e) => updateFromInput('updateMax', e.target.value)"
+                    @input="(e) => updateFromInput('updateMax', 100 - e.target.value)"
                 >
             </span>
         </div>

From 8dff2257ba6f081054552cf690734e4d95a49106 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 31 May 2023 13:00:32 -0400
Subject: [PATCH 08/32] Only render composite layers for groups that exist

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

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 1507b3785..4150fa051 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -179,6 +179,7 @@ export default Vue.extend({
         <div  class="image-frame-simple-control" style="width: 500px">
             <composite-layers
                 key="channels"
+                v-if="imageMetadata.channels"
                 :itemId="itemId"
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.channels"
@@ -188,6 +189,7 @@ export default Vue.extend({
             />
             <composite-layers
                 key="bands"
+                v-if="imageMetadata.bands"
                 :itemId="itemId"
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.bands"

From 2fdae2f91c1a02986545c7ec7569195de422d0eb Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 31 May 2023 13:01:04 -0400
Subject: [PATCH 09/32] Shorten max frequency height where appropriate

---
 .../web_client/vue/components/HistogramEditor.vue   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

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 ac660b4bd..22fb1c1f0 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -31,6 +31,13 @@ export default {
             this.$refs.canvas.setAttribute('height', clientHeight)
 
             const maxFrequency = Math.max(...hist)
+            const minFrequency = Math.min(...hist)
+            const secondMaxFrequency = Math.max(...hist.filter((v) => v !== maxFrequency))
+            const shortenMaxFrequency = (
+                secondMaxFrequency > minFrequency
+                && (maxFrequency - secondMaxFrequency) > secondMaxFrequency / 3
+            )
+
             const {width, height} = this.$refs.canvas
             const ctx = this.$refs.canvas.getContext("2d");
             const widthBetweenPoints = width / hist.length
@@ -41,7 +48,11 @@ export default {
             for (var i = 0; i < hist.length; i++) {
                 const frequency = hist[i]
                 const pointX = widthBetweenPoints * i
-                const pointY = height - (frequency / maxFrequency * height)
+
+                let pointY = height - (frequency / maxFrequency * height)
+                if(shortenMaxFrequency) {
+                    pointY = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3)
+                }
                 ctx.lineTo(pointX, pointY)
             }
             ctx.stroke();

From 91096edafc475d8691334d517c41c2ec068dbd0c Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 31 May 2023 13:09:13 -0400
Subject: [PATCH 10/32] Reduce auto tails

---
 .../web_client/vue/components/HistogramEditor.vue             | 4 ++--
 1 file changed, 2 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 22fb1c1f0..3d44c2349 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -172,8 +172,8 @@ export default {
         },
         tailsMode() {
             if (this.tailsMode) {
-                this.$emit('updateMin', this.fromDistributionPercentage(0.05)),
-                this.$emit('updateMax', this.fromDistributionPercentage(0.95))
+                this.$emit('updateMin', this.fromDistributionPercentage(0.01)),
+                this.$emit('updateMax', this.fromDistributionPercentage(0.99))
             }
         }
     }

From bc037fdf9d24a701308d20f5d1c118e9dc6fe872 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 31 May 2023 13:12:17 -0400
Subject: [PATCH 11/32] Lint fix

---
 girder/girder_large_image/web_client/vue/utils/colors.js | 1 -
 1 file changed, 1 deletion(-)

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 229961337..9bc77c284 100644
--- a/girder/girder_large_image/web_client/vue/utils/colors.js
+++ b/girder/girder_large_image/web_client/vue/utils/colors.js
@@ -1,4 +1,3 @@
-
 export const CHANNEL_COLORS = {
     BRIGHTFIELD: '#FFFFFF',
     DAPI: '#0000FF',

From 4f10794f9e22a0bf795e7c544b2af064834579fd Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 1 Jun 2023 15:00:57 -0400
Subject: [PATCH 12/32] Remove inline width

---
 .../web_client/vue/components/FrameSelector.vue                 | 2 +-
 1 file changed, 1 insertion(+), 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 4150fa051..4422bbd63 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -176,7 +176,7 @@ export default Vue.extend({
 
         <!-- Use composite layers component twice so state for each one is maintained while invisible -->
         <!-- Use styling instead of v-if to make each invisible so that the components are not unmounted -->
-        <div  class="image-frame-simple-control" style="width: 500px">
+        <div  class="image-frame-simple-control">
             <composite-layers
                 key="channels"
                 v-if="imageMetadata.channels"

From ac05890f298b752a7ab98a2c7d3942269e83bb02 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 6 Jun 2023 12:02:41 -0400
Subject: [PATCH 13/32] Remove extra parameters in tile style queries

---
 .../web_client/vue/components/CompositeLayers.vue        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 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 75ce423e1..cd4696d2c 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -164,8 +164,13 @@ export default {
             ).filter((layer) => layer.enabled);
             const styleArray = []
             activeLayers.forEach((layer) => {
-                const styleEntry = Object.assign({}, layer);
-                delete styleEntry.enabled
+                const styleEntry = {
+                    min: layer.min,
+                    max: layer.max,
+                    palette: layer.palette,
+                    framedelta: layer.framedelta,
+                    band: layer.band,
+                }
                 styleArray.push(styleEntry);
             });
             this.$emit('updateStyle', {bands: styleArray});

From d1fb156c64ec7db6805183160895f5f2edce9a17 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 6 Jun 2023 12:03:35 -0400
Subject: [PATCH 14/32] Add resample: false in histogram query

---
 .../web_client/vue/components/CompositeLayers.vue               | 2 ++
 1 file changed, 2 insertions(+)

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 cd4696d2c..54fa9626b 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -72,6 +72,7 @@ export default {
                             width: 1024,
                             height: 1024,
                             bins: 512,
+                            resample: false,
                         }
                     }).then((response) => {
                         if (response.length < 3) {
@@ -91,6 +92,7 @@ export default {
                         width: 1024,
                         height: 1024,
                         bins: 512,
+                        resample: false,
                     }
                 }).then((response) => {
                     this.histograms = response

From b44d581d3a457415036a8f2d46bbcb8d8e2dfbe0 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 6 Jun 2023 12:05:49 -0400
Subject: [PATCH 15/32] Consolidate histogram params definition

---
 .../vue/components/CompositeLayers.vue        | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 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 54fa9626b..0839383ae 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -61,19 +61,23 @@ export default {
             this.fetchHistograms()
         },
         fetchHistograms() {
+            const histogramParams = {
+                frame: this.currentFrame,
+                width: 1024,
+                height: 1024,
+                bins: 512,
+                resample: false,
+            }
             if (this.layerMap) {
                 // layers are channels; each layer has a frame delta
                 this.layers.forEach((layer) => {
                     restRequest({
                         type: 'GET',
                         url: 'item/' + this.itemId + '/tiles/histogram',
-                        data: {
-                            frame: this.currentFrame + this.compositeLayerInfo[layer].framedelta,
-                            width: 1024,
-                            height: 1024,
-                            bins: 512,
-                            resample: false,
-                        }
+                        data: Object.assign(
+                            histogramParams,
+                            {frame: this.currentFrame + this.compositeLayerInfo[layer].framedelta}
+                        )
                     }).then((response) => {
                         if (response.length < 3) {
                             this.histograms.push(response[0])
@@ -87,13 +91,7 @@ export default {
                 restRequest({
                     type: 'GET',
                     url: 'item/' + this.itemId + '/tiles/histogram',
-                    data: {
-                        frame: this.currentFrame,
-                        width: 1024,
-                        height: 1024,
-                        bins: 512,
-                        resample: false,
-                    }
+                    data: histogramParams,
                 }).then((response) => {
                     this.histograms = response
                 });

From 7eac9c8d7876ca7bb0df2f00f116c3b07802511c Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 6 Jun 2023 12:08:37 -0400
Subject: [PATCH 16/32] Remove rounding to int when converting distribution
 percentages

---
 .../web_client/vue/components/HistogramEditor.vue             | 4 ++--
 1 file changed, 2 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 3d44c2349..467fe060a 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -105,7 +105,7 @@ export default {
                     bucketIndex = index
                 }
             })
-            return Math.round(this.histogram.bin_edges[bucketIndex]);
+            return this.histogram.bin_edges[bucketIndex];
 
         },
         toDistributionPercentage(value) {
@@ -115,7 +115,7 @@ export default {
                     numSamples += count
                 }
             })
-            return Math.round(numSamples / this.histogram.samples * 100)
+            return numSamples / this.histogram.samples * 100
         },
         updateFromInput(funcName, value) {
             if (this.tailsMode) {

From aef72526cb2663cf1e089f85f43569bc6bf2674f Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 9 Jun 2023 11:29:51 -0400
Subject: [PATCH 17/32] Add a library for toggle switches

---
 girder/girder_large_image/web_client/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/girder/girder_large_image/web_client/package.json b/girder/girder_large_image/web_client/package.json
index f22866988..02788119f 100644
--- a/girder/girder_large_image/web_client/package.json
+++ b/girder/girder_large_image/web_client/package.json
@@ -26,6 +26,7 @@
         "vue": "~2.6.14",
         "vue-color": "^2.8.1",
         "vue-loader": "~15.9.8",
+        "vue-switches": "^2.0.1",
         "vue-template-compiler": "~2.6.14",
         "webpack": "^3",
         "yaml": "^2.1.1"

From 7163b298712be5d23bcfeee3c1f0f793fc693b57 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 9 Jun 2023 11:30:17 -0400
Subject: [PATCH 18/32] Redesign for autoRange

---
 .../vue/components/CompositeLayers.vue        | 208 +++++++++------
 .../vue/components/HistogramEditor.vue        | 237 +++++++++++-------
 2 files changed, 280 insertions(+), 165 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 0839383ae..84133a4a2 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -1,6 +1,7 @@
 <script>
 import { restRequest } from '@girder/core/rest';
 import { Chrome } from 'vue-color';
+import Switches from 'vue-switches';
 import { CHANNEL_COLORS, OTHER_COLORS } from '../utils/colors'
 import HistogramEditor from './HistogramEditor.vue';
 
@@ -9,6 +10,7 @@ export default {
     emits: ['updateStyle'],
     components: {
         'color-picker': Chrome,
+        Switches,
         HistogramEditor,
     },
     data() {
@@ -16,9 +18,19 @@ export default {
             enabledLayers: this.layers,
             colorPickerShown: undefined,
             currentColorPickerRef: undefined,
+            currentFrameHistogram: undefined,
             compositeLayerInfo: {},
-            histograms: [],
             expandedRows: [],
+            autoRangeForAll: undefined,
+            histogramParams: {
+                frame: this.currentFrame,
+                width: 1024,
+                height: 1024,
+                bins: 512,
+                resample: false,
+                style: {},
+                roundRange: true,
+            }
         }
     },
     methods: {
@@ -35,6 +47,7 @@ export default {
                     min: undefined,
                     max: undefined,
                     custom: false,
+                    autoRange: undefined
                 }
             })
             Object.entries(CHANNEL_COLORS).forEach(([channelName, color]) => {
@@ -58,44 +71,16 @@ export default {
                     usedColors.push(chosenColor)
                 }
             })
-            this.fetchHistograms()
+            this.fetchCurrentFrameHistogram()
         },
-        fetchHistograms() {
-            const histogramParams = {
-                frame: this.currentFrame,
-                width: 1024,
-                height: 1024,
-                bins: 512,
-                resample: false,
-            }
-            if (this.layerMap) {
-                // layers are channels; each layer has a frame delta
-                this.layers.forEach((layer) => {
-                    restRequest({
-                        type: 'GET',
-                        url: 'item/' + this.itemId + '/tiles/histogram',
-                        data: Object.assign(
-                            histogramParams,
-                            {frame: this.currentFrame + this.compositeLayerInfo[layer].framedelta}
-                        )
-                    }).then((response) => {
-                        if (response.length < 3) {
-                            this.histograms.push(response[0])
-                        } else {
-                            this.histograms.push(response[1])
-                        }
-                    })
-                })
-            } else {
-                // layers are bands; they share the same frame
-                restRequest({
-                    type: 'GET',
-                    url: 'item/' + this.itemId + '/tiles/histogram',
-                    data: histogramParams,
-                }).then((response) => {
-                    this.histograms = response
-                });
-            }
+        fetchCurrentFrameHistogram() {
+            restRequest({
+                type: 'GET',
+                url: 'item/' + this.itemId + '/tiles/histogram',
+                data: this.histogramParams,
+            }).then((response) => {
+                this.currentFrameHistogram = response
+            });
         },
         toggleEnableAll() {
             if (this.enabledLayers !== this.layers) {
@@ -131,6 +116,30 @@ export default {
                 this.expandedRows = Object.values(this.compositeLayerInfo).map(({index}) => index)
             }
         },
+        updateLayerAutoRange(layer, value) {
+            this.compositeLayerInfo = Object.assign(
+                {}, this.compositeLayerInfo,
+                {[layer] : Object.assign(
+                    {}, this.compositeLayerInfo[layer], { autoRange: value }
+                )}
+            )
+            this.updateStyle();
+        },
+        updateAllAutoRanges(value) {
+            this.autoRangeForAll = value
+            this.compositeLayerInfo = Object.fromEntries(
+                Object.entries(this.compositeLayerInfo).map(([layerName, layerInfo]) => {
+                    return [
+                        layerName,
+                        Object.assign({}, layerInfo, { autoRange: value })
+                    ]
+                })
+            )
+            this.updateStyle();
+        },
+        allAutoRange() {
+            return Object.values(this.compositeLayerInfo).every(({ autoRange }) => autoRange !== undefined)
+        },
         documentClick(e) {
             const picker = this.currentColorPickerRef;
             if (picker && picker !== e.target && !picker.contains(e.target)) {
@@ -165,8 +174,8 @@ export default {
             const styleArray = []
             activeLayers.forEach((layer) => {
                 const styleEntry = {
-                    min: layer.min,
-                    max: layer.max,
+                    min: layer.autoRange !== undefined ? `min:${layer.autoRange / 100}` : layer.min,
+                    max: layer.autoRange !== undefined ? `max:${layer.autoRange / 100}` : layer.max,
                     palette: layer.palette,
                     framedelta: layer.framedelta,
                     band: layer.band,
@@ -176,28 +185,6 @@ export default {
             this.$emit('updateStyle', {bands: styleArray});
         },
     },
-    watch: {
-        currentFrame() {
-            this.histograms = []
-            this.fetchHistograms()
-        },
-        histograms() {
-            this.layers.forEach((layer, index) => {
-                if(this.histograms.length > index) {
-                    const { min, max } = this.histograms[index]
-                    this.compositeLayerInfo[layer] = Object.assign(
-                        this.compositeLayerInfo[layer], {
-                            min,
-                            max,
-                            defaultMin: min,
-                            defaultMax: max,
-                        }
-                    )
-                    this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)
-                }
-            })
-        }
-    },
     mounted() {
         this.initializeLayerInfo()
         this.updateStyle()
@@ -210,18 +197,41 @@ export default {
         <table id="composite-layer-table" class="table table-condensed">
             <thead class="table-header">
                 <tr>
-                    <th class="enabled-col">
+                    <th>
                         <input
                             type="checkbox"
                             :checked="enabledLayers === layers"
                             @input="toggleEnableAll"
                         >
                     </th>
-                    <th class="layer-col">Layer</th>
-                    <th class="color-col">Color</th>
-                    <th class="layer-col">Range</th>
+                    <th>ALL</th>
+                    <th></th>
+                    <th style="min-width: 100px;">
+                        <div class="auto-range-col">
+                            <span style="font-size: 10px;">Auto Range</span>
+                            <switches
+                                :value="allAutoRange()"
+                                @input="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.02)"
+                                :emit-on-mount="false"
+                                theme="bulma"
+                                color="blue"
+                            />
+                            <span
+                                v-if="allAutoRange()"
+                                class="percentage-input"
+                            >
+                                <input
+                                    type="number"
+                                    :max="50"
+                                    :min="0"
+                                    :value="autoRangeForAll"
+                                    style="width: 80px"
+                                    @input="(e) => updateAllAutoRanges(e.target.value)"
+                                >
+                            </span>
+                        </div>
+                    </th>
                     <div
-                        v-if="histograms.length"
                         class="expand-btn"
                         @click="toggleAllExpanded"
                     >
@@ -231,9 +241,14 @@ export default {
             </thead>
             <tbody>
                 <tr
-                    v-for="{layerName, index, min, max, palette, defaultMin, defaultMax} in Object.values(compositeLayerInfo)"
+                    v-for="{
+                        layerName, index, palette,
+                        autoRange, min, max,
+                        defaultMin, defaultMax,
+                        framedelta
+                    } in Object.values(compositeLayerInfo)"
                     :key="layerName"
-                    :style="expandedRows.includes(index) ? {height: '100px'} : {}"
+                    :style="expandedRows.includes(index) ? {height: '75px'} : {}"
                 >
                     <td style="width: 10%;">
                         <input
@@ -258,9 +273,18 @@ export default {
                             @input="(swatch) => {updateLayerColor(layerName, swatch)}"
                         />
                     </td>
-                    <td style="width: 25%;">{{ min !== undefined && max !== undefined ? `${min} - ${max}` : '' }}</td>
+                    <td>
+                        <div class="auto-range-col">
+                            <switches
+                                :value="autoRange"
+                                @input="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.02)"
+                                :emit-on-mount="false"
+                                theme="bulma"
+                                color="blue"
+                            />
+                        </div>
+                    </td>
                     <div
-                        v-if="histograms[index]"
                         class="expand-btn"
                         @click="() => toggleExpanded(index)"
                     >
@@ -270,13 +294,19 @@ export default {
                         : expandedRows.includes(index) ? '&#9650;' : '&#9660;'
                     }}
                     </div>
-                    <div v-if="histograms[index] && expandedRows.includes(index)" class="advanced-section">
+                    <div v-if="expandedRows.includes(index)" class="advanced-section">
                         <histogram-editor
-                            :histogram="histograms[index]"
+                            :itemId="itemId"
+                            :layerIndex="index"
+                            :currentFrameHistogram="currentFrameHistogram"
+                            :histogramParams="histogramParams"
+                            :framedelta="framedelta"
+                            :autoRange="autoRange"
                             :currentMin="min"
                             :currentMax="max"
                             @updateMin="(v, d) => updateLayerMin(layerName, v, d)"
                             @updateMax="(v, d) => updateLayerMax(layerName, v, d)"
+                            @updateAutoRange="(v) => updateLayerAutoRange(layerName, v)"
                         />
                     </div>
                 </tr>
@@ -304,6 +334,16 @@ export default {
     background-color: white;
     z-index: 2;
 }
+.auto-range-col {
+    display: flex;
+    flex-direction: column;
+    align-content: space-around;
+    padding: 0;
+}
+.vue-switcher {
+    margin: 5px 0px 0px 0px;
+    width: 45px;
+}
 .table-container {
     overflow-x: auto;
     overflow-y: hidden;
@@ -312,7 +352,7 @@ export default {
     padding: 0 5px;
 }
 .table-container input {
-    max-width: 70px;
+    max-width: 80px;
 }
 tr {
     position: relative;
@@ -320,12 +360,26 @@ tr {
 .expand-btn {
     position: absolute;
     right: 0;
+    bottom: 5px;
 }
 .advanced-section {
     position: absolute;
     left: 0px;
-    width: 100%;
-    margin: 30px 5px 0px;
-    height: 55px;
+    width: calc(100% - 10px);
+    margin: 30px 0px 0px;
+    height: 40px;
+}
+</style>
+
+<style>
+.percentage-input {
+    position: relative;
+    margin-top: 5px;
+}
+.percentage-input::after {
+    position: absolute;
+    content: '%';
+    left: 45px;
+    top: 3px;
 }
 </style>
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 467fe060a..d6b5e6c20 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -1,17 +1,48 @@
 <script>
+import { restRequest } from '@girder/core/rest';
+import { nextTick } from 'vue';
 import { makeDraggableSVG } from '../utils/drag';
 
 export default {
-    props: ['histogram', 'currentMin', 'currentMax'],
-    emits: ['updateMin', 'updateMax'],
+    props: [
+        'itemId',
+        'layerIndex',
+        'currentFrameHistogram',
+        'histogramParams',
+        'framedelta',
+        'currentMin',
+        'currentMax',
+        'autoRange',
+    ],
+    emits: ['updateMin', 'updateMax', 'updateAutoRange'],
     data() {
         return {
+            histogram: undefined,
             xRange: [undefined, undefined],
             vRange: [undefined, undefined],
-            tailsMode: false,
         }
     },
     methods: {
+        fetchHistogram() {
+            if (this.framedelta !== undefined) {
+                restRequest({
+                    type: 'GET',
+                    url: 'item/' + this.itemId + '/tiles/histogram',
+                    data: Object.assign(
+                        this.histogramParams,
+                        {frame: this.histogramParams.frame + this.framedelta}
+                    )
+                }).then((response) => {
+                    if (response.length < 3) {
+                        this.histogram = response[0]
+                    } else {
+                        this.histogram = response[1]
+                    }
+                })
+            } else {
+                this.histogram = this.currentFrameHistogram[this.layerIndex]
+            }
+        },
         simplifyHistogram(hist) {
             let aggregationFactor = Math.round(1000 / (this.xRange[1] - this.xRange[0]))
             if (aggregationFactor < 1) aggregationFactor = 1
@@ -83,17 +114,30 @@ export default {
             return [moveX, moveY]
         },
         dragHandle(selected, newLocation) {
-            const funcName = selected.getAttribute("name")
-            const newValue = this.xPositionToValue(newLocation.x)
-            if (funcName === 'updateMin') {
-                this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newLocation.x - 5}`)
+            let funcName = selected.getAttribute("name")
+            let newValue = this.xPositionToValue(newLocation.x)
+            if (this.autoRange !== undefined) {
+                newValue = this.toDistributionPercentage(newValue);
+                if (funcName == 'updateMax') {
+                    newValue = 100 - newValue
+                }
+                newValue = parseFloat(parseFloat(newValue).toFixed(2))
+                this.$emit('updateAutoRange', newValue)
             } else {
-                const exclusionBoxWidth = this.xRange[1] - newLocation.x
-                this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${newLocation.x}`)
-                this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
+                if (funcName === 'updateMin') {
+                    this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newLocation.x - 5}`)
+                } else if (funcName === 'updateMax') {
+                    this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${newLocation.x}`)
+                    this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${this.xRange[1] - newLocation.x}`)
+                }
+                this.$emit(funcName, newValue)
             }
-
-            this.$emit(funcName, newValue)
+        },
+        setHandlePosition(handle, position, exclusionBox, exclusionBoxPosition, exclusionBoxWidth) {
+            handle.setAttributeNS(null, 'x1', `${position}`)
+            handle.setAttributeNS(null, 'x2', `${position}`)
+            exclusionBox.setAttributeNS(null, 'x', `${exclusionBoxPosition}`)
+            exclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
         },
         fromDistributionPercentage(percentage) {
             const numSamples = this.histogram.samples * percentage
@@ -118,90 +162,104 @@ export default {
             return numSamples / this.histogram.samples * 100
         },
         updateFromInput(funcName, value) {
-            if (this.tailsMode) {
-                this.$emit(funcName, this.fromDistributionPercentage(parseFloat(value) / 100))
-            } else {
-                this.$emit(funcName, parseFloat(value))
-            }
-        },
-        update() {
-            this.vRange = [this.histogram.min, this.histogram.max]
-            this.drawHistogram(
-                this.simplifyHistogram(this.histogram.hist)
-            );
+            const roundedValue = parseFloat(parseFloat(value).toFixed(2))
+            this.$emit(funcName, roundedValue)
         },
     },
     mounted() {
-        this.xRange = [5, this.$refs.svg.clientWidth - 5]
-        this.$refs.minHandle.setAttributeNS(null, 'x1', `${this.xRange[0]}`);
-        this.$refs.minHandle.setAttributeNS(null, 'x2', `${this.xRange[0]}`);
-        this.$refs.maxHandle.setAttributeNS(null, 'x1', `${this.xRange[1]}`);
-        this.$refs.maxHandle.setAttributeNS(null, 'x2', `${this.xRange[1]}`);
-        this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${this.xRange[1]}`)
-        this.update()
-        makeDraggableSVG(
-            this.$refs.svg,
-            this.validateHandleDrag,
-            this.dragHandle,
-            this.xRange,
-        )
+        this.fetchHistogram()
     },
     watch: {
         histogram() {
-            this.update()
+            // allow rerender to occur first
+            nextTick().then(() => {
+                this.xRange = [5, this.$refs.svg.clientWidth - 5]
+                this.vRange = [this.histogram.min, this.histogram.max]
+                this.$refs.minHandle.setAttributeNS(null, 'x1', `${this.xRange[0]}`);
+                this.$refs.minHandle.setAttributeNS(null, 'x2', `${this.xRange[0]}`);
+                this.$refs.maxHandle.setAttributeNS(null, 'x1', `${this.xRange[1]}`);
+                this.$refs.maxHandle.setAttributeNS(null, 'x2', `${this.xRange[1]}`);
+                this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${this.xRange[1]}`)
+                this.drawHistogram(
+                    this.simplifyHistogram(this.histogram.hist)
+                );
+                makeDraggableSVG(
+                    this.$refs.svg,
+                    this.validateHandleDrag,
+                    this.dragHandle,
+                    this.xRange,
+                )
+            })
         },
         currentMin() {
             const currentPosition = parseFloat(this.$refs.minHandle.getAttribute('x1'))
             const newPosition = this.valueToXPosition(this.currentMin)
             if (newPosition !== currentPosition) {
-                this.$refs.minHandle.setAttributeNS(null, 'x1', `${newPosition}`)
-                this.$refs.minHandle.setAttributeNS(null, 'x2', `${newPosition}`)
-                this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newPosition - 5}`)
+                this.setHandlePosition(
+                    this.$refs.minHandle,
+                    newPosition,
+                    this.$refs.minExclusionBox,
+                    5,
+                    newPosition - 5,
+                )
             }
         },
         currentMax() {
             const currentPosition = parseFloat(this.$refs.maxHandle.getAttribute('x1'))
             const newPosition = this.valueToXPosition(this.currentMax)
-            const exclusionBoxWidth = this.xRange[1] - newPosition
             if (newPosition !== currentPosition) {
-                this.$refs.maxHandle.setAttributeNS(null, 'x1', `${newPosition}`)
-                this.$refs.maxHandle.setAttributeNS(null, 'x2', `${newPosition}`)
-                this.$refs.maxExclusionBox.setAttributeNS(null, 'x', `${newPosition}`)
-                this.$refs.maxExclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`)
+                this.setHandlePosition(
+                    this.$refs.maxHandle,
+                    newPosition,
+                    this.$refs.maxExclusionBox,
+                    newPosition,
+                    this.xRange[1] - newPosition,
+                )
             }
         },
-        tailsMode() {
-            if (this.tailsMode) {
-                this.$emit('updateMin', this.fromDistributionPercentage(0.01)),
-                this.$emit('updateMax', this.fromDistributionPercentage(0.99))
+        autoRange() {
+            let newMinPosition = this.currentMin ? this.valueToXPosition(this.currentMin) : this.xRange[0]
+            let newMaxPosition = this.currentMax ? this.valueToXPosition(this.currentMax) : this.xRange[1]
+            if (this.autoRange) {
+                newMinPosition = this.valueToXPosition(
+                    this.fromDistributionPercentage(this.autoRange / 100)
+                )
+                newMaxPosition = this.valueToXPosition(
+                    this.fromDistributionPercentage((100 - this.autoRange) / 100)
+                )
             }
+            this.setHandlePosition(
+                this.$refs.minHandle,
+                newMinPosition,
+                this.$refs.minExclusionBox,
+                5,
+                newMinPosition - 5,
+            )
+            this.setHandlePosition(
+                this.$refs.maxHandle,
+                newMaxPosition,
+                this.$refs.maxExclusionBox,
+                newMaxPosition,
+                this.xRange[1] - newMaxPosition,
+            )
         }
     }
 }
 </script>
 
 <template>
-    <div>
-        <div style="height: 20px">
-            <input
-                type="checkbox"
-                v-model="tailsMode"
-            >
-            Exclude distribution tails
-        </div>
+    <div v-if="histogram">
         <div class="range-editor">
-            <span
-                :class="tailsMode ? 'percentage-input' : ''"
+            <input
+                v-if="autoRange === undefined"
+                type="number"
+                :min="histogram.min"
+                :max="currentMax"
+                :value="currentMin"
+                style="width: 80px"
+                @input="(e) => updateFromInput('updateMin', e.target.value)"
             >
-                <input
-                    type="number"
-                    :min="tailsMode ? 0 : histogram.min"
-                    :max="tailsMode ? toDistributionPercentage(currentMax): currentMax"
-                    :value="tailsMode ? toDistributionPercentage(currentMin) : currentMin"
-                    style="width: 70px"
-                    @input="(e) => updateFromInput('updateMin', e.target.value)"
-                >
-            </span>
+            <span v-else style="width: 80px"/>
             <svg ref="svg" class="handles-svg">
                 <text x="5" y="43" class="small">{{ this.vRange[0] }}</text>
                 <rect ref="minExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
@@ -214,7 +272,10 @@ export default {
                     x1="5" x2="5"
                     y1="0" y2="30"
                 />
-                <text x="90%" y="43" class="small">{{ this.vRange[1] }}</text>
+                <text
+                    :x="this.xRange[1] - (`${this.vRange[1]}`.length * 6)"
+                    y="43" class="small"
+                >{{ this.vRange[1] }}</text>
                 <rect ref="maxExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
                 <line
                     class="draggable"
@@ -227,16 +288,26 @@ export default {
                 />
             </svg>
             <canvas ref="canvas" class="canvas" />
+            <input
+                v-if="autoRange === undefined"
+                type="number"
+                :max="histogram.max"
+                :min="currentMin"
+                :value="currentMax"
+                style="width: 80px"
+                @input="(e) => updateFromInput('updateMax', e.target.value)"
+            >
             <span
-                :class="tailsMode ? 'percentage-input' : ''"
+                v-else
+                class="percentage-input"
             >
                 <input
                     type="number"
-                    :max="tailsMode ? 100 - toDistributionPercentage(currentMin) : histogram.max"
-                    :min="tailsMode ? 0: currentMin"
-                    :value="tailsMode ? 100 - toDistributionPercentage(currentMax) : currentMax"
-                    style="width: 70px"
-                    @input="(e) => updateFromInput('updateMax', 100 - e.target.value)"
+                    :max="50"
+                    :min="0"
+                    :value="autoRange"
+                    style="width: 80px"
+                    @input="(e) => updateFromInput('updateAutoRange', e.target.value)"
                 >
             </span>
         </div>
@@ -246,32 +317,22 @@ export default {
 <style scoped>
 .range-editor {
     position: absolute;
-    top: 20px;
     display: flex;
     height: 30px;
     width: 100%;
 }
 .canvas {
-    width: calc(100% - 150px);
+    width: calc(100% - 160px);
     max-height: 100%;
     padding: 0px 5px;
 }
 .handles-svg {
     position: absolute;
-    left: 70px;
-    width: calc(100% - 150px);
+    left: 80px;
+    width: calc(100% - 160px);
     height: calc(100% + 15px);
 }
 .draggable {
   cursor: move;
 }
-.percentage-input {
-    position: relative;
-}
-.percentage-input::after {
-    position: absolute;
-    content: '%';
-    left: 35px;
-    top: 3px;
-}
 </style>

From 692e916bd6299c08dfacba5423f6030afeee3e50 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 15 Jun 2023 14:29:58 -0400
Subject: [PATCH 19/32] Style adjustments

---
 .../vue/components/CompositeLayers.vue        | 21 ++++++++-----------
 .../vue/components/HistogramEditor.vue        | 18 ++++++++--------
 2 files changed, 18 insertions(+), 21 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 84133a4a2..247da2b1d 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -204,7 +204,7 @@ export default {
                             @input="toggleEnableAll"
                         >
                     </th>
-                    <th>ALL</th>
+                    <th></th>
                     <th></th>
                     <th style="min-width: 100px;">
                         <div class="auto-range-col">
@@ -235,7 +235,7 @@ export default {
                         class="expand-btn"
                         @click="toggleAllExpanded"
                     >
-                        {{ expandedRows.length === layers.length ? '&#9651;' : '&#9661;'}}
+                        {{ expandedRows.length === layers.length ? '&#708;' : '&#709;'}}
                     </div>
                 </tr>
             </thead>
@@ -244,7 +244,6 @@ export default {
                     v-for="{
                         layerName, index, palette,
                         autoRange, min, max,
-                        defaultMin, defaultMax,
                         framedelta
                     } in Object.values(compositeLayerInfo)"
                     :key="layerName"
@@ -288,11 +287,7 @@ export default {
                         class="expand-btn"
                         @click="() => toggleExpanded(index)"
                     >
-                    {{ (min === undefined && max === undefined) ||
-                       (min === defaultMin && max === defaultMax)
-                        ? expandedRows.includes(index) ? '&#9651;' : '&#9661;'
-                        : expandedRows.includes(index) ? '&#9650;' : '&#9660;'
-                    }}
+                    {{ expandedRows.includes(index) ? '&#708;' : '&#709;'}}
                     </div>
                     <div v-if="expandedRows.includes(index)" class="advanced-section">
                         <histogram-editor
@@ -333,6 +328,7 @@ export default {
     top: 0px;
     background-color: white;
     z-index: 2;
+    border-bottom: 3px solid;
 }
 .auto-range-col {
     display: flex;
@@ -345,8 +341,8 @@ export default {
     width: 45px;
 }
 .table-container {
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto;
+    max-height: 300px;
 }
 .table-container td {
     padding: 0 5px;
@@ -359,8 +355,9 @@ tr {
 }
 .expand-btn {
     position: absolute;
-    right: 0;
-    bottom: 5px;
+    right: 10px;
+    top: 5px;
+    font-size: 30px;
 }
 .advanced-section {
     position: absolute;
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 d6b5e6c20..f04f10d41 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -73,20 +73,20 @@ export default {
             const ctx = this.$refs.canvas.getContext("2d");
             const widthBetweenPoints = width / hist.length
             ctx.clearRect(0, 0, width, height);
-            ctx.lineWidth = 4;
-            ctx.beginPath()
-            ctx.moveTo(0, height)
             for (var i = 0; i < hist.length; i++) {
                 const frequency = hist[i]
-                const pointX = widthBetweenPoints * i
-
-                let pointY = height - (frequency / maxFrequency * height)
+                const x0 = widthBetweenPoints * i
+                const x1 = widthBetweenPoints * (i + 1)
+                let y0 = height - (frequency / maxFrequency * height)
                 if(shortenMaxFrequency) {
-                    pointY = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3)
+                    y0 = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3)
                 }
-                ctx.lineTo(pointX, pointY)
+                const y1 = height
+
+                ctx.rect(x0, y0, (x1 - x0), (y1 - y0))
             }
-            ctx.stroke();
+            ctx.fillStyle = "#444"
+            ctx.fill();
         },
         xPositionToValue(xPosition) {
             const xProportion = (xPosition - this.xRange[0]) / (this.xRange[1] - this.xRange[0])

From 38648d099cef762b121753322bd5b0a9f56032d3 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 12:00:09 -0400
Subject: [PATCH 20/32] UI tweaks

---
 .../web_client/vue/components/CompositeLayers.vue           | 2 +-
 .../web_client/vue/components/HistogramEditor.vue           | 6 +++---
 2 files changed, 4 insertions(+), 4 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 247da2b1d..b89cb004a 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -357,7 +357,7 @@ tr {
     position: absolute;
     right: 10px;
     top: 5px;
-    font-size: 30px;
+    font-size: 20px;
 }
 .advanced-section {
     position: absolute;
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 f04f10d41..7aa058004 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -85,7 +85,7 @@ export default {
 
                 ctx.rect(x0, y0, (x1 - x0), (y1 - y0))
             }
-            ctx.fillStyle = "#444"
+            ctx.fillStyle = "#888"
             ctx.fill();
         },
         xPositionToValue(xPosition) {
@@ -267,7 +267,7 @@ export default {
                     class="draggable"
                     name="updateMin"
                     ref="minHandle"
-                    stroke="#f00"
+                    stroke="#000"
                     stroke-width="4"
                     x1="5" x2="5"
                     y1="0" y2="30"
@@ -281,7 +281,7 @@ export default {
                     class="draggable"
                     name="updateMax"
                     ref="maxHandle"
-                    stroke="#f00"
+                    stroke="#000"
                     stroke-width="4"
                     x1="5" x2="5"
                     y1="0" y2="30"

From 843c7c4399fa8642999e5f718d2a80829a4bc756 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 14:17:57 -0400
Subject: [PATCH 21/32] Move style info out of template

---
 .../vue/components/CompositeLayers.vue        | 51 +++++++++++--------
 .../vue/components/FrameSelector.vue          | 11 ++--
 .../vue/components/HistogramEditor.vue        | 12 +++--
 3 files changed, 46 insertions(+), 28 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 b89cb004a..c7122dbe0 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -206,9 +206,9 @@ export default {
                     </th>
                     <th></th>
                     <th></th>
-                    <th style="min-width: 100px;">
+                    <th>
                         <div class="auto-range-col">
-                            <span style="font-size: 10px;">Auto Range</span>
+                            <span class="small-text">Auto Range</span>
                             <switches
                                 :value="allAutoRange()"
                                 @input="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.02)"
@@ -225,18 +225,15 @@ export default {
                                     :max="50"
                                     :min="0"
                                     :value="autoRangeForAll"
-                                    style="width: 80px"
                                     @input="(e) => updateAllAutoRanges(e.target.value)"
                                 >
                             </span>
                         </div>
+                        <i
+                            :class="expandedRows.length === layers.length ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                            @click="toggleAllExpanded"
+                        />
                     </th>
-                    <div
-                        class="expand-btn"
-                        @click="toggleAllExpanded"
-                    >
-                        {{ expandedRows.length === layers.length ? '&#708;' : '&#709;'}}
-                    </div>
                 </tr>
             </thead>
             <tbody>
@@ -247,9 +244,9 @@ export default {
                         framedelta
                     } in Object.values(compositeLayerInfo)"
                     :key="layerName"
-                    :style="expandedRows.includes(index) ? {height: '75px'} : {}"
+                    :class="expandedRows.includes(index) ? 'tall-row' : ''"
                 >
-                    <td style="width: 10%;">
+                    <td class="enable-col">
                         <input
                             type="checkbox"
                             :value="layerName"
@@ -257,8 +254,8 @@ export default {
                             @change="updateActiveLayers"
                         >
                     </td>
-                    <td  style="width: 40%;">{{ layerName }}</td>
-                    <td :id="layerName+'_picker'" style="width: 25%;">
+                    <td class="name-col">{{ layerName }}</td>
+                    <td :id="layerName+'_picker'" class="color-col">
                     <span
                             class="current-color"
                             :style="{ 'background-color': palette }"
@@ -283,12 +280,10 @@ export default {
                             />
                         </div>
                     </td>
-                    <div
-                        class="expand-btn"
-                        @click="() => toggleExpanded(index)"
-                    >
-                    {{ expandedRows.includes(index) ? '&#708;' : '&#709;'}}
-                    </div>
+                    <i
+                        :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                        @click="toggleAllExpanded"
+                    />
                     <div v-if="expandedRows.includes(index)" class="advanced-section">
                         <histogram-editor
                             :itemId="itemId"
@@ -330,7 +325,23 @@ export default {
     z-index: 2;
     border-bottom: 3px solid;
 }
+.small-text {
+    font-size: 10px;
+}
+.tall-row {
+    height: 75px;
+}
+.enable-col {
+    width: 10%;
+}
+.name-col {
+    width: 40%;
+}
+.color-col {
+    width: 25%;
+}
 .auto-range-col {
+    min-width: 100px;
     display: flex;
     flex-direction: column;
     align-content: space-around;
@@ -357,7 +368,6 @@ tr {
     position: absolute;
     right: 10px;
     top: 5px;
-    font-size: 20px;
 }
 .advanced-section {
     position: absolute;
@@ -372,6 +382,7 @@ tr {
 .percentage-input {
     position: relative;
     margin-top: 5px;
+    width: 80px;
 }
 .percentage-input::after {
     position: absolute;
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 4422bbd63..63895daf2 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -139,8 +139,8 @@ export default Vue.extend({
 
 <template>
     <div class="image-frame-control-box" v-if="loaded">
-        <div id="current_image_frame" style="display: none;">{{ currentFrame }}</div>
-        <div id="current_image_style" style="display: none;">{{ style }}</div>
+        <div id="current_image_frame" class="invisible">{{ currentFrame }}</div>
+        <div id="current_image_style" class="invisible">{{ style }}</div>
         <div>
             <label for="mode">Image control mode: </label>
             <select
@@ -184,7 +184,7 @@ export default Vue.extend({
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.channels"
                 :layerMap="imageMetadata.channelmap"
-                :style="currentModeId === 2 ? {} : {display: 'none'}"
+                :class="currentModeId === 2 ? '' : 'invisible'"
                 @updateStyle="updateStyle"
             />
             <composite-layers
@@ -194,7 +194,7 @@ export default Vue.extend({
                 :currentFrame="currentFrame"
                 :layers="imageMetadata.bands"
                 :layerMap="undefined"
-                :style="currentModeId === 3 ? {} : {display: 'none'}"
+                :class="currentModeId === 3 ? '' : 'invisible'"
                 @updateStyle="updateStyle"
             />
         </div>
@@ -202,6 +202,9 @@ export default Vue.extend({
 </template>
 
 <style scoped>
+.invisible {
+    display: none;
+}
 .image-frame-control-box {
     display: flex;
     flex-direction: column;
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 7aa058004..b5e013f1b 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -218,6 +218,7 @@ export default {
             }
         },
         autoRange() {
+            if (!this.histogram) return
             let newMinPosition = this.currentMin ? this.valueToXPosition(this.currentMin) : this.xRange[0]
             let newMaxPosition = this.currentMax ? this.valueToXPosition(this.currentMax) : this.xRange[1]
             if (this.autoRange) {
@@ -256,10 +257,9 @@ export default {
                 :min="histogram.min"
                 :max="currentMax"
                 :value="currentMin"
-                style="width: 80px"
                 @input="(e) => updateFromInput('updateMin', e.target.value)"
             >
-            <span v-else style="width: 80px"/>
+            <span v-else class="input-space"/>
             <svg ref="svg" class="handles-svg">
                 <text x="5" y="43" class="small">{{ this.vRange[0] }}</text>
                 <rect ref="minExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
@@ -294,7 +294,6 @@ export default {
                 :max="histogram.max"
                 :min="currentMin"
                 :value="currentMax"
-                style="width: 80px"
                 @input="(e) => updateFromInput('updateMax', e.target.value)"
             >
             <span
@@ -306,7 +305,6 @@ export default {
                     :max="50"
                     :min="0"
                     :value="autoRange"
-                    style="width: 80px"
                     @input="(e) => updateFromInput('updateAutoRange', e.target.value)"
                 >
             </span>
@@ -315,6 +313,12 @@ export default {
 </template>
 
 <style scoped>
+input {
+    width: 80px
+}
+.input-space {
+    width: 80px
+}
 .range-editor {
     position: absolute;
     display: flex;

From e2a6bd25267c54fd9be00a9b600972f7f1393b1d Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 14:44:22 -0400
Subject: [PATCH 22/32] Fix channel compositing style

---
 .../web_client/vue/components/FrameSelector.vue        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 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 63895daf2..0a76c4f7a 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
     },
     methods: {
         updateStyle(style) {
-            this.style = style
+            this.style = Object.assign(this.style, style)
             this.update()
         },
         updateAxisSlider(event) {
@@ -53,7 +53,7 @@ export default Vue.extend({
                 }
             });
             this.currentFrame = frame
-            let style = this.currentModeId > 1 ? this.style : undefined
+            let style = this.currentModeId > 1 ? this.style[this.currentModeId] : undefined
             this.frameUpdate(frame, style);
         },
         fillMetadata() {
@@ -176,7 +176,7 @@ export default Vue.extend({
 
         <!-- Use composite layers component twice so state for each one is maintained while invisible -->
         <!-- Use styling instead of v-if to make each invisible so that the components are not unmounted -->
-        <div  class="image-frame-simple-control">
+        <div class="image-frame-simple-control">
             <composite-layers
                 key="channels"
                 v-if="imageMetadata.channels"
@@ -185,7 +185,7 @@ export default Vue.extend({
                 :layers="imageMetadata.channels"
                 :layerMap="imageMetadata.channelmap"
                 :class="currentModeId === 2 ? '' : 'invisible'"
-                @updateStyle="updateStyle"
+                @updateStyle="(style) => updateStyle({2: style})"
             />
             <composite-layers
                 key="bands"
@@ -195,7 +195,7 @@ export default Vue.extend({
                 :layers="imageMetadata.bands"
                 :layerMap="undefined"
                 :class="currentModeId === 3 ? '' : 'invisible'"
-                @updateStyle="updateStyle"
+                @updateStyle="(style) => updateStyle({3: style})"
             />
         </div>
     </div>

From 6b86a8e3e82d718028217d2b6a0c039dafa92cf3 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 14:46:42 -0400
Subject: [PATCH 23/32] Fix single row expand icons

---
 .../web_client/vue/components/CompositeLayers.vue         | 8 ++++----
 1 file changed, 4 insertions(+), 4 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 c7122dbe0..6450b50ab 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -279,11 +279,11 @@ export default {
                                 color="blue"
                             />
                         </div>
+                        <i
+                            :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
+                            @click="() => toggleExpanded(index)"
+                        />
                     </td>
-                    <i
-                        :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
-                        @click="toggleAllExpanded"
-                    />
                     <div v-if="expandedRows.includes(index)" class="advanced-section">
                         <histogram-editor
                             :itemId="itemId"

From f23ba0782125f70af83cd6a72ecde6644560e3a5 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 15:12:01 -0400
Subject: [PATCH 24/32] Set default auto range to 0.2 and don't allow auto
 range value > 50

---
 .../vue/components/CompositeLayers.vue           |  4 ++--
 .../vue/components/HistogramEditor.vue           | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 6 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 6450b50ab..b442489e9 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -211,7 +211,7 @@ export default {
                             <span class="small-text">Auto Range</span>
                             <switches
                                 :value="allAutoRange()"
-                                @input="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.02)"
+                                @input="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
                                 :emit-on-mount="false"
                                 theme="bulma"
                                 color="blue"
@@ -273,7 +273,7 @@ export default {
                         <div class="auto-range-col">
                             <switches
                                 :value="autoRange"
-                                @input="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.02)"
+                                @input="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.2)"
                                 :emit-on-mount="false"
                                 theme="bulma"
                                 color="blue"
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 b5e013f1b..45eec0dcf 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -105,10 +105,18 @@ export default {
             let moveY = false;
             const handleName = selected.getAttribute("name")
             const newValue = this.xPositionToValue(newLocation.x)
-            if (handleName === 'updateMin' && newValue >= this.currentMax) {
-                moveX = false;
-            } else if (handleName === 'updateMax' && newValue <= this.currentMin) {
-                moveX = false;
+             if (handleName === 'updateMin') {
+                if (!this.autoRange && newValue >= this.currentMax) {
+                    moveX = false;
+                } else if (this.autoRange && this.toDistributionPercentage(newValue) >= 50) {
+                    moveX = false;
+                }
+            } else if (handleName === 'updateMax') {
+                if (!this.autoRange && newValue <= this.currentMin) {
+                    moveX = false;
+                } else if (this.autoRange && this.toDistributionPercentage(newValue) <= 50) {
+                    moveX = false;
+                }
             }
 
             return [moveX, moveY]

From 94b80e618f4bd88ec31f75e660efdba7c67beab6 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 15:15:16 -0400
Subject: [PATCH 25/32] 1-indexed bands and channels when unnamed

---
 .../web_client/vue/components/FrameSelector.vue               | 4 ++--
 1 file changed, 2 insertions(+), 2 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 0a76c4f7a..c5c47f220 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -73,7 +73,7 @@ export default Vue.extend({
             ) {
                 this.imageMetadata.channelmap = Object.fromEntries(
                     [...Array(this.imageMetadata.IndexRange['IndexC']).keys()].map(
-                        (i) => [`Channel ${i}`, i]
+                        (i) => [`Channel ${i + 1}`, i]
                     )
                 )
                 this.imageMetadata.channels = Object.keys(this.imageMetadata.channelmap)
@@ -84,7 +84,7 @@ export default Vue.extend({
                 this.imageMetadata.bands = Object.values(this.imageMetadata.bands).map(
                     (b, i) => {
                         if (!b.interpretation) {
-                            return `Band ${i}`
+                            return `Band ${i + 1}`
                         } else {
                             return b.interpretation.split("=")[0]
                         }

From d5b27c419ffaedc68ebeb0b575e32df175607e60 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 20 Jun 2023 21:13:31 -0400
Subject: [PATCH 26/32] Replace vue-switches with basic css

---
 .../web_client/package.json                   |  1 -
 .../vue/components/CompositeLayers.vue        | 85 ++++++++++++++-----
 .../vue/components/HistogramEditor.vue        |  3 -
 3 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/girder/girder_large_image/web_client/package.json b/girder/girder_large_image/web_client/package.json
index 02788119f..f22866988 100644
--- a/girder/girder_large_image/web_client/package.json
+++ b/girder/girder_large_image/web_client/package.json
@@ -26,7 +26,6 @@
         "vue": "~2.6.14",
         "vue-color": "^2.8.1",
         "vue-loader": "~15.9.8",
-        "vue-switches": "^2.0.1",
         "vue-template-compiler": "~2.6.14",
         "webpack": "^3",
         "yaml": "^2.1.1"
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 b442489e9..cc9956c94 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -1,7 +1,6 @@
 <script>
 import { restRequest } from '@girder/core/rest';
 import { Chrome } from 'vue-color';
-import Switches from 'vue-switches';
 import { CHANNEL_COLORS, OTHER_COLORS } from '../utils/colors'
 import HistogramEditor from './HistogramEditor.vue';
 
@@ -10,7 +9,6 @@ export default {
     emits: ['updateStyle'],
     components: {
         'color-picker': Chrome,
-        Switches,
         HistogramEditor,
     },
     data() {
@@ -208,14 +206,15 @@ export default {
                     <th></th>
                     <th>
                         <div class="auto-range-col">
-                            <span class="small-text">Auto Range</span>
-                            <switches
-                                :value="allAutoRange()"
-                                @input="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
-                                :emit-on-mount="false"
-                                theme="bulma"
-                                color="blue"
-                            />
+                            <div class="auto-range-label">
+                                <span class="small-text">Auto Range</span>
+                                <label class="switch">
+                                    <span
+                                        :class="allAutoRange() ? 'slider checked' : 'slider'"
+                                        @click="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
+                                    />
+                                </label>
+                            </div>
                             <span
                                 v-if="allAutoRange()"
                                 class="percentage-input"
@@ -271,13 +270,12 @@ export default {
                     </td>
                     <td>
                         <div class="auto-range-col">
-                            <switches
-                                :value="autoRange"
-                                @input="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.2)"
-                                :emit-on-mount="false"
-                                theme="bulma"
-                                color="blue"
-                            />
+                            <label class="switch">
+                                <span
+                                    :class="autoRange ? 'slider checked' : 'slider'"
+                                    @click="() => updateLayerAutoRange(layerName, autoRange ? undefined : 0.2)"
+                                />
+                            </label>
                         </div>
                         <i
                             :class="expandedRows.includes(index) ? 'expand-btn icon-up-open' : 'expand-btn icon-down-open'"
@@ -343,13 +341,55 @@ export default {
 .auto-range-col {
     min-width: 100px;
     display: flex;
-    flex-direction: column;
+    column-gap: 10px;
     align-content: space-around;
     padding: 0;
 }
-.vue-switcher {
-    margin: 5px 0px 0px 0px;
-    width: 45px;
+.auto-range-label {
+    display: flex;
+    flex-direction: column;
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+  height: 20px;
+  margin-top: 5px;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+}
+.slider.checked {
+  background-color: #2196F3;
+}
+.slider:focus{
+  box-shadow: 0 0 1px #2196F3;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+.slider.checked:before {
+  -webkit-transform: translateX(22px);
+  -ms-transform: translateX(22px);
+  transform: translateX(22px);
 }
 .table-container {
     overflow: auto;
@@ -379,6 +419,9 @@ tr {
 </style>
 
 <style>
+input {
+    width: 80px
+}
 .percentage-input {
     position: relative;
     margin-top: 5px;
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 45eec0dcf..cb12cfb82 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -321,9 +321,6 @@ export default {
 </template>
 
 <style scoped>
-input {
-    width: 80px
-}
 .input-space {
     width: 80px
 }

From 0799c52cf27bf2a1595217fd5be5107b5b906720 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 22 Jun 2023 08:44:29 -0400
Subject: [PATCH 27/32] Fix color picker positioning

---
 .../web_client/vue/components/CompositeLayers.vue            | 5 ++---
 1 file changed, 2 insertions(+), 3 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 cc9956c94..99a73a08d 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -315,6 +315,7 @@ export default {
     position: absolute;
     z-index: 100;
     margin-left: 50px;
+    bottom: 10px;
 }
 .table-header {
     position: sticky;
@@ -393,6 +394,7 @@ export default {
 }
 .table-container {
     overflow: auto;
+    position: relative;
     max-height: 300px;
 }
 .table-container td {
@@ -401,9 +403,6 @@ export default {
 .table-container input {
     max-width: 80px;
 }
-tr {
-    position: relative;
-}
 .expand-btn {
     position: absolute;
     right: 10px;

From 35601fc8de52546db289484ca68a8588c229ff63 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 22 Jun 2023 08:55:35 -0400
Subject: [PATCH 28/32] Make scrollbar always visible

---
 .../web_client/vue/components/CompositeLayers.vue        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 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 99a73a08d..ca235be53 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -268,8 +268,8 @@ export default {
                             @input="(swatch) => {updateLayerColor(layerName, swatch)}"
                         />
                     </td>
-                    <td>
-                        <div class="auto-range-col">
+                    <td class="auto-range-col">
+                        <div class="auto-range-toggle">
                             <label class="switch">
                                 <span
                                     :class="autoRange ? 'slider checked' : 'slider'"
@@ -340,6 +340,9 @@ export default {
     width: 25%;
 }
 .auto-range-col {
+    position: relative;
+}
+.auto-range-toggle {
     min-width: 100px;
     display: flex;
     column-gap: 10px;
@@ -393,7 +396,7 @@ export default {
   transform: translateX(22px);
 }
 .table-container {
-    overflow: auto;
+    overflow: scroll;
     position: relative;
     max-height: 300px;
 }

From 4a466178197dcef9454ebf404db70e21bd0e8412 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 22 Jun 2023 10:13:46 -0400
Subject: [PATCH 29/32] Fix undefined value behavior when min or max input
 cleared

---
 .../vue/components/HistogramEditor.vue          | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 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 cb12cfb82..3e1fa12c4 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -170,7 +170,10 @@ export default {
             return numSamples / this.histogram.samples * 100
         },
         updateFromInput(funcName, value) {
-            const roundedValue = parseFloat(parseFloat(value).toFixed(2))
+            let roundedValue = undefined;
+            if (value) {
+                roundedValue = parseFloat(parseFloat(value).toFixed(2))
+            }
             this.$emit(funcName, roundedValue)
         },
     },
@@ -201,7 +204,10 @@ export default {
         },
         currentMin() {
             const currentPosition = parseFloat(this.$refs.minHandle.getAttribute('x1'))
-            const newPosition = this.valueToXPosition(this.currentMin)
+            let newPosition = this.xRange[0]
+            if (this.currentMin) {
+                newPosition = this.valueToXPosition(this.currentMin)
+            }
             if (newPosition !== currentPosition) {
                 this.setHandlePosition(
                     this.$refs.minHandle,
@@ -214,7 +220,10 @@ export default {
         },
         currentMax() {
             const currentPosition = parseFloat(this.$refs.maxHandle.getAttribute('x1'))
-            const newPosition = this.valueToXPosition(this.currentMax)
+            let newPosition = this.xRange[1]
+            if(this.currentMax) {
+                newPosition = this.valueToXPosition(this.currentMax)
+            }
             if (newPosition !== currentPosition) {
                 this.setHandlePosition(
                     this.$refs.maxHandle,
@@ -281,7 +290,7 @@ export default {
                     y1="0" y2="30"
                 />
                 <text
-                    :x="this.xRange[1] - (`${this.vRange[1]}`.length * 6)"
+                    :x="this.xRange[1] && this.vRange[1] ? this.xRange[1] - (`${this.vRange[1]}`.length * 6): 0"
                     y="43" class="small"
                 >{{ this.vRange[1] }}</text>
                 <rect ref="maxExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>

From f2f544a9fff4295393dffb0cc1dd74da01da0808 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 22 Jun 2023 10:26:12 -0400
Subject: [PATCH 30/32] Use input-80 class for 80px width

---
 .../web_client/vue/components/CompositeLayers.vue         | 5 ++++-
 .../web_client/vue/components/HistogramEditor.vue         | 8 ++++----
 2 files changed, 8 insertions(+), 5 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 ca235be53..0968f8c33 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -198,6 +198,7 @@ export default {
                     <th>
                         <input
                             type="checkbox"
+                            class="input-80"
                             :checked="enabledLayers === layers"
                             @input="toggleEnableAll"
                         >
@@ -221,6 +222,7 @@ export default {
                             >
                                 <input
                                     type="number"
+                                    class="input-80"
                                     :max="50"
                                     :min="0"
                                     :value="autoRangeForAll"
@@ -248,6 +250,7 @@ export default {
                     <td class="enable-col">
                         <input
                             type="checkbox"
+                            class="input-80"
                             :value="layerName"
                             v-model="enabledLayers"
                             @change="updateActiveLayers"
@@ -421,7 +424,7 @@ export default {
 </style>
 
 <style>
-input {
+.input-80 {
     width: 80px
 }
 .percentage-input {
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 3e1fa12c4..77a1f3309 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -271,12 +271,13 @@ export default {
             <input
                 v-if="autoRange === undefined"
                 type="number"
+                class="input-80"
                 :min="histogram.min"
                 :max="currentMax"
                 :value="currentMin"
                 @input="(e) => updateFromInput('updateMin', e.target.value)"
             >
-            <span v-else class="input-space"/>
+            <span v-else class="input-80"/>
             <svg ref="svg" class="handles-svg">
                 <text x="5" y="43" class="small">{{ this.vRange[0] }}</text>
                 <rect ref="minExclusionBox" x="5" y="0" width="0" height="30" opacity="0.2"/>
@@ -308,6 +309,7 @@ export default {
             <input
                 v-if="autoRange === undefined"
                 type="number"
+                class="input-80"
                 :max="histogram.max"
                 :min="currentMin"
                 :value="currentMax"
@@ -319,6 +321,7 @@ export default {
             >
                 <input
                     type="number"
+                    class="input-80"
                     :max="50"
                     :min="0"
                     :value="autoRange"
@@ -330,9 +333,6 @@ export default {
 </template>
 
 <style scoped>
-.input-space {
-    width: 80px
-}
 .range-editor {
     position: absolute;
     display: flex;

From 448ef26b36a59a505ec8006faea88f74e1dfabbe Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 22 Jun 2023 10:50:28 -0400
Subject: [PATCH 31/32] Fix iterative addition to histogram frame

---
 .../web_client/vue/components/CompositeLayers.vue          | 1 +
 .../web_client/vue/components/HistogramEditor.vue          | 7 +++++--
 2 files changed, 6 insertions(+), 2 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 0968f8c33..641c52d57 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -289,6 +289,7 @@ export default {
                         <histogram-editor
                             :itemId="itemId"
                             :layerIndex="index"
+                            :currentFrame="currentFrame"
                             :currentFrameHistogram="currentFrameHistogram"
                             :histogramParams="histogramParams"
                             :framedelta="framedelta"
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 77a1f3309..71f8dcd13 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -7,6 +7,7 @@ export default {
     props: [
         'itemId',
         'layerIndex',
+        'currentFrame',
         'currentFrameHistogram',
         'histogramParams',
         'framedelta',
@@ -30,7 +31,7 @@ export default {
                     url: 'item/' + this.itemId + '/tiles/histogram',
                     data: Object.assign(
                         this.histogramParams,
-                        {frame: this.histogramParams.frame + this.framedelta}
+                        {frame: this.currentFrame + this.framedelta}
                     )
                 }).then((response) => {
                     if (response.length < 3) {
@@ -40,7 +41,9 @@ export default {
                     }
                 })
             } else {
-                this.histogram = this.currentFrameHistogram[this.layerIndex]
+                this.histogram = this.layerIndex < this.currentFrameHistogram.length
+                    ? this.currentFrameHistogram[this.layerIndex]
+                    : this.currentFrameHistogram[0]
             }
         },
         simplifyHistogram(hist) {

From 3e2fd3a80c275d427dbeff123c96f6a0d2c8e740 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 22 Jun 2023 13:09:27 -0400
Subject: [PATCH 32/32] Make one color picker component relative to sticky
 table header

---
 .../vue/components/CompositeLayers.vue        | 43 +++++++++++--------
 1 file changed, 25 insertions(+), 18 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 641c52d57..0efda3797 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -15,7 +15,6 @@ export default {
         return {
             enabledLayers: this.layers,
             colorPickerShown: undefined,
-            currentColorPickerRef: undefined,
             currentFrameHistogram: undefined,
             compositeLayerInfo: {},
             expandedRows: [],
@@ -92,11 +91,8 @@ export default {
             this.colorPickerShown = layer
             if (this.colorPickerShown === undefined) {
                 document.removeEventListener('click', this.documentClick);
-                // Only update style when picker is closed
-                this.updateStyle()
             }
             else {
-                this.currentColorPickerRef = document.getElementById(layer+'_picker')
                 document.addEventListener('click', this.documentClick);
             }
         },
@@ -139,13 +135,19 @@ export default {
             return Object.values(this.compositeLayerInfo).every(({ autoRange }) => autoRange !== undefined)
         },
         documentClick(e) {
-            const picker = this.currentColorPickerRef;
-            if (picker && picker !== e.target && !picker.contains(e.target)) {
+            const picker = document.getElementById('color_picker');
+            if (
+                picker
+                && picker !== e.target
+                && !picker.contains(e.target)
+                && !e.target.classList.contains('current-color')
+            ) {
                 this.toggleColorPicker(undefined);
             }
         },
         updateLayerColor(layer, swatch) {
             this.compositeLayerInfo[layer].palette = swatch.hex;
+            this.updateStyle();
         },
         updateLayerMin(layer, newVal) {
             const newMinVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
@@ -236,6 +238,15 @@ export default {
                         />
                     </th>
                 </tr>
+                <!-- color picker should display relative to sticky table head -->
+                <color-picker
+                    v-if="colorPickerShown"
+                    id="color_picker"
+                    class="picker-offset"
+                    :disableAlpha="true"
+                    :value="Object.values(compositeLayerInfo).find((({layerName}) => layerName === colorPickerShown)).palette"
+                    @input="(swatch) => {updateLayerColor(colorPickerShown, swatch)}"
+                />
             </thead>
             <tbody>
                 <tr
@@ -257,19 +268,12 @@ export default {
                         >
                     </td>
                     <td class="name-col">{{ layerName }}</td>
-                    <td :id="layerName+'_picker'" class="color-col">
-                    <span
+                    <td class="color-col">
+                        <span
                             class="current-color"
                             :style="{ 'background-color': palette }"
                             @click="() => toggleColorPicker(layerName)"
                         />
-                        <color-picker
-                            v-if="colorPickerShown === layerName"
-                            class="picker-offset"
-                            :disableAlpha="true"
-                            :value="palette"
-                            @input="(swatch) => {updateLayerColor(layerName, swatch)}"
-                        />
                     </td>
                     <td class="auto-range-col">
                         <div class="auto-range-toggle">
@@ -318,8 +322,7 @@ export default {
 .picker-offset {
     position: absolute;
     z-index: 100;
-    margin-left: 50px;
-    bottom: 10px;
+    right: 15%
 }
 .table-header {
     position: sticky;
@@ -400,7 +403,8 @@ export default {
   transform: translateX(22px);
 }
 .table-container {
-    overflow: scroll;
+    overflow-y: scroll;
+    overflow-x: auto;
     position: relative;
     max-height: 300px;
 }
@@ -410,6 +414,9 @@ export default {
 .table-container input {
     max-width: 80px;
 }
+.table {
+    border-collapse: separate;
+}
 .expand-btn {
     position: absolute;
     right: 10px;