Merge pull request #2741 from proddy/dev

factor rendering in webUI

interface/package.json

@@ -41,7 +41,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
-    "react-router": "^7.9.5",
+    "react-router": "^7.9.6",
     "react-toastify": "^11.0.5",
     "typesafe-i18n": "^5.26.2",
     "typescript": "^5.9.3"

interface/pnpm-lock.yaml

@@ -63,8 +63,8 @@ importers:
         specifier: ^5.5.0
         version: 5.5.0(react@19.2.0)
       react-router:
-        specifier: ^7.9.5
-        version: 7.9.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^7.9.6
+        version: 7.9.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       react-toastify:
         specifier: ^11.0.5
         version: 11.0.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -1027,8 +1027,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.8.27:
-    resolution: {integrity: sha512-2CXFpkjVnY2FT+B6GrSYxzYf65BJWEqz5tIRHCvNsZZ2F3CmsCB37h8SpYgKG7y9C4YAeTipIPWG7EmFmhAeXA==}
+  baseline-browser-mapping@2.8.28:
+    resolution: {integrity: sha512-gYjt7OIqdM0PcttNYP2aVrr2G0bMALkBaoehD4BuRGjAOtipg0b6wHg1yNL+s5zSnLZZrGHOw4IrND8CD+3oIQ==}
     hasBin: true
 
   bin-build@3.0.0:
@@ -2528,8 +2528,8 @@ packages:
   react-is@19.2.0:
     resolution: {integrity: sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==}
 
-  react-router@7.9.5:
-    resolution: {integrity: sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==}
+  react-router@7.9.6:
+    resolution: {integrity: sha512-Y1tUp8clYRXpfPITyuifmSoE2vncSME18uVLgaqyxh9H35JWpIfzHo+9y3Fzh5odk/jxPW29IgLgzcdwxGqyNA==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: '>=18'
@@ -3963,7 +3963,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.8.27: {}
+  baseline-browser-mapping@2.8.28: {}
 
   bin-build@3.0.0:
     dependencies:
@@ -4020,7 +4020,7 @@ snapshots:
 
   browserslist@4.28.0:
     dependencies:
-      baseline-browser-mapping: 2.8.27
+      baseline-browser-mapping: 2.8.28
       caniuse-lite: 1.0.30001754
       electron-to-chromium: 1.5.250
       node-releases: 2.0.27
@@ -5532,7 +5532,7 @@ snapshots:
 
   react-is@19.2.0: {}
 
-  react-router@7.9.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  react-router@7.9.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
       cookie: 1.0.2
       react: 19.2.0

interface/src/utils/binding.ts

@@ -25,6 +25,7 @@ export const extractEventValue = (
       normalizedValue.endsWith('.') ||
       normalizedValue === '-' ||
       normalizedValue === '-.' ||
+      normalizedValue === '-0' ||
       endsWithDecimalAndZeros;
 
     if (isIncomplete) {
@@ -45,15 +46,15 @@ type UpdateEntity<S> = (state: (prevState: Readonly<S>) => S) => void;
  */
 export const updateValue =
   <S extends Record<string, unknown>>(updateEntity: UpdateEntity<S>) =>
-  (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { name } = event.target;
-    const value = extractEventValue(event);
+    (event: React.ChangeEvent<HTMLInputElement>): void => {
+      const { name } = event.target;
+      const value = extractEventValue(event);
 
-    updateEntity((prevState) => ({
-      ...prevState,
-      [name]: value
-    }));
-  };
+      updateEntity((prevState) => ({
+        ...prevState,
+        [name]: value
+      }));
+    };
 
 /**
  * Creates an event handler that tracks dirty flags for modified fields.
@@ -66,22 +67,22 @@ export const updateValueDirty =
     setDirtyFlags: React.Dispatch<React.SetStateAction<string[]>>,
     updateDataValue: (updater: (prevState: T) => T) => void
   ) =>
-  (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const { name } = event.target;
-    const updatedValue = extractEventValue(event);
+    (event: React.ChangeEvent<HTMLInputElement>): void => {
+      const { name } = event.target;
+      const updatedValue = extractEventValue(event);
 
-    updateDataValue((prevState) => ({
-      ...prevState,
-      [name]: updatedValue
-    }));
+      updateDataValue((prevState) => ({
+        ...prevState,
+        [name]: updatedValue
+      }));
 
-    const isDirty = origData[name] !== updatedValue;
-    const wasDirty = dirtyFlags.includes(name);
+      const isDirty = origData[name] !== updatedValue;
+      const wasDirty = dirtyFlags.includes(name);
 
-    // Only update dirty flags if the state changed
-    if (isDirty !== wasDirty) {
-      setDirtyFlags(
-        isDirty ? [...dirtyFlags, name] : dirtyFlags.filter((f) => f !== name)
-      );
-    }
-  };
+      // Only update dirty flags if the state changed
+      if (isDirty !== wasDirty) {
+        setDirtyFlags(
+          isDirty ? [...dirtyFlags, name] : dirtyFlags.filter((f) => f !== name)
+        );
+      }
+    };