Displaying a signal element in Vega visualization within a Kibana dashboard

[michellebsnider]

Kibana version: 7.12

Browser version: Chrome Version 100.0.4896.75

Describe the bug: Signals with input element binding in Vega code is positioned below the display such that one has to scroll down to get to it in the Kibana dashboard, regardless of the adjusted window size.

Steps to reproduce:

1. Take your favorite plot in Vega in Kibana (I took this one: [https://vega.github.io/vega/examples/bar-chart/], and took out the set height and width.)
2. Add a signal element with input element binding per [https://vega.github.io/vega/docs/signals]

Expected behavior: The window in the Kibana dashboard should show the range slider/radio button/etc within the visible window.

Screenshots (if relevant):

Any additional context: source code for this plot:

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

[elasticmachine]

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

[stratoula]

I think that the problem can be fixed by assigning specific width and height.

Running the aforementioned config on the vega editor, I can see that there is a problem on rendering the chart if no width/height is set.

I am not sure if this is something we can improve on the kibana-side. @flash1293 @alexwizp any ideas?

[flash1293]

Theoretically we should be able to control this because we render the controls ourselves:

kibana/src/plugins/vis_types/vega/public/vega_view/vega_base_view.js

Line 117 in eb0ef19

this._$controls = $(

[flash1293]

Here I pulled out the controls element as a sibling of .vgaVis__wrapper and it seems like it's rendering as expected (taking the controls into account for the auto height - I think the scrollbars are still rendered because I missed around in the DOM and vega didn't follow):