[Vega] Fix vega controls layout

[flash1293]

Fixes #130436 There were multiple problems with resizing/layouting in the presence of controls, I tried to fix them all

• The size of the vega view was calculated before the controls are rendered initially - this means they are not taken into account for the initial render. In https://github.com/elastic/kibana/pull/130954/files#diff-69d5488e33ca7a3e3dcae6d6a430dd0b5273dc785c9a33b4825ca18b8265fd13R21 I added a second pass to measure the size and adjust
• The "resize" method triggered on resize observer triggering was passing down the dimensions of the full panel - but in case of controls the controls take up space within the panel which is not available for the vega canvas. Stopping passing down the dimensions it's using the dimensions of the container (which takes the controls into account due to the flexbox layout) https://github.com/elastic/kibana/pull/130954/files#diff-b9d5eaf197673bdd8f04db5dbd1f9d17c8b105c3f3fa9f71757f13cbe748de1eR262
• The view would get a height: 100% set which is not correct in case autosize isn't used - in this case it should be unbounded. This is done by the scss styles now
• In case autosize is used, then the vega canvas should scroll independently of the controls so the controls are always within view. I made sure this is the case by introducing a custom css class for this situation https://github.com/elastic/kibana/pull/130954/files#diff-524af065cf68755db81e6f0d095d53b7d9efe7e3225c46534487b72c52398397R17 https://github.com/elastic/kibana/pull/130954/files#diff-b9d5eaf197673bdd8f04db5dbd1f9d17c8b105c3f3fa9f71757f13cbe748de1eR265

Test cases:

• In Chrome and Firefox (because there were problems with scroll bars in Firefox before)
• Autosize spec without controls
• Autosize spec with controls
• Non-autosize spec without controls (smaller than the available space in the panel)
• Non-autosize spec without controls (larger than the available space in the panel)
• Non-autosize spec with controls (smaller than the available space in the panel)
• Non-autosize spec with controls (larger than the available space in the panel)
• Different positions of the controls via kibana config object: https://www.elastic.co/guide/en/kibana/current/vega.html#vega-additional-configuration-options

Controls should always be rendered at the specified position in the panel if there is enough space (autosize spec or smaller than available space non-autosize). In case there is not enough space (non-autosize larger than available space), the visualization should push out the controls and the whole thing should be scrollable.

[elasticmachine]

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

[mbondyra]

Overall this works much better than before because we can achieve the correct state, but there are some problems when switching to 'fit-x'/'fit-y' value. After saving or resizing the window it works fine. Steps to reproduce:

1. Use this code to create Vega vis:

{
  "$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},
"autosize": "none",
"height":3000, 
"width":1000,
  "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}
          ]
        }
      }
    }
  ]
}

2. Change autosize to fit-x

You will see the scrolls:

Also, switching from fit-x to none doesn't show scrollbar which is maybe even more troubling.

[flash1293]

Thanks for the review @mbondyra - this was caused by setting the autoresize class in the wrong place. I put that code into resize, but for autosize: none, it's never called. With this change, I can't reproduce the issue anymore. Could you check again?

Initial render:

After switching to fix-x

After switching back to none

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 89b2022
• Storybooks Preview
• Webpack Bundle Analyzer

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.6MB	1.7MB	+1.1KB

History

• 💚 Build #40779 succeeded d83888e
• 💔 Build #40474 failed 5f89d4f

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

[mbondyra]

LGTM, rechecked on Chrome and FF 🆗