diff --git a/girder/girder_large_image/web_client/package.json b/girder/girder_large_image/web_client/package.json
index f22866988..d9a20b0df 100644
--- a/girder/girder_large_image/web_client/package.json
+++ b/girder/girder_large_image/web_client/package.json
@@ -37,7 +37,18 @@
         "webpack": "webpack.helper"
     },
     "eslintConfig": {
-        "extends": "@girder",
+        "extends": [
+            "@girder",
+            "plugin:vue/recommended"
+        ],
+        "overrides": [
+            {
+                "files": [
+                    "*.js",
+                    "*.vue"
+                ]
+            }
+        ],
         "rules": {
             "for-direction": "error",
             "getter-return": "error",
@@ -54,7 +65,8 @@
             "import/exports-last": "error",
             "promise/no-native": "error",
             "promise/no-return-in-finally": "error",
-            "promise/no-return-wrap": "error"
+            "promise/no-return-wrap": "error",
+            "vue/require-prop-types": "off"
         },
         "root": true
     },
@@ -75,7 +87,8 @@
     "stylusSupremacy.alwaysUseZeroWithoutUnit": true,
     "stylusSupremacy.reduceMarginAndPaddingValues": true,
     "devDependencies": {
-        "@girder/eslint-config": "^3.0.0-rc1",
+        "@girder/eslint-config": "*",
+        "@girder/pug-lint-config": "*",
         "eslint": "^8.20.0",
         "eslint-config-semistandard": "^17.0.0",
         "eslint-config-standard": "^17.0.0",
@@ -83,12 +96,12 @@
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-n": "^15.2.4",
         "eslint-plugin-promise": "^6.0.0",
-        "@girder/pug-lint-config": "^3.0.0-rc1",
+        "eslint-plugin-vue": "~9.14.0",
         "pug-lint": "^2.6.0",
         "stylus-supremacy": "^2.17.5"
     },
     "scripts": {
         "lint": "eslint --cache . && eslint --no-eslintrc -c ./package.json --cache ../../test_girder/web_client_specs && pug-lint . && stylus-supremacy format --compare ./**/*.styl --options package.json",
-        "format": "eslint --cache --fix . && eslint --no-eslintrc -c ./package.json --cache --fix ../../test_girder/web_client_specs && eslint --cache --fix . && stylus-supremacy format ./**/*.styl --replace --options package.json"
+        "format": "eslint --cache --fix . && eslint --no-eslintrc -c ./package.json --cache --fix ../../test_girder/web_client_specs && stylus-supremacy format ./**/*.styl --replace --options package.json"
     }
 }
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 24cc18c8e..268e6a4f0 100644
--- a/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
+++ b/girder/girder_large_image/web_client/vue/components/CompositeLayers.vue
@@ -1,16 +1,17 @@
 <script>
-import { restRequest } from '@girder/core/rest';
-import { Chrome } from 'vue-color';
-import { CHANNEL_COLORS, OTHER_COLORS } from '../utils/colors'
+import {restRequest} from '@girder/core/rest';
+import {Chrome} from 'vue-color';
+
+import {CHANNEL_COLORS, OTHER_COLORS} from '../utils/colors';
 import HistogramEditor from './HistogramEditor.vue';
 
 export default {
-    props: ['itemId', 'currentFrame', 'currentStyle', 'layers', 'layerMap', 'active'],
-    emits: ['updateStyle'],
     components: {
         'color-picker': Chrome,
-        HistogramEditor,
+        HistogramEditor
     },
+    props: ['itemId', 'currentFrame', 'currentStyle', 'layers', 'layerMap', 'active'],
+    emits: ['updateStyle'],
     data() {
         return {
             enabledLayers: [],
@@ -26,193 +27,236 @@ export default {
                 bins: 512,
                 resample: false,
                 style: '{}',
-                roundRange: true,
+                roundRange: true
             },
-            showKeyboardShortcuts: false,
+            showKeyboardShortcuts: false
+        };
+    },
+    watch: {
+        active() {
+            if (this.active) {
+                document.addEventListener('keydown', this.keyHandler);
+            } else {
+                document.removeEventListener('keydown', this.keyHandler);
+            }
+        },
+        currentStyle() {
+            if (this.currentStyle.preset) {
+                this.initializeStateFromStyle();
+            }
+        }
+    },
+    mounted() {
+        this.initializeLayerInfo();
+        if (this.currentStyle) {
+            this.initializeStateFromStyle();
+        } else {
+            if (this.layerMap) {
+                // channels all enabled by default
+                this.enabledLayers = this.layers;
+            } else {
+                // only some bands enabled by default
+                ['red', 'green', 'blue', 'gray', 'grey'].forEach((bandColor) => {
+                    if (this.layers.includes(bandColor)) {
+                        this.enabledLayers.push(bandColor);
+                    }
+                });
+                // if no known band colors exist, enable the first three
+                if (this.enabledLayers.length === 0) {
+                    this.enabledLayers = this.layers.slice(0, 3);
+                }
+            }
+            this.updateActiveLayers();
+            this.updateStyle();
+        }
+        if (this.active) {
+            document.addEventListener('keydown', this.keyHandler);
         }
     },
     methods: {
         keyHandler(e) {
-            let numericKey = parseFloat(e.key)
+            let numericKey = parseFloat(e.key);
             if (e.ctrlKey && !isNaN(numericKey)) {
-                e.preventDefault()
+                e.preventDefault();
                 if (numericKey === 0) {
-                    numericKey += 10
+                    numericKey += 10;
                 }
                 if (e.altKey) {
-                    numericKey += 10
+                    numericKey += 10;
                 }
-                const layerIndex = numericKey - 1
+                const layerIndex = numericKey - 1;
                 if (layerIndex < this.layers.length) {
-                    const targetLayer = this.layers[layerIndex]
+                    const targetLayer = this.layers[layerIndex];
                     if (this.compositeLayerInfo[targetLayer].enabled) {
-                        this.enabledLayers = this.enabledLayers.filter((v) => v !== targetLayer)
+                        this.enabledLayers = this.enabledLayers.filter((v) => v !== targetLayer);
                     } else {
-                        this.enabledLayers.push(targetLayer)
+                        this.enabledLayers.push(targetLayer);
                     }
-                    this.updateActiveLayers()
+                    this.updateActiveLayers();
                 }
             }
         },
         initializeLayerInfo() {
-            const usedColors = []
-            this.compositeLayerInfo = {}
+            const usedColors = [];
+            this.compositeLayerInfo = {};
             this.layers.forEach((layerName, i) => {
                 this.compositeLayerInfo[layerName] = {
                     layerName,
                     index: i,
                     framedelta: this.layerMap ? this.layerMap[layerName] : undefined,
-                    band: this.layerMap ? undefined : i + 1,  // expected 1-based index
+                    band: this.layerMap ? undefined : i + 1, // expected 1-based index
                     enabled: true,
                     min: undefined,
                     max: undefined,
                     autoRange: undefined
-                }
-            })
+                };
+            });
             // Assign colors
             this.layers.forEach((layerName) => {
                 if (!this.compositeLayerInfo[layerName].palette) {
                     // Search for case-insensitive regex match among known channel-colors
                     Object.entries(CHANNEL_COLORS).forEach(([channelPattern, color]) => {
                         if (layerName.match(new RegExp(channelPattern, 'i')) && !usedColors.includes(color)) {
-                            this.compositeLayerInfo[layerName].palette = color
-                            usedColors.push(color)
+                            this.compositeLayerInfo[layerName].palette = color;
+                            usedColors.push(color);
                         }
-                    })
-
+                    });
                 }
