Update demo mode

yaptide · Oct 21, 2022 · 9603ce5 · 9603ce5
1 parent 8b31c6b
commit 9603ce5
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 199 deletions.
diff --git a/src/WrapperApp/WrapperApp.tsx b/src/WrapperApp/WrapperApp.tsx
@@ -14,7 +14,6 @@ import InputEditorPanel from './components/InputEditor/InputEditorPanel';
 import LoginPanel from './components/LoginPanel';
 import ResultsPanel from './components/Results/ResultsPanel';
 import SimulationPanel from './components/Simulation/SimulationPanel';
-import SimulationPanelDemo from './components/Simulation/SimulationPanelDemo';
 import { TabPanel } from './components/TabPanel';
 import YapDrawer from './components/YapDrawer/YapDrawer';
 
@@ -100,11 +99,7 @@ function WrapperApp() {
 			</TabPanel>
 
 			<TabPanel value={tabsValue} index={'simulations'}>
-				{!DEMO_MODE ? (
-					<SimulationPanel goToResults={() => setTabsValue('results')} />
-				) : (
-					<SimulationPanelDemo goToResults={() => setTabsValue('results')} />
-				)}
+				<SimulationPanel goToResults={() => setTabsValue('results')} />
 			</TabPanel>
 
 			<TabPanel value={tabsValue} index={'results'} persistent>

diff --git a/src/WrapperApp/components/InputEditor/InputFilesEditor.tsx b/src/WrapperApp/components/InputEditor/InputFilesEditor.tsx
@@ -5,6 +5,7 @@ import CodeEditor from '@uiw/react-textarea-code-editor';
 import { saveString } from '../../../util/File';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import useTheme from '@mui/system/useTheme';
+import { DEMO_MODE } from '../../../util/Config';
 
 interface InputFilesEditorProps {
 	inputFiles?: InputFiles;
@@ -45,6 +46,7 @@ export function InputFilesEditor(props: InputFilesEditorProps) {
 					<Button
 						color='success'
 						variant='contained'
+						disabled={DEMO_MODE}
 						onClick={() => props.runSimulation?.call(null, inputFiles)}>
 						Run input files
 					</Button>
@@ -57,7 +59,10 @@ export function InputFilesEditor(props: InputFilesEditorProps) {
 					Download all
 				</Button>
 				{props.saveAndExit && (
-					<Button color='info' onClick={() => props.saveAndExit?.call(null, inputFiles)}>
+					<Button
+						disabled={DEMO_MODE}
+						color='info'
+						onClick={() => props.saveAndExit?.call(null, inputFiles)}>
 						Save and exit
 					</Button>
 				)}

diff --git a/src/WrapperApp/components/Simulation/SimulationPanel.tsx b/src/WrapperApp/components/Simulation/SimulationPanel.tsx
@@ -34,6 +34,8 @@ import { InputFilesEditor } from '../InputEditor/InputFilesEditor';
 import SimulationStatus from './SimulationStatus';
 import CableIcon from '@mui/icons-material/Cable';
 import { SimulationPanelGrid } from './SimulationPanelGrid';
+import { DEMO_MODE } from '../../../util/Config';
+import EXAMPLES from '../../../ThreeEditor/examples/examples';
 
 interface SimulationPanelProps {
 	goToResults?: () => void;
@@ -54,7 +56,7 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 	const [isBackendAlive, setBackendAlive] = useState(false);
 	const [showInputFilesEditor, setShowInputFilesEditor] = useState(false);
 	const [page, setPage] = useState(1);
-	const [pageCount, setPageCount] = useState(1);
+	const [pageCount, setPageCount] = useState(0);
 	const [orderType, setOrderType] = useState<OrderType>(OrderType.ASCEND);
 	const [orderBy, setOrderBy] = useState<OrderBy>(OrderBy.START_TIME);
 	const [pageSize, setPageSize] = useState(4);
@@ -70,45 +72,10 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 
 	const { resultsProvider, canLoadResultsData, setLoadedResults } = useLoader();
 
-	useEffect(() => {
-		if (canLoadResultsData) {
-			setLoadedResults();
-			const newLocalData = resultsProvider;
-			newLocalData.forEach(data => {
-				data.status = StatusState.LOCAL;
-			});
-			setLocalSimulationData(newLocalData);
-			setLocalResultsSimulationData(newLocalData);
-		} else {
-			setLocalSimulationData(localResultsSimulationData ?? []);
-		}
-	}, [
-		canLoadResultsData,
-		resultsProvider,
-		setLoadedResults,
-		localResultsSimulationData,
-		setLocalResultsSimulationData
-	]);
-
 	const [simulationIDInterval, setSimulationIDInterval] = useState<number | null>(null);
 
 	const [controller] = useState(new AbortController());
 
-	useEffect(() => {
-		if (editorRef.current) {
-			const hash = editorRef.current.toJSON().hash;
-			const anyResults = simulationsStatusData.find(s => s.editor?.hash === hash);
-			if (anyResults) editorRef.current.results = anyResults;
-			else editorRef.current.results = null;
-		}
-	}, [simulationsStatusData]);
-
-	useEffect(() => {
-		return () => {
-			controller.abort();
-		};
-	}, [controller]);
-
 	const updateSimulationInfo = useCallback(
 		() =>
 			getSimulations(page, pageSize, orderType, orderBy)
@@ -119,7 +86,6 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 				.catch(),
 		[controller.signal, getSimulations, orderType, orderBy, page, pageSize]
 	);
-
 	const refreshPage = useCallback(
 		(
 			page: number,
@@ -136,7 +102,6 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 				.catch(),
 		[getSimulations]
 	);
-
 	const handlePageChange = (event: React.ChangeEvent<unknown>, page: number) => {
 		setPage(page);
 		refreshPage(page, pageSize, orderType, orderBy, controller.signal);
@@ -149,29 +114,9 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 		refreshPage(page, pageSize, orderType, orderBy, controller.signal);
 	};
 
-	useEffect(() => {
-		sendHelloWorld(controller.signal)
-			.then(() => {
-				setBackendAlive(true);
-				updateSimulationInfo();
-				setSimulationIDInterval(10000);
-			})
-			.catch(() => {
-				setBackendAlive(false);
-			});
-	}, [
-		controller.signal,
-		sendHelloWorld,
-		updateSimulationInfo,
-		setSimulationIDInterval,
-		isBackendAlive,
-		setBackendAlive
-	]);
-
-	useInterval(updateSimulationInfo, simulationIDInterval, true);
-
 	const updateSimulationData = useCallback(
 		() =>
+			!DEMO_MODE &&
 			getSimulationsStatus(simulationInfo, controller.signal, true, (id, data) => {
 				if (id === trackedId && data.status === StatusState.SUCCESS)
 					setResultsSimulationData(data);
@@ -187,16 +132,6 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 		]
 	);
 
-	useEffect(() => {
-		updateSimulationData();
-	}, [updateSimulationData]);
-
-	useInterval(
-		updateSimulationData,
-		simulationIDInterval !== null && simulationInfo.length > 0 ? 1000 : null,
-		true
-	);
-
 	const runSimulation = (inputFiles?: InputFiles) => {
 		setInProgress(true);
 		const input = inputFiles ? { inputFiles } : { editorJSON: editorRef.current?.toJSON() };
@@ -218,6 +153,73 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 		setShowInputFilesEditor(false);
 	};
 
+	useEffect(() => {
+		if (!DEMO_MODE && editorRef.current) {
+			const hash = editorRef.current.toJSON().hash;
+			const anyResults = simulationsStatusData.find(s => s.editor?.hash === hash);
+			if (anyResults) editorRef.current.results = anyResults;
+			else editorRef.current.results = null;
+		}
+	}, [simulationsStatusData]);
+
+	useEffect(() => {
+		return () => {
+			controller.abort();
+		};
+	}, [controller]);
+
+	useEffect(() => {
+		if (!DEMO_MODE)
+			sendHelloWorld(controller.signal)
+				.then(() => {
+					setBackendAlive(true);
+					updateSimulationInfo();
+					setSimulationIDInterval(10000);
+				})
+				.catch(() => {
+					setBackendAlive(false);
+				});
+	}, [
+		controller.signal,
+		sendHelloWorld,
+		updateSimulationInfo,
+		setSimulationIDInterval,
+		isBackendAlive,
+		setBackendAlive
+	]);
+
+	useInterval(updateSimulationInfo, simulationIDInterval, true);
+
+	useEffect(() => {
+		updateSimulationData();
+	}, [updateSimulationData]);
+
+	useInterval(
+		updateSimulationData,
+		simulationIDInterval !== null && simulationInfo.length > 0 ? 1000 : null,
+		true
+	);
+
+	useEffect(() => {
+		if (canLoadResultsData) {
+			setLoadedResults();
+			const newLocalData = resultsProvider;
+			newLocalData.forEach(data => {
+				data.status = StatusState.LOCAL;
+			});
+			setLocalSimulationData(newLocalData);
+			setLocalResultsSimulationData(newLocalData);
+		} else {
+			setLocalSimulationData(localResultsSimulationData ?? []);
+		}
+	}, [
+		canLoadResultsData,
+		resultsProvider,
+		setLoadedResults,
+		localResultsSimulationData,
+		setLocalResultsSimulationData
+	]);
+
 	return (
 		<Box
 			sx={{
@@ -262,7 +264,9 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 						variant='h5'
 						component='p'
 						sx={{ mb: 0, lineHeight: '2rem' }}>
-						Server status: {isBackendAlive ? 'Online' : 'Unreachable'}
+						{!DEMO_MODE
+							? `Server status: ${isBackendAlive ? 'Online' : 'Unreachable'}`
+							: 'Demo results'}
 					</Typography>
 					<CableIcon
 						color={isBackendAlive ? 'success' : 'disabled'}
@@ -297,7 +301,7 @@ export default function SimulationPanel(props: SimulationPanelProps) {
 				)}
 			</Card>
 			<SimulationPanelGrid
-				simulationsStatusData={simulationsStatusData}
+				simulationsStatusData={!DEMO_MODE ? simulationsStatusData : EXAMPLES}
 				localSimulationData={localSimulationData}
 				handleLoadResults={(id, simulation) => {
 					if (id === null) props.goToResults?.call(null);

diff --git a/src/WrapperApp/components/Simulation/SimulationPanelDemo.tsx b/src/WrapperApp/components/Simulation/SimulationPanelDemo.tsx