From 648e5f5becdab035c65ef7e47805ce791e26df27 Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Tue, 28 Jan 2025 16:23:51 -0500
Subject: [PATCH] Updates for large_image frame selector differences.

---
 .../web_client/panels/FrameSelectorWidget.js  | 34 +++++++++++++++++--
 .../panels/frameSelectorWidget.styl           | 25 +++++++++++++-
 setup.py                                      |  2 +-
 3 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/histomicsui/web_client/panels/FrameSelectorWidget.js b/histomicsui/web_client/panels/FrameSelectorWidget.js
index dd2cea5b..fe277a8f 100644
--- a/histomicsui/web_client/panels/FrameSelectorWidget.js
+++ b/histomicsui/web_client/panels/FrameSelectorWidget.js
@@ -1,7 +1,14 @@
 import _ from 'underscore';
+import Vue from 'vue';
 
+import {restRequest} from '@girder/core/rest';
 import Panel from '@girder/slicer_cli_web/views/Panel';
-import FrameSelector from '@girder/large_image/vue/components/FrameSelector.vue';
+import FrameSelector from '@girder/large_image/widgets/FrameSelector.vue';
+import DualInput from '@girder/large_image/widgets/DualInput.vue';
+import CompositeLayers from '@girder/large_image/widgets/CompositeLayers.vue';
+import HistogramEditor from '@girder/large_image/widgets/HistogramEditor.vue';
+import PresetsMenu from '@girder/large_image/vue/components/PresetsMenu.vue';
+import colors from '@girder/large_image/widgets/colors.json';
 
 import frameSelectorWidget from '../templates/panels/frameSelectorWidget.pug';
 import '../stylesheets/panels/frameSelectorWidget.styl';
@@ -23,14 +30,35 @@ var FrameSelectorWidget = Panel.extend({
             collapsed: this.$('.s-panel-content.collapse').length && !this.$('.s-panel-content').hasClass('in')
         }));
         const el = this.$('#vue-container').get(0);
-        const vm = new FrameSelector({
+        const getFrameHistogram = (params) => {
+            params = Object.assign({}, params);
+            restRequest({
+                type: 'GET',
+                url: 'item/' + this._itemId + '/tiles/histogram',
+                data: params
+            }).then((response) => {
+                const frameHistograms = this.vueApp._props.frameHistograms || {};
+                frameHistograms[params.frame] = response;
+                this.vueApp._props.frameHistograms = Object.assign({}, frameHistograms);
+                return undefined;
+            });
+        };
+        CompositeLayers.components = {HistogramEditor};
+        FrameSelector.components = {DualInput, CompositeLayers, HistogramEditor, PresetsMenu};
+        const Component = Vue.extend(FrameSelector);
+        const vm = new Component({
             el,
             propsData: {
+                currentFrame: 0,
                 itemId: this._itemId,
                 imageMetadata: this._tiles,
                 frameUpdate: (frame, style) => {
                     this.viewer.frameUpdate(frame, style);
-                }
+                },
+                liConfig: this._liConfig,
+                frameHistograms: undefined,
+                getFrameHistogram,
+                colors
             }
         });
         this.vueApp = vm;
diff --git a/histomicsui/web_client/stylesheets/panels/frameSelectorWidget.styl b/histomicsui/web_client/stylesheets/panels/frameSelectorWidget.styl
index 42148795..2df9251f 100644
--- a/histomicsui/web_client/stylesheets/panels/frameSelectorWidget.styl
+++ b/histomicsui/web_client/stylesheets/panels/frameSelectorWidget.styl
@@ -32,12 +32,20 @@
   .table-container td, .table-container th
     padding 0 5px 0 0
 
+  .table-row
+    height unset
+    vertical-align unset
+    border-bottom 1px solid #ddd !important
+
   td
     padding 2px
 
   .current-color, .color-col
     width 25px
 
+  .color-col
+    padding unset
+
   .enable-col
     width initial
 
@@ -83,6 +91,7 @@
 
     .canvas
       width calc(100% - 120px)
+      left 65px
 
     .percentage-input
       width unset
@@ -93,10 +102,24 @@
     .percentage-input:after
       left 42px
 
+  .auto-range-col
+    min-width unset
+    display inline-block
+
+  .switch
+    width 45px
+
+  .onoff-slider.checked:before
+    transform translateX(22px)
+
+  .expand-btn
+    font-size unset
+    font-weight unset
+
   .auto-range-label > .small-text
     display none
 
-  .auto-range-toggle
+  .auto-range-label
     min-width 60px
     display block
 
diff --git a/setup.py b/setup.py
index ade66d69..3516b88f 100644
--- a/setup.py
+++ b/setup.py
@@ -43,7 +43,7 @@ def prerelease_local_scheme(version):
         'Programming Language :: Python :: 3.13',
     ],
     install_requires=[
-        'girder-large-image-annotation>=1.30.1',
+        'girder-large-image-annotation>=1.31.0',
         'girder-slicer-cli-web[girder]>=1.4.0',
         'cachetools',
         'orjson',