From 81e940d4e3230657bbf31f28af92f1ec14b832f5 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Mon, 2 Dec 2024 09:51:30 -0500
Subject: [PATCH] data-menu: UI tweaks (#3310)

* data-menu UI improvements
* API hints improved formatting
* fix plt. api hint typos
* custom API icons
* improve dark-theme support

---------

Co-authored-by: Jennifer Kotler <jkotler@stsci.edu>
---
 CHANGES.rst                                   |   2 +-
 jdaviz/app.py                                 |   6 +-
 jdaviz/app.vue                                |   5 +-
 jdaviz/components/data_menu_add.vue           |   3 +-
 jdaviz/components/glue_state_select.vue       |  36 +++++
 jdaviz/components/hover_api_hint.vue          |  32 ++---
 jdaviz/components/plugin_dataset_select.vue   |  10 +-
 jdaviz/components/plugin_editable_select.vue  |  11 ++
 .../components/plugin_file_import_select.vue  |  12 +-
 jdaviz/components/plugin_inline_select.vue    |   1 +
 .../components/plugin_inline_select_item.vue  |  14 +-
 jdaviz/components/plugin_layer_select.vue     |  23 +--
 jdaviz/components/plugin_select.vue           |  87 +++++++++++
 jdaviz/components/plugin_subset_select.vue    |  25 ++--
 jdaviz/components/plugin_viewer_select.vue    |  23 +--
 jdaviz/components/tray_plugin.vue             |   6 -
 .../spectral_extraction.vue                   |  39 +++--
 .../default/plugins/collapse/collapse.vue     |  19 ++-
 .../default/plugins/data_menu/data_menu.py    |   4 +-
 .../default/plugins/data_menu/data_menu.vue   |  26 +++-
 .../plugins/data_quality/data_quality.vue     |  10 +-
 .../configs/default/plugins/export/export.vue | 130 ++++++++---------
 .../gaussian_smooth/gaussian_smooth.vue       |  21 ++-
 .../default/plugins/line_lists/line_lists.vue |   8 +-
 .../plugins/plot_options/plot_options.vue     | 109 +++++++-------
 .../aper_phot_simple/aper_phot_simple.vue     |  18 +--
 .../imviz/plugins/orientation/orientation.vue |   9 +-
 .../ramp_extraction/ramp_extraction.vue       |  18 +--
 .../unit_conversion/unit_conversion.vue       | 106 ++++++--------
 .../spectral_extraction.vue                   | 132 +++++++----------
 jdaviz/core/template_mixin.py                 |   4 +-
 jdaviz/data/icons/api.svg                     | 105 ++++++++++++++
 jdaviz/data/icons/api_lock.svg                | 136 ++++++++++++++++++
 jdaviz/main_styles.vue                        |  28 ++--
 34 files changed, 797 insertions(+), 421 deletions(-)
 create mode 100644 jdaviz/components/glue_state_select.vue
 create mode 100644 jdaviz/components/plugin_select.vue
 create mode 100644 jdaviz/data/icons/api.svg
 create mode 100644 jdaviz/data/icons/api_lock.svg

diff --git a/CHANGES.rst b/CHANGES.rst
index 9873808c38..9ae34fee26 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -4,7 +4,7 @@
 New Features
 ------------
 
-* New design for viewer legend and data-menu. [#3220, #3254, #3263, #3264, #3271, #3272, #3274, #3289]
+* New design for viewer legend and data-menu. [#3220, #3254, #3263, #3264, #3271, #3272, #3274, #3289, #3310]
 
 Cubeviz
 ^^^^^^^
diff --git a/jdaviz/app.py b/jdaviz/app.py
index 556e0279a5..4a8837afb5 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -139,6 +139,7 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      'j-child-layer-icon': 'components/child_layer_icon.vue',
                      'plugin-previews-temp-disabled': 'components/plugin_previews_temp_disabled.vue',  # noqa
                      'plugin-table': 'components/plugin_table.vue',
+                     'plugin-select': 'components/plugin_select.vue',
                      'plugin-dataset-select': 'components/plugin_dataset_select.vue',
                      'plugin-subset-select': 'components/plugin_subset_select.vue',
                      'plugin-viewer-select': 'components/plugin_viewer_select.vue',
@@ -156,6 +157,7 @@ def to_unit(self, data, cid, values, original_units, target_units):
                      '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',
+                     'glue-state-select': 'components/glue_state_select.vue',
                      'data-menu-add': 'components/data_menu_add.vue',
                      'data-menu-remove': 'components/data_menu_remove.vue',
                      'data-menu-subset-edit': 'components/data_menu_subset_edit.vue',
@@ -232,7 +234,9 @@ class ApplicationState(State):
         'radialtocheck': read_icon(os.path.join(ICON_DIR, 'radialtocheck.svg'), 'svg+xml'),
         'checktoradial': read_icon(os.path.join(ICON_DIR, 'checktoradial.svg'), 'svg+xml'),
         'nuer': read_icon(os.path.join(ICON_DIR, 'right-east.svg'), 'svg+xml'),
-        'nuel': read_icon(os.path.join(ICON_DIR, 'left-east.svg'), 'svg+xml')
+        'nuel': read_icon(os.path.join(ICON_DIR, 'left-east.svg'), 'svg+xml'),
+        'api': read_icon(os.path.join(ICON_DIR, 'api.svg'), 'svg+xml'),
+        'api-lock': read_icon(os.path.join(ICON_DIR, 'api_lock.svg'), 'svg+xml'),
     }, docstring="Custom application icons")
 
     viewer_icons = DictCallbackProperty({}, docstring="Indexed icons (numbers) for viewers across the app")  # noqa
diff --git a/jdaviz/app.vue b/jdaviz/app.vue
index ce756732ef..3a529d5123 100644
--- a/jdaviz/app.vue
+++ b/jdaviz/app.vue
@@ -57,7 +57,7 @@
         </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons && checkNotebookContext()" tipid="app-api-hints">
           <v-btn icon @click="state.show_api_hints = !state.show_api_hints" :class="{active : state.show_api_hints}">
-            <v-icon medium style="padding-top: 2px">mdi-code-tags</v-icon>
+            <img :src="state.icons['api']" width="24" class="invert-if-dark" style="opacity: 1.0"/>
           </v-btn>
         </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons" tipid="app-snackbar-history">
@@ -125,6 +125,9 @@
                             {{ trayItem.label }}
                           </j-tooltip>
                         </v-list-item-title>
+                        <v-list-item-subtitle v-if="state.show_api_hints" style="white-space: normal; font-size: 8pt; padding-top: 4px; padding-bottom: 4px" class="api-hint">
+                          <span class="api-hint" :style="state.tray_items_open.includes(index) ? 'font-weight: bold' : null">plg = {{  config }}.plugins['{{ trayItem.label }}']</span>
+                        </v-list-item-subtitle>
                         <v-list-item-subtitle style="white-space: normal; font-size: 8pt">
                           {{ trayItem.tray_item_description }}
                         </v-list-item-subtitle>
diff --git a/jdaviz/components/data_menu_add.vue b/jdaviz/components/data_menu_add.vue
index 2d41844281..21612b869e 100644
--- a/jdaviz/components/data_menu_add.vue
+++ b/jdaviz/components/data_menu_add.vue
@@ -66,6 +66,7 @@
         v-if="api_hints_enabled"
         :hover_api_hint.sync="hover_api_hint"
         :lock_hover_api_hint.sync="lock_hover_api_hint"
+        :icons="icons"
       />
     </v-list>
   </v-menu>
@@ -80,6 +81,6 @@ module.exports = {
         lock_hover_api_hint: false,
       }
     },
-  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled'],
+  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled', 'icons'],
 };
 </script>
\ No newline at end of file
diff --git a/jdaviz/components/glue_state_select.vue b/jdaviz/components/glue_state_select.vue
new file mode 100644
index 0000000000..3cae088f0b
--- /dev/null
+++ b/jdaviz/components/glue_state_select.vue
@@ -0,0 +1,36 @@
+<template>
+  <v-select
+    attach
+    :menu-props="{ left: true }"
+    :items="items"
+    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 no-hint' : 'no-hint'"
+    dense
+  >
+    <template v-slot:selection="{ item, index }">
+      <span :class="api_hints_enabled ? 'api-hint' : null">
+        {{ api_hints_enabled ?
+          '\'' + item.text + '\''
+          :
+          item.text
+        }}
+      </span>
+    </template>
+  </v-select>
+</template>
+
+<script>
+module.exports = {
+  props: ['items', 'selected', 'label', 'api_hint', 'api_hints_enabled']
+};
+</script>
+
+<style scoped>
+  .v-select__selections {
+    flex-wrap: nowrap !important;
+    display: block !important;
+    margin-bottom: -32px;
+  }
+</style>
diff --git a/jdaviz/components/hover_api_hint.vue b/jdaviz/components/hover_api_hint.vue
index 59fba111d8..5bf9e8a0a0 100644
--- a/jdaviz/components/hover_api_hint.vue
+++ b/jdaviz/components/hover_api_hint.vue
@@ -6,28 +6,22 @@
         {{ hover_api_hint }}
         </span>
     </v-list-item-content>
-    <v-list-item-action>
+    <v-list-item-action style="margin-right: -8px">
       <j-tooltip
         tooltipcontent="toggle whether API hints persist after hovering to allow for copying text"
       >
-        <v-badge
-          overlap
-          bottom
-          color="#007BA1"
-          :icon="lock_hover_api_hint ? 'mdi-lock-outline' : 'mdi-lock-open-outline'"
+        <v-btn
+          small
+          text
+          width="24"
+          :style="lock_hover_api_hint ? 'background-color: #c7510996 !important' : null"
+          @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
         >
-          <v-btn
-            icon
-            small
-            @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
-          >
-            <v-icon
-              :color="lock_hover_api_hint ? '#007BA1' : null"
-            >
-              mdi-code-tags
-            </v-icon>
-          </v-btn>
-        </v-badge>
+          <img
+            :src="icons['api-lock']"
+            width="20"
+            class="invert-if-dark"/>
+        </v-btn>
       </j-tooltip>
     </v-list-item-action>
   </v-list-item>
@@ -35,6 +29,6 @@
 
 <script>
   module.exports = {
-    props: ['hover_api_hint', 'lock_hover_api_hint'],
+    props: ['hover_api_hint', 'lock_hover_api_hint', 'icons'],
   };
 </script>
\ No newline at end of file
diff --git a/jdaviz/components/plugin_dataset_select.vue b/jdaviz/components/plugin_dataset_select.vue
index df5f5ad0eb..40c8cc53ae 100644
--- a/jdaviz/components/plugin_dataset_select.vue
+++ b/jdaviz/components/plugin_dataset_select.vue
@@ -24,9 +24,13 @@
               {{ data.item.label }}
             </span>
           </v-chip>
-          <span v-else>
-            <j-layer-viewer-icon v-if="data.item.icon" span_style="margin-right: 4px" :icon="data.item.icon" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
-            {{ data.item.label }}
+          <span v-else :class="api_hints_enabled ? 'api-hint' : null">
+            <j-layer-viewer-icon v-if="data.item.icon && !api_hints_enabled" span_style="margin-right: 4px" :icon="data.item.icon" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
+            {{ api_hints_enabled ?
+              '\'' + data.item.label + '\''
+              :
+              data.item.label
+            }}
           </span>
         </div>
       </template>