-            })
+            });
             this.layers.forEach((layerName) => {
                 if (!this.compositeLayerInfo[layerName].palette) {
                     let chosenColor;
                     const unusedColors = OTHER_COLORS.filter(
                         (color) => !usedColors.includes(color)
-                    )
+                    );
                     if (unusedColors.length > 0) {
-                        chosenColor = unusedColors[0]
+                        chosenColor = unusedColors[0];
                     } else {
                         chosenColor = OTHER_COLORS[Math.floor(Math.random() * OTHER_COLORS.length)];
                     }
-                    this.compositeLayerInfo[layerName].palette = chosenColor
-                    usedColors.push(chosenColor)
+                    this.compositeLayerInfo[layerName].palette = chosenColor;
+                    usedColors.push(chosenColor);
                 }
-            })
-            this.fetchCurrentFrameHistogram()
+            });
+            this.fetchCurrentFrameHistogram();
         },
         initializeStateFromStyle() {
-            this.enabledLayers = []
+            this.enabledLayers = [];
             this.layers.forEach((layer) => {
-                const layerInfo = this.compositeLayerInfo[layer]
+                const layerInfo = this.compositeLayerInfo[layer];
                 const currentLayerStyle = this.currentStyle.bands.find(
-                    (s) => s.framedelta === layerInfo.framedelta
-                        && s.band === layerInfo.band
-                )
+                    (s) => s.framedelta === layerInfo.framedelta &&
+                        s.band === layerInfo.band
+                );
                 if (currentLayerStyle) {
-                    this.enabledLayers.push(layer)
+                    this.enabledLayers.push(layer);
                     this.compositeLayerInfo[layer].enabled = true;
                     this.compositeLayerInfo[layer].palette = currentLayerStyle.palette;
+                    this.compositeLayerInfo[layer].min = currentLayerStyle.min;
+                    this.compositeLayerInfo[layer].max = currentLayerStyle.max;
                     if (
-                        currentLayerStyle.min && currentLayerStyle.max
-                        && currentLayerStyle.min.toString().includes("min:")
-                        && currentLayerStyle.max.toString().includes("max:")
+                        currentLayerStyle.min && currentLayerStyle.max &&
+                        currentLayerStyle.min.toString().includes('min:') &&
+                        currentLayerStyle.max.toString().includes('max:')
                     ) {
                         this.compositeLayerInfo[layer].autoRange = parseFloat(
-                            currentLayerStyle.min.toString().replace("min:", '')
-                        ) * 100
-                        this.compositeLayerInfo[layer].min = undefined
-                        this.compositeLayerInfo[layer].max = undefined
+                            currentLayerStyle.min.toString().replace('min:', '')
+                        ) * 100;
+                        this.compositeLayerInfo[layer].min = undefined;
+                        this.compositeLayerInfo[layer].max = undefined;
                     } else {
-                        this.compositeLayerInfo[layer].autoRange = undefined
+                        this.compositeLayerInfo[layer].autoRange = undefined;
                     }
-                }
-                else {
+                } else {
                     this.compositeLayerInfo[layer].enabled = false;
                     this.compositeLayerInfo[layer].autoRange = undefined;
                     this.compositeLayerInfo[layer].min = undefined;
                     this.compositeLayerInfo[layer].max = undefined;
                 }
-            })
+            });
 
             const autoRanges = Object.entries(this.compositeLayerInfo)
                 .filter(([index, info]) => info.enabled)
-                .map(([index, info]) => info.autoRange)
+                .map(([index, info]) => info.autoRange);
             if (autoRanges.every((v) => v === autoRanges[0])) {
-                this.autoRangeForAll = autoRanges[0]
+                this.autoRangeForAll = autoRanges[0];
             } else {
-                this.autoRangeForAll = undefined
+                this.autoRangeForAll = undefined;
             }
         },
         fetchCurrentFrameHistogram() {
             restRequest({
                 type: 'GET',
                 url: 'item/' + this.itemId + '/tiles/histogram',
-                data: this.histogramParams,
+                data: this.histogramParams
             }).then((response) => {
-                this.currentFrameHistogram = response
+                this.currentFrameHistogram = response;
+                return undefined;
             });
         },
         toggleEnableAll() {
             if (!this.layers.every((l) => this.enabledLayers.includes(l))) {
-                this.enabledLayers = this.layers
+                this.enabledLayers = this.layers;
             } else {
-                this.enabledLayers = []
+                this.enabledLayers = [];
             }
-            this.updateActiveLayers()
+            this.updateActiveLayers();
         },
         toggleColorPicker(layer) {
-            this.colorPickerShown = layer
+            this.colorPickerShown = layer;
             if (this.colorPickerShown === undefined) {
                 document.removeEventListener('click', this.documentClick);
-            }
-            else {
+            } else {
                 document.addEventListener('click', this.documentClick);
             }
         },
         toggleExpanded(index) {
             if (this.expandedRows.includes(index)) {
-                this.expandedRows = this.expandedRows.filter((v) => v !== index)
+                this.expandedRows = this.expandedRows.filter((v) => v !== index);
             } else {
-                this.expandedRows = [...this.expandedRows, index]
+                this.expandedRows = [...this.expandedRows, index];
             }
         },
         toggleAllExpanded() {
             if (this.expandedRows.length === this.layers.length) {
-                this.expandedRows = []
+                this.expandedRows = [];
             } else {
-                this.expandedRows = Object.values(this.compositeLayerInfo).map(({index}) => index)
+                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 }
-                )}
-            )
+                {
+                    [layer]: Object.assign(
+                        {}, this.compositeLayerInfo[layer], {autoRange: value}
+                    )
+                }
+            );
             this.updateStyle();
         },
         updateAllAutoRanges(value) {
-            this.autoRangeForAll = value
+            this.autoRangeForAll = value;
             this.compositeLayerInfo = Object.fromEntries(
                 Object.entries(this.compositeLayerInfo).map(([layerName, layerInfo]) => {
                     return [
                         layerName,
-                        Object.assign({}, layerInfo, { autoRange: value })
-                    ]
+                        Object.assign({}, layerInfo, {autoRange: value})
+                    ];
                 })
-            )
+            );
             this.updateStyle();
         },
         allAutoRange() {
-            return Object.values(this.compositeLayerInfo).every(({ autoRange }) => autoRange !== undefined)
+            return Object.values(this.compositeLayerInfo).every(({autoRange}) => autoRange !== undefined);
         },
         documentClick(e) {
             const picker = document.getElementById('color_picker');
             if (
-                picker
-                && picker !== e.target
-                && !picker.contains(e.target)
-                && !e.target.classList.contains('current-color')
+                picker &&
+                picker !== e.target &&
+                !picker.contains(e.target) &&
+                !e.target.classList.contains('current-color')
             ) {
                 this.toggleColorPicker(undefined);
             }
@@ -224,227 +268,199 @@ export default {
         updateLayerMin(layer, newVal) {
             const newMinVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
             this.compositeLayerInfo[layer].min = newMinVal;
-            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
+            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo); // for reactivity
             this.updateStyle();
         },
         updateLayerMax(layer, newVal) {
             const newMaxVal = Number.isFinite(newVal) ? parseFloat(newVal) : undefined;
             this.compositeLayerInfo[layer].max = newMaxVal;
-            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo)  // for reactivity
+            this.compositeLayerInfo = Object.assign({}, this.compositeLayerInfo); // for reactivity
             this.updateStyle();
         },
         updateActiveLayers() {
             this.layers.forEach((layer) => {
                 this.compositeLayerInfo[layer].enabled = this.enabledLayers.includes(layer);
-            })
+            });
             this.updateStyle();
         },
         updateStyle() {
             const activeLayers = Object.values(
                 this.compositeLayerInfo
             ).filter((layer) => layer.enabled);
-            const styleArray = []
+            const styleArray = [];
             activeLayers.forEach((layer) => {
                 const styleEntry = {
                     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,
-                }
+                    band: layer.band
+                };
                 styleArray.push(styleEntry);
             });
             this.$emit('updateStyle', {bands: styleArray});
-        },
-    },
-    mounted() {
-        this.initializeLayerInfo()
-        if (this.currentStyle) {
-            this.initializeStateFromStyle()
-        } else {
-            if (this.layerMap) {
-                // channels all enabled by default
-                this.enabledLayers = this.layers
-            } else {
-                // only some bands enabled by default
-                ['red', 'green', 'blue', 'gray', 'grey'].forEach((bandColor) => {
-                    if (this.layers.includes(bandColor)) {
-                        this.enabledLayers.push(bandColor)
-                    }
-                })
-                // if no known band colors exist, enable the first three
-                if (this.enabledLayers.length === 0) {
-                    this.enabledLayers = this.layers.slice(0, 3)
-                }
-            }
-            this.updateActiveLayers()
-            this.updateStyle()
-        }
-        if (this.active) {
-            document.addEventListener('keydown', this.keyHandler)
-        }
-    },
-    watch: {
-        active() {
-            if (this.active) {
-                document.addEventListener('keydown', this.keyHandler)
-            } else {
-                document.removeEventListener('keydown', this.keyHandler)
-            }
-        },
-        currentStyle() {
-            if(this.currentStyle.preset) {
-                this.initializeStateFromStyle()
-            }
         }
     }
-}
+};
 </script>
 
 <template>
