Feature/comp binding

src/App.tsx

@@ -31,11 +31,7 @@ import RightPanel from "./components/main-layout/RightPanel";
 import ReactionDisplay from "./components/main-layout/ReactionDisplay";
 import ContentPanelTimer from "./components/main-layout/ContentPanelTimer";
 import content, { FIRST_PAGE, moduleNames } from "./content";
-import {
-    PROMPT_TO_ADJUST_B,
-    DEFAULT_VIEWPORT_SIZE,
-    LIVE_SIMULATION_NAME,
-} from "./constants";
+import { DEFAULT_VIEWPORT_SIZE, LIVE_SIMULATION_NAME } from "./constants";
 import CenterPanel from "./components/main-layout/CenterPanel";
 import { SimulariumContext } from "./simulation/context";
 import NavPanel from "./components/main-layout/NavPanel";
@@ -88,9 +84,13 @@ function App() {
     const [inputConcentration, setInputConcentration] =
         useState<InputConcentration>({
             [AgentName.A]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.A],
+                LiveSimulationData.INITIAL_CONCENTRATIONS[Module.A_B_AB][
+                    AgentName.A
+                ],
             [AgentName.B]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.B],
+                LiveSimulationData.INITIAL_CONCENTRATIONS[Module.A_B_AB][
+                    AgentName.B
+                ],
         });
     const [timeFactor, setTimeFactor] = useState(
         LiveSimulationData.INITIAL_TIME_FACTOR
@@ -107,9 +107,13 @@ function App() {
     const [liveConcentration, setLiveConcentration] =
         useState<CurrentConcentration>({
             [AgentName.A]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.A],
+                LiveSimulationData.INITIAL_CONCENTRATIONS[Module.A_B_AB][
+                    AgentName.A
+                ],
             [AgentName.B]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.B],
+                LiveSimulationData.INITIAL_CONCENTRATIONS[Module.A_B_AB][
+                    AgentName.B
+                ],
             [productName]: 0,
         });
     const [recordedInputConcentration, setRecordedInputConcentration] =
@@ -141,11 +145,11 @@ function App() {
         setCurrentProductConcentrationArray,
     ] = useState<number[]>([]);
 
-    const resetCurrentRunAnalysisState = () => {
+    const resetCurrentRunAnalysisState = useCallback(() => {
         setBindingEventsOverTime([]);
         setUnBindingEventsOverTime([]);
         setCurrentProductConcentrationArray([]);
-    };
+    }, []);
 
     const clearAllAnalysisState = useCallback(() => {
         resetCurrentRunAnalysisState();
@@ -154,7 +158,7 @@ function App() {
         setRecordedReactantConcentration([]);
         setTimeToReachEquilibrium([]);
         setDataColors([]);
-    }, []);
+    }, [resetCurrentRunAnalysisState]);
 
     const isPassedEquilibrium = useRef(false);
     const arrayLength = currentProductConcentrationArray.length;
@@ -176,26 +180,42 @@ function App() {
         return new SimulariumController({});
     }, []);
 
