Options for server specified property control allow different values and display names

src/openflexure_microscope_server/ui.py

@@ -83,11 +83,11 @@ class PropertyControl(BaseModel):
     read_back_delay: int = 1000
     """The delay in ms before reading back the property."""
 
-    options: Optional[list[str]] = None
+    options: Optional[dict[str, str | int | float | bool]] = None
-    """A list of options to pass to the UI for a dropdown.
+    """A mapping of UI display name to value use for creating a dropdown.
 
-    These options aren't validated in the UI in any way, and invalid
+    These options aren't validated here in any way. Any invalid values will be rejected
-    settings will only be rejected when selected.
+    when selected.
     """
 
 

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -5,11 +5,11 @@
       <div class="input-and-buttons-container">
         <select
           v-model="internalValue"
-          class="uk-form-small numeric-setting-line-input"
+          class="uk-form-small numeric-setting-line-input dropdown"
           @change="sendValue"
         >
-          <option v-for="(opt, idx) in options" :key="idx" :value="opt">
+          <option v-for="(value, display) in options" :key="value" :value="value">
-            {{ opt }}
+            {{ display }}
           </option>
         </select>
         <sync-property-button @click="requestUpdate" />
@@ -145,7 +145,8 @@ export default {
     },
     options: {
       type: Array,
-      default: undefined,
+      // Default is Null as None is passed from the server.
+      default: null,
       required: false,
     },
   },
@@ -197,7 +198,12 @@ export default {
       );
     },
     useDropdown: function () {
-      return Array.isArray(this.options) && this.options.length > 1;
+      if (this.options === null) return false;
+      if (["number", "string", "boolean"].includes(this.dataType)) {
+        return true;
+      }
+      console.warn(`Cannot support dropdown for datatype of ${this.dataType}`);
+      return false;
     },
     dataType: function () {
       let prop = this.dataSchema;
@@ -351,6 +357,11 @@ export default {
   margin-right: 5px;
   width: 6em;
 }
+.dropdown {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  opacity: 1;
+}
 .edited {
   background-color: #fff3cd;
 }

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -46,7 +46,7 @@ export default {
       required: false,
     },
     options: {
-      type: Array,
+      type: Object,
       default: undefined,
       required: false,
     },