1535 move examples to left side drawer (#1782)

* Added button with temporary styling * Simple styling * Small changes * Second version of the Example button * Code refactor * Grid change * Added proposed changes * Small fix * Changed name to Examples * Fixed tests * Removed unnecessary check * Small formatting fix
yaptide · Nov 25, 2024 · 89e5439 · 89e5439
1 parent 04f7229
commit 89e5439
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 273 deletions.
diff --git a/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx b/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx
@@ -1,25 +1,9 @@
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import {
-	Box,
-	Button,
-	Divider,
-	IconButton,
-	List,
-	ListItem,
-	ListItemButton,
-	Tab,
-	Tabs,
-	TextField,
-	Tooltip
-} from '@mui/material';
+import { Box, Button, Divider, IconButton, Tab, TextField, Tooltip } from '@mui/material';
 import { ChangeEvent, SyntheticEvent, useCallback, useMemo, useState } from 'react';
 
-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 +12,13 @@ export function OpenFileDialog({
 	loadFromJson,
 	loadFromFiles,
 	loadFromUrl,
-	loadFromJsonString
-}: ConcreteDialogProps<LoaderContext>) {
+	loadFromJsonString,
+	dialogState
+}: ConcreteDialogProps<LoaderContext> & {
+	dialogState: string;
+}) {
 	const [currentFileList, setCurrentFileList] = useState<FileList>();
-	const [value, setValue] = useState('1');
+	const [value, setValue] = useState(dialogState);
 	const handleChange = (event: SyntheticEvent, newValue: string) => {
 		setValue(newValue);
 	};
@@ -42,46 +29,17 @@ export function OpenFileDialog({
 	};
 
 	const [url, setUrl] = useState('');
-	const [exampleIndex, setExampleIndex] = useState<number | null>(null);
 	const handleUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setUrl(event.target.value);
 	};
-	const tabList = useMemo(() => ['Examples', 'Upload file', 'From URL', 'Plain text'], []);
+	const tabList = useMemo(() => ['Upload file', 'From URL', 'Plain text'], []);
 	const tabPanelProps = useCallback(
 		(index: number) => ({
 			value: index.toString(),
 			hidden: value !== index.toString() ? true : undefined
 		}),
 		[value]
 	);
-	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);
-			});
-	}
 
 	return (
 		<CustomDialog
@@ -112,66 +70,6 @@ export function OpenFileDialog({
 					</Box>
 					<Divider />
 					<TabPanel {...tabPanelProps(0)}>
-						<Tabs
-							value={selectedSimulator}
-							onChange={(e, newValue) => setSelectedSimulator(newValue)}
-							aria-label='simulator selection tabs'
-							variant='fullWidth'>
-							{Object.values(SimulatorType).map(simulator => (
-								<Tab
-									label={simulator}
-									value={simulator}
-								/>
-							))}
-						</Tabs>
-						<Divider />
-						<Box
-							sx={{
-								display: 'flex',
-								flexDirection: 'column',
-								gap: 2,
-								height: 319,
-								boxSizing: 'border-box'
-							}}>
-							<List id={'Examples list'}>
-								{Object.entries(EXAMPLES[selectedSimulator]).map((name, idx) => (
-									<ListItem
-										disablePadding
-										key={'Example_' + idx.toString()}
-										value={idx}
-										aria-labelledby={`example-btn-${idx}`}
-										aria-selected={exampleIndex === idx}
-										onClick={() => setExampleIndex(idx)}>
-										<ListItemButton
-											id={`example-btn-${idx}`}
-											selected={exampleIndex === idx}>
-											{name[0]}
-										</ListItemButton>
-									</ListItem>
-								))}
-							</List>
-							<Button
-								aria-label='Load example button'
-								variant='contained'
-								fullWidth
-								sx={{ marginTop: 'auto' }}
-								disabled={exampleIndex === null}
-								onClick={() => {
-									onClose();
-
-									fetchExampleData(
-										EXAMPLES[selectedSimulator][
-											Object.keys(EXAMPLES[selectedSimulator])[
-												exampleIndex ?? 0
-											]
-										]
-									);
-								}}>
-								Load
-							</Button>
-						</Box>
-					</TabPanel>
-					<TabPanel {...tabPanelProps(1)}>
 						<Box
 							sx={{
 								display: 'flex',
@@ -221,7 +119,7 @@ export function OpenFileDialog({
 							</Button>
 						</Box>
 					</TabPanel>
-					<TabPanel {...tabPanelProps(2)}>
+					<TabPanel {...tabPanelProps(1)}>
 						<Box
 							sx={{
 								display: 'flex',
@@ -251,7 +149,7 @@ export function OpenFileDialog({
 							</Button>
 						</Box>
 					</TabPanel>
-					<TabPanel {...tabPanelProps(3)}>
+					<TabPanel {...tabPanelProps(2)}>
 						<Box
 							sx={{
 								display: 'flex',

diff --git a/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx b/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx
@@ -84,7 +84,8 @@ function EditorAppBar({ editor }: AppBarProps) {
 							loadFromFiles,
 							loadFromJson,
 							loadFromUrl,
-							loadFromJsonString
+							loadFromJsonString,
+							dialogState: '0'
 						})
 				},
 				{

diff --git a/src/WrapperApp/WrapperApp.tsx b/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={'examples'}
+				persistent>
+				<ExamplePanel setTabsValue={setTabsValue} />
+			</TabPanel>
 			<TabPanel
 				value={tabsValue}
 				index={'editor'}

diff --git a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx
@@ -1,5 +1,6 @@
 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';
@@ -27,6 +28,7 @@ export type MenuOption = {
 	value: string;
 	disabled?: boolean;
 	icon: ReactElement;
+	separator?: boolean;
 };
 
 type NavDrawerProps = {
@@ -101,6 +103,13 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) {
 
 	// Order of elements in this list corresponds to their order in UI
 	const menuOptions: MenuOption[] = [
+		{
+			label: 'Examples',
+			tooltipLabel: 'Examples',
+			value: 'examples',
+			icon: <FolderSpecialIcon fontSize='large' />,
+			separator: true
+		},
 		{
 			label: 'Editor',
 			tooltipLabel: 'Editor',

diff --git a/src/WrapperApp/components/NavDrawer/NavDrawerList.tsx b/src/WrapperApp/components/NavDrawer/NavDrawerList.tsx
@@ -1,12 +1,9 @@
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import LoginIcon from '@mui/icons-material/Login';
-import LogoutIcon from '@mui/icons-material/Logout';
 import PersonIcon from '@mui/icons-material/Person';
 import {
 	Box,
 	Divider,
-	IconButton,
 	List,
 	ListItem,
 	ListItemButton,
@@ -206,7 +203,17 @@ export function NavDrawerList({
 }
 
 function NavDrawerElement({
-	menuOption: { label, richLabel, tooltipLabel, value, disabled, info, description, icon },
+	menuOption: {
+		label,
+		richLabel,
+		tooltipLabel,
+		value,
+		disabled,
+		info,
+		description,
+		icon,
+		separator
+	},
 	open,
 	selected,
 	secondaryAction,
@@ -279,6 +286,7 @@ function NavDrawerElement({
 						{listItemContent}
 					</ListItemButton>
 				)}
+				{separator && <Divider />}
 			</ListItem>
 		</Tooltip>
 	);

diff --git a/src/WrapperApp/components/Panels/ExamplePanel.tsx b/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>
+	);
+}