Add custom visuals to the run summary view

You can now set specific custom run visuals to appear on the summary view of the run details view. They will appear in a top row above the metrics and run options summary tables.

Screenshot showing a sample run with two sample charts, a spider chart and a double line chart, above the normal run summary view tables.

The custom visuals that appear on the summary view follow the same schema with the addition of a slot property. First, you must specify that the custom run visual should appear in the summary view with the "type": "summary-tab" designation, then you define the order with the slot property. An example of specifying a single custom visual is shown below:

Single-asset example

{
  "assets": [
    {
      "name": "Example 1",
      "content_type": "json",
      "visual": {
        "schema": "chartjs",
        "type": "summary-tab",
        "label": "Chart 1",
        "slot": 1
      },
      "content": ...
    }
  ]
}

You can specify up to three custom visuals for the run summary view. The slot property can have the values 1, 2, or 3:

1 specifies that the visual will be on the left,
2 specifies that the visual will be on the right if two, in the middle if three, and
3 specifies that the visual will be on the right.

Multi-asset example

{
  "assets": [
    {
      "name": "Example 1",
      "content_type": "json",
      "visual": {
        "schema": "chartjs",
        "type": "summary-tab",
        "label": "Chart 1",
        "slot": 1
      },
      "content": ...
    },
    {
      "name": "Example 2",
      "content_type": "json",
      "visual": {
        "schema": "chartjs",
        "type": "summary-tab",
        "label": "Chart ",
        "slot": 2
      },
      "content": ...
    },
    {
      "name": "Example 3",
      "content_type": "json",
      "visual": {
        "schema": "chartjs",
        "type": "summary-tab",
        "label": "Chart 3",
        "slot": 3
      },
      "content": ...
    }
  ]
}

Note that the visuals will automatically adjust for more narrow screens (e.g. mobile devices).

Add custom visuals to the run summary view

Enhance the default view with your own visuals