Merge pull request #253 from tiqi-group/feat/reset_frontend_value_on_exception

feat: reset frontend value to last value on exception

frontend/src/components/GenericComponent.tsx

@@ -50,7 +50,7 @@ const createDisplayNameFromAccessPath = (fullAccessPath: string): string => {
 
 function changeCallback(
   value: SerializedObject,
-  callback: (ack: unknown) => void = () => {},
+  callback: (ack: undefined | SerializedObject) => void = () => {},
 ) {
   updateValue(value, callback);
 }

frontend/src/components/NumberComponent.tsx

@@ -38,7 +38,10 @@ interface NumberComponentProps {
   isInstantUpdate: boolean;
   unit?: string;
   addNotification: (message: string, levelname?: LevelName) => void;
-  changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
+  changeCallback?: (
+    value: SerializedObject,
+    callback?: (ack: undefined | SerializedObject) => void,
+  ) => void;
   displayName?: string;
   id: string;
 }
@@ -217,6 +220,15 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
     id,
   } = props;
 
+  const handleChange = (newValue: SerializedObject) => {
+    changeCallback(newValue, (result: undefined | SerializedObject) => {
+      if (result === undefined) return;
+      if (result.type == "Exception") {
+        setInputString(value.toString());
+      }
+    });
+  };
+
   // Create a state for the cursor position
   const cursorPositionRef = useRef<number | null>(null);
 
@@ -319,7 +331,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
         };
       }
 
-      changeCallback(serializedObject);
+      handleChange(serializedObject);
       return;
     } else {
       console.debug(key);
@@ -350,7 +362,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
         };
       }
 
-      changeCallback(serializedObject);
+      handleChange(serializedObject);
     }
 
     setInputString(newValue);
@@ -384,7 +396,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
         };
       }
 
-      changeCallback(serializedObject);
+      handleChange(serializedObject);
     }
   };
   useEffect(() => {

frontend/src/components/SliderComponent.tsx

@@ -19,7 +19,10 @@ interface SliderComponentProps {
   stepSize: NumberObject;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
-  changeCallback?: (value: SerializedObject, callback?: (ack: unknown) => void) => void;
+  changeCallback?: (
+    value: SerializedObject,
+    callback?: (ack: undefined | SerializedObject) => void,
+  ) => void;
   displayName: string;
   id: string;
 }

frontend/src/socket.ts

@@ -28,7 +28,7 @@ export const socket = io(URL, {
 
 export const updateValue = (
   serializedObject: SerializedObject,
-  callback?: (ack: unknown) => void,
+  callback?: (ack: undefined | SerializedObject) => void,
 ) => {
   if (callback) {
     socket.emit(

src/pydase/frontend/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site displaying a pydase UI." />
-  <script type="module" crossorigin src="/assets/index-XZbNXHJp.js"></script>
+  <script type="module" crossorigin src="/assets/index-CKS_bS2p.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-Cs09d5Pk.css">
 </head>