Expression builder GUI (React)

[CarlosNZ]

No description provided.

[TheOneTheOnlyJJ]

Yes, this would be very useful to have! Especially if Material UI could be supported, one way or another. (Maybe by using JSON Forms?)

I'm in great need of this kind of component because my use case requires users to define JSON schemes themselves (either through a GUI, loaded from the file system, network, etc.). I then need the users to be able to define what I call "computed fields" (per JSON schema), which are new fields that will get stored separately from the fields in the JSON schema, and will be computed based on the original JSON schema.

Obviously, this library is the perfect tool for that, but I haven't yet gotten around on how to implement the GUI and logic behind this kind of system. I believe it will get quite complicated given that I need to extract the possible parameters that may be used in expressions from JSON schemes, not JSON data. I haven't found any library as of now that, for example, provides a function that takes a JSON schema as input and returns a list of all field names (along with their types) that are found in the schema (excluding JSON schema keywords, that is). However, I believe I could manage do code this kind of function myself.

Restricting the user in which parameters can be bound to each operator (for example, a field defined as a string will not be allowed in an expression like GREATHER_THAN) is another part of the problem, which is easy to solve when working with JSON data, but will require custom logic for working with JSON schemes directly.

The final feature to have would be the possibility of restricting which opeartors the GUI allows the user to use. For example, I do not want my users to be able to use SQL or HTTP operators in their "computed fields", and only work with the data accessible from the JSON schema previously defined.

[CarlosNZ]

Yes, this would be very useful to have! Especially if Material UI could be supported, one way or another. (Maybe by using JSON Forms?)

The component I'm building is using another one of my libraries: https://carlosnz.github.io/json-edit-react.
Basically, I'm just using that but supplying a few custom components with custom logic to make it fit this purpose.

It intentionally uses no 3rd-party UI libraries, just bare HTML/CSS

I'm in great need of this kind of component because my use case requires users to define JSON schemes themselves (either through a GUI, loaded from the file system, network, etc.). I then need the users to be able to define what I call "computed fields" (per JSON schema), which are new fields that will get stored separately from the fields in the JSON schema, and will be computed based on the original JSON schema.

I'm not sure exactly what you're saying, but the UI will restrict the FigTree nodes to (mostly) legal properties, etc. If you want a UI editor that can enforce a JSON schema, then json-edit-react will do that: https://github.com/CarlosNZ/json-edit-react?tab=readme-ov-file#json-schema-validation

The final feature to have would be the possibility of restricting which opeartors the GUI allows the user to use. For example, I do not want my users to be able to use SQL or HTTP operators in their "computed fields", and only work with the data accessible from the JSON schema previously defined.

You can do this with the excludeOperators property of FigTree: https://github.com/CarlosNZ/fig-tree-evaluator?tab=readme-ov-file#available-options

Thanks for the comments, I hope to have an initial version of this available fairly soon.

[CarlosNZ]

Quick preview: