Skip to content

Comments

Initial Prototype Functionality#1

Merged
callumforrester merged 3 commits intomainfrom
prototype
Jul 22, 2025
Merged

Initial Prototype Functionality#1
callumforrester merged 3 commits intomainfrom
prototype

Conversation

@callumforrester
Copy link
Contributor

@callumforrester callumforrester commented Jul 14, 2025

Create initial GUI with:

  • A dropdown menu to select a plan
  • A JSONForms UI to fill in the plan parameters
  • A field for instrument session, required for all blueapi plans
  • A button to trigger the plan

Use mockserviceworker to mock blueapi output, including assuming that the following issues are fixed:

@callumforrester callumforrester force-pushed the prototype branch 4 times, most recently from 1e74922 to c2471c3 Compare July 16, 2025 09:49
Create a static schema representing a response from a blueapi server
using only the count plan. Generate a JSON form to fill in parameters
for the count plan.
@callumforrester callumforrester force-pushed the prototype branch 2 times, most recently from 0626ce3 to 4d526d7 Compare July 17, 2025 12:19
@callumforrester callumforrester marked this pull request as ready for review July 17, 2025 12:21
<Select
defaultValue={""}
onChange={event => {
const i = event.target.value as unknown as number;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really hope there is a better way to do this

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parseInt(event.target.value) would work

Copy link
Collaborator

@douglaswinter douglaswinter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does the thing

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not part of this PR but we should be using pnpm (according to UI policy) unless there's a good reason not to in this case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#3

<Select
defaultValue={""}
onChange={event => {
const i = event.target.value as unknown as number;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

parseInt(event.target.value) would work

src/utils/api.ts Outdated
}

export async function getPlans(): Promise<PlansResponse> {
const url = "http://localhost:8000/plans";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These and the mocked endpoints could be b01-1-blueapi.diamond.ac.uk no?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return (
<div>
<h3>Available Plans</h3>
<Select
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fine for now. Going forward we need to decide what this UI really is. If it is a generic plan runner (which it currently wants to be), then this is probably not the correct component (would not be very usable with 12 plans) - maybe a scrollable list view and to the right the form for the selected plan. However the UI for this project should probably mapping-like.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My $0.02 is that we'd end up with two "views", a rough JSONForms one which is mainly used for engineering, commissioning, plan dev and a more polished, custom-built mapping style UI for user facing experiments. Would also be a good vehicle for comparing the generated and artisan approaches.


return (
<div>
<h3>Available Plans</h3>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'll probably want to replace all raw html with mui in future iterations

@GDYendell
Copy link
Collaborator

I can't say much for the code, but I managed to run it

What is this bit for?
image

Is the metadata section supposed to be a text entry?

What is required for this to run the plan with the real blueapi?

@callumforrester
Copy link
Contributor Author

@GDYendell the red box is the "delay" parameter, I'm not sure why it is isn't labelled. The type annotation allows the delay to either be a scalar float (global delay) or a list of floats (per-scan-point delay). I don't think JSONForms has done too well with this, emphasizing @douglaswinter's point that JSONForms won't be good for everything, especially building clean user-facing GUIs.

The metadata can be an arbitrary dictionary of key-value pairs and JSONForms doesn't seem to have a renderer for that, we could write one: A textfield where you just type raw JSON.

To get this working with that we have we need to address the issues in the PR description and work out why I had to re-order the scanspec schema definition (next on my list is writing an issue about this).

@callumforrester
Copy link
Contributor Author

@GDYendell made a simplest-possible reproduction of the scanspec issue and raised a bug on JSONForms, see PR description.

Create a dropdown menu for selecting a plan, populate using a mocked
call to blueapi using mockserviceworker.

Edit mocked output assuming that the following have been fixed:
- DiamondLightSource/blueapi#1129
- DiamondLightSource/blueapi#1123
- DiamondLightSource/blueapi#1124

And reorder the scanspec schema so that its self-referential components
can be detected in a single pass.
Get the button to trigger a plan on blueapi, no feedback yet.
Add an instrument session field since that is a requirement for blueapi.
@callumforrester callumforrester merged commit f270631 into main Jul 22, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants