Fix UI issues with ReactFlow graph and checkboxes.

!: Auto Tester doesn't work and it appears the robot can't be controlled
via robot code at the moment...

Author: HunterBarclay

fission/src/systems/simulation/SimConfigShared.ts

@@ -15,7 +15,7 @@ import type { StimulusType } from "@/systems/simulation/stimulus/Stimulus"
 import type { SimFlow, SimReceiver, SimSupplier } from "@/systems/simulation/wpilib_brain/SimDataFlow"
 import { getSimMap, receiverTypeMap, supplierTypeMap } from "@/systems/simulation/wpilib_brain/WPILibState"
 import World from "@/systems/World"
-import { WiringNode } from "@/ui/panels/simulation/WiringNode"
+import WiringNode from "@/ui/panels/simulation/WiringNode"
 import { random } from "@/util/Random"
 import SimAccel from "./wpilib_brain/sim/SimAccel"
 import SimCANEncoder from "./wpilib_brain/sim/SimCANEncoder"

fission/src/ui/panels/configuring/assembly-config/interfaces/SimulationInterface.tsx

@@ -7,7 +7,7 @@ import type { PanelImplProps } from "@/ui/components/Panel"
 import { Button } from "@/ui/components/StyledComponents"
 import { CloseType, useUIContext } from "@/ui/helpers/UIProviderHelpers"
 import AutoTestPanel from "@/ui/panels/simulation/AutoTestPanel"