-    <div>
-        <i
-            class="icon-keyboard"
-            @click="showKeyboardShortcuts = !showKeyboardShortcuts"
-        />
-        <div class="shortcuts" v-if="showKeyboardShortcuts">
-            <div class="h5">Keyboard Shortcuts</div>
-            <div>
-                <span class="monospace">ctrl + number</span>
-                Toggle visibility of the layer at the number position
-            </div>
-            <div>
-                <span style="font-weight: bold;">Example: </span>
-                <span class="monospace">ctrl + 1</span>
-                Toggle visibility of the first layer in the table
-            </div>
-            <div>
-                <span class="monospace">ctrl + alt + number</span>
-                Toggle visibility of the layer at the position of the number plus 10
-            </div>
-            <div>
-                <span style="font-weight: bold;">Example: </span>
-                <span class="monospace">ctrl + alt + 1</span>
-                Toggle visibility of the eleventh layer in the table
-            </div>
-        </div>
-        <div  :class="colorPickerShown ? 'table-container tall' : 'table-container'">
-            <table id="composite-layer-table" class="table table-condensed">
-                <thead class="table-header">
-                    <tr>
-                        <th>
-                            <input
-                                type="checkbox"
-                                class="input-80"
-                                :checked="layers.every((l) => enabledLayers.includes(l))"
-                                @input="toggleEnableAll"
-                            >
-                        </th>
-                        <th></th>
-                        <th></th>
-                        <th>
-                            <div class="auto-range-col">
-                                <div class="auto-range-label">
-                                    <span class="small-text">Auto Range</span>
-                                    <label class="switch">
-                                        <span
-                                            :class="allAutoRange() ? 'onoff-slider checked' : 'onoff-slider'"
-                                            @click="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
-                                        />
-                                    </label>
-                                </div>
-                                <span
-                                    v-if="allAutoRange()"
-                                    class="percentage-input"
-                                >
-                                    <input
-                                        type="number"
-                                        class="input-80"
-                                        :max="50"
-                                        :min="0"
-                                        :value="autoRangeForAll"
-                                        @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>
-                    </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)}"
+  <div>
+    <i
+      class="icon-keyboard"
+      @click="showKeyboardShortcuts = !showKeyboardShortcuts"
+    />
+    <div
+      v-if="showKeyboardShortcuts"
+      class="shortcuts"
+    >
+      <div class="h5">
+        Keyboard Shortcuts
+      </div>
+      <div>
+        <span class="monospace">ctrl + number</span>
+        Toggle visibility of the layer at the number position
+      </div>
+      <div>
+        <span style="font-weight: bold;">Example: </span>
+        <span class="monospace">ctrl + 1</span>
+        Toggle visibility of the first layer in the table
+      </div>
+      <div>
+        <span class="monospace">ctrl + alt + number</span>
+        Toggle visibility of the layer at the position of the number plus 10
+      </div>
+      <div>
+        <span style="font-weight: bold;">Example: </span>
+        <span class="monospace">ctrl + alt + 1</span>
+        Toggle visibility of the eleventh layer in the table
+      </div>
+    </div>
+    <div :class="colorPickerShown ? 'table-container tall' : 'table-container'">
+      <table
+        id="composite-layer-table"
+        class="table table-condensed"
+      >
+        <thead class="table-header">
+          <tr>
+            <th>
+              <input
+                type="checkbox"
+                class="input-80"
+                :checked="layers.every((l) => enabledLayers.includes(l))"
+                @input="toggleEnableAll"
+              >
+            </th>
+            <th />
+            <th />
+            <th>
+              <div class="auto-range-col">
+                <div class="auto-range-label">
+                  <span class="small-text">Auto Range</span>
+                  <label class="switch">
+                    <span
+                      :class="allAutoRange() ? 'onoff-slider checked' : 'onoff-slider'"
+                      @click="() => updateAllAutoRanges(allAutoRange() ? undefined : 0.2)"
                     />
-                </thead>
-                <tbody>
-                    <tr
-                        v-for="{
-                            layerName, index, palette,
-                            autoRange, min, max,
-                            framedelta
-                        } in Object.values(compositeLayerInfo)"
-                        :key="layerName"
-                        :class="expandedRows.includes(index) ? 'tall-row' : ''"
-                    >
-                        <td class="enable-col">
-                            <input
-                                type="checkbox"
-                                class="input-80"
-                                :value="layerName"
-                                v-model="enabledLayers"
-                                @change="updateActiveLayers"
-                            >
-                        </td>
-                        <td class="name-col">{{ layerName }}</td>
-                        <td class="color-col">
-                            <span
-                                class="current-color"
-                                :style="{ 'background-color': palette }"
-                                @click="() => toggleColorPicker(layerName)"
-                            />
-                        </td>
-                        <td class="auto-range-col">
-                            <div class="auto-range-toggle">
-                                <label class="switch">
-                                    <span
-                                        :class="autoRange ? 'onoff-slider checked' : 'onoff-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'"
-                                @click="() => toggleExpanded(index)"
-                            />
-                        </td>
-                        <div v-if="expandedRows.includes(index)" class="advanced-section">
-                            <histogram-editor
-                                :itemId="itemId"
-                                :layerIndex="index"
-                                :currentFrame="currentFrame"
-                                :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>
-                </tbody>
-            </table>
-        </div>
+                  </label>
+                </div>
+                <span
+                  v-if="allAutoRange()"
+                  class="percentage-input"
+                >
+                  <input
+                    type="number"
+                    class="input-80"
+                    :max="50"
+                    :min="0"
+                    :value="autoRangeForAll"
+                    @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>
+          </tr>
+          <!-- color picker should display relative to sticky table head -->
+          <color-picker
+            v-if="colorPickerShown"
+            id="color_picker"
+            class="picker-offset"
+            :disable-alpha="true"
+            :value="Object.values(compositeLayerInfo).find((({layerName}) => layerName === colorPickerShown)).palette"
+            @input="(swatch) => {updateLayerColor(colorPickerShown, swatch)}"
+          />
+        </thead>
+        <tbody>
+          <tr
+            v-for="{
+              layerName, index, palette,
+              autoRange, min, max,
+              framedelta
+            } in Object.values(compositeLayerInfo)"
+            :key="layerName"
+            :class="expandedRows.includes(index) ? 'tall-row' : ''"
+          >
+            <td class="enable-col">
+              <input
+                v-model="enabledLayers"
+                type="checkbox"
+                class="input-80"
+                :value="layerName"
+                @change="updateActiveLayers"
+              >
+            </td>
+            <td class="name-col">
+              {{ layerName }}
+            </td>
+            <td class="color-col">
+              <span
+                class="current-color"
+                :style="{ 'background-color': palette }"
+                @click="() => toggleColorPicker(layerName)"
+              />
+            </td>
+            <td class="auto-range-col">
+              <div class="auto-range-toggle">
+                <label class="switch">
+                  <span
+                    :class="autoRange ? 'onoff-slider checked' : 'onoff-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'"
+                @click="() => toggleExpanded(index)"
+              />
+            </td>
+            <div
+              v-if="expandedRows.includes(index)"
+              class="advanced-section"
+            >
+              <histogram-editor
+                :item-id="itemId"
+                :layer-index="index"
+                :current-frame="currentFrame"
+                :current-frame-histogram="currentFrameHistogram"
+                :histogram-params="histogramParams"
+                :framedelta="framedelta"
+                :auto-range="autoRange"
+                :current-min="min"
+                :current-max="max"
+                @updateMin="(v, d) => updateLayerMin(layerName, v, d)"
+                @updateMax="(v, d) => updateLayerMax(layerName, v, d)"
+                @updateAutoRange="(v) => updateLayerAutoRange(layerName, v)"
+              />
+            </div>
+          </tr>
+        </tbody>
+      </table>
     </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/girder/girder_large_image/web_client/vue/components/DualInput.vue b/girder/girder_large_image/web_client/vue/components/DualInput.vue
index f50b6bf50..1586a5f94 100644
--- a/girder/girder_large_image/web_client/vue/components/DualInput.vue
+++ b/girder/girder_large_image/web_client/vue/components/DualInput.vue
@@ -4,52 +4,56 @@ export default {
     emits: ['updateValue'],
     data() {
         return {
-            value: this.currentValue,
-        }
+            value: this.currentValue
+        };
     },
     watch: {
         currentValue(v) {
-            this.value = v
+            this.value = v;
         },
         value(v) {
             this.$emit('updateValue', v);
         }
-    },
-}
+    }
+};
 </script>
 
 <template>
-    <tr :class="this.sliderLabels && this.sliderLabels.length ? 'dual-controls tall' : 'dual-controls'">
-        <td><label for="numberControl">{{ label }}: </label></td>
-        <td><input
-            type="number"
-            name="numberControl"
-            min="0"
-            :max="valueMax"
-            v-model="value"
-        ></td>
-        <td style="width:90%">
-            <input
-                type="range"
-                name="sliderControl"
-                min="0"
-                :max="valueMax"
-                v-model="value"
-            >
-            <div class="bubble-wrap">
-                <output
-                    v-if="this.sliderLabels && this.sliderLabels.length > value"
-                    :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
-                    class="bubble"
-                >
-                    {{ this.sliderLabels[value] }}
-                </output>
-                <span v-if="this.sliderLabels && this.sliderLabels.length > value"
-                    :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
-                    class="bubble-after"></span>
-            </div>
-        </td>
-    </tr>
+  <tr :class="sliderLabels && sliderLabels.length ? 'dual-controls tall' : 'dual-controls'">
+    <td><label for="numberControl">{{ label }}: </label></td>
+    <td>
+      <input
+        v-model="value"
+        type="number"
+        name="numberControl"
+        min="0"
+        :max="valueMax"
+      >
+    </td>
+    <td style="width:90%">
+      <input
+        v-model="value"
+        type="range"
+        name="sliderControl"
+        min="0"
+        :max="valueMax"
+      >
+      <div class="bubble-wrap">
+        <output
+          v-if="sliderLabels && sliderLabels.length > value"
+          :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
+          class="bubble"
+        >
+          {{ sliderLabels[value] }}
+        </output>
+        <span
+          v-if="sliderLabels && sliderLabels.length > value"
+          :style="'left:'+value/valueMax*100+'%; transform:translateX(-'+value/valueMax*100+'%)'"
+          class="bubble-after"
+        />
+      </div>
+    </td>
+  </tr>
 </template>
 
 <style scoped>
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 6b906a6cf..341513137 100644
--- a/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
+++ b/girder/girder_large_image/web_client/vue/components/FrameSelector.vue
@@ -1,12 +1,13 @@
 <script>
 import Vue from 'vue';
