fixed some bugs related to gates component preferences, noww when assigning a new component to a position ie moving the pressure from one component to another it will make sure to remove the old component preference as well as add the new one, and am also making sure to update the gates preferences on the frontend so a page load is not required to set interactions

src/bin/BinVisualizerV2.tsx

@@ -1556,7 +1556,7 @@ export default function BinVisualizer(props: Props) {
             let device = componentDevices.get(fan.key)
             if(fanComp && device){
               return (
-                <BinControllerDisplay component={fanComp} deviceID={device} currentState/>
+                <BinControllerDisplay key={fanComp.key()} component={fanComp} deviceID={device} currentState/>
               )
             }
           })}
@@ -1565,7 +1565,7 @@ export default function BinVisualizer(props: Props) {
             let device = componentDevices.get(heater.key)
             if(heaterComp && device){
               return (
-                <BinControllerDisplay component={heaterComp} deviceID={device} currentState={heater.state}/>
+                <BinControllerDisplay key={heaterComp.key()} component={heaterComp} deviceID={device} currentState={heater.state}/>
               )
             }
           })}

src/gate/GateDevice.tsx

@@ -126,9 +126,24 @@ export default function GateDevice(props: Props) {
     }
   }, [comprehensiveDevice, gate, linkedCompList, user]);
 
-  const gateComponentUpdate = (componentKey: string, gateCompType: pond.GateComponentType) => {
+  const gateComponentUpdate = (oldKey: string, componentKey: string, gateCompType: pond.GateComponentType) => {
+    let promises: any[] = []
+    if (oldKey !== "") {
+      //the promise for removing the pref from the old component
+      promises.push(gateAPI
+        .updatePrefs(
+          gate.key,
+          "component",
+          device.id() + ":" + oldKey,
+          pond.GateComponentType.GATE_COMPONENT_TYPE_UNKNOWN,
+          [gate.key],
+          ["gate"],
+          as
+        ))
+    }
     if (componentKey !== "") {
-      gateAPI
+      //the promise for adding the pref to the new component
+      promises.push(gateAPI
         .updatePrefs(
           gate.key,
           "component",
@@ -137,11 +152,17 @@ export default function GateDevice(props: Props) {
           [gate.key],
           ["gate"],
           as
-        )
+        ))
-        .then(resp => {
-          openSnack("Component Prefence Updated");
-        });
     }
+    Promise.all(promises).then(resp => {
+        openSnack("Component Prefence Updated");
+        let clone = cloneDeep(gate.preferences)
+        clone[oldKey] = pond.GateComponentType.GATE_COMPONENT_TYPE_UNKNOWN
+        clone[componentKey] = gateCompType
+        gate.preferences = clone
+
+      }).catch(
+      );
   };
 
   useEffect(() => {
@@ -205,7 +226,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           var key = e.target.value as string;
-          gateComponentUpdate(key, pond.GateComponentType.GATE_COMPONENT_TYPE_AMBIENT);
+          gateComponentUpdate(ambientKey, key, pond.GateComponentType.GATE_COMPONENT_TYPE_AMBIENT);
           setAmbientKey(key);
           if (tempKey === key) {
             setTempKey("");
@@ -238,6 +259,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           gateComponentUpdate(
+            tempKey,
             e.target.value as string,
             pond.GateComponentType.GATE_COMPONENT_TYPE_TEMP
           );
@@ -273,6 +295,7 @@ export default function GateDevice(props: Props) {
         style={{ fontSize: 8 }}
         onChange={e => {
           gateComponentUpdate(
+            pressureKey,
             e.target.value as string,
             pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE
           );

src/gate/GateDeviceInteraction.tsx

@@ -100,6 +100,7 @@ export default function GateDeviceInteraction(props: Props) {
       } else if (
           gate.preferences[component.key()] === pond.GateComponentType.GATE_COMPONENT_TYPE_PRESSURE
         ) {
+          console.log(component)
           setPressureComponent(component);
           setPressureSource(
               quack.ComponentID.create({
@@ -115,7 +116,7 @@ export default function GateDeviceInteraction(props: Props) {
     if(compDevice.device){
       setDevice(Device.create(compDevice.device))
     }
-  }, [gate, densityTemp, user, compDevice]);
+  }, [gate, densityTemp, user, compDevice, gate.preferences]);
 
   const buttonDisabled = () => {
     if (greenComponent === undefined) return true