Usable proof of concept of generated variables

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

@@ -1,6 +1,7 @@
 import {
   Box,
-  InputLabel,
+  Autocomplete,
+  TextField,
   Radio,
   Table,
   TableBody,
@@ -13,54 +14,41 @@ import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolTextResult from '@components/result/ToolTextResult';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
-import { GetGroupsType, UpdateField } from '@components/options/ToolOptions';
+import { UpdateField } from '@components/options/ToolOptions';
 import { InitialValuesType } from './types';
+import type { GenericCalcType } from './data/types';
+import type { DataTable } from 'datatables';
+import { getDataTable } from 'datatables';
 
 import nerdamer from 'nerdamer';
 import 'nerdamer/Algebra';
 import 'nerdamer/Solve';
 import 'nerdamer/Calculus';
 
-const ohmsLawCalc: {
-  name: string;
-  formula: string;
-  variables: {
-    name: string;
-    title: string;
-    unit: string;
-  }[];
-} = {
-  name: "Ohm's Law Calculator",
-  formula: 'V = I * R',
-  variables: [
-    {
-      name: 'V',
-      title: 'Voltage',
-      unit: 'V'
-    },
-    {
-      name: 'I',
-      title: 'Current',
-      unit: 'A'
-    },
-    {
-      name: 'R',
-      title: 'Resistance',
-      unit: 'Ω'
-    }
-  ]
-};
-
-export default function makeTool(): React.JSXElementConstructor<ToolComponentProps> {
+export default async function makeTool(
+  calcData: GenericCalcType
+): Promise<React.JSXElementConstructor<ToolComponentProps>> {
   const initialValues: InitialValuesType = {
     outputVariable: '',
-    vars: {}
+    vars: {},
+    presets: {}
   };
 
+  const dataTables: { [key: string]: DataTable } = {};
+
+  for (const selection of calcData.selections || []) {
+    dataTables[selection.source] = await getDataTable(selection.source);
+  }
+
   return function GenericCalc({ title }: ToolComponentProps) {
     const [result, setResult] = useState<string>('');
     const [shortResult, setShortResult] = useState<string>('');
 
+    // For UX purposes we need to track what vars are
+    const [valsBoundToPreset, setValsBoundToPreset] = useState<{
+      [key: string]: string;
+    }>({});
+
     const updateVarField = (
       name: string,
       value: number,
@@ -83,12 +71,89 @@ export default function makeTool(): React.JSXElementConstructor<ToolComponentPro
       updateFieldFunc('outputVariable', varName);
     };
 
+    const handleSelectedPresetChange = (
+      selection: string,
+      preset: string,
+      currentValues: InitialValuesType,
+      updateFieldFunc: UpdateField<InitialValuesType>
+    ) => {
+      const newValsBoundToPreset = { ...valsBoundToPreset };
+
+      const newPresets = { ...currentValues.presets };
+      newPresets[selection] = preset;
+      updateFieldFunc('presets', newPresets);
+
+      // Clear old selection
+      for (const key in valsBoundToPreset) {
+        if (valsBoundToPreset[key] === selection) {
+          delete newValsBoundToPreset[key];
+        }
+      }
+
+      const selectionData = calcData.selections?.find(
+        (sel) => sel.title === selection
+      );
+
+      if (preset != '<custom>') {
+        if (selectionData) {
+          for (const key in selectionData.bind) {
+            newValsBoundToPreset[key] = selection;
+            updateVarField(
+              key,
+              dataTables[selectionData.source].data[preset][
+                selectionData.bind[key]
+              ],
+              currentValues,
+              updateFieldFunc
+            );
+          }
+        } else {
+          setValsBoundToPreset(newValsBoundToPreset);
+          throw new Error(
+            `Preset "${preset}" is not valid for selection "${selection}"`
+          );
+        }
+      }
+
+      setValsBoundToPreset(newValsBoundToPreset);
+    };
+
+    calcData.variables.forEach((variable) => {
+      if (variable.default === undefined) {
+        initialValues.vars[variable.name] = {
+          value: NaN,
+          unit: variable.unit
+        };
+        initialValues.outputVariable = variable.name;
+      } else {
+        initialValues.vars[variable.name] = {
+          value: variable.default || 0,
+          unit: variable.unit
+        };
+      }
+    });
+
+    calcData.selections?.forEach((selection) => {
+      initialValues.presets[selection.title] = selection.default;
+      if (selection.default == '<custom>') return;
+      for (const key in selection.bind) {
+        initialValues.vars[key] = {
+          value:
+            dataTables[selection.source].data[selection.default][
+              selection.bind[key]
+            ],
+          unit: dataTables[selection.source].cols[selection.bind[key]].unit
+        };
+        valsBoundToPreset[key] = selection.default;
+      }
+    });
+
     return (
       <ToolContent
         title={title}
         inputComponent={null}
         resultComponent={
-          <ToolTextResult title={ohmsLawCalc.name} value={result} />
+          <ToolTextResult title={calcData.title} value={result} />
         }
         initialValues={initialValues}
         toolInfo={{
@@ -97,6 +162,50 @@ export default function makeTool(): React.JSXElementConstructor<ToolComponentPro
             'Common mathematical equations that can be used in calculations.'
         }}
         getGroups={({ values, updateField }) => [
+          {
+            title: 'Presets',
+            component: (
+              <Box>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Option</TableCell>
+                      <TableCell>Value</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {calcData.selections?.map((preset) => (
+                      <TableRow key={preset.title}>
+                        <TableCell>{preset.title}</TableCell>
+                        <TableCell>
+                          <Autocomplete
+                            disablePortal
+                            id="combo-box-demo"
+                            value={values.presets[preset.title]}
+                            options={Object.keys(
+                              dataTables[preset.source].data
+                            ).sort()}
+                            sx={{ width: 300 }}
+                            onChange={(event, newValue) => {
+                              handleSelectedPresetChange(
+                                preset.title,
+                                newValue || '',
+                                values,
+                                updateField
+                              );
+                            }}
+                            renderInput={(params) => (
+                              <TextField {...params} label="Preset" />
+                            )}
+                          ></Autocomplete>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </Box>
+            )
+          },
           {
             title: 'Input Variables',
             component: (
@@ -110,20 +219,23 @@ export default function makeTool(): React.JSXElementConstructor<ToolComponentPro
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {ohmsLawCalc.variables.map((variable) => (
+                  {calcData.variables.map((variable) => (
                     <TableRow key={variable.name}>
                       <TableCell>{variable.name}</TableCell>
                       <TableCell>
                         <TextFieldWithDesc
                           title={variable.title}
                           sx={{ width: '25ch' }}
-                          description=""
+                          description={valsBoundToPreset[variable.name] || ''}
                           value={
                             values.outputVariable === variable.name
                               ? shortResult
                               : values.vars[variable.name]?.value || NaN
                           }
-                          disabled={values.outputVariable === variable.name}
+                          disabled={
+                            values.outputVariable === variable.name ||
+                            valsBoundToPreset[variable.name] !== undefined
+                          }
                           onOwnChange={(val) =>
                             updateVarField(
                               variable.name,
@@ -161,7 +273,7 @@ export default function makeTool(): React.JSXElementConstructor<ToolComponentPro
             setResult('Please select a solve for variable');
             return;
           }
-          let expr = nerdamer(ohmsLawCalc.formula);
+          let expr = nerdamer(calcData.formula);
 
           Object.keys(values.vars).forEach((key) => {
             if (key === values.outputVariable) return;