+
 import CompositeLayers from './CompositeLayers.vue';
 import DualInput from './DualInput.vue';
 import PresetsMenu from './PresetsMenu.vue';
 
 export default Vue.extend({
+    components: {CompositeLayers, DualInput, PresetsMenu},
     props: ['itemId', 'imageMetadata', 'frameUpdate', 'liConfig'],
-    components: { CompositeLayers, DualInput, PresetsMenu },
     data() {
         return {
             loaded: false,
@@ -17,249 +18,263 @@ export default Vue.extend({
             indices: [],
             indexInfo: {},
             style: {},
-            modesShown: {1: true},
+            modesShown: {1: true}
         };
     },
-    watch: {
-        currentModeId() {
-            this.modesShown[this.currentModeId] = true;
-            this.update();
-        }
-    },
     computed: {
         sliderIndices() {
             return this.indices.filter(
                 (i) => {
-                    if (this.currentModeId === 2 && i === 'IndexC') return false
-                    return true
+                    if (this.currentModeId === 2 && i === 'IndexC') return false;
+                    return true;
                 }
-            )
+            );
         },
         currentStyle() {
             const curStyle = this.style[this.currentModeId];
             return curStyle ? JSON.stringify(curStyle, null, null) : '';
         }
     },
+    watch: {
+        currentModeId() {
+            this.modesShown[this.currentModeId] = true;
+            this.update();
+        }
+    },
+    mounted() {
+        this.metadata = Object.assign({}, this.imageMetadata);
+        this.fillMetadata();
+        this.maxFrame = this.metadata.frames.length - 1;
+        this.populateIndices();
+        this.populateModes();
+        this.loaded = true;
+    },
     methods: {
         setCurrentMode(mode) {
-            this.currentModeId = mode.id
+            this.currentModeId = mode.id;
         },
         setCurrentFrame(frame) {
-            this.currentFrame = frame
+            this.currentFrame = frame;
             this.indexInfo = Object.fromEntries(
                 Object.entries(this.indexInfo)
-                .map(([index, info]) => {
-                    info.current = Math.floor(frame / info.stride) % (info.range + 1)
-                    return [index, info]
-                })
-            )
+                    .map(([index, info]) => {
+                        info.current = Math.floor(frame / info.stride) % (info.range + 1);
+                        return [index, info];
+                    })
+            );
         },
         updateStyle(idx, style) {
             this.$set(this.style, idx, style);
-            this.update()
+            this.update();
         },
         updateAxisSlider(event) {
             this.indexInfo[event.index].current = event.frame;
             this.update();
         },
         updateFrameSlider(frame) {
-            this.currentFrame = frame
+            this.currentFrame = frame;
             this.frameUpdate(frame, undefined);
         },
         update() {
             let frame = 0;
-            _.forEach(this.indices, (index) => {
-                if (this.sliderIndices.includes(index)){
+            this.indices.forEach((index) => {
+                if (this.sliderIndices.includes(index)) {
                     const info = this.indexInfo[index];
                     frame += info.current * info.stride;
                 }
             });
-            this.currentFrame = frame
-            let style = this.currentModeId > 1 ? Object.assign({}, this.style[this.currentModeId]) : undefined
-            if(style && style.preset) delete style.preset
+            this.currentFrame = frame;
+            const style = this.currentModeId > 1 ? Object.assign({}, this.style[this.currentModeId]) : undefined;
+            if (style && style.preset) delete style.preset;
             this.frameUpdate(frame, style);
         },
         fillMetadata() {
-            if (!this.imageMetadata.frames) {
-                this.imageMetadata.frames = [{
+            if (!this.metadata.frames) {
+                this.metadata.frames = [{
                     Frame: 0,
-                    Index: 0,
-                }]
+                    Index: 0
+                }];
             }
-            if (!this.imageMetadata.IndexRange || !this.imageMetadata.IndexStride) {
-                this.imageMetadata.IndexRange = {}
-                this.imageMetadata.IndexStride = {}
+            if (!this.metadata.IndexRange || !this.metadata.IndexStride) {
+                this.metadata.IndexRange = {};
+                this.metadata.IndexStride = {};
             }
             if (
-                (!this.imageMetadata.channels || !this.imageMetadata.channelmap)
-                && Object.keys(this.imageMetadata.IndexRange).includes('IndexC')
+                (!this.metadata.channels || !this.metadata.channelmap) &&
+                Object.keys(this.metadata.IndexRange).includes('IndexC')
             ) {
-                this.imageMetadata.channelmap = Object.fromEntries(
-                    [...Array(this.imageMetadata.IndexRange['IndexC']).keys()].map(
+                this.metadata.channelmap = Object.fromEntries(
+                    [...Array(this.metadata.IndexRange.IndexC).keys()].map(
                         (i) => [`Channel ${i + 1}`, i]
                     )
-                )
-                this.imageMetadata.channels = Object.keys(this.imageMetadata.channelmap)
+                );
+                this.metadata.channels = Object.keys(this.metadata.channelmap);
             }
-            if (!this.imageMetadata.bands) {
-                switch (this.imageMetadata.bandCount) {
+            if (!this.metadata.bands) {
+                switch (this.metadata.bandCount) {
                     case 1:
-                        this.imageMetadata.bands = [ 'gray' ];
+                        this.metadata.bands = ['gray'];
                         break;
                     case 2:
-                        this.imageMetadata.bands = [ 'gray', 'alpha' ];
+                        this.metadata.bands = ['gray', 'alpha'];
                         break;
                     case 3:
-                        this.imageMetadata.bands = [ 'red', 'green', 'blue' ];
+                        this.metadata.bands = ['red', 'green', 'blue'];
                         break;
                     case 4:
-                        this.imageMetadata.bands = [ 'red', 'green', 'blue', 'alpha' ];
+                        this.metadata.bands = ['red', 'green', 'blue', 'alpha'];
                         break;
                 }
             } else {
-                this.imageMetadata.bands = Object.values(this.imageMetadata.bands).map(
+                this.metadata.bands = Object.values(this.metadata.bands).map(
                     (b, i) => {
                         if (!b.interpretation) {
-                            return `Band ${i + 1}`
+                            return `Band ${i + 1}`;
                         } else {
-                            return b.interpretation.split("=")[0]
+                            return b.interpretation.split('=')[0];
                         }
                     }
-                )
+                );
             }
         },
         populateIndices() {
-            Object.keys(this.imageMetadata.IndexRange).forEach((indexName) => {
+            Object.keys(this.metadata.IndexRange).forEach((indexName) => {
                 this.indices.push(indexName);
                 this.indexInfo[indexName] = {
                     current: 0,
-                    range: this.imageMetadata.IndexRange[indexName] -1,
-                    stride: this.imageMetadata.IndexStride[indexName],
+                    range: this.metadata.IndexRange[indexName] - 1,
+                    stride: this.metadata.IndexStride[indexName],
                     activeFrames: []
                 };
             });
         },
         populateModes() {
-            if (this.imageMetadata.frames.length > 1) {
+            if (this.metadata.frames.length > 1) {
                 this.sliderModes.push(
-                    { id: 0, name: 'Frame' }
-                )
-                if(
-                    Object.keys(this.imageMetadata.IndexRange).length > 0
-                    && Object.keys(this.imageMetadata.IndexStride).length > 0
+                    {id: 0, name: 'Frame'}
+                );
+                if (
+                    Object.keys(this.metadata.IndexRange).length > 0 &&
+                    Object.keys(this.metadata.IndexStride).length > 0
                 ) {
                     this.sliderModes.push(
-                        { id: 1, name: 'Axis' }
-                    )
-                    this.currentModeId = 1
+                        {id: 1, name: 'Axis'}
+                    );
+                    this.currentModeId = 1;
                 }
             } else {
                 this.sliderModes.push(
-                    { id: -1, name: 'Default' }
-                )
-                this.currentModeId = -1
+                    {id: -1, name: 'Default'}
+                );
+                this.currentModeId = -1;
             }
-            if (this.imageMetadata.channels && this.imageMetadata.channels.length > 1) {
+            if (this.metadata.channels && this.metadata.channels.length > 1) {
                 this.sliderModes.push(
-                    { id: 2, name: 'Channel Compositing' }
-                )
+                    {id: 2, name: 'Channel Compositing'}
+                );
             }
-            if (this.imageMetadata.bandCount > 1) {
+            if (this.metadata.bandCount > 1) {
                 this.sliderModes.push(
-                    { id: 3, name: 'Band Compositing' }
-                )
+                    {id: 3, name: 'Band Compositing'}
+                );
             }
         }
-    },
-    mounted() {
-        this.fillMetadata()
-        this.maxFrame = this.imageMetadata.frames.length - 1
-        this.populateIndices()
-        this.populateModes()
-        this.loaded = true
     }
 });
 </script>
 
 <template>
-    <div class="image-frame-control-box" v-if="loaded">
-        <div id="current_image_frame" class="invisible">{{ currentFrame }}</div>
-        <div id="current_image_style" class="invisible">{{ currentStyle }}</div>
-        <div>
-            <label for="mode">Image control mode: </label>
-            <select
-                v-model="currentModeId"
-                name="mode"
-            >
-                <option
-                    v-for="mode in sliderModes"
-                    :key="mode.id"
-                    :value="mode.id"
-                >
-                    {{ mode.name }}
-                </option>
-            </select>
-            <presets-menu
-                :itemId="itemId"
-                :liConfig="liConfig"
-                :imageMetadata="imageMetadata"
-                :availableModes="sliderModes.map((m) => m.id)"
-                :currentMode="sliderModes.find((m) => m.id === currentModeId)"
-                :currentFrame="currentFrame"
-                :currentStyle="style[currentModeId]"
-                @setCurrentMode="setCurrentMode"
-                @setCurrentFrame="setCurrentFrame"
-                @updateStyle="updateStyle"
-            />
-        </div>
-        <dual-input
-            v-if="currentModeId === 0"
-            :currentValue="currentFrame"
-            :valueMax="maxFrame"
-            label="Frame"
-            @updateValue="updateFrameSlider"
-        />
-        <table v-if="currentModeId > 0">
-            <dual-input
-                v-for="index in sliderIndices"
-                :key="index"
-                :currentValue="indexInfo[index].current"
-                :valueMax="indexInfo[index].range"
-                :label="index.replace('Index', '')"
-                :sliderLabels="index === 'IndexC' ? imageMetadata.channels : []"
-                @updateValue="(v) => updateAxisSlider({index, frame: v})"
-            />
-        </table>
+  <div
+    v-if="loaded"
+    class="image-frame-control-box"
+  >
+    <div
+      id="current_image_frame"
+      class="invisible"
+    >
+      {{ currentFrame }}
+    </div>
+    <div
+      id="current_image_style"
+      class="invisible"
+    >
+      {{ currentStyle }}
+    </div>
+    <div>
+      <label for="mode">Image control mode: </label>
+      <select
+        v-model="currentModeId"
+        name="mode"
+      >
+        <option
+          v-for="mode in sliderModes"
+          :key="mode.id"
+          :value="mode.id"
+        >
+          {{ mode.name }}
+        </option>
+      </select>
+      <presets-menu
+        :item-id="itemId"
+        :li-config="liConfig"
+        :image-metadata="imageMetadata"
+        :available-modes="sliderModes.map((m) => m.id)"
+        :current-mode="sliderModes.find((m) => m.id === currentModeId)"
+        :current-frame="currentFrame"
+        :current-style="style[currentModeId]"
+        @setCurrentMode="setCurrentMode"
+        @setCurrentFrame="setCurrentFrame"
+        @updateStyle="updateStyle"
+      />
+    </div>
+    <dual-input
+      v-if="currentModeId === 0"
+      :current-value="currentFrame"
+      :value-max="maxFrame"
+      label="Frame"
+      @updateValue="updateFrameSlider"
+    />
+    <table v-if="currentModeId > 0">
+      <dual-input
+        v-for="index in sliderIndices"
+        :key="index"
+        :current-value="indexInfo[index].current"
+        :value-max="indexInfo[index].range"
+        :label="index.replace('Index', '')"
+        :slider-labels="index === 'IndexC' ? imageMetadata.channels : []"
+        @updateValue="(v) => updateAxisSlider({index, frame: v})"
+      />
+    </table>
 
-        <!-- 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">
-            <composite-layers
-                key="channels"
-                v-if="imageMetadata.channels && modesShown[2]"
-                :itemId="itemId"
-                :currentFrame="currentFrame"
-                :currentStyle="style[2]"
-                :layers="imageMetadata.channels"
-                :layerMap="imageMetadata.channelmap"
-                :active="currentModeId === 2"
-                :class="currentModeId === 2 ? '' : 'invisible'"
-                @updateStyle="(style) => updateStyle(2, style)"
-            />
-            <composite-layers
-                key="bands"
-                v-if="imageMetadata.bands && modesShown[3]"
-                :itemId="itemId"
-                :currentFrame="currentFrame"
-                :currentStyle="style[3]"
-                :layers="imageMetadata.bands"
-                :layerMap="undefined"
-                :active="currentModeId === 3"
-                :class="currentModeId === 3 ? '' : 'invisible'"
-                @updateStyle="(style) => updateStyle(3, style)"
-            />
-        </div>
+    <!-- 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">
+      <composite-layers
+        v-if="imageMetadata.channels && modesShown[2]"
+        key="channels"
+        :item-id="itemId"
+        :current-frame="currentFrame"
+        :current-style="style[2]"
+        :layers="imageMetadata.channels"
+        :layer-map="imageMetadata.channelmap"
+        :active="currentModeId === 2"
+        :class="currentModeId === 2 ? '' : 'invisible'"
+        @updateStyle="(style) => updateStyle(2, style)"
+      />
+      <composite-layers
+        v-if="imageMetadata.bands && modesShown[3]"
+        key="bands"
+        :item-id="itemId"
+        :current-frame="currentFrame"
+        :current-style="style[3]"
+        :layers="imageMetadata.bands"
+        :layer-map="undefined"
+        :active="currentModeId === 3"
+        :class="currentModeId === 3 ? '' : 'invisible'"
+        @updateStyle="(style) => updateStyle(3, style)"
+      />
     </div>
+  </div>
 </template>
 
 <style scoped>
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 a8fd899f9..d6a584469 100644
--- a/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
+++ b/girder/girder_large_image/web_client/vue/components/HistogramEditor.vue
@@ -1,7 +1,8 @@
 <script>
-import { restRequest } from '@girder/core/rest';
-import { nextTick } from 'vue';
-import { makeDraggableSVG } from '../utils/drag';
+import {restRequest} from '@girder/core/rest';
+import Vue from 'vue';
+
+import {makeDraggableSVG} from '../utils/drag';
 
 export default {
     props: [
@@ -13,16 +14,51 @@ export default {
         'framedelta',
         'currentMin',
         'currentMax',
-        'autoRange',
+        'autoRange'
     ],
     emits: ['updateMin', 'updateMax', 'updateAutoRange'],
     data() {
         return {
             histogram: undefined,
             xRange: [undefined, undefined],
-            vRange: [undefined, undefined],
+            vRange: [undefined, undefined]
+        };
+    },
+    watch: {
+        currentFrame() {
+            this.fetchHistogram();
+        },
+        histogram() {
+            // allow rerender to occur first
+            Vue.nextTick().then(() => {
+                this.xRange = [5, this.$refs.svg.clientWidth - 5];
+                this.vRange = [this.histogram.min, this.histogram.max];
+                this.drawHistogram(
+                    this.simplifyHistogram(this.histogram.hist)
+                );
+                makeDraggableSVG(
+                    this.$refs.svg,
+                    this.validateHandleDrag,
+                    this.dragHandle,
+                    this.xRange
+                );
+                this.initializePositions();
+                return undefined;
+            });
+        },
+        currentMin() {
+            this.initializePositions();
+        },
+        currentMax() {
+            this.initializePositions();
+        },
+        autoRange() {
+            this.initializePositions();
         }
     },
+    mounted() {
+        this.fetchHistogram();
+    },
     methods: {
         fetchHistogram() {
             if (this.framedelta !== undefined) {
@@ -35,80 +71,129 @@ export default {
                     )
                 }).then((response) => {
                     if (response.length < 3) {
-                        this.histogram = response[0]
+                        this.histogram = response[0];
                     } else {
-                        this.histogram = response[1]
+                        this.histogram = response[1];
                     }
-                })
+                    return undefined;
+                });
             } else {
                 this.histogram = this.layerIndex < this.currentFrameHistogram.length
                     ? this.currentFrameHistogram[this.layerIndex]
-                    : this.currentFrameHistogram[0]
+                    : this.currentFrameHistogram[0];
             }
         },
         simplifyHistogram(hist) {
-            let aggregationFactor = Math.round(1000 / (this.xRange[1] - this.xRange[0]))
-            if (aggregationFactor < 1) aggregationFactor = 1
-            const simpleHistogram = []
+            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)
-                )
+                        .reduce((a, b) => a + b, 0)
+                );
             }
-            return simpleHistogram
+            return simpleHistogram;
         },
-        drawHistogram(hist){
+        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 {clientWidth, clientHeight} = this.$refs.canvas;
+            this.$refs.canvas.setAttribute('width', clientWidth);
+            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 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
-            )
+                secondMaxFrequency > minFrequency &&
+                (maxFrequency - secondMaxFrequency) > secondMaxFrequency / 3
+            );
 
-            const {width, height} = this.$refs.canvas
-            const ctx = this.$refs.canvas.getContext("2d");
-            const widthBetweenPoints = width / hist.length
+            const {width, height} = this.$refs.canvas;
+            const ctx = this.$refs.canvas.getContext('2d');
+            const widthBetweenPoints = width / hist.length;
             ctx.clearRect(0, 0, width, height);
             for (var i = 0; i < hist.length; i++) {
-                const frequency = hist[i]
-                const x0 = widthBetweenPoints * i
-                const x1 = widthBetweenPoints * (i + 1)
-                let y0 = height - (frequency / maxFrequency * height)
-                if(shortenMaxFrequency) {
-                    y0 = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3)
+                const frequency = hist[i];
+                const x0 = widthBetweenPoints * i;
+                const x1 = widthBetweenPoints * (i + 1);
+                let y0 = height - (frequency / maxFrequency * height);
+                if (shortenMaxFrequency) {
+                    y0 = frequency === maxFrequency ? 0 : height - (frequency / secondMaxFrequency * height * 2 / 3);
                 }
-                const y1 = height
+                const y1 = height;
 
-                ctx.rect(x0, y0, (x1 - x0), (y1 - y0))
+                ctx.rect(x0, y0, (x1 - x0), (y1 - y0));
             }
-            ctx.fillStyle = "#888"
+            ctx.fillStyle = '#888';
             ctx.fill();
         },
         xPositionToValue(xPosition) {
-            const xProportion = (xPosition - this.xRange[0]) / (this.xRange[1] - this.xRange[0])
+            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)
+            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]
-            )
+            );
+        },
+        initializePositions() {
+            if (!this.histogram) return;
+
+            const currentMinPosition = parseFloat(this.$refs.minHandle.getAttribute('x1'));
+            const currentMaxPosition = parseFloat(this.$refs.maxHandle.getAttribute('x1'));
+            let newMinPosition = this.xRange[0];
+            let newMaxPosition = this.xRange[1];
+
+            if (this.currentMin) {
+                newMinPosition = this.valueToXPosition(this.currentMin);
+            }
+            if (this.currentMax) {
+                newMaxPosition = this.valueToXPosition(this.currentMax);
+            }
+            if (this.autoRange) {
+                newMinPosition = this.valueToXPosition(
+                    this.fromDistributionPercentage(this.autoRange / 100)
+                );
+                newMaxPosition = this.valueToXPosition(
+                    this.fromDistributionPercentage((100 - this.autoRange) / 100)
+                );
+            }
+
+            // clamp to available space
+            if (newMinPosition < this.xRange[0]) newMinPosition = this.xRange[0];
+            if (newMinPosition > this.xRange[1]) newMinPosition = this.xRange[1];
+            if (newMaxPosition < this.xRange[0]) newMaxPosition = this.xRange[0];
+            if (newMaxPosition > this.xRange[1]) newMaxPosition = this.xRange[1];
+
+            if (newMinPosition !== currentMinPosition) {
+                this.setHandlePosition(
+                    this.$refs.minHandle,
+                    newMinPosition,
+                    this.$refs.minExclusionBox,
+                    5,
+                    newMinPosition - 5
+                );
+            }
+            if (newMaxPosition !== currentMaxPosition) {
+                this.setHandlePosition(
+                    this.$refs.maxHandle,
+                    newMaxPosition,
+                    this.$refs.maxExclusionBox,
+                    newMaxPosition,
+                    this.xRange[1] - newMaxPosition
+                );
+            }
         },
         validateHandleDrag(selected, newLocation) {
             let moveX = true;
-            let moveY = false;
-            const handleName = selected.getAttribute("name")
-            const newValue = this.xPositionToValue(newLocation.x)
-             if (handleName === 'updateMin') {
+            const moveY = false;
+            const handleName = selected.getAttribute('name');
+            const newValue = this.xPositionToValue(newLocation.x);
+            if (handleName === 'updateMin') {
                 if (!this.autoRange && newValue >= this.currentMax) {
                     moveX = false;
                 } else if (this.autoRange && this.toDistributionPercentage(newValue) >= 50) {
@@ -122,220 +207,165 @@ export default {
                 }
             }
 
-            return [moveX, moveY]
+            return [moveX, moveY];
         },
         dragHandle(selected, newLocation) {
-            let funcName = selected.getAttribute("name")
-            let newValue = this.xPositionToValue(newLocation.x)
+            const funcName = selected.getAttribute('name');
+            let newValue = this.xPositionToValue(newLocation.x);
             if (this.autoRange !== undefined) {
                 newValue = this.toDistributionPercentage(newValue);
-                if (funcName == 'updateMax') {
-                    newValue = 100 - newValue
+                if (funcName === 'updateMax') {
+                    newValue = 100 - newValue;
                 }
-                newValue = parseFloat(parseFloat(newValue).toFixed(2))
-                this.$emit('updateAutoRange', newValue)
+                newValue = parseFloat(parseFloat(newValue).toFixed(2));
+                this.$emit('updateAutoRange', newValue);
             } else {
                 if (funcName === 'updateMin') {
-                    this.$refs.minExclusionBox.setAttributeNS(null, 'width', `${newLocation.x - 5}`)
+                    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.$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}`)
+            handle.setAttributeNS(null, 'x1', `${position}`);
+            handle.setAttributeNS(null, 'x2', `${position}`);
+            exclusionBox.setAttributeNS(null, 'x', `${exclusionBoxPosition}`);
+            if (exclusionBoxWidth >= 0) {
+                exclusionBox.setAttributeNS(null, 'width', `${exclusionBoxWidth}`);
+            }
         },
         fromDistributionPercentage(percentage) {
-            const numSamples = this.histogram.samples * percentage
-            let bucketIndex = 0
-            let sum = 0
+            const numSamples = this.histogram.samples * percentage;
+            let bucketIndex = 0;
+            let sum = 0;
             this.histogram.hist.forEach((count, index) => {
-                sum += count
+                sum += count;
                 if (sum <= numSamples) {
-                    bucketIndex = index
+                    bucketIndex = index;
                 }
-            })
+            });
             return this.histogram.bin_edges[bucketIndex];
-
         },
         toDistributionPercentage(value) {
-            let numSamples = 0
+            let numSamples = 0;
             this.histogram.hist.forEach((count, index) => {
                 if (value >= this.histogram.bin_edges[index]) {
-                    numSamples += count
+                    numSamples += count;
                 }
-            })
-            return numSamples / this.histogram.samples * 100
+            });
+            return numSamples / this.histogram.samples * 100;
         },
         updateFromInput(funcName, value) {
-            let roundedValue = undefined;
+            let roundedValue;
             if (value) {
-                roundedValue = parseFloat(parseFloat(value).toFixed(2))
+                roundedValue = parseFloat(parseFloat(value).toFixed(2));
             }
-            this.$emit(funcName, roundedValue)
-        },
-    },
-    mounted() {
-        this.fetchHistogram()
-    },
-    watch: {
-        currentFrame() {
-            this.fetchHistogram()
-        },
-        histogram() {
-            // 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'))
-            let newPosition = this.xRange[0]
-            if (this.currentMin) {
-                newPosition = this.valueToXPosition(this.currentMin)
-            }
-            if (newPosition !== currentPosition) {
-                this.setHandlePosition(
-                    this.$refs.minHandle,
-                    newPosition,
-                    this.$refs.minExclusionBox,
-                    5,
-                    newPosition - 5,
-                )
-            }
-        },
-        currentMax() {
-            const currentPosition = parseFloat(this.$refs.maxHandle.getAttribute('x1'))
-            let newPosition = this.xRange[1]
-            if(this.currentMax) {
-                newPosition = this.valueToXPosition(this.currentMax)
-            }
-            if (newPosition !== currentPosition) {
-                this.setHandlePosition(
-                    this.$refs.maxHandle,
-                    newPosition,
-                    this.$refs.maxExclusionBox,
-                    newPosition,
-                    this.xRange[1] - newPosition,
-                )
-            }
-        },
-        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) {
-                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,
-            )
+            this.$emit(funcName, roundedValue);
         }
     }
-}
+};
 </script>
 
 <template>
-    <div v-if="histogram">
-        <div class="range-editor">
-            <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-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"/>
-                <line
-                    class="draggable"
-                    name="updateMin"
-                    ref="minHandle"
-                    stroke="#000"
-                    stroke-width="4"
-                    x1="5" x2="5"
-                    y1="0" y2="30"
-                />
-                <text
-                    :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"/>
-                <line
-                    class="draggable"
-                    name="updateMax"
-                    ref="maxHandle"
-                    stroke="#000"
-                    stroke-width="4"
-                    x1="5" x2="5"
-                    y1="0" y2="30"
-                />
-            </svg>
-            <canvas ref="canvas" class="canvas" />
-            <input
-                v-if="autoRange === undefined"
-                type="number"
-                class="input-80"
-                :max="histogram.max"
-                :min="currentMin"
-                :value="currentMax"
-                @input="(e) => updateFromInput('updateMax', e.target.value)"
-            >
-            <span
-                v-else
-                class="percentage-input"
-            >
-                <input
-                    type="number"
-                    class="input-80"
-                    :max="50"
-                    :min="0"
-                    :value="autoRange"
-                    @input="(e) => updateFromInput('updateAutoRange', e.target.value)"
-                >
-            </span>
-        </div>
+  <div v-if="histogram">
+    <div class="range-editor">
+      <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-80"
+      />
+      <svg
+        ref="svg"
+        class="handles-svg"
+      >
+        <text
+          x="5"
+          y="43"
+          class="small"
+        >{{ vRange[0] }}</text>
+        <rect
+          ref="minExclusionBox"
+          x="5"
+          y="0"
+          width="0"
+          height="30"
+          opacity="0.2"
+        />
+        <line
+          ref="minHandle"
+          class="draggable"
+          name="updateMin"
+          stroke="#000"
+          stroke-width="4"
+          x1="5"
+          x2="5"
+          y1="0"
+          y2="30"
+        />
+        <text
+          :x="xRange[1] && vRange[1] ? xRange[1] - (`${vRange[1]}`.length * 6): 0"
+          y="43"
+          class="small"
+        >{{ vRange[1] }}</text>
+        <rect
+          ref="maxExclusionBox"
+          x="5"
+          y="0"
+          width="0"
+          height="30"
+          opacity="0.2"
+        />
+        <line
+          ref="maxHandle"
+          class="draggable"
+          name="updateMax"
+          stroke="#000"
+          stroke-width="4"
+          x1="5"
+          x2="5"
+          y1="0"
+          y2="30"
+        />
+      </svg>
+      <canvas
+        ref="canvas"
+        class="canvas"
+      />
+      <input
+        v-if="autoRange === undefined"
+        type="number"
+        class="input-80"
+        :max="histogram.max"
+        :min="currentMin"
+        :value="currentMax"
+        @input="(e) => updateFromInput('updateMax', e.target.value)"
+      >
+      <span
+        v-else
+        class="percentage-input"
+      >
+        <input
+          type="number"
+          class="input-80"
+          :max="50"
+          :min="0"
+          :value="autoRange"
+          @input="(e) => updateFromInput('updateAutoRange', e.target.value)"
+        >
+      </span>
     </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/girder/girder_large_image/web_client/vue/components/PresetsMenu.vue b/girder/girder_large_image/web_client/vue/components/PresetsMenu.vue
index ace7edf10..854a88720 100644
--- a/girder/girder_large_image/web_client/vue/components/PresetsMenu.vue
+++ b/girder/girder_large_image/web_client/vue/components/PresetsMenu.vue
@@ -1,5 +1,5 @@
 <script>
-import { restRequest } from '@girder/core/rest';
+import {restRequest} from '@girder/core/rest';
 
 export default {
     props: ['itemId', 'liConfig', 'imageMetadata', 'availableModes', 'currentMode', 'currentFrame', 'currentStyle'],
@@ -11,220 +11,246 @@ export default {
             selectedPreset: undefined,
             showPresetCreation: false,
             newPresetName: undefined,
-            errorMessage: undefined,
+            errorMessage: undefined
+        };
+    },
+    computed: {
+        generatedPresetName() {
+            let name = `${this.currentMode.name} control - Frame ${this.currentFrame}`;
+            if (this.currentMode.id === 2) {
+                name = `${this.currentStyle.bands.length} channels`;
+            } else if (this.currentMode.id === 3) {
+                name = `${this.currentStyle.bands.length} bands`;
+            }
+            return name;
+        },
+        availablePresets() {
+            return this.itemPresets.concat(this.folderPresets);
         }
     },
+    watch: {
+        newPresetName() {
+            if (this.newPresetName) {
+                this.errorMessage = undefined;
+            }
+        },
+        selectedPreset() {
+            if (this.selectedPreset) {
+                const preset = this.availablePresets.find((p) => p.name === this.selectedPreset);
+                if (preset.mode && preset.mode.id !== undefined) {
+                    this.$emit('setCurrentMode', preset.mode);
+                }
+                if (preset.frame !== undefined) {
+                    this.$emit('setCurrentFrame', preset.frame);
+                }
+                if (preset.style && preset.style.bands.length) {
+                    const styleArray = this.styleFromPreset(preset);
+                    this.$emit('updateStyle', preset.mode.id, {bands: styleArray, preset: true});
+                }
+            }
+        },
+        currentMode() {
+            this.checkPresetMatch();
+        },
+        currentFrame() {
+            this.checkPresetMatch();
+        },
+        currentStyle() {
+            this.checkPresetMatch();
+        }
+    },
+    mounted() {
+        this.getPresets();
+    },
     methods: {
         presetApplicable(preset) {
             if (this.itemPresets.find((p) => p.name === preset.name)) {
                 // preset with this name already exists on the item,
                 // prefer the item preset; don't show both
-                return false
+                return false;
             } else if (
-                parseInt(preset.frame) >= this.imageMetadata.frames.length
-                || !this.availableModes.includes(preset.mode.id)
+                parseInt(preset.frame) >= this.imageMetadata.frames.length ||
+                !this.availableModes.includes(preset.mode.id)
             ) {
-                return false
+                return false;
             } else if (
-                preset.style && preset.style.bands
-                && this.imageMetadata.IndexRange.IndexC
-                && preset.style.bands.some((b) => b.framedelta > this.imageMetadata.IndexRange.IndexC)
+                preset.style && preset.style.bands &&
+                this.imageMetadata.IndexRange.IndexC &&
+                preset.style.bands.some((b) => b.framedelta > this.imageMetadata.IndexRange.IndexC)
             ) {
-                return false
+                return false;
             }
 
-            return true
+            return true;
         },
         getPresets() {
             restRequest({
                 type: 'GET',
-                url: 'item/' + this.itemId + '/internal_metadata/presets',
+                url: 'item/' + this.itemId + '/internal_metadata/presets'
             }).then((presets) => {
                 if (presets) {
-                    this.itemPresets = presets
+                    this.itemPresets = presets;
                 }
                 if (this.liConfig.imageFramePresets) {
-                    this.folderPresets = this.liConfig.imageFramePresets.filter(this.presetApplicable)
+                    this.folderPresets = this.liConfig.imageFramePresets.filter(this.presetApplicable);
                 }
-            })
+                return undefined;
+            });
         },
-        addPreset(e, overwrite=false) {
+        addPreset(e, overwrite = false) {
             const newPreset = {
-                'name': this.newPresetName || this.generatedPresetName,
-                'mode': this.currentMode,
-                'frame': this.currentFrame,
-                'style': this.currentStyle,
-            }
-            newPreset.name = newPreset.name.trim()
+                name: this.newPresetName || this.generatedPresetName,
+                mode: this.currentMode,
+                frame: this.currentFrame,
+                style: this.currentStyle
+            };
+            newPreset.name = newPreset.name.trim();
             if (!overwrite && this.availablePresets.find((p) => p.name === newPreset.name)) {
-                this.errorMessage = `There is already a preset named "${newPreset.name}". Overwrite "${newPreset.name}"?`
+                this.errorMessage = `There is already a preset named "${newPreset.name}". Overwrite "${newPreset.name}"?`;
             } else {
-                this.itemPresets = this.itemPresets.filter((p) => p.name !== newPreset.name)
-                this.itemPresets.push(newPreset)
-                this.selectedPreset = newPreset.name
-                this.savePresetsList()
-                this.newPresetName = undefined
-                this.errorMessage = undefined
-                this.showPresetCreation = false
+                this.itemPresets = this.itemPresets.filter((p) => p.name !== newPreset.name);
+                this.itemPresets.push(newPreset);
+                this.selectedPreset = newPreset.name;
+                this.savePresetsList();
+                this.newPresetName = undefined;
+                this.errorMessage = undefined;
+                this.showPresetCreation = false;
             }
         },
         deleteSelectedPreset() {
-            this.itemPresets = this.itemPresets.filter((p) => p.name !== this.selectedPreset)
-            this.selectedPreset = undefined
-            this.savePresetsList()
+            this.itemPresets = this.itemPresets.filter((p) => p.name !== this.selectedPreset);
+            this.selectedPreset = undefined;
+            this.savePresetsList();
         },
         savePresetsList() {
             restRequest({
                 type: 'PUT',
                 url: 'item/' + this.itemId + '/internal_metadata/presets',
                 data: JSON.stringify(this.itemPresets),
-                contentType: 'application/json',
-            })
+                contentType: 'application/json'
+            });
         },
         styleFromAutoRange(band) {
-            band = Object.assign({}, band)  // new reference
+            band = Object.assign({}, band); // new reference
             if (band.autoRange) {
-                band.min = `min:${band.autoRange / 100}`
-                band.max = `max:${band.autoRange / 100}`
-                delete band.autoRange
+                band.min = `min:${band.autoRange / 100}`;
+                band.max = `max:${band.autoRange / 100}`;
+                delete band.autoRange;
+            }
+            return band;
+        },
+        styleFromPreset(preset) {
+            if (preset.style && preset.style.bands.length) {
+                const styleArray = [];
+                preset.style.bands.forEach((layer) => {
+                    const styleEntry = {
+                        min: layer.autoRange !== undefined ? `min:${layer.autoRange / 100}` : parseInt(layer.min),
+                        max: layer.autoRange !== undefined ? `max:${layer.autoRange / 100}` : parseInt(layer.max),
+                        palette: layer.palette,
+                        framedelta: layer.framedelta,
+                        band: layer.band
+                    };
+                    if (!styleEntry.min) delete styleEntry.min;
+                    if (!styleEntry.max) delete styleEntry.max;
+                    styleArray.push(styleEntry);
+                });
+                return styleArray;
             }
-            return band
         },
         styleEqual(style1, style2) {
             if (style1 === style2) {
-                return true
+                return true;
             }
             if (style1.length !== style2.length) {
-                return false
+                return false;
             }
             return style1.every((b1) => {
-                b1 = this.styleFromAutoRange(b1)
-                let b2 = style2.find((b) => b.framedelta === b1.framedelta && b.band === b1.band)
+                b1 = this.styleFromAutoRange(b1);
+                let b2 = style2.find((b) => b.framedelta === b1.framedelta && b.band === b1.band);
                 if (b2) {
-                    b2 = this.styleFromAutoRange(b2)
+                    b2 = this.styleFromAutoRange(b2);
                     return (
-                        b1.min === b2.min
-                        && b1.max === b2.max
-                        && b1.palette === b2.palette
-                    )
-                } else return false
-            })
+                        b1.min === b2.min &&
+                        b1.max === b2.max &&
+                        b1.palette === b2.palette
+                    );
+                } else return false;
+            });
         },
         checkPresetMatch() {
             if (this.currentStyle) {
                 const match = this.availablePresets.find((p) => (
-                    p.mode.id === this.currentMode.id
-                    && p.frame === this.currentFrame
-                    && this.styleEqual(this.currentStyle.bands, p.style.bands)
-                ))
-                this.selectedPreset = match ? match.name : undefined
-            }
-        }
-    },
-    computed: {
-        generatedPresetName() {
-            let name = `${this.currentMode.name} control - Frame ${this.currentFrame}`;
-            if (this.currentMode.id === 2) {
-                name = `${this.currentStyle.bands.length} channels`
-            } else if (this.currentMode.id === 3) {
-                name = `${this.currentStyle.bands.length} bands`
+                    p.mode.id === this.currentMode.id &&
+                    p.frame === this.currentFrame &&
+                    this.styleEqual(this.currentStyle.bands, this.styleFromPreset(p))
+                ));
+                this.selectedPreset = match ? match.name : undefined;
             }
-            return name;
-        },
-        availablePresets() {
-            return this.itemPresets.concat(this.folderPresets)
         }
-    },
-    watch: {
-        newPresetName() {
-            if (this.newPresetName){
-                this.errorMessage = undefined;
-            }
-        },
-        selectedPreset() {
-            if (this.selectedPreset) {
-                const preset = this.availablePresets.find((p) => p.name === this.selectedPreset)
-                if (preset.mode && preset.mode.id !== undefined) {
-                    this.$emit('setCurrentMode', preset.mode);
-                }
-                if (preset.frame !== undefined) {
-                    this.$emit('setCurrentFrame', preset.frame)
-                }
-                if (preset.style && preset.style.bands.length) {
-                    const styleArray = []
-                    preset.style.bands.forEach((layer) => {
-                        const styleEntry = {
-                            min: layer.autoRange !== undefined ? `min:${layer.autoRange / 100}` : parseInt(layer.min),
-                            max: layer.autoRange !== undefined ? `max:${layer.autoRange / 100}` : parseInt(layer.max),
-                            palette: layer.palette,
-                            framedelta: layer.framedelta,
-                            band: layer.band,
-                        }
-                        if (!styleEntry.min) delete styleEntry.min
-                        if (!styleEntry.max) delete styleEntry.max
-                        styleArray.push(styleEntry);
-                    });
-                    this.$emit('updateStyle', preset.mode.id, {bands: styleArray, preset: true})
-                }
-            }
-        },
-        currentMode() {
-            this.checkPresetMatch()
-        },
-        currentFrame() {
-            this.checkPresetMatch()
-        },
-        currentStyle() {
-            this.checkPresetMatch()
-        }
-    },
-    mounted() {
-        this.getPresets()
-    },
-}
+    }
+};
 </script>
 
 <template>
-    <div class="presets-menu">
-        Image View Presets:
-        <select v-model="selectedPreset">
-            <option v-if="availablePresets.length === 0" :value="undefined" selected disabled>
-                No presets available
-            </option>
-            <option v-else :value="undefined" selected disabled>
-                Select a preset
-            </option>
-            <option
-                v-for="preset in availablePresets"
-                :key="preset.id"
-                >
-                {{ preset.name }}
-            </option>
-        </select>
-        <i
-            class="icon-trash"
-            v-if="selectedPreset"
-            @click="deleteSelectedPreset"
-        />
-        <i
-            class="icon-plus"
-            @click="showPresetCreation = !showPresetCreation"
-        />
-        <div v-if="showPresetCreation" class="preset-creation">
-            Save Current State as New Preset:
-            <input
-                v-model="newPresetName"
-                :placeholder="generatedPresetName"
-            >
-            <span class="red--text">{{ errorMessage }}</span>
-            <button @click="addPreset" v-if="errorMessage === undefined">
-                Save Preset
-            </button>
-            <button @click="(e) => addPreset(e, true)" v-else>
-                Update Preset
-            </button>
-        </div>
+  <div class="presets-menu">
+    Image View Presets:
+    <select v-model="selectedPreset">
+      <option
+        v-if="availablePresets.length === 0"
+        :value="undefined"
+        selected
+        disabled
+      >
+        No presets available
+      </option>
+      <option
+        v-else
+        :value="undefined"
+        selected
+        disabled
+      >
+        Select a preset
+      </option>
+      <option
+        v-for="preset in availablePresets"
+        :key="preset.id"
+      >
+        {{ preset.name }}
+      </option>
+    </select>
+    <i
+      v-if="selectedPreset"
+      class="icon-trash"
+      @click="deleteSelectedPreset"
+    />
+    <i
+      class="icon-plus"
+      @click="showPresetCreation = !showPresetCreation"
+    />
+    <div
+      v-if="showPresetCreation"
+      class="preset-creation"
+    >
+      Save Current State as New Preset:
+      <input
+        v-model="newPresetName"
+        :placeholder="generatedPresetName"
+      >
+      <span class="red--text">{{ errorMessage }}</span>
+      <button
+        v-if="errorMessage === undefined"
+        @click="addPreset"
+      >
+        Save Preset
+      </button>
+      <button
+        v-else
+        @click="(e) => addPreset(e, true)"
+      >
+        Update Preset
+      </button>
     </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/girder_annotation/girder_large_image_annotation/web_client/package.json b/girder_annotation/girder_large_image_annotation/web_client/package.json
index 77dbf8598..fb325c9d2 100644
--- a/girder_annotation/girder_large_image_annotation/web_client/package.json
+++ b/girder_annotation/girder_large_image_annotation/web_client/package.json
@@ -66,7 +66,8 @@
     "stylusSupremacy.alwaysUseZeroWithoutUnit": true,
     "stylusSupremacy.reduceMarginAndPaddingValues": true,
     "devDependencies": {
-        "@girder/eslint-config": "^3.0.0-rc1",
+        "@girder/eslint-config": "*",
+        "@girder/pug-lint-config": "*",
         "eslint": "^8.20.0",
         "eslint-config-semistandard": "^17.0.0",
         "eslint-config-standard": "^17.0.0",
@@ -74,12 +75,11 @@
         "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-n": "^15.2.4",
         "eslint-plugin-promise": "^6.0.0",
-        "@girder/pug-lint-config": "^3.0.0-rc1",
         "pug-lint": "^2.6.0",
         "stylus-supremacy": "^2.17.5"
     },
     "scripts": {
         "lint": "eslint --cache . && eslint --no-eslintrc -c ./package.json --cache ../../test_annotation/web_client_specs && pug-lint . && stylus-supremacy format --compare ./**/*.styl --options package.json",
-        "format": "eslint --cache --fix . && eslint --no-eslintrc -c ./package.json --cache --fix ../../test_annotation/web_client_specs && eslint --cache --fix . && stylus-supremacy format ./**/*.styl --replace --options package.json"
+        "format": "eslint --cache --fix . && eslint --no-eslintrc -c ./package.json --cache --fix ../../test_annotation/web_client_specs && stylus-supremacy format ./**/*.styl --replace --options package.json"
     }
 }