show spinner while stretch histogram data updating

spacetelescope · Jan 2, 2024 · d425cf1 · d425cf1
1 parent 8b997fb
commit d425cf1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 9 deletions.
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.py b/jdaviz/configs/default/plugins/plot_options/plot_options.py
@@ -334,6 +334,7 @@ class PlotOptions(PluginTemplateMixin):
     cmap_samples = Dict().tag(sync=True)
     swatches_palette = List().tag(sync=True)
     apply_RGB_presets_spinner = Bool(False).tag(sync=True)
+    stretch_hist_spinner = Bool(False).tag(sync=True)
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -713,6 +714,7 @@ def _update_stretch_hist_sync(self, msg={}):
 
     @observe('is_active', 'layer_selected', 'viewer_selected',
              'stretch_hist_zoom_limits')
+    @with_spinner('stretch_hist_spinner')
     @skip_if_no_updates_since_last_active()
     def _update_stretch_histogram(self, msg={}):
         if not hasattr(self, 'viewer'):  # pragma: no cover

diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -465,15 +465,33 @@
       </glue-state-sync-wrapper>
 
       <div v-if="stretch_function_sync.in_subscribed_states && (!layer_multiselect || layer_selected.length <= 1)">
-        <glue-state-sync-wrapper 
-            :sync="stretch_hist_sync"
-            :multiselect="layer_multiselect" 
-            @unmix-state="unmix_state(['stretch_function', 'stretch_params',
-                                       'stretch_vmin', 'stretch_vmax', 
-                                       'image_color_mode', 'image_color', 'image_colormap'])"
-        >
-          <jupyter-widget :widget="stretch_histogram_widget"/>
-        </glue-state-sync-wrapper>
+        <div style="display: grid"> <!-- overlay container -->
+          <div style="grid-area: 1/1">
+            <glue-state-sync-wrapper 
+                :sync="stretch_hist_sync"
+                :multiselect="layer_multiselect" 
+                @unmix-state="unmix_state(['stretch_function', 'stretch_params',
+                                           'stretch_vmin', 'stretch_vmax', 
+                                           'image_color_mode', 'image_color', 'image_colormap'])"
+            >
+              <jupyter-widget :widget="stretch_histogram_widget"/>
+            </glue-state-sync-wrapper>
+          </div>
+          <div v-if="stretch_hist_spinner"
+               class="text-center"
+               style="grid-area: 1/1; 
+                      z-index:2;
+                      margin-left: -24px;
+                      margin-right: -24px;
+                      padding-top: 240px;
+                      background-color: rgb(0 0 0 / 20%)">
+            <v-progress-circular
+              indeterminate
+              color="spinner"
+              size="50"
+              width="6"
+            ></v-progress-circular>
+          </div>
 
         <v-row>
           <v-expansion-panels accordion>