From a34ebc82ebddccc68996043b1477e56cf57706f0 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 13 Sep 2023 13:27:03 -0400
Subject: [PATCH 01/24] POC: plugin API hints demo

---
 jdaviz/components/plugin_add_results.vue       | 17 +++++++++++++----
 jdaviz/components/plugin_dataset_select.vue    | 11 +++++++++--
 jdaviz/components/tray_plugin.vue              |  5 +++++
 .../gaussian_smooth/gaussian_smooth.vue        | 18 +++++++++++++++++-
 jdaviz/core/template_mixin.py                  |  1 +
 jdaviz/core/user_api.py                        |  2 +-
 6 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue
index 9d576b17ee..61fd4378fe 100644
--- a/jdaviz/components/plugin_add_results.vue
+++ b/jdaviz/components/plugin_add_results.vue
@@ -8,8 +8,9 @@
       :auto="label_auto"
       @update:auto="$emit('update:label_auto', $event)"
       :invalid_msg="label_invalid_msg"
-      :label="label_label ? label_label : 'Output Data Label'"
+      :label="show_api_hints && label_api_hint ? label_api_hint : label_label ? label_label : 'Output Data Label'"
       :hint="label_hint ? label_hint : 'Label for the resulting data item.'"
+      :class="show_api_hints ? 'api_hint' : null"
     ></plugin-auto-label>   
 
     <div v-if="add_to_viewer_items.length > 2">
@@ -77,6 +78,14 @@
           {{action_label}}{{label_overwrite ? ' (Overwrite)' : ''}}
         </plugin-action-button>
       </j-tooltip>
+      <v-alert v-if="show_api_hints && action_api_hint"
+          color="orange"
+          dense
+          text
+          class="api_hint"
+      >
+          {{action_api_hint}}
+      </v-alert>
     </v-row>
   </div>
 </template>
@@ -89,8 +98,8 @@
 
 <script>
 module.exports = {
-  props: ['label', 'label_default', 'label_auto', 'label_invalid_msg', 'label_overwrite', 'label_label', 'label_hint',
-          'add_to_viewer_items', 'add_to_viewer_selected', 'auto_update_result', 'add_to_viewer_hint',
-          'action_disabled', 'action_spinner', 'action_label', 'action_tooltip']
+  props: ['label', 'label_default', 'label_auto', 'label_invalid_msg', 'label_overwrite', 'label_label', 'label_hint', 'label_api_hint',
+          'add_to_viewer_items', 'add_to_viewer_selected', 'add_to_viewer_hint', 'auto_update_result', 'add_to_viewer_hint',
+          'action_disabled', 'action_spinner', 'action_label', 'action_api_hint', 'action_tooltip', 'show_api_hints']
 };
 </script>
diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index e0e73635dd..c39368075a 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -7,13 +7,14 @@
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
-      :label="label ? label : 'Data'"
+      :label="show_api_hints && api_hint ? api_hint : (label ? label : 'Data')"
       :hint="hint ? hint : 'Select data.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
       :chips="multiselect"
       item-text="label"
       item-value="label"
+      :class="show_api_hint ? 'api_hint' : null"
       persistent-hint
     >
       <template slot="selection" slot-scope="data">
@@ -63,7 +64,13 @@
 </template>
 <script>
 module.exports = {
-  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect'],
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect', 'api_hint', 'show_api_hint'],
+  methods: {
+    isWCSOnlyLayer(item) {
+      const wcsOnly = Object.keys(this.$props.viewer.wcs_only_layers).includes(item.name)
+      return wcsOnly
+    },
+  }
 };
 </script>
 
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index e5f2a95c53..16c177129a 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -108,4 +108,9 @@ module.exports = {
     margin-top: 2px !important;
     margin-bottom: 2px !important;
   }
+
+  .api_hint :is(.v-select__slot, .v-text-field__slot) > label.v-label {
+    color: orange !important;
+    font-family: monospace;
+  }
 </style>
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index 08353c7c30..48aa37f1e3 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -5,6 +5,16 @@
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
+
+      <v-alert v-if="show_api_hints"
+          color="orange"
+          dense
+          text
+          class="api_hint"
+      >
+          plg = {{config}}.plugins['Gaussian Smooth']
+      </v-alert>
+
       <v-row v-if="show_modes">
         <v-select
           :menu-props="{ left: true }"
@@ -25,16 +35,19 @@
         :selected.sync="dataset_selected"
         :show_if_single_entry="['mosviz', 'cubeviz'].indexOf(config) !== -1"
         label="Data"
+        api_hint='plg.dataset='
+        :show_api_hints="show_api_hints"
         hint="Select the data to be smoothed."
       />
 
       <v-row>
         <v-text-field
           ref="stddev"
-          label="Standard deviation"
+          :label="show_api_hints ? 'plg.stddev=' : 'Standard deviation'"
           v-model.number="stddev"
           type="number"
           hint="The stddev of the kernel, in pixels."
+          :class="show_api_hints ? 'api_hint' : null"
           persistent-hint
           :rules="[() => !!stddev || 'This field is required',
                    () => stddev > 0 || 'Kernel must be greater than zero']"
@@ -48,11 +61,14 @@
         :label_invalid_msg="results_label_invalid_msg"
         :label_overwrite="results_label_overwrite"
         label_hint="Label for the smoothed data"
+        label_api_hint='plg.add_results.label='
         :add_to_viewer_items="add_to_viewer_items"
         :add_to_viewer_selected.sync="add_to_viewer_selected"
         action_label="Smooth"
         action_tooltip="Smooth data"
         :action_spinner="spinner"
+        action_api_hint='plg.smooth(add_data=True)'
+        :show_api_hints="show_api_hints"
         @click:action="apply"
       ></plugin-add-results>
     </j-tray-plugin>
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index bf196988ba..843693b27e 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -402,6 +402,7 @@ class PluginTemplateMixin(TemplateMixin):
     is_active = Bool(False).tag(sync=True)  # noqa read-only: whether the previews should be shown according to plugin_opened and keep_active
     scroll_to = Bool(False).tag(sync=True)  # noqa once set to True, vue will scroll to the element and reset to False
     spinner = Bool(False).tag(sync=True)  # noqa use along-side @with_spinner() and <plugin-add-results :action_spinner="spinner">
+    show_api_hints = Bool(False).tag(sync=True)
     previews_temp_disabled = Bool(False).tag(sync=True)  # noqa use along-side @with_temp_disable() and <plugin-previews-temp-disabled :previews_temp_disabled.sync="previews_temp_disabled" :previews_last_time="previews_last_time" :show_live_preview.sync="show_live_preview"/>
     previews_last_time = Float(0).tag(sync=True)
     supports_auto_update = Bool(False).tag(sync=True)  # noqa whether this plugin supports auto-updating plugin results (requires __call__ method)
diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index c54cc29399..39c0573978 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -128,7 +128,7 @@ class PluginUserApi(UserApiWrapper):
       help(plugin_object.show)
     """
     def __init__(self, plugin, expose=[], readonly=[], excl_from_dict=[]):
-        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray', 'show']))
+        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray', 'show', 'show_api_hints']))
         if plugin.uses_active_status:
             expose += ['keep_active', 'as_active']
         self._deprecation_msg = None

From d646b99809a59901fb470c04d2321e2510b7e777 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 31 Oct 2023 11:54:41 -0400
Subject: [PATCH 02/24] store plugin state in metadata "history"

---
 .../default/plugins/gaussian_smooth/gaussian_smooth.py      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
index edf226d5c7..3e033c5235 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
@@ -156,6 +156,8 @@ def smooth(self, add_data=True):
         spec : `~specutils.Spectrum1D`
             The smoothed spectrum or data cube
         """
+        plugin_state = self.user_api.to_dict()
+
         if self.mode_selected == 'Spatial':
             if self.config != 'cubeviz':
                 raise NotImplementedError("spatial smoothing only supported for Cubeviz")
@@ -171,6 +173,10 @@ def smooth(self, add_data=True):
         else:
             results = self.spectral_smooth()
 
+        if '_jdaviz_history' not in results.meta.keys():
+            results.meta['_jdaviz_history'] = []
+        results.meta['_jdaviz_history'] += [plugin_state]
+
         if add_data:
             # add data to the collection/viewer
             self.add_results.add_results_from_plugin(results)

From 187f3648049532cece7943412e337eeb5e40dab8 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 31 Oct 2023 12:04:22 -0400
Subject: [PATCH 03/24] button to toggle API hints

(only hooked up for gaussian smooth for now)
---
 jdaviz/components/plugin_dataset_select.vue              | 2 +-
 jdaviz/components/tray_plugin.vue                        | 9 +++++++--
 .../default/plugins/gaussian_smooth/gaussian_smooth.vue  | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index c39368075a..9b239c7137 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -14,7 +14,7 @@
       :chips="multiselect"
       item-text="label"
       item-value="label"
-      :class="show_api_hint ? 'api_hint' : null"
+      :class="show_api_hints ? 'api_hint' : null"
       persistent-hint
     >
       <template slot="selection" slot-scope="data">
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 16c177129a..443dd11b5e 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -1,9 +1,14 @@
 <template>
   <v-container class="tray-plugin" style="padding-left: 24px; padding-right: 24px; padding-top: 12px">
     <v-row>
-      <div style="width: calc(100% - 32px)">
+      <div style="width: calc(100% - 64px)">
         <j-docs-link :link="link">{{ description }}</j-docs-link>
       </div>
+      <div style="width: 32px">
+        <v-btn icon @click="() => {$emit('update:show_api_hints', !show_api_hints)}">
+          <v-icon>mdi-code-tags</v-icon>
+        </v-btn>
+      </div>
       <div style="width: 32px">
         <j-plugin-popout :popout_button="popout_button"></j-plugin-popout>
       </div>