diff --git a/jdaviz/components/plugin_editable_select.vue b/jdaviz/components/plugin_editable_select.vue
index 97694883be..5069c3ec16 100644
--- a/jdaviz/components/plugin_editable_select.vue
+++ b/jdaviz/components/plugin_editable_select.vue
@@ -16,6 +16,17 @@
       item-value="label"
       persistent-hint
     >
+      <template slot="selection" slot-scope="data">
+        <div class="single-line" style="width: 100%">
+          <span :class="api_hints_enabled ? 'api-hint' : null">
+            {{ api_hints_enabled ?
+              '\'' + data.item.label + '\''
+              :
+              data.item.label
+            }}
+          </span>
+        </div>
+      </template>
       <template v-slot:append>
         <v-icon style="cursor: pointer">mdi-menu-down</v-icon>
         <j-tooltip tooltipcontent="rename">
diff --git a/jdaviz/components/plugin_file_import_select.vue b/jdaviz/components/plugin_file_import_select.vue
index 9c8bc6d1fd..d037d025c0 100644
--- a/jdaviz/components/plugin_file_import_select.vue
+++ b/jdaviz/components/plugin_file_import_select.vue
@@ -11,7 +11,17 @@
         :class="api_hints_enabled && api_hint ? 'api-hint' : null"
         :hint="hint"
         persistent-hint
-      ></v-select>
+      >
+        <template v-slot:selection="{ item }">
+          <span :class="api_hints_enabled ? 'api-hint' : null">
+            {{ api_hints_enabled ?
+              '\'' + item + '\''
+              :
+              item
+            }}
+          </span>
+        </template>
+      </v-select>
       <v-chip v-if="selected === 'From File...'"
         close
         close-icon="mdi-close"
diff --git a/jdaviz/components/plugin_inline_select.vue b/jdaviz/components/plugin_inline_select.vue
index e249228c00..01c08d4b16 100644
--- a/jdaviz/components/plugin_inline_select.vue
+++ b/jdaviz/components/plugin_inline_select.vue
@@ -12,6 +12,7 @@
         @update:selected="$emit('update:selected', $event)"
         :multiselect="multiselect"
         :single_select_allow_blank="single_select_allow_blank"
+        :api_hints_enabled="api_hints_enabled"
       ></plugin-inline-select-item>
     </v-row>
   </div>
