[Vega] Autosized spec doesn't work correctly if the canvas is larger than the container

[flash1293]

Kibana version: 8.3

Describe the bug: Given a spec using autosize, no scrollbars are shown even if the autosized chart ends up larger as the container. Also, the container height keeps growing on an interval.

Steps to reproduce:

1. Install ecommerce sample data
2. Load this spec

{
    "$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"}}}
  }

Two problematic behaviors:

• No scrollbars are shown, the chart is cut off horizontally
• The chart keeps growing on an interval

Expected behavior:
The chart is rendered once with scrollbars.

Additional context:

I can reproduce the missing scrollbars in 8.3, I think they are caused by #130954

The auto-growth of the container doesn't happen in 8.3, I think that once got introduced with #136145

Workaround:
The only way to render the full chart is to disable autosize and provide constant width and height:

    "autosize": "none",
    "height": 500,
    "width": 2500,

This way, the scrollbars appear and no incremental height increases occur.

[elasticmachine]

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

[dej611]

Maybe this is somehow related to this bug? vega/vega#1350

[flash1293]

@dej611 not sure about that, this bug is pretty old and the problems in Kibana started after the upgrade to 5.3.0 - also it happens even if nothing is hovered

[dej611]

Yes, but the checks loop bug described in the issue seems very similar to the increasing height behaviour when the spec is evaluated.