From d5ea2244d6fcf4d19b4eadc566ff8da892106cb5 Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Mon, 14 Oct 2024 20:48:16 +0200 Subject: [PATCH 01/12] Added button with temporary styling --- .../components/Dialog/OpenFileDialog.tsx | 7 +++--- .../Editor/EditorAppBar/EditorAppBar.tsx | 3 ++- .../components/NavDrawer/NavDrawer.tsx | 24 ++++++++++++++++++- 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx b/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx index 0213141e0..11ffb75e6 100644 --- a/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx +++ b/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx @@ -28,10 +28,11 @@ export function OpenFileDialog({ loadFromJson, loadFromFiles, loadFromUrl, - loadFromJsonString -}: ConcreteDialogProps) { + loadFromJsonString, + dialogState +}: ConcreteDialogProps & { dialogState: string }) { const [currentFileList, setCurrentFileList] = useState(); - const [value, setValue] = useState('1'); + const [value, setValue] = useState(dialogState); const handleChange = (event: SyntheticEvent, newValue: string) => { setValue(newValue); }; diff --git a/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx b/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx index 99c492607..ef5810ab2 100644 --- 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: '1' }) }, { diff --git a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx index 87f2f85b1..91a635689 100644 --- a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx +++ b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx @@ -5,7 +5,7 @@ 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'; @@ -15,6 +15,8 @@ import { ReactElement, ReactNode, SyntheticEvent } from 'react'; import { useConfig } from '../../../config/ConfigService'; 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 +93,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,6 +103,18 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { const Drawer = getDrawer(); const { demoMode } = useConfig(); + const onClickOpenExample = () => { + if (isAuthorized) { + openTheOpenFileDialog({ + loadFromFiles, + loadFromJson, + loadFromUrl, + loadFromJsonString, + dialogState: '0' + }); + } + }; + // Order of elements in this list corresponds to their order in UI const menuOptions: MenuOption[] = [ { @@ -190,6 +206,12 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { + Date: Tue, 15 Oct 2024 22:09:41 +0200 Subject: [PATCH 02/12] Simple styling --- src/WrapperApp/components/NavDrawer/NavDrawer.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx index 91a635689..57f8e0890 100644 --- 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'; @@ -208,9 +209,17 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { Date: Mon, 21 Oct 2024 19:35:51 +0200 Subject: [PATCH 03/12] Small changes --- .../components/NavDrawer/NavDrawer.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx index 57f8e0890..eaa7c4b2e 100644 --- a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx +++ b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx @@ -105,15 +105,15 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { const { demoMode } = useConfig(); const onClickOpenExample = () => { - if (isAuthorized) { - openTheOpenFileDialog({ - loadFromFiles, - loadFromJson, - loadFromUrl, - loadFromJsonString, - dialogState: '0' - }); - } + // if (isAuthorized) { + openTheOpenFileDialog({ + loadFromFiles, + loadFromJson, + loadFromUrl, + loadFromJsonString, + dialogState: '0' + }); + // } }; // Order of elements in this list corresponds to their order in UI @@ -219,7 +219,7 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { }}> {} - Open Example + Examples Date: Tue, 5 Nov 2024 19:12:13 +0100 Subject: [PATCH 04/12] Second version of the Example button --- src/WrapperApp/WrapperApp.tsx | 7 ++ .../components/NavDrawer/NavDrawer.tsx | 6 ++ .../components/Panels/ExamplePanel.tsx | 88 +++++++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 src/WrapperApp/components/Panels/ExamplePanel.tsx diff --git a/src/WrapperApp/WrapperApp.tsx b/src/WrapperApp/WrapperApp.tsx index 780dde85a..0bc8928f8 100644 --- 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} /> + + + + }, { label: 'Editor', tooltipLabel: 'Editor', diff --git a/src/WrapperApp/components/Panels/ExamplePanel.tsx b/src/WrapperApp/components/Panels/ExamplePanel.tsx new file mode 100644 index 000000000..30957a160 --- /dev/null +++ b/src/WrapperApp/components/Panels/ExamplePanel.tsx @@ -0,0 +1,88 @@ +import { Box,Grid, Paper, Typography } from '@mui/material'; +import { useState } from 'react'; + +import EXAMPLES from '../../../examples/examples'; +import { useLoader } from '../../../services/LoaderService'; +import { FullSimulationData } from '../../../services/ShSimulatorService'; +import { SimulatorType } from '../../../types/RequestTypes'; +import { StatusState } from '../../../types/ResponseTypes'; + +interface ExamplePanelProps { + setTabsValue: (value: string) => void; +} + +export function ExamplePanel({ setTabsValue }: ExamplePanelProps) { + // Call useLoader within the component to access its functions. + const { loadFromJson } = useLoader(); + + // Move fetchExampleData inside ExamplePanel so it can access loadFromJson. + 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 + }; + }) + ); + + // Change the tab to 'editor' after loading the example + setTabsValue('editor'); + }); + }) + .catch(function (err) { + console.log('Fetch Error :-S', err); + }); + } + + return ( + + {Object.values(SimulatorType).map(simulator => ( + + {/* Simulator Name */} + + {simulator.toUpperCase()} + + + {/* Grid of Examples */} + + {Object.entries(EXAMPLES[simulator]).map(([exampleName, fileName]) => ( + + { + fetchExampleData(fileName); + }}> + {exampleName} + + + ))} + + + ))} + + ); +} From f97eead16cba98b62487086609e4bc680672ce1a Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Tue, 12 Nov 2024 14:47:44 +0100 Subject: [PATCH 05/12] Code refactor --- .../components/Dialog/OpenFileDialog.tsx | 37 +++------------- .../Editor/EditorAppBar/EditorAppBar.tsx | 5 ++- .../components/NavDrawer/NavDrawer.tsx | 8 +++- .../components/Panels/ExamplePanel.tsx | 44 +++---------------- src/examples/examples.ts | 34 ++++++++++++++ 5 files changed, 56 insertions(+), 72 deletions(-) diff --git a/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx b/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx index 11ffb75e6..22a4f71ad 100644 --- a/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx +++ b/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'; @@ -29,8 +27,12 @@ export function OpenFileDialog({ loadFromFiles, loadFromUrl, loadFromJsonString, - dialogState -}: ConcreteDialogProps & { dialogState: string }) { + dialogState, + fetchExampleData +}: ConcreteDialogProps & { + dialogState: string; + fetchExampleData: (exampleName: string) => void; // I don't like how this is typed here +}) { const [currentFileList, setCurrentFileList] = useState(); const [value, setValue] = useState(dialogState); const handleChange = (event: SyntheticEvent, newValue: string) => { @@ -57,32 +59,7 @@ export function OpenFileDialog({ ); const [selectedSimulator, setSelectedSimulator] = useState(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 ( 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); @@ -85,7 +87,8 @@ function EditorAppBar({ editor }: AppBarProps) { loadFromJson, loadFromUrl, loadFromJsonString, - dialogState: '1' + dialogState: '1', + fetchExampleData }) }, { diff --git a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx index d1269b6fd..6a35c0ed7 100644 --- a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx +++ b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx @@ -15,6 +15,7 @@ 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'; @@ -104,6 +105,8 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { const Drawer = getDrawer(); const { demoMode } = useConfig(); + const fetchExampleData = useFetchExampleData(); + const onClickOpenExample = () => { // if (isAuthorized) { openTheOpenFileDialog({ @@ -111,7 +114,8 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { loadFromJson, loadFromUrl, loadFromJsonString, - dialogState: '0' + dialogState: '0', + fetchExampleData }); // } }; @@ -122,7 +126,7 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { label: 'Example', tooltipLabel: 'Example', value: 'example', - icon: + icon: }, { label: 'Editor', diff --git a/src/WrapperApp/components/Panels/ExamplePanel.tsx b/src/WrapperApp/components/Panels/ExamplePanel.tsx index 30957a160..10ba081ea 100644 --- a/src/WrapperApp/components/Panels/ExamplePanel.tsx +++ b/src/WrapperApp/components/Panels/ExamplePanel.tsx @@ -1,50 +1,14 @@ -import { Box,Grid, Paper, Typography } from '@mui/material'; -import { useState } from 'react'; +import { Box, Grid, Paper, Typography } from '@mui/material'; -import EXAMPLES from '../../../examples/examples'; -import { useLoader } from '../../../services/LoaderService'; -import { FullSimulationData } from '../../../services/ShSimulatorService'; +import EXAMPLES, { useFetchExampleData } from '../../../examples/examples'; import { SimulatorType } from '../../../types/RequestTypes'; -import { StatusState } from '../../../types/ResponseTypes'; interface ExamplePanelProps { setTabsValue: (value: string) => void; } export function ExamplePanel({ setTabsValue }: ExamplePanelProps) { - // Call useLoader within the component to access its functions. - const { loadFromJson } = useLoader(); - - // Move fetchExampleData inside ExamplePanel so it can access loadFromJson. - 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 - }; - }) - ); - - // Change the tab to 'editor' after loading the example - setTabsValue('editor'); - }); - }) - .catch(function (err) { - console.log('Fetch Error :-S', err); - }); - } + const fetchExampleData = useFetchExampleData(); return ( @@ -75,6 +39,8 @@ export function ExamplePanel({ setTabsValue }: ExamplePanelProps) { sx={{ padding: 2, textAlign: 'center', cursor: 'pointer' }} onClick={() => { fetchExampleData(fileName); + // Change the tab to 'editor' after loading the example + setTabsValue('editor'); }}> {exampleName} diff --git a/src/examples/examples.ts b/src/examples/examples.ts index 89d1687a8..ee4a21982 100644 --- a/src/examples/examples.ts +++ b/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; 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; From 4473c1b8c4484a538989ff74f4fe4661a4b55776 Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Tue, 12 Nov 2024 16:41:06 +0100 Subject: [PATCH 06/12] Grid change --- .../components/Panels/ExamplePanel.tsx | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/WrapperApp/components/Panels/ExamplePanel.tsx b/src/WrapperApp/components/Panels/ExamplePanel.tsx index 10ba081ea..03c8e4ab5 100644 --- a/src/WrapperApp/components/Panels/ExamplePanel.tsx +++ b/src/WrapperApp/components/Panels/ExamplePanel.tsx @@ -1,4 +1,4 @@ -import { Box, Grid, Paper, Typography } from '@mui/material'; +import { Box, Grid2, Paper, Typography } from '@mui/material'; import EXAMPLES, { useFetchExampleData } from '../../../examples/examples'; import { SimulatorType } from '../../../types/RequestTypes'; @@ -23,17 +23,16 @@ export function ExamplePanel({ setTabsValue }: ExamplePanelProps) { {simulator.toUpperCase()} - {/* Grid of Examples */} - {Object.entries(EXAMPLES[simulator]).map(([exampleName, fileName]) => ( - + + {' '} + {/* Set a fixed width here */} {exampleName} - + ))} - + ))} From 8f754814a0f83e1410c71f2b6ae86fe216232f52 Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Thu, 14 Nov 2024 20:44:40 +0100 Subject: [PATCH 07/12] Added proposed changes --- .../components/Dialog/OpenFileDialog.tsx | 90 ++----------------- .../Editor/EditorAppBar/EditorAppBar.tsx | 5 +- .../components/NavDrawer/NavDrawer.tsx | 40 +-------- .../components/NavDrawer/NavDrawerList.tsx | 16 +++- 4 files changed, 22 insertions(+), 129 deletions(-) diff --git a/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx b/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx index 22a4f71ad..b965ab074 100644 --- a/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx +++ b/src/ThreeEditor/components/Dialog/OpenFileDialog.tsx @@ -1,23 +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 { SimulatorType } from '../../../types/RequestTypes'; import { ConcreteDialogProps, CustomDialog } from './CustomDialog'; import { DragDropProject } from './DragDropProject'; @@ -27,11 +13,9 @@ export function OpenFileDialog({ loadFromFiles, loadFromUrl, loadFromJsonString, - dialogState, - fetchExampleData + dialogState }: ConcreteDialogProps & { dialogState: string; - fetchExampleData: (exampleName: string) => void; // I don't like how this is typed here }) { const [currentFileList, setCurrentFileList] = useState(); const [value, setValue] = useState(dialogState); @@ -45,11 +29,10 @@ export function OpenFileDialog({ }; const [url, setUrl] = useState(''); - const [exampleIndex, setExampleIndex] = useState(null); const handleUrlChange = (event: ChangeEvent) => { 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(), @@ -57,9 +40,6 @@ export function OpenFileDialog({ }), [value] ); - const [selectedSimulator, setSelectedSimulator] = useState(SimulatorType.COMMON); - - // const fetchExampleData = useFetchExampleData(); return ( - setSelectedSimulator(newValue)} - aria-label='simulator selection tabs' - variant='fullWidth'> - {Object.values(SimulatorType).map(simulator => ( - - ))} - - - - - {Object.entries(EXAMPLES[selectedSimulator]).map((name, idx) => ( - setExampleIndex(idx)}> - - {name[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); @@ -87,8 +85,7 @@ function EditorAppBar({ editor }: AppBarProps) { loadFromJson, loadFromUrl, loadFromJsonString, - dialogState: '1', - fetchExampleData + dialogState: '1' }) }, { diff --git a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx index 6a35c0ed7..e8a5756c4 100644 --- a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx +++ b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx @@ -6,7 +6,7 @@ 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, Button, FormControlLabel, Typography } from '@mui/material'; +import { Box, FormControlLabel, Typography } from '@mui/material'; import Divider from '@mui/material/Divider'; import MuiDrawer from '@mui/material/Drawer'; import IconButton from '@mui/material/IconButton'; @@ -15,10 +15,7 @@ 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'; @@ -31,6 +28,7 @@ export type MenuOption = { value: string; disabled?: boolean; icon: ReactElement; + separator?: boolean; }; type NavDrawerProps = { @@ -95,8 +93,6 @@ 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); @@ -105,28 +101,14 @@ 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: + icon: , + separator: true }, { label: 'Editor', @@ -217,20 +199,6 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { - )} + {separator && } ); From ce4fea844a31a0a22fd73785936ae9da796d99c7 Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Thu, 14 Nov 2024 20:58:19 +0100 Subject: [PATCH 08/12] Small fix --- src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx b/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx index ef5810ab2..e26eaad46 100644 --- a/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx +++ b/src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx @@ -85,7 +85,7 @@ function EditorAppBar({ editor }: AppBarProps) { loadFromJson, loadFromUrl, loadFromJsonString, - dialogState: '1' + dialogState: '0' }) }, { From 6be02add7ef87da8b168daebe5c056fef711e09c Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Thu, 14 Nov 2024 21:10:54 +0100 Subject: [PATCH 09/12] Changed name to Examples --- src/WrapperApp/WrapperApp.tsx | 2 +- src/WrapperApp/components/NavDrawer/NavDrawer.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/WrapperApp/WrapperApp.tsx b/src/WrapperApp/WrapperApp.tsx index 0bc8928f8..b948e2e96 100644 --- a/src/WrapperApp/WrapperApp.tsx +++ b/src/WrapperApp/WrapperApp.tsx @@ -73,7 +73,7 @@ function WrapperApp() { /> diff --git a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx index e8a5756c4..f9e842012 100644 --- a/src/WrapperApp/components/NavDrawer/NavDrawer.tsx +++ b/src/WrapperApp/components/NavDrawer/NavDrawer.tsx @@ -104,9 +104,9 @@ function NavDrawer({ handleChange, tabsValue, open, setOpen }: NavDrawerProps) { // Order of elements in this list corresponds to their order in UI const menuOptions: MenuOption[] = [ { - label: 'Example', - tooltipLabel: 'Example', - value: 'example', + label: 'Examples', + tooltipLabel: 'Examples', + value: 'examples', icon: , separator: true }, From 1986fdaab625f561616d2ad2e842d79c9c37939d Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Sun, 24 Nov 2024 19:49:55 +0100 Subject: [PATCH 10/12] Fixed tests --- src/__tests__/FlukaConverter.test.ts | 107 +++++++++------------- src/__tests__/ShieldhitConverter.test.ts | 109 +++++++++-------------- 2 files changed, 82 insertions(+), 134 deletions(-) diff --git a/src/__tests__/FlukaConverter.test.ts b/src/__tests__/FlukaConverter.test.ts index accd74048..16d1f0f67 100644 --- a/src/__tests__/FlukaConverter.test.ts +++ b/src/__tests__/FlukaConverter.test.ts @@ -35,92 +35,65 @@ describe('Fluka Converter', () => { ) ).toBeTruthy(); - //find the "Editor" button on the left menu and assure it is already selected - const editorButton = await driver.findElement(By.xpath("//div[@aria-label = 'Editor']")); - - if ((await editorButton.getAttribute('aria-selected')) !== 'true') - console.warn( - `Editor button is not selected even though it should be it's default state.` - ); - await editorButton.click().then(async () => { - //click rerenders the nav drawer, so we need to wait for it to rerender - expect( - await driver.wait( - until.elementLocated( - By.xpath("//div[@aria-label = 'Editor' and @aria-selected = 'true']") - ), - 10_000 - ) - ).toBeTruthy(); - }); - - //find the "open" button (second from the left on the upper bar) and then click it - const openButton = await driver.findElement(By.xpath("//span[@aria-label = 'Menu Open']")); - await openButton.click(); - - //wait for the "open project" window to appear - const openProjectTitleId = 'open-project-dialog-title'; + //////////////////////////////////////////////////////////////// - const openProjectWidget = await driver.wait( - until.elementLocated( - By.xpath(`//div[@role = 'dialog' and @aria-labelledby = '${openProjectTitleId}']`) - ), - 10_000 + // Find and click the "Examples" button + const examplesButton = await driver.findElement( + By.xpath("//div[@aria-label = 'Examples']") ); - const openProjectTitle = await openProjectWidget.findElement(By.id(openProjectTitleId)); - await driver.wait(until.elementTextIs(openProjectTitle, 'Open Project'), 5_000); + // Scroll into view to ensure the element is visible + await driver.executeScript('arguments[0].scrollIntoView(true);', examplesButton); - //find the "examples" button in the window and click it. (we find it by contained text as its id changes every time) - const examplesButton = await openProjectWidget.findElement( - By.xpath("//button[contains(text(),'Examples')]") - ); - //check if the tab is not already selected - expect(await examplesButton.getAttribute('aria-selected')).toBe('false'); + // Click the button + await driver.wait(until.elementIsVisible(examplesButton), 5_000); + await driver.wait(until.elementIsEnabled(examplesButton), 5_000); await examplesButton.click(); - //find the "examples" panel we just opened - const examplesPanel = await driver.wait( + // Wait until the "Examples" button is marked as active + await driver.wait( until.elementLocated( - By.xpath( - `//div[@role = 'tabpanel' and @aria-labelledby = '${await examplesButton.getAttribute( - 'id' - )}' and @id = '${await examplesButton.getAttribute('aria-controls')}']` - ) + By.xpath("//div[@aria-label = 'Examples' and @aria-selected = 'true']") ), 10_000 ); - //check if the tab is not hidden - expect(await examplesPanel.getAttribute('hidden')).toBeFalsy(); + // Find the "FLUKA" section header + const flukaSectionHeader = await driver.findElement(By.xpath("//h5[text()='FLUKA']")); - // select SHIELDHIT subsection - examplesPanel.findElement(By.xpath("//button[contains(text(),'shieldhit')]")).click(); + // Scroll into view of the header + await driver.executeScript('arguments[0].scrollIntoView(true);', flukaSectionHeader); - //find the list of examples - const examplesList = await examplesPanel.findElement(By.id('Examples list')); + // Ensure the section header is visible + expect(await flukaSectionHeader.isDisplayed()).toBeTruthy(); - //find the first option in the list - //it has value=0 and is li element - const firstExample = await examplesList.findElement(By.xpath("//li[@value = '0']")); - - //check if the first example is "Proton pencil beam in water" - //text is located in element with id corresponding to aria-labelledby of the list element - const exampleLabel = await openProjectWidget.findElement( - By.id(await firstExample.getAttribute('aria-labelledby')) + // Find the first example in the "FLUKA" section + const firstExample = await driver.findElement( + By.xpath( + "//h5[text()='FLUKA']/following-sibling::div//div[contains(@class, 'MuiPaper-root')][1]" + ) ); - expect(await exampleLabel.getText()).toBe('Proton pencil beam in water'); - //click the first example + // Scroll into view of the first example + await driver.executeScript('arguments[0].scrollIntoView(true);', firstExample); + + // Ensure the first example is visible + expect(await firstExample.isDisplayed()).toBeTruthy(); + + // Click the first example await firstExample.click(); - expect(await firstExample.getAttribute('aria-selected')).toEqual('true'); - //find the "load" button and click it - const loadButton = await openProjectWidget.findElement( - By.xpath("//button[@aria-label = 'Load example button']") + // Check if the tab switched to "Editor" + const editorTab = await driver.wait( + until.elementLocated( + By.xpath("//div[@aria-label = 'Editor' and @aria-selected = 'true']") + ), + 10_000 ); - expect(await loadButton.isEnabled()).toEqual(true); - await loadButton.click(); + + expect(editorTab).toBeTruthy(); + + //////////////////////////////////////////////////////////////// const loadFileTitleId = 'load-file-alert-dialog-title'; const loadFileContentId = 'load-file-alert-dialog-content'; diff --git a/src/__tests__/ShieldhitConverter.test.ts b/src/__tests__/ShieldhitConverter.test.ts index d0132139d..a3c927d3b 100644 --- a/src/__tests__/ShieldhitConverter.test.ts +++ b/src/__tests__/ShieldhitConverter.test.ts @@ -36,92 +36,67 @@ describe('ShieldhitConverter', () => { ) ).toBeTruthy(); - //find the "Editor" button on the left menu and assure it is already selected - const editorButton = await driver.findElement(By.xpath("//div[@aria-label = 'Editor']")); - - if ((await editorButton.getAttribute('aria-selected')) !== 'true') - console.warn( - `Editor button is not selected even though it should be it's default state.` - ); - await editorButton.click().then(async () => { - //click rerenders the nav drawer, so we need to wait for it to rerender - expect( - await driver.wait( - until.elementLocated( - By.xpath("//div[@aria-label = 'Editor' and @aria-selected = 'true']") - ), - 10_000 - ) - ).toBeTruthy(); - }); - - //find the "open" button (second from the left on the upper bar) and then click it - const openButton = await driver.findElement(By.xpath("//span[@aria-label = 'Menu Open']")); - await openButton.click(); - - //wait for the "open project" window to appear - const openProjectTitleId = 'open-project-dialog-title'; + //////////////////////////////////////////////////////////////// - const openProjectWidget = await driver.wait( - until.elementLocated( - By.xpath(`//div[@role = 'dialog' and @aria-labelledby = '${openProjectTitleId}']`) - ), - 10_000 + // Find and click the "Examples" button + const examplesButton = await driver.findElement( + By.xpath("//div[@aria-label = 'Examples']") ); - const openProjectTitle = await openProjectWidget.findElement(By.id(openProjectTitleId)); - await driver.wait(until.elementTextIs(openProjectTitle, 'Open Project'), 10_000); + // Scroll into view to ensure the element is visible + await driver.executeScript('arguments[0].scrollIntoView(true);', examplesButton); - //find the "examples" button in the window and click it. (we find it by contained text as its id changes every time) - const examplesButton = await openProjectWidget.findElement( - By.xpath("//button[contains(text(),'Examples')]") - ); - //check if the tab is not already selected - expect(await examplesButton.getAttribute('aria-selected')).toBe('false'); + // Click the button + await driver.wait(until.elementIsVisible(examplesButton), 5_000); + await driver.wait(until.elementIsEnabled(examplesButton), 5_000); await examplesButton.click(); - //find the "examples" panel we just opened - const examplesPanel = await driver.wait( + // Wait until the "Examples" button is marked as active + await driver.wait( until.elementLocated( - By.xpath( - `//div[@role = 'tabpanel' and @aria-labelledby = '${await examplesButton.getAttribute( - 'id' - )}' and @id = '${await examplesButton.getAttribute('aria-controls')}']` - ) + By.xpath("//div[@aria-label = 'Examples' and @aria-selected = 'true']") ), 10_000 ); - //check if the tab is not hidden - expect(await examplesPanel.getAttribute('hidden')).toBeFalsy(); - - // select SHIELDHIT subsection - examplesPanel.findElement(By.xpath("//button[contains(text(),'shieldhit')]")).click(); + // Find the "SHIELDHIT" section header + const shieldhitSectionHeader = await driver.findElement( + By.xpath("//h5[text()='SHIELDHIT']") + ); - //find the list of examples - const examplesList = await examplesPanel.findElement(By.id('Examples list')); + // Scroll into view of the header + await driver.executeScript('arguments[0].scrollIntoView(true);', shieldhitSectionHeader); - //find the first option in the list - //it has value=0 and is li element - const firstExample = await examplesList.findElement(By.xpath("//li[@value = '0']")); + // Ensure the section header is visible + expect(await shieldhitSectionHeader.isDisplayed()).toBeTruthy(); - //check if the first example is "Proton pencil beam in water" - //text is located in element with id corresponding to aria-labelledby of the list element - const exampleLabel = await openProjectWidget.findElement( - By.id(await firstExample.getAttribute('aria-labelledby')) + // Find the first example in the "SHIELDHIT" section + const firstExample = await driver.findElement( + By.xpath( + "//h5[text()='SHIELDHIT']/following-sibling::div//div[contains(@class, 'MuiPaper-root')][1]" + ) ); - expect(await exampleLabel.getText()).toBe('Proton pencil beam in water'); - //click the first example + // Scroll into view of the first example + await driver.executeScript('arguments[0].scrollIntoView(true);', firstExample); + + // Ensure the first example is visible + expect(await firstExample.isDisplayed()).toBeTruthy(); + + // Click the first example await firstExample.click(); - expect(await firstExample.getAttribute('aria-selected')).toEqual('true'); - //find the "load" button and click it - const loadButton = await openProjectWidget.findElement( - By.xpath("//button[@aria-label = 'Load example button']") + // Check if the tab switched to "Editor" + const editorTab = await driver.wait( + until.elementLocated( + By.xpath("//div[@aria-label = 'Editor' and @aria-selected = 'true']") + ), + 10_000 ); - expect(await loadButton.isEnabled()).toEqual(true); - await loadButton.click(); + + expect(editorTab).toBeTruthy(); + + //////////////////////////////////////////////////////////////// const loadFileTitleId = 'load-file-alert-dialog-title'; const loadFileContentId = 'load-file-alert-dialog-content'; From 8857a3fd1a644d715229d57545f8214c0e82d450 Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Sun, 24 Nov 2024 20:13:16 +0100 Subject: [PATCH 11/12] Removed unnecessary check --- src/__tests__/FlukaConverter.test.ts | 7 ------- src/__tests__/ShieldhitConverter.test.ts | 13 ------------- 2 files changed, 20 deletions(-) diff --git a/src/__tests__/FlukaConverter.test.ts b/src/__tests__/FlukaConverter.test.ts index 16d1f0f67..f66140130 100644 --- a/src/__tests__/FlukaConverter.test.ts +++ b/src/__tests__/FlukaConverter.test.ts @@ -141,13 +141,6 @@ describe('Fluka Converter', () => { ) ).toBeTruthy(); - //find the "Fluka" button and click it - const flukaButton = await driver.findElement(By.xpath("//button[@value = 'fluka']")); - await flukaButton.click(); - - //accept the "current data will be lost" alert - await driver.switchTo().alert().accept(); - //wait until the "generate from editor" button and click it (it takes some time for the button to change from "initializing") //xpath is used as again the id changes every time const generateButton = await driver.findElement( diff --git a/src/__tests__/ShieldhitConverter.test.ts b/src/__tests__/ShieldhitConverter.test.ts index a3c927d3b..8584532b6 100644 --- a/src/__tests__/ShieldhitConverter.test.ts +++ b/src/__tests__/ShieldhitConverter.test.ts @@ -144,19 +144,6 @@ describe('ShieldhitConverter', () => { ) ).toBeTruthy(); - //find the "SHIELD-HIT12A" button and click it - const shieldhitButton = await driver.findElement( - By.xpath("//button[@value = 'shieldhit']") - ); - await shieldhitButton.click(); - - //accept the "current data will be lost" alert - try { - await driver.switchTo().alert().accept(); - } catch (error) { - // TODO: remove this when the alert is fixed - } - //wait until the "generate from editor" button and click it (it takes some time for the button to change from "initializing") //xpath is used as again the id changes every time const generateButton = await driver.findElement( From b1a95d04ff8f1ba17518fd10a4dd14ae53f1a32a Mon Sep 17 00:00:00 2001 From: MatoKnap Date: Sun, 24 Nov 2024 20:21:13 +0100 Subject: [PATCH 12/12] Small formatting fix --- src/__tests__/FlukaConverter.test.ts | 4 ---- src/__tests__/ShieldhitConverter.test.ts | 4 ---- 2 files changed, 8 deletions(-) diff --git a/src/__tests__/FlukaConverter.test.ts b/src/__tests__/FlukaConverter.test.ts index f66140130..f60b8c6a9 100644 --- a/src/__tests__/FlukaConverter.test.ts +++ b/src/__tests__/FlukaConverter.test.ts @@ -35,8 +35,6 @@ describe('Fluka Converter', () => { ) ).toBeTruthy(); - //////////////////////////////////////////////////////////////// - // Find and click the "Examples" button const examplesButton = await driver.findElement( By.xpath("//div[@aria-label = 'Examples']") @@ -93,8 +91,6 @@ describe('Fluka Converter', () => { expect(editorTab).toBeTruthy(); - //////////////////////////////////////////////////////////////// - const loadFileTitleId = 'load-file-alert-dialog-title'; const loadFileContentId = 'load-file-alert-dialog-content'; const versionWarningId = 'load-file-dialog-version-warning'; diff --git a/src/__tests__/ShieldhitConverter.test.ts b/src/__tests__/ShieldhitConverter.test.ts index 8584532b6..92afce128 100644 --- a/src/__tests__/ShieldhitConverter.test.ts +++ b/src/__tests__/ShieldhitConverter.test.ts @@ -36,8 +36,6 @@ describe('ShieldhitConverter', () => { ) ).toBeTruthy(); - //////////////////////////////////////////////////////////////// - // Find and click the "Examples" button const examplesButton = await driver.findElement( By.xpath("//div[@aria-label = 'Examples']") @@ -96,8 +94,6 @@ describe('ShieldhitConverter', () => { expect(editorTab).toBeTruthy(); - //////////////////////////////////////////////////////////////// - const loadFileTitleId = 'load-file-alert-dialog-title'; const loadFileContentId = 'load-file-alert-dialog-content'; const versionWarningId = 'load-file-dialog-version-warning';