Feature/3rd module

src/App.tsx

@@ -26,6 +26,7 @@ import {
     ScatterTrace,
     Section,
     TrajectoryStatus,
+    ViewType,
 } from "./types";
 import LeftPanel from "./components/main-layout/LeftPanel";
 import RightPanel from "./components/main-layout/RightPanel";
@@ -56,6 +57,7 @@ import useModule from "./hooks/useModule";
 import LandingPage from "./components/LandingPage";
 
 function App() {
+    const [currentView, setCurrentView] = useState<ViewType>(ViewType.Lab);
     const [page, setPage] = useState(FIRST_PAGE[Module.A_B_AB]);
     const [time, setTime] = useState(0);
     const [isPlaying, setIsPlaying] = useState(false);
@@ -85,9 +87,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
@@ -108,9 +114,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] =
@@ -182,21 +192,26 @@ function App() {
     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);
         const startMixed = sectionType !== Section.Introduction;
         return new BindingSimulator(
             trajectory,
             longestAxis / 3,
-            productColor,
             startMixed ? InitialCondition.RANDOM : InitialCondition.SORTED
         );
     }, [
@@ -205,7 +220,6 @@ function App() {
         resetCurrentRunAnalysisState,
         viewportSize.width,
         viewportSize.height,
-        productName,
         sectionType,
     ]);
 
@@ -304,6 +318,21 @@ function App() {
         [currentProductConcentrationArray, productOverTimeTraces]
     );
 
+    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);
@@ -350,23 +379,28 @@ function App() {
         ]
     );
     const totalReset = useCallback(() => {
+        setCurrentView(ViewType.Lab);
+        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] ??
+                LiveSimulationData.INITIAL_CONCENTRATIONS[Module.A_B_AB][
+                    AgentName.B
+                ]
         );
         setIsPlaying(false);
         clearAllAnalysisState();
@@ -376,6 +410,7 @@ function App() {
         handleNewInputConcentration,
         productName,
         adjustableAgentName,
+        simulationData,
     ]);
     // Special events in page navigation
     // usePageNumber takes a page number, a conditional and a callback
@@ -491,11 +526,17 @@ function App() {
         clearAllAnalysisState();
         setCurrentModule(module);
         setIsPlaying(false);
+        // the first module is the only one that starts with the lab view
+        if (module === Module.A_B_AB) {
+            setCurrentView(ViewType.Lab);
+        } else {
+            setCurrentView(ViewType.Simulation);
+        }
     };
 
     const handleStartExperiment = () => {
-        simulariumController.pause();
-        totalReset();
+        clearAllAnalysisState();
+        setExperiment();
         setPage(page + 1);
     };
 
@@ -588,6 +629,12 @@ function App() {
         }, 3000);
     };
 
