putting the grain form in the component form and adding a custom grain toggle, also tweaked the form to be just the form when no grains are saved and to use a search select and put the form in an accordion when there are saved custom grains

src/component/ComponentForm.tsx

@@ -4,6 +4,7 @@ import {
   AccordionSummary,
   Alert,
   AlertTitle,
+  Box,
   Button,
   Collapse,
   FormControl,
@@ -47,6 +48,7 @@ import { getDistanceUnit } from "utils";
 import { GrainOptions } from "grain";
 import CompModes from "component/ComponentMode.json";
 import FanPicker from "fans/fanPicker";
+import CustomGrainForm from "grain/CustomGrainForm";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -136,6 +138,7 @@ export default function ComponentForm(props: Props) {
     sensorDistance: "0",
   });
   const [compMode, setCompMode] = useState<any>();
+  const [useCustomGrain, setUseCustomGrain] = useState<boolean>(false)
   //const [numCalibrations, setNumCalibrations] = useState(0)
 
   useEffect(() => {
@@ -192,6 +195,10 @@ export default function ComponentForm(props: Props) {
       sensorDistance = sensorDistance / 30.48;
     }
 
+    if(formComponent.settings.customGrain){
+      setUseCustomGrain(true)
+    }
+
     setForm({
       component: formComponent,
       measure: formComponent.settings.measurementPeriodMs > 0,
@@ -383,6 +390,14 @@ export default function ComponentForm(props: Props) {
     setForm(f);
   };
 
+  const updateCustomGrain = (grainSettings?: pond.GrainSettings) => {
+    console.log("update custom grain")
+    let f = cloneDeep(form)
+    f.component.settings.customGrain = grainSettings
+    f.component.settings.grainType = pond.Grain.GRAIN_CUSTOM
+    setForm(f)
+  }
+
   const updateGrainType = (option: Option | null) => {
     let f = cloneDeep(form);
 
@@ -622,13 +637,36 @@ export default function ComponentForm(props: Props) {
   const grainSelect = () => {
     let selected = findSelectedGrain(grainOptions);
     return (
-      <SearchSelect
-        selected={selected}
-        changeSelection={updateGrainType}
-        label="Grain Type"
-        options={grainOptions}
-        group
-      />
+      <React.Fragment>
+        <FormControlLabel
+          control={
+            <Switch
+              value={useCustomGrain}
+              checked={useCustomGrain}
+              title="Custom Grain"
+              onClick={() => {
+                setUseCustomGrain(!useCustomGrain);
+                updateCustomGrain()
+              }}
+            />
+          }
+          label="Custom Grain"
+          labelPlacement="start"
+        />
+        {useCustomGrain ? 
+        <Box sx={{border: "1px solid white", borderRadius: 2, padding: 2, marginBottom: 2}}>
+          <CustomGrainForm onGrainSettingsChange={updateCustomGrain} grainSettings={form.component.customGrainProps()}/>
+        </Box>
+        :
+        <SearchSelect
+          selected={selected}
+          changeSelection={updateGrainType}
+          label="Grain Type"
+          options={grainOptions}
+          group
+          />
+        }
+      </React.Fragment>
     );
   };