plugin-action-button component for consistent styling (#2571)

* create new <plugin-action-button> component * better consistency for coloring by passing :results_isolated_to_plugin="true/false" * update UI style guide * adds spinner for "Calculate" button in aperture photometry, "Search" in catalogs, and "Apply RGB Presets" in plot options
spacetelescope · Nov 22, 2023 · be28971 · be28971
1 parent cde8d3f
commit be28971
Show file tree

Hide file tree

Showing 15 changed files with 117 additions and 51 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -19,7 +19,7 @@ New Features
 
 - Add button in Plot Options to apply preset RBG options to visible layers when in Monochromatic mode. [#2558, #2568]
 
-- Plugin "action" buttons disable and show icon indicating that an action is in progress. [#2560]
+- Plugin "action" buttons disable and show icon indicating that an action is in progress. [#2560, #2571]
 
 - Plugin APIs now include a ``close_in_tray()`` method. [#2562]
 

diff --git a/docs/dev/ui_style_guide.rst b/docs/dev/ui_style_guide.rst
@@ -20,8 +20,12 @@ try to adhere to the following principles:
   components are necessary in a single row.  Always emphasize readability at the default/minimum
   width of the plugin tray, rather than using columns that result in a ton of text overflow.
 * Use ``<v-row justify="end">`` to align content to the right (such as action buttons).
-* Action buttons should use ``<v-btn text></v-btn>`` with ``color="accent"`` if applying something
-  to the viewers/apps/data, and ``color="primary"`` otherwise.
+* Action buttons should use ``<plugin-action-button :results_isolated_to_plugin="true/false">text</v-btn>``
+  to control the color depending on whether the button affects things outside the plugin itself
+  (adding/modifying data collection or subset entries, etc) or are isolated to within the plugin
+  (adding model components in model fitting, etc).  These buttons can be wrapped in tooltip components
+  and also have the capability of adding spinners (by passing a traitlet to ``:spinner``) or disabling
+  (by passing a traitlet to ``:disabled``).
 * To remove vertical padding from rows (i.e., two successive buttons stacked vertically), use
   ``<v-row class="row-min-bottom-padding">``.
 * Use new ``<j-plugin-section-header>Header Text</j-plugin-section-header>`` to separate content
@@ -85,13 +89,12 @@ try to adhere to the following principles:
           </v-row>
 
           <v-row justify="end">
-            <v-btn
-              color="primary"
-              text
+            <plugin-action-button
+              :results_isolated_to_plugin="false"
               :disabled="!form_valid"
               @click="(e) => {add_model(e); validate()}"
               >Action Text
-            </v-btn>
+            </plugin-action-button>
           </v-row>
         </v-form>
       </j-tray-plugin>

diff --git a/jdaviz/app.py b/jdaviz/app.py
@@ -141,6 +141,7 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      'plugin-layer-select': 'components/plugin_layer_select.vue',
                      'plugin-layer-select-tabs': 'components/plugin_layer_select_tabs.vue',
                      'plugin-editable-select': 'components/plugin_editable_select.vue',
+                     'plugin-action-button': 'components/plugin_action_button.vue',
                      'plugin-add-results': 'components/plugin_add_results.vue',
                      'plugin-auto-label': 'components/plugin_auto_label.vue',
                      'plugin-file-import-select': 'components/plugin_file_import_select.vue',

diff --git a/jdaviz/components/plugin_action_button.vue b/jdaviz/components/plugin_action_button.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-btn :disabled="spinner || disabled"
+    text
+    :color="results_isolated_to_plugin ? 'primary' : 'accent'"
+    @click="$emit('click')"
+  >
+    <v-progress-circular
+      v-if="spinner"
+      indeterminate
+      color="primary"
+      size="20"
+      width="3"
+      style="margin-right: 4px"
+    ></v-progress-circular>
+    <span v-if="spinner === false" style="width: 24px"></span>
+    <slot/>
+  </v-btn>
+</template>
+
+<script>
+module.exports = {
+  props: ['spinner', 'disabled', 'results_isolated_to_plugin']
+};
+</script>
diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue
@@ -54,22 +54,14 @@
 
     <v-row justify="end">
       <j-tooltip :tooltipcontent="label_overwrite ? action_tooltip+' and replace existing entry' : action_tooltip">
-        <v-btn :disabled="label_invalid_msg.length > 0 || action_disabled || action_spinner"
-          text
-          color="accent"
-          @click="$emit('click:action')"
-        >
-          <v-progress-circular
-            v-if="action_spinner"
-            indeterminate
-            color="primary"
-            size="20"
-            width="3"
-            style="margin-right: 4px"
-          ></v-progress-circular>
-          <span v-else style="width: 24px"></span>
+        <plugin-action-button 
+          :spinner="action_spinner"
+          :disabled="label_invalid_msg.length > 0 || action_disabled"
+          :results_isolated_to_plugin="false"
+          @click="$emit('click:action')">
+
           {{action_label}}{{label_overwrite ? ' (Overwrite)' : ''}}
-        </v-btn>
+        </plugin-action-button>
       </j-tooltip>
     </v-row>
   </div>

diff --git a/jdaviz/components/plugin_table.vue b/jdaviz/components/plugin_table.vue
@@ -54,12 +54,11 @@
     </v-row>
 
     <v-row v-if="clear_table" justify="end">
-      <v-btn
-        color="primary"
-        text
+      <plugin-action-button
+        :results_isolated_to_plugin="true"
         @click="clear_table"
         >Clear Table
-      </v-btn>
+      </plugin-action-button>
     </v-row>
   </div>
 </template>

diff --git a/jdaviz/configs/default/plugins/export_plot/export_plot.vue b/jdaviz/configs/default/plugins/export_plot/export_plot.vue
@@ -13,24 +13,22 @@
 
     <div v-if="viewer_selected">
       <v-row justify="end" class="row-min-bottom-padding">
-        <v-btn
-         text
-         color="primary"
+        <plugin-action-button
+         :results_isolated_to_plugin="true"
          @click="() => save_figure('png')"
          :disabled="movie_recording"
         >
-         Export to PNG
-        </v-btn>
+          Export to PNG
+        </plugin-action-button>
       </v-row>
       <v-row justify="end">
-        <v-btn
-         text
-         color="primary"
+        <plugin-action-button
+         :results_isolated_to_plugin="true"
          @click="() => save_figure('svg')"
          :disabled="movie_recording"
         >
-         Export to SVG
-        </v-btn>
+          Export to SVG
+        </plugin-action-button>
       </v-row>
 
       <v-row v-if="config==='cubeviz' && viewer_selected!=='spectrum-viewer' && movie_enabled">

diff --git a/jdaviz/configs/default/plugins/line_lists/line_lists.vue b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
@@ -106,7 +106,9 @@
 
     <v-row justify="end">
       <j-tooltip tipid='plugin-line-lists-load'>
-        <v-btn color="primary" text @click="load_list">Load List</v-btn>
+        <plugin-action-button 
+          :results_isolated_to_plugin="true"
+          @click="load_list">Load List</plugin-action-button>
       </j-tooltip>
     </v-row>
 

diff --git a/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue b/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue
@@ -74,13 +74,13 @@
 
       <v-row justify="end">
         <j-tooltip tipid='plugin-model-fitting-add-model'>
-          <v-btn 
-            color="primary" 
-            text 
+          <plugin-action-button
             :disabled="!form_valid_model_component || comp_label_invalid_msg.length > 0"
+            :results_isolated_to_plugin="true"
             @click="add_model"
-            >Add Component
-          </v-btn>
+          >
+            Add Component
+          </plugin-action-button>
         </j-tooltip>
       </v-row>
     </v-form>

diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.py b/jdaviz/configs/default/plugins/plot_options/plot_options.py
@@ -22,7 +22,7 @@
 from jdaviz.core.registries import tray_registry
 from jdaviz.core.template_mixin import (PluginTemplateMixin, ViewerSelect, LayerSelect,
                                         PlotOptionsSyncState, Plot,
-                                        skip_if_no_updates_since_last_active)
+                                        skip_if_no_updates_since_last_active, with_spinner)
 from jdaviz.core.user_api import PluginUserApi
 from jdaviz.core.tools import ICON_DIR
 from jdaviz.core.custom_traitlets import IntHandleEmpty
@@ -326,6 +326,7 @@ class PlotOptions(PluginTemplateMixin):
     show_viewer_labels = Bool(True).tag(sync=True)
 
     swatches_palette = List().tag(sync=True)
+    apply_RGB_presets_spinner = Bool(False).tag(sync=True)
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -605,6 +606,7 @@ def vue_set_value(self, data):
         value = data.get('value')
         setattr(self, attr_name, value)
 
+    @with_spinner('apply_RGB_presets_spinner')
     def apply_RGB_presets(self):
         """
         Applies preset colors, opacities, and stretch settings to all visible layers

diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -70,7 +70,13 @@
     <div v-if="image_color_mode_value === 'One color per layer' && !image_color_mode_sync['mixed']">
       <v-row justify="end">
         <j-tooltip tooltipcontent="Apply preset RGB colors, scaling, and opacities to visible layers">
-          <v-btn color="accent" text @click="apply_RGB_presets">Assign Presets</v-btn>
+          <plugin-action-button
+            :spinner="apply_RGB_presets_spinner"
+            :results_isolated_to_plugin="false"
+            @click="apply_RGB_presets"
+          >
+            Assign Presets
+          </plugin-action-button>
         </j-tooltip>
       </v-row>
     </div>

diff --git a/jdaviz/configs/default/plugins/subset_plugin/subset_plugin.vue b/jdaviz/configs/default/plugins/subset_plugin/subset_plugin.vue
@@ -114,12 +114,28 @@
 
       <v-row v-if="!multiselect" justify="end" no-gutters>
         <j-tooltip v-if="can_freeze" tooltipcontent="Freeze subset to a mask on the underlying data entries">
-          <v-btn color="primary" text @click="freeze_subset">Freeze</v-btn>
+          <plugin-action-button
+            :results_isolated_to_plugin="false"
+            @click="freeze_subset"
+          >
+              Freeze
+          </plugin-action-button>
         </j-tooltip>
         <j-tooltip tooltipcontent="Convert composite subset to use only add mode to connect subregions">
-          <v-btn :disabled="!can_simplify" color="primary" text @click="simplify_subset">Simplify</v-btn>
+          <plugin-action-button
+            :disabled="!can_simplify"
+            :results_isolated_to_plugin="false"
+            @click="simplify_subset"
+          >
+            Simplify
+          </plugin-action-button>
         </j-tooltip>
-        <v-btn color="primary" text @click="update_subset">Update</v-btn>
+        <plugin-action-button
+          :results_isolated_to_plugin="false"
+          @click="update_subset"
+        >
+          Update
+        </plugin-action-button>
       </v-row>
   </j-tray-plugin>
 </template>
diff --git a/jdaviz/configs/imviz/plugins/aper_phot_simple/aper_phot_simple.vue b/jdaviz/configs/imviz/plugins/aper_phot_simple/aper_phot_simple.vue
@@ -154,7 +154,14 @@
         </v-row>
 
         <v-row justify="end">
-          <v-btn color="primary" text @click="do_aper_phot" :disabled="aperture_selected === background_selected || spinner">Calculate</v-btn>
+          <plugin-action-button
+            :results_isolated_to_plugin="true"
+            @click="do_aper_phot"
+            :spinner="spinner"
+            :disabled="aperture_selected === background_selected"
+          >
+            Calculate
+          </plugin-action-button>
         </v-row>
       </div>
     </div>

diff --git a/jdaviz/configs/imviz/plugins/catalogs/catalogs.vue b/jdaviz/configs/imviz/plugins/catalogs/catalogs.vue
@@ -29,10 +29,21 @@
 
     <v-row class="row-no-outside-padding">
        <v-col>
-         <v-btn color="primary" text @click="do_clear">Clear</v-btn>
+         <plugin-action-button
+            :results_isolated_to_plugin="true"
+            @click="do_clear"
+          >
+            Clear
+          </plugin-action-button>
        </v-col>
        <v-col>
-         <v-btn color="primary" text @click="do_search" :disabled="spinner">Search</v-btn>
+         <plugin-action-button
+            :results_isolated_to_plugin="true"
+            @click="do_search"
+            :spinner="spinner"
+          >
+            Search
+          </plugin-action-button>
        </v-col>
     </v-row>
 

diff --git a/jdaviz/configs/imviz/plugins/line_profile_xy/line_profile_xy.vue b/jdaviz/configs/imviz/plugins/line_profile_xy/line_profile_xy.vue
@@ -34,7 +34,12 @@
     </v-row>
 
     <v-row justify="end">
-      <v-btn color="primary" text @click="draw_plot">Plot</v-btn>
+      <plugin-action-button
+        :results_isolated_to_plugin="true"
+        @click="draw_plot"
+      >
+        Plot
+      </plugin-action-button>
     </v-row>
 
     <v-row v-if="plot_available">