Extend and improve form functionality

[Peter9192]

I made a very simple form renderer, but it still needs work.

• [ ] Form always renders default values. It should remember its state from previous configuration.
• [ ] Form currently only handels ranges. It should be able to render different fields based on the types in the schema
• [ ] When the form is submitted properly through the "submit" button, some actions are triggered like run class and reset the dialog. However, when the form is exited e.g. by pressing escape, these actions are skipped. Opening it again then shows two forms.
• [ ] I struggle a bit with separating UI from functionality. E.g. I'm not sure whether or not things like parsing the formData should be scoped to the form. Also not sure how to best trigger actions outside the form (e.g. running class): pass in an "onsubmit" callback function, emit a custom event from the form and subscribe to it from outside, bind form to experiment data and add mutationobserver, ....
• [ ] Currently the form is rebuilt every time the user wants to edit some settings. However, the form always looks the same, only the values change. It might be nicer to build the form only once, and only update the settings. Eventually it might be nice if we can also have a "simple" vs "guru" mode, where the simple mode renders only part of the form.
• [ ] Currently you need two clicks to get to the form: first and an experiment, then click "configure". It might make more sense to directly open the form. Or, eventually, clicking "add experiment" could open a choice menu like "Default, preset 1, preset 2, custom, upload" where only custom will bring you to the form.

I found and tried some form generators for vanilla js, but so far without success:

• https://github.com/json-schema-form-element/jsfe
• https://github.com/hblanko/json-schema-forms
• https://github.com/json-editor/json-editor

Currently I was trying to prototype something simple and see how far I get with vanilla JS. However, if this is much easier in react (e.g. with jsonforms or rjsf), we should probably switch at some point, and not invest too much in perfecting this prototype.

[Peter9192]

@sverhoeven would you like to have a look at this? Feel free to touch other parts of the web app as well in the process. In the meantime I can work on the class package.

[sverhoeven]

The issues you listed are things that UI frameworks (vue,react,solidjs) and formlibraries (rjsf, react hook form, tanstack form) solve.

About point 5

We don't want a dynamic server, but a static web server. So we build a single page application where all interactive html is generated by Javascript in the web browser.
I can imagine a generate step (pnpm generate-form) that generates form js (with html strings embedded) files from a json schema. Those files can be used later, which has the pro of being type-safe and the con of customizations are lost after re-generate.