lift state up

Author: meganrm

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);
@@ -377,6 +379,7 @@ function App() {
         ]
     );
     const totalReset = useCallback(() => {
+        setCurrentView(ViewType.Lab);
         const activeAgents = [AgentName.A, AgentName.B];
         setCurrentModule(Module.A_B_AB);
         const concentrations = simulationData.getInitialConcentrations(
@@ -521,6 +524,12 @@ 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 = () => {
@@ -618,6 +627,12 @@ function App() {
         }, 3000);
     };
 
+    const handleSwitchView = () => {
+        setCurrentView((prevView) =>
+            prevView === ViewType.Lab ? ViewType.Simulation : ViewType.Lab
+        );
+    };
+
     const handleRecordEquilibrium = () => {
         if (!clientSimulator) {
             return false;
@@ -717,11 +732,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/simulation/context.tsx

@@ -10,7 +10,7 @@ import {
     NANO,
     ProgressionElement,
 } from "../constants";
-import { AgentName, Module, ProductName, Section } from "../types";
+import { AgentName, Module, ProductName, Section, ViewType } from "../types";
 
 interface SimulariumContextType {
     adjustableAgentName: AgentName;
@@ -34,11 +34,13 @@ interface SimulariumContextType {
     setModule: (value: Module) => void;
     setPage: (value: number) => void;
     setViewportSize: (value: { width: number; height: number }) => void;
+    setViewportType: () => void;
     simulariumController: SimulariumController | null;
     timeFactor: number;
     timeUnit: string;
     trajectoryName: string;
     viewportSize: { width: number; height: number };
+    viewportType: ViewType;
     addCompletedModule: (value: Module) => void;
     completedModules: Set<Module>;
 }
@@ -65,11 +67,13 @@ export const SimulariumContext = createContext({
     setModule: () => {},
     setPage: () => {},
     setViewportSize: () => {},
+    setViewportType: () => {},
     simulariumController: null,
     timeFactor: 30,
     timeUnit: NANO,
     trajectoryName: LIVE_SIMULATION_NAME,
     viewportSize: DEFAULT_VIEWPORT_SIZE,
+    viewportType: ViewType.Lab,
     addCompletedModule: () => {},
     completedModules: new Set(),
 } as SimulariumContextType);

src/types/index.ts

@@ -153,3 +153,8 @@ export enum TrajectoryStatus {
     LOADED,
     ERROR,
 }
+
+export enum ViewType {
+    Lab = "lab",
+    Simulation = "simulation",
+}