add results in demo (#489)

package.json

@@ -23,6 +23,7 @@
 		"glob": "^8.0.3",
 		"ky": "^0.31.0",
 		"notistack": "^2.0.5",
+		"object-hash": "^3.0.0",
 		"react": "^17.0.2",
 		"react-async-script": "^1.2.0",
 		"react-countdown": "^2.3.2",

src/ThreeEditor/examples/examples.ts

@@ -1,16 +1,26 @@
+import { SimulationStatusData } from "../../services/ShSimulatorService";
+
+interface EditorExample {
+	editor: unknown;
+	result: SimulationStatusData;
+}
+
 let canImport = true;
 let iterator = 1;
-const examples = [];
+const EXAMPLES: EditorExample[] = [];
 while (canImport) {
 	try {
-		const example = require(`./ex${iterator}.json`);
-		if (!(example.project?.title && example.project.title.length > 0))
-			example.project.title = `Untitled example ${iterator}`;
-		examples.push(example);
+		const editor = require(`./ex${iterator}.json`);
+		const result = require(`./ex${iterator}_result.json`);
+		editor.result = result;
+		if (!(editor.project?.title && editor.project.title.length > 0))
+			editor.project.title = `Untitled example ${iterator}`;
+		EXAMPLES.push({ editor, result });
 		iterator++;
 	} catch (e) {
+		console.log(`Loaded ${iterator - 1} examples`);
 		canImport = false;
 	}
 }
 
-export default examples;
+export default EXAMPLES;

src/ThreeEditor/js/Editor.js

@@ -12,6 +12,7 @@ import { ContextManager } from './Editor.Context';
 import { History as _History } from './History.js';
 import { Loader } from './Loader.js';
 import { Storage as _Storage } from './Storage.js';
+import hash from 'object-hash';
 
 var _DEFAULT_CAMERA = new THREE.PerspectiveCamera(50, 1, 0.01, 1000);
 _DEFAULT_CAMERA.name = 'Camera';
@@ -589,7 +590,7 @@ Editor.prototype = {
 
 		//
 
-		return {
+		const jsonEditor = {
 			metadata: {
 				version: this.jsonVersion,
 				type: 'Editor',
@@ -612,8 +613,12 @@ Editor.prototype = {
 			detectManager: this.detectManager.toJSON(), // serialize DetectManager;
 			beam: this.beam.toJSON(),
 			materialManager: this.materialManager.toJSON(), // serialize MaterialManager
-			scoringManager: this.scoringManager.toJSON() // serialize ScoringManager
+			scoringManager: this.scoringManager.toJSON(), // serialize ScoringManager
 		};
+
+		const hashJsonEditor = hash(jsonEditor);
+
+		return { ...jsonEditor, hash: hashJsonEditor };
 	},
 
 	objectByUuid(uuid) {

src/ThreeEditor/js/menubar/Menubar.Examples.js

@@ -1,4 +1,4 @@
-import examples from '../../examples/examples';
+import EXAMPLES from '../../examples/examples';
 import { UIHorizontalRule, UIPanel } from '../libs/ui.js';
 import { createOption } from './Menubar.js';
 
@@ -28,9 +28,9 @@ export function MenubarExamples(editor) {
 
 	// YAPTIDE examples
 	options.add(
-		...examples.map(data =>
-			createOption('option', data.project?.title ?? 'Example', () => {
-				window.confirm('Any unsaved data will be lost. Are you sure?') && loadExample(data);
+		...EXAMPLES.map(example =>
+			createOption('option', example.editor.project?.title ?? 'Example', () => {
+				window.confirm('Any unsaved data will be lost. Are you sure?') && loadExample(example.editor);
 			})
 		),
 		new UIHorizontalRule()

src/ThreeEditor/js/sidebar/object/Object.Quantity.ts

@@ -1,21 +1,17 @@
-import { ScoringOutput } from '../../../util/Scoring/ScoringOutput';
 import * as Scoring from '../../../util/Scoring/ScoringOutputTypes';
 import { ScoringQuantity } from '../../../util/Scoring/ScoringQuantity';
 import {
-	createFullwidthButton,
 	createRowConditionalNumber,
 	createRowConditionalSelect,
 	createRowSelect,
 	hideUIElement,
 	showUIElement
 } from '../../../util/Ui/Uis';
 import {
-	AddQuantityCommand,
-	SetOutputSettingsCommand,
 	SetQuantityValueCommand
 } from '../../commands/Commands';
 import { Editor } from '../../Editor';
-import { UIButton, UICheckbox, UINumber, UIPanel, UIRow, UISelect, UIText } from '../../libs/ui';
+import { UICheckbox, UINumber, UIRow, UISelect } from '../../libs/ui';
 import { ObjectAbstract } from './Object.Abstract';
 
 export class ObjectQuantity extends ObjectAbstract {

src/WrapperApp/WrapperApp.tsx

@@ -12,6 +12,7 @@ import InputEditorPanel from './components/InputEditor/InputEditorPanel';
 import LoginPanel from './components/LoginPanel';
 import ResultsPanel from './components/ResultsPanel';
 import SimulationPanel from './components/Simulation/SimulationPanel';
+import SimulationPanelDemo from './components/Simulation/SimulationPanelDemo';
 import { TabPanel } from './components/TabPanel';
 
 function WrapperApp() {
@@ -48,12 +49,12 @@ function WrapperApp() {
 			<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
 				<Tabs value={tabsValue} onChange={handleChange}>
 					<Tab label='Editor' value={'Editor'} />
-					<Tab label='Run' value={'Run'} disabled={DEMO_MODE || !isAuthorized} />
 					<Tab label='Input Editor' value={'Input Editor'} />
+					<Tab label='Run' value={'Run'} disabled={!DEMO_MODE && !isAuthorized} />
 					<Tab
 						label='Results'
 						value={'Results'}
-						disabled={DEMO_MODE || !isAuthorized || !resultsSimulationData}
+						disabled={(!DEMO_MODE && !isAuthorized) || !resultsSimulationData}
 					/>
 					<Tab label='Projects' value={'Projects'} disabled />
 					<Tab label='About' value={'About'} />
@@ -77,19 +78,19 @@ function WrapperApp() {
 				<InputEditorPanel goToRun={() => setTabsValue('Run')} />
 			</TabPanel>
 
-			{!DEMO_MODE && (
-				<>
-					<TabPanel value={tabsValue} index={'Run'}>
-						<SimulationPanel goToResults={() => setTabsValue('Results')} />
-					</TabPanel>
+			<TabPanel value={tabsValue} index={'Run'}>
+				{!DEMO_MODE ? (
+					<SimulationPanel goToResults={() => setTabsValue('Results')} />
+				) : (
+					<SimulationPanelDemo goToResults={() => setTabsValue('Results')} />
+				)}
+			</TabPanel>
 
-					<TabPanel value={tabsValue} index={'Results'} persistent>
-						<JsRootService asyncScriptOnLoad={onLoad}>
-							<ResultsPanel />
-						</JsRootService>
-					</TabPanel>
-				</>
-			)}
+			<TabPanel value={tabsValue} index={'Results'} persistent>
+				<JsRootService asyncScriptOnLoad={onLoad}>
+					<ResultsPanel />
+				</JsRootService>
+			</TabPanel>
 
 			<TabPanel value={tabsValue} index={'About'} persistentIfVisited>
 				<AboutPanel />

src/WrapperApp/components/InputEditor/InputEditorPanel.tsx

@@ -116,7 +116,10 @@ export default function InputEditorPanel(props: InputEditorPanelProps) {
 					{!DEMO_MODE && <ToggleButton value='remote'>Remote</ToggleButton>}
 				</ToggleButtonGroup>
 			</Box>
-			<InputFilesEditor inputFiles={inputFiles} runSimulation={runSimulation} />
+			<InputFilesEditor
+				inputFiles={inputFiles}
+				runSimulation={!DEMO_MODE ? runSimulation : undefined}
+			/>
 		</Box>
 	);
 }

src/WrapperApp/components/ResultsPanel.tsx

@@ -1,8 +1,9 @@
-import { Box, Card, CardContent, Grid, Tab, Tabs, Typography, useMediaQuery } from '@mui/material';
+import { Box, Button, Card, CardContent, Grid, Tab, Tabs, Typography, useMediaQuery } from '@mui/material';
 import React, { SyntheticEvent, useEffect, useState } from 'react';
 import { generateGraphs } from '../../JsRoot/GraphData';
 import { TabPanel } from './TabPanel';
 import { useStore } from '../../services/StoreService';
+import { saveString } from '../../util/File';
 
 function ResultsPanel() {
 	const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
@@ -19,12 +20,20 @@ function ResultsPanel() {
 		setTabsValue(newValue);
 	};
 
+	const onClickSaveToFile = () => {
+		saveString(JSON.stringify(simulation), `${simulation?.name}_result.json`);
+	};
+
 	return (
 		<Box>
 			{simulation && (
 				<Card
 					sx={{
-						margin: '0.5rem'
+						margin: '0.5rem',
+						padding: '0.5rem',
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'center',
 					}}>
 					<Typography
 						gutterBottom
@@ -35,6 +44,10 @@ function ResultsPanel() {
 						}}>
 						{simulation.name} [{simulation.creationDate.toLocaleString()}]
 					</Typography>
+
+					<Button size='small' onClick={onClickSaveToFile}>
+						Save to file
+					</Button>
 				</Card>
 			)}
 

src/WrapperApp/components/Simulation/SimulationPanelDemo.tsx

@@ -0,0 +1,50 @@
+import {
+	Box,
+	Card,
+	CardContent,
+	Typography
+} from '@mui/material';
+
+import { useStore } from '../../../services/StoreService';
+import EXAMPLES from '../../../ThreeEditor/examples/examples';
+import SimulationStatus from './SimulationStatus';
+
+interface SimulationPanelProps {
+	goToResults?: () => void;
+}
+
+export default function SimulationPanel(props: SimulationPanelProps) {
+	const { setResultsSimulationData } = useStore();
+
+	return (
+		<Box
+			sx={{
+				margin: '0 auto',
+				width: 'min(960px, 100%)',
+				padding: '2rem 5rem',
+				display: 'flex',
+				flexDirection: 'column',
+				gap: '1.5rem',
+				height: 'min-content'
+			}}>
+			<Card sx={{ minWidth: 275 }}>
+				<CardContent>
+					<Typography gutterBottom variant='h5' component='div'>
+						Demo Simulation Run List
+					</Typography>
+				</CardContent>
+			</Card>
+
+			{EXAMPLES.map(example => (
+				<SimulationStatus
+					key={example.result.uuid}
+					simulation={example.result}
+					loadResults={id => {
+						console.log(id);
+						if (id === null) props.goToResults?.call(null);
+						else setResultsSimulationData(example.result);
+					}}></SimulationStatus>
+			))}
+		</Box>
+	);
+}

src/WrapperApp/components/Simulation/SimulationStatus.tsx

@@ -12,19 +12,20 @@ import {
 	Typography
 } from '@mui/material';
 import { SxProps, Theme } from '@mui/material/styles';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import Countdown from 'react-countdown';
 import {
 	InputFiles,
 	SimulationStatusData,
 	StatusState
 } from '../../../services/ShSimulatorService';
 import { useStore } from '../../../services/StoreService';
+import { saveString } from '../../../util/File';
 
 interface SimulationStatusProps {
 	simulation: SimulationStatusData;
 	loadResults?: (taskId: string | null) => void;
-	showInputFiles: (inputFiles?: InputFiles) => void;
+	showInputFiles?: (inputFiles?: InputFiles) => void;
 }
 
 export default function SimulationStatus({
@@ -36,14 +37,14 @@ export default function SimulationStatus({
 
 	const tableRowStyle: SxProps<Theme> = { '&:last-child td, &:last-child th': { border: 0 } };
 
-	const row = (title: string, value: {} | undefined, guard = true) => (
+	const row = (title: string, value: string | undefined | ReactNode, guard = true) => (
 		<React.Fragment key={title}>
 			{guard && (
 				<TableRow sx={tableRowStyle}>
 					<TableCell component='th' scope='row'>
 						{title}
 					</TableCell>
-					<TableCell align='right'>{value?.toString()}</TableCell>
+					<TableCell align='right'>{value}</TableCell>
 				</TableRow>
 			)}
 		</React.Fragment>
@@ -84,7 +85,7 @@ export default function SimulationStatus({
 	};
 
 	const onClickInputFiles = () => {
-		showInputFiles(simulation.inputFiles);
+		showInputFiles?.call(null, simulation.inputFiles);
 	};
 
 	const onClickShowError = () => {
@@ -106,6 +107,10 @@ export default function SimulationStatus({
 		errorWindow.document.close();
 	};
 
+	const onClickSaveToFile = () => {
+		saveString(JSON.stringify(simulation), `${simulation.name}_result.json`);
+	};
+
 	return (
 		<Card sx={{ minWidth: 275 }}>
 			<CardContent>
@@ -123,7 +128,7 @@ export default function SimulationStatus({
 				</TableContainer>
 			</CardContent>
 			<CardActions>
-				{simulation.inputFiles && (
+				{simulation.inputFiles && showInputFiles && (
 					<Button size='small' onClick={onClickInputFiles}>
 						Show Input Files
 					</Button>
@@ -150,6 +155,12 @@ export default function SimulationStatus({
 						: 'Go to Results'}
 				</Button>
 
+				{simulation.status === StatusState.SUCCESS && (
+					<Button size='small' onClick={onClickSaveToFile}>
+						Save to file
+					</Button>
+				)}
+
 				{simulation.status === StatusState.PROGRESS && (
 					<Button size='small' disabled>
 						Cancel Simulation