From cf9836760c710eec3d1b9712d2cb541de86730f1 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Mon, 20 Nov 2023 09:25:11 -0500
Subject: [PATCH 1/2] 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
---
 CHANGES.rst                                   |  2 +-
 docs/dev/ui_style_guide.rst                   | 15 +++++++-----
 jdaviz/app.py                                 |  1 +
 jdaviz/components/plugin_action_button.vue    | 24 +++++++++++++++++++
 jdaviz/components/plugin_add_results.vue      | 22 ++++++-----------
 jdaviz/components/plugin_table.vue            |  5 ++--
 .../plugins/export_plot/export_plot.vue       | 18 +++++++-------
 .../default/plugins/line_lists/line_lists.vue |  4 +++-
 .../plugins/model_fitting/model_fitting.vue   | 10 ++++----
 .../plugins/plot_options/plot_options.py      |  4 +++-
 .../plugins/plot_options/plot_options.vue     |  8 ++++++-
 .../plugins/subset_plugin/subset_plugin.vue   | 22 ++++++++++++++---
 .../aper_phot_simple/aper_phot_simple.vue     |  9 ++++++-
 .../imviz/plugins/catalogs/catalogs.vue       | 15 ++++++++++--
 .../line_profile_xy/line_profile_xy.vue       |  7 +++++-
 15 files changed, 116 insertions(+), 50 deletions(-)
 create mode 100644 jdaviz/components/plugin_action_button.vue

diff --git a/CHANGES.rst b/CHANGES.rst
index efa17e696b..3a2492eab7 100644
--- 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
index f9f627c58d..d507f70f25 100644
--- 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
index e06a26924d..2ec4180432 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -140,6 +140,7 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      'plugin-viewer-select': 'components/plugin_viewer_select.vue',
                      'plugin-layer-select': 'components/plugin_layer_select.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
new file mode 100644
index 0000000000..5222eee794
--- /dev/null
+++ 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
index c8db2dd96a..bdd7c4715c 100644
--- 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
index d6b56169b9..323c2e372a 100644
--- a/jdaviz/components/plugin_table.vue
+++ b/jdaviz/components/plugin_table.vue
@@ -54,9 +54,8 @@
     </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>
diff --git a/jdaviz/configs/default/plugins/export_plot/export_plot.vue b/jdaviz/configs/default/plugins/export_plot/export_plot.vue
index 1b59e64b67..43af03ed85 100644
--- 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
index 990d95bbea..ecf8a82c65 100644
--- 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
index 921a627e3a..b135882af0 100644
--- 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
index b4d4318a49..191f5169f7 100644
--- 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
index 0f9778c8df..fbe6379994 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -71,7 +71,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
index e6b13ae1f2..a4bd2f9752 100644
--- 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
index 32d867a064..cf022a417c 100644
--- 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
index 092c3398ce..d5b089d91f 100644
--- 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
index 9304009000..04b443abad 100644
--- 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">

From 4e9d41ee3141729026122df835e681069e4076a5 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 22 Nov 2023 09:38:04 -0500
Subject: [PATCH 2/2] Update jdaviz/components/plugin_table.vue

Co-authored-by: Ricky O'Steen <39831871+rosteen@users.noreply.github.com>
---
 jdaviz/components/plugin_table.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jdaviz/components/plugin_table.vue b/jdaviz/components/plugin_table.vue
index 323c2e372a..5d3fe56f52 100644
--- a/jdaviz/components/plugin_table.vue
+++ b/jdaviz/components/plugin_table.vue
@@ -58,7 +58,7 @@
         :results_isolated_to_plugin="true"
         @click="clear_table"
         >Clear Table
-      </v-btn>
+      </plugin-action-button>
     </v-row>
   </div>
 </template>