refactor: remove unnecessary state and ui improvements

.idea/workspace.xml

@@ -4,26 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: compress video icon">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="refactor: init">
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/sphereArea.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/sphereVolume.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/home/daniel/Projects/omni-tools/src/pages/tools/index.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/home/daniel/Projects/omni-tools/src/pages/tools/number/calculators/index.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/home/daniel/Projects/omni-tools/src/pages/tools/number/index.ts" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/ToolContent.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolContent.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/input/NumericInputWithUnit.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/input/NumericInputWithUnit.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/datatables/data/index.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptions.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/datatables/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/datatables/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/datatables/types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/datatables/types.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/area_volume.ts" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/ohms_law.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/ohms_law.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/types.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/wire_voltage_drop.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/data/wire_voltage_drop.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/generic-calc/service.ts" beforeDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -415,14 +401,6 @@
       <workItem from="1743103182313" duration="4264000" />
       <workItem from="1743348610793" duration="21855000" />
     </task>
-    <task id="LOCAL-00127" summary="chore: show tooloptions in example">
-      <option name="closed" value="true" />
-      <created>1740619610168</created>
-      <option name="number" value="00127" />
-      <option name="presentableId" value="LOCAL-00127" />
-      <option name="project" value="LOCAL" />
-      <updated>1740619610169</updated>
-    </task>
     <task id="LOCAL-00128" summary="refact: examples">
       <option name="closed" value="true" />
       <created>1740620866551</created>
@@ -807,7 +785,15 @@
       <option name="project" value="LOCAL" />
       <updated>1743355166426</updated>
     </task>
-    <option name="localTasksCounter" value="176" />
+    <task id="LOCAL-00176" summary="refactor: init">
+      <option name="closed" value="true" />
+      <created>1743827787241</created>
+      <option name="number" value="00176" />
+      <option name="presentableId" value="LOCAL-00176" />
+      <option name="project" value="LOCAL" />
+      <updated>1743827787241</updated>
+    </task>
+    <option name="localTasksCounter" value="177" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -854,7 +840,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="style: tools height" />
     <MESSAGE value="chore: update meta" />
     <MESSAGE value="feat: change pgn opacity" />
     <MESSAGE value="feat: crop png" />
@@ -879,7 +864,8 @@
     <MESSAGE value="fix: typos" />
     <MESSAGE value="feat: compress video" />
     <MESSAGE value="chore: compress video icon" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: compress video icon" />
+    <MESSAGE value="refactor: init" />
+    <option name="LAST_COMMIT_MESSAGE" value="refactor: init" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/components/ToolContent.tsx

