From a3f994a9d67f9247dd3ccd7d5ba55008f1488b73 Mon Sep 17 00:00:00 2001
From: Kyle Conroy <kyleconroy@gmail.com>
Date: Wed, 4 Dec 2024 12:23:18 -0500
Subject: [PATCH] use plugin-select and support API hint styling

---
 lcviz/plugins/ephemeris/ephemeris.vue         | 30 +++++++------
 lcviz/plugins/flux_column/flux_column.vue     | 20 ++++-----
 .../frequency_analysis/frequency_analysis.vue | 42 +++++++------------
 3 files changed, 41 insertions(+), 51 deletions(-)

diff --git a/lcviz/plugins/ephemeris/ephemeris.vue b/lcviz/plugins/ephemeris/ephemeris.vue
index a67d873..7069bfb 100644
--- a/lcviz/plugins/ephemeris/ephemeris.vue
+++ b/lcviz/plugins/ephemeris/ephemeris.vue
@@ -120,18 +120,14 @@
         hint="Select the light curve as input."
       />
 
-      <v-row>
-        <v-select
-          :menu-props="{ left: true }"
-          attach
-          :items="method_items.map(i => i.label)"
-          v-model="method_selected"
-          :label="api_hints_enabled ? 'plg.method =' : 'Algorithm/Method'"
-          :class="api_hints_enabled ? 'api-hint' : null"
-          hint="Method to determine period."
-          persistent-hint
-        ></v-select>
-      </v-row>
+      <plugin-select
+        :items="method_items.map(i => i.label)"
+        :selected.sync="method_selected"
+        label="Algorithm/Method"
+        api_hint="plg.method ="
+        :api_hints_enabled="api_hints_enabled"
+        hint="Method to determine period."
+      />
 
       <div style="display: grid"> <!-- overlay container -->
         <div style="grid-area: 1/1">
@@ -267,13 +263,21 @@
           >
 
           <template v-slot:selection="{ item }">
-            <span>
+            <span v-if="api_hints_enabled" class="api-hint">
+              '{{ item.label }}'
+            </span>
+            <span v-else>
               {{ item.label }}
             </span>
           </template>
           <template v-slot:item="{ item }">
             <span style="margin-top: 8px; margin-bottom: 0px">
+              <span v-if="api_hints_enabled" class="api-hint">
+                '{{ item.label }}'
+              </span>
+              <span v-else>
                 {{ item.label }}
+              </span>
               <v-row style="line-height: 1.0; margin: 0px; opacity: 0.85; font-size: 8pt">
                 Period: {{ item.period }} d, Epoch: {{ item.epoch }} d
               </v-row>
diff --git a/lcviz/plugins/flux_column/flux_column.vue b/lcviz/plugins/flux_column/flux_column.vue
index d8b1263..d4ad95c 100644
--- a/lcviz/plugins/flux_column/flux_column.vue
+++ b/lcviz/plugins/flux_column/flux_column.vue
@@ -20,18 +20,14 @@
       hint="Select the light curve to modify."
     />
 
-    <v-row>
-      <v-select
-        :menu-props="{ left: true }"
-        attach
-        :items="flux_column_items.map(i => i.label)"
-        v-model="flux_column_selected"
-        :label="api_hints_enabled ? 'plg.flux_column =' : 'Flux Column'"
-        :class="api_hints_enabled ? 'api-hint' : null"
-        hint="Select the column to adopt as flux."
-        persistent-hint
-      ></v-select>
-    </v-row>
+    <plugin-select
+      :items="flux_column_items.map(i => i.label)"
+      :selected.sync="flux_column_selected"
+      label="Flux Column"
+      api_hint="plg.flux_column ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Select the column to adopt as flux."
+    />
 
   </j-tray-plugin>
 </template>
diff --git a/lcviz/plugins/frequency_analysis/frequency_analysis.vue b/lcviz/plugins/frequency_analysis/frequency_analysis.vue
index f60e716..2bcf9d9 100644
--- a/lcviz/plugins/frequency_analysis/frequency_analysis.vue
+++ b/lcviz/plugins/frequency_analysis/frequency_analysis.vue
@@ -17,31 +17,23 @@
       hint="Select the light curve as input."
     />
 
-    <v-row>
-      <v-select
-        :menu-props="{ left: true }"
-        attach
-        :items="method_items.map(i => i.label)"
-        v-model="method_selected"
-        :label="api_hints_enabled ? 'plg.method =' : 'Algorithm/Method'"
-        :class="api_hints_enabled ? 'api-hint' : null"
-        :hint="'Method to determine power at each '+xunit_selected+'.'"
-        persistent-hint
-      ></v-select>
-    </v-row>
+    <plugin-select
+      :items="method_items.map(i => i.label)"
+      :selected.sync="method_selected"
+      label="Algorithm/Method"
+      api_hint="plg.method ="
+      :api_hints_enabled="api_hints_enabled"
+      :hint="'Method to determine power at each '+xunit_selected+'.'"
+    />
 
-    <v-row>
-      <v-select
-        :menu-props="{ left: true }"
-        attach
-        :items="xunit_items.map(i => i.label)"
-        v-model="xunit_selected"
-        :label="api_hints_enabled ? 'plg.xunit =' : 'X Units'"
-        :class="api_hints_enabled ? 'api-hint' : null"
-        hint="Whether to plot in frequency or period-space."
-        persistent-hint
-      ></v-select>
-    </v-row>
+    <plugin-select
+      :items="xunit_items.map(i => i.label)"
+      :selected.sync="xunit_selected"
+      label="X Units"
+      api_hint="plg.xunit ="
+      :api_hints_enabled="api_hints_enabled"
+      hint="Whether to plot in frequency or period-space."
+    />
 
     <v-row>
       <plugin-switch
@@ -120,7 +112,5 @@
       </div>
     </div>
 
-  </div>
-
   </j-tray-plugin>
 </template>