[Vega] Fix vega styling issues #143168

flash1293 · 2022-10-12T09:04:01Z

This PR fixes the problems described in the issue:

Every growing canvas in editor
Non-scrollable auto-sized spec

For the first issue, I tracked the problem down to the change in #133288 - reverting this makes the editor keep its size. I tested the error centering for Lens, agg based and TSVB and it seems to work fine in all cases:

The second issue was introduced by #130954 . This was simply an oversight - the new types did not take into account that autosized specs can also become scrollable in some scenarios.

Removing the overflow: hidden seems to be sufficient - autosized specs that do fit the panel render without scrollbars while auto-sized specs with too large of a canvas become scrollable.

Test case 1 (autosize-spec larger than canvas)

Open

{
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "background": "white",
    "autosize": {"type": "pad", "resize": true, "contains": "padding"},
    "padding": 5,
    "data": [
      {
        "name": "source_0",
        "url": {
          "%context%": true,
          "index": "kibana_sample_data_ecommerce",
          "body": {
            "size": 384,
            "_source": ["customer_first_name", "total_unique_products"]
          }
        },
        "format": {"property": "hits.hits", "type": "json", "parse": {}},
        "transform": [
          {
            "type": "formula",
            "expr": "datum[\"_source\"] && datum[\"_source\"][\"customer_first_name\"]",
            "as": "_source.customer_first_name"
          },
          {
            "type": "formula",
            "expr": "datum[\"_source\"] && datum[\"_source\"][\"total_unique_products\"]",
            "as": "_source.total_unique_products"
          },
          {
            "type": "stack",
            "groupby": ["_source", "_source\\.customer_first_name"],
            "field": "_source\\.total_unique_products",
            "sort": {
              "field": ["_source\\.customer_first_name"],
              "order": ["descending"]
            },
            "as": [
              "_source.total_unique_products_start",
              "_source.total_unique_products_end"
            ],
            "offset": "zero"
          },
          {
            "type": "filter",
            "expr": "isValid(datum[\"_source.total_unique_products\"]) && isFinite(+datum[\"_source.total_unique_products\"])"
          }
        ]
      },
      {
        "name": "column_domain",
        "source": "source_0",
        "transform": [
          {"type": "aggregate", "groupby": ["_source\\.customer_first_name"]}
        ]
      }
    ],
    "signals": [
      {"name": "x_step", "value": 20},
      {
        "name": "child_width",
        "update": "bandspace(domain('x').length, 0.1, 0.05) * x_step"
      },
      {"name": "child_height", "value": 200}
    ],
    "layout": {
      "padding": 20,
      "titleAnchor": {"column": "end"},
      "offset": {"columnTitle": 10},
      "columns": {"signal": "length(data('column_domain'))"},
      "bounds": "full",
      "align": "all"
    },
    "marks": [
      {
        "name": "column-title",
        "type": "group",
        "role": "column-title",
        "title": {
          "text": "_source.customer_first_name",
          "style": "guide-title",
          "orient": "bottom",
          "offset": 10
        }
      },
      {
        "name": "row_header",
        "type": "group",
        "role": "row-header",
        "encode": {"update": {"height": {"signal": "child_height"}}},
        "axes": [
          {
            "scale": "y",
            "orient": "left",
            "grid": false,
            "title": "STL Average Throughput elements/sec,",
            "tickCount": 5,
            "labelOverlap": true,
            "zindex": 0
          }
        ]
      },
      {
        "name": "column_footer",
        "type": "group",
        "role": "column-footer",
        "from": {"data": "column_domain"},
        "sort": {
          "field": "datum[\"_source.customer_first_name\"]",
          "order": "ascending"
        },
        "title": {
          "text": {
            "signal": "isValid(parent[\"_source.customer_first_name\"]) ? parent[\"_source.customer_first_name\"] : \"\"+parent[\"_source.customer_first_name\"]"
          },
          "style": "guide-label",
          "frame": "group",
          "orient": "bottom",
          "offset": 10
        },
        "encode": {"update": {"width": {"signal": "child_width"}}}
      },
      {
        "name": "cell",
        "type": "group",
        "style": "cell",
        "from": {
          "facet": {
            "name": "facet",
            "data": "source_0",
            "groupby": ["_source\\.customer_first_name"]
          }
        },
        "sort": {
          "field": ["datum[\"_source.customer_first_name\"]"],
          "order": ["ascending"]
        },
        "encode": {
          "update": {
            "width": {"signal": "child_width"},
            "height": {"signal": "child_height"}
          }
        },
        "marks": [
          {
            "type": "group",
            "from": {
              "facet": {
                "data": "facet",
                "name": "stack_group_child_main",
                "groupby": ["_source"],
                "aggregate": {
                  "fields": [
                    "_source\\.total_unique_products_start",
                    "_source\\.total_unique_products_start",
                    "_source\\.total_unique_products_end",
                    "_source\\.total_unique_products_end"
                  ],
                  "ops": ["min", "max", "min", "max"]
                }
              }
            },
            "encode": {
              "update": {
                "x": {"scale": "x", "field": "_source"},
                "width": {"scale": "x", "band": 1},
                "y": {
                  "signal": "min(scale('y',datum[\"min__source.total_unique_products_start\"]),scale('y',datum[\"max__source.total_unique_products_start\"]),scale('y',datum[\"min__source.total_unique_products_end\"]),scale('y',datum[\"max__source.total_unique_products_end\"]))"
                },
                "y2": {
                  "signal": "max(scale('y',datum[\"min__source.total_unique_products_start\"]),scale('y',datum[\"max__source.total_unique_products_start\"]),scale('y',datum[\"min__source.total_unique_products_end\"]),scale('y',datum[\"max__source.total_unique_products_end\"]))"
                },
                "clip": {"value": true},
                "cornerRadius": {"value": 5}
              }
            },
            "marks": [
              {
                "type": "group",
                "encode": {
                  "update": {
                    "y": {"field": {"group": "y"}, "mult": -1},
                    "width": {"field": {"group": "width"}}
                  }
                },
                "marks": [
                  {
                    "name": "child_marks",
                    "type": "rect",
                    "style": ["bar"],
                    "from": {"data": "stack_group_child_main"},
                    "encode": {
                      "update": {
                        "tooltip": {
                          "signal": "{\"_source.\": isValid(datum[\"_source\"]) ? datum[\"_source\"] : \"\"+datum[\"_source\"], \"_source.total_unique_products\": format(datum[\"_source.total_unique_products\"], \"\"), \"_source.customer_first_name\": isValid(datum[\"_source.customer_first_name\"]) ? datum[\"_source.customer_first_name\"] : \"\"+datum[\"_source.customer_first_name\"]}"
                        },
                        "fill": {
                          "scale": "color",
                          "field": "_source\\.customer_first_name"
                        },
                        "ariaRoleDescription": {"value": "bar"},
                        "description": {
                          "signal": "\"_source.: \" + (isValid(datum[\"_source\"]) ? datum[\"_source\"] : \"\"+datum[\"_source\"]) + \"; _source.total_unique_products: \" + (format(datum[\"_source.total_unique_products\"], \"\")) + \"; _source.customer_first_name: \" + (isValid(datum[\"_source.customer_first_name\"]) ? datum[\"_source.customer_first_name\"] : \"\"+datum[\"_source.customer_first_name\"])"
                        },
                        "width": {"field": {"group": "width"}},
                        "y": {
                          "scale": "y",
                          "field": "_source\\.total_unique_products_end"
                        },
                        "y2": {
                          "scale": "y",
                          "field": "_source\\.total_unique_products_start"
                        }
                      }
                    }
                  }
                ]
              }
            ]
          }
        ],
        "axes": [
          {
            "scale": "y",
            "orient": "left",
            "tickCount": 5,
            "gridScale": "x",
            "grid": true,
            "domain": false,
            "labels": false,
            "aria": false,
            "maxExtent": 0,
            "minExtent": 0,
            "ticks": false,
            "zindex": 0
          }
        ]
      }
    ],
    "scales": [
      {
        "name": "x",
        "type": "band",
        "domain": {"data": "source_0", "field": "_source", "sort": true},
        "range": {"step": {"signal": "x_step"}},
        "paddingInner": 0.1,
        "paddingOuter": 0.05
      },
      {
        "name": "y",
        "type": "linear",
        "domain": {
          "data": "source_0",
          "fields": [
            "_source\\.total_unique_products_start",
            "_source\\.total_unique_products_end"
          ]
        },
        "range": [{"signal": "child_height"}, 0],
        "nice": true,
        "zero": true
      },
      {
        "name": "color",
        "type": "ordinal",
        "domain": {
          "data": "source_0",
          "field": "_source\\.customer_first_name",
          "sort": true
        },
        "range": {"scheme": "tableau20"}
      }
    ],
    "legends": [
      {
        "fill": "color",
        "symbolType": "square",
        "title": "_source.customer_first_name"
      }
    ],
    "config": {"style": {"cell": {"stroke": "transparent"}}}
  }

