react json schema

[FynnBe]

I explored the idea of using the json schema in the uploader for bioimage.io to generate the form directly from the spec.
So far this is an incomplete, but functional implementation to generate an improved react json schema (+ui schema).

cc @oeway

[oeway]

It will be of course super cool, if it works. I have been trying different UI libraries for this type of forms, including react-jsonschema-form. It will nicely with standard UI elements, but once you try more complex ones, it becomes limited easily.

For example, the idea is to load a schema, e.g. from the spec repo and render the form directly. But then if we want to load the list of tags and options for the links, you will end up modifying the json schema you fetched from the spec repo to add the options -- which can make the website break if the json schema get updated and defeat the purpose of hosting the UI schema in the spec repo. We will then be in a wired situation that the UI code are depend both the bioimage.io repo and the spec repo, which is worse than having it in a single repo.

Currently, a similar schema form UI library is used for the website: https://github.com/14nrv/vue-form-json . The same as react-jsonschema-form, you can also generate a json UI schema for vue-form-json. However, it doesn't solve the issue I mentioned above.

There is another practical issue too, the react-jsonschema-form is reactjs-based, which is a different web framework than then one we use (which is vuejs), we cannot easily blend the two framework together.

Nevertheless, we might be able to rewrite the uploader entirely in a separate ImJoy plugin using React and interface it with bioimage.io. This will be cool because it means we can easily call the uploader from, e.g. python in a jupyter notebook. The only issue is time, it will be a huge effort to rewrite it, since it's not only the form, we also need to do authentication with Zenodo, upload files, publish it, etc.

[FynnBe]

UI code are depend both the bioimage.io repo and the spec repo, which is worse than having it in a single repo.

This is true, but in practice we already access resources from bioimage.io and collection-bioimage-io in the spec

spec-bioimage-io/bioimageio/spec/shared/common.py

Lines 40 to 41 in 409d936

	BIOIMAGEIO_SITE_CONFIG_URL = "https://raw.githubusercontent.com/bioimage-io/bioimage.io/main/site.config.json"
	BIOIMAGEIO_COLLECTION_URL = "https://bioimage-io.github.io/collection-bioimage-io/collection.json"

We do this for optional validation (if we cannot fetch the resource we skip it) of bioimageio ids and optional warnings about the tag categories.

But then if we want to load the list of tags and options for the links, you will end up modifying the json schem

so we actually don't have to modify it, because the ui schema will already have this information. (we just have to keep it up to date... so we probably should move its generation to the collection repo to always be up to date with the bioimageio ids)

Nevertheless, we might be able to rewrite the uploader entirely in a separate ImJoy plugin using React and interface it with bioimage.io. This will be cool because it means we can easily call the uploader from, e.g. python in a jupyter notebook. The only issue is time, it will be a huge effort to rewrite it, since it's not only the form, we also need to do authentication with Zenodo, upload files, publish it, etc.

This is a nice goal! We sort of need to spin up an imjoy plugin for the validator anyway. Maybe we can get there in two steps:

1. imjoy plugin for form + validation; the result is given to the current upload pipeline in vuejs (not sure if this is technically possible?!)
2. merge authentication, etc into that imjoy plugin

[FynnBe]

for completeness:
draft for latest general rdf:
https://github.com/bioimage-io/spec-bioimage-io/blob/gh-pages-react_json_schema/rdf_spec_latest.json
https://github.com/bioimage-io/spec-bioimage-io/blob/gh-pages-react_json_schema/rdf_spec_latest_ui.json
screenshot from https://rjsf-team.github.io/react-jsonschema-form/

note1: that type should be a read-only field with the prefilled type.
note2: The rdf_source field is hidden.

draft for latest model (even less complete):
https://github.com/bioimage-io/spec-bioimage-io/blob/gh-pages-react_json_schema/model_spec_latest.json
https://github.com/bioimage-io/spec-bioimage-io/blob/gh-pages-react_json_schema/model_spec_latest_ui.json

What gets me excited about this approach in particular:

• always up to date (we will actually have to ensure to run on the latest released version, not current main, which might be another reason to move this to collection-biomage-io
• we can reuse the description texts from the documentation

[FynnBe]

closing in favor of #521