Feature/navigation (#202)

* make indicator clickable

* switch module and save which have been completed

* add pop confirm

* Update src/components/PageIndicator.tsx

Co-authored-by: Peyton Lee <[email protected]>

* type index as number

* add key

* make sure index is a number

* use a set for completed modules

* show cursor

* fix merge conflict

* fix merge conflict

* Update src/components/PageIndicator.tsx

Co-authored-by: Copilot <[email protected]>

* clean up css

---------

Co-authored-by: Peyton Lee <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

src/App.tsx

@@ -92,6 +92,10 @@ function App() {
     const [timeFactor, setTimeFactor] = useState(
         LiveSimulationData.INITIAL_TIME_FACTOR
     );
+
+    const [completedModules, setCompletedModules] = useState<Set<Module>>(
+        new Set()
+    );
     const [viewportSize, setViewportSize] = useState(DEFAULT_VIEWPORT_SIZE);
     const adjustableAgentName =
         LiveSimulationData.ADJUSTABLE_AGENT_MAP[currentModule];
@@ -478,8 +482,13 @@ function App() {
 
     // User input handlers
 
+    const addCompletedModule = (module: Module) => {
+        setCompletedModules((prev: Set<Module>) => new Set(prev).add(module));
+    };
+
     const setModule = (module: Module) => {
         setPage(FIRST_PAGE[module]);
+        clearAllAnalysisState();
         setCurrentModule(module);
         setIsPlaying(false);
     };
@@ -683,6 +692,8 @@ function App() {
                         timeUnit: simulationData.timeUnit,
                         trajectoryName,
                         viewportSize,
+                        addCompletedModule,
+                        completedModules,
                     }}
                 >
                     <MainLayout

src/components/PageIndicator.tsx

@@ -1,10 +1,11 @@
-import React from "react";
-import { Progress, Flex } from "antd";
+import React, { useMemo } from "react";
+import { Progress, Flex, Popconfirm } from "antd";
 import { map } from "lodash";
 import classNames from "classnames";
 
 import { moduleNames } from "../content";
 import styles from "./page-indicator.module.css";
+import { SimulariumContext } from "../simulation/context";
 
 interface PageIndicatorProps {
     title: string;
@@ -17,45 +18,80 @@ const PageIndicator: React.FC<PageIndicatorProps> = ({
     page,
     total,
 }) => {
-    let indexOfActiveModule = -1;
+    const { module, setModule, completedModules } =
+        React.useContext(SimulariumContext);
+    const indexOfActiveModule: number = useMemo(() => {
+        let toReturn = -1;
+        map(moduleNames, (name, index) => {
+            if (name === title) {
+                toReturn = Number(index);
+            }
+        });
+        return toReturn;
+    }, [title]);
 
     const getModulePercent = (isActiveModule: boolean, moduleIndex: number) => {
         if (isActiveModule) {
             return (page / total) * 100;
-        } else if (moduleIndex < indexOfActiveModule) {
+        } else if (completedModules.has(moduleIndex)) {
             return 100;
         } else {
             return 0;
         }
     };
+
+    const getTitle = (moduleIndex: number) => {
+        if (module === moduleIndex) {
+            return "Restart module";
+        } else {
+            return "Leave module";
+        }
+    };
+
+    const getMessage = (moduleIndex: number) => {
+        if (module === moduleIndex) {
+            return "Are you sure you want to restart this module? You will lose all progress.";
+        } else {
+            return "Are you sure you want to leave this module? You will lose all progress.";
+        }
+    };
+
     return (
         <Flex align="center" justify="flex-end" className={styles.container}>
-            {map(moduleNames, (name, index) => {
+            {map(moduleNames, (name, index: string) => {
                 const moduleIndex = Number(index);
-                const isActiveModule = name === title;
-                if (isActiveModule) {
-                    indexOfActiveModule = moduleIndex;
-                }
+                const isActiveModule = moduleIndex === indexOfActiveModule;
                 return (
-                    <div
-                        key={index}
-                        className={classNames(styles.progressBarWrapper, {
-                            [styles.previous]:
-                                moduleIndex <= indexOfActiveModule,
-                            [styles.current]: isActiveModule,
-                        })}
+                    <Popconfirm
+                        key={moduleIndex}
+                        title={getTitle(moduleIndex)}
+                        description={getMessage(moduleIndex)}
+                        onConfirm={() => {
+                            setModule(moduleIndex);
+                        }}
+                        onCancel={() => {}}
+                        okText="Yes"
+                        cancelText="No"
                     >
-                        <div className={styles.title}>{name}</div>
-                        <Progress
-                            className={styles.progressBar}
-                            size={["100%", 4]}
-                            percent={getModulePercent(
-                                isActiveModule,
-                                moduleIndex
-                            )}
-                            showInfo={false}
-                        />
-                    </div>
+                        <div
+                            className={classNames(styles.progressBarWrapper, {
+                                [styles.previous]:
+                                    moduleIndex <= indexOfActiveModule,
+                                [styles.current]: isActiveModule,
+                            })}
+                        >
+                            <div className={styles.title}>{name}</div>
+                            <Progress
+                                className={styles.progressBar}
+                                size={["100%", 4]}
+                                percent={getModulePercent(
+                                    isActiveModule,
+                                    moduleIndex
+                                )}
+                                showInfo={false}
+                            />
+                        </div>
+                    </Popconfirm>
                 );
             })}
         </Flex>

src/components/page-indicator.module.css

@@ -8,6 +8,7 @@
     display: flex;
     flex-direction: column;
     position: relative;
+    cursor: pointer;
 }
 
 .text-format {
@@ -27,12 +28,23 @@
     position: absolute;
     width: 10px;
     height: 10px;
-    top: 23px; /* aligned by eye after rest of layout created */
-    left: -2px;
+    top: 24px; /* aligned by eye after rest of layout created */
+    left: 0px;
     border-radius: 50%;
     background-color: var(--dark-gray);
 }
 
+/* click target */
+.progress-bar-wrapper::after {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 20px;
+    left: -5px;
+    border-radius: 50%;
+}
+
 .progress-bar {
     margin-top: 8px;
     line-height: 7.5px;

src/components/quiz-questions/KdQuestion.tsx

@@ -19,7 +19,7 @@ const KdQuestion: React.FC<KdQuestionProps> = ({ kd, canAnswer }) => {
     const [selectedAnswer, setSelectedAnswer] = useState<number | null>(null);
     const [formState, setFormState] = useState(FormState.Clear);
 
-    const { module } = useContext(SimulariumContext);
+    const { module, addCompletedModule } = useContext(SimulariumContext);
 
     useEffect(() => {
         setSelectedAnswer(null);
@@ -82,6 +82,7 @@ const KdQuestion: React.FC<KdQuestionProps> = ({ kd, canAnswer }) => {
             Math.abs(selectedAnswer - correctAnswer) / correctAnswer;
         if (closeness <= tolerance) {
             setFormState(FormState.Correct);
+            addCompletedModule(module);
         } else {
             setFormState(FormState.Incorrect);
         }

src/simulation/LiveSimulationData.ts

@@ -48,13 +48,12 @@ const agentC: InputAgent = {
     color: AGENT_C_COLOR,
 };
 
-const kds = {
-    [Module.A_B_AB]: 0.75,
-    [Module.A_C_AC]: 74,
-    [Module.A_B_D_AB]: 5,
-};
-
 export default class LiveSimulation implements ISimulationData {
+    static ESTIMATED_SOLUTIONS = {
+        [Module.A_B_AB]: 0.75,
+        [Module.A_C_AC]: 74,
+        [Module.A_B_D_AB]: 5,
+    };
     static NAME_TO_FUNCTION_MAP = {
         [AgentName.A]: AgentFunction.Fixed,
         [AgentName.B]: AgentFunction.Adjustable,
@@ -168,6 +167,6 @@ export default class LiveSimulation implements ISimulationData {
         }, {});
     };
     getKd = (module: Module): number => {
-        return kds[module];
+        return LiveSimulation.ESTIMATED_SOLUTIONS[module];
     };
 }

src/simulation/context.tsx

@@ -39,6 +39,8 @@ interface SimulariumContextType {
     timeUnit: string;
     trajectoryName: string;
     viewportSize: { width: number; height: number };
+    addCompletedModule: (value: Module) => void;
+    completedModules: Set<Module>;
 }
 
 export const SimulariumContext = createContext({
@@ -68,4 +70,6 @@ export const SimulariumContext = createContext({
     timeUnit: NANO,
     trajectoryName: LIVE_SIMULATION_NAME,
     viewportSize: DEFAULT_VIEWPORT_SIZE,
+    addCompletedModule: () => {},
+    completedModules: new Set(),
 } as SimulariumContextType);