Test case 2 (autosize with controls from #130436 )

Open

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",

  "padding": {"bottom": 150},

  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],

  "signals": [
   { "name":"mypadding", "value": 0.05, "bind": {"input":"range", "min": 0, "max": 1, "step":0.05} }, 
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": {"signal":"mypadding"},
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],

  "axes": [
    { "orient": "bottom", "scale": "xscale" },
    { "orient": "left", "scale": "yscale" }
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
          "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
          "text": {"signal": "tooltip.amount"},
          "fillOpacity": [
            {"test": "datum === tooltip", "value": 0},
            {"value": 1}
          ]
        }
      }
    }
  ]
}

Both seem to render fine (also the default spec), tested Chrome and Firefox:

This reverts commit 8e09cdc.

This reverts commit cd753c3.

elasticmachine · 2022-10-12T11:05:27Z

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

dej611

Tested locally with Safari

kibana-ci · 2022-10-17T14:02:22Z

💚 Build Succeeded

Buildkite Build
Commit: 7250608

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`visTypeVega`	1.7MB	1.7MB	-118.0B
`visualizations`	268.2KB	268.2KB	+44.0B
total			-74.0B

History

💚 Build #80465 succeeded c6e0160
💛 Build #79692 was flaky 6908428

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Revert "[Vega] Fix vega controls layout (elastic#130954)" This reverts commit 8e09cdc. * Revert "Revert "[Vega] Fix vega controls layout (elastic#130954)"" This reverts commit cd753c3. * fix vega problems * always make the vega view scroll * restrict maximum height

flash1293 added 5 commits October 11, 2022 17:56

Revert "[Vega] Fix vega controls layout (elastic#130954)"

cd753c3

This reverts commit 8e09cdc.

Revert "Revert "[Vega] Fix vega controls layout (elastic#130954)""

8e35291

This reverts commit cd753c3.

fix vega problems

daeca1f

always make the vega view scroll

559fbe1

restrict maximum height

6908428

flash1293 added release_note:fix Feature:Vega Vega visualizations Team:Visualizations Visualization editors, elastic-charts and infrastructure backport:skip This commit does not require backporting labels Oct 12, 2022

flash1293 marked this pull request as ready for review October 12, 2022 11:05

flash1293 requested a review from a team as a code owner October 12, 2022 11:05

dej611 approved these changes Oct 12, 2022

View reviewed changes

flash1293 added 2 commits October 14, 2022 16:11

Merge branch 'main' into vega-autosize-spec

c6e0160

Merge branch 'main' into vega-autosize-spec

7250608

MichaelMarcialis approved these changes Oct 18, 2022

View reviewed changes

flash1293 merged commit ce00fd1 into elastic:main Oct 19, 2022

kibanamachine added the v8.6.0 label Oct 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Vega] Fix vega styling issues #143168

[Vega] Fix vega styling issues #143168

flash1293 commented Oct 12, 2022

elasticmachine commented Oct 12, 2022

dej611 left a comment

kibana-ci commented Oct 17, 2022

[Vega] Fix vega styling issues #143168

[Vega] Fix vega styling issues #143168

Conversation

flash1293 commented Oct 12, 2022

elasticmachine commented Oct 12, 2022

dej611 left a comment

Choose a reason for hiding this comment

kibana-ci commented Oct 17, 2022

💚 Build Succeeded

Metrics [docs]

Async chunks

History