+    const handleSwitchView = () => {
+        setCurrentView((prevView) =>
+            prevView === ViewType.Lab ? ViewType.Simulation : ViewType.Lab
+        );
+    };
+
     const handleRecordEquilibrium = () => {
         if (!clientSimulator) {
             return false;
@@ -687,11 +734,13 @@ function App() {
                         setModule,
                         setPage,
                         setViewportSize,
+                        setViewportType: handleSwitchView,
                         simulariumController,
                         timeFactor,
                         timeUnit: simulationData.timeUnit,
                         trajectoryName,
                         viewportSize,
+                        viewportType: currentView,
                         addCompletedModule,
                         completedModules,
                     }}

src/components/ViewSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
 
 import Viewer from "./Viewer";
 import { SimulariumContext } from "../simulation/context";
@@ -9,47 +9,19 @@ import LabIcon from "./icons/Lab";
 import Molecules from "./icons/Molecules";
 import LabView from "./LabView";
 import VisibilityControl from "./shared/VisibilityControl";
-import { Module, Section } from "../types";
+import { Module, ViewType } from "../types";
 import { FIRST_PAGE } from "../content";
-import useModule from "../hooks/useModule";
 import { VIEW_SWITCH_ID } from "../constants";
 
-enum View {
-    Lab = "lab",
-    Simulation = "simulation",
-}
-
 const ViewSwitch: React.FC = () => {
-    const [currentView, setCurrentView] = useState<View>(View.Lab);
-    const [previousModule, setPreviousModule] = useState<Module>(Module.A_B_AB);
+    const { viewportType, setViewportType } = useContext(SimulariumContext);
 
-    const switchView = () => {
-        setCurrentView((prevView) =>
-            prevView === View.Lab ? View.Simulation : View.Lab
-        );
-    };
     const { page, isPlaying, setIsPlaying, handleTimeChange, module } =
         useContext(SimulariumContext);
 
     const isFirstPageOfFirstModule =
         page === FIRST_PAGE[module] + 1 && module === Module.A_B_AB;
 
-    if (isFirstPageOfFirstModule && currentView === View.Simulation) {
-        setCurrentView(View.Lab);
-    }
-
-    const { contentData } = useModule(module);
-
-    // Show the sim view at the beginning of the module
-    if (module !== previousModule) {
-        setPreviousModule(module);
-        if (contentData[page].section === Section.Experiment) {
-            if (currentView === View.Lab) {
-                setCurrentView(View.Simulation);
-            }
-        }
-    }
-
     let buttonStyle: React.CSSProperties = {
         top: 16,
         right: 16,
@@ -73,22 +45,23 @@ const ViewSwitch: React.FC = () => {
             <VisibilityControl notInBonusMaterial>
                 <ProgressionControl elementId={VIEW_SWITCH_ID}>
                     <OverlayButton
-                        onClick={switchView}
+                        onClick={setViewportType}
                         style={buttonStyle}
                         icon={
-                            currentView === View.Lab ? (
+                            viewportType === ViewType.Lab ? (
                                 <Molecules />
                             ) : (
                                 <LabIcon />
                             )
                         }
                     >
-                        {currentView === View.Lab ? "Molecular" : "Lab"} view
+                        {viewportType === ViewType.Lab ? "Molecular" : "Lab"}{" "}
+                        view
                     </OverlayButton>
                 </ProgressionControl>
             </VisibilityControl>
             <PlayButton />
-            {currentView === View.Lab ? <LabView /> : null}
+            {viewportType === ViewType.Lab ? <LabView /> : null}
             <Viewer
                 isPlaying={isPlaying}
                 setIsPlaying={setIsPlaying}

src/components/concentration-display/ConcentrationSlider.tsx

@@ -69,7 +69,11 @@ const ConcentrationSlider: React.FC<SliderProps> = ({
             marks[index] = {
                 label: (
                     <Mark
-                        index={index}
+                        index={
+                            index < 1 && index > 0
+                                ? Number(index.toFixed(1))
+                                : index
+                        }
                         disabledNumbers={disabledNumbers}
                         onMouseUp={() => onChangeComplete?.(name, index)}
                     />

src/components/concentration-display/LiveConcentrationDisplay.tsx

@@ -19,7 +19,7 @@ const LiveConcentrationDisplay: React.FC<LiveConcentrationDisplayProps> = ({
     const { maxConcentration, getAgentColor } = useContext(SimulariumContext);
     // the steps have a 2px gap, so we are adjusting the
     // size of the step based on the total number we want
-    const steps = Math.min(maxConcentration, 10);
+    const steps = maxConcentration;
     const size = width / steps - 2;
     return (
         <div className={styles.container}>

src/components/main-layout/LeftPanel.tsx

@@ -38,7 +38,6 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
     const eventsOverTimeExcludedPages = {
         [Module.A_B_AB]: [0, 1, 2],
         [Module.A_C_AC]: [],
-        [Module.A_B_D_AB]: [],
     };
     return (
         <>
@@ -53,6 +52,7 @@ const LeftPanel: React.FC<LeftPanelProps> = ({
             </VisibilityControl>
             <VisibilityControl
                 excludedPages={eventsOverTimeExcludedPages}
+                includedPages={{ [Module.A_B_D_AB]: [] }} // don't show at all in last module
                 notInBonusMaterial
             >
                 <EventsOverTimePlot