feat: adding support for units

With `pint` as the unit package, the user can now define Quantities as
attributes of their DataService class. This will be rendered as a float
in the frontend application with the unit as an additional field
appended to the form.

frontend/src/components/GenericComponent.tsx

@@ -14,6 +14,7 @@ type AttributeType =
   | 'bool'
   | 'float'
   | 'int'
+  | 'Quantity'
   | 'list'
   | 'method'
   | 'DataService'
@@ -61,6 +62,19 @@ export const GenericComponent = React.memo(
           isInstantUpdate={isInstantUpdate}
         />
       );
+    } else if (attribute.type === 'Quantity') {
+      return (
+        <NumberComponent
+          name={name}
+          type="float"
+          parent_path={parentPath}
+          docString={attribute.doc}
+          readOnly={attribute.readonly}
+          value={Number(attribute.value['magnitude'])}
+          unit={attribute.value['unit']}
+          isInstantUpdate={isInstantUpdate}
+        />
+      );
     } else if (attribute.type === 'NumberSlider') {
       return (
         <SliderComponent

frontend/src/components/NumberComponent.tsx

@@ -14,6 +14,7 @@ interface NumberComponentProps {
   readOnly: boolean;
   docString: string;
   isInstantUpdate: boolean;
+  unit?: string;
 }
 
 // TODO: highlight the digit that is being changed by setting both selectionStart and
@@ -100,7 +101,7 @@ const handleDeleteKey = (
 };
 
 export const NumberComponent = React.memo((props: NumberComponentProps) => {
-  const { name, parent_path, readOnly, docString, isInstantUpdate } = props;
+  const { name, parent_path, readOnly, docString, isInstantUpdate, unit } = props;
   const renderCount = useRef(0);
   // Create a state for the cursor position
   const [cursorPosition, setCursorPosition] = useState(null);
@@ -242,6 +243,7 @@ export const NumberComponent = React.memo((props: NumberComponentProps) => {
               onBlur={handleBlur}
               className={isInstantUpdate && !readOnly ? 'instantUpdate' : ''}
             />
+            {unit && <InputGroup.Text>{unit}</InputGroup.Text>}
           </InputGroup>
           {!readOnly && (
             <div className="d-flex flex-column">