From 5ae0f903d82a07e4649f07b66dc4044b47aad55c Mon Sep 17 00:00:00 2001
From: Joe Knapper <jaknapper@hotmail.com>
Date: Fri, 13 Feb 2026 12:13:39 +0000
Subject: [PATCH] Use dropdown separated from dataType in Vue

---
 src/openflexure_microscope_server/ui.py       |  4 ++--
 .../labThingsComponents/inputFromSchema.vue   | 22 +++++++++----------
 .../labThingsComponents/propertyControl.vue   |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/openflexure_microscope_server/ui.py b/src/openflexure_microscope_server/ui.py
index 53dd0647..ff11ea68 100644
--- a/src/openflexure_microscope_server/ui.py
+++ b/src/openflexure_microscope_server/ui.py
@@ -1,6 +1,6 @@
 """Functionality for communicating the required user interface for a thing."""
 
-from typing import Any
+from typing import Any, Optional
 
 from pydantic import BaseModel
 
@@ -83,7 +83,7 @@ class PropertyControl(BaseModel):
     read_back_delay: int = 1000
     """The delay in ms before reading back the property."""
 
-    options: list[str] = []
+    options: Optional[list[str]] = None
     """A list of options to pass to the UI for a dropdown.
 
     These options aren't validated in the UI in any way, and invalid
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 33adb079..e0b265cc 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label v-if="dataType === 'dropdown'" class="uk-form-label">
+    <label v-if="useDropdown" class="uk-form-label">
       {{ label }}
       <div class="input-and-buttons-container">
         <select
@@ -15,7 +15,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <label v-if="dataType == 'number'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'number'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -33,7 +33,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <div v-if="dataType == 'boolean'" class="input-and-buttons-container">
+    <div v-if="!useDropdown && dataType == 'boolean'" class="input-and-buttons-container">
       <label class="uk-form-label numeric-setting-line-input">
         <input
           ref="checkbox"
@@ -47,7 +47,7 @@
       </label>
       <sync-property-button @click="requestUpdate" />
     </div>
-    <label v-if="dataType == 'number_array'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'number_array'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -66,7 +66,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <label v-if="dataType == 'number_object'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'number_object'" class="uk-form-label"
       >{{ label }}
       <div v-for="(val, key) in modelValue" :key="key">
         <label>{{ internalLabels[key] }}</label>
@@ -86,7 +86,7 @@
         </div>
       </div>
     </label>
-    <label v-if="dataType == 'string'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'string'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -102,7 +102,7 @@
         <sync-property-button @click="requestUpdate" />
       </div>
     </label>
-    <label v-if="dataType == 'other'" class="uk-form-label"
+    <label v-if="!useDropdown && dataType == 'other'" class="uk-form-label"
       >{{ label }}
       <div class="input-and-buttons-container">
         <input
@@ -145,7 +145,7 @@ export default {
     },
     options: {
       type: Array,
-      default: () => [],
+      default: undefined,
       required: false,
     },
   },
@@ -196,15 +196,15 @@ export default {
         form.op?.includes('writeproperty')
       );
     },
+    useDropdown: function () {
+      return Array.isArray(this.options) && this.options.length > 1;
+    },
     dataType: function () {
       let prop = this.dataSchema;
       if (prop == undefined) {
         return "undefined";
       }
       const num_types = ["integer", "float", "number"];
-      if (this.options && this.options.length > 1) {
-        return "dropdown";
-      }
       if (num_types.includes(prop.type)) {
         return "number";
       }
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index 7b49d7a8..fc29f4a1 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -47,7 +47,7 @@ export default {
     },
     options: {
       type: Array,
-      default: () => [],
+      default: undefined,
       required: false,
     },
   },