From 729f375901e2028fe066ddc2a5f887c662e8ada2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Wed, 13 Dec 2023 10:35:28 +0100
Subject: [PATCH] adds support for quantities in slider component (passing
 object instead of number)

---
 frontend/src/components/GenericComponent.tsx |  8 +--
 frontend/src/components/SliderComponent.tsx  | 61 ++++++++++++++------
 2 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/GenericComponent.tsx b/frontend/src/components/GenericComponent.tsx
index 368f6f6..9b9bba1 100644
--- a/frontend/src/components/GenericComponent.tsx
+++ b/frontend/src/components/GenericComponent.tsx
@@ -97,10 +97,10 @@ export const GenericComponent = React.memo(
           parentPath={parentPath}
           docString={attribute.doc}
           readOnly={attribute.readonly}
-          value={attribute.value['value']['value']}
-          min={attribute.value['min']['value']}
-          max={attribute.value['max']['value']}
-          stepSize={attribute.value['step_size']['value']}
+          value={attribute.value['value']}
+          min={attribute.value['min']}
+          max={attribute.value['max']}
+          stepSize={attribute.value['step_size']}
           isInstantUpdate={isInstantUpdate}
           addNotification={addNotification}
         />
diff --git a/frontend/src/components/SliderComponent.tsx b/frontend/src/components/SliderComponent.tsx
index 6cd7464..36f91d6 100644
--- a/frontend/src/components/SliderComponent.tsx
+++ b/frontend/src/components/SliderComponent.tsx
@@ -3,19 +3,19 @@ import { InputGroup, Form, Row, Col, Collapse, ToggleButton } from 'react-bootst
 import { setAttribute } from '../socket';
 import { DocStringComponent } from './DocStringComponent';
 import { Slider } from '@mui/material';
-import { NumberComponent } from './NumberComponent';
+import { NumberComponent, NumberObject } from './NumberComponent';
 import { getIdFromFullAccessPath } from '../utils/stringUtils';
 import { LevelName } from './NotificationsComponent';
 
 interface SliderComponentProps {
   name: string;
-  min: number;
-  max: number;
+  min: NumberObject;
+  max: NumberObject;
   parentPath?: string;
-  value: number;
+  value: NumberObject;
   readOnly: boolean;
   docString: string;
-  stepSize: number;
+  stepSize: NumberObject;
   isInstantUpdate: boolean;
   addNotification: (message: string, levelname?: LevelName) => void;
 }
@@ -30,7 +30,6 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     min,
     max,
     stepSize,
-    readOnly,
     docString,
     isInstantUpdate,
     addNotification
@@ -71,6 +70,28 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
     setAttribute(`${name}.${valueType}`, parentPath, newValue);
   };
 
+  const deconstructNumberDict = (
+    numberDict: NumberObject
+  ): [number, boolean, string | null] => {
+    let numberMagnitude: number;
+    let numberUnit: string | null = null;
+    const numberReadOnly = numberDict.readonly;
+
+    if (numberDict.type === 'int' || numberDict.type === 'float') {
+      numberMagnitude = numberDict.value;
+    } else if (numberDict.type === 'Quantity') {
+      numberMagnitude = numberDict.value.magnitude;
+      numberUnit = numberDict.value.unit;
+    }
+
+    return [numberMagnitude, numberReadOnly, numberUnit];
+  };
+
+  const [valueMagnitude, valueReadOnly, valueUnit] = deconstructNumberDict(value);
+  const [minMagnitude, minReadOnly] = deconstructNumberDict(min);
+  const [maxMagnitude, maxReadOnly] = deconstructNumberDict(max);
+  const [stepSizeMagnitude, stepSizeReadOnly] = deconstructNumberDict(stepSize);
+
   return (
     <div className="sliderComponent" id={id}>
       {process.env.NODE_ENV === 'development' && (
@@ -87,15 +108,15 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
             style={{ margin: '0px 0px 10px 0px' }}
             aria-label="Always visible"
             // valueLabelDisplay="on"
-            disabled={readOnly}
-            value={value}
+            disabled={valueReadOnly}
+            value={valueMagnitude}
             onChange={(event, newNumber) => handleOnChange(event, newNumber)}
-            min={min}
-            max={max}
-            step={stepSize}
+            min={minMagnitude}
+            max={maxMagnitude}
+            step={stepSizeMagnitude}
             marks={[
-              { value: min, label: `${min}` },
-              { value: max, label: `${max}` }
+              { value: minMagnitude, label: `${minMagnitude}` },
+              { value: maxMagnitude, label: `${maxMagnitude}` }
             ]}
           />
         </Col>
@@ -105,9 +126,10 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
             parentPath={parentPath}
             name={`${name}.value`}
             docString=""
-            readOnly={readOnly}
+            readOnly={valueReadOnly}
             type="float"
-            value={value}
+            value={valueMagnitude}
+            unit={valueUnit}
             showName={false}
             addNotification={() => null}
           />
@@ -144,7 +166,8 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
               <Form.Label>Min Value</Form.Label>
               <Form.Control
                 type="number"
-                value={min}
+                value={minMagnitude}
+                disabled={minReadOnly}
                 onChange={(e) => handleValueChange(Number(e.target.value), 'min')}
               />
             </Col>
@@ -153,7 +176,8 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
               <Form.Label>Max Value</Form.Label>
               <Form.Control
                 type="number"
-                value={max}
+                value={maxMagnitude}
+                disabled={maxReadOnly}
                 onChange={(e) => handleValueChange(Number(e.target.value), 'max')}
               />
             </Col>
@@ -162,7 +186,8 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
               <Form.Label>Step Size</Form.Label>
               <Form.Control
                 type="number"
-                value={stepSize}
+                value={stepSizeMagnitude}
+                disabled={stepSizeReadOnly}
                 onChange={(e) => handleValueChange(Number(e.target.value), 'step_size')}
               />
             </Col>