JSON Schema for JSON diagram config

[ceckoslab]

Hello @korzol

After we finish with #56 we will implement JSON schema validation and autocomplete.

I did some research and I found this project that looks really promising: https://github.com/josdejong/jsoneditor

We will start with static hardcoded JSON schema but in another ticket we will think how we can make the schema dynamic based on what metrics we have.

[korzol]

Hello @ceckoslab
So I have implemented aforementioned JSON editor but there is a problem with it.
When I use enum in schema it should generate selectbox for that entry. Although it works for static - hardcoded entries, it doesn't for entries lets say in definitions. Once I met this for my schema implementation, I decided to test the one provided as example on json-schema.org - Structuring a complex schema

Here is it:

const schema2 = {
          "$schema": "http://json-schema.org/draft-07/schema#",

          "definitions": {
            "address": {
              "type": "object",
              "properties": {
                "street_address": { "type": "string" },
                "city":           { "enum": ["Washington", "New-York"] },
                "state":          { "type": "string" }
              },
              "required": ["street_address", "city", "state"]
            }
          },

          "type": "object",

          "properties": {
            "billing_address": { "$ref": "#/definitions/address" },
            "shipping_address": { "$ref": "#/definitions/address" }
          }
        };

        const json2 = {
            "shipping_address": {
                "street_address": "1600 Pennsylvania Avenue NW",
                "city": null,
                "state": "DC"
              },
            "billing_address": {
                "street_address": "1st Street SE",
                "city": null,
                "state": "DC"
            }
        };

const options = {
        schema: schema2,
        mode: 'tree',
        modes: ['code', 'text', 'tree', 'preview'],
    };

const container = document.getElementById('jsoneditor');
const editor = new JSONEditor(container, options, json2);

Here is the result:

As seen from provided screenshot the editor proceed schema although fails to generate selectbox

There is a bug filled out - josdejong/jsoneditor#473

[korzol]

Here is a result for our real schema & json

segments.1.presentation.type is enum and should be a select box (html tag)

[korzol]

[ceckoslab]

Hello @korzol

It looks good and I think that we can continue even with the glitch you've described about the Select box.

I played a bit the JSON editor. I see some missing control icons, could we add them?

Also could we make the popup higher and wider in order to have more visible space where we can write?

[korzol]

Okay, thanks for update.

Also could we make the popup higher and wider in order to have more visible space where we can write?

Yes, of course, I will do it in the morning.

Although what control icons you mean?