+    const sectionType = content[currentModule][page].section;
+
     const clientSimulator = useMemo(() => {
         const activeAgents = simulationData.getActiveAgents(currentModule);
         setInputConcentration(
-            simulationData.getInitialConcentrations(activeAgents)
+            simulationData.getInitialConcentrations(
+                activeAgents,
+                currentModule,
+                sectionType === Section.Experiment
+            )
         );
         resetCurrentRunAnalysisState();
-        const trajectory =
-            simulationData.createAgentsFromConcentrations(activeAgents);
+        const trajectory = simulationData.createAgentsFromConcentrations(
+            activeAgents,
+            currentModule,
+            sectionType === Section.Experiment
+        );
         if (!trajectory) {
             return null;
         }
         const longestAxis = Math.max(viewportSize.width, viewportSize.height);
         const productColor = simulationData.getAgentColor(productName);
-        return new BindingSimulator(trajectory, longestAxis / 3, productColor);
+        const startMixed = sectionType !== Section.Introduction;
+        return new BindingSimulator(
+            trajectory,
+            longestAxis / 3,
+            productColor,
+            startMixed ? "random" : "sorted"
+        );
     }, [
         simulationData,
         currentModule,
+        resetCurrentRunAnalysisState,
         viewportSize.width,
         viewportSize.height,
-        productName,
+        sectionType,
     ]);
 
     const preComputedPlotDataManager = useMemo(() => {
@@ -295,11 +315,6 @@ function App() {
 
     const handleNewInputConcentration = useCallback(
         (name: string, value: number) => {
-            if (value === 0) {
-                // this is available on the slider, but we only want it visible
-                // as an axis marker, not as a selection
-                return;
-            }
             if (!clientSimulator) {
                 return;
             }
@@ -309,7 +324,11 @@ function App() {
             const agentName =
                 name as keyof typeof LiveSimulationData.AVAILABLE_AGENTS;
             const agentId = LiveSimulationData.AVAILABLE_AGENTS[agentName].id;
-            clientSimulator.changeConcentration(agentId, value);
+            clientSimulator.changeConcentration(
+                agentId,
+                value,
+                sectionType === Section.Experiment ? "random" : "sorted"
+            );
             simulariumController.gotoTime(1); // the number isn't used, but it triggers the update
             const previousConcentration = inputConcentration[agentName] || 0;
             addProductionTrace(previousConcentration);
@@ -321,26 +340,29 @@ function App() {
             inputConcentration,
             addProductionTrace,
             resetCurrentRunAnalysisState,
+            sectionType,
         ]
     );
+
     const totalReset = useCallback(() => {
+        const activeAgents = [AgentName.A, AgentName.B];
+        setCurrentModule(Module.A_B_AB);
+        const concentrations = simulationData.getInitialConcentrations(
+            activeAgents,
+            Module.A_B_AB
+        );
         setLiveConcentration({
-            [AgentName.A]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.A],
-            [AgentName.B]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.B],
+            [AgentName.A]: concentrations[AgentName.A],
+            [AgentName.B]: concentrations[AgentName.B],
             [productName]: 0,
         });
-        setCurrentModule(Module.A_B_AB);
         setInputConcentration({
-            [AgentName.A]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.A],
-            [AgentName.B]:
-                LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.B],
+            [AgentName.A]: concentrations[AgentName.A],
+            [AgentName.B]: concentrations[AgentName.B],
         });
         handleNewInputConcentration(
             adjustableAgentName,
-            LiveSimulationData.INITIAL_CONCENTRATIONS[AgentName.B]
+            concentrations[AgentName.B] ?? 4
         );
         setIsPlaying(false);
         clearAllAnalysisState();
@@ -350,6 +372,7 @@ function App() {
         handleNewInputConcentration,
         productName,
         adjustableAgentName,
+        simulationData,
     ]);
     // Special events in page navigation
     // usePageNumber takes a page number, a conditional and a callback
@@ -369,18 +392,19 @@ function App() {
             totalReset();
         }
     );
-
+    const hasRecordedFirstValue = useRef(false);
     // they have recorded a single value, changed the slider and pressed play
     usePageNumber(
         page,
-        (page) =>
+        () =>
             currentModule === Module.A_B_AB &&
-            page === PROMPT_TO_ADJUST_B &&
+            !hasRecordedFirstValue.current &&
             isPlaying &&
-            recordedInputConcentration.length > 0 &&
+            recordedInputConcentration.length === 1 &&
             recordedInputConcentration[0] !==
                 inputConcentration[adjustableAgentName],
         () => {
+            hasRecordedFirstValue.current = true;
             setPage(page + 1);
         }
     );
@@ -457,13 +481,37 @@ function App() {
 
     const setModule = (module: Module) => {
         setPage(FIRST_PAGE[module]);
+        clearAllAnalysisState();
         setCurrentModule(module);
         setIsPlaying(false);
     };
 
+    const setExperiment = () => {
+        setIsPlaying(false);
+
+        const activeAgents = simulationData.getActiveAgents(currentModule);
+        const concentrations = simulationData.getInitialConcentrations(
+            activeAgents,
+            currentModule,
+            true
+        );
+        clientSimulator?.mixAgents();
+        setTimeFactor(LiveSimulationData.INITIAL_TIME_FACTOR);
+        setInputConcentration(concentrations);
+        setLiveConcentration(concentrations);
+    };
+
+    const handleMixAgents = useCallback(() => {
+        if (clientSimulator) {
+            setIsPlaying(false);
+            clientSimulator.mixAgents();
+            simulariumController.gotoTime(1);
+        }
+    }, [clientSimulator, simulariumController]);
+
     const handleStartExperiment = () => {
-        simulariumController.pause();
-        totalReset();
+        clearAllAnalysisState();
+        setExperiment();
         setPage(page + 1);
     };
 
@@ -628,48 +676,48 @@ function App() {
             <div className="app">
                 <SimulariumContext.Provider
                     value={{
-                        trajectoryName,
-                        productName,
                         adjustableAgentName,
                         currentProductionConcentration:
                             liveConcentration[productName] || 0,
                         fixedAgentStartingConcentration:
                             inputConcentration[AgentName.A] || 0,
+                        getAgentColor: simulationData.getAgentColor,
+                        handleMixAgents,
+                        handleStartExperiment,
+                        handleTimeChange,
+                        handleTrajectoryChange,
+                        isPlaying,
                         maxConcentration:
                             simulationData.getMaxConcentration(currentModule),
-                        handleStartExperiment,
+                        module: currentModule,
+                        page,
+                        productName,
+                        progressionElement:
+                            content[currentModule][page].progressionElement ||
+                            "",
+                        quizQuestion:
+                            content[currentModule][page].quizQuestion || "",
+                        recordedConcentrations: recordedInputConcentration,
                         section: content[currentModule][page].section,
-                        getAgentColor: simulationData.getAgentColor,
-                        isPlaying,
                         setIsPlaying,
-                        simulariumController,
-                        handleTimeChange,
-                        page,
-                        module: currentModule,
                         setModule,
                         setPage,
+                        setViewportSize,
+                        simulariumController,
                         timeFactor,
                         timeUnit: simulationData.timeUnit,
-                        handleTrajectoryChange,
+                        trajectoryName,
                         viewportSize,
-                        setViewportSize,
-                        recordedConcentrations: recordedInputConcentration,
                     }}
                 >
                     <MainLayout
-                        section={content[currentModule][page].section}
-                        layout={content[currentModule][page].layout}
-                        header={
-                            <NavPanel
-                                page={page}
-                                title={moduleNames[currentModule]}
-                                total={finalPageNumber}
-                            />
-                        }
-                        landingPage={
-                            <LandingPage
-                                {...content[currentModule][page]}
-                                module={currentModule}
+                        centerPanel={
+                            <CenterPanel
+                                kd={simulationData.getKd(currentModule)}
+                                canDetermineEquilibrium={canDetermineKd}
+                                overlay={
+                                    content[currentModule][page].visualContent
+                                }
                             />
                         }
                         content={
@@ -690,8 +738,18 @@ function App() {
                                 currentModule={currentModule}
                             />
                         }
-                        reactionPanel={
-                            <ReactionDisplay reactionType={currentModule} />
+                        header={
+                            <NavPanel
+                                page={page}
+                                title={moduleNames[currentModule]}
+                                total={finalPageNumber}
+                            />
+                        }
+                        landingPage={
+                            <LandingPage
+                                {...content[currentModule][page]}
+                                module={currentModule}
+                            />
                         }
                         leftPanel={
                             <LeftPanel
@@ -710,14 +768,8 @@ function App() {
                                 adjustableAgent={adjustableAgentName}
                             />
                         }
-                        centerPanel={
-                            <CenterPanel
-                                kd={simulationData.getKd(currentModule)}
-                                canDetermineEquilibrium={canDetermineKd}
-                                overlay={
-                                    content[currentModule][page].visualContent
-                                }
-                            />
+                        reactionPanel={
+                            <ReactionDisplay reactionType={currentModule} />
                         }
                         rightPanel={
                             <RightPanel
@@ -748,6 +800,8 @@ function App() {
                                 equilibriumFeedback={equilibriumFeedback}
                             />
                         }
+                        section={content[currentModule][page].section}
+                        layout={content[currentModule][page].layout}
                     />
                     <AdminUI
                         totalPages={finalPageNumber}

src/components/AdminUi.tsx

@@ -19,8 +19,7 @@ const AdminUI: React.FC<AdminUIProps> = ({
     totalPages,
 }) => {
     const { page, setPage, module, setModule } = useContext(SimulariumContext);
-    const isDev = process.env.NODE_ENV === "development";
-    const [visible, setVisible] = React.useState<boolean>(isDev);
+    const [visible, setVisible] = React.useState<boolean>(false);
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
             // control-option-1 (mac) or ctrl-alt-1 (windows)
@@ -40,7 +39,7 @@ const AdminUI: React.FC<AdminUIProps> = ({
         pageMarks[i] = { label: i.toString() };
     }
     const moduleMarks: SliderSingleProps["marks"] = {};
-    const totalNumberOfModules = 2; // only 2 modules that work currently
+    const totalNumberOfModules = 3;
     for (let i = 0; i <= totalNumberOfModules; i++) {
         moduleMarks[i] = { label: i.toString() };
     }