Improve JSON rendering

[ggrossetie]

Some pages contain large JSON5 file (i.e., with comments):

{
  "Name": "Thermo dynamics",
  "ShortName": "ThermoDyn",
  "Models": {
    "use-model-name": 1,
    "fluid": {
      "equations": "Navier-Stokes"
    }
  },
  "Materials": {
    "air": {
      "markers": [
        "air1",
        "air2"
      ],
      "physics": [
        "fluid",
        "heat"
      ],
      "rho": "1",
      "mu": "2.65e-2",
      "k": "0.03",
      "Cp": "1004",
      "beta": "0.003660" //0.00006900
    },
    "internal-walls": {
      "markers": "internal-walls",
      "physics": "heat",
      //"k11":"0.02"//[ W/(m*K) ]
      // //"k11":"0.0262"//[ W/(m*K) ]
      // //"Cp":"1000", //[ J/(kg*K) ]
      // //"rho":"150" //[ kg/(m^3) ]
      "rho": "150", //820,//"82",
      "k": "0.25", //"0.25",
      "Cp": "1000",
      "mu": "1.", //???
      "beta": "0." //"0.003660"//???
    }
  },
  "BoundaryConditions": {
    "velocity": {
      "Dirichlet": {
        "exterior-walls": {
          "expr": "{0,0}"
        },
        "internal-surfaces": {
          "expr": "{0,0}"
        },
        "heater1": {
          "expr": "{0,0}"
        },
        "heater2": {
          "expr": "{0,0}"
        }
      }
    },
    "temperature": {
      "Dirichlet": {
        "heater1": {
          "expr": "310"
          /*"330"*/
        },
        "heater2": {
          "expr": "300"
          /*"320"*/
        }
      },
      "Robin": {
        "exterior-walls": {
          "expr1": "1.0/(0.06+0.01/0.5 + 0.3/0.8 + 0.20/0.032 +0.016/0.313 +0.14)",
          // h coeff
          "expr2": "280"
          // temperature exterior
        },
        "exterior-walls-nofluid": {
          "expr1": "1.0/(0.06+0.01/0.5 + 0.3/0.8 + 0.20/0.032 +0.016/0.313 +0.14)", // h coeff
          "expr2": "280" // temperature exterior
        }
      }
    }
  },
  "PostProcess": {
    "use-model-name": 1,
    "heat-fluid": {
      "Exports": {
        "fields": [
          "fluid.velocity",
          "fluid.pressure",
          "heat.temperature",
          "fluid.pid"
        ]
      }
    },
    "fluid": {
    },
    "heat": {
    }
  }
}

Reference: https://docs.feelpp.org/cases/latest/heatfluid/2Dbuilding_NS/README.html

One solution would be to use a JSON tree viewer to show the first 2 levels by default:

One downside is that comments are not supported when displaying a JSON as a tree (because comments are not part of any "node").

Another idea would be to set a maximum height on JSON blocks:

Current	With max height

As a side note, Highlight.js supports comments so the syntax highlighting should work as expected:

https://github.com/highlightjs/highlight.js/blob/8c2c2c6b8050b2c14bc30bfbb0b3fa79625db44a/src/languages/json.js#L46-L47

[prudhomm]

@ggrossetie is it possible to switch between the 2 views ?

[ggrossetie]

is it possible to switch between the 2 views ?

Between a code block and a tree viewer? To clarify, you want to configure which one you want to use (for a specific JSON source block) or both at the same time with a button to switch between the 2 views?

In my opinion, we should use one or the other. For the record, we can add a button to "expand all" in the JSON viewer and it has a copy button.