Provide feeback to user on broken UI components.

src/openflexure_microscope_server/ui.py

@@ -214,6 +214,9 @@ class ActionButton(BaseModel):
     Downstream components can subscribe to this and request an update.
     """
 
+    broken: bool = False
+    """If True the action button is broken. There is no corresponding action."""
+
 
 def action_button_for(thing: lt.Thing, action_name: str, **kwargs: Any) -> ActionButton:
     """Create a ActionButton data for the specified Thing Action.
@@ -225,7 +228,8 @@ def action_button_for(thing: lt.Thing, action_name: str, **kwargs: Any) -> Actio
         webapp needs to create the action button.
     """
     if action_name not in thing.actions:
-        raise AttributeError(f"{thing.name} has no action {action_name}")
+        thing.logger.error(f"{thing.name} has no action {action_name}")
+        kwargs["broken"] = True
     return ActionButton(thing=thing.name, action=action_name, **kwargs)
 
 
@@ -272,6 +276,9 @@ class PropertyControl(BaseModel):
     used.
     """
 
+    broken: bool = False
+    """If True the property control is broken. There is no corresponding property."""
+
 
 def property_control_for(
     thing: lt.Thing, property_name: str, **kwargs: Any
@@ -286,7 +293,8 @@ def property_control_for(
     if "label" not in kwargs:
         kwargs["label"] = property_name
     if property_name not in thing.properties:
-        raise AttributeError(f"{thing.name} has no property {property_name}")
+        thing.logger.error(f"{thing.name} has no property {property_name}")
+        kwargs["broken"] = True
     return PropertyControl(thing=thing.name, property_name=property_name, **kwargs)
 
 

webapp/src/App.vue

@@ -387,4 +387,16 @@ html {
   padding: 0;
   height: 100%;
 }
+
+.ui-element-error-icon {
+  vertical-align: middle;
+  padding-right: 10px;
+  color: #a00;
+}
+
+.ui-element-broken {
+  border-color: #a00 !important;
+  color: #a00 !important;
+  cursor: not-allowed;
+}
 </style>

webapp/src/components/labThingsComponents/actionButton.vue

@@ -3,13 +3,15 @@
     <button
       ref="actionButton"
       type="button"
+      :title="tooltipText"
       :disabled="buttonDisabled"
       class="uk-button uk-width-1-1 uk-position-relative"
       :class="buttonClasses"
       @click="handleClick"
     >
       <action-progress-bar :progress="progress" :task-status="taskStatus" :in-button="true" />
-      {{ buttonLabel }}
+      <span v-if="isBroken" class="material-symbols-outlined ui-element-error-icon"> error </span
+      >{{ buttonLabel }}
     </button>
 
     <action-status-modal
@@ -112,6 +114,11 @@ export default {
       required: false,
       default: false,
     },
+    isBroken: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     streamWithModal: {
       type: Boolean,
       required: false,
@@ -148,7 +155,7 @@ export default {
 
   computed: {
     buttonDisabled() {
-      return this.isDisabled || (this.taskRunning && !this.canTerminate);
+      return this.isDisabled || this.isBroken || (this.taskRunning && !this.canTerminate);
     },
     buttonLabel() {
       return this.taskRunning && this.canTerminate ? "Cancel" : this.submitLabel;
@@ -158,6 +165,9 @@ export default {
       if (this.buttonDisabled) {
         classes.push("uk-button-disabled");
       }
+      if (this.isBroken) {
+        classes.push("ui-element-broken");
+      }
       if (this.taskRunning && this.canTerminate) {
         classes.push("uk-button-danger");
       } else if (this.buttonPrimary) {
@@ -167,6 +177,9 @@ export default {
       }
       return classes.join(" ");
     },
+    tooltipText() {
+      return this.isBroken ? `${this.thing} has no action "${this.action}".` : "";
+    },
   },
 
   watch: {
@@ -232,7 +245,7 @@ export default {
 
   methods: {
     handleShortcutTrigger() {
-      if (this.isDisabled) return;
+      if (this.isDisabled || this.isBroken) return;
       this.bootstrapTask();
     },
     handleClick() {
@@ -257,6 +270,7 @@ export default {
      *
      */
     async checkExistingTasks() {
+      if (this.isBroken) return;
       const ongoingTask = await this.getOngoingAction(this.thing, this.action);
       if (ongoingTask) {
         // There is a started task

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -1,5 +1,6 @@
 <template>
   <input-from-schema
+    v-if="!isBroken"
     v-model="modelValue"
     :data-schema="propertyDescription"
     :label="label"
@@ -10,6 +11,13 @@
     @send-value="writeProperty"
     @animation-shown="resetAnimate"
   />
+  <div
+    v-else
+    class="ui-element-broken"
+    :title="`${thingName} has no property &quot;${propertyName}&quot;.`"
+  >
+    <span class="material-symbols-outlined ui-element-error-icon"> error </span> {{ label }}
+  </div>
 </template>
 
 <script>
@@ -56,6 +64,11 @@ export default {
       default: null,
       required: false,
     },
+    isBroken: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   data() {
@@ -93,6 +106,7 @@ export default {
 
   methods: {
     readProperty: async function () {
+      if (this.isBroken) return;
       let data = await this.readThingProperty(this.thingName, this.propertyName);
       this.modelValue = data;
       return data;

webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue

@@ -11,6 +11,7 @@
     :is-disabled="actionData.disabled"
     :modal-progress="actionData.modal_progress"
     :stream-with-modal="actionData.stream_with_modal"
+    :is-broken="actionData.broken"
     @response="actionResponse"
     @error="modalError"
     @finished="actionFinished"

webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue

@@ -8,6 +8,7 @@
     :read-back-delay="propertyData.read_back_delay"
     :options="propertyData.options"
     :step="propertyData.step"
+    :is-broken="propertyData.broken"
   />
 </template>