-import { WiringPanel } from "@/ui/panels/simulation/WiringPanel"
+import WiringPanel from "@/ui/panels/simulation/WiringPanel"
 import type { ConfigurePanelCustomProps } from "../ConfigurePanel"
 
 type SimulationInterfaceProps = {

fission/src/ui/panels/simulation/WiringNode.tsx

@@ -11,14 +11,14 @@ import {
 import { CustomTooltip, DeleteButton, EditButton, RefreshButton } from "@/ui/components/StyledComponents"
 
 const WiringNode = ({ data, isConnectable }: NodeProps) => {
-    const robotInput = data.input as HandleInfo[] | undefined
-    const robotOutput = data.output as HandleInfo[] | undefined
-    const onEdit = data.onEdit as (() => void) | undefined
-    const onRefresh = data.onRefresh as (() => void) | undefined
-    const onDelete = data.onDelete as (() => void) | undefined
-    const simConfig = data.simConfig as SimConfigData
-    const title = data.title as string
-    const tooltip = data.tooltip as string | undefined
+    const robotInput = useMemo(() => data.input as HandleInfo[] | undefined, [data])
+    const robotOutput = useMemo(() => data.output as HandleInfo[] | undefined, [data])
+    const onEdit = useMemo(() => data.onEdit as (() => void) | undefined, [data])
+    const onRefresh = useMemo(() => data.onRefresh as (() => void) | undefined, [data])
+    const onDelete = useMemo(() => data.onDelete as (() => void) | undefined, [data])
+    const simConfig = useMemo(() => data.simConfig as SimConfigData, [data])
+    const title = useMemo(() => data.title as string, [data])
+    const tooltip = useMemo(() => data.tooltip as string | undefined, [data])
 
     const validateConnection = useCallback(
         (edge: Edge | Connection) => {
@@ -151,4 +151,4 @@ const WiringNode = ({ data, isConnectable }: NodeProps) => {
     )
 }
 
-export { WiringNode }
+export default WiringNode

fission/src/ui/panels/simulation/WiringPanel.tsx

@@ -37,7 +37,12 @@ import { Button } from "@/ui/components/StyledComponents"
 import FlowControls from "@/ui/components/simulation/FlowControls"
 import FlowInfo from "@/ui/components/simulation/FlowInfo"
 import { useUIContext } from "../../helpers/UIProviderHelpers"
-import { WiringNode } from "./WiringNode"
+import WiringNode from "./WiringNode"
+
+/**
+ * WARNING: Please test *thoroughly* when making changes. React Flow is very tempermental with how nodes
+ * and object references are maintained.
+ */
 
 type ConfigComponentProps = {
     setConfigState: (state: ConfigState) => void
@@ -56,7 +61,7 @@ type NodeType = ComponentType<
 const nodeTypes: Record<string, NodeType> = [WiringNode].reduce<{
     [k: string]: NodeType
 }>((prev, next) => {
-    prev[next.name] = next as NodeType
+    prev[next.name] = next
     return prev
 }, {})
 
@@ -68,7 +73,7 @@ function generateGraph(
     const nodes: Map<string, FlowNode> = new Map()
     const edges: FlowEdge[] = []
 
-    for (const [_k, v] of Object.entries(simConfig.nodes)) {
+    Object.entries(simConfig.nodes).forEach(([_k, v]) => {
         let onEdit: (() => void) | undefined
         let onRefresh: (() => void) | undefined
         let onDelete: (() => void) | undefined
@@ -99,32 +104,34 @@ function generateGraph(
         }
 
         nodes.set(v.id, {
-            ...v,
+            id: v.id,
+            type: v.type,
+            position: v.position,
             data: {
-                title,
-                onEdit,
-                onRefresh,
-                onDelete,
-                simConfig,
+                title: title,
+                onEdit: onEdit,
+                onRefresh: onRefresh,
+                onDelete: onDelete,
+                simConfig: simConfig,
                 input: [],
                 output: [],
                 tooltip: v.tooltip,
             },
         })
-    }
+    })
 
-    for (const [_k, v] of Object.entries(simConfig.handles)) {
-        if (!v.enabled) break
+    Object.entries(simConfig.handles).forEach(([_k, v]) => {
+        if (!v.enabled) return
         const node = nodes.get(v.nodeId)
         if (!node) {
             console.warn("Orphaned handle found")
-            break
+            return
         }
         const list = (v.isSource ? node.data.output : node.data.input) as unknown[]
-        list.push(v)
-    }
+        list.push({ ...v })
+    })
 
-    for (const [k, v] of Object.entries(simConfig.edges)) {
+    Object.entries(simConfig.edges).forEach(([k, v]) => {
         const sourceHandle = simConfig.handles[v.sourceId]
         const targetHandle = simConfig.handles[v.targetId]
 
@@ -137,22 +144,28 @@ function generateGraph(
                 targetHandle: targetHandle.id,
             })
         }
-    }
+    })
 
     return [[...nodes.values()], edges]
 }
 
 const SimIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simConfig }) => {
     const theme = useTheme()
 
-    const simOut: HandleInfo[] = []
-    const simIn: HandleInfo[] = []
-    for (const [_k, v] of Object.entries(simConfig.handles)) {
-        if (v.nodeId === NODE_ID_SIM_OUT || v.nodeId === NODE_ID_SIM_IN) {
-            const list = v.isSource ? simOut : simIn
-            list.push(v)
+    const [simOut, setSimOut] = useState<Record<string, HandleInfo>>({})
+    const [simIn, setSimIn] = useState<Record<string, HandleInfo>>({})
+
+    useEffect(() => {
+        const simOut: Record<string, HandleInfo> = {}
+        const simIn: Record<string, HandleInfo> = {}
+        for (const [_k, v] of Object.entries(simConfig.handles)) {
+            if (v.nodeId === NODE_ID_SIM_OUT || v.nodeId === NODE_ID_SIM_IN) {
+                v.isSource ? (simOut[v.id] = v) : (simIn[v.id] = v)
+            }
         }
-    }
+        setSimOut(simOut)
+        setSimIn(simIn)
+    }, [simConfig])
 
     return (
         <Stack gap={4} direction={"column"} sx={{ width: "stretch" }}>
@@ -167,13 +180,14 @@ const SimIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simCon
                 <Stack>
                     <Label size="md">Output</Label>
                     <ScrollView>
-                        {simOut.sort(handleInfoDisplayCompare).map(handle => (
+                        {Object.values(simOut).sort(handleInfoDisplayCompare).map(handle => (
                             <Checkbox
                                 label={`${handle.displayName}`}
                                 key={handle.id}
                                 checked={handle.enabled}
                                 onClick={checked => {
                                     handle.enabled = checked
+                                    setSimOut({ ...simOut, [handle.id]: handle })
                                 }}
                             />
                         ))}
@@ -183,13 +197,14 @@ const SimIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simCon
                 <Stack>
                     <Label size="md">Input</Label>
                     <ScrollView>
-                        {simIn.sort(handleInfoDisplayCompare).map(handle => (
+                        {Object.values(simIn).sort(handleInfoDisplayCompare).map(handle => (
                             <Checkbox
                                 label={`${handle.displayName}`}
                                 key={handle.id}
                                 checked={handle.enabled}
                                 onClick={checked => {
                                     handle.enabled = checked
+                                    setSimIn({ ...simIn, [handle.id]: handle })
                                 }}
                             />
                         ))}
@@ -206,22 +221,27 @@ const SimIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simCon
 const RobotIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simConfig }) => {
     const theme = useTheme()
 
+    const [refreshHook, refreshCheckboxes] = useReducer(x => !x, false)
+
     const [canEncoders, canMotors, pwmDevices, accelerometers] = useMemo(() => {
         const canEncoders: JSX.Element[] = []
         const canMotors: JSX.Element[] = []
         const pwmDevices: JSX.Element[] = []
         const accelerometers: JSX.Element[] = []
 
-        for (const [_k, v] of Object.entries(simConfig.handles)) {
+        Object.entries(simConfig.handles).forEach(([_k, v]) => {
             if (v.nodeId !== NODE_ID_ROBOT_IO) return []
 
+            console.debug(v)
+
             const checkbox = (
                 <Checkbox
                     label={v.displayName}
                     key={v.id}
                     checked={v.enabled}
                     onClick={enabled => {
                         v.enabled = enabled
+                        refreshCheckboxes()
                     }}
                 />
             )
@@ -234,16 +254,16 @@ const RobotIoComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simC
                     pwmDevices.push(checkbox)
                     break
                 case SimType.CAN_ENCODER:
-                    pwmDevices.push(checkbox)
+                    canEncoders.push(checkbox)
                     break
                 case SimType.ACCELEROMETER:
-                    pwmDevices.push(checkbox)
+                    accelerometers.push(checkbox)
                     break
             }
-        }
+        })
 
         return [canEncoders, canMotors, pwmDevices, accelerometers]
-    }, [simConfig])
+    }, [simConfig, refreshHook])
 
     return (
         <Stack gap={4}>
@@ -360,7 +380,7 @@ const WiringComponent: React.FC<ConfigComponentProps> = ({ setConfigState, simCo
     const onCreateJunction = useCallback(() => {
         SimConfig.AddJunctionNode(simConfig)
         refreshGraph()
-    }, [simConfig])
+    }, [refreshGraph, simConfig])
 
     return (
         <ReactFlow
@@ -402,8 +422,10 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
 
         const existingConfig = selectedAssembly.simConfigData
         if (existingConfig) {
+            console.debug('Existing SimConfig found')
             setSimConfig(JSON.parse(JSON.stringify(existingConfig))) // Create copy to not force a save
         } else {
+            console.debug('No SimConfig found, creating default...')
             setSimConfig(SimConfig.Default(selectedAssembly))
         }
     }, [selectedAssembly])
@@ -418,6 +440,8 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
             console.debug(`${flows.length} Flows Successfully Compiled!`)
 
             selectedAssembly.updateSimConfig(simConfig)
+        } else {
+            console.warn('Failed to save SimConfig', simConfig, selectedAssembly)
         }
     }, [selectedAssembly, simConfig])
 
@@ -429,7 +453,7 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
 
     useEffect(() => {
         configureScreen(panel!, { title: "Wiring Panel" }, { onBeforeAccept: save })
-    }, [])
+    }, [save])
 
     return (
         <>
@@ -473,4 +497,4 @@ const WiringPanel: React.FC<PanelImplProps<void, void>> = ({ panel }) => {
     )
 }
 
-export { WiringPanel }
+export default WiringPanel

simulation/samples/JavaAutoSample/src/main/java/frc/robot/Robot.java

@@ -39,14 +39,18 @@ public class Robot extends TimedRobot {
     private String m_autoSelected;
     private final SendableChooser<String> m_chooser = new SendableChooser<>();
 
-    private ADXL362 m_Accelerometer = new ADXL362(SPI.Port.kMXP, ADXL362.Range.k8G);
+    private static final int kAutoTurn = 90;
+
+    private ADXL362 m_accelerometer = new ADXL362(SPI.Port.kMXP, ADXL362.Range.k8G);
     private AHRS m_Gyro = new AHRS();
 
     private CANSparkMax m_sparkLeft = new CANSparkMax(1, MotorType.kBrushless);
     private CANSparkMax m_sparkRight = new CANSparkMax(2, MotorType.kBrushless);
     private CANSparkMax m_sparkArm = new CANSparkMax(3, MotorType.kBrushless);
     private RelativeEncoder m_encoder;
 
+    private double m_initAngle = 0;
+
     /**
      * This function is run when the robot is first started up and should be used
      * for any
@@ -117,13 +121,19 @@ public void autonomousPeriodic() {
                 m_sparkLeft.set(0.5);
                 m_sparkRight.set(0.5);
                 if (m_encoder.getPosition() > 36.0) {
+                    m_initAngle = m_accelerometer.getY();
                     m_autoState = AutoState.Stage2;
                     System.out.println("--- Transitioning to Stage 2 ---");
                 }
                 break;
             case Stage2:
-                m_sparkLeft.set(0.5);
-                m_sparkRight.set(-0.5);
+                double current = (m_accelerometer.getY() - m_initAngle);
+                double delta = kAutoTurn - current;
+                double speed = delta * (1.0 / 15.0);
+                speed = Math.max(Math.min(speed, 1.0), -1.0);
+
+                m_sparkLeft.set(speed);
+                m_sparkRight.set(-speed);
                 break;
             default:
                 break;