Merge pull request #445 from DigitalSlideArchive/update-frame-selector

Updates for large_image frame selector differences.

Author: manthey

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;

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
 

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',