Skip to content

Commit 0325db2

Browse files
VictoriaBeilsten-EdmandsVictoriaBeilsten-Edmands
authored
Merge pull request #6 from DiamondLightSource/vbe/spec-plan-ui
Add non-jsonforms plan
2 parents 437d663 + 23d90dc commit 0325db2

18 files changed

+527
-83
lines changed

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/diamond.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>ViSR</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎package.json‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@diamondlightsource/sci-react-ui": "^0.2.0",
1314
"@emotion/react": "^11.14.0",
1415
"@emotion/styled": "^11.14.1",
1516
"@jsonforms/core": "3.6.0",
@@ -20,7 +21,8 @@
2021
"@mui/material": "<7.0.0",
2122
"@mui/x-date-pickers": "^7.17.0",
2223
"react": "^19.1.0",
23-
"react-dom": "^19.1.0"
24+
"react-dom": "^19.1.0",
25+
"react-router-dom": "^7.7.1"
2426
},
2527
"devDependencies": {
2628
"@eslint/js": "^9.30.1",
@@ -41,5 +43,6 @@
4143
"workerDirectory": [
4244
"public"
4345
]
44-
}
45-
}
46+
},
47+
"packageManager": "pnpm@10.12.3+sha512.467df2c586056165580ad6dfb54ceaad94c5a30f80893ebdec5a44c5aa73c205ae4a5bb9d5ed6bb84ea7c249ece786642bbb49d06a307df218d03da41c317417"
48+
}

‎pnpm-lock.yaml‎

Lines changed: 75 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/diamond.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎public/vite.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/App.tsx‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/JsonPlanSelector.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { PlansResponse } from "../utils/api";
2+
import PlanSelector from "./PlanSelector";
3+
import PlanParameters from "./PlanParameters";
4+
5+
type JsonPlanSelectorProps = {
6+
planResponse: PlansResponse;
7+
};
8+
9+
const JsonPlanSelector = ({ planResponse }: JsonPlanSelectorProps) => (
10+
<PlanSelector
11+
plans={planResponse.plans}
12+
getName={plan => plan.name}
13+
renderPlan={plan => <PlanParameters plan={plan} />}
14+
title="Plans"
15+
/>
16+
);
17+
18+
export default JsonPlanSelector;

‎src/components/NumberTextField.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { TextField } from "@mui/material";
2+
import type { SpectroscopyFormData } from "./SpectroscopyForm";
3+
4+
type NumberTextFieldProps = {
5+
formData: SpectroscopyFormData;
6+
setFormData: (f: SpectroscopyFormData) => void;
7+
field: keyof SpectroscopyFormData;
8+
step: number;
9+
label: string;
10+
};
11+
12+
const NumberTextField = ({
13+
formData,
14+
setFormData,
15+
field,
16+
step = 1,
17+
label = field,
18+
}: NumberTextFieldProps) => {
19+
const handleChange = (
20+
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
21+
) => {
22+
const value = e.target.value;
23+
const parsedValue =
24+
value === ""
25+
? 0
26+
: Number.isInteger(step) // parse to Int or Float depending on step
27+
? parseInt(value, 10)
28+
: parseFloat(value);
29+
30+
setFormData({
31+
...formData,
32+
[field]: parsedValue,
33+
});
34+
};
35+
36+
return (
37+
<TextField
38+
fullWidth
39+
label={label}
40+
type="number"
41+
value={formData[field]}
42+
onChange={handleChange}
43+
slotProps={{ htmlInput: { step: step } }}
44+
/>
45+
);
46+
};
47+
48+
export default NumberTextField;

‎src/components/PlanParameters.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1+
import { useState } from "react";
2+
import { Box, TextField, Typography } from "@mui/material";
13
import { JsonForms } from "@jsonforms/react";
2-
import Button from "@mui/material/Button";
3-
import type React from "react";
44
import {
55
materialRenderers,
66
materialCells,
77
} from "@jsonforms/material-renderers";
8-
import { useState } from "react";
98
import sanitizeSchema from "../utils/schema";
10-
import { createAndStartTask, type Plan, type TaskRequest } from "../utils/api";
11-
import { TextField } from "@mui/material";
9+
import type { Plan } from "../utils/api";
10+
import RunPlanButton from "./RunPlanButton";
1211

1312
type PlanParametersProps = {
1413
plan: Plan;
@@ -24,8 +23,14 @@ const PlanParameters: React.FC<PlanParametersProps> = (
2423
const [instrumentSession, setInstrumentSession] = useState("");
2524

2625
return (
27-
<div>
28-
<h2>{props.plan.name}</h2>
26+
<Box>
27+
<Typography
28+
variant="h5"
29+
component="h1"
30+
sx={{ mb: 2, fontWeight: "bold" }}
31+
>
32+
{props.plan.name}
33+
</Typography>
2934
<JsonForms
3035
schema={schema}
3136
data={planParameters}
@@ -38,19 +43,14 @@ const PlanParameters: React.FC<PlanParametersProps> = (
3843
label="Instrument Session"
3944
onChange={e => setInstrumentSession(e.target.value)}
4045
></TextField>
41-
<Button
42-
onClick={async () => {
43-
const taskRequest: TaskRequest = {
44-
name: props.plan.name,
45-
params: planParameters,
46-
instrument_session: instrumentSession,
47-
};
48-
await createAndStartTask(taskRequest);
49-
}}
50-
>
51-
Run Plan
52-
</Button>
53-
</div>
46+
<Box sx={{ mt: 2 }}>
47+
<RunPlanButton
48+
name={props.plan.name}
49+
params={planParameters}
50+
instrumentSession={instrumentSession}
51+
/>
52+
</Box>
53+
</Box>
5454
);
5555
};
5656

0 commit comments

Comments
 (0)