diff --git a/jdaviz/components/plugin_inline_select_item.vue b/jdaviz/components/plugin_inline_select_item.vue
index fe6237a3b6..bffb66fceb 100644
--- a/jdaviz/components/plugin_inline_select_item.vue
+++ b/jdaviz/components/plugin_inline_select_item.vue
@@ -8,19 +8,23 @@
         <v-icon v-if="multiselect">{{isSelected() ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline"}}</v-icon>
         <v-icon v-else>{{isSelected() ? "mdi-radiobox-marked" : "mdi-radiobox-blank"}}</v-icon>
     </v-btn>
-    <span>
-      <j-layer-viewer-icon v-if="item.icon" :icon="item.icon" :prevent_invert_if_dark="false"></j-layer-viewer-icon>
-      <v-icon v-else-if="item.color && item.type" left :color="item.color">
+    <span :class="api_hints_enabled ? 'api-hint' : null">
+      <j-layer-viewer-icon v-if="item.icon && !api_hints_enabled" :icon="item.icon" :prevent_invert_if_dark="false"></j-layer-viewer-icon>
+      <v-icon v-else-if="item.color && item.type && !api_hints_enabled" left :color="item.color">
         {{ item.type=='spectral' ? 'mdi-chart-bell-curve' : 'mdi-chart-scatter-plot' }}
       </v-icon>
-      {{ item.label }}
+      {{ api_hints_enabled ?
+          '\'' + item.label + '\''
+          :
+          item.label
+      }}
     </span>
   </div>
 </template>
 
 <script>
 module.exports = {
-  props: ['item', 'selected', 'multiselect', 'single_select_allow_blank'],
+  props: ['item', 'selected', 'multiselect', 'single_select_allow_blank', 'api_hints_enabled'],
   methods: {
     isSelected() {
       if (this.multiselect) {
diff --git a/jdaviz/components/plugin_layer_select.vue b/jdaviz/components/plugin_layer_select.vue
index 6e7ead1ae5..72c5079aed 100644
--- a/jdaviz/components/plugin_layer_select.vue
+++ b/jdaviz/components/plugin_layer_select.vue
@@ -12,23 +12,30 @@
       :hint="hint ? hint : 'Select layer.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
-      :chips="multiselect"
+      :chips="multiselect && !api_hints_enabled"
       item-text="label"
       item-value="label"
       :persistent-hint="!disable_persistent_hint"
       :hide-details="disable_persistent_hint"
     >
-    <template slot="selection" slot-scope="data">
+    <template v-slot:selection="{ item, index }">
       <div class="single-line" style="width: 100%">
-        <v-chip v-if="multiselect" style="width: calc(100% - 10px)">
+        <span v-if="api_hints_enabled" class="api-hint" :style="index > 0 ? 'display: none' : null">
+          {{ multiselect ?
+            selected
+            :
+            '\'' + selected + '\''
+          }}
+        </span>
+        <v-chip v-else-if="multiselect" style="width: calc(100% - 10px)">
           <span>
-            <j-layer-viewer-icon v-if="data.item.icon" :icon="data.item.icon" :icons="icons" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
-            {{ data.item.label }}
+            <j-layer-viewer-icon v-if="data.item.icon" :icon="item.icon" :icons="icons" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
+            {{ item.label }}
           </span>
         </v-chip>
-        <span v-else>
-          <j-layer-viewer-icon v-if="data.item.icon" span_style="margin-right: 4px" :icon="data.item.icon" :icons="icons" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
-          {{ data.item.label }}
+        <span v-else >
+          <j-layer-viewer-icon v-if="item.icon" span_style="margin-right: 4px" :icon="item.icon" :icons="icons" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
+          {{ item.label }}
         </span>
       </div>
     </template>
diff --git a/jdaviz/components/plugin_select.vue b/jdaviz/components/plugin_select.vue
new file mode 100644
index 0000000000..5e75c07721
--- /dev/null
+++ b/jdaviz/components/plugin_select.vue
@@ -0,0 +1,87 @@
+<template>
+  <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_enabled && api_hint ? api_hint : label"
+      :class="api_hints_enabled && api_hint ? 'api-hint' : null"
+      :hint="hint"
+      :rules="rules ? rules : []"
+      :multiple="multiselect"
+      :chips="multiselect && !api_hints_enabled"
+      :disabled="disabled"
+      :dense="dense"
+      item-text="label"
+      item-value="label"
+      persistent-hint
+    >
+      <template v-slot:selection="{ item, index }">
+        <div class="single-line" style="width: 100%">
+          <span v-if="api_hints_enabled" class="api-hint" :style="index > 0 ? 'display: none' : null">
+            {{ multiselect ?
+              selected
+              :
+              '\'' + selected + '\''
+            }}
+          </span>
+          <v-chip v-else-if="multiselect" style="width: calc(100% - 10px)">
+            <span>
+              {{ item }}
+            </span>
+          </v-chip>
+          <span v-else>
+            {{ item }}
+          </span>
+        </div>
+      </template>
+      <template v-slot:prepend-item v-if="multiselect">
+        <v-list-item
+        ripple
+        @mousedown.prevent
+        @click="() => {if (selected.length < items.length) { $emit('update:selected', items.map((item) => {item.label || item.text}))} else {$emit('update:selected', [])}}"
+        >
+        <v-list-item-action>
+          <v-icon>
+            {{ selected.length == items.length ? 'mdi-close-box' : selected.length ? 'mdi-minus-box' : 'mdi-checkbox-blank-outline' }}
+          </v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ selected.length < items.length ? "Select All" : "Clear All" }}
+          </v-list-item-title>
+        </v-list-item-content>
+        </v-list-item>
+        <v-divider class="mt-2"></v-divider>
+      </template>
+      <template v-slot:item="{ item }">
+        <span style="margin-top: 8px; margin-bottom: 0px">
+          {{ item }}
+        </span>
+      </template>
+    </v-select>
+    <slot> </slot>
+  </v-row>
+</template>
+
+<script>
+module.exports = {
+  props: ['items', 'selected', 'label', 'hint', 'rules', 'show_if_single_entry', 'multiselect',
+          'api_hint', 'api_hints_enabled', 'dense', 'disabled']
+};
+</script>
+
+<style scoped>
+  .v-select__selections {
+    flex-wrap: nowrap !important;
+    display: block !important;
+    margin-bottom: -32px;
+  }
+  .single-line {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+  }
+</style>
diff --git a/jdaviz/components/plugin_subset_select.vue b/jdaviz/components/plugin_subset_select.vue
index 472a449aff..072523e832 100644
--- a/jdaviz/components/plugin_subset_select.vue
+++ b/jdaviz/components/plugin_subset_select.vue
@@ -12,26 +12,33 @@
       :hint="hint ? hint : 'Select subset.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
-      :chips="multiselect"
+      :chips="multiselect && !api_hints_enabled"
       item-text="label"
       item-value="label"
       persistent-hint
     >
-      <template slot="selection" slot-scope="data">
+      <template v-slot:selection="{ item, index }">
         <div class="single-line" style="width: 100%">
-          <v-chip v-if="multiselect" style="width: calc(100% - 10px)">
+          <span v-if="api_hints_enabled" class="api-hint" :style="index > 0 ? 'display: none' : null">
+            {{ multiselect ?
+              selected
+              :
+              '\'' + selected + '\''
+            }}
+          </span>
+          <v-chip v-else-if="multiselect" style="width: calc(100% - 10px)">
             <span>
-              <v-icon v-if="data.item.color" left :color="data.item.color">
-                {{ data.item.type=='spectral' ? 'mdi-chart-bell-curve' : 'mdi-chart-scatter-plot' }}
+              <v-icon v-if="item.color" left :color="item.color">
+                {{ item.type=='spectral' ? 'mdi-chart-bell-curve' : 'mdi-chart-scatter-plot' }}
               </v-icon>
-              {{ data.item.label }}
+              {{ item.label }}
             </span>
           </v-chip>
           <span v-else>
-            <v-icon v-if="data.item.color" left :color="data.item.color">
-              {{ data.item.type=='spectral' ? 'mdi-chart-bell-curve' : 'mdi-chart-scatter-plot' }}
+            <v-icon v-if="item.color" left :color="item.color">
+              {{ item.type=='spectral' ? 'mdi-chart-bell-curve' : 'mdi-chart-scatter-plot' }}
             </v-icon>
-            {{ data.item.label }}
+            {{ item.label }}
           </span>
         </div>
       </template>
diff --git a/jdaviz/components/plugin_viewer_select.vue b/jdaviz/components/plugin_viewer_select.vue
index a20dd85131..bd791ceb82 100644
--- a/jdaviz/components/plugin_viewer_select.vue
+++ b/jdaviz/components/plugin_viewer_select.vue
@@ -28,22 +28,29 @@
       :hint="hint ? hint : 'Select viewer.'"
       :rules="rules ? rules : []"
       :multiple="multiselect"
-      :chips="multiselect"
+      :chips="multiselect && !api_hints_enabled"
       item-text="label"
       item-value="label"
       persistent-hint
     >
-    <template slot="selection" slot-scope="data">
+    <template v-slot:selection="{ item, index }">
       <div class="single-line" style="width: 100%">
-        <v-chip v-if="multiselect" style="width: calc(100% - 20px)">
+        <span v-if="api_hints_enabled" class="api-hint" :style="index > 0 ? 'display: none' : null">
+          {{ multiselect ?
+            selected
+            :
+            '\'' + selected + '\''
+          }}
+        </span>
+        <v-chip v-else-if="multiselect" style="width: calc(100% - 20px)">
           <span>
-            <j-layer-viewer-icon :icon="data.item.icon" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
-            {{ data.item.label }}
+            <j-layer-viewer-icon v-if="item.icon" :icon="item.icon" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
+            {{ item.label }}
           </span>
         </v-chip>
-        <span v-else>
-          <j-layer-viewer-icon span_style="margin-right: 4px" :icon="data.item.icon" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
-          {{ data.item.label }}
+        <span v-else >
+          <j-layer-viewer-icon v-if="item.icon" span_style="margin-right: 4px" :icon="item.icon" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
+          {{ item.label }}
         </span>
       </div>
     </template>
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index fe553e3bfe..8056e887d6 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -12,12 +12,6 @@
       </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>
diff --git a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
index a9a910d9c6..ae4d7bc4b4 100644
--- a/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
+++ b/jdaviz/configs/cubeviz/plugins/spectral_extraction/spectral_extraction.vue
@@ -202,35 +202,30 @@
 
       <div v-if="((aperture_selected === 'Entire Cube' && bg_selected !== 'None') || aperture_selected_validity.is_aperture)
                  && (bg_selected === 'None' || bg_selected_validity.is_aperture)">
-        <v-row>
-          <v-select
-            attach
-            :items="aperture_method_items.map(i => i.label)"
-            v-model="aperture_method_selected"
-            :label="api_hints_enabled ? 'plg.aperture_method =' : 'Aperture masking method'"
-            :class="api_hints_enabled ? 'api-hint' : null"
-            :hint="'Extract '+resulting_product_name+' using an aperture masking method in place of the subset mask.'"
-            persistent-hint
-            ></v-select>
+        <plugin-select
+          :items="aperture_method_items.map(i => i.label)"
+          :selected.sync="aperture_method_selected"
+          label="Aperture masking method"
+          api_hint="plg.aperture_method ="
+          :api_hints_enabled="api_hints_enabled"
+          :hint="'Extract '+resulting_product_name+' using an aperture masking method in place of the subset mask.'"
+        >
           <j-docs-link>
             See the <j-external-link link='https://photutils.readthedocs.io/en/stable/aperture.html#aperture-and-pixel-overlap'
             linktext='photutils docs'></j-external-link>
             for more details on aperture masking methods.
           </j-docs-link>
-        </v-row>
+        </plugin-select>
       </div>
 
-      <v-row>
-        <v-select
-          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>
-      </v-row>
+      <plugin-select
+        :items="function_items.map(i => i.label)"
+        :selected.sync="function_selected"
+        label="Function"
+        api_hint="plg.function ="
+        :api_hints_enabled="api_hints_enabled"
+        :hint="'Function to apply to data in \''+aperture_selected+'\'.'"
+      />
       <v-row v-if="conflicting_aperture_and_function">
         <span class="v-messages v-messages__message text--secondary" style="color: red !important">
           {{conflicting_aperture_error_message}}
diff --git a/jdaviz/configs/default/plugins/collapse/collapse.vue b/jdaviz/configs/default/plugins/collapse/collapse.vue
index 02e6fa1df0..f8f2aa6258 100644
--- a/jdaviz/configs/default/plugins/collapse/collapse.vue
+++ b/jdaviz/configs/default/plugins/collapse/collapse.vue
@@ -18,17 +18,14 @@
       hint="Select the data set to collapse."
     />
 
-    <v-row>
-      <v-select
-        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>
-    </v-row>
+    <plugin-select
+      :items="function_items.map(i => i.label)"
+      :selected.sync="function_selected"
+      label="Function"
+      api_hint="plg.function ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Function to use in the collapse."
+    />
 
     <plugin-subset-select
       :items="spectral_subset_items"
diff --git a/jdaviz/configs/default/plugins/data_menu/data_menu.py b/jdaviz/configs/default/plugins/data_menu/data_menu.py
index 65068bb73b..8a0fab6e22 100644
--- a/jdaviz/configs/default/plugins/data_menu/data_menu.py
+++ b/jdaviz/configs/default/plugins/data_menu/data_menu.py
@@ -297,7 +297,7 @@ def _layers_changed(self, event={}):
             self.delete_tooltip = "Select layer(s) to delete"
             self.delete_enabled = False
         else:
-            self.delete_tooltip = f"Remove selected {selected_repr}..."
+            self.delete_tooltip = f"Remove selected {selected_repr}"
             self.delete_enabled = True
 
         # delete from entire app rules
@@ -329,7 +329,7 @@ def _layers_changed(self, event={}):
         # subset edit rules
         if self.selected_n_subsets == 1 and self.selected_n_layers == 1:
             self.subset_edit_enabled = True
-            self.subset_edit_tooltip = f"Edit {self.layer_selected[0]}..."
+            self.subset_edit_tooltip = f"Edit {self.layer_selected[0]}"
         else:
             self.subset_edit_enabled = False
             if self.selected_n_subsets == 0:
diff --git a/jdaviz/configs/default/plugins/data_menu/data_menu.vue b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
index 0a031f59b3..83e386a6c2 100644
--- a/jdaviz/configs/default/plugins/data_menu/data_menu.vue
+++ b/jdaviz/configs/default/plugins/data_menu/data_menu.vue
@@ -94,8 +94,9 @@
                     style="cursor: pointer; display: inline-block; height: 100%; vertical-align: bottom;"
                     @click="() => {open_orientation_plugin()}"
                   >
-                    <v-icon style="margin-right: 8px">mdi-compass-outline</v-icon>
-                    <span v-if="!orientation_align_by_wcs">linked by pixel</span>
+                    <v-icon class="invert-if-dark" style="margin-right: 8px">mdi-compass-outline</v-icon>
+                    <label v-if="!orientation_align_by_wcs" style="font-size: 12px; line-height: 20px; color: rgba(0, 0, 0, 0.6); position: absolute; top: -5px">Orientation</label>
+                    <span v-if="!orientation_align_by_wcs" class="invert-if-dark" style="position: absolute; margin-top: 12px">linked by pixel</span>
                   </span>
                 </j-tooltip>
                 <v-select
@@ -104,17 +105,21 @@
                   :items="orientation_layer_items"
                   v-model="orientation_layer_selected"
                   :label="api_hints_enabled ? 'dm.orientation = ' : 'Orientation'" 
-                  :class="api_hints_enabled ? 'api-hint api-hint-invert-color' : ''" 
+                  :class="api_hints_enabled ? 'api-hint api-hint-invert-color' : 'invert-if-dark'" 
                   item-text="label"
                   item-value="label"
                   :hide-details="true"
-                  style="padding-top: 8px !important; display: inline-block; width: 212px"
+                  style="padding-top: 8px !important; padding-bottom: 4px !important; display: inline-block; width: 212px"
                 >
                   <template slot="selection" slot-scope="data">
                     <div class="single-line" style="width: 100%">
-                      <span>
-                        <j-layer-viewer-icon v-if="data.item.icon" span_style="margin-right: 4px" :icon="data.item.icon" :icons="icons" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
-                        {{ data.item.label }}
+                      <span :class="api_hints_enabled ? 'api-hint api-hint-invert-color' : null">
+                        <j-layer-viewer-icon v-if="data.item.icon && !api_hints_enabled" span_style="margin-right: 4px" :icon="data.item.icon" :icons="icons" :prevent_invert_if_dark="true"></j-layer-viewer-icon>
+                        {{ api_hints_enabled ?
+                          '\'' + data.item.label + '\''
+                          :
+                          data.item.label
+                        }}
                       </span>
                     </div>
                   </template>
@@ -137,6 +142,7 @@
                   :subset_tools="subset_tools"
                   :loaded_n_data="loaded_n_data"
                   :api_hints_enabled="api_hints_enabled"
+                  :icons="icons"
                   @add-data="(data_label) => {add_data_to_viewer({data_label: data_label})}"
                   @create-subset="(subset_type) => {create_subset({subset_type: subset_type}); data_menu_open = false}"
                 >
@@ -204,6 +210,7 @@
               v-if="api_hints_enabled" 
               :hover_api_hint.sync="hover_api_hint" 
               :lock_hover_api_hint.sync="lock_hover_api_hint" 
+              :icons="icons"
             /> 
             <v-list-item class="dm-footer" v-if="loaded_n_data > 0">
               <v-list-item-content style="display: inline-block">
@@ -371,6 +378,11 @@
   .v-list-item__icon {
     margin-top: 6px !important;
   }
+  .layer-select {
+    /* spacing between entries so selections are more apparent */
+    margin-top: 1px !important;
+    margin-bottom: 1px !important;
+  }
   .layer-select:nth-child(even) {
     /* alternating row colors */
     background-color: #f1f2f85a;
diff --git a/jdaviz/configs/default/plugins/data_quality/data_quality.vue b/jdaviz/configs/default/plugins/data_quality/data_quality.vue
index c85603727f..004f1bf5de 100644
--- a/jdaviz/configs/default/plugins/data_quality/data_quality.vue
+++ b/jdaviz/configs/default/plugins/data_quality/data_quality.vue
@@ -32,15 +32,11 @@
       :icons="icons"
     />
 
-    <v-row>
-    <v-select
-      attach
-      :menu-props="{ left: true }"
+    <plugin-select
       :items="flag_map_items"
-      v-model="flag_map_selected"
+      :selected.sync="flag_map_selected"
       label="Flag definitions"
-    ></v-select>
-    </v-row>
+    />
 
     <v-row class="row-no-padding">
       <v-col>
diff --git a/jdaviz/configs/default/plugins/export/export.vue b/jdaviz/configs/default/plugins/export/export.vue
index 75efb7fb10..c932592eb7 100644
--- a/jdaviz/configs/default/plugins/export/export.vue
+++ b/jdaviz/configs/default/plugins/export/export.vue
@@ -30,17 +30,17 @@
       >
       </plugin-inline-select>
       <v-row class="row-min-bottom-padding">
-        <v-select
-          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
-        >
-        </v-select>
+        <div class="category-content">
+          <plugin-select
+            :items="viewer_format_items.map(i => i.label)"
+            :selected.sync="viewer_format_selected"
+            label="Format"
+            api_hint="plg.viewer_format ="
+            :api_hints_enabled="api_hints_enabled"
+            hint="Image format for exporting viewers."
+            :disabled="viewer_selected.length == 0"
+          />
+        </div>
       </v-row>
       <v-row v-if="viewer_invalid_msg.length > 0">
         <span class="category-content v-messages v-messages__message text--secondary" style="color: red !important">
@@ -116,17 +116,17 @@
         </span>
       </v-row>
       <v-row class="row-min-bottom-padding">
-          <v-select
-            attach
-            v-model="dataset_format_selected"
+        <div class="category-content">
+          <plugin-select
             :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'"
+            :selected.sync="dataset_format_selected"
+            label="Format"
+            api_hint="plg.dataset_format ="
+            :api_hints_enabled="api_hints_enabled"
             hint="Format for exporting datasets."
             :disabled="dataset_selected.length == 0"
-            persistent-hint
-          >
-          </v-select>
+          />
+        </div>
       </v-row>
     </div>
 
@@ -152,19 +152,17 @@
       </v-row>
 
       <v-row class="row-min-bottom-padding">
-        <v-select
-          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
-        >
-        </v-select>
+        <div class="category-content">
+          <plugin-select
+            :items="subset_format_items.map(i => i.label)"
+            :selected.sync="subset_format_selected"
+            label="Format"
+            api_hint="plg.subset_format ="
+            :api_hints_enabled="api_hints_enabled"
+            hint="Format for exporting subsets."
+            :disabled="subset_selected == null || subset_selected.length == 0"
+          />
+        </div>
       </v-row>
     </div>
 
@@ -183,17 +181,17 @@
       >
       </plugin-inline-select>
       <v-row class="row-min-bottom-padding">
-        <v-select
-          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
-        >
-        </v-select>
+        <div class="category-content">
+          <plugin-select
+            :items="plugin_table_format_items.map(i => i.label)"
+            :selected.sync="plugin_table_format_selected"
+            label="Format"
+            api_hint="plg.table_format ="
+            :api_hints_enabled="api_hints_enabled"
+            hint="File format for exporting plugin tables."
+            :disabled="plugin_table_selected.length == 0"
+          />
+        </div>
       </v-row>
     </div>
 
@@ -216,17 +214,17 @@
           style="position: absolute; left: -100%"
           :widget="plugin_plot_selected_widget"/>
       <v-row class="row-min-bottom-padding">
-        <v-select
-          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
-        >
-        </v-select>
+        <div class="category-content">
+          <plugin-select
+            :items="plugin_plot_format_items.map(i => i.label)"
+            :selected.sync="plugin_plot_format_selected"
+            label="Format"
+            api_hint="plg.plugin_plot_format ="
+            :api_hints_enabled="api_hints_enabled"
+            hint="File format for exporting plugin plots."
+            :disabled="plugin_plot_selected.length == 0"
+          />
+        </div>
       </v-row>
     </div>
 
@@ -251,7 +249,7 @@
       :auto.sync="filename_auto"
       :invalid_msg="filename_invalid_msg"
       label="Filename"
-      api_hint="plg.filename ="
+      :api_hint="'plg.filename = \''+filename_value+'\''"
       :api_hints_enabled="api_hints_enabled"
       hint="Export to a file on disk."
     ></plugin-auto-label>
@@ -320,19 +318,21 @@
 
 <style scoped>
   .export-category {
-   margin-top: 24px;
-   margin-left: 20px;
-   margin-right: 20px;
-   display: block;
-   text-align: center;
-   overflow: hidden;
-   white-space: nowrap;
-   text-transform: uppercase;
-   color: gray;
-   font-weight: 500;
+    margin-top: 24px;
+    margin-left: 20px;
+    margin-right: 20px;
+    display: block;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-transform: uppercase;
+    color: gray;
+    font-weight: 500;
   }
   .category-content {
     margin-left: 32px;
+    width: 100%;
+    padding-right: 24px;
   }
 
 </style>
diff --git a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
index b4c90f3b39..c27712e088 100644
--- a/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
+++ b/jdaviz/configs/default/plugins/gaussian_smooth/gaussian_smooth.vue
@@ -8,18 +8,15 @@
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
-      <v-row v-if="show_modes">
-        <v-select
-          :menu-props="{ left: true }"
-          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
-        ></v-select>
-      </v-row>
+      <plugin-select
+        v-if="show_modes"
+        :items="mode_items.map(i => i.label)"
+        :selected.sync="mode_selected"
+        label="Mode"
+        api_hint="plg.mode ="
+        :api_hints_enabled="api_hints_enabled"
+        hint="Smooth data spectrally or spatially."
+      />
 
       <!-- for mosviz, the entries change on row change
            for cubeviz, the entries change when toggling "cube fit"
diff --git a/jdaviz/configs/default/plugins/line_lists/line_lists.vue b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
index 0c65aabb54..e0edce6f55 100644
--- a/jdaviz/configs/default/plugins/line_lists/line_lists.vue
+++ b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
@@ -172,14 +172,12 @@
 
               <v-row class="row-min-bottom-padding" style="display: block">
                 <j-tooltip tipid='plugin-line-lists-custom-unit'>
-                    <v-select
-                      :menu-props="{ left: true }"
-                      attach
+                    <plugin-select
                       :items="custom_unit_choices"
-                      v-model="custom_unit"
+                      :selected.sync="custom_unit"
                       label="Unit"
                       dense
-                    ></v-select>
+                    />
                 </j-tooltip>
               </v-row>
 
diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index c00ccad006..04a295705f 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -142,8 +142,12 @@
           dense
         >
           <template v-slot:selection="{ item }">
-            <span>
-              {{ item.text }}
+            <span :class="api_hints_enabled ? 'api-hint' : null">
+              {{ api_hints_enabled ?
+                '\'' + item.text + '\''
+                :
+                item.text
+              }}
             </span>
           </template>
           <template v-slot:item="{ item }">
@@ -182,7 +186,7 @@
       <plugin-switch
         :value.sync="axes_visible_value"
         label="Show axes"
-        api_hint="plt.axes_visible = "
+        api_hint="plg.axes_visible = "
         :api_hints_enabled="api_hints_enabled"
         />
     </glue-state-sync-wrapper>
@@ -357,14 +361,13 @@
         </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')">
-          <v-select
-            attach
-            :menu-props="{ left: true }"
+          <glue-state-select
             :items="marker_size_mode_sync.choices"
-            v-model="marker_size_mode_value"
-            :label="api_hints_enabled ? 'plg.marker_size_mode =' : 'Size Mode'"
-            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
-          ></v-select>
+            :selected.syn="marker_size_mode_value"
+            label="Size Mode"
+            api_hint="plg.marker_size_mode = "
+            :api_hints_enabled="api_hints_enabled"
+          />
         </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')">
@@ -392,14 +395,13 @@
         </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')">
-          <v-select
-            attach
-            :menu-props="{ left: true }"
+          <glue-state-select
             :items="marker_size_col_sync.choices"
-            v-model="marker_size_col_value"
-            :label="api_hints_enabled ? 'plg.marker_size_col =' : 'Column'"
-            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
-          ></v-select>
+            :selected.sync="marker_size_col_value"
+            label="Column"
+            api_hint="plg.marker_size_col = "
+            :api_hints_enabled="api_hints_enabled"
+          />
         </glue-state-sync-wrapper>
 
         <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')">
@@ -426,14 +428,13 @@
 
 
         <glue-state-sync-wrapper v-if="marker_visible_value" :sync="marker_color_mode_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_color_mode')">
-          <v-select
-            attach
-            :menu-props="{ left: true }"
+          <glue-state-select
             :items="marker_color_mode_sync.choices"
-            v-model="marker_color_mode_value"
-            :label="api_hints_enabled ? 'plg.marker_color_mode =' : 'Color Mode'"
-            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
-          ></v-select>
+            :selected.sync="marker_color_mode_value"
+            label="Color Mode"
+            api_hint="plg.marker_color_mode = "
+            :api_hints_enabled="api_hints_enabled"
+          />
         </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')">
@@ -447,25 +448,23 @@
         </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')">
-          <v-select
-            attach
-            :menu-props="{ left: true }"
+          <glue-state-select
             :items="marker_color_col_sync.choices"
-            v-model="marker_color_col_value"
-            :label="api_hints_enabled ? 'plg.marker_color_col =' : 'Column'"
-            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
-          ></v-select>
+            :selected.sync="marker_color_col_value"
+            label="Column"
+            api_hint="plg.marker_color_col = "
+            :api_hints_enabled="api_hints_enabled"
+          />
         </glue-state-sync-wrapper>
 
         <glue-state-sync-wrapper v-if="marker_visible_value && marker_color_mode_value!=='Fixed'" :sync="marker_colormap_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('marker_colormap')">
-          <v-select
-            attach
-            :menu-props="{ left: true }"
+          <glue-state-select
             :items="marker_colormap_sync.choices"
-            v-model="marker_colormap_value"
-            :label="api_hints_enabled ? 'plg.marker_colormap =' : 'Colormap'"
-            :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
-          ></v-select>
+            :selected.sync="marker_colormap_value"
+            label="Colormap"
+            api_hint="plg.marker_colormap = "
+            :api_hints_enabled="api_hints_enabled"
+          />
         </glue-state-sync-wrapper>
 
         <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')">
@@ -516,7 +515,13 @@
             dense
           >
             <template v-slot:selection="{ item, index }">
-              <span>{{ item.text }}</span>
+              <span :class="api_hints_enabled ? 'api-hint' : null">
+                {{ api_hints_enabled ?
+                  '\'' + item.text + '\''
+                  :
+                  item.text
+                }}
+              </span>
             </template>
             <template v-slot:item="{ item }">
               <v-card :style="'background: '+ colorStyle(item, cmap_samples)" width="100%" class="d-flex justify-center align-center text-center">
@@ -593,25 +598,23 @@
       <!-- IMAGE:STRETCH -->
       <j-plugin-section-header v-if="stretch_function_sync.in_subscribed_states">Stretch</j-plugin-section-header>
       <glue-state-sync-wrapper :sync="stretch_function_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('stretch_function')">
-        <v-select
-          attach
-          :menu-props="{ left: true }"
+        <glue-state-select
           :items="stretch_function_sync.choices"
-          v-model="stretch_function_value"
-          :label="api_hints_enabled ? 'plg.stretch_function =' : 'Stretch Function'"
-          :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
-        ></v-select>
+          :selected.sync="stretch_function_value"
+          label="Stretch Function"
+          api_hint="plg.stretch_function = "
+          :api_hints_enabled="api_hints_enabled"
+        />
       </glue-state-sync-wrapper>
 
       <glue-state-sync-wrapper :sync="stretch_preset_sync" :multiselect="layer_multiselect" @unmix-state="unmix_state('stretch_preset')">
-        <v-select
-          attach
-          :menu-props="{ left: true }"
+        <glue-state-select
           :items="stretch_preset_sync.choices"
-          v-model="stretch_preset_value"
-          :label="api_hints_enabled ? 'plg.stretch_preset =' : 'Stretch Percentile Preset'"
-          :class="api_hints_enabled ? 'api-hint no-hint' : 'no-hint'"
-        ></v-select>
+          :selected.sync="stretch_preset_value"
+          label="Stretch Percentile Preset"
+          api_hint="plg.stretch_preset = "
+          :api_hints_enabled="api_hints_enabled"
+        />
       </glue-state-sync-wrapper>
 
       <!-- for multiselect, show vmin/max here, otherwise they'll be in the "more stretch options" expandable section -->
diff --git a/jdaviz/configs/imviz/plugins/aper_phot_simple/aper_phot_simple.vue b/jdaviz/configs/imviz/plugins/aper_phot_simple/aper_phot_simple.vue
index 40f6d87d26..00988d5eda 100644
--- a/jdaviz/configs/imviz/plugins/aper_phot_simple/aper_phot_simple.vue
+++ b/jdaviz/configs/imviz/plugins/aper_phot_simple/aper_phot_simple.vue
@@ -144,17 +144,13 @@
           </span>
         </v-row>
 
-        <v-row v-if="!multiselect">
-          <v-select
-            :menu-props="{ left: true }"
-            attach
-            :items="plot_types"
-            v-model="current_plot_type"
-            label="Plot Type"
-            hint="Aperture photometry plot type"
-            persistent-hint
-          ></v-select>
-        </v-row>
+        <plugin-select
+          v-if="!multiselect"
+          :items="plot_types"
+          :selected.sync="current_plot_type"
+          label="Plot Type"
+          hint="Aperture photometry plot type"
+        />
 
         <v-row v-if="!multiselect && current_plot_type==='Radial Profile (Raw)' && aperture_area > 5000">
           <span class="v-messages v-messages__message text--secondary">
diff --git a/jdaviz/configs/imviz/plugins/orientation/orientation.vue b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
index 4cb514d58e..2f59206704 100644
--- a/jdaviz/configs/imviz/plugins/orientation/orientation.vue
+++ b/jdaviz/configs/imviz/plugins/orientation/orientation.vue
@@ -62,7 +62,7 @@
 
         <v-row class="row-min-bottom-padding">
           <v-radio-group
-            :label="api_hints_enabled ? 'plg.align_by =' : '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"
@@ -73,7 +73,8 @@
             <v-radio
               v-for="item in align_by_items"
               :key="item.label"
-              :label="item.label == 'WCS' && !api_hints_enabled ? 'WCS (Sky)' : item.label"
+              :class="api_hints_enabled ? 'api-hint' : null"
+              :label="item.label == 'WCS' && !api_hints_enabled ? 'WCS (Sky)' : (api_hints_enabled ? '\''+item.label+'\'' : item.label)"
               :value="item.label"
             ></v-radio>
           </v-radio-group>
@@ -108,7 +109,7 @@
             :selected.sync="viewer_selected"
             :multiselect="false"
             label="Viewer"
-            api_hint="plg.viewer ="
+            api_hint="plg.viewer = "
             :api_hints_enabled="api_hints_enabled"
             :show_if_single_entry="multiselect"
             :hint="'Select the viewer to set orientation'"
@@ -120,7 +121,7 @@
             :icons="icons"
             :show_if_single_entry="true"
             label="Orientation in viewer"
-            api_hint="plg.orientation ="
+            api_hint="plg.orientation = "
             :api_hints_enabled="api_hints_enabled"
             hint="Select the viewer orientation"
           />
diff --git a/jdaviz/configs/rampviz/plugins/ramp_extraction/ramp_extraction.vue b/jdaviz/configs/rampviz/plugins/ramp_extraction/ramp_extraction.vue
index 85d3ab4bc8..9248d8a955 100644
--- a/jdaviz/configs/rampviz/plugins/ramp_extraction/ramp_extraction.vue
+++ b/jdaviz/configs/rampviz/plugins/ramp_extraction/ramp_extraction.vue
@@ -73,17 +73,13 @@
         </span>
       </v-row>
 
-      <v-row>
-        <v-select
-          :menu-props="{ left: true }"
-          attach
-          :items="function_items.map(i => i.label)"
-          v-model="function_selected"
-          label="Function"
-          :hint="'Function to apply to data in \''+aperture_selected+'\'.'"
-          persistent-hint
-        ></v-select>
-      </v-row>
+      <plugin-select
+        :items="function_items.map(i => i.label)"
+        :selected.sync="function_selected"
+        label="Function"
+        :hint="'Function to apply to data in \''+aperture_selected+'\'.'"
+      />
+
       <v-row v-if="conflicting_aperture_and_function">
         <span class="v-messages v-messages__message text--secondary" style="color: red !important">
           {{conflicting_aperture_error_message}}
diff --git a/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue b/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue
index cd9961f872..2e8b6ed89a 100644
--- a/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue
+++ b/jdaviz/configs/specviz/plugins/unit_conversion/unit_conversion.vue
@@ -9,58 +9,45 @@
     :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
-    <v-row v-if="has_spectral">
-      <v-select
-        :menu-props="{ left: true }"
-        attach
-        :items="spectral_unit_items.map(i => i.label)"
-        v-model="spectral_unit_selected"
-        :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>
-    </v-row>
+    <plugin-select
+      v-if="has_spectral"
+      :items="spectral_unit_items.map(i => i.label)"
+      :selected.sync="spectral_unit_selected"
+      label="Spectral Unit"
+      api_hint="plg.spectral_unit ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Global display unit for spectral axis."
+    />
 
-    <v-row v-if="has_time">
-      <v-select
-        :menu-props="{ left: true }"
-        attach
-        :items="time_unit_items.map(i => i.label)"
-        v-model="time_unit_selected"
-        :label="api_hints_enabled ? 'plg.time_unit =' : 'Time Unit'"
-        :class="api_hints_enabled ? 'api-hint' : null"
-        hint="Global display unit for time axis."
-        persistent-hint
-      ></v-select>
-    </v-row>
+    <plugin-select
+      v-if="has_time"
+      :items="time_unit_items.map(i => i.label)"
+      :selected.sync="time_unit_selected"
+      label="Time Unit"
+      api_hint="plg.time_unit ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Global display unit for time axis."
+    />
 
-    <v-row v-if="has_flux">
-      <v-select
-        :menu-props="{ left: true }"
-        attach
-        :items="flux_unit_items.map(i => i.label)"
-        v-model="flux_unit_selected"
-        :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>
-    </v-row>
-  
-    <v-row v-if="has_angle">
-      <v-select
-        :menu-props="{ left: true }"
-        attach
-        :items="angle_unit_items.map(i => i.label)"
-        v-model="angle_unit_selected"
-        :label="api_hints_enabled ? 'plg.angle_unit =' : 'Solid Angle Unit'"
-        :class="api_hints_enabled ? 'api-hint' : null"
-        hint="Solid angle unit."
-        persistent-hint
+    <plugin-select
+      v-if="has_flux"
+      :items="flux_unit_items.map(i => i.label)"
+      :selected.sync="flux_unit_selected"
+      label="Flux Unit"
+      api_hint="plg.flux_unit ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Global display unit for flux axis."
+    />
 
-      ></v-select>
-    </v-row>
+    <plugin-select
+      v-if="has_angle"
+      :items="angle_unit_items.map(i => i.label)"
+      :selected.sync="angle_unit_selected"
+      label="Angle Unit"
+      api_hint="plg.angle_unit ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Solid angle unit."
+    />
 
     <v-row v-if="has_spectral">
       <v-text-field
@@ -78,18 +65,15 @@
         <v-divider></v-divider>
       </v-row>
 
-      <v-row>
-        <v-select
-          :menu-props="{ left: true }"
-          attach
-          :items="spectral_y_type_items.map(i => i.label)"
-          v-model="spectral_y_type_selected"
-          :label="api_hints_enabled ? 'plg.spectral_y_type =' : 'Spectral y-axis Type'"
-          :class="api_hints_enabled ? 'api-hint' : null"
-          hint="Select the y-axis physical type for the spectrum-viewer."
-          persistent-hint
-        ></v-select>
-      </v-row>
+      <plugin-select
+        :items="spectral_y_type_items.map(i => i.label)"
+        :selected.sync="spectral_y_type_selected"
+        label="Spectral y-axis Type"
+        api_hint="plg.spectral_y_type ="
+        :api_hints_enabled="api_hints_enabled"
+        hint="Select the y-axis physical type for the spectrum-viewer."
+      />
+
 
       <v-alert type="warning" v-if="!pixar_sr_exists">
             PIXAR_SR FITS header keyword not found when parsing spectral cube.
diff --git a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
index 746d8358df..1ca5e72950 100644
--- a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
+++ b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue
@@ -76,18 +76,14 @@
           hint="Select the data used to create the trace."
         />
 
-        <v-row>
-          <v-select
-            attach
-            :menu-props="{ left: true }"
-            :items="trace_type_items.map(i => i.label)"
-            v-model="trace_type_selected"
-            :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>
-        </v-row>
+        <plugin-select
+          :items="trace_type_items.map(i => i.label)"
+          :selected.sync="trace_type_selected"
+          label="Trace Type"
+          api_hint="plg.trace_type ="
+          :api_hints_enabled="api_hints_enabled"
+          hint="Method to use for creating trace"
+        />
 
         <v-row v-if="trace_type_selected!=='Flat'">
           <v-text-field
@@ -165,18 +161,15 @@
           </v-text-field>
         </v-row>
 
-        <v-row v-if="trace_type_selected!=='Flat'">
-          <v-select
-            attach
-            :menu-props="{ left: true }"
-            :items="trace_peak_method_items.map(i => i.label)"
-            v-model="trace_peak_method_selected"
-            :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>
-        </v-row>
+        <plugin-select
+          v-if="trace_type_selected!=='Flat'"
+          :items="trace_peak_method_items.map(i => i.label)"
+          :selected.sync="trace_peak_method_selected"
+          label="Peak Method"
+          api_hint="plg.trace_peak_method ="
+          :api_hints_enabled="api_hints_enabled"
+          hint="Method to use for identifying the peak cross-dispersion pixel in each bin"
+        />
       </div>
 
       <v-row>
@@ -199,7 +192,7 @@
                 action_tooltip="Create Trace"
                 :action_spinner="trace_spinner"
                 add_results_api_hint="trace_results"
-                action_api_hint="plt.create_trace()"
+                action_api_hint="plg.create_trace()"
                 :api_hints_enabled="api_hints_enabled"
                 @click:action="create_trace"
               ></plugin-add-results>
@@ -231,18 +224,14 @@
         hint="Select the data used to determine the background."
       />
 
-      <v-row>
-        <v-select
-          attach
-          :menu-props="{ left: true }"
-          :items="bg_type_items.map(i => i.label)"
-          v-model="bg_type_selected"
-          :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>
-      </v-row>
+      <plugin-select
+        :items="bg_type_items.map(i => i.label)"
+        :selected.sync="bg_type_selected"
+        label="Background Type"
+        api_hint="plg.bg_type ="
+        :api_hints_enabled="api_hints_enabled"
+        hint="Method to use for creating background"
+      />
 
       <plugin-dataset-select
         :items="bg_trace_items"
@@ -293,18 +282,14 @@
         </v-text-field>
       </v-row>
 
-      <v-row>
-        <v-select
-          attach
-          :menu-props="{ left: true }"
-          :items="bg_statistic_items.map(i => i.label)"
-          v-model="bg_statistic_selected"
-          :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>
-      </v-row>
+      <plugin-select
+        :items="bg_statistic_items.map(i => i.label)"
+        :selected.sync="bg_statistic_selected"
+        label="Statistic"
+        api_hint="plg.bg_statistic ="
+        :api_hints_enabled="api_hints_enabled"
+        hint="Statistic to use over the background window."
+      />
 
       <v-row>
         <v-expansion-panels accordion>
@@ -326,7 +311,7 @@
                 action_tooltip="Create Background Image"
                 :action_spinner="bg_img_spinner"
                 add_results_api_hint="plg.bg_results"
-                action_api_hint="plt.export_bg_img()"
+                action_api_hint=plg.export_bg_img()"
                 :api_hints_enabled="api_hints_enabled"
                 @click:action="create_bg_img"
               ></plugin-add-results>
@@ -353,7 +338,7 @@
                 action_label="Export"
                 action_tooltip="Create Background Spectrum"
                 add_results_api_hint="plg.bg_spec_results"
-                action_api_hint="plt.export_bg_spec()"
+                action_api_hint="plg.export_bg_spec()"
                 :api_hints_enabled="api_hints_enabled"
                 @click:action="create_bg_spec"
               ></plugin-add-results>
@@ -380,7 +365,7 @@
                 action_label="Export"
                 action_tooltip="Create Background Subtracted Image"
                 add_results_api_hint="plg.bg_sub_results"
-                action_api_hint="plt.export_bg_sub()"
+                action_api_hint="plg.export_bg_sub()"
                 :api_hints_enabled="api_hints_enabled"
                 @click:action="create_bg_sub"
               ></plugin-add-results>
@@ -418,18 +403,14 @@
         hint="Trace to use as center of extraction window.  'From Plugin' uses trace defined in Trace section above."
       />
 
-      <v-row>
-        <v-select
-          attach
-          :menu-props="{ left: true }"
-          :items="ext_type_items.map(i => i.label)"
-          v-model="ext_type_selected"
-          :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>
-      </v-row>
+      <plugin-select
+        :items="ext_type_items.map(i => i.label)"
+        :selected.sync="ext_type_selected"
+        label="Extraction Type"
+        api_hint="plg.ext_type ="
+        :api_hints_enabled="api_hints_enabled"
+        hint="Method to use for extracting the spectrum."
+      />
 
       <v-row v-if="ext_uncert_warn">
         <span class="v-messages v-messages__message text--secondary">
@@ -450,18 +431,15 @@
         </v-text-field>
       </v-row>
 
-      <v-row v-if="ext_type_selected === 'Horne'">
-        <v-select
-          attach
-          :menu-props="{ left: true }"
-          :items=" horne_ext_profile_items.map(i => i.label)"
-          v-model="horne_ext_profile_selected"
-          :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>
-      </v-row>
+      <plugin-select
+        v-if="ext_type_selected === 'Horne'"
+        :items=" horne_ext_profile_items.map(i => i.label)"
+        :selected.sync="horne_ext_profile_selected"
+        label="Profile Type"
+        api_hint="plg.horne_ext_profile ="
+        :api_hints_enabled="api_hints_enabled"
+        hint="Profile to use for Horne extractoin."
+      />
 
       <v-row v-if="horne_ext_profile_selected === 'Self (interpolated)'">
         <v-text-field
@@ -521,7 +499,7 @@
         :action_disabled="ext_specreduce_err.length > 0"
         :action_spinner="spinner"
         add_results_api_hint="plg.ext_results"
-        action_api_hint="plt.export_extract_spectrum()"
+        action_api_hint=plg.export_extract_spectrum()"
         :api_hints_enabled="api_hints_enabled"
         @click:action="extract_spectrum"
       ></plugin-add-results>
diff --git a/jdaviz/core/template_mixin.py b/jdaviz/core/template_mixin.py
index 18153a76ec..25516855d9 100644
--- a/jdaviz/core/template_mixin.py
+++ b/jdaviz/core/template_mixin.py
@@ -2674,7 +2674,7 @@ class PluginTableSelect(SelectPluginComponent):
 
     Example template (label and hint are optional)::
 
-      <v-select
+      <plugin-select
         :items="table_items"
         :selected.sync="table_selected"
         label="Table"
@@ -2787,7 +2787,7 @@ class PluginPlotSelect(SelectPluginComponent):
 
     Example template (label and hint are optional)::
 
-      <v-select
+      <plugin-select
         :items="plot_items"
         :selected.sync="plot_selected"
         label="Plot"
diff --git a/jdaviz/data/icons/api.svg b/jdaviz/data/icons/api.svg
new file mode 100644
index 0000000000..4955459540
--- /dev/null
+++ b/jdaviz/data/icons/api.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 66.6 47">
+  <defs>
+    <style>
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 {
+        fill: #221f20;
+      }
+
+      .cls-1, .cls-2, .cls-9 {
+        font-size: 12px;
+      }
+
+      .cls-11 {
+        fill: #010101;
+      }
+
+      .cls-2, .cls-3, .cls-7, .cls-12 {
+        font-family: PTMono-Bold, 'PT Mono';
+        font-weight: 700;
+      }
+
+      .cls-3, .cls-5, .cls-6, .cls-10 {
+        font-size: 25px;
+      }
+
+      .cls-13, .cls-9 {
+        font-family: HighwayGothic, 'Highway Gothic';
+      }
+
+      .cls-14 {
+        fill: #e79dbf;
+      }
+
+      .cls-5 {
+        font-family: HiraKakuStd-W8-83pv-RKSJ-H, 'Hiragino Kaku Gothic Std';
+      }
+
+      .cls-6 {
+        font-family: BMDoHyeon-OTF-KSCpc-EUC-H, 'BM Dohyeon';
+      }
+
+      .cls-7 {
+        font-size: 7px;
+      }
+
+      .cls-8 {
+        font-size: 32px;
+      }
+
+      .cls-8, .cls-10 {
+        font-family: PatuaOne-Regular, 'Patua One';
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Kgt5J8.tif">
+        <image id="Layer_0" width="62" height="62" transform="translate(459.8 40.5) scale(.5)" xlink:href="api-1.png"/>
+      </g>
+      <g id="w2i81C.tif">
+        <image id="Layer_0-2" data-name="Layer_0" width="50" height="60" transform="translate(405.8 42) scale(.5)" xlink:href="api-2.png"/>
+      </g>
+      <text class="cls-9" transform="translate(282.2 -60.3)"><tspan x="0" y="0">&lt;API&gt;</tspan></text>
+      <text class="cls-1" transform="translate(346 -62.7)"><tspan class="cls-13" x="0" y="0">&lt;</tspan><tspan class="cls-12" x="7" y="0">API</tspan><tspan class="cls-13" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-2" transform="translate(445.7 -23.4)"><tspan x="0" y="0">API</tspan></text>
+      <text class="cls-1" transform="translate(339.2 -30.3)"><tspan class="cls-13" x="0" y="0">&lt;</tspan><tspan class="cls-12" x="7" y="0">api</tspan><tspan class="cls-13" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-2" transform="translate(364.8 -11.9)"><tspan x="0" y="0">api</tspan></text>
+      <g id="EOJqSm.tif">
+        <image id="Layer_0-3" data-name="Layer_0" width="102" height="88" transform="translate(403.8 241) scale(.5)" xlink:href="api-3.png"/>
+      </g>
+      <path class="cls-11" d="M468.3-15l4.6-4.6-4.6-4.6,1.4-1.4,6,6-6,6-1.4-1.4"/>
+      <path class="cls-11" d="M534.5-50.5v15.5h6.2v-3.1h-3.1v-9.3h3.1v-3.1h-6.2M565.6-45.9v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9v-18.6h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <path class="cls-11" d="M688.4,7v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9V7h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <polygon class="cls-11" points="445 -26.8 440.4 -31.4 445 -36 443.6 -37.4 437.6 -31.4 443.6 -25.4 445 -26.8"/>
+      <rect class="cls-14" x="557.1" y="8.3" width="22.6" height="20.7"/>
+      <text class="cls-7" transform="translate(490.6 11.7)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-3" transform="translate(624.8 -57.9)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-7" transform="translate(541.3 -40.6)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-11" points="486.9 .7 486.9 6.2 489.1 6.2 489.1 5.1 488 5.1 488 1.8 489.1 1.8 489.1 .7 486.9 .7"/>
+      <polyline class="cls-11" points="507.1 18.1 507.1 12.6 504.9 12.6 504.9 13.7 506 13.7 506 17 504.9 17 504.9 18.1 507.1 18.1"/>
+      <text class="cls-7" transform="translate(598.5 -10.6)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-11" points="594.8 -15.3 594.8 -9.8 597 -9.8 597 -10.9 595.9 -10.9 595.9 -14.2 597 -14.2 597 -15.3 594.8 -15.3"/>
+      <polyline class="cls-11" points="615 -9.8 615 -15.3 612.8 -15.3 612.8 -14.2 613.9 -14.2 613.9 -10.9 612.8 -10.9 612.8 -9.8 615 -9.8"/>
+      <polyline class="cls-11" points="556.8 -38.1 553.7 -38.1 553.7 -35 559.9 -35 559.9 -50.5 553.7 -50.5 553.7 -47.4 556.8 -47.4 556.8 -38.1"/>
+      <polyline class="cls-11" points="673.3 -47.9 670.2 -47.9 670.2 -44.1 676.4 -44.1 676.4 -85.3 670.2 -85.3 670.2 -81.7 673.3 -81.7 673.3 -52.3"/>
+      <polyline class="cls-11" points="621.9 -81.5 625 -81.5 625 -85.3 618.7 -85.3 618.7 -44.1 625 -44.1 625 -47.7 621.9 -47.7 621.9 -77.1"/>
+      <text class="cls-3" transform="translate(194.8 81.9)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-10" transform="translate(181.4 52.4)"><tspan x="0" y="0">API</tspan></text>
+      <g>
+        <path class="cls-4" d="M11.6,19.5c0-.3,0-.7,0-1.1,2.1-1.1,4.3-1.7,6.6-1.7s4.1.4,5.1,1.3c1,.9,1.5,2.4,1.5,4.5v7.1c.8.2,1.4.3,1.8.6v2.9c-1.1.5-2.7.8-4.8.8-.2-.6-.4-1.3-.6-2.1-1,1.4-2.7,2.1-5.2,2.1s-2.8-.4-3.8-1.3-1.6-2-1.6-3.5.5-2.7,1.5-3.5c1-.9,2.5-1.3,4.4-1.3h3.6v-1.6c0-1.7-.9-2.6-2.8-2.6s-1.3,0-1.7.2c0,.9-.2,1.6-.4,2.2h-3.3c-.4-.8-.6-1.8-.6-3ZM17.6,30.5c1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8s.2,1,.5,1.4c.3.4.8.5,1.5.5Z"/>
+        <path class="cls-4" d="M27.9,17c1.2-.3,2.3-.4,3.3-.4s1.8,0,2.4,0v1.6c1.5-1,3.1-1.6,4.7-1.6s3.8.6,4.8,1.9c1,1.3,1.5,3.4,1.5,6.3s-.2,3-.7,4.1c-.5,1.2-1.1,2.1-1.9,2.8-1.5,1.3-3.3,2-5.4,2s-1.8,0-2.6-.3v2.9c1.3.4,2.1.8,2.5,1.2l-.3,2.6h-8.3l-.3-2.6c.3-.4.9-.8,1.8-1.1v-15.9c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM36.3,30.5c1.1,0,2-.5,2.6-1.5.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3Z"/>
+        <path class="cls-4" d="M46.8,17c1.2-.3,2.4-.4,3.5-.4s2,0,2.7,0v13.2c.9.3,1.5.7,1.8,1.1l-.3,2.6h-7.6l-.3-2.6c.3-.4.9-.8,1.8-1.1v-9.2c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM50.6,14.7c-1.8,0-2.8-.8-2.8-2.5s.9-2.5,2.8-2.5,2.8.8,2.8,2.5-.9,2.5-2.8,2.5Z"/>
+      </g>
+      <text class="cls-8" transform="translate(-79.1 20.5)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-6" transform="translate(160.6 22.6)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-5" transform="translate(82.4 -18.9)"><tspan x="0" y="0">API</tspan></text>
+      <polyline class="cls-11" points="59.9 40.1 55.8 40.1 55.8 44.9 64 44.9 64 3.7 55.8 3.7 55.8 6.3 59.9 6.3 59.9 36.7"/>
+      <polyline class="cls-11" points="7 6.5 11.1 6.5 11.1 3.7 2.9 3.7 2.9 44.9 11.1 44.9 11.1 40.3 7 40.3 7 11.9"/>
+      <text class="cls-3" transform="translate(7.8 -51.5)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-11" points="56.2 -41.6 53.1 -41.6 53.1 -37.8 59.3 -37.8 59.3 -79 53.1 -79 53.1 -75.4 56.2 -75.4 56.2 -46"/>
+      <polyline class="cls-11" points="4.8 -75.2 7.9 -75.2 7.9 -79 1.7 -79 1.7 -37.8 7.9 -37.8 7.9 -41.4 4.8 -41.4 4.8 -70.8"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/jdaviz/data/icons/api_lock.svg b/jdaviz/data/icons/api_lock.svg
new file mode 100644
index 0000000000..da8fba4533
--- /dev/null
+++ b/jdaviz/data/icons/api_lock.svg
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 66.6 47">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11 {
+        fill: #221f20;
+      }
+
+      .cls-2, .cls-3, .cls-10 {
+        font-size: 12px;
+      }
+
+      .cls-12 {
+        fill: #010101;
+      }
+
+      .cls-3, .cls-4, .cls-8, .cls-13 {
+        font-family: PTMono-Bold, 'PT Mono';
+        font-weight: 700;
+      }
+
+      .cls-4, .cls-6, .cls-7, .cls-11 {
+        font-size: 25px;
+      }
+
+      .cls-14, .cls-10 {
+        font-family: HighwayGothic, 'Highway Gothic';
+      }
+
+      .cls-15 {
+        fill: #e79dbf;
+      }
+
+      .cls-6 {
+        font-family: HiraKakuStd-W8-83pv-RKSJ-H, 'Hiragino Kaku Gothic Std';
+      }
+
+      .cls-7 {
+        font-family: BMDoHyeon-OTF-KSCpc-EUC-H, 'BM Dohyeon';
+      }
+
+      .cls-16 {
+        fill: #fff;
+      }
+
+      .cls-8 {
+        font-size: 7px;
+      }
+
+      .cls-9 {
+        font-size: 32px;
+      }
+
+      .cls-9, .cls-11 {
+        font-family: PatuaOne-Regular, 'Patua One';
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.7.2, SVG Export Plug-In . SVG Version: 1.2.0 Build 154)  -->
+  <g>
+    <g id="Layer_1">
+      <g id="Kgt5J8.tif">
+        <image id="Layer_0" width="62" height="62" transform="translate(459.8 -47.9) scale(.5)" xlink:href="apiLock-1.png"/>
+      </g>
+      <g id="w2i81C.tif">
+        <image id="Layer_0-2" data-name="Layer_0" width="50" height="60" transform="translate(405.8 -46.4) scale(.5)" xlink:href="apiLock-2.png"/>
+      </g>
+      <text class="cls-10" transform="translate(282.2 -148.7)"><tspan x="0" y="0">&lt;API&gt;</tspan></text>
+      <text class="cls-2" transform="translate(346 -151)"><tspan class="cls-14" x="0" y="0">&lt;</tspan><tspan class="cls-13" x="7" y="0">API</tspan><tspan class="cls-14" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-3" transform="translate(445.7 -111.8)"><tspan x="0" y="0">API</tspan></text>
+      <text class="cls-2" transform="translate(339.2 -118.7)"><tspan class="cls-14" x="0" y="0">&lt;</tspan><tspan class="cls-13" x="7" y="0">api</tspan><tspan class="cls-14" x="28.6" y="0">&gt;</tspan></text>
+      <text class="cls-3" transform="translate(364.8 -100.3)"><tspan x="0" y="0">api</tspan></text>
+      <g id="EOJqSm.tif">
+        <image id="Layer_0-3" data-name="Layer_0" width="102" height="88" transform="translate(403.8 152.6) scale(.5)" xlink:href="apiLock-3.png"/>
+      </g>
+      <path class="cls-12" d="M468.3-103.3l4.6-4.6-4.6-4.6,1.4-1.4,6,6-6,6-1.4-1.4"/>
+      <path class="cls-12" d="M534.5-138.9v15.5h6.2v-3.1h-3.1v-9.3h3.1v-3.1h-6.2M565.6-134.2v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9v-18.6h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <path class="cls-12" d="M688.4-81.4v18.6c0,1.7-1.4,3.1-3.1,3.1h-24.9c-1.7,0-3.1-1.4-3.1-3.1v-4.7h3.1v4.7h24.9v-18.6h0v-3.1h0c1.7,0,3.1,1.4,3.1,3.1Z"/>
+      <polygon class="cls-12" points="445 -115.2 440.4 -119.8 445 -124.4 443.6 -125.8 437.6 -119.8 443.6 -113.8 445 -115.2"/>
+      <rect class="cls-15" x="557.1" y="-80" width="22.6" height="20.7"/>
+      <text class="cls-8" transform="translate(490.6 -76.6)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-4" transform="translate(624.8 -146.2)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-8" transform="translate(541.3 -129)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-12" points="486.9 -87.7 486.9 -82.2 489.1 -82.2 489.1 -83.3 488 -83.3 488 -86.6 489.1 -86.6 489.1 -87.7 486.9 -87.7"/>
+      <polyline class="cls-12" points="507.1 -70.3 507.1 -75.7 504.9 -75.7 504.9 -74.6 506 -74.6 506 -71.4 504.9 -71.4 504.9 -70.3 507.1 -70.3"/>
+      <text class="cls-8" transform="translate(598.5 -99)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-12" points="594.8 -103.6 594.8 -98.2 597 -98.2 597 -99.3 595.9 -99.3 595.9 -102.6 597 -102.6 597 -103.6 594.8 -103.6"/>
+      <polyline class="cls-12" points="615 -98.2 615 -103.6 612.8 -103.6 612.8 -102.6 613.9 -102.6 613.9 -99.3 612.8 -99.3 612.8 -98.2 615 -98.2"/>
+      <polyline class="cls-12" points="556.8 -126.5 553.7 -126.5 553.7 -123.3 559.9 -123.3 559.9 -138.9 553.7 -138.9 553.7 -135.8 556.8 -135.8 556.8 -126.5"/>
+      <polyline class="cls-12" points="673.3 -136.3 670.2 -136.3 670.2 -132.4 676.4 -132.4 676.4 -173.7 670.2 -173.7 670.2 -170.1 673.3 -170.1 673.3 -140.7"/>
+      <polyline class="cls-12" points="621.9 -169.9 625 -169.9 625 -173.7 618.7 -173.7 618.7 -132.4 625 -132.4 625 -136.1 621.9 -136.1 621.9 -165.5"/>
+      <text class="cls-4" transform="translate(194.8 -6.5)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-11" transform="translate(181.4 -36)"><tspan x="0" y="0">API</tspan></text>
+      <text class="cls-9" transform="translate(-79.1 -67.9)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-7" transform="translate(160.6 -65.7)"><tspan x="0" y="0">api</tspan></text>
+      <text class="cls-6" transform="translate(82.4 -107.3)"><tspan x="0" y="0">API</tspan></text>
+      <polyline class="cls-12" points="7 61.9 11.1 61.9 11.1 59.1 2.9 59.1 2.9 100.4 11.1 100.4 11.1 95.7 7 95.7 7 67.4"/>
+      <g>
+        <path class="cls-5" d="M11.6-68.9c0-.3,0-.7,0-1.1,2.1-1.1,4.3-1.7,6.6-1.7s4.1.4,5.1,1.3c1,.9,1.5,2.4,1.5,4.5v7.1c.8.2,1.4.3,1.8.6v2.9c-1.1.5-2.7.8-4.8.8-.2-.6-.4-1.3-.6-2.1-1,1.4-2.7,2.1-5.2,2.1s-2.8-.4-3.8-1.3-1.6-2-1.6-3.5.5-2.7,1.5-3.5c1-.9,2.5-1.3,4.4-1.3h3.6v-1.6c0-1.7-.9-2.6-2.8-2.6s-1.3,0-1.7.2c0,.9-.2,1.6-.4,2.2h-3.3c-.4-.8-.6-1.8-.6-3ZM17.6-57.9c1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8s.2,1,.5,1.4c.3.4.8.5,1.5.5Z"/>
+        <path class="cls-5" d="M27.9-71.3c1.2-.3,2.3-.4,3.3-.4s1.8,0,2.4,0v1.6c1.5-1,3.1-1.6,4.7-1.6s3.8.6,4.8,1.9c1,1.3,1.5,3.4,1.5,6.3s-.2,3-.7,4.1c-.5,1.2-1.1,2.1-1.9,2.8-1.5,1.3-3.3,2-5.4,2s-1.8,0-2.6-.3v2.9c1.3.4,2.1.8,2.5,1.2l-.3,2.6h-8.3l-.3-2.6c.3-.4.9-.8,1.8-1.1v-15.9c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM36.3-57.9c1.1,0,2-.5,2.6-1.5.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3Z"/>
+        <path class="cls-5" d="M46.8-71.3c1.2-.3,2.4-.4,3.5-.4s2,0,2.7,0v13.2c.9.3,1.5.7,1.8,1.1l-.3,2.6h-7.6l-.3-2.6c.3-.4.9-.8,1.8-1.1v-9.2c-.8-.3-1.4-.6-1.8-1.1l.3-2.6ZM50.6-73.6c-1.8,0-2.8-.8-2.8-2.5s.9-2.5,2.8-2.5,2.8.8,2.8,2.5-.9,2.5-2.8,2.5Z"/>
+      </g>
+      <polyline class="cls-12" points="59.9 -48.2 55.8 -48.2 55.8 -43.4 64 -43.4 64 -84.7 55.8 -84.7 55.8 -82 59.9 -82 59.9 -51.7"/>
+      <polyline class="cls-12" points="7 -81.9 11.1 -81.9 11.1 -84.7 2.9 -84.7 2.9 -43.4 11.1 -43.4 11.1 -48 7 -48 7 -76.4"/>
+      <text class="cls-4" transform="translate(7.8 -139.9)"><tspan x="0" y="0">api</tspan></text>
+      <polyline class="cls-12" points="56.2 -129.9 53.1 -129.9 53.1 -126.1 59.3 -126.1 59.3 -167.4 53.1 -167.4 53.1 -163.7 56.2 -163.7 56.2 -134.4"/>
+      <polyline class="cls-12" points="4.8 -163.6 7.9 -163.6 7.9 -167.4 1.7 -167.4 1.7 -126.1 7.9 -126.1 7.9 -129.7 4.8 -129.7 4.8 -159.1"/>
+      <g>
+        <path class="cls-1" d="M37.4,75.8c-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3s2-.5,2.6-1.5c.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1Z"/>
+        <path class="cls-1" d="M15.5,84c0,.6.2,1,.5,1.4.3.4.8.5,1.5.5,1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8Z"/>
+        <path d="M24.9,78c0-2.1-.5-3.6-1.5-4.5-1-.9-2.7-1.3-5.1-1.3s-4.6.6-6.6,1.7c0,.4,0,.7,0,1.1,0,1.2.2,2.2.6,3h3.3c.2-.5.4-1.2.4-2.2.4-.1,1-.2,1.7-.2,1.8,0,2.8.9,2.8,2.6v1.6h-3.6c-1.9,0-3.4.4-4.4,1.3-1,.9-1.5,2-1.5,3.5s.5,2.7,1.6,3.5c1.1.9,2.3,1.3,3.8,1.3,2.5,0,4.2-.7,5.2-2.1.2.8.3,1.5.6,2.1,2.1,0,3.7-.3,4.8-.8v-2.9c-.4-.2-1.1-.4-1.8-.6v-7.1ZM20.3,84.9c-.7.7-1.6,1-2.7,1s-1.2-.2-1.5-.5c-.3-.4-.5-.8-.5-1.4,0-1.2.8-1.8,2.4-1.8h2.3v2.7Z"/>
+        <path d="M44.7,80.4c0-2.9-.5-5-1.5-6.3-1-1.3-2.6-1.9-4.8-1.9s-3.3.5-4.7,1.6v-1.6c-.6,0-1.4,0-2.4,0s-2.1.1-3.3.4l-.3,2.6c.4.5,1.1.9,1.8,1.1v15.9c-.9.4-1.5.7-1.8,1.1l.3,2.6h8.3l.3-2.6c-.4-.5-1.2-.9-2.5-1.2v-2.9c.8.2,1.7.3,2.6.3,2.1,0,3.9-.7,5.4-2,.8-.7,1.4-1.6,1.9-2.8.5-1.2.7-2.6.7-4.1ZM38.9,84.4c-.6,1-1.5,1.5-2.6,1.5s-1.6,0-2.3-.3v-8.8c.8-.7,2-1,3.4-1s1.6.3,1.9,1c.4.6.5,1.8.5,3.6s-.3,3.1-1,4.1Z"/>
+        <path d="M52.9,72.1c-.7,0-1.6,0-2.7,0s-2.2.1-3.5.4l-.3,2.6c.4.5,1.1.9,1.8,1.1v8.3c1.3-.9,2.9-1.6,4.6-1.8v-10.5Z"/>
+        <path d="M50.6,70.1c1.8,0,2.8-.8,2.8-2.5s-.9-2.5-2.8-2.5-2.8.8-2.8,2.5.9,2.5,2.8,2.5Z"/>
+        <path class="cls-12" d="M64,89.6v-30.5h-8.2v2.6h4.1v22.5c1.9,1.3,3.4,3.1,4.1,5.3Z"/>
+        <polygon class="cls-16" points="55.8 95.6 59.9 95.6 59.9 92.1 59.9 89.8 55.8 89.8 55.8 95.6"/>
+      </g>
+      <path class="cls-12" d="M59.5,90.1c.8,0,1.4.6,1.4,1.4v7c0,.8-.6,1.4-1.4,1.4h-8.4c-.8,0-1.4-.6-1.4-1.4v-7c0-.8.6-1.4,1.4-1.4h6.3v-1.4c0-1.2-.9-2.1-2.1-2.1s-2.1.9-2.1,2.1h-1.4c0-1.9,1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5v1.4h.7M55.3,96.4c.8,0,1.4-.6,1.4-1.4s-.6-1.4-1.4-1.4-1.4.6-1.4,1.4.6,1.4,1.4,1.4Z"/>
+      <polyline class="cls-12" points="7 6.5 11.1 6.5 11.1 3.7 2.9 3.7 2.9 44.9 11.1 44.9 11.1 40.3 7 40.3 7 11.9"/>
+      <g>
+        <path class="cls-1" d="M37.4,20.4c-1.4,0-2.5.3-3.4,1v8.8c.7.2,1.4.3,2.3.3s2-.5,2.6-1.5c.6-1,1-2.3,1-4.1s-.2-2.9-.5-3.6c-.4-.6-1-1-1.9-1Z"/>
+        <path class="cls-1" d="M15.5,28.6c0,.6.2,1,.5,1.4.3.4.8.5,1.5.5,1.1,0,2-.3,2.7-1v-2.7h-2.3c-1.6,0-2.4.6-2.4,1.8Z"/>
+        <path d="M24.9,22.6c0-2.1-.5-3.6-1.5-4.5-1-.9-2.7-1.3-5.1-1.3s-4.6.6-6.6,1.7c0,.4,0,.7,0,1.1,0,1.2.2,2.2.6,3h3.3c.2-.5.4-1.2.4-2.2.4-.1,1-.2,1.7-.2,1.8,0,2.8.9,2.8,2.6v1.6h-3.6c-1.9,0-3.4.4-4.4,1.3-1,.9-1.5,2-1.5,3.5s.5,2.7,1.6,3.5c1.1.9,2.3,1.3,3.8,1.3,2.5,0,4.2-.7,5.2-2.1.2.8.3,1.5.6,2.1,2.1,0,3.7-.3,4.8-.8v-2.9c-.4-.2-1.1-.4-1.8-.6v-7.1ZM20.3,29.5c-.7.7-1.6,1-2.7,1s-1.2-.2-1.5-.5c-.3-.4-.5-.8-.5-1.4,0-1.2.8-1.8,2.4-1.8h2.3v2.7Z"/>
+        <path d="M44.5,22.4c-.2-1.6-.7-2.9-1.3-3.7-1-1.3-2.6-1.9-4.8-1.9s-3.3.5-4.7,1.6v-1.6c-.6,0-1.4,0-2.4,0s-2.1.1-3.3.4l-.3,2.6c.4.5,1.1.9,1.8,1.1v15.9c-.9.4-1.5.7-1.8,1.1l.3,2.6h8.3l.3-2.6c-.4-.5-1.2-.9-2.5-1.2v-2.9c.8.2,1.7.3,2.6.3,1.8,0,3.4-.5,4.8-1.5,0-.4,0-.9,0-1.4,0-3.4,1.2-6.4,3.1-8.7ZM38.9,29c-.6,1-1.5,1.5-2.6,1.5s-1.6,0-2.3-.3v-8.8c.8-.7,2-1,3.4-1s1.6.3,1.9,1c.4.6.5,1.8.5,3.6s-.3,3.1-1,4.1Z"/>
+        <path d="M52.9,18.4v-1.7c-.7,0-1.6,0-2.7,0s-2.2.1-3.5.4l-.3,2.6c.2.2.4.4.6.5,1.7-1.1,3.6-1.7,5.7-1.7s0,0,.1,0Z"/>
+        <path d="M50.6,14.7c1.8,0,2.8-.8,2.8-2.5s-.9-2.5-2.8-2.5-2.8.8-2.8,2.5.9,2.5,2.8,2.5Z"/>
+        <path class="cls-12" d="M64,28.3V3.7h-8.2v2.6h4.1v14.8c2,1.8,3.5,4.3,4.1,7.2Z"/>
+        <path class="cls-12" d="M62,30.7c-.1-1.1-1-1.9-2.1-1.9,0,0,0,0,0,0h-1.1v-2.2c0-3-2.4-5.4-5.4-5.4s-.3,0-.4,0c-2.1.1-3.9,1.5-4.6,3.3-.3.6-.4,1.4-.4,2.1v2.2h-1.1c-1.2,0-2.2,1-2.2,2.2v10.9c0,1.2,1,2.2,2.2,2.2h13.1c1.2,0,2.2-1,2.2-2.2v-10.9c0,0,0-.2,0-.3ZM53.3,38.6c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2,2.2,1,2.2,2.2-1,2.2-2.2,2.2ZM56.6,28.8h-6.5v-2.2c0-1.7,1.3-3,2.9-3.2.1,0,.3,0,.4,0,1.8,0,3.3,1.5,3.3,3.3v2.2Z"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/jdaviz/main_styles.vue b/jdaviz/main_styles.vue
index 3624de3df6..4512758dfc 100644
--- a/jdaviz/main_styles.vue
+++ b/jdaviz/main_styles.vue
@@ -271,29 +271,32 @@ span.api-hint, span.api-hint-header {
   color: #007BA1 !important;
   font-family: monospace;
   font-size: 12px;  
+  letter-spacing: -0.05em !important;
 }
 
 span.api-hint-header {
   font-weight: bold;
 }
 
-.api-hint :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label {
-    color: #007BA1 !important;
-    font-family: monospace;
-    font-size: 10px !important;
-    overflow-wrap: break-word;
-
+.api-hint :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label, .api-hint .v-label {
+  color: #007BA1 !important;
+  font-family: monospace;
+  font-size: 10px !important;
+  overflow-wrap: break-word;
+  letter-spacing: -0.05em !important;
+  user-select: text !important;
 }
 
 .api-hint :is(.v-select__slot, .v-text-field__slot) > .v-label {
-    font-size: 13px !important;
+  font-size: 13px !important;
 }
 
-
 .api-hint .v-alert__content, .api-hint.slider-label {
   color: #007BA1 !important;
   font-family: monospace;
   font-size: 10px !important;
+  letter-spacing: -0.05em !important;
+  user-select: text !important;
 }
 
 .api-hint.v-btn {
@@ -304,8 +307,17 @@ span.api-hint-header {
   text-transform: none !important;
 }
 
+.api-hint-invert-color span {
+  color: #C6F0FD !important;
+  filter: invert(1) !important;
+}
+
 .api-hint-invert-color :is(.v-select__slot, .v-text-field__slot, .v-input__slot, .v-input--radio-group__input) > .v-label {
   filter: invert(1) !important;
 }
 
+.api-hint-invert-color :is(.v-select__slot) > .v-label {
+  color: #C6F0FD !important;
+}
+
 </style>