RJSF vertical layout

[fabcor-maxiv]

Anyone knows how to get a react-jsonschema-form (RJSF) form in a vertical layout?

I have seen in some places "ui:widget": "vertical_box", but it does not seem to have any effect (not that I could see, and I might be doing something wrong):

https://github.com/mxcube/mxcubecore/blob/644f6eaa15da57e7ffbb5b74fe421af90c497670/mxcubecore/HardwareObjects/Gphl/GphlWorkflow.py#L532

[fabcor-maxiv]

This is what we get:

Which is surprising since the default behavior of RJSF seems to be to do vertical layout.

We are not happy with this horizontal layout as seen in the screenshot above. I guess, we would be happy with the default RJSF vertical layout. Ideally we would like a grid layout as can be seen in the screenshot at the following link: https://mxcubecore.readthedocs.io/en/stable/dev/json-schema-generated-user-interface.html#precharacterisation.

Any advice? Is it possible at all in MXCuBE-Web or is it a feature in MXCuBE-Qt only?

@rhfogh @axelboc @elmjag

[marcus-oscarsson]

As we discussed last time the feature for generating these dialogs are still quite basic and still under development in mxcubeweb. The current solution should render the inputs in vertically in two columns, so that it looks more or less like the other dialogs. I'm a bit surprised by your screen shot. I have to double check but we perhaps made some additional changes that we have not pushed yet.

There are still a few things to continue to develop related to this and its:

• Dropping RJSF
• Rendering of categories (or several models)
• Handling of commonly used input like space group

[fabcor-maxiv]

For the record, this is how "TestCollection" looks like for me right now:

[marcus-oscarsson]

That does indeed look strange, it should be two columns.

[marcus-oscarsson]

I pushed a change we did a while back ago that we have still not pushed. There where some changes in RJSF a while back and we needed to adapt to those. Please have a look, I think it solves your issue.

https://github.com/mxcube/mxcubeweb/tree/mo-task-dialog

[fabcor-maxiv]

I pushed a change we did a while back ago that we have still not pushed. There where some changes in RJSF a while back and we needed to adapt to those. Please have a look, I think it solves your issue.

https://github.com/mxcube/mxcubeweb/tree/mo-task-dialog

Yes, I ended up with nearly the same patch/diff yesterday. I was not sure about the asyncValidate part, though.

Thanks, we will try that : )

[elmjag]

I have tested cherry-picking this commit: 2a56fc8 It does the trick for us. The dialogs are now rendered with a 'two column' layout. Thanks!

I guess merging that commit is a solution to this issue.

[marcus-oscarsson]

👍 Thanks for letting me know, Ill remove the draft then