= ({ kd, canAnswer }) => {
where half of the binding sites of A are occupied.
- If you're not sure, look at where the line crosses the 50%
- mark on the Equilibrium concentration plot.
+ If you're not sure, look at where the line crosses the 50% mark
+ on the Equilibrium concentration plot.
Kd = ?
diff --git a/src/components/shared/BackButton.tsx b/src/components/shared/BackButton.tsx
index a14baa7..c05cf42 100644
--- a/src/components/shared/BackButton.tsx
+++ b/src/components/shared/BackButton.tsx
@@ -1,9 +1,8 @@
-import { useContext } from "react";
-import { SimulariumContext } from "../../simulation/context";
+import { useSimulariumUi } from "../../hooks/useSimulationContext";
import { SecondaryButton } from "./ButtonLibrary";
const BackButton = () => {
- const { page, setPage } = useContext(SimulariumContext);
+ const { page, setPage } = useSimulariumUi();
return (
setPage(page - 1)}>
diff --git a/src/components/shared/NextButton.tsx b/src/components/shared/NextButton.tsx
index 225c0b3..e542b75 100644
--- a/src/components/shared/NextButton.tsx
+++ b/src/components/shared/NextButton.tsx
@@ -1,5 +1,4 @@
-import { useContext } from "react";
-import { SimulariumContext } from "../../simulation/context";
+import { useSimulariumUi } from "../../hooks/useSimulationContext";
import { PrimaryButton } from "./ButtonLibrary";
import useModule from "../../hooks/useModule";
@@ -8,7 +7,7 @@ interface NextButtonProps {
}
const NextButton = ({ text }: NextButtonProps) => {
- const { page, setPage, module, setModule } = useContext(SimulariumContext);
+ const { page, setPage, module, setModule } = useSimulariumUi();
const { totalPages } = useModule(module);
if (page + 1 > totalPages) {
diff --git a/src/components/shared/ProgressionControl.tsx b/src/components/shared/ProgressionControl.tsx
index 6216a3d..18b5c53 100644
--- a/src/components/shared/ProgressionControl.tsx
+++ b/src/components/shared/ProgressionControl.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { SimulariumContext } from "../../simulation/context";
+import React from "react";
+import { useSimulariumUi } from "../../hooks/useSimulationContext";
import { BaseHandler, ProgressionControlEvent } from "../../types";
import styles from "./progression-control.module.css";
@@ -24,7 +24,7 @@ const ProgressionControl: React.FC = ({
children,
elementId,
}) => {
- const { page, setPage, progressionElement } = useContext(SimulariumContext);
+ const { page, setPage, progressionElement } = useSimulariumUi();
const shouldProgress = progressionElement === elementId;
const progress = () => {
if (shouldProgress) {
@@ -37,7 +37,7 @@ const ProgressionControl: React.FC = ({
const mergeHandlers = (baseHandler: BaseHandler) => {
return (
event: ProgressionControlEvent,
- optionalValue?: string | number | string[] | number[]
+ optionalValue?: string | number | string[] | number[],
) => {
const returnValue = baseHandler(event, optionalValue);
// generally, all handlers are going to return undefined
diff --git a/src/components/shared/ResetButton.tsx b/src/components/shared/ResetButton.tsx
new file mode 100644
index 0000000..cd1bef2
--- /dev/null
+++ b/src/components/shared/ResetButton.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import {
+ useSimulariumAnalysis,
+ useSimulariumUi,
+} from "../../hooks/useSimulationContext";
+import { SecondaryButton } from "./ButtonLibrary";
+
+interface ResetButtonProps {
+ /** If true, resets all state including UI. If false, only resets analysis data */
+ resetAll?: boolean;
+ children?: React.ReactNode;
+}
+
+/**
+ * Button that resets either all application state or just analysis state
+ * based on the resetAll prop
+ */
+const ResetButton: React.FC = ({
+ resetAll = false,
+ children,
+}) => {
+ const { resetAllState } = useSimulariumUi();
+ const { resetAnalysisState } = useSimulariumAnalysis();
+
+ const handleClick = () => {
+ if (resetAll) {
+ resetAllState();
+ } else {
+ resetAnalysisState();
+ }
+ };
+
+ return (
+
+ {children || (resetAll ? "Reset All" : "Clear Data")}
+
+ );
+};
+
+export default ResetButton;
diff --git a/src/components/shared/VisibilityControl.tsx b/src/components/shared/VisibilityControl.tsx
index 2eaf598..46d0c4d 100644
--- a/src/components/shared/VisibilityControl.tsx
+++ b/src/components/shared/VisibilityControl.tsx
@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import { SimulariumContext } from "../../simulation/context";
+import React from "react";
+import { useSimulariumUi } from "../../hooks/useSimulationContext";
import { Module, Section } from "../../types";
interface VisibilityControlProps {
@@ -21,7 +21,7 @@ const VisibilityControl: React.FC = ({
notInIntroduction,
startPage,
}) => {
- const { page, section, module } = useContext(SimulariumContext);
+ const { page, section, module } = useSimulariumUi();
if (conditionalRender === false) {
return null;
}
diff --git a/src/hooks/useSimulationContext.ts b/src/hooks/useSimulationContext.ts
new file mode 100644
index 0000000..68ee299
--- /dev/null
+++ b/src/hooks/useSimulationContext.ts
@@ -0,0 +1,30 @@
+import { useContext } from "react";
+import {
+ SimulariumAnalysisContext,
+ SimulariumAnalysisContextType,
+ SimulariumSimulationContext,
+ SimulariumSimulationContextType,
+ SimulariumUiContext,
+ SimulariumUiContextType,
+} from "../simulation/context";
+
+/**
+ * Hook to access UI-related context (page, module, view type, etc.)
+ */
+export const useSimulariumUi = (): SimulariumUiContextType => {
+ return useContext(SimulariumUiContext);
+};
+
+/**
+ * Hook to access simulation-related context (playback, viewport, trajectory, etc.)
+ */
+export const useSimulariumSimulation = (): SimulariumSimulationContextType => {
+ return useContext(SimulariumSimulationContext);
+};
+
+/**
+ * Hook to access analysis-related context (recorded data, reset functions, etc.)
+ */
+export const useSimulariumAnalysis = (): SimulariumAnalysisContextType => {
+ return useContext(SimulariumAnalysisContext);
+};
diff --git a/src/simulation/context.tsx b/src/simulation/context.tsx
index 82cb55d..c5e7c8e 100644
--- a/src/simulation/context.tsx
+++ b/src/simulation/context.tsx
@@ -12,7 +12,22 @@ import {
} from "../constants";
import { AgentName, Module, ProductName, Section, ViewType } from "../types";
-interface SimulariumContextType {
+export interface SimulariumUiContextType {
+ addCompletedModule: (value: Module) => void;
+ completedModules: Set;
+ module: Module;
+ page: number;
+ progressionElement: ProgressionElement | "";
+ quizQuestion: string;
+ resetAllState: () => void;
+ section: Section;
+ setModule: (value: Module) => void;
+ setPage: (value: number) => void;
+ setViewportType: () => void;
+ viewportType: ViewType;
+}
+
+export interface SimulariumSimulationContextType {
adjustableAgentName: AgentName;
currentProductionConcentration: number;
fixedAgentStartingConcentration: number;
@@ -23,57 +38,60 @@ interface SimulariumContextType {
handleTrajectoryChange: (value: TrajectoryFileInfo) => void;
isPlaying: boolean;
maxConcentration: number;
- module: Module;
- page: number;
productName: ProductName;
- progressionElement: ProgressionElement | "";
- quizQuestion: string;
- recordedConcentrations: number[];
- section: Section;
setIsPlaying: (value: boolean) => void;
- 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;
}
-export const SimulariumContext = createContext({
- adjustableAgentName: AgentName.B,
- currentProductionConcentration: 0,
- fixedAgentStartingConcentration: 0,
- getAgentColor: () => "",
- handleMixAgents: () => {},
- handleStartExperiment: () => {},
- handleTimeChange: () => {},
- handleTrajectoryChange: () => {},
- isPlaying: false,
- maxConcentration: 10,
+export interface SimulariumAnalysisContextType {
+ recordedConcentrations: number[];
+ resetAnalysisState: () => void;
+}
+
+export const SimulariumUiContext = createContext({
+ addCompletedModule: () => {},
+ completedModules: new Set(),
module: Module.A_B_AB,
page: 0,
- productName: ProductName.AB,
progressionElement: "",
quizQuestion: "",
- recordedConcentrations: [],
+ resetAllState: () => {},
section: Section.Introduction,
- setIsPlaying: () => {},
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);
+});
+
+export const SimulariumSimulationContext =
+ createContext({
+ adjustableAgentName: AgentName.B,
+ currentProductionConcentration: 0,
+ fixedAgentStartingConcentration: 0,
+ getAgentColor: () => "",
+ handleMixAgents: () => {},
+ handleStartExperiment: () => {},
+ handleTimeChange: () => {},
+ handleTrajectoryChange: () => {},
+ isPlaying: false,
+ maxConcentration: 10,
+ productName: ProductName.AB,
+ setIsPlaying: () => {},
+ setViewportSize: () => {},
+ simulariumController: null,
+ timeFactor: 30,
+ timeUnit: NANO,
+ trajectoryName: LIVE_SIMULATION_NAME,
+ viewportSize: DEFAULT_VIEWPORT_SIZE,
+ });
+
+export const SimulariumAnalysisContext =
+ createContext({
+ recordedConcentrations: [],
+ resetAnalysisState: () => {},
+ });