From 47efa6d4273db83902e79773e8738bab05022ebc Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 20 Nov 2024 07:48:36 -0500
Subject: [PATCH] glue-state-select component

---
 jdaviz/app.py                                 |  1 +
 jdaviz/components/glue_state_select.vue       | 37 ++++++++
 .../plugins/plot_options/plot_options.vue     | 91 +++++++++----------
 3 files changed, 80 insertions(+), 49 deletions(-)
 create mode 100644 jdaviz/components/glue_state_select.vue

diff --git a/jdaviz/app.py b/jdaviz/app.py
index 7a86fe5020..526a8e6a1f 100644
--- a/jdaviz/app.py
+++ b/jdaviz/app.py
@@ -155,6 +155,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',
diff --git a/jdaviz/components/glue_state_select.vue b/jdaviz/components/glue_state_select.vue
new file mode 100644
index 0000000000..757913ef8f
--- /dev/null
+++ b/jdaviz/components/glue_state_select.vue
@@ -0,0 +1,37 @@
+<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/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
index 4f915c364d..04a295705f 100644
--- a/jdaviz/configs/default/plugins/plot_options/plot_options.vue
+++ b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -361,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')">
@@ -396,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')">
@@ -430,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')">
@@ -451,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')">
@@ -603,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 -->