Initial support for units

src/components/input/NumericInputWithUnit.tsx

@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { TextField, Grid } from '@mui/material';
+import { Grid, TextField } from '@mui/material';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import Autocomplete from '@mui/material/Autocomplete';
 import Qty from 'js-quantities';
+import { parse } from 'path';
+import { b } from 'vitest/dist/suite-IbNSsUWN.js';
 
 export default function NumericInputWithUnit(props: {
   value: { value: number; unit: string };
-  onChange: (value: { value: number; unit: string }) => void;
+  onOwnChange: (value: { value: number; unit: string }, ...baseProps) => void;
 }) {
   const [inputValue, setInputValue] = useState(props.value.value);
   const [unit, setUnit] = useState(props.value.unit);
@@ -26,13 +29,13 @@ export default function NumericInputWithUnit(props: {
     setUnit(props.value.unit);
   }, [props.value]);
 
-  const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleValueChange = (val: { value: number; unit: string }) => {
-    const newValue = parseFloat(event.target.value) || 0;
+    const newValue = val.value;
     setInputValue(newValue);
-    if (props.onChange) {
+    if (props.onOwnChange) {
       try {
-        const qty = Qty(newValue, unit).to('meters');
+        const qty = Qty(newValue, unit).to(val.unit);
-        props.onChange({ unit: 'meters', value: qty.scalar });
+        props.onOwnChange({ unit: val.unit, value: qty.scalar });
       } catch (error) {
         console.error('Conversion error', error);
       }
@@ -48,16 +51,28 @@ export default function NumericInputWithUnit(props: {
     } catch (error) {
       console.error('Unit conversion error', error);
     }
+
+    if (props.onOwnChange) {
+      try {
+        const qty = Qty(inputValue, unit).to(newUnit);
+        props.onOwnChange({ unit: newUnit, value: qty.scalar });
+      } catch (error) {
+        console.error('Conversion error', error);
+      }
+    }
   };
 
   return (
     <Grid container spacing={2} alignItems="center">
       <Grid item xs={6}>
-        <TextField
+        <TextFieldWithDesc
+          {...props.baseProps}
           type="number"
           fullWidth
           value={inputValue}
-          onChange={handleValueChange}
+          onOwnChange={(value) =>
+            handleValueChange({ value: parseFloat(value), unit: unit })
+          }
           label="Value"
         />
       </Grid>
@@ -65,8 +80,8 @@ export default function NumericInputWithUnit(props: {
         <Autocomplete
           options={unitOptions}
           value={unit}
-          onChange={() => {
+          onChange={(event, newValue) => {
-            handleUnitChange(unit);
+            handleUnitChange(newValue || '');
           }}
           renderInput={(params) => (
             <TextField {...params} label="Unit" fullWidth />

src/pages/tools/number/generic-calc/index.tsx

@@ -14,6 +14,7 @@ import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolTextResult from '@components/result/ToolTextResult';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import NumericInputWithUnit from '@components/input/NumericInputWithUnit';
 import { UpdateField } from '@components/options/ToolOptions';
 import { InitialValuesType } from './types';
 import type { GenericCalcType } from './data/types';
@@ -42,7 +43,7 @@ export default async function makeTool(
 
   return function GenericCalc({ title }: ToolComponentProps) {
     const [result, setResult] = useState<string>('');
-    const [shortResult, setShortResult] = useState<string>('');
+    const [shortResult, setShortResult] = useState<number>('');
 
     // For UX purposes we need to track what vars are
     const [valsBoundToPreset, setValsBoundToPreset] = useState<{
@@ -56,6 +57,7 @@ export default async function makeTool(
     const updateVarField = (
       name: string,
       value: number,
+      unit: string,
       values: InitialValuesType,
       updateFieldFunc: UpdateField<InitialValuesType>
     ) => {
@@ -63,7 +65,7 @@ export default async function makeTool(
       const newVars = { ...values.vars };
       newVars[name] = {
         value,
-        unit: values.vars[name]?.unit || ''
+        unit: unit
       };
       updateFieldFunc('vars', newVars);
     };
@@ -111,6 +113,9 @@ export default async function makeTool(
               dataTableLookup(dataTables[selectionData.source], preset)[
                 selectionData.bind[key]
               ],
+
+              dataTables[selectionData.source].columns[selectionData.bind[key]]
+                ?.unit || '',
               currentValues,
               updateFieldFunc
             );
@@ -225,7 +230,6 @@ export default async function makeTool(
                   <TableRow>
                     <TableCell>Variable</TableCell>
                     <TableCell>Value</TableCell>
-                    <TableCell>Unit</TableCell>
                     <TableCell>Solve For</TableCell>
                   </TableRow>
                 </TableHead>
@@ -234,15 +238,17 @@ export default async function makeTool(
                     <TableRow key={variable.name}>
                       <TableCell>{variable.title}</TableCell>
                       <TableCell>
-                        <TextFieldWithDesc
+                        <NumericInputWithUnit
                           title={variable.title}
                           sx={{ width: '25ch' }}
                           description={valsBoundToPreset[variable.name] || ''}
-                          value={
+                          value={{
+                            value:
                               values.outputVariable === variable.name
                                 ? shortResult
-                              : values.vars[variable.name]?.value || NaN
+                                : values.vars[variable.name]?.value || NaN,
-                          }
+                            unit: values.vars[variable.name]?.unit || ''
+                          }}
                           disabled={
                             values.outputVariable === variable.name ||
                             valsBoundToPreset[variable.name] !== undefined
@@ -250,7 +256,8 @@ export default async function makeTool(
                           onOwnChange={(val) =>
                             updateVarField(
                               variable.name,
-                              parseFloat(val),
+                              parseFloat(val.value),
+                              val.unit,
                               values,
                               updateField
                             )
@@ -258,7 +265,6 @@ export default async function makeTool(
                           type="number"
                         />
                       </TableCell>
-                      <TableCell>{variable.unit}</TableCell>
 
                       <TableCell>
                         <Radio
@@ -320,9 +326,9 @@ export default async function makeTool(
                 result.toDecimal()
               );
             }
-            setShortResult(result.toDecimal());
+            setShortResult(parseFloat(result.toDecimal()));
           } else {
-            setShortResult('');
+            setShortResult(NaN);
           }
 
           if (calcData.extraOutputs !== undefined) {