Skip to content

Commit 8a8e79f

Browse files
jacobfilikjacobfilik
authored
clean up submission pages when no structures are registered (#14)
1 parent 1a0240e commit 8a8e79f

File tree

15 files changed

+323
-206
lines changed

15 files changed

+323
-206
lines changed

‎web-conexs-client/src/App.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
1212
import SimulationReviewPage from "./components/SimulationReviewPage";
1313
import { UserProvider } from "./UserContext";
1414

15-
import { ThemeProvider, DiamondTheme } from "@diamondlightsource/sci-react-ui";
15+
import {
16+
ThemeProvider,
17+
DiamondTheme,
18+
Footer,
19+
} from "@diamondlightsource/sci-react-ui";
1620

1721
const queryClient = new QueryClient();
1822

@@ -34,6 +38,7 @@ function App() {
3438
<Route path="/orca" element={<OrcaSubmitPage />} />
3539
<Route path="/fdmnes" element={<FdmnesSubmitPage />} />
3640
</Routes>
41+
<Footer copyright="Diamond Light Source" logo={null} />
3742
</Stack>
3843
</UserProvider>
3944
</QueryClientProvider>

‎web-conexs-client/src/components/SimulationReviewPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default function SimulationReviewPage() {
6464
justifyContent: "space-between",
6565
alignItems: "center",
6666
backgroundColor: theme.palette.action.disabled,
67-
borderRadius: "4px",
67+
borderRadius: "4px 4px 0px 0px",
6868
}}
6969
>
7070
<Typography variant="h5" component="div">
@@ -102,7 +102,7 @@ export default function SimulationReviewPage() {
102102
justifyContent: "space-between",
103103
alignItems: "center",
104104
backgroundColor: theme.palette.action.disabled,
105-
borderRadius: "4px",
105+
borderRadius: "4px 4px 0px 0px",
106106
}}
107107
>
108108
<Button variant="contained" onClick={() => setSimId(undefined)}>

‎web-conexs-client/src/components/crystals/CreateCrystalPage.tsx‎

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { Box, Button, Paper, Stack, Typography } from "@mui/material";
1+
import {
2+
Box,
3+
Button,
4+
Paper,
5+
Stack,
6+
Toolbar,
7+
Typography,
8+
useTheme,
9+
} from "@mui/material";
210
import { CrystalInput } from "../../models";
311
import { useState } from "react";
412
import React3dMol from "../React3dMol";
@@ -22,6 +30,7 @@ const templateCrystal: CrystalInput = {
2230
export default function CreateCystalPage() {
2331
const queryClient = useQueryClient();
2432
const navigate = useNavigate();
33+
const theme = useTheme();
2534

2635
const callback = () => {
2736
window.alert("Thank you for your submission");
@@ -60,28 +69,40 @@ export default function CreateCystalPage() {
6069
}}
6170
elevation={12}
6271
>
63-
<Typography variant="h4" padding="24px">
64-
Create Crystal
65-
</Typography>
66-
<Stack direction={"row"} spacing="5px" margin="5px">
67-
<CrystalEditor crystal={crystal} setCrystal={setCrytal} />
68-
<React3dMol
69-
moleculedata={crystal}
70-
color="#3465A4"
71-
style="Stick"
72-
orbital={null}
73-
></React3dMol>
72+
<Stack spacing={"10px"}>
73+
<Toolbar
74+
sx={{
75+
justifyContent: "space-between",
76+
alignItems: "center",
77+
backgroundColor: theme.palette.action.disabled,
78+
borderRadius: "4px 4px 0px 0px",
79+
}}
80+
>
81+
<Typography variant="h5" component="div">
82+
Create Crystal
83+
</Typography>
84+
</Toolbar>
85+
<Stack direction={"row"} spacing="5px" margin="5px">
86+
<CrystalEditor crystal={crystal} setCrystal={setCrytal} />
87+
<React3dMol
88+
moleculedata={crystal}
89+
color="#3465A4"
90+
style="Stick"
91+
orbital={null}
92+
></React3dMol>
93+
</Stack>
94+
<Button
95+
variant="contained"
96+
onClick={() => {
97+
if (crystal != null) {
98+
console.log(crystal);
99+
mutation.mutate(crystal);
100+
}
101+
}}
102+
>
103+
Create
104+
</Button>
74105
</Stack>
75-
<Button
76-
onClick={() => {
77-
if (crystal != null) {
78-
console.log(crystal);
79-
mutation.mutate(crystal);
80-
}
81-
}}
82-
>
83-
Create
84-
</Button>
85106
</Paper>
86107
</Box>
87108
);

‎web-conexs-client/src/components/crystals/CrystalPage.tsx‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { Box, Typography, Stack, Paper } from "@mui/material";
1+
import {
2+
Box,
3+
Typography,
4+
Stack,
5+
Paper,
6+
Toolbar,
7+
useTheme,
8+
} from "@mui/material";
29

310
import React3dMol from "../React3dMol";
411
import MoleculeTable from "../molecules/MoleculeTable";
@@ -14,6 +21,7 @@ export default function CrystalPage() {
1421
});
1522

