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>
     );
   };
 

src/grain/CustomGrainForm.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, MenuItem, TextField, Typography } from "@mui/material"
+import { ExpandMore } from "@mui/icons-material"
+import { Accordion, AccordionDetails, AccordionSummary, Box, Button, MenuItem, TextField, Typography } from "@mui/material"
 import SearchSelect, { Option } from "common/SearchSelect"
 import { cloneDeep } from "lodash"
 import { pond } from "protobuf-ts/pond"
@@ -45,9 +46,9 @@ export default function CustomGrainForm(props: Props) {
 
   useEffect(()=>{
     grainAPI.listGrains(0, 0, "asc", "name", undefined, undefined, undefined, as).then(resp => {
+      let options: Option[] = []
+      let map: Map<string, pond.GrainObject> = new Map()
       if (resp.data.grains){
-        let map: Map<string, pond.GrainObject> = new Map()
-        let options: Option[] = []
         resp.data.grains.forEach(grain => {
           map.set(grain.key, grain)
           options.push({
@@ -56,9 +57,9 @@ export default function CustomGrainForm(props: Props) {
             group: grain.settings?.group,
           })
         })
-        setGrainOptions(options)
-        setGrainMap(map)
       }
+      setGrainOptions(options)
+      setGrainMap(map)
     })
   },[grainAPI])
 
@@ -83,43 +84,13 @@ export default function CustomGrainForm(props: Props) {
   }
 
   const settingsChanged = (newSettings: pond.GrainSettings) => {
-    setSelectedOption(null)
     setNewGrainSettings(newSettings)
     onGrainSettingsChange(newSettings)
   }
 
-  return (
-    <React.Fragment>
-      <Box sx={{marginBottom: 2}}>
-        <SearchSelect
-          label="My Grains"
-          selected={selectedOption}
-          changeSelection={option => {
-            setIsNew(false)
-            setSelectedOption(option)
-            //when an option is selected set all of the state variables controlling the form entries
-            let grain = grainMap.get(option?.value)
-            if(grain && grain.settings){
-              //set the form values
-              setName(grain.name)
-              setGroup(grain.settings.group)
-              setEquation(grain.settings.equation)
-              setConstantA(grain.settings.a.toString())
-              setConstantB(grain.settings.b.toString())
-              setConstantC(grain.settings.c.toString())
-              setKgPerBushel(grain.settings.kgPerBushel.toString())
-              setBushelsPerTonne(grain.settings.bushelsPerTonne.toString())
-              //the the new grain settings object
-              setNewGrainSettings(grain.settings)
-              //pass that settings object back up
-              settingsChanged(grain.settings)
-            }
-          }}
-          group
-          options={grainOptions}
-          />
-      </Box>
-        <Typography sx={{marginBottom: 1}}>Custom Grain Properties</Typography>
+  const newGrain = () => {
+    return (
+      <React.Fragment>
         <TextField 
           sx={{marginBottom: 2}} 
           fullWidth 
@@ -281,6 +252,63 @@ export default function CustomGrainForm(props: Props) {
             </Button>
           </Box>
         }
+      </React.Fragment>
+    )
+  }
+
+  const grainAccordion = () => {
+    return (
+      <Accordion>
+       <AccordionSummary expandIcon={<ExpandMore />}>Custom Grain Properties</AccordionSummary> 
+       <AccordionDetails>
+        {newGrain()}
+       </AccordionDetails>
+      </Accordion>
+    )
+  }
+
+  return (
+    <React.Fragment>
+      {grainOptions.length === 0 ? 
+        <Box>
+          <Typography sx={{marginBottom: 1}}>Custom Grain Properties</Typography>
+          {newGrain()}
+        </Box>
+      :
+      <Box>
+          <Box sx={{marginBottom: 2}}>
+            <SearchSelect
+              label="My Grains"
+              selected={selectedOption}
+              changeSelection={option => {
+                setIsNew(false)
+                setSelectedOption(option)
+                //when an option is selected set all of the state variables controlling the form entries
+                let grain = grainMap.get(option?.value)
+                if(grain && grain.settings){
+                  //set the form values
+                  setName(grain.name)
+                  setGroup(grain.settings.group)
+                  setEquation(grain.settings.equation)
+                  setConstantA(grain.settings.a.toString())
+                  setConstantB(grain.settings.b.toString())
+                  setConstantC(grain.settings.c.toString())
+                  setKgPerBushel(grain.settings.kgPerBushel.toString())
+                  setBushelsPerTonne(grain.settings.bushelsPerTonne.toString())
+                  //the the new grain settings object
+                  setNewGrainSettings(grain.settings)
+                  //pass that settings object back up
+                  settingsChanged(grain.settings)
+                }
+              }}
+              group
+              options={grainOptions}
+            />
+          </Box>
+          {grainAccordion()}
+        </Box>
+
+      }
     </React.Fragment>
   )
 }

src/models/Component.ts

@@ -142,4 +142,9 @@ export class Component {
         return getFriendlyAddressTypeName(this.settings.addressType);
       }
     };
+
+  public customGrainProps(): pond.GrainSettings | undefined {
+    if(this.settings.customGrain) return this.settings.customGrain
+    return
+  }
 }