building up the framework for the three phase fan interaction

src/bin/binModes/BinModeController.tsx

@@ -12,6 +12,7 @@ import { useBinAPI, useComponentAPI, useInteractionsAPI } from "providers";
 import { ComponentSet } from "bin/conditioning/pickComponentSet";
 import { cloneDeep } from "lodash";
 import { Controller } from "models/Controller";
+import ThreePhaseFanDry from "./ThreePhaseFanDry";
 
 export interface DeviceChangeData {
     /**
@@ -232,6 +233,10 @@ export default function BinModeController(props: Props) {
                       setShowProgress(true)
                   }}
                 />
+            case pond.BinMode.BIN_MODE_THREE_PHASE_FAN_DRYING:
+                return <ThreePhaseFanDry 
+                  deviceComponents={deviceComponents}
+                />
             default:
                 return <StorageMode 
                     devices={devices} 

src/bin/binModes/CooldownMode.tsx

@@ -64,7 +64,7 @@ export default function CooldownMode(props: Props){
     const [fans, setFans] = useState<Controller[]>([])
     const [cables, setCables] = useState<GrainCable[]>([])
     const [currentStep, setCurrentStep] = useState(0)
-    const [interactionLoading,setInteractionsLoading] = useState(false)
+    const [interactionsLoading,setInteractionsLoading] = useState(false)
     
     // possibly all 4 of these will need to be passed up, at least the conflicting, toAdd, and sets will
     const [componentSets, setComponentSets] = useState<ComponentSet[]>([])
@@ -298,7 +298,7 @@ export default function CooldownMode(props: Props){
             <Box>
                 <Typography>Select the device to condition the bin</Typography>
                 {deviceSelector()}
-                {interactionLoading ? <CircularProgress /> :
+                {interactionsLoading ? <CircularProgress /> :
                   <ConditioningSelector 
                     plenums={plenums} 
                     ambients={ambients} 

src/bin/binModes/ThreePhaseFanDry.tsx

@@ -0,0 +1,230 @@
+import React, { useState } from "react"
+import { Autocomplete, Box, Button, CircularProgress, DialogActions, DialogContent, DialogTitle, Step, StepLabel, Stepper, TextField, Theme, Typography } from "@mui/material"
+import { makeStyles } from "@mui/styles";
+import { pond } from "protobuf-ts/pond";
+import ConditioningSelector from "bin/conditioning/conditioningSelector";
+import { Component, Device, Interaction } from "models";
+import { Plenum } from "models/Plenum";
+import { Ambient } from "models/Ambient";
+import { Controller } from "models/Controller";
+import { GrainCable } from "models/GrainCable";
+import { ComponentSet } from "bin/conditioning/pickComponentSet";
+import { sameComponentID } from "pbHelpers/Component";
+
+
+const steps = [{label: "Device"}, {label: "Phase 1"}, {label: "Phase 2"}, {label: "Phase 3"}]
+
+
+const useStyles = makeStyles((theme: Theme) => {
+    return ({
+      stepper: {
+        padding: theme.spacing(0.5)
+      },
+    })
+  });
+
+  interface Option {
+    label: string;
+    device: Device;
+    icon?: string;
+  }
+
+interface Props {
+    deviceComponents: Map<number, Component[]>
+}
+
+export default function ThreePhaseFanDry(props: Props){
+    const {deviceComponents} = props
+    const classes = useStyles()
+    const [currentStep, setCurrentStep] = useState(0)
+    const [options, setOptions] = useState<Option[]>([])
+    const [deviceOption, setDeviceOption] = useState<Option>({device: Device.create(), label: "Select Device"})
+    const [selectedDevice, setSelectedDevice] = useState<Device | undefined>()
+    const [interactionsLoading,setInteractionsLoading] = useState(false)
+    const [plenums, setPlenums] = useState<Plenum[]>([])
+    const [ambients, setAmbients] = useState<Ambient[]>([])
+    const [fans, setFans] = useState<Controller[]>([])
+    const [cables, setCables] = useState<GrainCable[]>([])
+    const [existingInteractions, setExistingInteractions] = useState<Interaction[]>([])
+    const [componentSets, setComponentSets] = useState<ComponentSet[]>([])
+    const [conflictingInteractions, setConflictingInteractions] = useState<Interaction[]>([])
+    const [interactionsToAdd, setInteractionsToAdd] = useState<pond.MultiInteractionSettings>()
+
+
+    
+    //each of the functions that builds the interactions
+    const buildPhase1Interaction = () => {}
+    const buildPhase2Interaction = () => {}
+    const buildPhase3Interaction = () => {}
+
+    const phase1Step = () => {
+        return (
+            <React.Fragment></React.Fragment>
+        )
+    }
+    const phase2Step = () => {
+        return (
+            <React.Fragment></React.Fragment>
+        )
+    }
+    const phase3Step = () => {
+        return (
+            <React.Fragment></React.Fragment>
+        )
+    }
+
+    const deviceSelector = () => {
+        return (
+          <Autocomplete
+            disablePortal
+            options={options}
+            value={deviceOption}
+            fullWidth
+            getOptionLabel={option => option.label || ""}
+            onChange={(_, newValue) => {
+              if(newValue){
+                setSelectedDevice(newValue.device);
+              }
+            }}
+            renderInput={params => <TextField {...params} variant="outlined" label="Device" />}
+          />
+        )
+      }
+
+            //this function just takes in the sets as they change and creates the list of conflicting interactions and the settings to create the new ones and returns them
+  const createInteractions = (sets: ComponentSet[]) => {
+    if(!selectedDevice) return undefined //if there is no device that was selected, do nothing
+    let multiInteractionSettings: pond.MultiInteractionSettings = pond.MultiInteractionSettings.create()
+    let conflictingInteractions: Interaction[] = []
+    let linkedComponents = deviceComponents.get(selectedDevice.id());
+    //loop through the sets to find interactions to remove as well as set the new ones
+    sets.forEach((set) => {
+      //loop through the controllers
+      set.controllers.forEach(controller => {
+        //filter the conflicting interactions for that controller
+        let c = existingInteractions.filter(i => {
+          let conflicting = false;
+          if (linkedComponents) {
+            linkedComponents.forEach(comp => {
+              if (sameComponentID(comp.location(), i.settings.sink)) {
+                conflicting = true;
+              }
+            });
+          }
+          return conflicting;
+        });
+
+        conflictingInteractions = conflictingInteractions.concat(c)
+        //add the first phase interaction
+        // multiInteractionSettings.interactions.push()
+        //add the second phase interaction
+        // multiInteractionSettings.interactions.push()
+        //add the third phase interaction
+        // multiInteractionSettings.interactions.push()
+      })
+    })
+
+    //removes notification interactions on the cables
+    cables.forEach(cable => {
+        console.log(cable.name())
+        let c = existingInteractions.filter(i => {
+            if (sameComponentID(cable.location(), i.settings.source) && !i.settings.sink && i.settings.notifications?.notify) {
+              return true
+            }
+          });
+        conflictingInteractions = conflictingInteractions.concat(c)
+    })
+
+    setComponentSets([...sets])
+    return {
+      conflicting: conflictingInteractions,
+      toAdd: multiInteractionSettings
+    }
+  }
+
+    const deviceStep = () => {
+        return (
+            <Box>
+                <Typography>Select the device to condition the bin</Typography>
+                {deviceSelector()}
+                {interactionsLoading ? <CircularProgress /> :
+                  <ConditioningSelector 
+                    plenums={plenums} 
+                    ambients={ambients} 
+                    fans={fans} 
+                    heaters={[]} 
+                    binMode={pond.BinMode.BIN_MODE_THREE_PHASE_FAN_DRYING}
+                    updateSets={(sets) => {
+                      //update the component sets that will be used for the interactions
+                      //when the sets change it will create the interactions and any conflicting ones that need to be removed will be put into a list
+                      //then when the submit button gets clicked it will use the conflicting list and toAdd to remove conflicting interactions and add the new ones
+                      let i = createInteractions(sets)
+                      if(i !== undefined){
+                        setConflictingInteractions(i.conflicting)
+                        setInteractionsToAdd(i.toAdd)
+                      }
+                    }}
+                  />
+                }
+            </Box>
+        )
+    }
+
+    const actions = () => {
+        return (
+            <React.Fragment>
+                {/* close - tells the parent to close the dialog without doing anything, always visible */}
+                <Button>Close</Button>
+                {/* back - goes back to the previous step, hidden on the forst step */}
+                {currentStep !== 0 && <Button onClick={() => {setCurrentStep(currentStep-1)}}>Back</Button>}
+                {/* next - goes to the next step, hidden on the last step */}
+                {currentStep !== steps.length - 1 && <Button onClick={() => {setCurrentStep(currentStep+1)}}>Next</Button>}
+                {/* confirm - tells the parent to build the stages using the data, only visible on the last step */}
+                {currentStep === steps.length - 1 && <Button onClick={() => {}}>Confirm</Button>}
+            </React.Fragment>
+        )
+    }
+
+    const stepper = () => {
+        return (
+          <Stepper
+            activeStep={currentStep}
+            alternativeLabel
+            classes={{
+              root: classes.stepper
+            }}>
+            {steps.map((s, i) => (
+              <Step key={i}>
+                <StepLabel>{s.label}</StepLabel>
+              </Step>
+            ))}
+          </Stepper>
+        );   
+    }
+
+    const stepperContent = () => {
+        switch(currentStep){
+            case 1:
+                return phase1Step()
+            case 2:
+                return phase2Step()
+            case 3:
+                return phase3Step()
+            default:
+                return deviceStep()
+        }
+    }
+
+    return (
+        <React.Fragment>
+        <DialogTitle>Bin Cooldown</DialogTitle>
+        <DialogContent>
+            {stepper()}
+            {stepperContent()}
+        </DialogContent>
+        <DialogActions>
+            {actions()}
+        </DialogActions>
+    </React.Fragment>
+    )
+}

src/bin/conditioning/pickComponentSet.tsx

@@ -138,7 +138,7 @@ export default function PickComponentSet(props: Props) {
         <Accordion>
           <AccordionSummary expandIcon={<ExpandMore />}>Controllers Selected: {currentSet.controllers.length}</AccordionSummary>
           <AccordionDetails>
-            {heaters && heaters.length > 0 && binMode !== pond.BinMode.BIN_MODE_HYDRATING && 
+            {heaters && heaters.length > 0 && binMode === pond.BinMode.BIN_MODE_DRYING && 
               <React.Fragment>
                 <Typography>Heaters</Typography>
                 {heaters.map(heater => (