Definitely still WIP, this lets you group calc inputs into equivalents

src/components/input/NumericInputWithUnit.tsx

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Grid, TextField, Select, MenuItem } from '@mui/material';
+import { NumberField } from '@base-ui-components/react/number-field';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import Autocomplete from '@mui/material/Autocomplete';
 import Qty from 'js-quantities';
+import { isNull, set } from 'lodash';
 //
 
 const siPrefixes: { [key: string]: number } = {
@@ -21,12 +23,18 @@ export default function NumericInputWithUnit(props: {
   value: { value: number; unit: string };
   disabled?: boolean;
   disableChangingUnit?: boolean;
-  onOwnChange: (value: { value: number; unit: string }, ...baseProps) => void;
+  onOwnChange: (value: { value: number; unit: string }) => void;
   defaultPrefix?: string;
 }) {
   const [inputValue, setInputValue] = useState(props.value.value);
   const [prefix, setPrefix] = useState(props.defaultPrefix || '');
-  const [unit, setUnit] = useState(props.value.unit);
+
+  // internal display unit
+  const [unit, setUnit] = useState('');
+
+  // Whether user has overridden the unit
+  const [userSelectedUnit, setUserSelectedUnit] = useState(false);
+  const [unitKind, setUnitKind] = useState('');
   const [unitOptions, setUnitOptions] = useState<string[]>([]);
 
   const [disabled, setDisabled] = useState(props.disabled);
@@ -38,32 +46,48 @@ export default function NumericInputWithUnit(props: {
     setDisabled(props.disabled);
     setDisableChangingUnit(props.disableChangingUnit);
   }, [props.disabled, props.disableChangingUnit]);
+
   useEffect(() => {
-    try {
+    if (unitKind != Qty(props.value.unit).kind()) {
+      // Update the options for what units similar to this one are available
       const kind = Qty(props.value.unit).kind();
       const units = Qty.getUnits(kind);
       if (!units.includes(props.value.unit)) {
         units.push(props.value.unit);
       }
-
       setUnitOptions(units);
-    } catch (error) {
+      setInputValue(props.value.value);
-      console.error('Invalid unit kind', error);
+      setUnit(props.value.unit);
+      setUnitKind(kind);
+      setUserSelectedUnit(false);
+      return;
     }
-  }, [props.value.unit]);
 
-  useEffect(() => {
+    if (userSelectedUnit) {
-    setInputValue(props.value.value);
+      if (!isNaN(props.value.value)) {
-    setUnit(props.value.unit);
+        const converted = Qty(props.value.value, props.value.unit).to(
-  }, [props.value]);
+          unit
+        ).scalar;
+        setInputValue(converted);
+      } else {
+        setInputValue(props.value.value);
+      }
+    } else {
+      setInputValue(props.value.value);
+      setUnit(props.value.unit);
+    }
+  }, [props.value.value, props.value.unit, unit]);
 
-  const handleValueChange = (val: { value: number; unit: string }) => {
+  const handleUserValueChange = (newValue: number) => {
-    const newValue = val.value;
     setInputValue(newValue);
+
     if (props.onOwnChange) {
       try {
-        const qty = Qty(newValue * siPrefixes[prefix], unit).to(val.unit);
+        const converted = Qty(newValue * siPrefixes[prefix], unit).to(
-        props.onOwnChange({ unit: val.unit, value: qty.scalar });
+          props.value.unit
+        ).scalar;
+
+        props.onOwnChange({ unit: props.value.unit, value: converted });
       } catch (error) {
         console.error('Conversion error', error);
       }
@@ -75,39 +99,19 @@ export default function NumericInputWithUnit(props: {
     const newPrefixValue = siPrefixes[newPrefix];
 
     setPrefix(newPrefix);
-
-    // Value does not change, it is just re-formatted for display
-    // handleValueChange({
-    //   value: (inputValue * oldPrefixValue) / newPrefixValue,
-    //   unit: unit
-    // });
   };
 
-  const handleUnitChange = (newUnit: string) => {
+  const handleUserUnitChange = (newUnit: string) => {
     if (!newUnit) return;
     const oldInputValue = inputValue;
     const oldUnit = unit;
     setUnit(newUnit);
     setPrefix('');
 
-    try {
+    const convertedValue = Qty(oldInputValue * siPrefixes[prefix], oldUnit).to(
-      const convertedValue = Qty(
+      newUnit
-        oldInputValue * siPrefixes[prefix],
+    ).scalar;
-        oldUnit
+    setInputValue(convertedValue);
-      ).to(newUnit).scalar;
-      setInputValue(convertedValue);
-    } 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 (
@@ -119,17 +123,13 @@ export default function NumericInputWithUnit(props: {
     >
       <Grid item xs={4}>
         <TextFieldWithDesc
-          {...props.baseProps}
           disabled={disabled}
           type="number"
           fullWidth
           value={(inputValue / siPrefixes[prefix])
             .toFixed(9)
             .replace(/(\d*\.\d+?)0+$/, '$1')}
-          onOwnChange={(value) =>
+          onOwnChange={(value) => handleUserValueChange(parseFloat(value))}
-            handleValueChange({ value: parseFloat(value), unit: unit })
-          }
-          label="Value"
         />
       </Grid>
 
@@ -140,8 +140,8 @@ export default function NumericInputWithUnit(props: {
           label="Prefix"
           title="Prefix"
           value={prefix}
-          onChange={(event, newValue) => {
+          onChange={(evt) => {
-            handlePrefixChange(newValue?.props?.value || '');
+            handlePrefixChange(evt.target.value || '');
           }}
         >
           {Object.keys(siPrefixes).map((key) => (
@@ -159,8 +159,9 @@ export default function NumericInputWithUnit(props: {
           label="Unit"
           title="Unit"
           value={unit}
-          onChange={(event, newValue) => {
+          onChange={(event) => {
-            handleUnitChange(newValue?.props?.value || '');
+            setUserSelectedUnit(true);
+            handleUserUnitChange(event.target.value || '');
           }}
         >
           {unitOptions.map((key) => (

src/pages/tools/number/generic-calc/data/area_volume.ts

@@ -0,0 +1,50 @@
+import type { GenericCalcType } from './types';
+
+export const areaSphere: GenericCalcType = {
+  title: 'Area of a Sphere',
+  name: 'area-sphere',
+  description: 'Area of a Sphere',
+  formula: 'A = 4 * pi * r**2',
+  selections: [],
+  variables: [
+    {
+      name: 'A',
+      title: 'Area',
+      unit: 'mm2'
+    },
+    {
+      name: 'r',
+      title: 'Radius',
+      unit: 'mm',
+      default: 1
+    }
+  ]
+};
+
+export const volumeSphere: GenericCalcType = {
+  title: 'Volume of a Sphere',
+  name: 'volume-sphere',
+  description: 'Volume of a Sphere',
+  formula: 'v = (4/3) * pi * r**3',
+  selections: [],
+  variables: [
+    {
+      name: 'v',
+      title: 'Volume',
+      unit: 'mm3'
+    },
+    {
+      name: 'r',
+      title: 'Radius',
+      unit: 'mm',
+      default: 1,
+      alternates: [
+        {
+          title: 'Diameter',
+          formula: 'x = 2 * v',
+          unit: 'mm'
+        }
+      ]
+    }
+  ]
+};

src/pages/tools/number/generic-calc/data/index.ts

@@ -1,4 +1,5 @@
 import ohmslaw from './ohms_law';
 import voltagedropinwire from './wire_voltage_drop';
+import { areaSphere, volumeSphere } from './area_volume';
 
-export default [ohmslaw, voltagedropinwire];
+export default [ohmslaw, voltagedropinwire, areaSphere, volumeSphere];

src/pages/tools/number/generic-calc/data/types.ts

@@ -1,3 +1,9 @@
+export interface AlternativeVarInfo {
+  title: string;
+  unit: string;
+  defaultPrefix?: string;
+  formula: string;
+}
 export interface GenericCalcType {
   title: string;
   name: string;
@@ -26,5 +32,14 @@ export interface GenericCalcType {
     defaultPrefix?: string;
     // If absence, assume it's the default target var
     default?: number;
+
+    // If present and false,  don't allow user to select this as output
+    solvable?: boolean;
+
+    // Alternates are alternate ways of entering the exact same thing,
+    // like the diameter or radius.  The formula for an alternate
+    // can use only one variable, always called v, which is the main
+    // variable it's an alternate of
+    alternates?: AlternativeVarInfo[];
   }[];
 }

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

@@ -16,14 +16,38 @@ import ToolTextResult from '@components/result/ToolTextResult';
 import NumericInputWithUnit from '@components/input/NumericInputWithUnit';
 import { UpdateField } from '@components/options/ToolOptions';
 import { InitialValuesType } from './types';
-import type { GenericCalcType } from './data/types';
+import type { AlternativeVarInfo, GenericCalcType } from './data/types';
 import type { DataTable } from 'datatables';
 import { getDataTable, dataTableLookup } from 'datatables';
 
-import nerdamer from 'nerdamer';
+import nerdamer from 'nerdamer-prime';
-import 'nerdamer/Algebra';
+import 'nerdamer-prime/Algebra';
-import 'nerdamer/Solve';
+import 'nerdamer-prime/Solve';
-import 'nerdamer/Calculus';
+import 'nerdamer-prime/Calculus';
+import Qty from 'js-quantities';
+
+function numericSolveEquationFor(
+  equation: string,
+  varName: string,
+  variables: { [key: string]: number }
+) {
+  let expr = nerdamer(equation);
+  for (const key in variables) {
+    expr = expr.sub(key, variables[key].toString());
+  }
+
+  let result: nerdamer.Expression | nerdamer.Expression[] =
+    expr.solveFor(varName);
+
+  // Sometimes the result is an array, check for it while keeping linter happy
+  if ((result as unknown as nerdamer.Expression).toDecimal === undefined) {
+    result = (result as unknown as nerdamer.Expression[])[0];
+  }
+
+  return parseFloat(
+    (result as unknown as nerdamer.Expression).evaluate().toDecimal()
+  );
+}
 
 export default async function makeTool(
   calcData: GenericCalcType
@@ -42,7 +66,15 @@ export default async function makeTool(
 
   return function GenericCalc({ title }: ToolComponentProps) {
     const [result, setResult] = useState<string>('');
-    const [shortResult, setShortResult] = useState<number>('');
+
+    const [alternatesByVariable, setAlternatesByVariable] = useState<{
+      [key: string]: {
+        value: {
+          value: number;
+          unit: string;
+        };
+      }[];
+    }>({});
 
     // For UX purposes we need to track what vars are
     const [valsBoundToPreset, setValsBoundToPreset] = useState<{
@@ -128,6 +160,9 @@ export default async function makeTool(
     };
 
     calcData.variables.forEach((variable) => {
+      if (variable.solvable === undefined) {
+        variable.solvable = true;
+      }
       if (variable.default === undefined) {
         initialValues.vars[variable.name] = {
           value: NaN,
@@ -160,18 +195,72 @@ export default async function makeTool(
       }
     });
 
+    function getAlternate(
+      alternateInfo: AlternativeVarInfo,
+      mainInfo: GenericCalcType['variables'][number],
+      mainValue: {
+        value: number;
+        unit: string;
+      }
+    ) {
+      if (isNaN(mainValue.value)) return NaN;
+      const canonicalValue = Qty(mainValue.value, mainValue.unit).to(
+        mainInfo.unit
+      ).scalar;
+
+      return numericSolveEquationFor(alternateInfo.formula, 'x', {
+        v: canonicalValue
+      });
+    }
+
+    function getMainFromAlternate(
+      alternateInfo: AlternativeVarInfo,
+      mainInfo: GenericCalcType['variables'][number],
+      alternateValue: {
+        value: number;
+        unit: string;
+      }
+    ) {
+      if (isNaN(alternateValue.value)) return NaN;
+      const canonicalValue = Qty(alternateValue.value, alternateValue.unit).to(
+        alternateInfo.unit
+      ).scalar;
+
+      return numericSolveEquationFor(alternateInfo.formula, 'v', {
+        x: canonicalValue
+      });
+    }
+
+    calcData.variables.forEach((variable) => {
+      if (variable.alternates) {
+        variable.alternates.forEach((alt) => {
+          const altValue = getAlternate(
+            alt,
+            variable,
+            initialValues.vars[variable.name]
+          );
+          if (alternatesByVariable[variable.name] === undefined) {
+            alternatesByVariable[variable.name] = [];
+          }
+
+          alternatesByVariable[variable.name].push({
+            value: { value: altValue, unit: variable.unit }
+          });
+        });
+      }
+    });
+
     return (
       <ToolContent
         title={title}
         inputComponent={null}
-        resultComponent={
-          <ToolTextResult title={calcData.title} value={result} />
-        }
         initialValues={initialValues}
         toolInfo={{
-          title: 'Common Equations',
+          title: calcData.title,
           description:
-            'Common mathematical equations that can be used in calculations.'
+            (calcData.description || '') +
+            ' Generated from formula: ' +
+            calcData.formula
         }}
         getGroups={({ values, updateField }) => [
           {
@@ -227,7 +316,6 @@ export default async function makeTool(
               <Table>
                 <TableHead>
                   <TableRow>
-                    <TableCell>Variable</TableCell>
                     <TableCell>Value</TableCell>
                     <TableCell>Solve For</TableCell>
                   </TableRow>
@@ -235,38 +323,80 @@ export default async function makeTool(
                 <TableBody>
                   {calcData.variables.map((variable) => (
                     <TableRow key={variable.name}>
-                      <TableCell>{variable.title}</TableCell>
                       <TableCell>
-                        <NumericInputWithUnit
+                        <Table>
-                          title={variable.title}
+                          <TableRow>
-                          description={valsBoundToPreset[variable.name] || ''}
+                            <TableCell>{variable.title}</TableCell>
-                          defaultPrefix={variable.defaultPrefix}
+                            <TableCell>
-                          value={{
+                              <NumericInputWithUnit
-                            value:
+                                description={
-                              values.outputVariable === variable.name
+                                  valsBoundToPreset[variable.name] || ''
-                                ? shortResult
+                                }
-                                : values.vars[variable.name]?.value || NaN,
+                                defaultPrefix={variable.defaultPrefix}
-                            unit: values.vars[variable.name]?.unit || ''
+                                value={values.vars[variable.name]}
-                          }}
+                                disabled={
-                          disabled={
+                                  values.outputVariable === variable.name ||
-                            values.outputVariable === variable.name ||
+                                  valsBoundToPreset[variable.name] !== undefined
-                            valsBoundToPreset[variable.name] !== undefined
+                                }
-                          }
+                                disableChangingUnit={
-                          disableChangingUnit={
+                                  valsBoundToPreset[variable.name] !== undefined
-                            values.outputVariable === variable.name ||
+                                }
-                            valsBoundToPreset[variable.name] !== undefined
+                                onOwnChange={(val) =>
-                          }
+                                  updateVarField(
-                          onOwnChange={(val) =>
+                                    variable.name,
-                            updateVarField(
+                                    val.value,
-                              variable.name,
+                                    val.unit,
-                              parseFloat(val.value),
+                                    values,
-                              val.unit,
+                                    updateField
-                              values,
+                                  )
-                              updateField
+                                }
-                            )
+                                type="number"
-                          }
+                              />
-                          type="number"
+                            </TableCell>
-                        />
+                          </TableRow>
+
+                          {variable.alternates?.map((alt) => (
+                            <TableRow key={alt.title}>
+                              <TableCell>{alt.title}</TableCell>
+                              <TableCell>
+                                <NumericInputWithUnit
+                                  key={alt.title}
+                                  description={
+                                    valsBoundToPreset[alt.title] || ''
+                                  }
+                                  defaultPrefix={alt.defaultPrefix || ''}
+                                  value={{
+                                    value:
+                                      getAlternate(
+                                        alt,
+                                        variable,
+                                        values.vars[variable.name]
+                                      ) || NaN,
+                                    unit: alt.unit || ''
+                                  }}
+                                  disabled={
+                                    values.outputVariable === variable.name ||
+                                    valsBoundToPreset[variable.name] !==
+                                      undefined
+                                  }
+                                  disableChangingUnit={
+                                    valsBoundToPreset[variable.name] !==
+                                    undefined
+                                  }
+                                  onOwnChange={(val) =>
+                                    updateVarField(
+                                      variable.name,
+                                      getMainFromAlternate(alt, variable, val),
+                                      variable.unit,
+                                      values,
+                                      updateField
+                                    )
+                                  }
+                                ></NumericInputWithUnit>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </Table>
                       </TableCell>
 
                       <TableCell>
@@ -274,7 +404,8 @@ export default async function makeTool(
                           value={variable.name}
                           checked={values.outputVariable === variable.name}
                           disabled={
-                            valsBoundToPreset[variable.name] !== undefined
+                            valsBoundToPreset[variable.name] !== undefined ||
+                            variable.solvable === false
                           }
                           onClick={() =>
                             handleSelectedTargetChange(
@@ -292,7 +423,6 @@ export default async function makeTool(
                       <TableCell>{extraOutput.title}</TableCell>
                       <TableCell>
                         <NumericInputWithUnit
-                          title={extraOutput.title}
                           disabled={true}
                           defaultPrefix={extraOutput.defaultPrefix}
                           value={{
@@ -322,12 +452,23 @@ export default async function makeTool(
             expr = expr.sub(key, values.vars[key].value.toString());
           });
 
-          let result: nerdamer.Expression = expr.solveFor(
+          let result: nerdamer.Expression | nerdamer.Expression[] =
-            values.outputVariable
+            expr.solveFor(values.outputVariable);
-          );
 
           // Sometimes the result is an array
-          if (result.toDecimal === undefined) {
+          if (
+            (result as unknown as nerdamer.Expression).toDecimal === undefined
+          ) {
+            if ((result as unknown as nerdamer.Expression[])?.length < 1) {
+              values.vars[values.outputVariable].value = NaN;
+              if (calcData.extraOutputs !== undefined) {
+                for (let i = 0; i < calcData.extraOutputs.length; i++) {
+                  const extraOutput = calcData.extraOutputs[i];
+                  extraOutputs[extraOutput.title] = NaN;
+                }
+              }
+              throw new Error('No solution found for this input');
+            }
             result = (result as unknown as nerdamer.Expression[])[0];
           }
 
@@ -336,12 +477,13 @@ export default async function makeTool(
           if (result) {
             if (values.vars[values.outputVariable] != undefined) {
               values.vars[values.outputVariable].value = parseFloat(
-                result.toDecimal()
+                (result as unknown as nerdamer.Expression)
+                  .evaluate()
+                  .toDecimal()
               );
             }
-            setShortResult(parseFloat(result.toDecimal()));
           } else {
-            setShortResult(NaN);
+            values.vars[values.outputVariable].value = NaN;
           }
 
           if (calcData.extraOutputs !== undefined) {
@@ -355,6 +497,7 @@ export default async function makeTool(
                 expr = expr.sub(key, values.vars[key].value.toString());
               });
 
+              // todo could this have multiple solutions too?
               const result: nerdamer.Expression = expr.evaluate();
 
               if (result) {