1623
const [selectedCrystalId, setSelectedCrystalId] = useState<number | null>();
24+
const theme = useTheme();
1725

1826
let finalCrystal = null;
1927

@@ -43,29 +51,40 @@ export default function CrystalPage() {
4351
}}
4452
elevation={12}
4553
>
46-
<Typography variant="h4" padding="24px">
47-
Crystals
48-
</Typography>
49-
<Stack direction={"row"} spacing={3}>
50-
<MoleculeTable
51-
molecules={query.data ? query.data : []}
52-
selectedMolecule={undefined}
53-
setSelectedMolecule={(data) => {
54-
if (data) {
55-
setSelectedCrystalId(data.id);
56-
}
54+
<Stack spacing={"10px"}>
55+
<Toolbar
56+
sx={{
57+
justifyContent: "space-between",
58+
alignItems: "center",
59+
backgroundColor: theme.palette.action.disabled,
60+
borderRadius: "4px 4px 0px 0px",
5761
}}
58-
setCurrent={() => {}}
59-
prevNext={null}
60-
></MoleculeTable>
62+
>
63+
<Typography variant="h5" component="div">
64+
Crystals
65+
</Typography>
66+
</Toolbar>
67+
<Stack direction={"row"} spacing={3}>
68+
<MoleculeTable
69+
molecules={query.data ? query.data : []}
70+
selectedMolecule={undefined}
71+
setSelectedMolecule={(data) => {
72+
if (data) {
73+
setSelectedCrystalId(data.id);
74+
}
75+
}}
76+
setCurrent={() => {}}
77+
prevNext={null}
78+
></MoleculeTable>
6179

62-
<XYZCrystalFileViewer crystal={finalCrystal} />
63-
<React3dMol
64-
moleculedata={finalCrystal}
65-
color="#3465A4"
66-
style="Stick"
67-
orbital={null}
68-
></React3dMol>
80+
<XYZCrystalFileViewer crystal={finalCrystal} />
81+
<React3dMol
82+
moleculedata={finalCrystal}
83+
color="#3465A4"
84+
style="Stick"
85+
orbital={null}
86+
></React3dMol>
87+
</Stack>
6988
</Stack>
7089
</Paper>
7190
</Box>

‎web-conexs-client/src/components/fdmnes/FdmnesForm.tsx‎

Lines changed: 41 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,14 @@ export default function FdmnesForm() {
5454
setSelectedCrystalId(data.crystal_structure_id);
5555
}
5656

57+
function getPlacemarker(noCrystals: boolean) {
58+
if (!noCrystals) {
59+
return <Skeleton width={"100%"} height={"100%"} />;
60+
} else {
61+
return <Box>First create a crystal</Box>;
62+
}
63+
}
64+
5765
return (
5866
<Stack
5967
className="jsonFormsContainer"
@@ -62,73 +70,39 @@ export default function FdmnesForm() {
6270
margin="5px"
6371
spacing="5px"
6472
>
65-
<Stack>
66-
{hasData ? (
67-
<JsonForms
68-
schema={schema}
69-
data={data}
70-
renderers={renderers}
71-
uischema={uischema}
72-
cells={materialCells}
73-
onChange={({ data }) => {
74-
setData(data);
75-
setSelectedCrystalId(data.crystal_structure_id);
76-
}}
77-
/>
78-
) : (
79-
<Skeleton animation="wave" width={210} height={118} />
80-
)}
81-
<Button
82-
variant="contained"
83-
onClick={() => {
84-
const localData = { ...data };
85-
mutation.mutate(localData);
86-
}}
87-
>
88-
Submit Simulation
89-
</Button>
90-
</Stack>
91-
<Stack flex={1}>
92-
<Box flex={1}>
93-
{selectedCrystalID != null && (
94-
<CrystalViewer id={selectedCrystalID} />
95-
)}
96-
</Box>
97-
</Stack>
73+
{hasData && data != null ? (
74+
<Stack direction="row" flex={1} spacing={"5px"}>
75+
<Stack flex={1}>
76+
<JsonForms
77+
schema={schema}
78+
data={data}
79+
renderers={renderers}
80+
uischema={uischema}
81+
cells={materialCells}
82+
onChange={({ data }) => {
83+
setData(data);
84+
setSelectedCrystalId(data.crystal_structure_id);
85+
}}
86+
/>
87+
<Button
88+
variant="contained"
89+
onClick={() => {
90+
const localData = { ...data };
91+
mutation.mutate(localData);
92+
}}
93+
>
94+
Submit Simulation
95+
</Button>
96+
</Stack>
97+
<Stack flex={1}>
98+
{selectedCrystalID != null && (
99+
<CrystalViewer id={selectedCrystalID} />
100+
)}
101+
</Stack>
102+
</Stack>
103+
) : (
104+
getPlacemarker(hasData && data == null)
105+
)}
98106
</Stack>
99-
// <Grid2 container>
100-
// <Grid2 size={6} className="jsonFormsContainer">
101-
// {hasData ? (
102-
// <JsonForms
103-
// schema={schema}
104-
// data={data}
105-
// renderers={materialRenderers}
106-
// uischema={uischema}
107-
// cells={materialCells}
108-
// onChange={({ data }) => {
109-
// setData(data);
110-
// setSelectedCrystalId(data.crystal_structure_id);
111-
// }}
112-
// />
113-
// ) : (
114-
// <Skeleton animation="wave" width={210} height={118} />
115-
// )}
116-
// </Grid2>
117-
// <Grid2 size={6}>
118-
// <Box height="100%vh">
119-
// {selectedCrystalID && <CrystalViewer id={selectedCrystalID} />}
120-
// </Box>
121-
// </Grid2>
122-
// <Grid2 size={12}>
123-
// <Button
124-
// onClick={() => {
125-
// const localData = { ...data };
126-
// mutation.mutate(localData);
127-
// }}
128-
// >
129-
// Submit Simulation
130-
// </Button>
131-
// </Grid2>
132-
// </Grid2>
133107
);
134108
}

‎web-conexs-client/src/components/fdmnes/FdmnesModelCard.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Box, Card, CardContent, Typography } from "@mui/material";
22

33
import { useQuery } from "@tanstack/react-query";
44
import { getFdmnesSimulation } from "../../queryfunctions";
5+
import { periodic_table } from "../../periodictable";
56

67
export default function FdmnesModelCard(props: { fdmnesSimulationId: number }) {
78
const query = useQuery({
@@ -22,11 +23,20 @@ export default function FdmnesModelCard(props: { fdmnesSimulationId: number }) {
2223
FDMNES Simulation
2324
</Typography>
2425
<Typography variant="h5" component="div">
25-
{fdmnesSimulation.element}
26+
{"Absorbing element: " +
27+
periodic_table[fdmnesSimulation.element - 1].name}
2628
</Typography>
2729
<Typography variant="h6" component="div">
28-
{fdmnesSimulation.element}
30+
{fdmnesSimulation.edge.toLocaleUpperCase() + "-edge"}
2931
</Typography>
32+
<Typography variant="h6" component="div">
33+
{fdmnesSimulation.structure_type + " structure"}
34+
</Typography>
35+
{fdmnesSimulation.greens_approach && (
36+
<Typography variant="h6" component="div">
37+
{"Using Green's approach"}
38+
</Typography>
39+
)}
3040
</CardContent>
3141
</Card>
3242
);

0 commit comments

Comments
 (0)