@@ -57,6 +57,7 @@ interface ToolContentProps<T, I> extends ToolComponentProps {
   setInput?: React.Dispatch<React.SetStateAction<I>>;
   validationSchema?: any;
   onValuesChange?: (values: T) => void;
+  verticalGroups?: boolean;
 }
 
 export default function ToolContent<T extends FormikValues, I>({
@@ -72,7 +73,8 @@ export default function ToolContent<T extends FormikValues, I>({
   setInput,
   validationSchema,
   renderCustomInput,
-  onValuesChange
+  onValuesChange,
+  verticalGroups
 }: ToolContentProps<T, I>) {
   return (
     <Box>
@@ -97,7 +99,7 @@ export default function ToolContent<T extends FormikValues, I>({
                 input={input}
                 onValuesChange={onValuesChange}
               />
-              <ToolOptions getGroups={getGroups} />
+              <ToolOptions getGroups={getGroups} vertical={verticalGroups} />
 
               {toolInfo && toolInfo.title && toolInfo.description && (
                 <ToolInfo

src/components/input/NumericInputWithUnit.tsx

@@ -143,8 +143,6 @@ export default function NumericInputWithUnit(props: {
         <Select
           fullWidth
           disabled={disableChangingUnit}
-          label="Prefix"
-          title="Prefix"
           value={prefix}
           onChange={(evt) => {
             handlePrefixChange(evt.target.value || '');

src/components/options/ToolOptions.tsx

@@ -13,10 +13,12 @@ export type GetGroupsType<T> = (
 
 export default function ToolOptions<T extends FormikValues>({
   children,
-  getGroups
+  getGroups,
+  vertical
 }: {
   children?: ReactNode;
   getGroups: GetGroupsType<T> | null;
+  vertical?: boolean;
 }) {
   const theme = useTheme();
   const formikContext = useFormikContext<T>();
@@ -49,6 +51,7 @@ export default function ToolOptions<T extends FormikValues>({
         <Stack direction={'row'} spacing={2}>
           <ToolOptionGroups
             groups={getGroups({ ...formikContext, updateField }) ?? []}
+            vertical={vertical}
           />
           {children}
         </Stack>

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

@@ -2,6 +2,7 @@ import {
   Autocomplete,
   Box,
   Radio,
+  Stack,
   Table,
   TableBody,
   TableCell,
@@ -24,6 +25,8 @@ import 'nerdamer-prime/Solve';
 import 'nerdamer-prime/Calculus';
 import Qty from 'js-quantities';
 import { CustomSnackBarContext } from 'contexts/CustomSnackBarContext';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
 
 function numericSolveEquationFor(
   equation: string,
@@ -59,14 +62,6 @@ export default async function makeTool(
 
   return function GenericCalc({ title }: ToolComponentProps) {
     const { showSnackBar } = useContext(CustomSnackBarContext);
-    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<{
@@ -110,12 +105,17 @@ export default async function makeTool(
       newPresets[selection] = preset;
       updateFieldFunc('presets', newPresets);
 
-      // Clear old selection
+      // Clear old selection using setState callback pattern
-      for (const key in valsBoundToPreset) {
+      setValsBoundToPreset((prevState) => {
-        if (valsBoundToPreset[key] === selection) {
+        const newState = { ...prevState };
-          delete valsBoundToPreset[key];
+        // Remove all keys bound to this selection
-        }
+        Object.keys(newState).forEach((key) => {
-      }
+          if (newState[key] === selection) {
+            delete newState[key];
+          }
+        });
+        return newState;
+      });
 
       const selectionData = calcData.presets?.find(
         (sel) => sel.title === selection
@@ -123,8 +123,12 @@ export default async function makeTool(
 
       if (preset && preset != '<custom>') {
         if (selectionData) {
+          // Create an object with the new bindings
+          const newBindings: { [key: string]: string } = {};
+
           for (const key in selectionData.bind) {
-            valsBoundToPreset[key] = selection;
+            // Add to newBindings for later state update
+            newBindings[key] = selection;
 
             if (currentValues.outputVariable === key) {
               handleSelectedTargetChange('', updateFieldFunc);
@@ -142,6 +146,12 @@ export default async function makeTool(
               updateFieldFunc
             );
           }
+
+          // Update state with new bindings
+          setValsBoundToPreset((prevState) => ({
+            ...prevState,
+            ...newBindings
+          }));
         } else {
           throw new Error(
             `Preset "${preset}" is not valid for selection "${selection}"`
@@ -179,7 +189,7 @@ export default async function makeTool(
 
           unit: selection.source.columns[selection.bind[key]]?.unit || ''
         };
-        valsBoundToPreset[key] = selection.title;
+        // We'll set this in useEffect instead of directly modifying state
       }
     });
 
@@ -219,25 +229,6 @@ export default async function makeTool(
       });
     }
 
-    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}
@@ -250,52 +241,48 @@ export default async function makeTool(
             ' Generated from formula: ' +
             calcData.formula
         }}
+        verticalGroups
         getGroups={({ values, updateField }) => [
           ...(calcData.presets?.length
             ? [
                 {
                   title: 'Presets',
                   component: (
-                    <Box>
+                    <Grid container spacing={2} maxWidth={500}>
-                      <Table>
+                      {calcData.presets?.map((preset) => (
-                        <TableHead>
+                        <Grid item xs={12} key={preset.title}>
-                          <TableRow>
+                          <Stack
-                            <TableCell>Option</TableCell>
+                            direction={'row'}
-                            <TableCell>Value</TableCell>
+                            spacing={2}
-                          </TableRow>
+                            alignItems={'center'}
-                        </TableHead>
+                            justifyContent={'space-between'}
-                        <TableBody>
+                          >
-                          {calcData.presets?.map((preset) => (
+                            <Typography>{preset.title}</Typography>
-                            <TableRow key={preset.title}>
+                            <Autocomplete
-                              <TableCell>{preset.title}</TableCell>
+                              disablePortal
-                              <TableCell>
+                              id="combo-box-demo"
-                                <Autocomplete
+                              value={values.presets[preset.title]}
-                                  disablePortal
+                              options={[
-                                  id="combo-box-demo"
+                                '<custom>',
-                                  value={values.presets[preset.title]}
+                                ...Object.keys(preset.source.data).sort()
-                                  options={[
+                              ]}
-                                    '<custom>',
+                              sx={{ width: 300 }}
-                                    ...Object.keys(preset.source.data).sort()
+                              onChange={(event, newValue) => {
-                                  ]}
+                                handleSelectedPresetChange(
-                                  sx={{ width: 300 }}
+                                  preset.title,
-                                  onChange={(event, newValue) => {
+                                  newValue || '',
-                                    handleSelectedPresetChange(
+                                  values,
-                                      preset.title,
+                                  updateField
-                                      newValue || '',
+                                );
-                                      values,
+                              }}
-                                      updateField
+                              renderInput={(params) => (
-                                    );
+                                <TextField {...params} label="Preset" />
-                                  }}
+                              )}
-                                  renderInput={(params) => (
+                            />
-                                    <TextField {...params} label="Preset" />
+                          </Stack>
-                                  )}
+                        </Grid>
-                                ></Autocomplete>
+                      ))}
-                              </TableCell>
+                    </Grid>
-                            </TableRow>
-                          ))}
-                        </TableBody>
-                      </Table>
-                    </Box>
                   )
                 }
               ]
@@ -400,8 +387,15 @@ export default async function makeTool(
                       </TableCell>
                     </TableRow>
                   ))}
-
+                </TableBody>
-                  {calcData.extraOutputs?.map((extraOutput) => (
+              </Table>
+            )
+          },
+          ...(calcData.extraOutputs
+            ? [
+                {
+                  title: 'Extra outputs',
+                  component: calcData.extraOutputs?.map((extraOutput) => (
                     <TableRow key={extraOutput.title}>
                       <TableCell>
                         {extraOutput.title}
@@ -412,15 +406,14 @@ export default async function makeTool(
                             value: extraOutputs[extraOutput.title],
                             unit: extraOutput.unit
                           }}
-                        ></NumericInputWithUnit>
+                        />
                       </TableCell>
                       <TableCell></TableCell>
                     </TableRow>
-                  ))}
+                  ))
-                </TableBody>
+                }
-              </Table>
+              ]
-            )
+            : [])
-          }
         ]}
         compute={(values) => {
           if (values.outputVariable === '') {
@@ -429,10 +422,10 @@ export default async function makeTool(
           }
           let expr: nerdamer.Expression | null = null;
 
-          for (const i of calcData.variables) {
+          for (const variable of calcData.variables) {
-            if (i.name === values.outputVariable) {
+            if (variable.name === values.outputVariable) {
-              if (i.formula !== undefined) {
+              if (variable.formula !== undefined) {
-                expr = nerdamer(i.formula);
+                expr = nerdamer(variable.formula);
               }
             }
           }
@@ -442,7 +435,6 @@ export default async function makeTool(
           }
           if (expr == null) {
             throw new Error('No formula found');
-            return;
           }
 
           Object.keys(values.vars).forEach((key) => {
@@ -463,10 +455,15 @@ export default async function makeTool(
             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++) {
+                // Update extraOutputs using setState
-                  const extraOutput = calcData.extraOutputs[i];
+                setExtraOutputs((prevState) => {
-                  extraOutputs[extraOutput.title] = NaN;
+                  const newState = { ...prevState };
-                }
+                  for (let i = 0; i < calcData.extraOutputs!.length; i++) {
+                    const extraOutput = calcData.extraOutputs![i];
+                    newState[extraOutput.title] = NaN;
+                  }
+                  return newState;
+                });
               }
               throw new Error('No solution found for this input');
             }
@@ -500,9 +497,11 @@ export default async function makeTool(
               const result: nerdamer.Expression = expr.evaluate();
 
               if (result) {
-                extraOutputs[extraOutput.title] = parseFloat(
+                // Update extraOutputs state properly
-                  result.toDecimal()
+                setExtraOutputs((prevState) => ({
-                );
+                  ...prevState,
+                  [extraOutput.title]: parseFloat(result.toDecimal())
+                }));
               }
             }
           }