1535 move examples to left side drawer

src/ThreeEditor/components/Dialog/OpenFileDialog.tsx

@@ -17,9 +17,7 @@ import { ChangeEvent, SyntheticEvent, useCallback, useMemo, useState } from 'rea
 
 import EXAMPLES from '../../../examples/examples';
 import { LoaderContext } from '../../../services/LoaderService';
-import { FullSimulationData } from '../../../services/ShSimulatorService';
 import { SimulatorType } from '../../../types/RequestTypes';
-import { StatusState } from '../../../types/ResponseTypes';
 import { ConcreteDialogProps, CustomDialog } from './CustomDialog';
 import { DragDropProject } from './DragDropProject';
 
@@ -28,10 +26,15 @@ export function OpenFileDialog({
 	loadFromJson,
 	loadFromFiles,
 	loadFromUrl,
-	loadFromJsonString
-}: ConcreteDialogProps<LoaderContext>) {
+	loadFromJsonString,
+	dialogState,
+	fetchExampleData
+}: ConcreteDialogProps<LoaderContext> & {
+	dialogState: string;
+	fetchExampleData: (exampleName: string) => void; // I don't like how this is typed here
+}) {
 	const [currentFileList, setCurrentFileList] = useState<FileList>();
-	const [value, setValue] = useState('1');
+	const [value, setValue] = useState(dialogState);
 	const handleChange = (event: SyntheticEvent, newValue: string) => {
 		setValue(newValue);
 	};
@@ -56,32 +59,7 @@ export function OpenFileDialog({
 	);
 	const [selectedSimulator, setSelectedSimulator] = useState<SimulatorType>(SimulatorType.COMMON);
 
-	function fetchExampleData(exampleName: string) {
-		fetch(`${process.env.PUBLIC_URL}/examples/${exampleName}`)
-			.then(function (response) {
-				if (response.status !== 200) {
-					console.log('Looks like there was a problem. Status Code: ' + response.status);
-
-					return;
-				}
-
-				response.json().then(function (data) {
-					const simulationData: FullSimulationData = data as FullSimulationData;
-
-					loadFromJson(
-						[simulationData].map(e => {
-							return {
-								...e,
-								jobState: StatusState.COMPLETED
-							};
-						})
-					);
-				});
-			})
-			.catch(function (err) {
-				console.log('Fetch Error :-S', err);
-			});
-	}
+	// const fetchExampleData = useFetchExampleData();
 
 	return (
 		<CustomDialog

src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx

@@ -10,6 +10,7 @@ import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { useFetchExampleData } from '../../../../examples/examples';
 import { useDialog } from '../../../../services/DialogService';
 import { useLoader } from '../../../../services/LoaderService';
 import { useStore } from '../../../../services/StoreService';
@@ -37,6 +38,7 @@ function EditorAppBar({ editor }: AppBarProps) {
 	const [canUndo, setCanUndo] = useState((editor?.history.undos.length ?? 0) > 0);
 	const [canRedo, setCanRedo] = useState((editor?.history.redos.length ?? 0) > 0);
 	const { yaptideEditor } = useStore();
+	const fetchExampleData = useFetchExampleData();
 
 	const updateHistoryButtons = useCallback(() => {
 		setCanUndo((editor?.history.undos.length ?? 0) > 0);
@@ -84,7 +86,9 @@ function EditorAppBar({ editor }: AppBarProps) {
 							loadFromFiles,
 							loadFromJson,
 							loadFromUrl,
-							loadFromJsonString
+							loadFromJsonString,
+							dialogState: '1',
+							fetchExampleData
 						})
 				},
 				{

src/WrapperApp/WrapperApp.tsx

@@ -11,6 +11,7 @@ import { camelCaseToNormalText } from '../util/camelCaseToSentenceCase';
 import InputEditorPanel from './components/InputEditor/InputEditorPanel';
 import NavDrawer from './components/NavDrawer/NavDrawer';
 import { AboutPanel } from './components/Panels/AboutPanel';
+import { ExamplePanel } from './components/Panels/ExamplePanel';
 import LoginPanel from './components/Panels/LoginPanel';
 import { TabPanel } from './components/Panels/TabPanel';
 import ResultsPanel from './components/Results/ResultsPanel';
@@ -70,6 +71,12 @@ function WrapperApp() {
 				open={open}
 				setOpen={setOpen}
 			/>
+			<TabPanel
+				value={tabsValue}
+				index={'example'}
+				persistent>
+				<ExamplePanel setTabsValue={setTabsValue} />
+			</TabPanel>
 			<TabPanel
 				value={tabsValue}
 				index={'editor'}

src/WrapperApp/components/NavDrawer/NavDrawer.tsx

@@ -1,11 +1,12 @@
 import AutoGraphIcon from '@mui/icons-material/AutoGraph';
 import DescriptionIcon from '@mui/icons-material/Description';
+import FolderSpecialIcon from '@mui/icons-material/FolderSpecial';
 import InfoIcon from '@mui/icons-material/Info';
 import Menu from '@mui/icons-material/Menu';
 import MenuOpen from '@mui/icons-material/MenuOpen';
 import OndemandVideoIcon from '@mui/icons-material/OndemandVideo';
 import ViewInArIcon from '@mui/icons-material/ViewInAr';
-import { Box, FormControlLabel, Typography } from '@mui/material';
+import { Box, Button, FormControlLabel, Typography } from '@mui/material';
 import Divider from '@mui/material/Divider';
 import MuiDrawer from '@mui/material/Drawer';
 import IconButton from '@mui/material/IconButton';
@@ -14,7 +15,10 @@ import { CSSObject, styled, Theme } from '@mui/material/styles';
 import { ReactElement, ReactNode, SyntheticEvent } from 'react';
 
 import { useConfig } from '../../../config/ConfigService';
+import { useFetchExampleData } from '../../../examples/examples';
 import { useAuth } from '../../../services/AuthService';
+import { useDialog } from '../../../services/DialogService';
+import { useLoader } from '../../../services/LoaderService';
 import { useStore } from '../../../services/StoreService';
 import { NavDrawerList } from './NavDrawerList';
 
@@ -91,6 +95,8 @@ const getDrawer = () =>
 function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) {
 	const { resultsSimulationData } = useStore();
 	const { isAuthorized } = useAuth();
+	const { open: openTheOpenFileDialog } = useDialog('openFile');
+	const { loadFromJson, loadFromFiles, loadFromUrl, loadFromJsonString } = useLoader();
 
 	const handleDrawerToggle = () => {
 		setOpen(!open);
@@ -99,8 +105,29 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) {
 	const Drawer = getDrawer();
 	const { demoMode } = useConfig();
 
+	const fetchExampleData = useFetchExampleData();
+
+	const onClickOpenExample = () => {
+		// if (isAuthorized) {
+		openTheOpenFileDialog({
+			loadFromFiles,
+			loadFromJson,
+			loadFromUrl,
+			loadFromJsonString,
+			dialogState: '0',
+			fetchExampleData
+		});
+		// }
+	};
+
 	// Order of elements in this list corresponds to their order in UI
 	const menuOptions: MenuOption[] = [
+		{
+			label: 'Example',
+			tooltipLabel: 'Example',
+			value: 'example',
+			icon: <FolderSpecialIcon fontSize='large' />
+		},
 		{
 			label: 'Editor',
 			tooltipLabel: 'Editor',
@@ -190,6 +217,20 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) {
 				</DrawerHeader>
 				<Divider />
 			</Box>
+			<Button
+				color='info'
+				size='large'
+				onClick={onClickOpenExample}>
+				<Box
+					sx={{
+						minWidth: 0,
+						mr: 3,
+						justifyContent: 'center'
+					}}>
+					{<FolderSpecialIcon fontSize='large' />}
+				</Box>
+				<Box>Examples</Box>
+			</Button>
 			<NavDrawerList
 				menuOptions={menuOptions}
 				layout={open ? 'open' : 'closed'}

src/WrapperApp/components/Panels/ExamplePanel.tsx

@@ -0,0 +1,53 @@
+import { Box, Grid2, Paper, Typography } from '@mui/material';
+
+import EXAMPLES, { useFetchExampleData } from '../../../examples/examples';
+import { SimulatorType } from '../../../types/RequestTypes';
+
+interface ExamplePanelProps {
+	setTabsValue: (value: string) => void;
+}
+
+export function ExamplePanel({ setTabsValue }: ExamplePanelProps) {
+	const fetchExampleData = useFetchExampleData();
+
+	return (
+		<Box sx={{ padding: 4 }}>
+			{Object.values(SimulatorType).map(simulator => (
+				<Box
+					key={simulator}
+					sx={{ marginBottom: 4 }}>
+					{/* Simulator Name */}
+					<Typography
+						variant='h5'
+						sx={{ marginBottom: 2 }}>
+						{simulator.toUpperCase()}
+					</Typography>
+
+					{/* Grid2 of Examples */}
+					<Grid2
+						container
+						spacing={2}>
+						{Object.entries(EXAMPLES[simulator]).map(([exampleName, fileName]) => (
+							<Grid2
+								key={fileName}
+								sx={{ width: 200 }}>
+								{' '}
+								{/* Set a fixed width here */}
+								<Paper
+									elevation={3}
+									sx={{ padding: 2, textAlign: 'center', cursor: 'pointer' }}
+									onClick={() => {
+										fetchExampleData(fileName);
+										// Change the tab to 'editor' after loading the example
+										setTabsValue('editor');
+									}}>
+									<Typography variant='body1'>{exampleName}</Typography>
+								</Paper>
+							</Grid2>
+						))}
+					</Grid2>
+				</Box>
+			))}
+		</Box>
+	);
+}

src/examples/examples.ts

@@ -1,7 +1,41 @@
+import { useLoader } from '../services/LoaderService';
+import { FullSimulationData } from '../services/ShSimulatorService';
 import { SimulatorExamples, SimulatorType } from '../types/RequestTypes';
+import { StatusState } from '../types/ResponseTypes';
 
 type SimulationMap = Record<SimulatorType, SimulatorExamples>;
 
 const EXAMPLES: SimulationMap = require(`./exampleMap.json`);
 
+export function useFetchExampleData() {
+	const { loadFromJson } = useLoader();
+
+	const fetchExampleData = (exampleName: string) => {
+		fetch(`${process.env.PUBLIC_URL}/examples/${exampleName}`)
+			.then(response => {
+				if (response.status !== 200) {
+					console.log('Looks like there was a problem. Status Code: ' + response.status);
+
+					return;
+				}
+
+				response.json().then(data => {
+					const simulationData: FullSimulationData = data as FullSimulationData;
+
+					loadFromJson(
+						[simulationData].map(e => ({
+							...e,
+							jobState: StatusState.COMPLETED
+						}))
+					);
+				});
+			})
+			.catch(err => {
+				console.log('Fetch Error :-S', err);
+			});
+	};
+
+	return fetchExampleData;
+}
+
 export default EXAMPLES;