@@ -29,7 +34,7 @@
 
 <script>
 module.exports = {
-  props: ['irrelevant_msg', 'disabled_msg', 'description', 'link', 'popout_button',
+  props: ['irrelevant_msg', 'disabled_msg', 'description', 'show_api_hints', 'link', 'popout_button',
           'uses_active_status', 'keep_active', 'scroll_to'],
   methods: {
     isDisabled() {
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index 48aa37f1e3..404b2a55d6 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -2,6 +2,7 @@
   <j-tray-plugin
     :description="docs_description || 'Smooth data with a Gaussian kernel.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#gaussian-smooth'"
+    :show_api_hints.sync="show_api_hints"
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 

From 8c88cddde493494d59b26ce7c7902f3aa7ddc607 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 31 Oct 2023 13:15:46 -0400
Subject: [PATCH 04/24] implement to_script method

* might want to move to the UI side if we want to control the order and have a copy button
---
 jdaviz/core/user_api.py | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index 39c0573978..b73afb99e7 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -140,6 +140,24 @@ def __repr__(self):
             super().__setattr__('_deprecation_msg', None)
         return f'<{self._obj._registry_label} API>'
 
+    def to_script(self, as_string=True):
+        def _value_as_str(v):
+            if isinstance(v, str):
+                return f"'{v}'"
+            return v
+        script = [f"plg = {self._obj.app.config}.plugins['{self._obj._registry_label}']"]
+        for k, v in self.to_dict().items():
+            if hasattr(getattr(self, k), "to_script"):
+                script += getattr(self, k).to_script(as_string=False)
+            elif isinstance(v, dict):
+                # TODO: make recursive
+                script += [f"plg.{k}.{kk} = {_value_as_str(vv)}" for kk, vv in v.items()]
+            else:
+                script += [f"plg.{k} = {_value_as_str(v)}"]
+        if as_string:
+            return "\n".join(script)
+        return script
+
 
 class ViewerUserApi(UserApiWrapper):
     """

From 27f99089595b2aa3b84237a77803844d697972eb Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 31 Oct 2023 16:05:30 -0400
Subject: [PATCH 05/24] include data definition and write to script in metadata

---
 .../default/plugins/gaussian_smooth/gaussian_smooth.py      | 3 +++
 jdaviz/core/template_mixin.py                               | 6 ++++++
 jdaviz/core/user_api.py                                     | 2 ++
 3 files changed, 11 insertions(+)

diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
index 3e033c5235..05d0c6bd9a 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
@@ -157,6 +157,7 @@ def smooth(self, add_data=True):
             The smoothed spectrum or data cube
         """
         plugin_state = self.user_api.to_dict()
+        plugin_script = self.user_api.to_script(as_string=False)
 
         if self.mode_selected == 'Spatial':
             if self.config != 'cubeviz':
@@ -175,7 +176,9 @@ def smooth(self, add_data=True):
 
         if '_jdaviz_history' not in results.meta.keys():
             results.meta['_jdaviz_history'] = []
+            results.meta['_jdaviz_script'] = []
         results.meta['_jdaviz_history'] += [plugin_state]
+        results.meta['_jdaviz_script'] += plugin_script + ['plg.smooth()']
 
         if add_data:
             # add data to the collection/viewer
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index 843693b27e..cca220610b 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -3391,6 +3391,12 @@ def __init__(self, plugin, items, selected,
         self.app.state.add_callback('layer_icons', lambda _: self._on_data_changed())
         # initialize items from original viewers
         self._on_data_changed()
+    def to_script(self, as_string=False):
+        script = [f"{self.app.config}.load_data({self.selected_obj}, data_label='{self.selected})'"]
+        script += [f"plg.selected = '{self.selected}'"]
+        if as_string:
+            return "\n".join(script)
+        return script
 
     @property
     def default_data_cls(self):
diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index b73afb99e7..01c74de787 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -93,6 +93,8 @@ def _items(self):
 
     def to_dict(self):
         def _value(item):
+            if include_hidden and hasattr(item, '_hidden_to_dict'):
+                return _value(item._hidden_to_dict())
             if hasattr(item, 'to_dict'):
                 return _value(item.to_dict())
             if hasattr(item, 'selected'):

From 41a4d6e69cadf44c83b324252a01f5a860e11ed6 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 31 Jul 2024 09:21:34 -0400
Subject: [PATCH 06/24] rename show_api_hints > api_hints

---
 jdaviz/components/plugin_add_results.vue             |  8 ++++----
 jdaviz/components/plugin_dataset_select.vue          |  6 +++---
 jdaviz/components/tray_plugin.vue                    |  4 ++--
 .../plugins/gaussian_smooth/gaussian_smooth.vue      | 12 ++++++------
 jdaviz/core/template_mixin.py                        |  2 +-
 jdaviz/core/user_api.py                              |  4 ++--
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue
index 61fd4378fe..eec3613aa6 100644
--- a/jdaviz/components/plugin_add_results.vue
+++ b/jdaviz/components/plugin_add_results.vue
@@ -8,9 +8,9 @@
       :auto="label_auto"
       @update:auto="$emit('update:label_auto', $event)"
       :invalid_msg="label_invalid_msg"
-      :label="show_api_hints && label_api_hint ? label_api_hint : label_label ? label_label : 'Output Data Label'"
+      :label="api_hints && label_api_hint ? label_api_hint : label_label ? label_label : 'Output Data Label'"
       :hint="label_hint ? label_hint : 'Label for the resulting data item.'"
-      :class="show_api_hints ? 'api_hint' : null"
+      :class="api_hints ? 'api_hint' : null"
     ></plugin-auto-label>   
 
     <div v-if="add_to_viewer_items.length > 2">
@@ -78,7 +78,7 @@
           {{action_label}}{{label_overwrite ? ' (Overwrite)' : ''}}
         </plugin-action-button>
       </j-tooltip>
-      <v-alert v-if="show_api_hints && action_api_hint"
+      <v-alert v-if="api_hints && action_api_hint"
           color="orange"
           dense
           text
@@ -100,6 +100,6 @@
 module.exports = {
   props: ['label', 'label_default', 'label_auto', 'label_invalid_msg', 'label_overwrite', 'label_label', 'label_hint', 'label_api_hint',
           'add_to_viewer_items', 'add_to_viewer_selected', 'add_to_viewer_hint', 'auto_update_result', 'add_to_viewer_hint',
-          'action_disabled', 'action_spinner', 'action_label', 'action_api_hint', 'action_tooltip', 'show_api_hints']
+          'action_disabled', 'action_spinner', 'action_label', 'action_api_hint', 'action_tooltip', 'api_hints']
 };
 </script>
diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index 9b239c7137..eb634daebb 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -7,14 +7,14 @@
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
-      :label="show_api_hints && api_hint ? api_hint : (label ? label : 'Data')"
+      :label="api_hints && api_hint ? api_hint : (label ? label : 'Data')"
       :hint="hint ? hint : 'Select data.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
       :chips="multiselect"
       item-text="label"
       item-value="label"
-      :class="show_api_hints ? 'api_hint' : null"
+      :class="api_hints ? 'api_hint' : null"
       persistent-hint
     >
       <template slot="selection" slot-scope="data">
@@ -64,7 +64,7 @@
 </template>
 <script>
 module.exports = {
-  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect', 'api_hint', 'show_api_hint'],
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect', 'api_hint', 'api_hints'],
   methods: {
     isWCSOnlyLayer(item) {
       const wcsOnly = Object.keys(this.$props.viewer.wcs_only_layers).includes(item.name)
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 443dd11b5e..bcf1db2838 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -5,7 +5,7 @@
         <j-docs-link :link="link">{{ description }}</j-docs-link>
       </div>
       <div style="width: 32px">
-        <v-btn icon @click="() => {$emit('update:show_api_hints', !show_api_hints)}">
+        <v-btn icon @click="() => {$emit('update:api_hints', !api_hints)}">
           <v-icon>mdi-code-tags</v-icon>
         </v-btn>
       </div>
@@ -34,7 +34,7 @@
 
 <script>
 module.exports = {
-  props: ['irrelevant_msg', 'disabled_msg', 'description', 'show_api_hints', 'link', 'popout_button',
+  props: ['irrelevant_msg', 'disabled_msg', 'description', 'api_hints', 'link', 'popout_button',
           'uses_active_status', 'keep_active', 'scroll_to'],
   methods: {
     isDisabled() {
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index 404b2a55d6..2d3503069a 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -2,12 +2,12 @@
   <j-tray-plugin
     :description="docs_description || 'Smooth data with a Gaussian kernel.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#gaussian-smooth'"
-    :show_api_hints.sync="show_api_hints"
+    :api_hints.sync="api_hints"
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
 
-      <v-alert v-if="show_api_hints"
+      <v-alert v-if="api_hints"
           color="orange"
           dense
           text
@@ -37,18 +37,18 @@
         :show_if_single_entry="['mosviz', 'cubeviz'].indexOf(config) !== -1"
         label="Data"
         api_hint='plg.dataset='
-        :show_api_hints="show_api_hints"
+        :api_hints="api_hints"
         hint="Select the data to be smoothed."
       />
 
       <v-row>
         <v-text-field
           ref="stddev"
-          :label="show_api_hints ? 'plg.stddev=' : 'Standard deviation'"
+          :label="api_hints ? 'plg.stddev=' : 'Standard deviation'"
           v-model.number="stddev"
           type="number"
           hint="The stddev of the kernel, in pixels."
-          :class="show_api_hints ? 'api_hint' : null"
+          :class="api_hints ? 'api_hint' : null"
           persistent-hint
           :rules="[() => !!stddev || 'This field is required',
                    () => stddev > 0 || 'Kernel must be greater than zero']"
@@ -69,7 +69,7 @@
         action_tooltip="Smooth data"
         :action_spinner="spinner"
         action_api_hint='plg.smooth(add_data=True)'
-        :show_api_hints="show_api_hints"
+        :api_hints="api_hints"
         @click:action="apply"
       ></plugin-add-results>
     </j-tray-plugin>
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index cca220610b..e91e4467c6 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -402,7 +402,7 @@ class PluginTemplateMixin(TemplateMixin):
     is_active = Bool(False).tag(sync=True)  # noqa read-only: whether the previews should be shown according to plugin_opened and keep_active
     scroll_to = Bool(False).tag(sync=True)  # noqa once set to True, vue will scroll to the element and reset to False
     spinner = Bool(False).tag(sync=True)  # noqa use along-side @with_spinner() and <plugin-add-results :action_spinner="spinner">
-    show_api_hints = Bool(False).tag(sync=True)
+    api_hints = Bool(False).tag(sync=True)
     previews_temp_disabled = Bool(False).tag(sync=True)  # noqa use along-side @with_temp_disable() and <plugin-previews-temp-disabled :previews_temp_disabled.sync="previews_temp_disabled" :previews_last_time="previews_last_time" :show_live_preview.sync="show_live_preview"/>
     previews_last_time = Float(0).tag(sync=True)
     supports_auto_update = Bool(False).tag(sync=True)  # noqa whether this plugin supports auto-updating plugin results (requires __call__ method)
diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index 01c74de787..bc7aa7972d 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -102,7 +102,7 @@ def _value(item):
             return item
 
         return {k: _value(getattr(self, k)) for k in self._expose
-                if k not in ('show_api_hints', 'keep_active')
+                if k not in ('api_hints', 'keep_active')
                 and k not in self._exclude_from_dict
                 and not hasattr(getattr(self, k), '__call__')}
 
@@ -130,7 +130,7 @@ class PluginUserApi(UserApiWrapper):
       help(plugin_object.show)
     """
     def __init__(self, plugin, expose=[], readonly=[], excl_from_dict=[]):
-        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray', 'show', 'show_api_hints']))
+        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray', 'show', 'api_hints']))
         if plugin.uses_active_status:
             expose += ['keep_active', 'as_active']
         self._deprecation_msg = None

From cef94fd1ec0033a828406498b337258696404ece Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 31 Jul 2024 10:12:37 -0400
Subject: [PATCH 07/24] improved styling and connect add_to_viewer

---
 jdaviz/components/plugin_action_button.vue    |  3 +-
 jdaviz/components/plugin_add_results.vue      | 48 +++++++++++--------
 jdaviz/components/plugin_dataset_select.vue   |  4 +-
 jdaviz/components/tray_plugin.vue             |  5 --
 .../gaussian_smooth/gaussian_smooth.vue       | 22 ++++-----
 jdaviz/main_styles.vue                        | 29 +++++++++++
 6 files changed, 71 insertions(+), 40 deletions(-)

diff --git a/jdaviz/components/plugin_action_button.vue b/jdaviz/components/plugin_action_button.vue
index 4baa47f2bc..d0f96a6ed0 100644
--- a/jdaviz/components/plugin_action_button.vue
+++ b/jdaviz/components/plugin_action_button.vue
@@ -2,6 +2,7 @@
   <v-btn :disabled="spinner || disabled"
     text
     :color=buttonColor
+    class="api_hint"
     @click="$emit('click')"
   >
     <v-progress-circular
@@ -19,7 +20,7 @@
 
 <script>
 module.exports = {
-  props: ['spinner', 'disabled', 'results_isolated_to_plugin'],
+  props: ['spinner', 'disabled', 'results_isolated_to_plugin', 'class'],
   computed: {
     buttonColor() {
       if (this.results_isolated_to_plugin) {
diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue
index eec3613aa6..14c2424414 100644
--- a/jdaviz/components/plugin_add_results.vue
+++ b/jdaviz/components/plugin_add_results.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="api_hints ? 'api_hint' : ''">
     <plugin-auto-label
       :value="label"
       @change="$emit('update:label', $event)"
@@ -8,7 +8,7 @@
       :auto="label_auto"
       @update:auto="$emit('update:label_auto', $event)"
       :invalid_msg="label_invalid_msg"
-      :label="api_hints && label_api_hint ? label_api_hint : label_label ? label_label : 'Output Data Label'"
+      :label="api_hints && add_results_api_hint ? add_results_api_hint + '.label =' : label_label ? label_label : 'Output Data Label'"
       :hint="label_hint ? label_hint : 'Label for the resulting data item.'"
       :class="api_hints ? 'api_hint' : null"
     ></plugin-auto-label>   
@@ -27,7 +27,7 @@
         :selected="add_to_viewer_selected"
         @update:selected="$emit('update:add_to_viewer_selected', $event)"
         show_if_single_entry="true"
-        label='Plot in Viewer'
+        :label="api_hints && add_results_api_hint ? add_results_api_hint+'.viewer =' : 'Plot in Viewer'"
         :hint="add_to_viewer_hint ? add_to_viewer_hint : 'Plot results in the specified viewer.  Data entry will be available in the data dropdown for all applicable viewers.'"
       ></plugin-viewer-select>
     </div>
@@ -35,7 +35,7 @@
     <v-row v-else>
       <v-switch v-if="label_overwrite"
         class="hide-input"
-        :label="'Show in '+add_to_viewer_items[1].label"
+        :label="addToViewerText"
         :disabled="true"
         :hint="'Visibility of the modified entry will be adopted from the current \''+label+'\' data entry.'"
         persistent-hint
@@ -44,7 +44,7 @@
       <v-switch v-else
         v-model="add_to_viewer_selected == this.add_to_viewer_items[1].label"
         @change="(e) => {$emit('update:add_to_viewer_selected', this.$props.add_to_viewer_items[Number(e)].label)}"
-        :label="'Show in '+add_to_viewer_items[1].label"
+        :label="addToViewerText"
         hint='Immediately plot results.  Data entry will be available to toggle in the data dropdown'
         persistent-hint
       >
@@ -74,18 +74,9 @@
           :disabled="label_invalid_msg.length > 0 || action_disabled"
           :results_isolated_to_plugin="false"
           @click="$emit('click:action')">
-
-          {{action_label}}{{label_overwrite ? ' (Overwrite)' : ''}}
+          {{ actionButtonText }}
         </plugin-action-button>
       </j-tooltip>
-      <v-alert v-if="api_hints && action_api_hint"
-          color="orange"
-          dense
-          text
-          class="api_hint"
-      >
-          {{action_api_hint}}
-      </v-alert>
     </v-row>
   </div>
 </template>
@@ -97,9 +88,28 @@
 </style>
 
 <script>
-module.exports = {
-  props: ['label', 'label_default', 'label_auto', 'label_invalid_msg', 'label_overwrite', 'label_label', 'label_hint', 'label_api_hint',
-          'add_to_viewer_items', 'add_to_viewer_selected', 'add_to_viewer_hint', 'auto_update_result', 'add_to_viewer_hint',
-          'action_disabled', 'action_spinner', 'action_label', 'action_api_hint', 'action_tooltip', 'api_hints']
+  module.exports = {
+    props: ['add_results_api_hint',
+            'label', 'label_default', 'label_auto', 'label_invalid_msg', 'label_overwrite', 'label_label', 'label_hint',
+            'add_to_viewer_items', 'add_to_viewer_selected', 'add_to_viewer_hint', 'auto_update_result',
+            'action_disabled', 'action_spinner', 'action_label', 'action_api_hint', 'action_tooltip', 'api_hints'],
+    computed: {
+      actionButtonText() {
+        if (this.api_hints && this.action_api_hint) {
+          return this.action_api_hint;
+        } else if (this.label_overwrite) {
+          return this.action_label + ' (Overwrite)';
+        } else {
+          return this.action_label;
+        }
+      },
+      addToViewerText() {
+        if (this.api_hints && this.add_results_api_hint) {
+          return this.add_results_api_hint + '.viewer = \'' + this.add_to_viewer_selected+'\'';
+        } else {
+          return 'Show in ' + this.add_to_viewer_items[1].label;
+        }
+      }
+    }
 };
 </script>
diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index eb634daebb..ff48fc5747 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -1,6 +1,5 @@
 <template>
-  <div>
-  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry">
+  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry || api_hints">
     <v-select
       :menu-props="{ left: true }"
       attach
@@ -60,7 +59,6 @@
       </template>
    </v-select>
   </v-row>
- </div>
 </template>
 <script>
 module.exports = {
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index bcf1db2838..b00ca40a12 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -113,9 +113,4 @@ module.exports = {
     margin-top: 2px !important;
     margin-bottom: 2px !important;
   }
-
-  .api_hint :is(.v-select__slot, .v-text-field__slot) > label.v-label {
-    color: orange !important;
-    font-family: monospace;
-  }
 </style>
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index 2d3503069a..33203c76a1 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -7,14 +7,11 @@
     :scroll_to.sync="scroll_to">
 
 
-      <v-alert v-if="api_hints"
-          color="orange"
-          dense
-          text
-          class="api_hint"
-      >
+      <v-row v-if="api_hints">
+        <span class="api_hint">
           plg = {{config}}.plugins['Gaussian Smooth']
-      </v-alert>
+        </span>
+      </v-row>
 
       <v-row v-if="show_modes">
         <v-select
@@ -22,7 +19,8 @@
           attach
           :items="mode_items.map(i => i.label)"
           v-model="mode_selected"
-          label="Mode"
+          :label="api_hints ? 'plg.mode =' : 'Mode'"
+          :class="api_hints ? 'api_hint' : null"
           hint="Smooth data spectrally or spatially."
           persistent-hint
         ></v-select>
@@ -36,7 +34,7 @@
         :selected.sync="dataset_selected"
         :show_if_single_entry="['mosviz', 'cubeviz'].indexOf(config) !== -1"
         label="Data"
-        api_hint='plg.dataset='
+        api_hint='plg.dataset ='
         :api_hints="api_hints"
         hint="Select the data to be smoothed."
       />
@@ -44,11 +42,11 @@
       <v-row>
         <v-text-field
           ref="stddev"
-          :label="api_hints ? 'plg.stddev=' : 'Standard deviation'"
+          :label="api_hints ? 'plg.stddev =' : 'Standard deviation'"
+          :class="api_hints ? 'api_hint' : null"
           v-model.number="stddev"
           type="number"
           hint="The stddev of the kernel, in pixels."
-          :class="api_hints ? 'api_hint' : null"
           persistent-hint
           :rules="[() => !!stddev || 'This field is required',
                    () => stddev > 0 || 'Kernel must be greater than zero']"
@@ -62,12 +60,12 @@
         :label_invalid_msg="results_label_invalid_msg"
         :label_overwrite="results_label_overwrite"
         label_hint="Label for the smoothed data"
-        label_api_hint='plg.add_results.label='
         :add_to_viewer_items="add_to_viewer_items"
         :add_to_viewer_selected.sync="add_to_viewer_selected"
         action_label="Smooth"
         action_tooltip="Smooth data"
         :action_spinner="spinner"
+        add_results_api_hint='plg.add_results'
         action_api_hint='plg.smooth(add_data=True)'
         :api_hints="api_hints"
         @click:action="apply"
diff --git a/jdaviz/main_styles.vue b/jdaviz/main_styles.vue
index 7962d5fd76..dbdb19a0c6 100644
--- a/jdaviz/main_styles.vue
+++ b/jdaviz/main_styles.vue
@@ -262,4 +262,33 @@ a:active {
   font-family: Roboto, sans-serif !important;
   font-weight: 500 !important;
 }
+
+span.api_hint {
+  color: #c75109 !important;
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.api_hint :is(.v-select__slot, .v-text-field__slot, .v-input__slot) > label.v-label {
+    color: #c75109 !important;
+    font-family: monospace;
+    font-size: 12px;
+    overflow-wrap: break-word;
+}
+
+.api_hint .v-alert__content {
+  color: #c75109 !important;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.api_hint .v-btn {
+  color: #c75109 !important;
+  font-family: monospace !important;
+  font-size: 12px !important;
+  overflow-wrap: break-word;
+  text-transform: none !important;
+}
+
 </style>

From adc3abab2fcb4879604b5b46d88e4b039f34c92e Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 31 Jul 2024 12:28:27 -0400
Subject: [PATCH 08/24] rename api_hints > api_hints_enabled

---
 jdaviz/components/plugin_add_results.vue         | 14 +++++++-------
 jdaviz/components/plugin_dataset_select.vue      |  8 ++++----
 jdaviz/components/tray_plugin.vue                |  4 ++--
 .../plugins/gaussian_smooth/gaussian_smooth.vue  | 16 ++++++++--------
 jdaviz/core/template_mixin.py                    |  2 +-
 jdaviz/core/user_api.py                          |  4 ++--
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue
index 14c2424414..c89bda737e 100644
--- a/jdaviz/components/plugin_add_results.vue
+++ b/jdaviz/components/plugin_add_results.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="api_hints ? 'api_hint' : ''">
+  <div :class="api_hints_enabled ? 'api_hint' : ''">
     <plugin-auto-label
       :value="label"
       @change="$emit('update:label', $event)"
@@ -8,9 +8,9 @@
       :auto="label_auto"
       @update:auto="$emit('update:label_auto', $event)"
       :invalid_msg="label_invalid_msg"
-      :label="api_hints && add_results_api_hint ? add_results_api_hint + '.label =' : label_label ? label_label : 'Output Data Label'"
+      :label="api_hints_enabled && add_results_api_hint ? add_results_api_hint + '.label =' : label_label ? label_label : 'Output Data Label'"
       :hint="label_hint ? label_hint : 'Label for the resulting data item.'"
-      :class="api_hints ? 'api_hint' : null"
+      :class="api_hints_enabled ? 'api_hint' : null"
     ></plugin-auto-label>   
 
     <div v-if="add_to_viewer_items.length > 2">
@@ -27,7 +27,7 @@
         :selected="add_to_viewer_selected"
         @update:selected="$emit('update:add_to_viewer_selected', $event)"
         show_if_single_entry="true"
-        :label="api_hints && add_results_api_hint ? add_results_api_hint+'.viewer =' : 'Plot in Viewer'"
+        :label="api_hints_enabled && add_results_api_hint ? add_results_api_hint+'.viewer =' : 'Plot in Viewer'"
         :hint="add_to_viewer_hint ? add_to_viewer_hint : 'Plot results in the specified viewer.  Data entry will be available in the data dropdown for all applicable viewers.'"
       ></plugin-viewer-select>
     </div>
@@ -92,10 +92,10 @@
     props: ['add_results_api_hint',
             'label', 'label_default', 'label_auto', 'label_invalid_msg', 'label_overwrite', 'label_label', 'label_hint',
             'add_to_viewer_items', 'add_to_viewer_selected', 'add_to_viewer_hint', 'auto_update_result',
-            'action_disabled', 'action_spinner', 'action_label', 'action_api_hint', 'action_tooltip', 'api_hints'],
+            'action_disabled', 'action_spinner', 'action_label', 'action_api_hint', 'action_tooltip', 'api_hints_enabled'],
     computed: {
       actionButtonText() {
-        if (this.api_hints && this.action_api_hint) {
+        if (this.api_hints_enabled && this.action_api_hint) {
           return this.action_api_hint;
         } else if (this.label_overwrite) {
           return this.action_label + ' (Overwrite)';
@@ -104,7 +104,7 @@
         }
       },
       addToViewerText() {
-        if (this.api_hints && this.add_results_api_hint) {
+        if (this.api_hints_enabled && this.add_results_api_hint) {
           return this.add_results_api_hint + '.viewer = \'' + this.add_to_viewer_selected+'\'';
         } else {
           return 'Show in ' + this.add_to_viewer_items[1].label;
diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index ff48fc5747..cb8681e82b 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -1,19 +1,19 @@
 <template>
-  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry || api_hints">
+  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry || api_hints_enabled">
     <v-select
       :menu-props="{ left: true }"
       attach
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
-      :label="api_hints && api_hint ? api_hint : (label ? label : 'Data')"
+      :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Data')"
       :hint="hint ? hint : 'Select data.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
       :chips="multiselect"
       item-text="label"
       item-value="label"
-      :class="api_hints ? 'api_hint' : null"
+      :class="api_hints_enabled ? 'api_hint' : null"
       persistent-hint
     >
       <template slot="selection" slot-scope="data">
@@ -62,7 +62,7 @@
 </template>
 <script>
 module.exports = {
-  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect', 'api_hint', 'api_hints'],
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect', 'api_hint', 'api_hints_enabled'],
   methods: {
     isWCSOnlyLayer(item) {
       const wcsOnly = Object.keys(this.$props.viewer.wcs_only_layers).includes(item.name)
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index b00ca40a12..7a4580ac0a 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -5,7 +5,7 @@
         <j-docs-link :link="link">{{ description }}</j-docs-link>
       </div>
       <div style="width: 32px">
-        <v-btn icon @click="() => {$emit('update:api_hints', !api_hints)}">
+        <v-btn icon @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}">
           <v-icon>mdi-code-tags</v-icon>
         </v-btn>
       </div>
@@ -34,7 +34,7 @@
 
 <script>
 module.exports = {
-  props: ['irrelevant_msg', 'disabled_msg', 'description', 'api_hints', 'link', 'popout_button',
+  props: ['irrelevant_msg', 'disabled_msg', 'description', 'api_hints_enabled', 'link', 'popout_button',
           'uses_active_status', 'keep_active', 'scroll_to'],
   methods: {
     isDisabled() {
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index 33203c76a1..2287136664 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -2,12 +2,12 @@
   <j-tray-plugin
     :description="docs_description || 'Smooth data with a Gaussian kernel.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#gaussian-smooth'"
-    :api_hints.sync="api_hints"
+    :api_hints_enabled.sync="api_hints_enabled"
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
 
-      <v-row v-if="api_hints">
+      <v-row v-if="api_hints_enabled">
         <span class="api_hint">
           plg = {{config}}.plugins['Gaussian Smooth']
         </span>
@@ -19,8 +19,8 @@
           attach
           :items="mode_items.map(i => i.label)"
           v-model="mode_selected"
-          :label="api_hints ? 'plg.mode =' : 'Mode'"
-          :class="api_hints ? 'api_hint' : null"
+          :label="api_hints_enabled ? 'plg.mode =' : 'Mode'"
+          :class="api_hints_enabled ? 'api_hint' : null"
           hint="Smooth data spectrally or spatially."
           persistent-hint
         ></v-select>
@@ -35,15 +35,15 @@
         :show_if_single_entry="['mosviz', 'cubeviz'].indexOf(config) !== -1"
         label="Data"
         api_hint='plg.dataset ='
-        :api_hints="api_hints"
+        :api_hints_enabled="api_hints_enabled"
         hint="Select the data to be smoothed."
       />
 
       <v-row>
         <v-text-field
           ref="stddev"
-          :label="api_hints ? 'plg.stddev =' : 'Standard deviation'"
-          :class="api_hints ? 'api_hint' : null"
+          :label="api_hints_enabled ? 'plg.stddev =' : 'Standard deviation'"
+          :class="api_hints_enabled ? 'api_hint' : null"
           v-model.number="stddev"
           type="number"
           hint="The stddev of the kernel, in pixels."
@@ -67,7 +67,7 @@
         :action_spinner="spinner"
         add_results_api_hint='plg.add_results'
         action_api_hint='plg.smooth(add_data=True)'
-        :api_hints="api_hints"
+        :api_hints_enabled="api_hints_enabled"
         @click:action="apply"
       ></plugin-add-results>
     </j-tray-plugin>
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index e91e4467c6..d8b582021f 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -402,7 +402,7 @@ class PluginTemplateMixin(TemplateMixin):
     is_active = Bool(False).tag(sync=True)  # noqa read-only: whether the previews should be shown according to plugin_opened and keep_active
     scroll_to = Bool(False).tag(sync=True)  # noqa once set to True, vue will scroll to the element and reset to False
     spinner = Bool(False).tag(sync=True)  # noqa use along-side @with_spinner() and <plugin-add-results :action_spinner="spinner">
-    api_hints = Bool(False).tag(sync=True)
+    api_hints_enabled = Bool(False).tag(sync=True)
     previews_temp_disabled = Bool(False).tag(sync=True)  # noqa use along-side @with_temp_disable() and <plugin-previews-temp-disabled :previews_temp_disabled.sync="previews_temp_disabled" :previews_last_time="previews_last_time" :show_live_preview.sync="show_live_preview"/>
     previews_last_time = Float(0).tag(sync=True)
     supports_auto_update = Bool(False).tag(sync=True)  # noqa whether this plugin supports auto-updating plugin results (requires __call__ method)
diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index bc7aa7972d..0c51ae2515 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -102,7 +102,7 @@ def _value(item):
             return item
 
         return {k: _value(getattr(self, k)) for k in self._expose
-                if k not in ('api_hints', 'keep_active')
+                if k not in ('api_hints_enabled', 'keep_active')
                 and k not in self._exclude_from_dict
                 and not hasattr(getattr(self, k), '__call__')}
 
@@ -130,7 +130,7 @@ class PluginUserApi(UserApiWrapper):
       help(plugin_object.show)
     """
     def __init__(self, plugin, expose=[], readonly=[], excl_from_dict=[]):
-        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray', 'show', 'api_hints']))
+        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray', 'show', 'api_hints_enabled']))
         if plugin.uses_active_status:
             expose += ['keep_active', 'as_active']
         self._deprecation_msg = None

From 3ffe73478f40e11e2728cff0d44d1999397bd9ec Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 31 Jul 2024 16:30:38 -0400
Subject: [PATCH 09/24] generalize and implement across multiple plugins

---
 jdaviz/app.py                                 |   1 +
 jdaviz/components/plugin_action_button.vue    |   1 -
 jdaviz/components/plugin_add_results.vue      |   3 +-
 jdaviz/components/plugin_dataset_select.vue   |   4 +-
 jdaviz/components/plugin_editable_select.vue  |  36 ++-
 .../components/plugin_file_import_select.vue  |   4 +-
 jdaviz/components/plugin_inline_select.vue    |   7 +-
 jdaviz/components/plugin_layer_select.vue     |   8 +-
 .../components/plugin_layer_select_tabs.vue   |   1 +
 .../plugin_previews_temp_disabled.vue         |   6 +-
 jdaviz/components/plugin_subset_select.vue    |   8 +-
 jdaviz/components/plugin_switch.vue           |  24 ++
 jdaviz/components/plugin_viewer_select.vue    |  14 +-
 jdaviz/components/tray_plugin.vue             |  33 +-
 .../configs/cubeviz/plugins/slice/slice.vue   |  36 ++-
 .../spectral_extraction.py                    |   2 +-
 .../spectral_extraction.vue                   |  63 ++--
 .../default/plugins/collapse/collapse.vue     |  14 +-
 .../configs/default/plugins/export/export.py  |   2 -
 .../configs/default/plugins/export/export.vue |  32 +-
 .../gaussian_smooth/gaussian_smooth.vue       |  13 +-
 .../default/plugins/markers/markers.vue       |   4 +-
 .../metadata_viewer/metadata_viewer.vue       |  23 +-
 .../plugins/model_fitting/model_fitting.vue   |  40 ++-
 .../plugins/plot_options/plot_options.py      |   5 +-
 .../plugins/plot_options/plot_options.vue     | 291 ++++++++++++++----
 .../imviz/plugins/footprints/footprints.vue   |  68 +++-
 .../imviz/plugins/orientation/orientation.vue |  84 +++--
 .../plugins/line_analysis/line_analysis.vue   |  17 +-
 jdaviz/main_styles.vue                        |  22 +-
 30 files changed, 647 insertions(+), 219 deletions(-)
 create mode 100644 jdaviz/components/plugin_switch.vue

diff --git a/jdaviz/app.py b/jdaviz/app.py
index 47f7a9646d..5a9a0aaf17 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -143,6 +143,7 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      'plugin-editable-select': 'components/plugin_editable_select.vue',
                      'plugin-inline-select': 'components/plugin_inline_select.vue',
                      'plugin-inline-select-item': 'components/plugin_inline_select_item.vue',
+                     'plugin-switch': 'components/plugin_switch.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',
diff --git a/jdaviz/components/plugin_action_button.vue b/jdaviz/components/plugin_action_button.vue
index d0f96a6ed0..1c09304228 100644
--- a/jdaviz/components/plugin_action_button.vue
+++ b/jdaviz/components/plugin_action_button.vue
@@ -2,7 +2,6 @@
   <v-btn :disabled="spinner || disabled"
     text
     :color=buttonColor
-    class="api_hint"
     @click="$emit('click')"
   >
     <v-progress-circular
diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue
index c89bda737e..c80b9e0c00 100644
--- a/jdaviz/components/plugin_add_results.vue
+++ b/jdaviz/components/plugin_add_results.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="api_hints_enabled ? 'api_hint' : ''">
+  <div>
     <plugin-auto-label
       :value="label"
       @change="$emit('update:label', $event)"
@@ -10,7 +10,6 @@
       :invalid_msg="label_invalid_msg"
       :label="api_hints_enabled && add_results_api_hint ? add_results_api_hint + '.label =' : label_label ? label_label : 'Output Data Label'"
       :hint="label_hint ? label_hint : 'Label for the resulting data item.'"
-      :class="api_hints_enabled ? 'api_hint' : null"
     ></plugin-auto-label>   
 
     <div v-if="add_to_viewer_items.length > 2">
diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index cb8681e82b..525d962ac7 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -13,7 +13,6 @@
       :chips="multiselect"
       item-text="label"
       item-value="label"
-      :class="api_hints_enabled ? 'api_hint' : null"
       persistent-hint
     >
       <template slot="selection" slot-scope="data">
@@ -62,7 +61,8 @@
 </template>
 <script>
 module.exports = {
-  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect', 'api_hint', 'api_hints_enabled'],
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect',
+          'api_hint', 'api_hints_enabled'],
   methods: {
     isWCSOnlyLayer(item) {
       const wcsOnly = Object.keys(this.$props.viewer.wcs_only_layers).includes(item.name)
diff --git a/jdaviz/components/plugin_editable_select.vue b/jdaviz/components/plugin_editable_select.vue
index 15466086a4..a8a527152a 100644
--- a/jdaviz/components/plugin_editable_select.vue
+++ b/jdaviz/components/plugin_editable_select.vue
@@ -8,7 +8,7 @@
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
-      :label="label"
+      :label="api_hints_enabled && api_hint ? api_hint : label"
       :hint="hint"
       :rules="rules ? rules : []"
       item-text="label"
@@ -33,7 +33,12 @@
       type="warning"
       style="width: 100%; padding-top: 16px; padding-bottom: 16px"
     >
-      <span>remove '{{selected}}' {{label.toLowerCase()}}?</span>
+      <span v-if="api_hints_enabled && api_hint_remove">
+        {{api_hint_remove}}('{{selected}}')
+      </span>
+      <span v-else>
+        remove '{{selected}}' {{label.toLowerCase()}}?
+      </span>
       <template v-slot:append>
         <j-tooltip tooltipcontent="cancel">
           <v-icon style="cursor: pointer" @click="changeCancel">mdi-close</v-icon>
@@ -44,10 +49,10 @@
       </template>
     </v-alert>
     <v-text-field
-      v-else
+      v-else-if="['rename', 'add'].indexOf(mode) !== -1"
       v-model="edit_value"
       @keyup="$emit('update:edit_value', $event.target.value)"
-      :label="label"
+      :label="textFieldLabel"
       :hint="mode == 'rename' ? 'Rename '+label.toLowerCase() : 'Add '+label.toLowerCase()"
       persistent-hint
     >
@@ -60,13 +65,34 @@
         </j-tooltip>
       </template>
     </v-text-field>
+    <span v-else>
+      <v-alert
+        type="success"
+        style="width: 100%; padding-top: 16px; padding-bottom: 16px"
+      >
+        Applying changes...
+      </v-alert>
+    </span>
   </v-row>
  </div>
 </template>
 
 <script>
 module.exports = {
-  props: ['mode', 'edit_value', 'items', 'selected', 'label', 'hint', 'rules'],
+  props: ['mode', 'edit_value', 'items', 'selected', 'label', 'hint', 'rules',
+          'api_hint', 'api_hint_add', 'api_hint_rename', 'api_hint_remove', 'api_hints_enabled'
+  ],
+  computed: {
+    textFieldLabel() {
+      if (this.api_hints_enabled && this.mode == 'rename' && this.api_hint_rename) {
+        return this.api_hint_rename+'(\''+this.selected+'\', \''+this.edit_value+'\')';
+      } else if (this.api_hints_enabled && this.mode == 'add' && this.api_hint_add) {
+        return this.api_hint_add+'(\''+this.edit_value+'\')';
+      } else {
+        return this.label;
+      }
+    }
+  },
   methods: {
     changeCancel() {
       this.$emit('update:edit_value', this.selected);
diff --git a/jdaviz/components/plugin_file_import_select.vue b/jdaviz/components/plugin_file_import_select.vue
index db82a3bb10..8e762e48e6 100644
--- a/jdaviz/components/plugin_file_import_select.vue
+++ b/jdaviz/components/plugin_file_import_select.vue
@@ -7,7 +7,7 @@
         :items="items.map(i => i.label)"
         v-model="selected"
         @change="$emit('update:selected', $event)"
-        :label="label"
+        :label="api_hints_enabled && api_hint ? api_hint : label"
         :hint="hint"
         persistent-hint
       ></v-select>
@@ -60,7 +60,7 @@
 <script>
 module.exports = {
   props: ['items', 'selected', 'label', 'hint', 'rules', 'from_file', 'from_file_message',
-          'dialog_title', 'dialog_hint']
+          'dialog_title', 'dialog_hint', 'api_hint', 'api_hints_enabled']
 };
 </script>
 
diff --git a/jdaviz/components/plugin_inline_select.vue b/jdaviz/components/plugin_inline_select.vue
index 1712d06626..e249228c00 100644
--- a/jdaviz/components/plugin_inline_select.vue
+++ b/jdaviz/components/plugin_inline_select.vue
@@ -1,5 +1,10 @@
 <template>
   <div>
+    <v-row v-if="api_hints_enabled && api_hint">
+      <span class="api-hint">
+        {{ api_hint }}
+      </span>
+    </v-row>
     <v-row v-for="item in items" class="row-min-bottom-padding">
       <plugin-inline-select-item
         :item="item"
@@ -14,7 +19,7 @@
 
 <script>
 module.exports = {
-  props: ['items', 'selected', 'multiselect', 'single_select_allow_blank']
+  props: ['items', 'selected', 'multiselect', 'single_select_allow_blank', 'api_hint', 'api_hints_enabled']
 };
 </script>
 
diff --git a/jdaviz/components/plugin_layer_select.vue b/jdaviz/components/plugin_layer_select.vue
index a578b27116..0f6865f372 100644
--- a/jdaviz/components/plugin_layer_select.vue
+++ b/jdaviz/components/plugin_layer_select.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry">
+  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry || api_hints_enabled">
     <v-select
       :menu-props="{ left: true }"
       attach
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
-      :label="label ? label : 'Layer'"
+      :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Layer')"
       :hint="hint ? hint : 'Select layer.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
@@ -64,7 +64,9 @@
 
 <script>
 module.exports = {
-  props: ['items', 'selected', 'label', 'hint', 'rules', 'icons', 'show_if_single_entry', 'multiselect']
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'icons', 'show_if_single_entry', 'multiselect',
+          'api_hint', 'api_hints_enabled'
+  ]
 };
 </script>
 
diff --git a/jdaviz/components/plugin_layer_select_tabs.vue b/jdaviz/components/plugin_layer_select_tabs.vue
index 8647a04d92..e873bb3b41 100644
--- a/jdaviz/components/plugin_layer_select_tabs.vue
+++ b/jdaviz/components/plugin_layer_select_tabs.vue
@@ -18,6 +18,7 @@
             :rounded="item.is_subset"
             @click="() => {if (!multiselect){$emit('update:selected', item.label)} else if(!selectedAsList.includes(item.label)) {$emit('update:selected', selected.concat(item.label))} else if (selected.length > 1) {$emit('update:selected', selected.filter(select => select != item.label))} }"
             :style="'padding: 0px; margin-bottom: 4px; background: '+visibilityStyle(item)+', '+colorStyle(item)"
+            class="ignore-api-hint"
             width="30px"
             min-width="30px"
             height="30px"
diff --git a/jdaviz/components/plugin_previews_temp_disabled.vue b/jdaviz/components/plugin_previews_temp_disabled.vue
index 0aed4c84a7..f7a090b353 100644
--- a/jdaviz/components/plugin_previews_temp_disabled.vue
+++ b/jdaviz/components/plugin_previews_temp_disabled.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-alert v-if="previews_temp_disabled && show_live_preview" type='warning' style="margin-left: -12px; margin-right: -12px">
+  <v-alert
+    v-if="previews_temp_disabled && show_live_preview"
+    type='warning'
+    class="ignore-api-hint"
+    style="margin-left: -12px; margin-right: -12px">
     Live-updating is temporarily disabled (last update took {{previews_last_time}}s)
     <v-row justify='center'>
       <j-tooltip tooltipcontent='hide live preview (can be re-enabled from the settings section in the plugin).' span_style="width: 100%">
diff --git a/jdaviz/components/plugin_subset_select.vue b/jdaviz/components/plugin_subset_select.vue
index c4e93fc037..4c4198a7df 100644
--- a/jdaviz/components/plugin_subset_select.vue
+++ b/jdaviz/components/plugin_subset_select.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry">
+  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry || api_hints_enabled">
     <v-select
       :menu-props="{ left: true }"
       attach
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
-      :label="label ? label : 'Subset'"
+      :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Subset')"
       :hint="hint ? hint : 'Select subset.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
@@ -75,7 +75,9 @@
 
 <script>
 module.exports = {
-  props: ['items', 'selected', 'label', 'has_subregions', 'has_subregions_warning', 'hint', 'rules', 'show_if_single_entry', 'multiselect']
+  props: ['items', 'selected', 'label', 'has_subregions', 'has_subregions_warning', 'hint', 'rules', 'show_if_single_entry', 'multiselect',
+          'api_hint', 'api_hints_enabled'
+  ]
 };
 </script>
 
diff --git a/jdaviz/components/plugin_switch.vue b/jdaviz/components/plugin_switch.vue
new file mode 100644
index 0000000000..8fecdb9ad7
--- /dev/null
+++ b/jdaviz/components/plugin_switch.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-switch
+    :label="api_hints_enabled && api_hint ? api_hint+' '+boolToString(value) : label"
+    :hint="hint"
+    v-model="value"
+    @change="$emit('update:value', $event)"
+    persistent-hint>
+  </v-switch>
+</template>
+
+<script>
+  module.exports = {
+    props: ['value', 'label', 'hint', 'api_hint', 'api_hints_enabled'],
+    methods: {
+      boolToString(b) {
+        if (b) {
+          return 'True'
+        } else {
+          return 'False'
+        }
+      },
+    }
+  };
+</script>
diff --git a/jdaviz/components/plugin_viewer_select.vue b/jdaviz/components/plugin_viewer_select.vue
index cc93d14850..513ad17905 100644
--- a/jdaviz/components/plugin_viewer_select.vue
+++ b/jdaviz/components/plugin_viewer_select.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-  <div v-if="show_multiselect_toggle" style="position: absolute; width: 32px; right: 0px; margin-right: 12px; margin-top: -6px; z-index: 999">
+    <v-row v-if="show_multiselect_toggle && api_hints_enabled && api_hint_multiselect"> 
+      <span class="api-hint">
+        {{  api_hint_multiselect }} {{  multiselect ? 'True' : 'False' }}
+      </span>
+    </v-row>
+    <div v-if="show_multiselect_toggle" style="position: absolute; width: 32px; right: 0px; margin-right: 12px; margin-top: -6px; z-index: 999">
     <j-tooltip tipid='viewer-multiselect-toggle'>
       <v-btn
         icon
@@ -11,14 +16,14 @@
       </v-btn>
     </j-tooltip>
   </div>
-  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry">
+  <v-row v-if="items.length > 1 || selected.length===0 || show_if_single_entry || api_hints_enabled">
     <v-select
       :menu-props="{ left: true }"
       attach
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
-      :label="label ? label : 'Viewer'"
+      :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Viewer')"
       :hint="hint ? hint : 'Select viewer.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
@@ -76,7 +81,8 @@
 <script>
 module.exports = {
   props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect',
-          'show_multiselect_toggle', 'icon_checktoradial', 'icon_radialtocheck']
+          'show_multiselect_toggle', 'icon_checktoradial', 'icon_radialtocheck',
+          'api_hint', 'api_hint_multiselect', 'api_hints_enabled']
 };
 </script>
 
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 7a4580ac0a..a458502ed0 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -1,19 +1,31 @@
 <template>
-  <v-container class="tray-plugin" style="padding-left: 24px; padding-right: 24px; padding-top: 12px">
+  <v-container 
+    :class="api_hints_enabled ? 'tray-plugin api-hint' : 'tray-plugin'"
+    style="padding-left: 24px; padding-right: 24px; padding-top: 12px" >
     <v-row>
       <div style="width: calc(100% - 64px)">
         <j-docs-link :link="link">{{ description }}</j-docs-link>
       </div>
       <div style="width: 32px">
-        <v-btn icon @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}">
+        <v-btn
+          v-if="api_hints_enabled !== undefined && config && plugin_key" 
+          icon 
+          @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}"
+        >
           <v-icon>mdi-code-tags</v-icon>
         </v-btn>
       </div>
-      <div style="width: 32px">
+      <div style="width: 32px" class="ignore-api-hint">
         <j-plugin-popout :popout_button="popout_button"></j-plugin-popout>
       </div>
     </v-row>
-    
+
+    <v-row v-if="api_hints_enabled">
+        <span class="api-hint-header">
+          plg = {{ config }}.plugins['{{ plugin_key }}']
+        </span>
+      </v-row>
+
     <v-row v-if="isDisabled()">
       <span> {{ getDisabledMsg() }}</span>
     </v-row>
@@ -22,11 +34,12 @@
         <v-switch
           v-model="keep_active"
           @change="$emit('update:keep_active', $event)"
-          label="Keep active"
+          :label="api_hints_enabled ? 'plg.keep_active = '+boolToString(keep_active) : 'Keep active'"
           hint="Consider plugin active (showing any previews and enabling all keypress events) even when not opened"
           persistent-hint>
         </v-switch>
       </v-row>
+
       <slot></slot>
     </div>
   </v-container>
@@ -34,9 +47,17 @@
 
 <script>
 module.exports = {
-  props: ['irrelevant_msg', 'disabled_msg', 'description', 'api_hints_enabled', 'link', 'popout_button',
+  props: ['config', 'plugin_key', 'irrelevant_msg', 'disabled_msg', 'description',
+          'api_hints_enabled', 'link', 'popout_button',
           'uses_active_status', 'keep_active', 'scroll_to'],
   methods: {
+    boolToString(b) {
+      if (b) {
+        return 'True'
+      } else {
+        return 'False'
+      }
+    },
     isDisabled() {
       return this.getDisabledMsg().length > 0
     },
diff --git a/jdaviz/configs/cubeviz/plugins/slice/slice.vue b/jdaviz/configs/cubeviz/plugins/slice/slice.vue
index 06c4f5acc0..9154133745 100644
--- a/jdaviz/configs/cubeviz/plugins/slice/slice.vue
+++ b/jdaviz/configs/cubeviz/plugins/slice/slice.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Slice"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Select slice of the cube to show in the image viewers.  The slice can also be changed interactively in the spectrum viewer by activating the slice tool.'"
     :irrelevant_msg="irrelevant_msg"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#slice'"
@@ -14,35 +17,38 @@
           </v-expansion-panel-header>
           <v-expansion-panel-content class="plugin-expansion-panel-content">
             <v-row v-if="allow_disable_snapping">
-              <v-switch
+              <plugin-switch
+                :value.sync="snap_to_slice"
                 label="Snap to Slice"
+                api_hint="plg.snap_to_slice = "
+                :api_hints_enabled="api_hints_enabled"
                 hint="Snap indicator (and value) to the nearest slice in the cube."
-                v-model="snap_to_slice"
-                persistent-hint>
-              </v-switch>
+              />
             </v-row>
             <v-row>
-              <v-switch
+              <plugin-switch
+                :value.sync="show_indicator"
                 label="Show Indicator"
+                api_hint="plg.show_indicator = "
+                :api_hints_enabled="api_hints_enabled"
                 hint="Show slice indicator even when slice tool is inactive."
-                v-model="show_indicator"
-                persistent-hint>
-              </v-switch>
+              />
             </v-row>
             <v-row>
-              <v-switch
+              <plugin-switch
+                :value.sync="show_value"
                 label="Show Value"
+                api_hint="plg.show_value = "
+                :api_hints_enabled="api_hints_enabled"
                 :hint="'Show slice '+value_label.toLowerCase()+' in label to right of indicator.'"
-                v-model="show_value"
-                persistent-hint>
-              </v-switch>
+              />
             </v-row>
           </v-expansion-panel-content>
         </v-expansion-panel>
       </v-expansion-panels>
     </v-row>
 
-    <v-row justify="end">
+    <v-row justify="end" class="ignore-api-hints">
       <v-btn color="primary" text v-if="!cube_viewer_exists" @click="create_cube_viewer">
         Show Cube Viewer
       </v-btn>
@@ -55,13 +61,13 @@
         @focus="(e) => value_editing = true"
         @blur="(e) => value_editing = false"
         class="mt-0 pt-0"
-        :label="value_label"
+        :label="api_hints_enabled ? 'plg.value =' : value_label"
         :hint="value_label+' corresponding to slice.'+(snap_to_slice && value_editing ? '  Indicator will snap to slice when clicking or tabbing away from input.' : '')"
         :suffix="value_unit"
       ></v-text-field>
     </v-row>
 
-    <v-row class="row-no-outside-padding row-min-bottom-padding">
+    <v-row class="row-no-outside-padding row-min-bottom-padding ignore-api-hints">
       <v-col>
         <v-tooltip top>
           <template v-slot:activator="{ on, attrs }">
diff --git a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.py b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.py
index 809fe08e07..bc6ff370b0 100644
--- a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.py
+++ b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.py
@@ -184,7 +184,7 @@ def __init__(self, *args, **kwargs):
 
     @property
     def user_api(self):
-        expose = ['dataset', 'function', 'aperture',
+        expose = ['show_live_preview', 'dataset', 'function', 'aperture',
                   'background', 'bg_wavelength_dependent',
                   'bg_spec_per_spaxel', 'bg_spec_add_results', 'extract_bg_spectrum',
                   'add_results', 'extract',
diff --git a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
index 74629b7a65..385aea06e7 100644
--- a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
+++ b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Spectral Extraction"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Extract a '+resulting_product_name+' from a spectral cube.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#spectral-extraction'"
     :uses_active_status="uses_active_status"
@@ -17,12 +20,13 @@
           </v-expansion-panel-header>
           <v-expansion-panel-content class="plugin-expansion-panel-content">
             <v-row>
-              <v-switch
-                v-model="show_live_preview"
+              <plugin-switch
+                :value.sync="show_live_preview"
                 label="Show live-extraction"
+                api_hint="plg.show_live_preview = "
+                :api_hints_enabled="api_hints_enabled"
                 hint="Whether to compute/show extraction when making changes to input parameters.  Disable if live-preview becomes laggy."
-                persistent-hint
-              ></v-switch>
+              />
             </v-row>
           </v-expansion-panel-content>
         </v-expansion-panel>
@@ -37,6 +41,8 @@
         :selected.sync="aperture_selected"
         :show_if_single_entry="true"
         label="Spatial aperture"
+        api_hint="plg.aperture ="
+        :api_hints_enabled="api_hints_enabled"
         :hint="'Select a spatial region to extract its '+resulting_product_name+'.'"
       />
 
@@ -48,13 +54,14 @@
         </v-row>
 
         <div v-if="aperture_selected_validity.is_aperture">
-          <v-row>
-            <v-switch
-              v-model="wavelength_dependent"
+          <v-row class="ignore-api-hints">
+            <plugin-switch
+              :value.sync="wavelength_dependent"
               label="Wavelength dependent"
+              api_hint="plg.wavelength_dependent = "
+              :api_hints_enabled="api_hints_enabled"
               hint="Vary aperture linearly with wavelength"
-              persistent-hint>
-            </v-switch>
+            />
           </v-row>
           <div v-if="wavelength_dependent">
             <v-row justify="end">
@@ -70,12 +77,12 @@
                 type="number"
                 :step="0.1"
                 class="mt-0 pt-0"
-                label="Wavelength"
+                :label="api_hints_enabled ? 'plg.reference_spectral_value =' : 'Wavelength'"
                 hint="Wavelength at which the aperture matches the selected subset."
                 persistent-hint
               ></v-text-field>
             </v-row>
-            <v-row justify="end">
+            <v-row justify="end" class="ignore-api-hints">
               <j-tooltip tooltipcontent="Select the slice nearest the reference wavelength">
                 <plugin-action-button :results_isolated_to_plugin="true" @click="goto_reference_spectral_value">
                   Slice to Wavelength
@@ -94,6 +101,8 @@
         :selected.sync="bg_selected"
         :show_if_single_entry="true"
         label="Background"
+        api_hint="plg.background ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Select a spatial region to use for background subtraction."
       />
 
@@ -113,12 +122,13 @@
                  && bg_selected_validity.is_aperture
                  && wavelength_dependent">
         <v-row>
-          <v-switch
-            v-model="bg_wavelength_dependent"
+          <plugin-switch
+            :value.sync="bg_wavelength_dependent"
             label="Wavelength dependent"
+            api_hint="bg_wavelength_dependent ="
+            :api_hints_enabled="api_hints_enabled"
             hint="Vary background linearly with wavelength"
-            persistent-hint>
-          </v-switch>
+          />
         </v-row>
         <div v-if="bg_wavelength_dependent">
           <v-row>
@@ -127,7 +137,7 @@
               type="number"
               :step="0.1"
               class="mt-0 pt-0"
-              label="Wavelength"
+              :label="api_hints_enabled ? 'plg.reference_spectral_value =' : 'Wavelength'"
               hint="Wavelength at which the background matches the selected subset (fixed at same value as for aperture above)."
               persistent-hint
               disabled
@@ -144,12 +154,13 @@
             </v-expansion-panel-header>
             <v-expansion-panel-content class="plugin-expansion-panel-content">
               <v-row v-if="function_selected === 'Sum'">
-                <v-switch
-                  v-model="bg_spec_per_spaxel"
+                <plugin-switch
+                  :value.sync="bg_spec_per_spaxel"
                   label="Normalize per-spaxel"
+                  api_hint="bg_spec_per_spaxel ="
+                  :api_hints_enabled="api_hints_enabled"
                   :hint="'Whether to normalize the background per spaxel (not shown in preview). Otherwise, the '+resulting_product_name+' will be scaled by the ratio between the areas of the extraction aperture to the background aperture.'"
-                  persistent-hint
-                ></v-switch>
+                />
               </v-row>
               <plugin-add-results
                 :label.sync="bg_spec_results_label"
@@ -162,6 +173,9 @@
                 :add_to_viewer_selected.sync="bg_spec_add_to_viewer_selected"
                 action_label="Export"
                 :action_tooltip="'Create background '+resulting_product_name"
+                add_results_api_hint='plg.bg_spec_results'
+                action_api_hint='plg.extract_bg_spectrum(add_data=True)'
+                :api_hints_enabled="api_hints_enabled"
                 @click:action="create_bg_spec"
               ></plugin-add-results>
             </v-expansion-panel-content>
@@ -194,7 +208,7 @@
             attach
             :items="aperture_method_items.map(i => i.label)"
             v-model="aperture_method_selected"
-            label="Aperture masking method"
+            :label="api_hints_enabled ? 'plg.aperture_method =' : 'Aperture masking method'"
             :hint="'Extract '+resulting_product_name+' using an aperture masking method in place of the subset mask.'"
             persistent-hint
             ></v-select>
@@ -212,7 +226,7 @@
           attach
           :items="function_items.map(i => i.label)"
           v-model="function_selected"
-          label="Function"
+          :label="api_hints_enabled ? 'plg.function =' : 'Function'"
           :hint="'Function to apply to data in \''+aperture_selected+'\'.'"
           persistent-hint
         ></v-select>
@@ -242,13 +256,16 @@
         action_label="Extract"
         action_tooltip="Run spectral extraction with error and mask propagation"
         :action_spinner="spinner"
+        add_results_api_hint='plg.add_results'
+        action_api_hint='plg.extract(add_data=True)'
+        :api_hints_enabled="api_hints_enabled"
         :action_disabled="aperture_selected === bg_selected || conflicting_aperture_and_function"
         @click:action="spectral_extraction"
       ></plugin-add-results>
 
       <j-plugin-section-header v-if="extraction_available && export_enabled">Results</j-plugin-section-header>
 
-      <div style="display: grid; position: relative"> <!-- overlay container -->
+      <div class="ignore-api-hint" style="display: grid; position: relative"> <!-- overlay container -->
         <div style="grid-area: 1/1">
           <div v-if="extraction_available && export_enabled">
 
diff --git a/jdaviz/configs/default/plugins/collapse/collapse.vue b/jdaviz/configs/default/plugins/collapse/collapse.vue
index 6c4bb76ef4..64b3053ebb 100644
--- a/jdaviz/configs/default/plugins/collapse/collapse.vue
+++ b/jdaviz/configs/default/plugins/collapse/collapse.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Collapse"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Collapse a spectral cube along one axis.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#collapse'"
     :popout_button="popout_button"
@@ -10,6 +13,8 @@
       :selected.sync="dataset_selected"
       :show_if_single_entry="false"
       label="Data"
+      api_hint="plg.dataset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select the data set to collapse."
     />
 
@@ -19,7 +24,7 @@
         attach
         :items="function_items.map(i => i.label)"
         v-model="function_selected"
-        label="Function"
+        :label="api_hints_enabled ? 'plg.function =' : 'Function'"
         hint="Function to use in the collapse."
         persistent-hint
       ></v-select>
@@ -32,6 +37,8 @@
       :show_if_single_entry="true"
       has_subregions_warning="The selected selected subset has subregions, the entire range will be used, ignoring any gaps."
       label="Spectral region"
+      api_hint="plg.spectral_subset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select spectral region to apply the collapse."
     />
 
@@ -47,12 +54,15 @@
       action_label="Collapse"
       action_tooltip="Collapse data"
       :action_spinner="spinner"
+      add_results_api_hint='plg.add_results'
+      action_api_hint='plg.collapse(add_data=True)'
+      :api_hints_enabled="api_hints_enabled"
       @click:action="collapse"
     ></plugin-add-results>
 
     <j-plugin-section-header v-if="collapsed_spec_available && export_enabled">Results</j-plugin-section-header>
 
-    <div style="display: grid; position: relative"> <!-- overlay container -->
+    <div style="display: grid; position: relative" class="ignore-api-hints"> <!-- overlay container -->
       <div style="grid-area: 1/1">
         <div v-if="collapsed_spec_available && export_enabled">
 
diff --git a/jdaviz/configs/default/plugins/export/export.py b/jdaviz/configs/default/plugins/export/export.py
index 5734e63f66..8f9080172f 100644
--- a/jdaviz/configs/default/plugins/export/export.py
+++ b/jdaviz/configs/default/plugins/export/export.py
@@ -190,8 +190,6 @@ def __init__(self, *args, **kwargs):
     def user_api(self):
         # TODO: backwards compat for save_figure, save_movie,
         # i_start, i_end, movie_fps, movie_filename
-        # TODO: expose export method once API is finalized
-        # is the above comment still needed or can it be removed?
         expose = ['viewer', 'viewer_format',
                   'dataset', 'dataset_format',
                   'subset', 'subset_format',
diff --git a/jdaviz/configs/default/plugins/export/export.vue b/jdaviz/configs/default/plugins/export/export.vue
index c710d52a2a..f51041a9e5 100644
--- a/jdaviz/configs/default/plugins/export/export.vue
+++ b/jdaviz/configs/default/plugins/export/export.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Export"
+    :api_hints_enabled.sync="api_hints_enabled"
     description='Export data or plots from the app to a file.'
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#export'"
     :popout_button="popout_button"
@@ -22,6 +25,8 @@
         :selected.sync="viewer_selected"
         :multiselect="multiselect"
         :single_select_allow_blank="false"
+        api_hint="plg.viewer ="
+        :api_hints_enabled="api_hints_enabled"
       >
       </plugin-inline-select>
       <v-row class="row-min-bottom-padding">
@@ -31,7 +36,7 @@
           attach
           v-model="viewer_format_selected"
           :items="viewer_format_items.map(i => i.label)"
-          label="Format"
+          :label="api_hints_enabled ? 'plg.viewer_format =' : 'Format'"
           hint="Image format for exporting viewers."
           :disabled="viewer_selected.length == 0"
           persistent-hint
@@ -101,6 +106,8 @@
         :selected.sync="dataset_selected"
         :multiselect="multiselect"
         :single_select_allow_blank="false"
+        api_hint="plg.dataset ="
+        :api_hints_enabled="api_hints_enabled"
       >
       </plugin-inline-select>
 
@@ -116,7 +123,7 @@
             attach
             v-model="dataset_format_selected"
             :items="dataset_format_items.map(i => i.label)"
-            label="Format"
+            :label="api_hints_enabled ? 'plg.dataset_format =' : 'Format'"
             hint="Format for exporting datasets."
             :disabled="dataset_selected.length == 0"
             persistent-hint
@@ -135,6 +142,8 @@
         :selected.sync="subset_selected"
         :multiselect="multiselect"
         :single_select_allow_blank="false"
+        api_hint="plg.subset ="
+        :api_hints_enabled="api_hints_enabled"
       >
       </plugin-inline-select>
 
@@ -153,7 +162,7 @@
           :items="subset_format_items"
           item-text="label"
           item-disabled="disabled"
-          label="Format"
+          :label="api_hints_enabled ? 'plg.subset_format =' : 'Format'"
           hint="Format for exporting subsets."
           :disabled="subset_selected == null || subset_selected.length == 0"
           persistent-hint
@@ -172,6 +181,8 @@
         :selected.sync="plugin_table_selected"
         :multiselect="multiselect"
         :single_select_allow_blank="false"
+        api_hint="plg.table ="
+        :api_hints_enabled="api_hints_enabled"
       >
       </plugin-inline-select>
       <v-row class="row-min-bottom-padding">
@@ -181,7 +192,7 @@
           attach
           v-model="plugin_table_format_selected"
           :items="plugin_table_format_items.map(i => i.label)"
-          label="Format"
+          :label="api_hints_enabled ? 'plg.plugin_table_format =' : 'Format'"
           hint="File format for exporting plugin tables."
           :disabled="plugin_table_selected.length == 0"
           persistent-hint
@@ -200,6 +211,8 @@
         :selected.sync="plugin_plot_selected"
         :multiselect="multiselect"
         :single_select_allow_blank="false"
+        api_hint="plg.plugin_plot ="
+        :api_hints_enabled="api_hints_enabled"
       >
       </plugin-inline-select>
       <jupyter-widget
@@ -213,7 +226,7 @@
           attach
           v-model="plugin_plot_format_selected"
           :items="plugin_plot_format_items.map(i => i.label)"
-          label="Format"
+          :label="api_hints_enabled ? 'plg.plugin_plot_format =' : 'Format'"
           hint="File format for exporting plugin plots."
           :disabled="plugin_plot_selected.length == 0"
           persistent-hint
@@ -228,6 +241,7 @@
           :value="default_filepath"
           label="Filepath"
           hint="Filepath export location."
+          class="ignore-api-hints"
           persistent-hint
           disabled
         ></v-text-field>
@@ -242,7 +256,7 @@
       :default="filename_default"
       :auto.sync="filename_auto"
       :invalid_msg="filename_invalid_msg"
-      label="Filename"
+      :label="api_hints_enabled ? 'plg.filename =' : 'Filename'"
       hint="Export to a file on disk."
     ></plugin-auto-label>
 
@@ -267,7 +281,11 @@
                    viewer_invalid_msg.length > 0 ||
                    (viewer_selected.length > 0 && viewer_format_selected == 'mp4' && !movie_enabled)"
       >
-        Export
+        {{ api_hints_enabled ?
+          'plg.export()'
+          :
+          'Export'
+        }}
       </plugin-action-button>
     </div>
 
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index 2287136664..184b191945 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -1,18 +1,13 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Gaussian Smooth"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Smooth data with a Gaussian kernel.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#gaussian-smooth'"
-    :api_hints_enabled.sync="api_hints_enabled"
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
-
-      <v-row v-if="api_hints_enabled">
-        <span class="api_hint">
-          plg = {{config}}.plugins['Gaussian Smooth']
-        </span>
-      </v-row>
-
       <v-row v-if="show_modes">
         <v-select
           :menu-props="{ left: true }"
@@ -20,7 +15,6 @@
           :items="mode_items.map(i => i.label)"
           v-model="mode_selected"
           :label="api_hints_enabled ? 'plg.mode =' : 'Mode'"
-          :class="api_hints_enabled ? 'api_hint' : null"
           hint="Smooth data spectrally or spatially."
           persistent-hint
         ></v-select>
@@ -43,7 +37,6 @@
         <v-text-field
           ref="stddev"
           :label="api_hints_enabled ? 'plg.stddev =' : 'Standard deviation'"
-          :class="api_hints_enabled ? 'api_hint' : null"
           v-model.number="stddev"
           type="number"
           hint="The stddev of the kernel, in pixels."
diff --git a/jdaviz/configs/default/plugins/markers/markers.vue b/jdaviz/configs/default/plugins/markers/markers.vue
index 060107b32a..65bbd63d25 100644
--- a/jdaviz/configs/default/plugins/markers/markers.vue
+++ b/jdaviz/configs/default/plugins/markers/markers.vue
@@ -1,11 +1,13 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Markers"
     :description="docs_description || 'Create and export markers.  Press m with the cursor over a viewer to log the mouseover information.  To change the selected layer, click the layer cycler in the mouseover information section of the app-level toolbar.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#markers'"
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
-    :popout_button="popout_button"
+    :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
     <jupyter-widget :widget="table_widget"></jupyter-widget> 
diff --git a/jdaviz/configs/default/plugins/metadata_viewer/metadata_viewer.vue b/jdaviz/configs/default/plugins/metadata_viewer/metadata_viewer.vue
index 42b8b5ef64..bf6c949bff 100644
--- a/jdaviz/configs/default/plugins/metadata_viewer/metadata_viewer.vue
+++ b/jdaviz/configs/default/plugins/metadata_viewer/metadata_viewer.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Metadata"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'View metadata.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#metadata-viewer'"
     :popout_button="popout_button"
@@ -12,20 +15,28 @@
       :selected.sync="dataset_selected"
       :show_if_single_entry="config!='specviz'"
       label="Data"
+      api_hint='plg.dataset ='
+      :api_hints_enabled="api_hints_enabled"
       hint="Select the data to see metadata."
     />
 
-    <v-row v-if="has_primary">
-      <v-switch
-        label="Show primary header"
+    <v-row v-if="has_primary || api_hints_enabled">
+      <plugin-switch
+        :value.sync="show_primary"
+        label='Show primary header'
+        api_hint='plg.show_primary = '
+        :api_hints_enabled="api_hints_enabled"
         hint="Show MEF primary header metadata instead."
-        v-model="show_primary"
-        persistent-hint>
-      </v-switch>
+      />
     </v-row>
 
     <j-plugin-section-header>Metadata</j-plugin-section-header>
     <div v-if="has_metadata">
+      <v-row v-if="api_hints_enabled">
+        <span class="api-hint">
+          plg.metadata
+        </span>
+      </v-row>
       <v-row>
         <v-text-field
           v-model='metadata_filter'
diff --git a/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue b/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue
index 6d8fda1512..0e48472798 100644
--- a/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue
+++ b/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue
@@ -1,17 +1,21 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Model Fitting"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Fit an analytic model to data or a subset.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#model-fitting'"
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
     <v-row v-if="config=='cubeviz'">
-      <v-switch
-        v-model="cube_fit"
+      <plugin-switch
+        :value.sync="cube_fit"
         label="Cube Fit"
+        api_hint="plg.cube_fit ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Whether to fit to an extracted spectrum or full cube."
-        persistent-hint
-      ></v-switch>
+      />
     </v-row>
 
     <!-- for mosviz, the entries change on row change
@@ -20,8 +24,10 @@
     <plugin-dataset-select
       :items="dataset_items"
       :selected.sync="dataset_selected"
-      :show_if_single_entry="['mosviz', 'cubeviz'].indexOf(config) !== -1"
+      :show_if_single_entry="['mosviz', 'cubeviz'].indexOf(config) !== -1 || api_hints_enabled"
       label="Data"
+      api_hint="plg.dataset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select the data set to be fitted."
     />
 
@@ -30,6 +36,8 @@
       :selected.sync="spectral_subset_selected"
       :show_if_single_entry="true"
       label="Spectral region"
+      api_hint="plg.spectral_subset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select spectral region to fit."
     />
 
@@ -47,7 +55,7 @@
           :menu-props="{ left: true }"
           :items="model_comp_items.map(i => i.label)"
           v-model="model_comp_selected"
-          label="Model Component"
+          :label="api_hints_enabled ? 'plg.model_component =' : 'Model Component'"
           hint="Select a model component to add."
           persistent-hint
         ></v-select>
@@ -71,6 +79,7 @@
         :default="comp_label_default"
         :auto.sync="comp_label_auto"
         :invalid_msg="comp_label_invalid_msg"
+        :label="api_hints_enabled ? 'plg.model_component_label =' : null"
         hint="Label for this new model component."
       ></plugin-auto-label>
 
@@ -81,7 +90,11 @@
             :results_isolated_to_plugin="true"
             @click="add_model"
           >
-            Add Component
+            {{ api_hints_enabled ?
+              'plg.create_model_component()'
+              :
+              'Add Component'
+            }}
           </plugin-action-button>
         </j-tooltip>
       </v-row>
@@ -99,6 +112,7 @@
             color="turquoise"
             dark
             style="padding-left: 8px; padding-right: 6px;"
+            class="ignore-api-hints"
             @click="reestimate_model_parameters(null)">
             <v-icon left small dense style="margin-right: 2px">mdi-restart</v-icon>
             Re-estimate free parameters
@@ -232,6 +246,7 @@
         :default="model_equation_default"
         :auto.sync="model_equation_auto"
         :invalid_msg="model_equation_invalid_msg"
+        :label="api_hints_enabled ? 'plg.equation =' : null"
         hint="Enter an equation specifying how to combine the component models, using their model IDs and basic arithmetic operators (ex. component1+component2)."
       ></plugin-auto-label>
 
@@ -255,16 +270,21 @@
         action_tooltip="Fit the model to the data"
         :action_disabled="model_equation_invalid_msg.length > 0 || !spectral_subset_valid"
         :action_spinner="spinner"
+        add_results_api_hint='plg.add_results'
+        action_api_hint='plg.calculate_fit(add_data=True)'
+        :api_hints_enabled="api_hints_enabled"
         @click:action="apply"
       >
         <div v-if="config!=='cubeviz' || !cube_fit">
           <v-row>
-            <v-switch
-              v-model="residuals_calculate"
+            <plugin-switch
+              :value.sync="residuals_calculate"
               label="Calculate residuals"
+              api_hint="plg.residuals_calculate = "
+              :api_hints_enabled="api_hints_enabled"
               hint="Whether to compute and export residuals (data minus model)."
               persistent-hint
-            ></v-switch>
+            />
           </v-row>
 
           <plugin-auto-label
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.py b/jdaviz/configs/default/plugins/plot_options/plot_options.py
index e457061fa1..478729d7ed 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.py
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.py
@@ -676,7 +676,7 @@ def hex_for_cmap(cmap):
     @property
     def user_api(self):
         expose = ['multiselect', 'viewer', 'viewer_multiselect', 'layer', 'layer_multiselect',
-                  'select_all', 'subset_visible']
+                  'select_all', 'subset_visible', 'reset_viewer_bounds']
         if self.config == "cubeviz":
             expose += ['uncertainty_visible']
         if self.config != "imviz":
@@ -866,6 +866,9 @@ def _update_viewer_zoom_steps(self, msg={}):
         self.zoom_step, _ = _round_step(max(x_max-x_min, y_max-y_min) / 100.)
 
     def vue_reset_viewer_bounds(self, _):
+        self.reset_viewer_bounds()
+
+    def reset_viewer_bounds(self):
         # This button is currently only exposed if only the spectrum viewer is selected
         viewers = [self.viewer.selected_obj] if not self.viewer_multiselect else self.viewer.selected_obj # noqa
         for viewer in viewers:
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 02409232fe..aea0b5154c 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Plot Options"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Viewer and data/layer options.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#plot-options'"
     :uses_active_status="uses_active_status"
@@ -15,12 +18,13 @@
           </v-expansion-panel-header>
           <v-expansion-panel-content class="plugin-expansion-panel-content">
             <v-row>
-              <v-switch
-                v-model="show_viewer_labels"
+              <plugin-switch
+                :value.sync="show_viewer_labels"
                 label="Show labels in viewers"
+                api_hint = 'plg.show_viewer_labels = '
+                :api_hints_enabled="api_hints_enabled"
                 hint="Whether to show viewer/layer labels on each viewer"
-                persistent-hint
-              ></v-switch>
+              />
             </v-row>
           </v-expansion-panel-content>
         </v-expansion-panel>
@@ -36,6 +40,9 @@
       :icon_checktoradial="icon_checktoradial"
       :icon_radialtocheck="icon_radialtocheck"
       :label="viewer_multiselect ? 'Viewers' : 'Viewer'"
+      api_hint='plg.viewer = '
+      api_hint_multiselect='plg.viewer.multiselect = '
+      :api_hints_enabled="api_hints_enabled"
       :show_if_single_entry="viewer_multiselect"
       :hint="viewer_multiselect ? 'Select viewers to set options simultaneously' : 'Select the viewer to set options.'"
     />
@@ -50,7 +57,7 @@
             <glue-state-sync-wrapper :sync="x_min_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('x_min')">
               <glue-float-field
                 ref="x_min"
-                label="X Min"
+                :label="api_hints_enabled ? 'plg.x_min =' : 'X Min'"
                 :value.sync="x_min_value"
                 type="number"
                 :step="x_bound_step"
@@ -60,7 +67,7 @@
             <glue-state-sync-wrapper :sync="x_max_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('x_max')">
               <glue-float-field
                 ref="x_max"
-                label="X Max"
+                :label="api_hints_enabled ? 'plg.x_max =' : 'X Max'"
                 :value.sync="x_max_value"
                 type="number"
                 :step="x_bound_step"
@@ -70,7 +77,7 @@
             <glue-state-sync-wrapper :sync="y_min_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('y_min')">
               <glue-float-field
                 ref="y_min"
-                label="Y Min"
+                :label="api_hints_enabled ? 'plg.y_min =' : 'Y Min'"
                 :value.sync="y_min_value"
                 type="number"
                 :step="y_bound_step"
@@ -80,7 +87,7 @@
             <glue-state-sync-wrapper :sync="y_max_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('y_max')">
               <glue-float-field
                 ref="y_max"
-                label="Y Max"
+                :label="api_hints_enabled ? 'plg.y_max =' : 'Y Max'"
                 :value.sync="y_max_value"
                 type="number"
                 :step="y_bound_step"
@@ -90,7 +97,7 @@
             <glue-state-sync-wrapper :sync="zoom_center_x_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('zoom_center_x')">
               <glue-float-field
                 ref="zoom_center_x"
-                label="X Center"
+                :label="api_hints_enabled ? 'plg.zoom_center_x =' : 'X Center'"
                 :value.sync="zoom_center_x_value"
                 type="number"
                 :step="zoom_step"
@@ -100,7 +107,7 @@
             <glue-state-sync-wrapper :sync="zoom_center_y_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('zoom_center_y')">
               <glue-float-field
                 ref="zoom_center_y"
-                label="Y Center"
+                :label="api_hints_enabled ? 'plg.zoom_center_y =' : 'Y Center'"
                 :value.sync="zoom_center_y_value"
                 type="number"
                 :step="zoom_step"
@@ -110,7 +117,7 @@
             <glue-state-sync-wrapper :sync="zoom_radius_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('zoom_radius')">
               <glue-float-field
                 ref="zoom_radius"
-                label="Zoom-radius"
+                :label="api_hints_enabled ? 'plg.zoom_radius =' : 'Zoom-radius'"
                 :value.sync="zoom_radius_value"
                 type="number"
                 :step="zoom_step"
@@ -122,7 +129,11 @@
                 :results_isolated_to_plugin="false"
                 @click="reset_viewer_bounds"
               >
-                Reset viewer bounds
+                {{api_hints_enabled ? 
+                  'plg.reset_viewer_bounds()'
+                  :
+                  'Reset viewer bounds'
+                }}
               </plugin-action-button>
             </v-row>
           </v-expansion-panel-content>
@@ -137,7 +148,7 @@
           :menu-props="{ left: true }"
           :items="image_color_mode_sync.choices"
           v-model="image_color_mode_value"
-          label="Color Mode"
+          :label="api_hints_enabled ? 'plg.image_color_mode = ' : 'Color Mode'"
           hint="Whether each layer gets a single color or colormap."
           persistent-hint
           dense
@@ -167,7 +178,11 @@
             :results_isolated_to_plugin="false"
             @click="apply_RGB_presets"
           >
-            Assign RGB Presets
+            {{ api_hints_enabled ?
+              'plg.apply_RGB_presets()'
+              :
+              'Assign RGB Presets'
+            }}
           </plugin-action-button>
         </j-tooltip>
       </v-row>
@@ -175,20 +190,37 @@
 
     <!-- GENERAL:AXES -->
     <glue-state-sync-wrapper v-if="axes_visible_sync.in_subscribed_states && viewer_selected.length > 0 && config !== 'imviz'" :sync="axes_visible_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('axes_visible')">
-      <v-switch
-        v-model="axes_visible_value"
+      <plugin-switch
+        :value.sync="axes_visible_value"
         label="Show axes"
+        api_hint="plt.axes_visible = "
+        :api_hints_enabled="api_hints_enabled"
         />
     </glue-state-sync-wrapper>
 
     <glue-state-sync-wrapper v-if="uncertainty_visible_sync.in_subscribed_states" :sync="uncertainty_visible_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('uncertainty_visible')">
-      <v-switch
-        v-model="uncertainty_visible_value"
+      <plugin-switch
+        value.sync="uncertainty_visible_value"
         label="Plot uncertainties"
+        api_hint='plg.uncertainty_visible = '
+        :api_hints_enabled="api_hints_enabled"
         />
     </glue-state-sync-wrapper>
 
     <!-- LAYER OPTIONS -->
+    <div v-if="api_hints_enabled">
+      <v-row v-if="layer_items.length > 1">
+        <span class="api-hint">
+          plg.layer.multiselect = {{ boolToString(layer_multiselect) }}
+        </span>
+      </v-row>
+      <v-row>
+        <span class="api-hint">
+          plg.layer = {{ layer_multiselect ? layer_selected : '\''+layer_selected+'\'' }}
+        </span>
+      </v-row>
+    </div>
+
     <plugin-layer-select-tabs
       :items="layer_items"
       :selected.sync="layer_selected"
@@ -212,7 +244,11 @@
           <v-btn icon @click.stop="marker_visible_value = !marker_visible_value">
             <v-icon>mdi-eye{{ marker_visible_value ? '' : '-off' }}</v-icon>
           </v-btn>
-          Show Scatter Layer
+          {{ api_hints_enabled ?
+            'plg.marker_visible = ' + boolToString(marker_visible_value)
+            :
+            'Show Scatter Layer'
+          }}
         </span>
       </glue-state-sync-wrapper>
 
@@ -221,7 +257,11 @@
           <v-btn icon @click.stop="line_visible_value = !line_visible_value">
             <v-icon>mdi-eye{{ line_visible_value ? '' : '-off' }}</v-icon>
           </v-btn>
-          Show Line
+          {{ api_hints_enabled ?
+            'plg.line_visible = ' + boolToString(line_visible_value)
+            :
+            'Show Line'
+          }}
         </span>
       </glue-state-sync-wrapper>
 
@@ -230,13 +270,23 @@
           <v-btn icon @click.stop="subset_visible_value = !subset_visible_value">
             <v-icon>mdi-eye{{ subset_visible_value ? '' : '-off' }}</v-icon>
           </v-btn>
-          Show Subset
+          {{ api_hints_enabled ?
+            'plg.subset_visible = ' + boolToString(subset_visible_value)
+            :
+            'Show Subset'
+          }}
         </span>
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="subset_visible_value" :sync="subset_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_color')">
         <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">Subset Color</v-subheader>
+          <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
+            {{ api_hints_enabled ?
+              'plg.subset_color = \''+subset_color_value +'\''
+              :
+              'Subset Color'
+            }}
+          </v-subheader>
           <v-menu>
             <template v-slot:activator="{ on }">
                 <span class="color-menu"
@@ -254,7 +304,13 @@
 
       <glue-state-sync-wrapper :sync="subset_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_opacity')">
         <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px">Subset Opacity</v-subheader>
+          <v-subheader class="pl-0 slider-label" style="height: 12px">
+            {{ api_hints_enabled ?
+              'plg.subset_opacity = '+subset_opacity_value
+              :
+              'Subset Opacity'
+            }}
+          </v-subheader>
           <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="subset_opacity_value" hide-details class="no-hint" />
         </div>
       </glue-state-sync-wrapper>
@@ -267,13 +323,23 @@
           <v-btn icon @click.stop="line_visible_value = !line_visible_value">
             <v-icon>mdi-eye{{ line_visible_value ? '' : '-off' }}</v-icon>
           </v-btn>
-          Show Line
+          {{ api_hints_enabled ?
+            'plg.line_visible = ' + boolToString(line_visible_value)
+            :
+            'Show Line'
+           }}
         </span>
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_color')">
         <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">Line Color</v-subheader>
+          <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
+            {{ api_hints_enabled ?
+              'plg.line_color = \''+line_color_value +'\''
+              :
+              'Line Color'
+            }}
+          </v-subheader>
           <v-menu>
             <template v-slot:activator="{ on }">
                 <span class="color-menu"
@@ -290,20 +356,31 @@
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_width_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_width')">
-        <glue-float-field label="Line Width" :value.sync="line_width_value" />
+        <glue-float-field
+          :label="api_hints_enabled ? 'plg.line_width =' : 'Line Width'"
+          :value.sync="line_width_value"
+        />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_opacity')">
         <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px">Line Opacity</v-subheader>
+          <v-subheader class="pl-0 slider-label" style="height: 12px">
+            {{  api_hints_enabled ?
+                'plg.line_opacity = '+line_opacity_value
+                :
+                'Line Opacity'
+            }}
+          </v-subheader>
           <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="line_opacity_value" hide-details class="no-hint" />
         </div>
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_as_steps_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_as_steps')">
-        <v-switch
-          v-model="line_as_steps_value"
+        <plugin-switch
+          value.sync="line_as_steps_value"
           label="Plot profile as steps"
+          api_hint="plg.line_as_steps = "
+          :api_hints_enabled="api_hints_enabled"
           />
       </glue-state-sync-wrapper>
 
@@ -311,15 +388,23 @@
       <div v-if="marker_visible_sync.in_subscribed_states  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)">
         <j-plugin-section-header>Marker</j-plugin-section-header>
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_fill_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_fill')">
-          <v-switch
-            v-model="marker_fill_value"
+          <plugin-switch
+            :value.sync="marker_fill_value"
             label="Fill Marker"
+            api_hint='plg.marker_fill = '
+            :api_hints_enabled="api_hints_enabled"
             />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_opacity')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">Opacity</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px">
+              {{ api_hints_enabled ?
+                'plg.marker_opacity = '+marker_opacity_value
+                :
+                'Opacity'  
+              }}
+            </v-subheader>
             <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="marker_opacity_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
@@ -330,21 +415,33 @@
             :menu-props="{ left: true }"
             :items="marker_size_mode_sync.choices"
             v-model="marker_size_mode_value"
-            label="Size Mode"
+            :label="api_hints_enabled ? 'plg.marker_size_mode =' : 'Size Mode'"
             class="no-hint"
           ></v-select>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_size_mode_value==='Fixed'" :sync="marker_size_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">Size</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px">
+              {{ api_hints_enabled ? 
+                'plg.marker_size = '+marker_size_value
+                :
+                'Size'
+              }}
+            </v-subheader>
             <glue-throttled-slider wait="300" max="10" step="0.1" :value.sync="marker_size_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_size_scale_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size_scale')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">Scale</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px">
+              {{ api_hints_enabled ?
+                'plg.marker_size_scale = '+marker_size_scale_value
+                :
+                'Scale'
+              }}
+            </v-subheader>
             <glue-throttled-slider wait="300" max="10" step="0.1" :value.sync="marker_size_scale_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
@@ -355,7 +452,7 @@
             :menu-props="{ left: true }"
             :items="marker_size_col_sync.choices"
             v-model="marker_size_col_value"
-            label="Column"
+            :label="api_hints_enabled ? 'plg.marker_size_col =' : 'Column'"
             class="no-hint"
           ></v-select>
         </glue-state-sync-wrapper>
@@ -363,7 +460,7 @@
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_size_mode_value!=='Fixed'" :sync="marker_size_vmin_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size_vmin')">
           <v-text-field
             ref="marker_size_vmin"
-            label="vmin"
+            :label="api_hints_enabled ? 'plg.marker_size_vmin =' : 'vmin'"
             v-model.number="marker_size_vmin_value"
             type="number"
             step="0.01"
@@ -373,7 +470,7 @@
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_size_mode_value!=='Fixed'" :sync="marker_size_vmax_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size_vmax')">
           <v-text-field
             ref="marker_size_vmax"
-            label="vmax"
+            :label="api_hints_enabled ? 'plg.marker_size_vmax =' : 'vmax'"
             v-model.number="marker_size_vmax_value"
             type="number"
             step="0.01"
@@ -387,14 +484,20 @@
             :menu-props="{ left: true }"
             :items="marker_color_mode_sync.choices"
             v-model="marker_color_mode_value"
-            label="Color Mode"
+            :label="api_hints_enabled ? 'plg.marker_color_mode =' : 'Color Mode'"
             class="no-hint"
           ></v-select>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_color_mode_value==='Fixed'" :sync="marker_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_color')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">Color</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
+              {{ api_hints_enabled ?
+                'plg.marker_color = \''+marker_color_value +'\''
+                :
+                'Color'
+              }}
+            </v-subheader>
             <v-menu>
               <template v-slot:activator="{ on }">
                   <span class="color-menu"
@@ -416,7 +519,7 @@
             :menu-props="{ left: true }"
             :items="marker_color_col_sync.choices"
             v-model="marker_color_col_value"
-            label="Column"
+            :label="api_hints_enabled ? 'plg.marker_color_col =' : 'Column'"
             class="no-hint"
           ></v-select>
         </glue-state-sync-wrapper>
@@ -427,7 +530,7 @@
             :menu-props="{ left: true }"
             :items="marker_colormap_sync.choices"
             v-model="marker_colormap_value"
-            label="Colormap"
+            :label="api_hints_enabled ? 'plg.marker_colormap =' : 'Colormap'"
             class="no-hint"
           ></v-select>
         </glue-state-sync-wrapper>
@@ -435,7 +538,7 @@
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_color_mode_value!=='Fixed'" :sync="marker_colormap_vmin_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_colormap_vmin')">
           <v-text-field
             ref="marker_colormap_vmin"
-            label="vmin"
+            :label="api_hints_enabled ? 'plg.marker_colormap_vmin =' : 'vmin'"
             v-model.number="marker_colormap_vmin_value"
             type="number"
             step="0.01"
@@ -445,7 +548,7 @@
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_color_mode_value!=='Fixed'" :sync="marker_colormap_vmax_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_colormap_vmax')">
           <v-text-field
             ref="marker_colormap_vmax"
-            label="vmax"
+            :label="api_hints_enabled ? 'plg.marker_colormap_vmax =' : 'vmax'"
             v-model.number="marker_colormap_vmax_value"
             type="number"
             step="0.01"
@@ -461,7 +564,11 @@
           <v-btn icon @click.stop="image_visible_value = !image_visible_value">
             <v-icon>mdi-eye{{ image_visible_value ? '' : '-off' }}</v-icon>
           </v-btn>
-          Show Image
+          {{ api_hints_enabled ?
+            'plg.image_visible = ' + boolToString(image_visible_value)
+            :
+            'Show Image'
+          }}
         </span>
       </glue-state-sync-wrapper>
 
@@ -472,7 +579,7 @@
             :menu-props="{ left: true }"
             :items="image_colormap_sync.choices"
             v-model="image_colormap_value"
-            label="Colormap"
+            :label="api_hints_enabled ? 'plg.image_colormap =' : 'Colormap'"
             dense
           >
             <template v-slot:selection="{ item, index }">
@@ -505,7 +612,13 @@
         </glue-state-sync-wrapper>
         <glue-state-sync-wrapper v-if="image_color_mode_value !== 'Colormaps' || image_color_mode_sync['mixed']" :sync="image_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_color')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">Image Color</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
+              {{ api_hints_enabled ?
+                'plg.image_color = '+image_color_value
+                :
+                'Image Color'
+              }}
+            </v-subheader>
             <v-menu>
               <template v-slot:activator="{ on }">
                   <span class="color-menu"
@@ -526,21 +639,39 @@
 
         <glue-state-sync-wrapper :sync="image_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_opacity')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">Opacity</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px">
+              {{ api_hints_enabled ?
+                'plg.image_opacity = '+image_opacity_value
+                :
+                'Image Opacity'
+              }}
+            </v-subheader>
             <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="image_opacity_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper :sync="image_contrast_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_contrast')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">Contrast</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px">
+              {{ api_hints_enabled ?
+                'plg.image_contrast = '+image_contrast_value
+                :
+                'Contract'
+              }}
+            </v-subheader>
             <glue-throttled-slider wait="300" max="4" step="0.01" :value.sync="image_contrast_value" hide-details />
           </div>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper :sync="image_bias_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_bias')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">Bias</v-subheader>
+            <v-subheader class="pl-0 slider-label" style="height: 12px">
+              {{ api_hints_enabled ?
+                'plg.image_bias = '+image_bias_value
+                :
+                'Bias'
+              }}
+            </v-subheader>
             <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="image_bias_value" hide-details />
           </div>
         </glue-state-sync-wrapper>
@@ -554,7 +685,7 @@
           :menu-props="{ left: true }"
           :items="stretch_function_sync.choices"
           v-model="stretch_function_value"
-          label="Stretch Function"
+          :label="api_hints_enabled ? 'plg.stretch_function =' : 'Stretch Function'"
           class="no-hint"
         ></v-select>
       </glue-state-sync-wrapper>
@@ -565,7 +696,7 @@
           :menu-props="{ left: true }"
           :items="stretch_preset_sync.choices"
           v-model="stretch_preset_value"
-          label="Stretch Percentile Preset"
+          :label="api_hints_enabled ? 'plg.stretch_preset =' : 'Stretch Percentile Preset'"
           class="no-hint"
         ></v-select>
       </glue-state-sync-wrapper>
@@ -574,7 +705,7 @@
       <glue-state-sync-wrapper v-if="layer_multiselect" :sync="stretch_vmin_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('stretch_vmin')">
         <v-text-field
           ref="stretch_vmin"
-          label="Stretch VMin"
+          :label="api_hints_enabled ? 'plg.stretch_vmin =' : 'Stretch VMin'"
           v-model.number="stretch_vmin_value"
           type="number"
           :step="stretch_vstep"
@@ -584,7 +715,7 @@
       <glue-state-sync-wrapper v-if="layer_multiselect" :sync="stretch_vmax_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('stretch_vmax')">
         <v-text-field
           ref="stretch_vmax"
-          label="Stretch VMax"
+          :label="api_hints_enabled ? 'plg.stretch_vmax =' : 'Stretch VMax'"
           v-model.number="stretch_vmax_value"
           type="number"
           :step="stretch_vstep"
@@ -630,7 +761,7 @@
                 <v-row>
                   <v-text-field
                       ref="stretch_hist_nbins"
-                      label="Number of Bins"
+                      :label="api_hints_enabled ? 'plg.stretch_hist_nbins =' : 'Number of Bins'"
                       v-model.number="stretch_hist_nbins"
                       type="number"
                       hint="The amount of bins used in the histogram."
@@ -640,24 +771,28 @@
                   ></v-text-field>
                 </v-row>
                 <v-row>
-                  <v-switch
-                    v-model="stretch_hist_zoom_limits"
+                  <plugin-switch
+                    :value.sync="stretch_hist_zoom_limits"
                     class="hide-input"
                     label="Limit histogram to current zoom limits"
+                    api_hint='plg.stretch_hist_zoom_limits ='
+                    :api_hints_enabled="api_hints_enabled"
                     :disabled="viewer_multiselect && viewer_selected.length > 1"
-                  ></v-switch>
+                  />
                 </v-row>
                 <v-row>
-                  <v-switch
-                    v-model="stretch_curve_visible"
+                  <plugin-switch
+                    :value.sync="stretch_curve_visible"
                     class="hide-input"
                     label="Show stretch function curve"
-                  ></v-switch>
+                    api_hint="plg.stretch_curve_visible ="
+                    :api_hints_enabled="api_hints_enabled"
+                  />
                 </v-row>
                 <glue-state-sync-wrapper :sync="stretch_vmin_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('stretch_vmin')">
                   <v-text-field
                     ref="stretch_vmin"
-                    label="Stretch VMin"
+                    :label="api_hints_enabled ? 'plg.stretch_vmin =' : 'Stretch VMin'"
                     v-model.number="stretch_vmin_value"
                     type="number"
                     :step="stretch_vstep"
@@ -666,7 +801,7 @@
                 <glue-state-sync-wrapper :sync="stretch_vmax_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('stretch_vmax')">
                   <v-text-field
                     ref="stretch_vmax"
-                    label="Stretch VMax"
+                    :label="api_hints_enabled ? 'plg.stretch_vmax =' : 'Stretch VMax'"
                     v-model.number="stretch_vmax_value"
                     type="number"
                     :step="stretch_vstep"
@@ -688,7 +823,11 @@
               <v-btn icon @click.stop="contour_visible_value = !contour_visible_value">
                 <v-icon>mdi-eye{{ contour_visible_value ? '' : '-off' }}</v-icon>
               </v-btn>
-              Show Contours
+              {{ api_hints_enabled ?
+                'plg.contour_visible = ' + boolToString(contour_visible_value)
+                :
+                'Show Contours'
+              }}
             </span>
           </glue-state-sync-wrapper>
 
@@ -717,21 +856,30 @@
 
             <div v-if="contour_mode_value === 'Linear'">
               <glue-state-sync-wrapper :sync="contour_min_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_min')">
-                <glue-float-field label="Contour Min" :value.sync="contour_min_value" />
+                <glue-float-field 
+                  :label="api_hints_enabled ? 'plg.contour_min =' : 'Contour Min'" 
+                  :value.sync="contour_min_value"
+                />
               </glue-state-sync-wrapper>
 
               <glue-state-sync-wrapper :sync="contour_max_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_max')">
-                <glue-float-field label="Contour Max" :value.sync="contour_max_value" />
+                <glue-float-field
+                  :label="api_hints_enabled ? 'plg.contour_max = ' : 'Contour Max'"
+                  :value.sync="contour_max_value"
+                />
               </glue-state-sync-wrapper>
 
               <glue-state-sync-wrapper :sync="contour_nlevels_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_nlevels')">
-                <glue-float-field label="Number of Contour Levels" :value.sync="contour_nlevels_value" />
+                <glue-float-field
+                  :label="api_hints_enabled ? 'plg.contour_nlevels =' : 'Number of Contour Levels'"
+                  :value.sync="contour_nlevels_value"
+                />
               </glue-state-sync-wrapper>
             </div>
             <div v-else>
               <glue-state-sync-wrapper :sync="contour_custom_levels_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_levels')">
                 <v-text-field
-                  label="Contour Levels"
+                  :label="api_hints_enabled ? 'plg.contour_custom_levels =' : 'Contour Levels'"
                   :value="contour_custom_levels_txt"
                   @focus="contour_custom_levels_focus"
                   @blur="contour_custom_levels_blur"
@@ -777,6 +925,13 @@ module.exports = {
     }
   },
   methods: {
+    boolToString(b) {
+      if (b) {
+        return 'True'
+      } else {
+        return 'False'
+      }
+    },
     contour_custom_levels_focus(e) {
       this.contour_custom_levels_user_editing = true
     },
diff --git a/jdaviz/configs/imviz/plugins/footprints/footprints.vue b/jdaviz/configs/imviz/plugins/footprints/footprints.vue
index 375342d6ab..83a4692277 100644
--- a/jdaviz/configs/imviz/plugins/footprints/footprints.vue
+++ b/jdaviz/configs/imviz/plugins/footprints/footprints.vue
@@ -1,12 +1,15 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Footprints"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Show instrument footprints as overlays on image viewers.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#footprints'"
     :uses_active_status="uses_active_status"
     @plugin-ping="plugin_ping($event)"
     :keep_active.sync="keep_active"
     :disabled_msg="disabled_msg"
-    :popout_button="popout_button"
+    :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
     <plugin-editable-select
@@ -15,11 +18,21 @@
       :items="overlay_items"
       :selected.sync="overlay_selected"
       label="Overlay"
+      api_hint="plg.overlay ="
+      api_hint_add="plg.add_overlay"
+      api_hint_rename="plg.rename_overlay"
+      api_hint_remove="plg.remove_overlay"
+      :api_hints_enabled="api_hints_enabled"
       hint="Select an overlay to modify."
       >
     </plugin-editable-select>
 
-    <v-alert v-if="is_pixel_linked" type='warning' style="margin-left: -12px; margin-right: -12px">
+    <v-alert
+      v-if="is_pixel_linked"
+      type='warning'
+      class="ignore-api-hints"
+      style="margin-left: -12px; margin-right: -12px"
+    >
       cannot plot footprint when aligned by pixels (see Orientation plugin).
       <v-row justify="end" style="margin-right: 2px; margin-top: 16px">
         <v-btn @click="link_by_wcs">
@@ -39,6 +52,8 @@
         :selected.sync="viewer_selected"
         :multiselect="true"
         label="Viewers"
+        api_hint="plg.viewer ="
+        :api_hints_enabled="api_hints_enabled"
         :show_if_single_entry="false"
         hint="Select viewers to display this overlay"
       />
@@ -48,7 +63,11 @@
           <v-btn icon @click.stop="visible = !visible">
             <v-icon>mdi-eye{{ visible ? '' : '-off' }}</v-icon>
           </v-btn>
-          Show Overlay
+          {{ api_hints_enabled ?
+            'plg.visible = ' + boolToString(visible)
+            :
+            'Show Overlay'
+          }}
         </span>
       </v-row>
 
@@ -66,11 +85,21 @@
             </div>
           </v-menu>
         <span style="padding-left: 12px; padding-top: 3px">
-          Overlay Color
+          {{  api_hints_enabled ?
+              'plg.color = '+color
+              :
+              'Overlay Color'
+          }}
         </span>
       </v-row>
       <div>
-        <v-subheader class="pl-0 slider-label" style="height: 12px">Fill Opacity</v-subheader>
+        <v-subheader class="pl-0 slider-label" style="height: 12px">
+          {{ api_hints_enabled ?
+              'plg.fill_opacity = '+fill_opacity
+              :
+              'Fill Opacity' 
+             }}
+        </v-subheader>
         <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="fill_opacity" hide-details class="no-hint" />
       </div>
 
@@ -84,6 +113,8 @@
         :selected.sync="preset_selected"
         label="Preset"
         hint="Preset instrument or import from a file."
+        api_hint="plg.preset ="
+        :api_hints_enabled="api_hints_enabled"
         :from_file.sync="from_file"
         :from_file_message="from_file_message"
         dialog_title="Import Region"
@@ -99,7 +130,11 @@
           <span style="line-height: 36px; font-size: 12px; color: #666666; width: 100%">Center RA/Dec</span>
           <j-tooltip v-for="viewer_ref in viewer_selected" :tooltipcontent="'center RA/DEC on current zoom-limits of '+viewer_ref">
           <v-btn @click="() => center_on_viewer(viewer_ref)">
-            {{viewer_ref}}
+            {{ api_hints_enabled ?
+                'plg.center_on_viewer(\''+viewer_ref+'\')'
+                :
+                viewer_ref
+            }}
           </v-btn>
           </j-tooltip>
         </v-row>
@@ -110,7 +145,7 @@
             type="number"
             step="0.01"
             :rules="[() => ra!=='' || 'This field is required']"
-            label="RA"
+            :label="api_hints_enabled ? 'plg.ra = ' : 'RA'"
             hint="Right Ascension (degrees)"
             persistent-hint
           ></v-text-field>
@@ -122,7 +157,7 @@
             type="number"
             step="0.01"
             :rules="[() => dec!=='' || 'This field is required']"
-            label="Dec"
+            :label="api_hints_enabled ? 'plg.dec = ' : 'Dec'"
             hint="Declination (degrees)"
             persistent-hint
           ></v-text-field>
@@ -133,7 +168,7 @@
             v-model.number="pa"
             type="number"
             :rules="[() => pa!=='' || 'This field is required']"
-            label="Position Angle"
+            :label="api_hints_enabled ? 'plg.pa = ' : 'Position Angle'"
             hint="Position Angle (degrees) measured from North
                   to central vertical axis in North to East direction."
             persistent-hint
@@ -145,7 +180,7 @@
             v-model.number="v2_offset"
             type="number"
             :rules="[() => v2_offset!=='' || 'This field is required']"
-            label="V2 Offset"
+            :label="api_hints_enabled ? 'plg.v2_offset = ' : 'V2 Offset'"
             hint="Additional V2 offset in telescope coordinates to apply to instrument
                   center, as from a dither pattern."
             persistent-hint
@@ -157,7 +192,7 @@
             v-model.number="v3_offset"
             type="number"
             :rules="[() => v3_offset!=='' || 'This field is required']"
-            label="V3 Offset"
+            :label="api_hints_enabled ? 'plg.v3_offset = ' : 'V3 Offset'"
             hint="Additional V3 offset in telescope coordinates to apply to instrument
                   center, as from a dither pattern."
             persistent-hint
@@ -175,7 +210,16 @@
       this.throttledSetColor = _.throttle(
         (v) => { this.color = v },
         100);
-    }
+    },
+    methods: {
+      boolToString(b) {
+        if (b) {
+          return 'True'
+        } else {
+          return 'False'
+        }
+      },
+    } 
   }
 </script>
 
diff --git a/jdaviz/configs/imviz/plugins/orientation/orientation.vue b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
index dc3aa251e0..42432626c7 100644
--- a/jdaviz/configs/imviz/plugins/orientation/orientation.vue
+++ b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Orientation"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Rotate the viewer orientation or choose to align images by pixels.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#imviz-orientation'"
     :popout_button="popout_button"
@@ -10,11 +13,21 @@
       <div style="grid-area: 1/1; margin-top: -36px">
         <j-plugin-section-header>Align Layers</j-plugin-section-header>
 
-        <v-alert v-if="!wcs_linking_available" type='warning' style="margin-left: -12px; margin-right: -12px">
+        <v-alert
+          v-if="!wcs_linking_available"
+          type='warning'
+          class="ignore-api-hints"
+          style="margin-left: -12px; margin-right: -12px"
+        >
           Please add at least one data with valid WCS to align by sky (WCS).
         </v-alert>
 
-        <v-alert v-if="wcs_linking_available" type='warning' style="margin-left: -12px; margin-right: -12px">
+        <v-alert
+          v-if="wcs_linking_available"
+          type='warning'
+          class="ignore-api-hints"
+          style="margin-left: -12px; margin-right: -12px"
+        >
           Switching link type will reset zoom.
         </v-alert>
 
@@ -32,13 +45,19 @@
         <v-alert v-if="need_clear_subsets" type='warning' style="margin-left: -12px; margin-right: -12px">
           Existing subsets will be deleted on changing alignment/linking options.
           <v-row justify="end" style="margin-right: 2px; margin-top: 16px">
-            <v-btn @click="delete_subsets">Clear Subsets</v-btn>
+            <v-btn @click="delete_subsets">
+              {{ api_hints_enabled ?
+                'plg.delete_subsets()'
+                :
+                'Clear Subsets'
+              }}
+            </v-btn>
           </v-row>
         </v-alert>
 
         <v-row class="row-min-bottom-padding">
           <v-radio-group
-            label="Align by"
+            :label="api_hints_enabled ? 'plg.link_type =' : 'Align by'"
             hint="Align individual image layers by pixels or on the sky by WCS."
             v-model="align_by_selected"
             @change="delete_subsets($event)"
@@ -55,22 +74,24 @@
         </v-row>
 
         <v-row>
-          <v-switch
+          <plugin-switch
+            v-if="align_by_selected == 'WCS'"
+            :value.sync="wcs_fast_approximation"
             label="Fast approximation"
+            api_hint="plg.wcs_fast_approximation = "
+            :api_hints_enabled="api_hints_enabled"
             hint="Use fast approximation for WCS image alignment, if possible (accurate to <1 pixel)."
-            v-model="wcs_fast_approximation"
-            v-if="align_by_selected == 'WCS'"
-            persistent-hint>
-          </v-switch>
+          />
         </v-row>
 
         <v-row v-if="false">
-          <v-switch
+          <plugin-switch
+            :value.sync="wcs_use_fallback"
             label="Fallback on Pixels"
+            api_hint="plg.wcs_use_fallback ="
+            :api_hints_enabled="api_hints_enabled"
             hint="If WCS linking fails, fallback to linking by pixels."
-            v-model="wcs_use_fallback"
-            persistent-hint>
-          </v-switch>
+          />
         </v-row>
 
         <div v-if="align_by_selected == 'WCS'">
@@ -80,7 +101,9 @@
             :items="viewer_items"
             :selected.sync="viewer_selected"
             :multiselect="false"
-            :label="'Viewer'"
+            label="Viewer"
+            api_hint="plg.viewer ="
+            :api_hints_enabled="api_hints_enabled"
             :show_if_single_entry="multiselect"
             :hint="'Select the viewer to set orientation'"
           />
@@ -90,8 +113,10 @@
             :multiselect="false"
             :icons="icons"
             :show_if_single_entry="true"
-            :label="'Orientation in viewer'"
-            :hint="'Select the viewer orientation'"
+            label="Orientation in viewer"
+            api_hint="plg.orientation_layer ="
+            :api_hints_enabled="api_hints_enabled"
+            hint="Select the viewer orientation"
           />
           <v-row>
             <span style="line-height: 36px">Presets:</span>
@@ -124,31 +149,44 @@
                     <v-text-field
                       v-model.number="rotation_angle"
                       type="number"
-                      label="Rotation angle"
+                      :label="api_hints_enabled ? 'plg.rotation_angle =' : 'Rotation angle'"
                       hint="Degrees counterclockwise from default orientation"
                       :rules="[() => rotation_angle !== '' || 'This field is required']"
                       persistent-hint
                     ></v-text-field>
                   </v-row>
                   <v-row>
-                    <v-switch
+                    <plugin-switch
+                      :value.sync="east_left"
                       label="East-left convention"
+                      api_hint="plg.east_left = "
+                      :api_hints_enabled="api_hints_enabled"
                       hint="Place East 90 degrees counterclockwise from North"
-                      v-model="east_left"
-                      persistent-hint>
-                    </v-switch>
+                    />
                   </v-row>
 
                   <plugin-auto-label
                     :value.sync="new_layer_label"
                     :default="new_layer_label_default"
                     :auto.sync="new_layer_label_auto"
-                    label="Name for orientation option"
+                    :label="api_hints_enabled ? 'plg.new_layer =' : 'Name for orientation option'"
                     hint="Label for this new orientation option."
                   ></plugin-auto-label>
                   <v-row justify="end">
                     <j-tooltip tooltipcontent="Add orientation option and apply to viewer">
-                      <v-btn color="primary" color="accent" text :disabled="rotation_angle===''" @click="add_orientation">Add orientation</v-btn>
+                      <v-btn
+                        color="primary"
+                        color="accent"
+                        :disabled="rotation_angle===''"
+                        @click="add_orientation"
+                        text
+                      >
+                        {{ api_hints_enabled ?
+                          'plg.add_orientation()'
+                          :
+                          'Add Orientation'
+                        }}
+                      </v-btn>
                     </j-tooltip>
                   </v-row>
                 </v-expansion-panel-content>
diff --git a/jdaviz/configs/specviz/plugins/line_analysis/line_analysis.vue b/jdaviz/configs/specviz/plugins/line_analysis/line_analysis.vue
index d101699972..23e27a1c84 100644
--- a/jdaviz/configs/specviz/plugins/line_analysis/line_analysis.vue
+++ b/jdaviz/configs/specviz/plugins/line_analysis/line_analysis.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Line Analysis"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Return statistics for a single spectral line.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#line-analysis'"
     :uses_active_status="uses_active_status"
@@ -21,6 +24,8 @@
       :selected.sync="dataset_selected"
       :show_if_single_entry="config=='mosviz'"
       label="Data"
+      api_hint="plg.dataset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select the data set to be analysed."
     />
 
@@ -29,6 +34,8 @@
       :selected.sync="spectral_subset_selected"
       :show_if_single_entry="true"
       label="Spectral region"
+      api_hint="plg.spectral_subset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select spectral region that defines the line."
     />
 
@@ -53,6 +60,8 @@
       :show_if_single_entry="true"
       :rules="[() => continuum_subset_selected!==spectral_subset_selected || 'Must not match line selection.']"
       label="Continuum"
+      api_hint="plg.continuum ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select spectral region that defines the continuum."
     />
 
@@ -60,7 +69,7 @@
       <!-- DEV NOTE: if changing the validation rules below, also update the logic to clear the results
            in line_analysis.py  -->
       <v-text-field
-        label="Width"
+        :label="api_hints_enabled ? 'plg.continuum_width =' : 'Width'"
         type="number"
         v-model.number="continuum_width"
         step="0.1"
@@ -81,6 +90,12 @@
       </j-docs-link>
     </v-row>
 
+    <v-row v-if="api_hints_enabled">
+        <span class="api-hint">
+          plg.get_results()
+        </span>
+      </v-row>
+
     <div style="display: grid"> <!-- overlay container -->
       <div style="grid-area: 1/1">
         <v-row>
diff --git a/jdaviz/main_styles.vue b/jdaviz/main_styles.vue
index dbdb19a0c6..ce99ccbf79 100644
--- a/jdaviz/main_styles.vue
+++ b/jdaviz/main_styles.vue
@@ -263,27 +263,35 @@ a:active {
   font-weight: 500 !important;
 }
 
-span.api_hint {
+span.api-hint:not(.ignore-api-hint), span.api-hint-header {
   color: #c75109 !important;
   font-family: monospace;
-  font-size: 12px;
+  font-size: 12px;  
+}
+
+span.api-hint-header {
   font-weight: bold;
 }
 
-.api_hint :is(.v-select__slot, .v-text-field__slot, .v-input__slot) > label.v-label {
+.api-hint:not(.ignore-api-hint) :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label {
     color: #c75109 !important;
     font-family: monospace;
-    font-size: 12px;
+    font-size: 10px !important;
     overflow-wrap: break-word;
 }
 
-.api_hint .v-alert__content {
+.api-hint:not(.ignore-api-hint) :is(.v-select__slot, .v-text-field__slot) > .v-label {
+    font-size: 13px !important;
+}
+
+
+.api-hint:not(.ignore-api-hint) .v-alert__content, .api-hint:not(.ignore-api-hint) .v-subheader {
   color: #c75109 !important;
   font-family: monospace;
-  font-size: 12px;
+  font-size: 10px !important;
 }
 
-.api_hint .v-btn {
+.api-hint:not(.ignore-api-hint) .v-btn {
   color: #c75109 !important;
   font-family: monospace !important;
   font-size: 12px !important;

From f5cb9276144526640321f97533b2a666e307b676 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 6 Aug 2024 09:42:58 -0400
Subject: [PATCH 10/24] codestyle and fix rebase

---
 jdaviz/core/template_mixin.py | 1 +
 jdaviz/core/user_api.py       | 5 ++---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index d8b582021f..3857a91291 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -3391,6 +3391,7 @@ def __init__(self, plugin, items, selected,
         self.app.state.add_callback('layer_icons', lambda _: self._on_data_changed())
         # initialize items from original viewers
         self._on_data_changed()
+
     def to_script(self, as_string=False):
         script = [f"{self.app.config}.load_data({self.selected_obj}, data_label='{self.selected})'"]
         script += [f"plg.selected = '{self.selected}'"]
diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index 0c51ae2515..a2b1982700 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -93,8 +93,6 @@ def _items(self):
 
     def to_dict(self):
         def _value(item):
-            if include_hidden and hasattr(item, '_hidden_to_dict'):
-                return _value(item._hidden_to_dict())
             if hasattr(item, 'to_dict'):
                 return _value(item.to_dict())
             if hasattr(item, 'selected'):
@@ -130,7 +128,8 @@ class PluginUserApi(UserApiWrapper):
       help(plugin_object.show)
     """
     def __init__(self, plugin, expose=[], readonly=[], excl_from_dict=[]):
-        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray', 'show', 'api_hints_enabled']))
+        expose = list(set(list(expose) + ['open_in_tray', 'close_in_tray',
+                                          'show', 'api_hints_enabled']))
         if plugin.uses_active_status:
             expose += ['keep_active', 'as_active']
         self._deprecation_msg = None

From d54bec070d12b8ee6542638875ad91239534a5e9 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 6 Aug 2024 12:42:51 -0400
Subject: [PATCH 11/24] .ignore-api-hint > explicitly set .api-hint

---
 jdaviz/components/plugin_action_button.vue    |  3 +-
 jdaviz/components/plugin_add_results.vue      | 12 ++++--
 jdaviz/components/plugin_auto_label.vue       |  5 ++-
 jdaviz/components/plugin_dataset_select.vue   |  1 +
 .../components/plugin_layer_select_tabs.vue   |  1 -
 .../plugin_previews_temp_disabled.vue         |  1 -
 jdaviz/components/plugin_switch.vue           |  1 +
 jdaviz/components/plugin_viewer_select.vue    |  3 +-
 jdaviz/components/tray_plugin.vue             |  5 ++-
 .../gaussian_smooth/gaussian_smooth.vue       |  2 +
 .../plugins/plot_options/plot_options.vue     | 40 +++++++++++++++----
 jdaviz/main_styles.vue                        | 10 ++---
 12 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/jdaviz/components/plugin_action_button.vue b/jdaviz/components/plugin_action_button.vue
index 1c09304228..62b8b415a2 100644
--- a/jdaviz/components/plugin_action_button.vue
+++ b/jdaviz/components/plugin_action_button.vue
@@ -2,6 +2,7 @@
   <v-btn :disabled="spinner || disabled"
     text
     :color=buttonColor
+    :class="api_hints_enabled ? 'api-hint' : null"
     @click="$emit('click')"
   >
     <v-progress-circular
@@ -19,7 +20,7 @@
 
 <script>
 module.exports = {
-  props: ['spinner', 'disabled', 'results_isolated_to_plugin', 'class'],
+  props: ['spinner', 'disabled', 'results_isolated_to_plugin', 'api_hints_enabled'],
   computed: {
     buttonColor() {
       if (this.results_isolated_to_plugin) {
diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue
index c80b9e0c00..58fbde4ccc 100644
--- a/jdaviz/components/plugin_add_results.vue
+++ b/jdaviz/components/plugin_add_results.vue
@@ -8,7 +8,9 @@
       :auto="label_auto"
       @update:auto="$emit('update:label_auto', $event)"
       :invalid_msg="label_invalid_msg"
-      :label="api_hints_enabled && add_results_api_hint ? add_results_api_hint + '.label =' : label_label ? label_label : 'Output Data Label'"
+      :label="label_label ? label_label : 'Output Data Label'"
+      :api_hint="add_results_api_hint && add_results_api_hint + '.label ='"
+      :api_hints_enabled="api_hints_enabled && add_results_api_hint"
       :hint="label_hint ? label_hint : 'Label for the resulting data item.'"
     ></plugin-auto-label>   
 
@@ -26,15 +28,17 @@
         :selected="add_to_viewer_selected"
         @update:selected="$emit('update:add_to_viewer_selected', $event)"
         show_if_single_entry="true"
-        :label="api_hints_enabled && add_results_api_hint ? add_results_api_hint+'.viewer =' : 'Plot in Viewer'"
+        label="Plot in Viewer"
+        :api_hint="add_results_api_hint && add_results_api_hint+'.viewer ='"
+        :api_hints_enabled="api_hints_enabled && add_results_api_hint"
         :hint="add_to_viewer_hint ? add_to_viewer_hint : 'Plot results in the specified viewer.  Data entry will be available in the data dropdown for all applicable viewers.'"
       ></plugin-viewer-select>
     </div>
 
     <v-row v-else>
       <v-switch v-if="label_overwrite"
-        class="hide-input"
         :label="addToViewerText"
+        :class="api_hints_enabled && add_results_api_hint ? 'api-hint hide-input' : 'hide-input'"
         :disabled="true"
         :hint="'Visibility of the modified entry will be adopted from the current \''+label+'\' data entry.'"
         persistent-hint
@@ -44,6 +48,7 @@
         v-model="add_to_viewer_selected == this.add_to_viewer_items[1].label"
         @change="(e) => {$emit('update:add_to_viewer_selected', this.$props.add_to_viewer_items[Number(e)].label)}"
         :label="addToViewerText"
+        :class="api_hints_enabled && add_results_api_hint ? 'api-hint' : null"
         hint='Immediately plot results.  Data entry will be available to toggle in the data dropdown'
         persistent-hint
       >
@@ -72,6 +77,7 @@
           :spinner="action_spinner"
           :disabled="label_invalid_msg.length > 0 || action_disabled"
           :results_isolated_to_plugin="false"
+          :api_hints_enabled="api_hints_enabled && action_api_hint"
           @click="$emit('click:action')">
           {{ actionButtonText }}
         </plugin-action-button>
diff --git a/jdaviz/components/plugin_auto_label.vue b/jdaviz/components/plugin_auto_label.vue
index 2423a4a11b..b0a099734c 100644
--- a/jdaviz/components/plugin_auto_label.vue
+++ b/jdaviz/components/plugin_auto_label.vue
@@ -7,7 +7,8 @@
         @keyup="if(auto) {if ($event.srcElement._value === displayValue) {return}; $emit('update:auto', false)}; $emit('update:value', $event.srcElement._value)"
         @mouseenter="showIcon = true"
         @mouseleave="showIcon = false"
-        :label="label"
+        :label="api_hints_enabled && api_hint ? api_hint : label"
+        :class="api_hints_enabled && api_hint ? 'api-hint' : null"
         :hint="hint"
         :rules="[(e) => invalid_msg || true]"
         persistent-hint
@@ -25,7 +26,7 @@
 </template>
 <script>
 module.exports = {
-  props: ['value', 'default', 'auto', 'label', 'hint', 'invalid_msg'],
+  props: ['value', 'default', 'auto', 'label', 'hint', 'invalid_msg', 'api_hint', 'api_hints_enabled'],
   data: function() {
       return {
           displayValue: this.auto ? this.default : this.value,
diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index 525d962ac7..df5f5ad0eb 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -6,6 +6,7 @@
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
+      :class="api_hints_enabled && api_hint ? 'api-hint' : null"
       :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Data')"
       :hint="hint ? hint : 'Select data.'"
       :rules="rules ? rules : []"
diff --git a/jdaviz/components/plugin_layer_select_tabs.vue b/jdaviz/components/plugin_layer_select_tabs.vue
index e873bb3b41..8647a04d92 100644
--- a/jdaviz/components/plugin_layer_select_tabs.vue
+++ b/jdaviz/components/plugin_layer_select_tabs.vue
@@ -18,7 +18,6 @@
             :rounded="item.is_subset"
             @click="() => {if (!multiselect){$emit('update:selected', item.label)} else if(!selectedAsList.includes(item.label)) {$emit('update:selected', selected.concat(item.label))} else if (selected.length > 1) {$emit('update:selected', selected.filter(select => select != item.label))} }"
             :style="'padding: 0px; margin-bottom: 4px; background: '+visibilityStyle(item)+', '+colorStyle(item)"
-            class="ignore-api-hint"
             width="30px"
             min-width="30px"
             height="30px"
diff --git a/jdaviz/components/plugin_previews_temp_disabled.vue b/jdaviz/components/plugin_previews_temp_disabled.vue
index f7a090b353..306fd61424 100644
--- a/jdaviz/components/plugin_previews_temp_disabled.vue
+++ b/jdaviz/components/plugin_previews_temp_disabled.vue
@@ -2,7 +2,6 @@
   <v-alert
     v-if="previews_temp_disabled && show_live_preview"
     type='warning'
-    class="ignore-api-hint"
     style="margin-left: -12px; margin-right: -12px">
     Live-updating is temporarily disabled (last update took {{previews_last_time}}s)
     <v-row justify='center'>
diff --git a/jdaviz/components/plugin_switch.vue b/jdaviz/components/plugin_switch.vue
index 8fecdb9ad7..19b6b5d669 100644
--- a/jdaviz/components/plugin_switch.vue
+++ b/jdaviz/components/plugin_switch.vue
@@ -1,6 +1,7 @@
 <template>
   <v-switch
     :label="api_hints_enabled && api_hint ? api_hint+' '+boolToString(value) : label"
+    :class="api_hints_enabled && api_hint ? 'api-hint' : null"
     :hint="hint"
     v-model="value"
     @change="$emit('update:value', $event)"
diff --git a/jdaviz/components/plugin_viewer_select.vue b/jdaviz/components/plugin_viewer_select.vue
index 513ad17905..a20dd85131 100644
--- a/jdaviz/components/plugin_viewer_select.vue
+++ b/jdaviz/components/plugin_viewer_select.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-row v-if="show_multiselect_toggle && api_hints_enabled && api_hint_multiselect"> 
-      <span class="api-hint">
+      <span :class="api_hints_enabled && api_hint_multiselect ? 'api-hint' : null">
         {{  api_hint_multiselect }} {{  multiselect ? 'True' : 'False' }}
       </span>
     </v-row>
@@ -23,6 +23,7 @@
       :items="items"
       v-model="selected"
       @change="$emit('update:selected', $event)"
+      :class="api_hints_enabled && api_hint ? 'api-hint' : null"
       :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Viewer')"
       :hint="hint ? hint : 'Select viewer.'"
       :rules="rules ? rules : []"
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index a458502ed0..3259c2fbd9 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container 
-    :class="api_hints_enabled ? 'tray-plugin api-hint' : 'tray-plugin'"
+    class="tray_plugin"
     style="padding-left: 24px; padding-right: 24px; padding-top: 12px" >
     <v-row>
       <div style="width: calc(100% - 64px)">
@@ -10,12 +10,13 @@
         <v-btn
           v-if="api_hints_enabled !== undefined && config && plugin_key" 
           icon 
+          :class="api_hints_enabled ? 'api-hint' : null"
           @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}"
         >
           <v-icon>mdi-code-tags</v-icon>
         </v-btn>
       </div>
-      <div style="width: 32px" class="ignore-api-hint">
+      <div style="width: 32px">
         <j-plugin-popout :popout_button="popout_button"></j-plugin-popout>
       </div>
     </v-row>
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index 184b191945..4e2f945f1f 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -14,6 +14,7 @@
           attach
           :items="mode_items.map(i => i.label)"
           v-model="mode_selected"
+          :class="api_hints_enabled ? 'api-hint' : null"
           :label="api_hints_enabled ? 'plg.mode =' : 'Mode'"
           hint="Smooth data spectrally or spatially."
           persistent-hint
@@ -37,6 +38,7 @@
         <v-text-field
           ref="stddev"
           :label="api_hints_enabled ? 'plg.stddev =' : 'Standard deviation'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           v-model.number="stddev"
           type="number"
           hint="The stddev of the kernel, in pixels."
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index aea0b5154c..35e6fa197e 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -58,6 +58,7 @@
               <glue-float-field
                 ref="x_min"
                 :label="api_hints_enabled ? 'plg.x_min =' : 'X Min'"
+                :class="api_hints_enabled ? 'api-hint' : null"
                 :value.sync="x_min_value"
                 type="number"
                 :step="x_bound_step"
@@ -68,6 +69,7 @@
               <glue-float-field
                 ref="x_max"
                 :label="api_hints_enabled ? 'plg.x_max =' : 'X Max'"
+                :class="api_hints_enabled ? 'api-hint' : null"
                 :value.sync="x_max_value"
                 type="number"
                 :step="x_bound_step"
@@ -78,6 +80,7 @@
               <glue-float-field
                 ref="y_min"
                 :label="api_hints_enabled ? 'plg.y_min =' : 'Y Min'"
+                :class="api_hints_enabled ? 'api-hint' : null"
                 :value.sync="y_min_value"
                 type="number"
                 :step="y_bound_step"
@@ -88,6 +91,7 @@
               <glue-float-field
                 ref="y_max"
                 :label="api_hints_enabled ? 'plg.y_max =' : 'Y Max'"
+                :class="api_hints_enabled ? 'api-hint' : null"
                 :value.sync="y_max_value"
                 type="number"
                 :step="y_bound_step"
@@ -98,6 +102,7 @@
               <glue-float-field
                 ref="zoom_center_x"
                 :label="api_hints_enabled ? 'plg.zoom_center_x =' : 'X Center'"
+                :class="api_hints_enabled ? 'api-hint' : null"
                 :value.sync="zoom_center_x_value"
                 type="number"
                 :step="zoom_step"
@@ -108,6 +113,7 @@
               <glue-float-field
                 ref="zoom_center_y"
                 :label="api_hints_enabled ? 'plg.zoom_center_y =' : 'Y Center'"
+                :class="api_hints_enabled ? 'api-hint' : null"
                 :value.sync="zoom_center_y_value"
                 type="number"
                 :step="zoom_step"
@@ -118,6 +124,7 @@
               <glue-float-field
                 ref="zoom_radius"
                 :label="api_hints_enabled ? 'plg.zoom_radius =' : 'Zoom-radius'"
+                :class="api_hints_enabled ? 'api-hint' : null"
                 :value.sync="zoom_radius_value"
                 type="number"
                 :step="zoom_step"
@@ -127,6 +134,7 @@
             <v-row justify="end">
               <plugin-action-button
                 :results_isolated_to_plugin="false"
+                :api_hints_enabled="api_hints_enabled"
                 @click="reset_viewer_bounds"
               >
                 {{api_hints_enabled ? 
@@ -149,6 +157,7 @@
           :items="image_color_mode_sync.choices"
           v-model="image_color_mode_value"
           :label="api_hints_enabled ? 'plg.image_color_mode = ' : 'Color Mode'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           hint="Whether each layer gets a single color or colormap."
           persistent-hint
           dense
@@ -358,6 +367,7 @@
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_width_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_width')">
         <glue-float-field
           :label="api_hints_enabled ? 'plg.line_width =' : 'Line Width'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           :value.sync="line_width_value"
         />
       </glue-state-sync-wrapper>
@@ -416,7 +426,7 @@
             :items="marker_size_mode_sync.choices"
             v-model="marker_size_mode_value"
             :label="api_hints_enabled ? 'plg.marker_size_mode =' : 'Size Mode'"
-            class="no-hint"
+            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
           ></v-select>
         </glue-state-sync-wrapper>
 
@@ -453,7 +463,7 @@
             :items="marker_size_col_sync.choices"
             v-model="marker_size_col_value"
             :label="api_hints_enabled ? 'plg.marker_size_col =' : 'Column'"
-            class="no-hint"
+            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
           ></v-select>
         </glue-state-sync-wrapper>
 
@@ -461,6 +471,7 @@
           <v-text-field
             ref="marker_size_vmin"
             :label="api_hints_enabled ? 'plg.marker_size_vmin =' : 'vmin'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             v-model.number="marker_size_vmin_value"
             type="number"
             step="0.01"
@@ -471,6 +482,7 @@
           <v-text-field
             ref="marker_size_vmax"
             :label="api_hints_enabled ? 'plg.marker_size_vmax =' : 'vmax'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             v-model.number="marker_size_vmax_value"
             type="number"
             step="0.01"
@@ -485,7 +497,7 @@
             :items="marker_color_mode_sync.choices"
             v-model="marker_color_mode_value"
             :label="api_hints_enabled ? 'plg.marker_color_mode =' : 'Color Mode'"
-            class="no-hint"
+            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
           ></v-select>
         </glue-state-sync-wrapper>
 
@@ -520,7 +532,7 @@
             :items="marker_color_col_sync.choices"
             v-model="marker_color_col_value"
             :label="api_hints_enabled ? 'plg.marker_color_col =' : 'Column'"
-            class="no-hint"
+            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
           ></v-select>
         </glue-state-sync-wrapper>
 
@@ -531,7 +543,7 @@
             :items="marker_colormap_sync.choices"
             v-model="marker_colormap_value"
             :label="api_hints_enabled ? 'plg.marker_colormap =' : 'Colormap'"
-            class="no-hint"
+            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
           ></v-select>
         </glue-state-sync-wrapper>
 
@@ -539,6 +551,7 @@
           <v-text-field
             ref="marker_colormap_vmin"
             :label="api_hints_enabled ? 'plg.marker_colormap_vmin =' : 'vmin'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             v-model.number="marker_colormap_vmin_value"
             type="number"
             step="0.01"
@@ -549,6 +562,7 @@
           <v-text-field
             ref="marker_colormap_vmax"
             :label="api_hints_enabled ? 'plg.marker_colormap_vmax =' : 'vmax'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             v-model.number="marker_colormap_vmax_value"
             type="number"
             step="0.01"
@@ -580,6 +594,7 @@
             :items="image_colormap_sync.choices"
             v-model="image_colormap_value"
             :label="api_hints_enabled ? 'plg.image_colormap =' : 'Colormap'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             dense
           >
             <template v-slot:selection="{ item, index }">
@@ -686,7 +701,7 @@
           :items="stretch_function_sync.choices"
           v-model="stretch_function_value"
           :label="api_hints_enabled ? 'plg.stretch_function =' : 'Stretch Function'"
-          class="no-hint"
+          :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
         ></v-select>
       </glue-state-sync-wrapper>
 
@@ -697,7 +712,7 @@
           :items="stretch_preset_sync.choices"
           v-model="stretch_preset_value"
           :label="api_hints_enabled ? 'plg.stretch_preset =' : 'Stretch Percentile Preset'"
-          class="no-hint"
+          :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
         ></v-select>
       </glue-state-sync-wrapper>
 
@@ -706,6 +721,7 @@
         <v-text-field
           ref="stretch_vmin"
           :label="api_hints_enabled ? 'plg.stretch_vmin =' : 'Stretch VMin'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           v-model.number="stretch_vmin_value"
           type="number"
           :step="stretch_vstep"
@@ -716,6 +732,7 @@
         <v-text-field
           ref="stretch_vmax"
           :label="api_hints_enabled ? 'plg.stretch_vmax =' : 'Stretch VMax'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           v-model.number="stretch_vmax_value"
           type="number"
           :step="stretch_vstep"
@@ -762,6 +779,7 @@
                   <v-text-field
                       ref="stretch_hist_nbins"
                       :label="api_hints_enabled ? 'plg.stretch_hist_nbins =' : 'Number of Bins'"
+                      :class="api_hints_enabled ? 'api-hint' : null"
                       v-model.number="stretch_hist_nbins"
                       type="number"
                       hint="The amount of bins used in the histogram."
@@ -793,6 +811,7 @@
                   <v-text-field
                     ref="stretch_vmin"
                     :label="api_hints_enabled ? 'plg.stretch_vmin =' : 'Stretch VMin'"
+                    :class="api_hints_enabled ? 'api-hint' : null"
                     v-model.number="stretch_vmin_value"
                     type="number"
                     :step="stretch_vstep"
@@ -802,6 +821,7 @@
                   <v-text-field
                     ref="stretch_vmax"
                     :label="api_hints_enabled ? 'plg.stretch_vmax =' : 'Stretch VMax'"
+                    :class="api_hints_enabled ? 'api-hint' : null"
                     v-model.number="stretch_vmax_value"
                     type="number"
                     :step="stretch_vstep"
@@ -857,7 +877,8 @@
             <div v-if="contour_mode_value === 'Linear'">
               <glue-state-sync-wrapper :sync="contour_min_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_min')">
                 <glue-float-field 
-                  :label="api_hints_enabled ? 'plg.contour_min =' : 'Contour Min'" 
+                  :label="api_hints_enabled ? 'plg.contour_min =' : 'Contour Min'"
+                  :class="api_hints_enabled ? 'api-hint' : null"
                   :value.sync="contour_min_value"
                 />
               </glue-state-sync-wrapper>
@@ -865,6 +886,7 @@
               <glue-state-sync-wrapper :sync="contour_max_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_max')">
                 <glue-float-field
                   :label="api_hints_enabled ? 'plg.contour_max = ' : 'Contour Max'"
+                  :class="api_hints_enabled ? 'api-hint' : null"
                   :value.sync="contour_max_value"
                 />
               </glue-state-sync-wrapper>
@@ -872,6 +894,7 @@
               <glue-state-sync-wrapper :sync="contour_nlevels_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_nlevels')">
                 <glue-float-field
                   :label="api_hints_enabled ? 'plg.contour_nlevels =' : 'Number of Contour Levels'"
+                  :class="api_hints_enabled ? 'api-hint' : null"
                   :value.sync="contour_nlevels_value"
                 />
               </glue-state-sync-wrapper>
@@ -880,6 +903,7 @@
               <glue-state-sync-wrapper :sync="contour_custom_levels_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_levels')">
                 <v-text-field
                   :label="api_hints_enabled ? 'plg.contour_custom_levels =' : 'Contour Levels'"
+                  :class="api_hints_enabled ? 'api-hint' : null"
                   :value="contour_custom_levels_txt"
                   @focus="contour_custom_levels_focus"
                   @blur="contour_custom_levels_blur"
diff --git a/jdaviz/main_styles.vue b/jdaviz/main_styles.vue
index ce99ccbf79..9f6da175c0 100644
--- a/jdaviz/main_styles.vue
+++ b/jdaviz/main_styles.vue
@@ -263,7 +263,7 @@ a:active {
   font-weight: 500 !important;
 }
 
-span.api-hint:not(.ignore-api-hint), span.api-hint-header {
+span.api-hint, span.api-hint-header {
   color: #c75109 !important;
   font-family: monospace;
   font-size: 12px;  
@@ -273,25 +273,25 @@ span.api-hint-header {
   font-weight: bold;
 }
 
-.api-hint:not(.ignore-api-hint) :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label {
+.api-hint :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label {
     color: #c75109 !important;
     font-family: monospace;
     font-size: 10px !important;
     overflow-wrap: break-word;
 }
 
-.api-hint:not(.ignore-api-hint) :is(.v-select__slot, .v-text-field__slot) > .v-label {
+.api-hint :is(.v-select__slot, .v-text-field__slot) > .v-label {
     font-size: 13px !important;
 }
 
 
-.api-hint:not(.ignore-api-hint) .v-alert__content, .api-hint:not(.ignore-api-hint) .v-subheader {
+.api-hint .v-alert__content, .api-hint .v-subheader {
   color: #c75109 !important;
   font-family: monospace;
   font-size: 10px !important;
 }
 
-.api-hint:not(.ignore-api-hint) .v-btn {
+.api-hint.v-btn {
   color: #c75109 !important;
   font-family: monospace !important;
   font-size: 12px !important;

From b3d5066968bdae21e28e160d36666bd64e6ae4b2 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 6 Aug 2024 13:53:59 -0400
Subject: [PATCH 12/24] use plugin-switch component for visibility switches in
 plot options

---
 jdaviz/components/plugin_switch.vue           | 12 ++-
 .../plugins/plot_options/plot_options.vue     | 96 +++++++------------
 2 files changed, 47 insertions(+), 61 deletions(-)

diff --git a/jdaviz/components/plugin_switch.vue b/jdaviz/components/plugin_switch.vue
index 19b6b5d669..3efdcaf537 100644
--- a/jdaviz/components/plugin_switch.vue
+++ b/jdaviz/components/plugin_switch.vue
@@ -1,4 +1,14 @@
 <template>
+  <span v-if="use_eye_icon">
+    <v-btn icon @click.stop="$emit('update:value', !value)">
+      <v-icon>mdi-eye{{ value ? '' : '-off' }}</v-icon>
+    </v-btn>
+    {{ api_hints_enabled && api_hint ?
+      api_hint + boolToString(value)
+      :
+      label
+    }}
+  </span>
   <v-switch
     :label="api_hints_enabled && api_hint ? api_hint+' '+boolToString(value) : label"
     :class="api_hints_enabled && api_hint ? 'api-hint' : null"
@@ -11,7 +21,7 @@
 
 <script>
   module.exports = {
-    props: ['value', 'label', 'hint', 'api_hint', 'api_hints_enabled'],
+    props: ['value', 'label', 'hint', 'api_hint', 'api_hints_enabled', 'use_eye_icon'],
     methods: {
       boolToString(b) {
         if (b) {
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 35e6fa197e..7257aa97d2 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -249,42 +249,30 @@
     <div v-else class='layer-tab-selected' style="margin-left: -24px; padding-left: 24px; margin-top: -42px; margin-right: -24px; padding-right: 24px; border-bottom: 2px solid #00617E">
       <j-plugin-section-header v-if="layer_selected.length && (line_visible_sync.in_subscribed_states || subset_visible_sync.in_subscribed_states)">Layer Visibility</j-plugin-section-header>
       <glue-state-sync-wrapper :sync="marker_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_visible')">
-        <span>
-          <v-btn icon @click.stop="marker_visible_value = !marker_visible_value">
-            <v-icon>mdi-eye{{ marker_visible_value ? '' : '-off' }}</v-icon>
-          </v-btn>
-          {{ api_hints_enabled ?
-            'plg.marker_visible = ' + boolToString(marker_visible_value)
-            :
-            'Show Scatter Layer'
-          }}
-        </span>
+        <plugin-switch
+          value.sync="marker_visible_value"
+          label="Show Scatter Layer"
+          api_hint='plg.marker_visible = '
+          :use_eye_icon="true"
+        />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="!marker_visible_sync.in_subscribed_states" :sync="line_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_visible')">
-        <span>
-          <v-btn icon @click.stop="line_visible_value = !line_visible_value">
-            <v-icon>mdi-eye{{ line_visible_value ? '' : '-off' }}</v-icon>
-          </v-btn>
-          {{ api_hints_enabled ?
-            'plg.line_visible = ' + boolToString(line_visible_value)
-            :
-            'Show Line'
-          }}
-        </span>
+        <plugin-switch
+          value.sync="line_visible_value"
+          label="Show Line"
+          api_hint='plg.line_visible = '
+          :use_eye_icon="true"
+        />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper :sync="subset_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_visible')">
-        <span>
-          <v-btn icon @click.stop="subset_visible_value = !subset_visible_value">
-            <v-icon>mdi-eye{{ subset_visible_value ? '' : '-off' }}</v-icon>
-          </v-btn>
-          {{ api_hints_enabled ?
-            'plg.subset_visible = ' + boolToString(subset_visible_value)
-            :
-            'Show Subset'
-          }}
-        </span>
+        <plugin-switch
+          value.sync="subset_visible_value"
+          label="Show Subset"
+          api_hint='plg.subset_visible = '
+          :use_eye_icon="true"
+        />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="subset_visible_value" :sync="subset_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_color')">
@@ -328,16 +316,12 @@
       <!-- PROFILE/LINE -->
       <j-plugin-section-header v-if="(line_visible_sync.in_subscribed_states && ((!marker_visible_sync.in_subscribed_states && line_visible_value) || (marker_visible_sync.in_subscribed_states && marker_visible_value)))">Line</j-plugin-section-header>
       <glue-state-sync-wrapper v-if="marker_visible_sync.in_subscribed_states && marker_visible_value" :sync="line_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_visible')">
-        <span>
-          <v-btn icon @click.stop="line_visible_value = !line_visible_value">
-            <v-icon>mdi-eye{{ line_visible_value ? '' : '-off' }}</v-icon>
-          </v-btn>
-          {{ api_hints_enabled ?
-            'plg.line_visible = ' + boolToString(line_visible_value)
-            :
-            'Show Line'
-           }}
-        </span>
+        <plugin-switch
+          value.sync="line_visible_value"
+          label="Show Line"
+          api_hint='plg.line_visible = '
+          :use_eye_icon="true"
+        />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_color')">
@@ -574,16 +558,12 @@
       <!-- IMAGE:IMAGE -->
       <j-plugin-section-header v-if="image_visible_sync.in_subscribed_states">Image</j-plugin-section-header>
       <glue-state-sync-wrapper :sync="image_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_visible')">
-        <span>
-          <v-btn icon @click.stop="image_visible_value = !image_visible_value">
-            <v-icon>mdi-eye{{ image_visible_value ? '' : '-off' }}</v-icon>
-          </v-btn>
-          {{ api_hints_enabled ?
-            'plg.image_visible = ' + boolToString(image_visible_value)
-            :
-            'Show Image'
-          }}
-        </span>
+        <plugin-switch
+          value.sync="image_visible_value"
+          label="Show Image"
+          api_hint='plg.image_visible = '
+          :use_eye_icon="true"
+        />
       </glue-state-sync-wrapper>
 
       <div v-if="image_visible_sync.in_subscribed_states && (image_visible_value || image_visible_sync['mixed'])">
@@ -839,16 +819,12 @@
       <div style="display: grid"> <!-- overlay container -->
         <div style="grid-area: 1/1">
           <glue-state-sync-wrapper :sync="contour_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_visible')">
-            <span>
-              <v-btn icon @click.stop="contour_visible_value = !contour_visible_value">
-                <v-icon>mdi-eye{{ contour_visible_value ? '' : '-off' }}</v-icon>
-              </v-btn>
-              {{ api_hints_enabled ?
-                'plg.contour_visible = ' + boolToString(contour_visible_value)
-                :
-                'Show Contours'
-              }}
-            </span>
+            <plugin-switch
+              value.sync="contour_visible_value"
+              label="Show Contours"
+              api_hint='plg.contour_visible = '
+              :use_eye_icon="true"
+            />
           </glue-state-sync-wrapper>
 
           <div v-if="contour_visible_sync.in_subscribed_states && contour_visible_value">

From 369125156deb9706c04f813ef293dc2f8671ea35 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 6 Aug 2024 15:34:15 -0400
Subject: [PATCH 13/24] implement for moment maps and specviz2d spec extract

---
 jdaviz/components/plugin_editable_select.vue  |   1 +
 .../components/plugin_file_import_select.vue  |   1 +
 jdaviz/components/plugin_layer_select.vue     |   1 +
 jdaviz/components/plugin_subset_select.vue    |   1 +
 jdaviz/components/plugin_switch.vue           |  10 +-
 jdaviz/components/tray_plugin.vue             |  14 +--
 .../plugins/moment_maps/moment_maps.vue       |  26 ++++-
 .../plugins/plot_options/plot_options.vue     |   6 ++
 .../imviz/plugins/orientation/orientation.vue |   9 +-
 .../spectral_extraction.vue                   | 101 +++++++++++++-----
 10 files changed, 129 insertions(+), 41 deletions(-)

diff --git a/jdaviz/components/plugin_editable_select.vue b/jdaviz/components/plugin_editable_select.vue
index a8a527152a..63101800b3 100644
--- a/jdaviz/components/plugin_editable_select.vue
+++ b/jdaviz/components/plugin_editable_select.vue
@@ -9,6 +9,7 @@
       v-model="selected"
       @change="$emit('update:selected', $event)"
       :label="api_hints_enabled && api_hint ? api_hint : label"
+      :class="api_hints_enabled && api_hint ? 'api-hint' : null"
       :hint="hint"
       :rules="rules ? rules : []"
       item-text="label"
diff --git a/jdaviz/components/plugin_file_import_select.vue b/jdaviz/components/plugin_file_import_select.vue
index 8e762e48e6..9c8bc6d1fd 100644
--- a/jdaviz/components/plugin_file_import_select.vue
+++ b/jdaviz/components/plugin_file_import_select.vue
@@ -8,6 +8,7 @@
         v-model="selected"
         @change="$emit('update:selected', $event)"
         :label="api_hints_enabled && api_hint ? api_hint : label"
+        :class="api_hints_enabled && api_hint ? 'api-hint' : null"
         :hint="hint"
         persistent-hint
       ></v-select>
diff --git a/jdaviz/components/plugin_layer_select.vue b/jdaviz/components/plugin_layer_select.vue
index 0f6865f372..e201c82698 100644
--- a/jdaviz/components/plugin_layer_select.vue
+++ b/jdaviz/components/plugin_layer_select.vue
@@ -8,6 +8,7 @@
       v-model="selected"
       @change="$emit('update:selected', $event)"
       :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Layer')"
+      :class="api_hints_enabled ? 'api-hint' : null"
       :hint="hint ? hint : 'Select layer.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
diff --git a/jdaviz/components/plugin_subset_select.vue b/jdaviz/components/plugin_subset_select.vue
index 4c4198a7df..472a449aff 100644
--- a/jdaviz/components/plugin_subset_select.vue
+++ b/jdaviz/components/plugin_subset_select.vue
@@ -8,6 +8,7 @@
       v-model="selected"
       @change="$emit('update:selected', $event)"
       :label="api_hints_enabled && api_hint ? api_hint : (label ? label : 'Subset')"
+      :class="api_hints_enabled && api_hint ? 'api-hint' : null"
       :hint="hint ? hint : 'Select subset.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
diff --git a/jdaviz/components/plugin_switch.vue b/jdaviz/components/plugin_switch.vue
index 3efdcaf537..7fbc0f7375 100644
--- a/jdaviz/components/plugin_switch.vue
+++ b/jdaviz/components/plugin_switch.vue
@@ -3,13 +3,15 @@
     <v-btn icon @click.stop="$emit('update:value', !value)">
       <v-icon>mdi-eye{{ value ? '' : '-off' }}</v-icon>
     </v-btn>
-    {{ api_hints_enabled && api_hint ?
-      api_hint + boolToString(value)
-      :
+    <span v-if="api_hints_enabled && api_hint" class="api-hint">
+      {{ api_hint + boolToString(value) }}
+    </span>
+    <span v-else>
       label
-    }}
+    </span>
   </span>
   <v-switch
+    v-else
     :label="api_hints_enabled && api_hint ? api_hint+' '+boolToString(value) : label"
     :class="api_hints_enabled && api_hint ? 'api-hint' : null"
     :hint="hint"
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 3259c2fbd9..842140a24f 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -32,13 +32,15 @@
     </v-row>
     <div v-else>
       <v-row v-if="uses_active_status && keep_active !== undefined" style="padding-bottom: 24px">
-        <v-switch
-          v-model="keep_active"
-          @change="$emit('update:keep_active', $event)"
-          :label="api_hints_enabled ? 'plg.keep_active = '+boolToString(keep_active) : 'Keep active'"
+        <!-- TODO: update:keep_active is not working!!! -->
+        <plugin-switch
+          value.sync="keep_active"
+          @update:keep_active="$emit('update:keep_active', $event)"
+          label="Keep active"
+          api_hint="plg.keep_active = "
+          :api_hints_enabled="api_hints_enabled"
           hint="Consider plugin active (showing any previews and enabling all keypress events) even when not opened"
-          persistent-hint>
-        </v-switch>
+        />
       </v-row>
 
       <slot></slot>
diff --git a/jdaviz/configs/cubeviz/plugins/moment_maps/moment_maps.vue b/jdaviz/configs/cubeviz/plugins/moment_maps/moment_maps.vue
index f6fbfeec74..d5f4bfef63 100644
--- a/jdaviz/configs/cubeviz/plugins/moment_maps/moment_maps.vue
+++ b/jdaviz/configs/cubeviz/plugins/moment_maps/moment_maps.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Moment Maps"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Create a 2D image from a data cube.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#moment-maps'"
     :uses_active_status="uses_active_status"
@@ -18,6 +21,8 @@
       :selected.sync="dataset_selected"
       :show_if_single_entry="false"
       label="Data"
+      api_hint="plg.dataset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select the data set."
     />
 
@@ -28,6 +33,8 @@
       :show_if_single_entry="true"
       has_subregions_warning="The selected selected subset has subregions, the entire range will be used, ignoring any gaps."
       label="Spectral region"
+      api_hint="plg.spectral_subset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Spectral region to compute the moment map."
     />
 
@@ -50,6 +57,8 @@
       :show_if_single_entry="true"
       :rules="[() => continuum_subset_selected!==spectral_subset_selected || 'Must not match line selection.']"
       label="Continuum"
+      api_hint="plg.continuum_subset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select spectral region that defines the continuum."
     />
 
@@ -59,6 +68,8 @@
       :selected.sync="continuum_dataset_selected"
       :show_if_single_entry="false"
       label="Continuum Spectrum"
+      api_hint="plg.continuum_dataset ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Select the spectrum used to visualize the continuum inputs.  The continuum will be recomputed on the input cube when computing the moment map."
     />
 
@@ -66,7 +77,8 @@
       <!-- DEV NOTE: if changing the validation rules below, also update the logic to clear the results
            in line_analysis.py  -->
       <v-text-field
-        label="Width"
+        :label="api_hints_enabled ? 'plg.continuum_width =' : 'Width'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         type="number"
         v-model.number="continuum_width"
         step="0.1"
@@ -88,7 +100,8 @@
       <v-text-field
         ref="n_moment"
         type="number"
-        label="Moment"
+        :label="api_hints_enabled ? 'plg.n_moment =' : 'Moment'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         v-model.number="n_moment"
         hint="The desired moment."
         persistent-hint
@@ -100,7 +113,8 @@
     <div v-if="dataset_spectral_unit !== ''">
       <v-row>
         <v-radio-group
-          label="Output Units"
+          :label="api_hints_enabled ? 'plg.output_unit =' : 'Output Units'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           hint="Choose the output units for calculated moment."
           v-model="output_unit_selected"
           column
@@ -117,7 +131,8 @@
         <v-text-field
         ref="reference_wavelength"
         type="number"
-        label="Reference Wavelength"
+        :label="api_hints_enabled ? 'plg.reference_wavelength =' : 'Reference Wavelength'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         v-model.number="reference_wavelength"
         :suffix="dataset_spectral_unit.replace('Angstrom', 'A')"
         hint="Observed wavelength of the line of interest"
@@ -141,6 +156,9 @@
       action_tooltip="Calculate moment map"
       :action_spinner="spinner"
       :action_disabled="n_moment > 0 && output_unit_selected !== 'Spectral Unit' && reference_wavelength === 0"
+      add_results_api_hint = 'plg.add_results'
+      action_api_hint='plg.calculate_moment(add_data=True)'
+      :api_hints_enabled="api_hints_enabled"
       @click:action="calculate_moment"
     ></plugin-add-results>
 
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 7257aa97d2..b4f0dabcc4 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -253,6 +253,7 @@
           value.sync="marker_visible_value"
           label="Show Scatter Layer"
           api_hint='plg.marker_visible = '
+          :api_hints_enabled="api_hints_enabled"
           :use_eye_icon="true"
         />
       </glue-state-sync-wrapper>
@@ -262,6 +263,7 @@
           value.sync="line_visible_value"
           label="Show Line"
           api_hint='plg.line_visible = '
+          :api_hints_enabled="api_hints_enabled"
           :use_eye_icon="true"
         />
       </glue-state-sync-wrapper>
@@ -271,6 +273,7 @@
           value.sync="subset_visible_value"
           label="Show Subset"
           api_hint='plg.subset_visible = '
+          :api_hints_enabled="api_hints_enabled"
           :use_eye_icon="true"
         />
       </glue-state-sync-wrapper>
@@ -320,6 +323,7 @@
           value.sync="line_visible_value"
           label="Show Line"
           api_hint='plg.line_visible = '
+          :api_hints_enabled="api_hints_enabled"
           :use_eye_icon="true"
         />
       </glue-state-sync-wrapper>
@@ -562,6 +566,7 @@
           value.sync="image_visible_value"
           label="Show Image"
           api_hint='plg.image_visible = '
+          :api_hints_enabled="api_hints_enabled"
           :use_eye_icon="true"
         />
       </glue-state-sync-wrapper>
@@ -823,6 +828,7 @@
               value.sync="contour_visible_value"
               label="Show Contours"
               api_hint='plg.contour_visible = '
+              :api_hints_enabled="api_hints_enabled"
               :use_eye_icon="true"
             />
           </glue-state-sync-wrapper>
diff --git a/jdaviz/configs/imviz/plugins/orientation/orientation.vue b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
index 42432626c7..1c7dc5bcd9 100644
--- a/jdaviz/configs/imviz/plugins/orientation/orientation.vue
+++ b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
@@ -57,7 +57,8 @@
 
         <v-row class="row-min-bottom-padding">
           <v-radio-group
-            :label="api_hints_enabled ? 'plg.link_type =' : 'Align by'"
+            :label="api_hints_enabled ? 'plg.align_by =' : 'Align by'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Align individual image layers by pixels or on the sky by WCS."
             v-model="align_by_selected"
             @change="delete_subsets($event)"
@@ -150,6 +151,7 @@
                       v-model.number="rotation_angle"
                       type="number"
                       :label="api_hints_enabled ? 'plg.rotation_angle =' : 'Rotation angle'"
+                      :class="api_hints_enabled ? 'api-hint' : null"
                       hint="Degrees counterclockwise from default orientation"
                       :rules="[() => rotation_angle !== '' || 'This field is required']"
                       persistent-hint
@@ -169,7 +171,9 @@
                     :value.sync="new_layer_label"
                     :default="new_layer_label_default"
                     :auto.sync="new_layer_label_auto"
-                    :label="api_hints_enabled ? 'plg.new_layer =' : 'Name for orientation option'"
+                    label="Name for orientation option"
+                    api_hint="plg.new_layer = "
+                    :api_hints_enabled="api_hints_enabled"
                     hint="Label for this new orientation option."
                   ></plugin-auto-label>
                   <v-row justify="end">
@@ -178,6 +182,7 @@
                         color="primary"
                         color="accent"
                         :disabled="rotation_angle===''"
+                        :class="api_hints_enabled ? 'api-hint' : null"
                         @click="add_orientation"
                         text
                       >
diff --git a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
index f29653b4c8..b15e9b94e2 100644
--- a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
+++ b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Spectral Extraction"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || '2D to 1D spectral extraction.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#spectral-extraction'"
     :uses_active_status="uses_active_status"
@@ -16,12 +19,13 @@
           </v-expansion-panel-header>
           <v-expansion-panel-content class="plugin-expansion-panel-content">
             <v-row>
-              <v-switch
-                v-model="interactive_extract"
+              <plugin-switch
+                value.sync="interactive_extract"
                 label="Show live-extraction"
+                api_hint="plg.interactive_extract = "
+                :api_hints_enabled="api_hints_enabled"
                 hint="Whether to compute/show extraction when making changes to input parameters.  Disable if live-preview becomes laggy."
-                persistent-hint
-              ></v-switch>
+              />
             </v-row>
           </v-expansion-panel-content>
         </v-expansion-panel>
@@ -42,13 +46,16 @@
         :selected.sync="trace_trace_selected"
         :show_if_single_entry="false"
         label="Trace"
+        api_hint="plg.trace_trace ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Existing trace to offset or create a new trace"
       />
 
       <div v-if="trace_trace_selected !== 'New Trace'">
         <v-row>
           <v-text-field
-            label="Offset"
+            :label="api_hints_enabled ? 'plg.trace_offset =' : 'Offset'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             type="number"
             v-model.number="trace_offset"
             :rules="[() => trace_offset!=='' || 'This field is required']"
@@ -64,6 +71,8 @@
           :selected.sync="trace_dataset_selected"
           :show_if_single_entry="false"
           label="2D Spectrum"
+          api_hint="plg.trace_dataset ="
+          :api_hints_enabled="api_hints_enabled"
           hint="Select the data used to create the trace."
         />
 
@@ -73,7 +82,8 @@
             :menu-props="{ left: true }"
             :items="trace_type_items.map(i => i.label)"
             v-model="trace_type_selected"
-            label="Trace Type"
+            :label="api_hints_enabled ? 'plg.trace_type = ' : 'Trace Type'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Method to use for creating trace"
             persistent-hint
           ></v-select>
@@ -81,7 +91,8 @@
 
         <v-row v-if="trace_type_selected!=='Flat'">
           <v-text-field
-            label="Order"
+            :label="api_hints_enabled ? 'plg.trace_order =' : 'Order'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             type="number"
             v-model.number="trace_order"
             :rules="[() => trace_order!=='' || 'This field is required',
@@ -95,7 +106,8 @@
 
         <v-row>
           <v-text-field
-            label="Pixel"
+            :label="api_hints_enabled ? 'plg.trace_pixel = ' : 'Pixel'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             type="number"
             v-model.number="trace_pixel"
             :rules="[() => trace_pixel!=='' || 'This field is required']"
@@ -106,13 +118,16 @@
         </v-row>
 
         <v-row v-if="trace_type_selected!=='Flat'">
-          <v-switch
-            v-model="trace_do_binning"
+          <plugin-switch
+            :value.sync="trace_do_binning"
             label="Bin input spectrum"
-          ></v-switch>
+            api_hint="plg.trace_do_binning ="
+            :api_hints_enabled="api_hints_enabled"
+          />
           <v-text-field
             v-if="trace_do_binning"
-            label="Bins"
+            :label="api_hints_enabled ? 'plg.trace_bins =' : 'Bins'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             type="number"
             v-model.number="trace_bins"
             :rules="[() => trace_bins!=='' || 'This field is required',
@@ -138,7 +153,8 @@
 
         <v-row v-if="trace_type_selected!=='Flat'">
           <v-text-field
-            label="Window Width"
+            :label="api_hints_enabled ? 'plg.trace_window = ' : 'Window Width'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             type="number"
             v-model.number="trace_window"
             :rules="[() => trace_window!=='' || 'This field is required',
@@ -155,7 +171,8 @@
             :menu-props="{ left: true }"
             :items="trace_peak_method_items.map(i => i.label)"
             v-model="trace_peak_method_selected"
-            label="Peak Method"
+            :label="api_hints_enabled ? 'plg.trace_peak_method =' : 'Peak Method'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Method to use for identifying the peak cross-dispersion pixel in each bin"
             persistent-hint
           ></v-select>
@@ -181,6 +198,9 @@
                 action_label="Create"
                 action_tooltip="Create Trace"
                 :action_spinner="trace_spinner"
+                add_results_api_hint="trace_results"
+                action_api_hint="plt.create_trace()"
+                :api_hints_enabled="api_hints_enabled"
                 @click:action="create_trace"
               ></plugin-add-results>
             </v-expansion-panel-content>
@@ -206,6 +226,8 @@
         :selected.sync="bg_dataset_selected"
         :show_if_single_entry="false"
         label="2D Spectrum"
+        api_hint="plg.bg_dataset ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Select the data used to determine the background."
       />
 
@@ -215,7 +237,8 @@
           :menu-props="{ left: true }"
           :items="bg_type_items.map(i => i.label)"
           v-model="bg_type_selected"
-          label="Background Type"
+          :label="api_hints_enabled ? 'plg.bg_type' : 'Background Type'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           hint="Method to use for creating background"
           persistent-hint
         ></v-select>
@@ -226,12 +249,15 @@
         :selected.sync="bg_trace_selected"
         :show_if_single_entry="false"
         label="Background Trace"
+        api_hint="plg.bg_trace ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Trace to use as reference for background window(s).  'From Plugin' uses trace defined in Trace section above."
       />
 
       <v-row v-if="bg_type_selected === 'Manual'">
         <v-text-field
-          label="Pixel"
+          :label="api_hints_enabled ? 'plg.bg_trace_pixel' : 'Pixel'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           type="number"
           v-model.number="bg_trace_pixel"
           :rules="[() => bg_trace_pixel!=='' || 'This field is required']"
@@ -243,7 +269,8 @@
 
       <v-row v-if="['OneSided', 'TwoSided'].indexOf(bg_type_selected) !== -1">
         <v-text-field
-          label="Separation"
+          :label="api_hints_enabled ? 'plg.bg_separation =' : 'Separation'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           type="number"
           v-model.number="bg_separation"
           :rules="[() => bg_separation!=='' || 'This field is required']"
@@ -255,7 +282,8 @@
 
       <v-row>
         <v-text-field
-          label="Width"
+          :label="api_hints_enabled ? 'plg.bg_width =' : 'Width'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           type="number"
           v-model.number="bg_width"
           :rules="[() => bg_width!=='' || 'This field is required']"
@@ -271,7 +299,8 @@
           :menu-props="{ left: true }"
           :items="bg_statistic_items.map(i => i.label)"
           v-model="bg_statistic_selected"
-          label="Statistic"
+          :label="api_hints_enabled ? 'plg.bg_statistic = ' : 'Statistic'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           hint="Statistic to use over the background window."
           persistent-hint
         ></v-select>
@@ -296,6 +325,9 @@
                 action_label="Export"
                 action_tooltip="Create Background Image"
                 :action_spinner="bg_img_spinner"
+                add_results_api_hint="plg.bg_results"
+                action_api_hint="plt.export_bg_img()"
+                :api_hints_enabled="api_hints_enabled"
                 @click:action="create_bg_img"
               ></plugin-add-results>
             </v-expansion-panel-content>
@@ -320,6 +352,9 @@
                 :add_to_viewer_selected.sync="bg_spec_add_to_viewer_selected"
                 action_label="Export"
                 action_tooltip="Create Background Spectrum"
+                add_results_api_hint="plg.bg_spec_results"
+                action_api_hint="plt.export_bg_spec()"
+                :api_hints_enabled="api_hints_enabled"
                 @click:action="create_bg_spec"
               ></plugin-add-results>
             </v-expansion-panel-content>
@@ -344,6 +379,9 @@
                 :add_to_viewer_selected.sync="bg_sub_add_to_viewer_selected"
                 action_label="Export"
                 action_tooltip="Create Background Subtracted Image"
+                add_results_api_hint="plg.bg_sub_results"
+                action_api_hint="plt.export_bg_sub()"
+                :api_hints_enabled="api_hints_enabled"
                 @click:action="create_bg_sub"
               ></plugin-add-results>
             </v-expansion-panel-content>
@@ -365,6 +403,8 @@
         :selected.sync="ext_dataset_selected"
         :show_if_single_entry="false"
         label="2D Spectrum"
+        api_hint="plg.ext_dataset ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Select the data used to extract the spectrum.  'From Plugin' uses background-subtracted image defined in Background section above."
       />
 
@@ -373,6 +413,8 @@
         :selected.sync="ext_trace_selected"
         :show_if_single_entry="false"
         label="Extraction Trace"
+        api_hint="plg.ext_trace ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Trace to use as center of extraction window.  'From Plugin' uses trace defined in Trace section above."
       />
 
@@ -382,7 +424,8 @@
           :menu-props="{ left: true }"
           :items="ext_type_items.map(i => i.label)"
           v-model="ext_type_selected"
-          label="Extraction Type"
+          :label="api_hints_enabled ? 'plg.ext_type =' : 'Extraction Type'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           hint="Method to use for extracting the spectrum."
           persistent-hint
         ></v-select>
@@ -396,7 +439,8 @@
 
       <v-row v-if="ext_type_selected === 'Boxcar'">
         <v-text-field
-          label="Width"
+          :label="api_hints_enabled ? 'plg.ext_width =' : 'Width'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           type="number"
           v-model.number="ext_width"
           :rules="[() => ext_width!=='' || 'This field is required']"
@@ -412,7 +456,8 @@
           :menu-props="{ left: true }"
           :items=" horne_ext_profile_items.map(i => i.label)"
           v-model="horne_ext_profile_selected"
-          label="Profile Type"
+          :label="api_hints_enabled ? 'plg.horne_ext_profile =' : 'Profile Type'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           hint="Profile to use for Horne extractoin."
           persistent-hint
         ></v-select>
@@ -420,7 +465,8 @@
 
       <v-row v-if="horne_ext_profile_selected === 'Self (interpolated)'">
         <v-text-field
-          label="N Bins"
+          :label="api_hints_enabled ? 'plg.self_prof_n_bins =' : 'N Bins'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           type="number"
           v-model.number=self_prof_n_bins
           :rules="[() => self_prof_n_bins !== '' || 'This field is required',
@@ -434,7 +480,8 @@
       <div v-if="ext_type_selected === 'Horne'">
         <v-row v-if="horne_ext_profile_selected === 'Self (interpolated)'">
           <v-text-field
-            label="Interpolation Degree (X)"
+            :label="api_hints_enabled ? 'plg.self_prof_interp_degree_x =' : 'Interpolation Degree (X)'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             type="number"
             v-model.number=self_prof_interp_degree_x
             :rules="[() => self_prof_interp_degree_x !== '' || 'This field is required',
@@ -447,7 +494,8 @@
 
         <v-row v-if="horne_ext_profile_selected === 'Self (interpolated)'">
           <v-text-field
-            label="Interpolation Degree (Y)"
+            :label="api_hints_enabled ? 'plg.self_prof_interp_degree_y =' : 'Interpolation Degree (Y)'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             type="number"
             v-model.number=self_prof_interp_degree_y
             :rules="[() => self_prof_interp_degree_y !== '' || 'This field is required',
@@ -472,6 +520,9 @@
         action_tooltip="Extract 1D Spectrum"
         :action_disabled="ext_specreduce_err.length > 0"
         :action_spinner="spinner"
+        add_results_api_hint="plg.ext_results"
+        action_api_hint="plt.export_extract_spectrum()"
+        :api_hints_enabled="api_hints_enabled"
         @click:action="extract_spectrum"
       ></plugin-add-results>
     </div>

From d82741329169ca3b28b914b721972c1f8ecafe51 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Tue, 6 Aug 2024 15:52:53 -0400
Subject: [PATCH 14/24] tooltip for toggle button

---
 jdaviz/components/tooltip.vue     |  1 +
 jdaviz/components/tray_plugin.vue | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/jdaviz/components/tooltip.vue b/jdaviz/components/tooltip.vue
index 3195d378da..341f97fa3b 100644
--- a/jdaviz/components/tooltip.vue
+++ b/jdaviz/components/tooltip.vue
@@ -31,6 +31,7 @@ const tooltips = {
       some ad blockers or browser settings may block popup windows,
       causing this feature not to work.
     </div>`,
+  'plugin-api-hints': 'Toggle displaying inline API hints',
   'plugin-popout': `Display in a new window<br /><br />
     <div style="width: 200px; border: 1px solid gray;" class="pa-2">
       <strong>Note:</strong>
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 842140a24f..444e949ea4 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -7,14 +7,17 @@
         <j-docs-link :link="link">{{ description }}</j-docs-link>
       </div>
       <div style="width: 32px">
-        <v-btn
-          v-if="api_hints_enabled !== undefined && config && plugin_key" 
-          icon 
-          :class="api_hints_enabled ? 'api-hint' : null"
-          @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}"
-        >
-          <v-icon>mdi-code-tags</v-icon>
-        </v-btn>
+        <j-tooltip tipid='plugin-api-hints'>
+          <v-btn
+            v-if="api_hints_enabled !== undefined && config && plugin_key" 
+            icon 
+            :class="api_hints_enabled ? 'api-hint' : null"
+            @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}"
+          >
+            <v-icon>mdi-code-tags</v-icon>
+          </v-btn>
+        </j-tooltip>
+
       </div>
       <div style="width: 32px">
         <j-plugin-popout :popout_button="popout_button"></j-plugin-popout>

From 8bc517f093b7bbb1a501fcd0f826baf9ebc8899c Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 08:17:18 -0400
Subject: [PATCH 15/24] fix behavior for switches

---
 jdaviz/components/plugin_switch.vue              |  2 +-
 jdaviz/components/tray_plugin.vue                |  4 ++--
 .../plugins/plot_options/plot_options.vue        | 16 ++++++++--------
 .../spectral_extraction/spectral_extraction.vue  |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/jdaviz/components/plugin_switch.vue b/jdaviz/components/plugin_switch.vue
index 7fbc0f7375..4a2f7f5a37 100644
--- a/jdaviz/components/plugin_switch.vue
+++ b/jdaviz/components/plugin_switch.vue
@@ -7,7 +7,7 @@
       {{ api_hint + boolToString(value) }}
     </span>
     <span v-else>
-      label
+      {{ label }}
     </span>
   </span>
   <v-switch
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 444e949ea4..cb11376d43 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -37,8 +37,8 @@
       <v-row v-if="uses_active_status && keep_active !== undefined" style="padding-bottom: 24px">
         <!-- TODO: update:keep_active is not working!!! -->
         <plugin-switch
-          value.sync="keep_active"
-          @update:keep_active="$emit('update:keep_active', $event)"
+          :value.sync="keep_active"
+          @update:value="$emit('update:keep_active', $event)"
           label="Keep active"
           api_hint="plg.keep_active = "
           :api_hints_enabled="api_hints_enabled"
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index b4f0dabcc4..03aca69f09 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -209,7 +209,7 @@
 
     <glue-state-sync-wrapper v-if="uncertainty_visible_sync.in_subscribed_states" :sync="uncertainty_visible_sync" :multiselect="viewer_multiselect" @unmix-state="unmix_state('uncertainty_visible')">
       <plugin-switch
-        value.sync="uncertainty_visible_value"
+        :value.sync="uncertainty_visible_value"
         label="Plot uncertainties"
         api_hint='plg.uncertainty_visible = '
         :api_hints_enabled="api_hints_enabled"
@@ -250,7 +250,7 @@
       <j-plugin-section-header v-if="layer_selected.length && (line_visible_sync.in_subscribed_states || subset_visible_sync.in_subscribed_states)">Layer Visibility</j-plugin-section-header>
       <glue-state-sync-wrapper :sync="marker_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_visible')">
         <plugin-switch
-          value.sync="marker_visible_value"
+          :value.sync="marker_visible_value"
           label="Show Scatter Layer"
           api_hint='plg.marker_visible = '
           :api_hints_enabled="api_hints_enabled"
@@ -260,7 +260,7 @@
 
       <glue-state-sync-wrapper v-if="!marker_visible_sync.in_subscribed_states" :sync="line_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_visible')">
         <plugin-switch
-          value.sync="line_visible_value"
+          :value.sync="line_visible_value"
           label="Show Line"
           api_hint='plg.line_visible = '
           :api_hints_enabled="api_hints_enabled"
@@ -270,7 +270,7 @@
 
       <glue-state-sync-wrapper :sync="subset_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_visible')">
         <plugin-switch
-          value.sync="subset_visible_value"
+          :value.sync="subset_visible_value"
           label="Show Subset"
           api_hint='plg.subset_visible = '
           :api_hints_enabled="api_hints_enabled"
@@ -320,7 +320,7 @@
       <j-plugin-section-header v-if="(line_visible_sync.in_subscribed_states && ((!marker_visible_sync.in_subscribed_states && line_visible_value) || (marker_visible_sync.in_subscribed_states && marker_visible_value)))">Line</j-plugin-section-header>
       <glue-state-sync-wrapper v-if="marker_visible_sync.in_subscribed_states && marker_visible_value" :sync="line_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_visible')">
         <plugin-switch
-          value.sync="line_visible_value"
+          :value.sync="line_visible_value"
           label="Show Line"
           api_hint='plg.line_visible = '
           :api_hints_enabled="api_hints_enabled"
@@ -375,7 +375,7 @@
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_as_steps_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_as_steps')">
         <plugin-switch
-          value.sync="line_as_steps_value"
+          :value.sync="line_as_steps_value"
           label="Plot profile as steps"
           api_hint="plg.line_as_steps = "
           :api_hints_enabled="api_hints_enabled"
@@ -563,7 +563,7 @@
       <j-plugin-section-header v-if="image_visible_sync.in_subscribed_states">Image</j-plugin-section-header>
       <glue-state-sync-wrapper :sync="image_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_visible')">
         <plugin-switch
-          value.sync="image_visible_value"
+          :value.sync="image_visible_value"
           label="Show Image"
           api_hint='plg.image_visible = '
           :api_hints_enabled="api_hints_enabled"
@@ -825,7 +825,7 @@
         <div style="grid-area: 1/1">
           <glue-state-sync-wrapper :sync="contour_visible_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('contour_visible')">
             <plugin-switch
-              value.sync="contour_visible_value"
+              :value.sync="contour_visible_value"
               label="Show Contours"
               api_hint='plg.contour_visible = '
               :api_hints_enabled="api_hints_enabled"
diff --git a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
index b15e9b94e2..cadc7ae7c4 100644
--- a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
+++ b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
@@ -20,7 +20,7 @@
           <v-expansion-panel-content class="plugin-expansion-panel-content">
             <v-row>
               <plugin-switch
-                value.sync="interactive_extract"
+                :value.sync="interactive_extract"
                 label="Show live-extraction"
                 api_hint="plg.interactive_extract = "
                 :api_hints_enabled="api_hints_enabled"

From 47f1aac882d10111928c0d6db6a244d33a5d41be Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 09:09:18 -0400
Subject: [PATCH 16/24] separate component for slider header

---
 jdaviz/app.py                                 |  1 +
 .../components/plot_options_slider_header.vue | 15 +++
 .../plugins/plot_options/plot_options.vue     | 96 ++++++++-----------
 jdaviz/main_styles.vue                        |  2 +-
 4 files changed, 57 insertions(+), 57 deletions(-)
 create mode 100644 jdaviz/components/plot_options_slider_header.vue

diff --git a/jdaviz/app.py b/jdaviz/app.py
index 5a9a0aaf17..77df41cf18 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -148,6 +148,7 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      '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',
+                     'plot-options-slider-header': 'components/plot_options_slider_header.vue',
                      'glue-state-sync-wrapper': 'components/glue_state_sync_wrapper.vue'}
 
 _verbosity_levels = ('debug', 'info', 'warning', 'error')
diff --git a/jdaviz/components/plot_options_slider_header.vue b/jdaviz/components/plot_options_slider_header.vue
new file mode 100644
index 0000000000..18cfba8116
--- /dev/null
+++ b/jdaviz/components/plot_options_slider_header.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-subheader :class="api_hints_enabled ? 'pl-0 slider-label api-hint' : 'pl-0 slider-label'" style="height: 12px">
+    {{ api_hints_enabled && api_hint ?
+      api_hint
+      :
+      label
+    }}
+  </v-subheader>
+</template>
+
+<script>
+  module.exports = {
+    props: ['label', 'api_hint', 'api_hints_enabled'],
+  };
+</script>
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 03aca69f09..3eb76ff2f8 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -304,13 +304,11 @@
 
       <glue-state-sync-wrapper :sync="subset_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_opacity')">
         <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px">
-            {{ api_hints_enabled ?
-              'plg.subset_opacity = '+subset_opacity_value
-              :
-              'Subset Opacity'
-            }}
-          </v-subheader>
+          <plot-options-slider-header
+              label='Subset Opacity'
+              :api_hint="'plg.subset_opacity = ' + subset_opacity_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
           <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="subset_opacity_value" hide-details class="no-hint" />
         </div>
       </glue-state-sync-wrapper>
@@ -362,13 +360,11 @@
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_opacity')">
         <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px">
-            {{  api_hints_enabled ?
-                'plg.line_opacity = '+line_opacity_value
-                :
-                'Line Opacity'
-            }}
-          </v-subheader>
+          <plot-options-slider-header
+              label='Line Opacity'
+              :api_hint="'plg.line_opacity = ' + line_opacity_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
           <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="line_opacity_value" hide-details class="no-hint" />
         </div>
       </glue-state-sync-wrapper>
@@ -396,13 +392,11 @@
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_opacity')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">
-              {{ api_hints_enabled ?
-                'plg.marker_opacity = '+marker_opacity_value
-                :
-                'Opacity'  
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Opacity'
+              :api_hint="'plg.marker_opacity = ' + marker_opacity_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="marker_opacity_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
@@ -420,26 +414,22 @@
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_size_mode_value==='Fixed'" :sync="marker_size_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">
-              {{ api_hints_enabled ? 
-                'plg.marker_size = '+marker_size_value
-                :
-                'Size'
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Size'
+              :api_hint="'plg.marker_size = ' + marker_size_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <glue-throttled-slider wait="300" max="10" step="0.1" :value.sync="marker_size_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_size_scale_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size_scale')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">
-              {{ api_hints_enabled ?
-                'plg.marker_size_scale = '+marker_size_scale_value
-                :
-                'Scale'
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Scale'
+              :api_hint="'plg.marker_size_scale = ' + marker_size_scale_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <glue-throttled-slider wait="300" max="10" step="0.1" :value.sync="marker_size_scale_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
@@ -639,39 +629,33 @@
 
         <glue-state-sync-wrapper :sync="image_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_opacity')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">
-              {{ api_hints_enabled ?
-                'plg.image_opacity = '+image_opacity_value
-                :
-                'Image Opacity'
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Image Opacity'
+              :api_hint="'plg.image_opacity = ' + image_opacity_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="image_opacity_value" hide-details class="no-hint" />
           </div>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper :sync="image_contrast_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_contrast')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">
-              {{ api_hints_enabled ?
-                'plg.image_contrast = '+image_contrast_value
-                :
-                'Contract'
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Contrast'
+              :api_hint="'plg.image_contrast = ' + image_contrast_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <glue-throttled-slider wait="300" max="4" step="0.01" :value.sync="image_contrast_value" hide-details />
           </div>
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper :sync="image_bias_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_bias')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px">
-              {{ api_hints_enabled ?
-                'plg.image_bias = '+image_bias_value
-                :
-                'Bias'
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Bias'
+              :api_hint="'plg.image_bias = ' + image_bias_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="image_bias_value" hide-details />
           </div>
         </glue-state-sync-wrapper>
diff --git a/jdaviz/main_styles.vue b/jdaviz/main_styles.vue
index 9f6da175c0..21e0253186 100644
--- a/jdaviz/main_styles.vue
+++ b/jdaviz/main_styles.vue
@@ -285,7 +285,7 @@ span.api-hint-header {
 }
 
 
-.api-hint .v-alert__content, .api-hint .v-subheader {
+.api-hint .v-alert__content, .api-hint.slider-label {
   color: #c75109 !important;
   font-family: monospace;
   font-size: 10px !important;

From c9b5618e6ae2bec35f2a29e7c016ef06b5f718cd Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 09:24:42 -0400
Subject: [PATCH 17/24] fix styling for editable select

---
 jdaviz/components/plugin_editable_select.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/jdaviz/components/plugin_editable_select.vue b/jdaviz/components/plugin_editable_select.vue
index 63101800b3..97694883be 100644
--- a/jdaviz/components/plugin_editable_select.vue
+++ b/jdaviz/components/plugin_editable_select.vue
@@ -34,7 +34,7 @@
       type="warning"
       style="width: 100%; padding-top: 16px; padding-bottom: 16px"
     >
-      <span v-if="api_hints_enabled && api_hint_remove">
+      <span v-if="api_hints_enabled && api_hint_remove" class="api-hint">
         {{api_hint_remove}}('{{selected}}')
       </span>
       <span v-else>
@@ -54,6 +54,7 @@
       v-model="edit_value"
       @keyup="$emit('update:edit_value', $event.target.value)"
       :label="textFieldLabel"
+      :class="textFieldClass"
       :hint="mode == 'rename' ? 'Rename '+label.toLowerCase() : 'Add '+label.toLowerCase()"
       persistent-hint
     >
@@ -92,6 +93,15 @@ module.exports = {
       } else {
         return this.label;
       }
+    },
+    textFieldClass() {
+      if (this.api_hints_enabled && this.mode == 'rename' && this.api_hint_rename) {
+        return 'api-hint';
+      } else if (this.api_hints_enabled && this.mode == 'add' && this.api_hint_add) {
+        return 'api-hint';
+      } else {
+        return null;
+      }
     }
   },
   methods: {

From 7e34c0911ccb0628bab7976d20e7d7b7ecb91b39 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 09:24:50 -0400
Subject: [PATCH 18/24] brief mention in docs

---
 docs/plugin_api.rst | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/plugin_api.rst b/docs/plugin_api.rst
index c6e61a9f8d..f87179ce36 100644
--- a/docs/plugin_api.rst
+++ b/docs/plugin_api.rst
@@ -13,3 +13,5 @@ For example:
   plugin = viz.plugins['Plot Options']
   plugin.open_in_tray()
   plugin.show('popout')
+
+Some plugins provide API hints directly in the UI.  To enable these, toggle the ``<>`` button in the top of the plugin.
\ No newline at end of file

From 96c5cf1b669cdd76960f3e001e93ef45df15ea74 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 09:30:47 -0400
Subject: [PATCH 19/24] changelog entry

---
 CHANGES.rst | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGES.rst b/CHANGES.rst
index 270d17759c..ba1bfe8574 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -16,6 +16,8 @@ New Features
 
 - The colormap menu for image layers now shows in-line previews of the colormaps. [#2900]
 
+- Plugins can now expose in-UI API hints. [#3137]
+
 Cubeviz
 ^^^^^^^
 

From b2952f29cd8b8b0a68fe3c7ba8b17629dd0ce564 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 10:17:58 -0400
Subject: [PATCH 20/24] don't show toggle button when not in notebook/lab

---
 docs/plugin_api.rst               |  2 +-
 jdaviz/components/tray_plugin.vue | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/plugin_api.rst b/docs/plugin_api.rst
index f87179ce36..dfbf4154d5 100644
--- a/docs/plugin_api.rst
+++ b/docs/plugin_api.rst
@@ -14,4 +14,4 @@ For example:
   plugin.open_in_tray()
   plugin.show('popout')
 
-Some plugins provide API hints directly in the UI.  To enable these, toggle the ``<>`` button in the top of the plugin.
\ No newline at end of file
+When running in a notebook, some plugins provide API hints directly in the UI.  To enable these, toggle the ``<>`` button in the top of the plugin.
\ No newline at end of file
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index cb11376d43..ca8827b9b9 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -9,7 +9,8 @@
       <div style="width: 32px">
         <j-tooltip tipid='plugin-api-hints'>
           <v-btn
-            v-if="api_hints_enabled !== undefined && config && plugin_key" 
+            v-if="api_hints_enabled !== undefined && config && plugin_key && checkNotebookContext()" 
+            id="api-hints-button"
             icon 
             :class="api_hints_enabled ? 'api-hint' : null"
             @click="() => {$emit('update:api_hints_enabled', !api_hints_enabled)}"
@@ -87,7 +88,14 @@ module.exports = {
       setTimeout(() => {
         this.sendPing(true)          
       }, 200)  // ms
-    }
+    },
+    checkNotebookContext() {
+      // copied from app.vue
+      this.notebook_context = document.getElementById("ipython-main-app")
+        || document.querySelector('.jp-LabShell')
+        || document.querySelector(".lm-Widget#main"); /* Notebook 7 */
+      return this.notebook_context;
+    },
   },
   mounted() {
     this.sendPing(true);

From 226e54264da64a67d188a774ab211ee59f66d768 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 10:19:33 -0400
Subject: [PATCH 21/24] defer to_script functionality

---
 .../plugins/gaussian_smooth/gaussian_smooth.py |  9 ---------
 jdaviz/core/template_mixin.py                  |  7 -------
 jdaviz/core/user_api.py                        | 18 ------------------
 3 files changed, 34 deletions(-)

diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
index 05d0c6bd9a..edf226d5c7 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.py
@@ -156,9 +156,6 @@ def smooth(self, add_data=True):
         spec : `~specutils.Spectrum1D`
             The smoothed spectrum or data cube
         """
-        plugin_state = self.user_api.to_dict()
-        plugin_script = self.user_api.to_script(as_string=False)
-
         if self.mode_selected == 'Spatial':
             if self.config != 'cubeviz':
                 raise NotImplementedError("spatial smoothing only supported for Cubeviz")
@@ -174,12 +171,6 @@ def smooth(self, add_data=True):
         else:
             results = self.spectral_smooth()
 
-        if '_jdaviz_history' not in results.meta.keys():
-            results.meta['_jdaviz_history'] = []
-            results.meta['_jdaviz_script'] = []
-        results.meta['_jdaviz_history'] += [plugin_state]
-        results.meta['_jdaviz_script'] += plugin_script + ['plg.smooth()']
-
         if add_data:
             # add data to the collection/viewer
             self.add_results.add_results_from_plugin(results)
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index 3857a91291..2f55dbd4b9 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -3392,13 +3392,6 @@ def __init__(self, plugin, items, selected,
         # initialize items from original viewers
         self._on_data_changed()
 
-    def to_script(self, as_string=False):
-        script = [f"{self.app.config}.load_data({self.selected_obj}, data_label='{self.selected})'"]
-        script += [f"plg.selected = '{self.selected}'"]
-        if as_string:
-            return "\n".join(script)
-        return script
-
     @property
     def default_data_cls(self):
         if self.app.config == 'imviz':
diff --git a/jdaviz/core/user_api.py b/jdaviz/core/user_api.py
index a2b1982700..bb00911739 100644
--- a/jdaviz/core/user_api.py
+++ b/jdaviz/core/user_api.py
@@ -141,24 +141,6 @@ def __repr__(self):
             super().__setattr__('_deprecation_msg', None)
         return f'<{self._obj._registry_label} API>'
 
-    def to_script(self, as_string=True):
-        def _value_as_str(v):
-            if isinstance(v, str):
-                return f"'{v}'"
-            return v
-        script = [f"plg = {self._obj.app.config}.plugins['{self._obj._registry_label}']"]
-        for k, v in self.to_dict().items():
-            if hasattr(getattr(self, k), "to_script"):
-                script += getattr(self, k).to_script(as_string=False)
-            elif isinstance(v, dict):
-                # TODO: make recursive
-                script += [f"plg.{k}.{kk} = {_value_as_str(vv)}" for kk, vv in v.items()]
-            else:
-                script += [f"plg.{k} = {_value_as_str(v)}"]
-        if as_string:
-            return "\n".join(script)
-        return script
-
 
 class ViewerUserApi(UserApiWrapper):
     """

From 53c62e4f87a7c86728a2a7cd13300680ca8eabde Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 12:52:42 -0400
Subject: [PATCH 22/24] implement/update additional plugins

---
 .../spectral_extraction.vue                   |  8 ++--
 .../default/plugins/collapse/collapse.vue     |  4 +-
 .../configs/default/plugins/export/export.vue | 21 ++++------
 .../plugins/model_fitting/model_fitting.vue   | 13 ++++--
 .../plugins/plot_options/plot_options.vue     | 36 +++++++---------
 .../imviz/plugins/footprints/footprints.vue   | 42 ++++++++++---------
 .../unit_conversion/unit_conversion.py        |  6 ++-
 .../unit_conversion/unit_conversion.vue       | 19 ++++++---
 8 files changed, 79 insertions(+), 70 deletions(-)

diff --git a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
index 385aea06e7..965697327d 100644
--- a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
+++ b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
@@ -54,7 +54,7 @@
         </v-row>
 
         <div v-if="aperture_selected_validity.is_aperture">
-          <v-row class="ignore-api-hints">
+          <v-row>
             <plugin-switch
               :value.sync="wavelength_dependent"
               label="Wavelength dependent"
@@ -82,7 +82,7 @@
                 persistent-hint
               ></v-text-field>
             </v-row>
-            <v-row justify="end" class="ignore-api-hints">
+            <v-row justify="end">
               <j-tooltip tooltipcontent="Select the slice nearest the reference wavelength">
                 <plugin-action-button :results_isolated_to_plugin="true" @click="goto_reference_spectral_value">
                   Slice to Wavelength
@@ -222,11 +222,11 @@
 
       <v-row>
         <v-select
-          :menu-props="{ left: true }"
           attach
           :items="function_items.map(i => i.label)"
           v-model="function_selected"
           :label="api_hints_enabled ? 'plg.function =' : 'Function'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           :hint="'Function to apply to data in \''+aperture_selected+'\'.'"
           persistent-hint
         ></v-select>
@@ -265,7 +265,7 @@
 
       <j-plugin-section-header v-if="extraction_available && export_enabled">Results</j-plugin-section-header>
 
-      <div class="ignore-api-hint" style="display: grid; position: relative"> <!-- overlay container -->
+      <div style="display: grid; position: relative"> <!-- overlay container -->
         <div style="grid-area: 1/1">
           <div v-if="extraction_available && export_enabled">
 
diff --git a/jdaviz/configs/default/plugins/collapse/collapse.vue b/jdaviz/configs/default/plugins/collapse/collapse.vue
index 64b3053ebb..196cf52862 100644
--- a/jdaviz/configs/default/plugins/collapse/collapse.vue
+++ b/jdaviz/configs/default/plugins/collapse/collapse.vue
@@ -20,11 +20,11 @@
 
     <v-row>
       <v-select
-        :menu-props="{ left: true }"
         attach
         :items="function_items.map(i => i.label)"
         v-model="function_selected"
         :label="api_hints_enabled ? 'plg.function =' : 'Function'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         hint="Function to use in the collapse."
         persistent-hint
       ></v-select>
@@ -62,7 +62,7 @@
 
     <j-plugin-section-header v-if="collapsed_spec_available && export_enabled">Results</j-plugin-section-header>
 
-    <div style="display: grid; position: relative" class="ignore-api-hints"> <!-- overlay container -->
+    <div style="display: grid; position: relative"> <!-- overlay container -->
       <div style="grid-area: 1/1">
         <div v-if="collapsed_spec_available && export_enabled">
 
diff --git a/jdaviz/configs/default/plugins/export/export.vue b/jdaviz/configs/default/plugins/export/export.vue
index f51041a9e5..9a02c9c946 100644
--- a/jdaviz/configs/default/plugins/export/export.vue
+++ b/jdaviz/configs/default/plugins/export/export.vue
@@ -31,12 +31,11 @@
       </plugin-inline-select>
       <v-row class="row-min-bottom-padding">
         <v-select
-          class="category-content"
-          :menu-props="{ left: true }"
           attach
           v-model="viewer_format_selected"
           :items="viewer_format_items.map(i => i.label)"
           :label="api_hints_enabled ? 'plg.viewer_format =' : 'Format'"
+          :class="api_hints_enabled ? 'api-hint category-content' : 'category-content'"
           hint="Image format for exporting viewers."
           :disabled="viewer_selected.length == 0"
           persistent-hint
@@ -118,12 +117,11 @@
       </v-row>
       <v-row class="row-min-bottom-padding">
           <v-select
-            class="category-content"
-            :menu-props="{ left: true }"
             attach
             v-model="dataset_format_selected"
             :items="dataset_format_items.map(i => i.label)"
             :label="api_hints_enabled ? 'plg.dataset_format =' : 'Format'"
+            :class="api_hints_enabled ? 'api-hint category-content' : 'category-content'"
             hint="Format for exporting datasets."
             :disabled="dataset_selected.length == 0"
             persistent-hint
@@ -155,14 +153,13 @@
 
       <v-row class="row-min-bottom-padding">
         <v-select
-          class="category-content"
-          :menu-props="{ left: true }"
           attach
           v-model="subset_format_selected"
           :items="subset_format_items"
           item-text="label"
           item-disabled="disabled"
           :label="api_hints_enabled ? 'plg.subset_format =' : 'Format'"
+          :class="api_hints_enabled ? 'api-hint category-content' : 'category-content'"
           hint="Format for exporting subsets."
           :disabled="subset_selected == null || subset_selected.length == 0"
           persistent-hint
@@ -187,12 +184,11 @@
       </plugin-inline-select>
       <v-row class="row-min-bottom-padding">
         <v-select
-          class="category-content"
-          :menu-props="{ left: true }"
           attach
           v-model="plugin_table_format_selected"
           :items="plugin_table_format_items.map(i => i.label)"
           :label="api_hints_enabled ? 'plg.plugin_table_format =' : 'Format'"
+          :class="api_hints_enabled ? 'api-hint category-content' : 'category-content'"
           hint="File format for exporting plugin tables."
           :disabled="plugin_table_selected.length == 0"
           persistent-hint
@@ -221,12 +217,11 @@
           :widget="plugin_plot_selected_widget"/>
       <v-row class="row-min-bottom-padding">
         <v-select
-          class="category-content"
-          :menu-props="{ left: true }"
           attach
           v-model="plugin_plot_format_selected"
           :items="plugin_plot_format_items.map(i => i.label)"
           :label="api_hints_enabled ? 'plg.plugin_plot_format =' : 'Format'"
+          :class="api_hints_enabled ? 'api-hint category-content' : 'category-content'"
           hint="File format for exporting plugin plots."
           :disabled="plugin_plot_selected.length == 0"
           persistent-hint
@@ -241,7 +236,6 @@
           :value="default_filepath"
           label="Filepath"
           hint="Filepath export location."
-          class="ignore-api-hints"
           persistent-hint
           disabled
         ></v-text-field>
@@ -256,7 +250,9 @@
       :default="filename_default"
       :auto.sync="filename_auto"
       :invalid_msg="filename_invalid_msg"
-      :label="api_hints_enabled ? 'plg.filename =' : 'Filename'"
+      label="Filename"
+      api_hint="plg.filename ="
+      :api_hints_enabled="api_hints_enabled"
       hint="Export to a file on disk."
     ></plugin-auto-label>
 
@@ -275,6 +271,7 @@
         :results_isolated_to_plugin="true"
         @click="export_from_ui"
         :spinner="spinner"
+        :api_hints_enabled="api_hints_enabled"
         :disabled="filename_value.length === 0 ||
                    movie_recording ||
                    subset_invalid_msg.length > 0 || data_invalid_msg.length > 0 ||
diff --git a/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue b/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue
index 0e48472798..e9f0ad9d46 100644
--- a/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue
+++ b/jdaviz/configs/default/plugins/model_fitting/model_fitting.vue
@@ -52,10 +52,10 @@
       <v-row v-if="model_comp_items">
         <v-select
           attach
-          :menu-props="{ left: true }"
           :items="model_comp_items.map(i => i.label)"
           v-model="model_comp_selected"
           :label="api_hints_enabled ? 'plg.model_component =' : 'Model Component'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           hint="Select a model component to add."
           persistent-hint
         ></v-select>
@@ -63,9 +63,10 @@
 
       <v-row v-if="display_order">
         <v-text-field
-          label="Order"
           type="number"
           v-model.number="poly_order"
+          :label="api_hints_enabled ? 'plg.poly_order' : 'Order'"
+          :class="api_hints_enabled ? 'api-hint' : null"
           :rules="[() => poly_order!=='' || 'This field is required']"
           hint="Order of polynomial to fit."
           persistent-hint
@@ -79,7 +80,8 @@
         :default="comp_label_default"
         :auto.sync="comp_label_auto"
         :invalid_msg="comp_label_invalid_msg"
-        :label="api_hints_enabled ? 'plg.model_component_label =' : null"
+        api_hint="plg.model_component_label ="
+        :api_hints_enabled="api_hints_enabled"
         hint="Label for this new model component."
       ></plugin-auto-label>
 
@@ -88,6 +90,7 @@
           <plugin-action-button
             :disabled="!form_valid_model_component || comp_label_invalid_msg.length > 0"
             :results_isolated_to_plugin="true"
+            :api_hints_enabled="api_hints_enabled"
             @click="add_model"
           >
             {{ api_hints_enabled ?
@@ -112,7 +115,6 @@
             color="turquoise"
             dark
             style="padding-left: 8px; padding-right: 6px;"
-            class="ignore-api-hints"
             @click="reestimate_model_parameters(null)">
             <v-icon left small dense style="margin-right: 2px">mdi-restart</v-icon>
             Re-estimate free parameters
@@ -247,6 +249,7 @@
         :auto.sync="model_equation_auto"
         :invalid_msg="model_equation_invalid_msg"
         :label="api_hints_enabled ? 'plg.equation =' : null"
+        :class="api_hints_enabled ? 'api-hint' : null"
         hint="Enter an equation specifying how to combine the component models, using their model IDs and basic arithmetic operators (ex. component1+component2)."
       ></plugin-auto-label>
 
@@ -294,6 +297,8 @@
             :auto.sync="residuals_label_auto"
             :invalid_msg="residuals_label_invalid_msg"
             label="Residuals Data Label"
+            api_hint="plg.residuals ="
+            :api_hints_enabled="api_hints_enabled"
             hint="Label for the residuals.  Data entry will not be loaded into the viewer automatically."
           ></plugin-auto-label>
 
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 3eb76ff2f8..83b21ee6c0 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -328,13 +328,11 @@
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_color')">
         <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
-            {{ api_hints_enabled ?
-              'plg.line_color = \''+line_color_value +'\''
-              :
-              'Line Color'
-            }}
-          </v-subheader>
+          <plot-options-slider-header
+              label='Line Color'
+              :api_hint="'plg.line_color = ' + line_color_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
           <v-menu>
             <template v-slot:activator="{ on }">
                 <span class="color-menu"
@@ -481,13 +479,11 @@
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_color_mode_value==='Fixed'" :sync="marker_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_color')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
-              {{ api_hints_enabled ?
-                'plg.marker_color = \''+marker_color_value +'\''
-                :
-                'Color'
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Color'
+              :api_hint="'plg.marker_color = ' + marker_color_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <v-menu>
               <template v-slot:activator="{ on }">
                   <span class="color-menu"
@@ -602,13 +598,11 @@
         </glue-state-sync-wrapper>
         <glue-state-sync-wrapper v-if="image_color_mode_value !== 'Colormaps' || image_color_mode_sync['mixed']" :sync="image_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_color')">
           <div>
-            <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
-              {{ api_hints_enabled ?
-                'plg.image_color = '+image_color_value
-                :
-                'Image Color'
-              }}
-            </v-subheader>
+            <plot-options-slider-header
+              label='Image Color'
+              :api_hint="'plg.image_color = ' + image_color_value"
+              :api_hints_enabled="api_hints_enabled"
+            />
             <v-menu>
               <template v-slot:activator="{ on }">
                   <span class="color-menu"
diff --git a/jdaviz/configs/imviz/plugins/footprints/footprints.vue b/jdaviz/configs/imviz/plugins/footprints/footprints.vue
index 83a4692277..a02088a564 100644
--- a/jdaviz/configs/imviz/plugins/footprints/footprints.vue
+++ b/jdaviz/configs/imviz/plugins/footprints/footprints.vue
@@ -30,7 +30,6 @@
     <v-alert
       v-if="is_pixel_linked"
       type='warning'
-      class="ignore-api-hints"
       style="margin-left: -12px; margin-right: -12px"
     >
       cannot plot footprint when aligned by pixels (see Orientation plugin).
@@ -59,16 +58,13 @@
       />
 
       <v-row>
-        <span>
-          <v-btn icon @click.stop="visible = !visible">
-            <v-icon>mdi-eye{{ visible ? '' : '-off' }}</v-icon>
-          </v-btn>
-          {{ api_hints_enabled ?
-            'plg.visible = ' + boolToString(visible)
-            :
-            'Show Overlay'
-          }}
-        </span>
+        <plugin-switch
+          :value.sync="visible"
+          label="Visible"
+          api_hint="plg.visible = "
+          :api_hints_enabled="api_hints_enabled"
+          :use_eye_icon="true"
+        />
       </v-row>
 
       <v-row>
@@ -84,7 +80,7 @@
                             @update:color="throttledSetColor($event.hexa)"></v-color-picker>
             </div>
           </v-menu>
-        <span style="padding-left: 12px; padding-top: 3px">
+        <span style="padding-left: 12px; padding-top: 3px" :class="api_hints_enabled ? 'api-hint' : null">
           {{  api_hints_enabled ?
               'plg.color = '+color
               :
@@ -93,13 +89,11 @@
         </span>
       </v-row>
       <div>
-        <v-subheader class="pl-0 slider-label" style="height: 12px">
-          {{ api_hints_enabled ?
-              'plg.fill_opacity = '+fill_opacity
-              :
-              'Fill Opacity' 
-             }}
-        </v-subheader>
+        <plot-options-slider-header
+          label="Fill Opacity"
+          :api_hint="'plg.fill_opacity = ' + fill_opacity"
+          :api_hints_enabled="api_hints_enabled"
+        />
         <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="fill_opacity" hide-details class="no-hint" />
       </div>
 
@@ -129,7 +123,10 @@
         <v-row>
           <span style="line-height: 36px; font-size: 12px; color: #666666; width: 100%">Center RA/Dec</span>
           <j-tooltip v-for="viewer_ref in viewer_selected" :tooltipcontent="'center RA/DEC on current zoom-limits of '+viewer_ref">
-          <v-btn @click="() => center_on_viewer(viewer_ref)">
+          <v-btn
+            @click="() => center_on_viewer(viewer_ref)"
+            :class="api_hints_enabled ? 'api-hint' : null"
+          >
             {{ api_hints_enabled ?
                 'plg.center_on_viewer(\''+viewer_ref+'\')'
                 :
@@ -146,6 +143,7 @@
             step="0.01"
             :rules="[() => ra!=='' || 'This field is required']"
             :label="api_hints_enabled ? 'plg.ra = ' : 'RA'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Right Ascension (degrees)"
             persistent-hint
           ></v-text-field>
@@ -158,6 +156,7 @@
             step="0.01"
             :rules="[() => dec!=='' || 'This field is required']"
             :label="api_hints_enabled ? 'plg.dec = ' : 'Dec'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Declination (degrees)"
             persistent-hint
           ></v-text-field>
@@ -169,6 +168,7 @@
             type="number"
             :rules="[() => pa!=='' || 'This field is required']"
             :label="api_hints_enabled ? 'plg.pa = ' : 'Position Angle'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Position Angle (degrees) measured from North
                   to central vertical axis in North to East direction."
             persistent-hint
@@ -181,6 +181,7 @@
             type="number"
             :rules="[() => v2_offset!=='' || 'This field is required']"
             :label="api_hints_enabled ? 'plg.v2_offset = ' : 'V2 Offset'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Additional V2 offset in telescope coordinates to apply to instrument
                   center, as from a dither pattern."
             persistent-hint
@@ -193,6 +194,7 @@
             type="number"
             :rules="[() => v3_offset!=='' || 'This field is required']"
             :label="api_hints_enabled ? 'plg.v3_offset = ' : 'V3 Offset'"
+            :class="api_hints_enabled ? 'api-hint' : null"
             hint="Additional V3 offset in telescope coordinates to apply to instrument
                   center, as from a dither pattern."
             persistent-hint
diff --git a/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.py b/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.py
index bff50f481f..31306b6153 100644
--- a/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.py
+++ b/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.py
@@ -114,11 +114,15 @@ def __init__(self, *args, **kwargs):
     @property
     def user_api(self):
         if self.app.config == 'cubeviz':
-            expose = ('spectral_unit', 'flux_or_sb', 'flux_unit', 'angle_unit')
+            expose = ('spectral_unit', 'flux_or_sb', 'flux_unit', 'angle_unit', 'sb_unit')
         else:
             expose = ('spectral_unit', 'flux_unit', 'angle_unit')
         return PluginUserApi(self, expose=expose)
 
+    @property
+    def sb_unit(self):
+        return self.sb_unit_selected
+
     def _on_glue_x_display_unit_changed(self, x_unit_str):
         if x_unit_str is None:
             return
diff --git a/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue b/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue
index 60637d83f2..d0c6bbdcf9 100644
--- a/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue
+++ b/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue
@@ -1,6 +1,8 @@
 <template>
-  <!-- To re-enable plugin, use :disabled_msg="disabled_msg" -->
   <j-tray-plugin
+    :config="config"
+    plugin_key="Unit Conversion"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Convert the spectral flux density and spectral axis units.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#unit-conversion'"
     :disabled_msg="disabled_msg"
@@ -13,7 +15,8 @@
         attach
         :items="spectral_unit_items.map(i => i.label)"
         v-model="spectral_unit_selected"
-        label="Spectral Unit"
+        :label="api_hints_enabled ? 'plg.spectral_unit =' : 'Spectral Unit'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         hint="Global display unit for spectral axis."
         persistent-hint
       ></v-select>
@@ -25,7 +28,8 @@
         attach
         :items="flux_unit_items.map(i => i.label)"
         v-model="flux_unit_selected"
-        label="Flux Unit"
+        :label="api_hints_enabled ? 'plg.flux_unit =' : 'Flux Unit'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         hint="Global display unit for flux axis."
         persistent-hint
       ></v-select>
@@ -37,7 +41,8 @@
         attach
         :items="angle_unit_items.map(i => i.label)"
         v-model="angle_unit_selected"
-        label="Solid Angle Unit"
+        :label="api_hints_enabled ? 'plg.angle_unit =' : 'Solid Angle Unit'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         hint="Solid angle unit."
         persistent-hint
         
@@ -47,7 +52,8 @@
     <v-row>
       <v-text-field
         v-model="sb_unit_selected"
-        label="Surface Brightness Unit"
+        :label="api_hints_enabled ? 'plg.sb_unit' : 'Surface Brightness Unit'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         hint="Global display unit for surface brightness axis."
         persistent-hint
         :disabled='true'
@@ -64,7 +70,8 @@
         attach
         :items="flux_or_sb_items.map(i => i.label)"
         v-model="flux_or_sb_selected"
-        label="Flux or Surface Brightness"
+        :label="api_hints_enabled ? 'plg.flux_or_sb =' : 'Flux or Surface Brightness'"
+        :class="api_hints_enabled ? 'api-hint' : null"
         hint="Select the y-axis physical type for the spectrum-viewer."
         persistent-hint
         :disabled="!can_translate"

From 4b8836250dab30847c5162a2ea4d9dff5ba4bd75 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 7 Aug 2024 13:51:01 -0400
Subject: [PATCH 23/24] partial implementation for dq plugin

---
 .../plugins/data_quality/data_quality.py      | 20 +++++++++++++++-
 .../plugins/data_quality/data_quality.vue     | 23 ++++++++++++++-----
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/jdaviz/configs/default/plugins/data_quality/data_quality.py b/jdaviz/configs/default/plugins/data_quality/data_quality.py
index 5e348c172e..abeef53a46 100644
--- a/jdaviz/configs/default/plugins/data_quality/data_quality.py
+++ b/jdaviz/configs/default/plugins/data_quality/data_quality.py
@@ -33,6 +33,24 @@
 
 @tray_registry('g-data-quality', label="Data Quality", viewer_requirements="image")
 class DataQuality(PluginTemplateMixin, ViewerSelectMixin):
+    """
+    See the :ref:`Data Quality Plugin Documentation <imviz-data-quality>` for more details.
+
+    Only the following attributes and methods are available through the
+    :ref:`public plugin API <plugin-apis>`:
+
+    * :meth:`~jdaviz.core.template_mixin.PluginTemplateMixin.show`
+    * :meth:`~jdaviz.core.template_mixin.PluginTemplateMixin.open_in_tray`
+    * :meth:`~jdaviz.core.template_mixin.PluginTemplateMixin.close_in_tray`
+    * ``science_layer`` (:class:`~jdaviz.core.template_mixin.LayerSelect`)
+    * ``dq_layer`` (:class:`~jdaviz.core.template_mixin.LayerSelect`):
+        data quality layer corresponding to the science data in ``science_layer``
+    * ``dq_layer_opacity``: Opacity of the data quality layer.
+    * ``decoded_flags``: List of decoded flags from the selected flag map.
+    * ``flags_filter``: List of flags to display.
+    * ``flag_map``: Name of the selected flag map.
+    * ``flag_map_definitions_selected``: Dictionary of the selected flag map.
+    """
     template_file = __file__, "data_quality.vue"
 
     irrelevant_msg = Unicode("").tag(sync=True)
@@ -43,7 +61,7 @@ class DataQuality(PluginTemplateMixin, ViewerSelectMixin):
     science_layer_selected = Any().tag(sync=True)  # Any needed for multiselect
 
     # `dq_layer` is the data quality layer corresponding to the
-    # science data in `layer`
+    # science data in `science_layer`
     dq_layer_multiselect = Bool(False).tag(sync=True)
     dq_layer_items = List().tag(sync=True)
     dq_layer_selected = Any().tag(sync=True)  # Any needed for multiselect
diff --git a/jdaviz/configs/default/plugins/data_quality/data_quality.vue b/jdaviz/configs/default/plugins/data_quality/data_quality.vue
index c8b5118eb8..357b7cc760 100644
--- a/jdaviz/configs/default/plugins/data_quality/data_quality.vue
+++ b/jdaviz/configs/default/plugins/data_quality/data_quality.vue
@@ -1,5 +1,8 @@
 <template>
   <j-tray-plugin
+    :config="config"
+    plugin_key="Data Quality"
+    :api_hints_enabled.sync="api_hints_enabled"
     :description="docs_description || 'Data Quality layer visualization options.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#data-quality'"
     @plugin-ping="plugin_ping($event)"
@@ -11,17 +14,21 @@
       :multiselect="science_layer_multiselect"
       :icons="icons"
       :show_if_single_entry="true"
-      :label="'Science data'"
-      :hint="'Select the science data'"
+      label="Science data"
+      api_hint="plg.science_layer ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Select the science data"
     />
 
     <plugin-layer-select
       :items="dq_layer_items"
       :selected.sync="dq_layer_selected"
       :multiselect="dq_layer_multiselect"
-      :label="'Data quality'"
+      label="Data quality"
+      api_hint="plg.dq_layer ="
+      :api_hints_enabled="api_hints_enabled"
       :show_if_single_entry="true"
-      :hint="'Select the data quality'"
+      hint="Select the data quality"
       :icons="icons"
     />
 
@@ -37,7 +44,11 @@
 
     <v-row class="row-no-padding">
       <v-col>
-        <v-subheader class="pl-0 slider-label" style="height: 12px">Data quality relative opacity</v-subheader>
+        <plot-options-slider-header
+          label="Data quality relative opacity"
+          :api_hint="'plg.dq_layer_opacity = ' + dq_layer_opacity"
+          :api_hints_enabled="api_hints_enabled"
+        />
         <glue-throttled-slider wait="300" min="0" max="1" step="0.01" :value.sync="dq_layer_opacity"/>
       </v-col>
     </v-row>
@@ -78,7 +89,7 @@
       </v-col>
     </v-row>
 
-    <v-col style="...">
+    <v-col>
       <v-row>
       <v-select
         :menu-props="{ left: true }"

From 4b19f18afd93dc55c7caec9982281e8c0647bf93 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Thu, 8 Aug 2024 08:37:20 -0400
Subject: [PATCH 24/24] plugin-color-picker and plugin-slider components

---
 jdaviz/app.py                                 |   4 +-
 jdaviz/components/plugin_color_picker.vue     |  39 +++
 ...der_header.vue => plugin_input_header.vue} |   5 +-
 jdaviz/components/plugin_slider.vue           |  25 ++
 .../plugins/data_quality/data_quality.vue     |  83 +++---
 .../default/plugins/line_lists/line_lists.vue |  16 +-
 .../plugins/plot_options/plot_options.vue     | 247 +++++++-----------
 .../imviz/plugins/footprints/footprints.vue   |  40 ++-
 8 files changed, 231 insertions(+), 228 deletions(-)
 create mode 100644 jdaviz/components/plugin_color_picker.vue
 rename jdaviz/components/{plot_options_slider_header.vue => plugin_input_header.vue} (63%)
 create mode 100644 jdaviz/components/plugin_slider.vue

diff --git a/jdaviz/app.py b/jdaviz/app.py
index 77df41cf18..be2c8d0d70 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -148,7 +148,9 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      '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',
-                     'plot-options-slider-header': 'components/plot_options_slider_header.vue',
+                     'plugin-slider': 'components/plugin_slider.vue',
+                     'plugin-color-picker': 'components/plugin_color_picker.vue',
+                     'plugin-input-header': 'components/plugin_input_header.vue',
                      'glue-state-sync-wrapper': 'components/glue_state_sync_wrapper.vue'}
 
 _verbosity_levels = ('debug', 'info', 'warning', 'error')
diff --git a/jdaviz/components/plugin_color_picker.vue b/jdaviz/components/plugin_color_picker.vue
new file mode 100644
index 0000000000..90245516a8
--- /dev/null
+++ b/jdaviz/components/plugin_color_picker.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <plugin-input-header
+      v-if="label && !label_inline"
+      :label="label"
+      :api_hint="api_hint + value"
+      :api_hints_enabled="api_hints_enabled"
+    ></plugin-input-header>
+    <v-menu>
+      <template v-slot:activator="{ on }">
+          <span class="color-menu"
+                :style="`background:${value}; cursor: pointer`"
+                @click.stop="on.click"
+          >&nbsp;</span>
+      </template>
+      <div @click.stop="" style="text-align: end; background-color: white">
+          <v-color-picker :value="value"
+                          @update:color="$emit('color-update', $event)"></v-color-picker>
+      </div>
+    </v-menu>
+    <span
+      v-if="label && label_inline"
+      style="padding-left: 12px; padding-top: 3px"
+      :class="api_hints_enabled ? 'api-hint' : null"
+    >
+      {{  api_hints_enabled ?
+          api_hint + value
+          :
+          label
+      }}
+    </span>
+  </div>
+</template>
+
+<script>
+  module.exports = {
+    props: ['label', 'label_inline', 'api_hint', 'api_hints_enabled', 'value'],
+  };
+</script>
diff --git a/jdaviz/components/plot_options_slider_header.vue b/jdaviz/components/plugin_input_header.vue
similarity index 63%
rename from jdaviz/components/plot_options_slider_header.vue
rename to jdaviz/components/plugin_input_header.vue
index 18cfba8116..38cbd948c8 100644
--- a/jdaviz/components/plot_options_slider_header.vue
+++ b/jdaviz/components/plugin_input_header.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-subheader :class="api_hints_enabled ? 'pl-0 slider-label api-hint' : 'pl-0 slider-label'" style="height: 12px">
+  <v-subheader
+    :class="api_hints_enabled ? 'pl-0 slider-label api-hint' : 'pl-0 slider-label'"
+    style="height: 12px"
+  >
     {{ api_hints_enabled && api_hint ?
       api_hint
       :
diff --git a/jdaviz/components/plugin_slider.vue b/jdaviz/components/plugin_slider.vue
new file mode 100644
index 0000000000..d03da731e0
--- /dev/null
+++ b/jdaviz/components/plugin_slider.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <plugin-input-header
+      :label="label"
+      :api_hint="api_hint && api_hint + value"
+      :api_hints_enabled="api_hints_enabled"
+    ></plugin-input-header>
+    <glue-throttled-slider
+      :wait="wait"
+      :min="min !== undefined ? min : 0"
+      :max="max !== undefined ? max : 1"
+      :step="step !== undefined ? step : 0.01"
+      :value.sync="value"
+      @update:value="$emit('update:value', $event)"
+      hide-details
+      class="no-hint"
+    />
+  </div>
+</template>
+
+<script>
+  module.exports = {
+    props: ['label', 'api_hint', 'api_hints_enabled', 'wait', 'min', 'max', 'step', 'value'],
+  };
+</script>
diff --git a/jdaviz/configs/default/plugins/data_quality/data_quality.vue b/jdaviz/configs/default/plugins/data_quality/data_quality.vue
index 357b7cc760..ffe93d681e 100644
--- a/jdaviz/configs/default/plugins/data_quality/data_quality.vue
+++ b/jdaviz/configs/default/plugins/data_quality/data_quality.vue
@@ -44,12 +44,16 @@
 
     <v-row class="row-no-padding">
       <v-col>
-        <plot-options-slider-header
+        <plugin-slider
           label="Data quality relative opacity"
-          :api_hint="'plg.dq_layer_opacity = ' + dq_layer_opacity"
+          api_hint="plg.dq_layer_opacity = "
           :api_hints_enabled="api_hints_enabled"
+          :wait="300"
+          min="0"
+          max="1"
+          step="0.01"
+          :value.sync="dq_layer_opacity"
         />
-        <glue-throttled-slider wait="300" min="0" max="1" step="0.01" :value.sync="dq_layer_opacity"/>
       </v-col>
     </v-row>
 
@@ -142,49 +146,40 @@
       <v-expansion-panels accordion>
         <v-expansion-panel v-for="(item, index) in decoded_flags" key=":item">
           <div v-if="flagVisible(item, item.decomposed, flags_filter)">
-          <v-expansion-panel-header v-slot="{ open }">
-            <v-row no-gutters align="center" style="...">
-              <v-col cols=1>
-              </v-col>
-                <v-col cols=2>
-                <j-tooltip tipid='plugin-dq-color-picker'>
-                  <v-menu>
-                    <template v-slot:activator="{ on }">
-                        <span class="color-menu"
-                              :style="`background:${item.color}; cursor: pointer`"
-                              @click.stop="on.click"
-                        > </span>
-                    </template>
-                    <div @click.stop="" style="text-align: end; background-color: white">
-                        <v-color-picker v-model="decoded_flags[index].color"
-                                        @update:color="throttledSetColor(index, $event.hexa)">
-                        ></v-color-picker>
-                    </div>
-                  </v-menu>
-                </j-tooltip>
-              </v-col>
-              <v-col cols=8>
-                <div><strong>{{item.flag}}</strong> ({{Object.keys(item.decomposed).join(', ')}})</div>
-              </v-col>
-          </v-row>
-          </v-expansion-panel-header>
-          <v-expansion-panel-content>
-            <v-row no-gutters style="..." align="center">
-              <v-col cols=2 align="left">
-                <v-btn :color="item.show ? 'accent' : 'default'" icon @click="toggleVisibility(index)">
-                  <v-icon>{{item.show ? "mdi-eye" : "mdi-eye-off"}}</v-icon>
-                </v-btn>
+            <v-expansion-panel-header v-slot="{ open }">
+              <v-row no-gutters align="center">
+                <v-col cols=1>
+                </v-col>
+                  <v-col cols=2>
+                  <j-tooltip tipid='plugin-dq-color-picker'>
+                    <plugin-color-picker
+                      :value="decoded_flags[index].color"
+                      @color-update="throttledSetColor(index, $event.hexa)"
+                    />
+                  </j-tooltip>
+                </v-col>
+                <v-col cols=8>
+                  <div><strong>{{item.flag}}</strong> ({{Object.keys(item.decomposed).join(', ')}})</div>
+                </v-col>
+            </v-row>
+            </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-row no-gutters align="center">
+                <v-col cols=2 align="left">
+                  <v-btn :color="item.show ? 'accent' : 'default'" icon @click="toggleVisibility(index)">
+                    <v-icon>{{item.show ? "mdi-eye" : "mdi-eye-off"}}</v-icon>
+                  </v-btn>
+                </v-col>
+              <v-col cols=8 align="left">
+                <v-row v-for="(item, key, index) in item.decomposed">
+                  <span v-if="item.name !== null && item.name.length > 0"><strong>{{item.name}}</strong> ({{key}}): {{item.description}}</span>
+                  <span v-else><strong>{{key}}</strong>: {{item.description}}</span>
+                </v-row>
               </v-col>
-            <v-col cols=8 align="left" style="...">
-              <v-row v-for="(item, key, index) in item.decomposed">
-                <span v-if="item.name !== null && item.name.length > 0"><strong>{{item.name}}</strong> ({{key}}): {{item.description}}</span>
-                <span v-else><strong>{{key}}</strong>: {{item.description}}</span>
               </v-row>
-            </v-col>
-            </v-row>
-          </v-expansion-panel-content>
-        </div>
-        <v-expansion-panel>
+            </v-expansion-panel-content>
+          </div>
+        </v-expansion-panel>
       </v-expansion-panels>
     </v-row>
   </j-tray-plugin>
diff --git a/jdaviz/configs/default/plugins/line_lists/line_lists.vue b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
index 588164b27b..f56880d324 100644
--- a/jdaviz/configs/default/plugins/line_lists/line_lists.vue
+++ b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
@@ -132,18 +132,10 @@
               </v-col>
               <v-col cols=2>
                 <j-tooltip tipid='plugin-line-lists-color-picker'>
-                  <v-menu>
-                    <template v-slot:activator="{ on }">
-                        <span class="linelist-color-menu"
-                              :style="`background:${list_contents[item].color}; cursor: pointer`"
-                              @click.stop="on.click"
-                        >&nbsp;</span>
-                    </template>
-                    <div @click.stop="" style="text-align: end; background-color: white">
-                        <v-color-picker :value="list_contents[item].color"
-                                    @update:color="throttledSetColor({listname:item, color: $event.hexa})"></v-color-picker>
-                    </div>
-                  </v-menu>
+                  <plugin-color-picker
+                    :value="list_contents[item].color"
+                    @color-update="throttledSetColor({listname:item, color: $event.hexa})"
+                  />
                 </j-tooltip>
               </v-col>
               <v-col cols=8>
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 83b21ee6c0..abfec5a735 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -279,38 +279,25 @@
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="subset_visible_value" :sync="subset_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_color')">
-        <div>
-          <v-subheader class="pl-0 slider-label" style="height: 12px; margin-bottom: 4px">
-            {{ api_hints_enabled ?
-              'plg.subset_color = \''+subset_color_value +'\''
-              :
-              'Subset Color'
-            }}
-          </v-subheader>
-          <v-menu>
-            <template v-slot:activator="{ on }">
-                <span class="color-menu"
-                      :style="`background:${subset_color_value}; cursor: pointer`"
-                      @click.stop="on.click"
-                >&nbsp;</span>
-            </template>
-            <div @click.stop="" style="text-align: end; background-color: white">
-                <v-color-picker :value="subset_color_value"
-                                @update:color="throttledSetValue('subset_color_value', $event.hexa)"></v-color-picker>
-            </div>
-          </v-menu>
-        </div>
+        <plugin-color-picker
+          label='Subset Color'
+          api_hint="plg.subset_color = "
+          :api_hints_enabled="api_hints_enabled"
+          :value="subset_color_value"
+          @color-update="throttledSetValue('subset_color_value', $event.hexa)"
+        />
       </glue-state-sync-wrapper>
 
-      <glue-state-sync-wrapper :sync="subset_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_opacity')">
-        <div>
-          <plot-options-slider-header
-              label='Subset Opacity'
-              :api_hint="'plg.subset_opacity = ' + subset_opacity_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-          <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="subset_opacity_value" hide-details class="no-hint" />
-        </div>
+      <glue-state-sync-wrapper v-if="subset_visible_value" :sync="subset_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('subset_opacity')">
+        <plugin-slider
+            label='Subset Opacity'
+            api_hint="plg.subset_opacity = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="1"
+            step="0.01" 
+            :value.sync="subset_opacity_value"
+          />
       </glue-state-sync-wrapper>
 
 
@@ -327,25 +314,13 @@
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_color')">
-        <div>
-          <plot-options-slider-header
-              label='Line Color'
-              :api_hint="'plg.line_color = ' + line_color_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-          <v-menu>
-            <template v-slot:activator="{ on }">
-                <span class="color-menu"
-                      :style="`background:${line_color_value}; cursor: pointer`"
-                      @click.stop="on.click"
-                >&nbsp;</span>
-            </template>
-            <div @click.stop="" style="text-align: end; background-color: white">
-                <v-color-picker :value="line_color_value"
-                                @update:color="throttledSetValue('line_color_value', $event.hexa)"></v-color-picker>
-            </div>
-          </v-menu>
-        </div>
+        <plugin-color-picker
+          label='Line Color'
+          api_hint="plg.line_color = "
+          :api_hints_enabled="api_hints_enabled"
+          :value="line_color_value"
+          @color-update="throttledSetValue('line_color_value', $event.hexa)"
+        />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_width_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_width')">
@@ -357,14 +332,15 @@
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_opacity')">
-        <div>
-          <plot-options-slider-header
-              label='Line Opacity'
-              :api_hint="'plg.line_opacity = ' + line_opacity_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-          <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="line_opacity_value" hide-details class="no-hint" />
-        </div>
+        <plugin-slider
+            label='Line Opacity'
+            api_hint="plg.line_opacity = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="1"
+            step="0.01"
+            :value.sync="line_opacity_value"
+          />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper v-if="line_visible_value  && (!marker_visible_sync.in_subscribed_states || marker_visible_value)" :sync="line_as_steps_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('line_as_steps')">
@@ -389,14 +365,15 @@
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_opacity')">
-          <div>
-            <plot-options-slider-header
-              label='Opacity'
-              :api_hint="'plg.marker_opacity = ' + marker_opacity_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="marker_opacity_value" hide-details class="no-hint" />
-          </div>
+          <plugin-slider
+            label='Opacity'
+            api_hint="plg.marker_opacity = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="1"
+            step="0.01"
+            :value.sync="marker_opacity_value"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_size_mode_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size_mode')">
@@ -411,25 +388,27 @@
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_size_mode_value==='Fixed'" :sync="marker_size_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size')">
-          <div>
-            <plot-options-slider-header
-              label='Size'
-              :api_hint="'plg.marker_size = ' + marker_size_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <glue-throttled-slider wait="300" max="10" step="0.1" :value.sync="marker_size_value" hide-details class="no-hint" />
-          </div>
+          <plugin-slider
+            label='Size'
+            api_hint="plg.marker_size = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="10"
+            step="0.1"
+            :value.sync="marker_size_value"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_size_scale_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size_scale')">
-          <div>
-            <plot-options-slider-header
-              label='Scale'
-              :api_hint="'plg.marker_size_scale = ' + marker_size_scale_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <glue-throttled-slider wait="300" max="10" step="0.1" :value.sync="marker_size_scale_value" hide-details class="no-hint" />
-          </div>
+          <plugin-slider
+            label='Scale'
+            api_hint="plg.marker_size_scale = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="10"
+            step="0.1"
+            :value.sync="marker_size_scale_value"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_size_mode_value!=='Fixed'" :sync="marker_size_col_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_size_col')">
@@ -478,25 +457,13 @@
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_color_mode_value==='Fixed'" :sync="marker_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_color')">
-          <div>
-            <plot-options-slider-header
-              label='Color'
-              :api_hint="'plg.marker_color = ' + marker_color_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <v-menu>
-              <template v-slot:activator="{ on }">
-                  <span class="color-menu"
-                        :style="`background:${marker_color_value}; cursor: pointer`"
-                        @click.stop="on.click"
-                  >&nbsp;</span>
-              </template>
-              <div @click.stop="" style="text-align: end; background-color: white">
-                  <v-color-picker :value="marker_color_value"
-                                  @update:color="throttledSetValue('marker_color_value', $event.hexa)"></v-color-picker>
-              </div>
-            </v-menu>
-          </div>
+          <plugin-color-picker
+            label='Color'
+            api_hint="plg.marker_color = "
+            :api_hints_enabled="api_hints_enabled"
+            :value="marker_color_value"
+            @color-update="throttledSetValue('marker_color_value', $event.hexa)"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_color_mode_value!=='Fixed'" :sync="marker_color_col_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_color_col')">
@@ -597,61 +564,49 @@
 
         </glue-state-sync-wrapper>
         <glue-state-sync-wrapper v-if="image_color_mode_value !== 'Colormaps' || image_color_mode_sync['mixed']" :sync="image_color_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_color')">
-          <div>
-            <plot-options-slider-header
-              label='Image Color'
-              :api_hint="'plg.image_color = ' + image_color_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <v-menu>
-              <template v-slot:activator="{ on }">
-                  <span class="color-menu"
-                        :style="`background:${image_color_value}; cursor: pointer`"
-                        @click.stop="on.click"
-                  >&nbsp;</span>
-              </template>
-              <div @click.stop="" style="text-align: end; background-color: white">
-                  <v-color-picker :value="image_color_value"
-                                  :swatches="swatches_palette"
-                                  show-swatches
-                                  @update:color="throttledSetValue('image_color_value', $event.hexa)"
-                                  ></v-color-picker>
-              </div>
-            </v-menu>
-          </div>
+          <plugin-color-picker
+            label='Image Color'
+            api_hint="plg.image_color = "
+            :api_hints_enabled="api_hints_enabled"
+            :value="image_color_value"
+            @color-update="throttledSetValue('image_color_value', $event.hexa)"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper :sync="image_opacity_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_opacity')">
-          <div>
-            <plot-options-slider-header
-              label='Image Opacity'
-              :api_hint="'plg.image_opacity = ' + image_opacity_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="image_opacity_value" hide-details class="no-hint" />
-          </div>
+          <plugin-slider
+            label='Image Opacity'
+            api_hint="plg.image_opacity = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="1"
+            step="0.01"
+            :value.sync="image_opacity_value"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper :sync="image_contrast_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_contrast')">
-          <div>
-            <plot-options-slider-header
-              label='Contrast'
-              :api_hint="'plg.image_contrast = ' + image_contrast_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <glue-throttled-slider wait="300" max="4" step="0.01" :value.sync="image_contrast_value" hide-details />
-          </div>
+          <plugin-slider
+            label='Contrast'
+            api_hint="plg.image_contrast = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="4"
+            step="0.01"
+            :value.sync="image_contrast_value"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper :sync="image_bias_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('image_bias')">
-          <div>
-            <plot-options-slider-header
-              label='Bias'
-              :api_hint="'plg.image_bias = ' + image_bias_value"
-              :api_hints_enabled="api_hints_enabled"
-            />
-            <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="image_bias_value" hide-details />
-          </div>
+          <plugin-slider
+            label='Bias'
+            api_hint="plg.image_bias = "
+            :api_hints_enabled="api_hints_enabled"
+            wait="300"
+            max="1"
+            step="0.01"
+            :value.sync="image_bias_value"
+          />
         </glue-state-sync-wrapper>
       </div>
 
diff --git a/jdaviz/configs/imviz/plugins/footprints/footprints.vue b/jdaviz/configs/imviz/plugins/footprints/footprints.vue
index a02088a564..d652926c8b 100644
--- a/jdaviz/configs/imviz/plugins/footprints/footprints.vue
+++ b/jdaviz/configs/imviz/plugins/footprints/footprints.vue
@@ -68,34 +68,26 @@
       </v-row>
 
       <v-row>
-          <v-menu>
-            <template v-slot:activator="{ on }">
-                <span class="color-menu"
-                      :style="`background:${color}; cursor: pointer; margin-left: 6px`"
-                      @click.stop="on.click"
-                >&nbsp;</span>
-            </template>
-            <div @click.stop="" style="text-align: end; background-color: white">
-                <v-color-picker :value="color"
-                            @update:color="throttledSetColor($event.hexa)"></v-color-picker>
-            </div>
-          </v-menu>
-        <span style="padding-left: 12px; padding-top: 3px" :class="api_hints_enabled ? 'api-hint' : null">
-          {{  api_hints_enabled ?
-              'plg.color = '+color
-              :
-              'Overlay Color'
-          }}
-        </span>
+        <plugin-color-picker
+          label='Overlay Color'
+          label_inline="true"
+          api_hint="plg.color = "
+          :api_hints_enabled="api_hints_enabled"
+          :value="color"
+          @color-update="throttledSetColor($event.hexa)"
+        />
       </v-row>
-      <div>
-        <plot-options-slider-header
+      <v-row>
+        <plugin-slider
           label="Fill Opacity"
-          :api_hint="'plg.fill_opacity = ' + fill_opacity"
+          api_hint="plg.fill_opacity = "
           :api_hints_enabled="api_hints_enabled"
+          :wait="300"
+          max="1"
+          step="0.01"
+          :value.sync="fill_opacity"
         />
-        <glue-throttled-slider wait="300" max="1" step="0.01" :value.sync="fill_opacity" hide-details class="no-hint" />
-      </div>
+      </v-row>
 
       <j-plugin-section-header>Footprint Definition</j-plugin-section-header>
       <v-alert v-if="!has_pysiaf" type="warning" style="margin-left: -12px; margin-right: -12px">