From 764d34c766ed7012f51cdf751abcd863f0fe3f4b Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Thu, 28 Aug 2025 17:00:14 +0100
Subject: [PATCH] Format values in value confirmation modal to prevent
 overflow.

---
 .../labThingsComponents/propertyControl.vue   |  3 +-
 webapp/src/js_utils/formatter.mjs             | 50 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/js_utils/formatter.mjs

diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index e9bc99c2..3d0736dc 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import { formatValue } from "@/js_utils/formatter.mjs";
 import InputFromSchema from "./inputFromSchema.vue";
 
 export default {
@@ -105,7 +106,7 @@ export default {
           } else {
             this.animate = true;
             await this.modalNotify(
-              `Set ${this.label} to ${newVal} (closest valid value to requested ${requestedValue}).`
+              `Set ${this.label} to ${formatValue(newVal)} (closest valid value to requested ${formatValue(requestedValue)}).`
             );
           }
         } else {
diff --git a/webapp/src/js_utils/formatter.mjs b/webapp/src/js_utils/formatter.mjs
new file mode 100644
index 00000000..c479695a
--- /dev/null
+++ b/webapp/src/js_utils/formatter.mjs
@@ -0,0 +1,50 @@
+// Generic functions for formatting
+
+
+/**
+ * Format a single number into a human-readable string.
+ * Uses exponential notation for very large/small numbers.
+ *
+ * @param {number} num - The number to format.
+ * @param {number} [maxDigits=4] - Maximum number of digits in of the formatted string.
+ * @returns {string} - Formatted number as a string.
+ */
+export function formatNumber(num, maxDigits = 4) {
+  if (typeof num !== "number" || isNaN(num)) return String(num);
+
+  // First convert to just a number
+  const normal = String(num);
+  // Use toPrecision to handle rounding and turnign to exponential
+  const rounded = num.toPrecision(maxDigits);
+
+  // Return whichever string is shorter, preventing trailing zeros on decimals
+  return rounded.length < normal.length ? rounded : normal;
+}
+
+/**
+ * Recursively format numbers inside arrays or objects.
+ *
+ * @param {any} value - Value to format (number, array, object, or other).
+ * @param {number} [maxDigits=4] - Maximum number of digits in each number of the formatted string.
+ * @returns {string} - A formatted display string.
+ */
+export function formatValue(value, maxDigits = 4) {
+  if (Array.isArray(value)) {
+    const items = value.map(val => formatValue(val, maxDigits));
+    return `[${items.join(", ")}]`;
+  }
+  if (typeof value === "object" && value !== null) {
+    const entries = Object.entries(value).map(([key, val]) => {
+      return `${key}: ${formatValue(val, maxDigits)}`;
+    });
+    return `{${entries.join(", ")}}`;
+  }
+
+  // Attempt to coerce to number as numbers in input boxes may be represented as strings
+  let asNum = Number(value);
+  if (!Number.isNaN(asNum)) {
+    return formatNumber(asNum, maxDigits);
+  }
+  // Only if the string will not coerce to a number do we output the value.
+  return value;
+}
\ No newline at end of file