Interactive legend doesn’t work with orient type `none`

[karlanakamura]

Elasticsearch Cloud version: v8.4.3

Describe the bug: I'm having problems with the legends, I need to use the 'none' orient type because the legend was not getting the position I would like. After I changed it to 'none', the legend stopped being interactive (obs: when I had orient of type 'right' it worked, the only thing I changed was the orient to 'none'). This issue does not occur in vega editor, just in Custom visualization (in kibana's visualize library).

Steps to reproduce:

1. Create a new visualization with Custom visualization.

2. Paste this script (I changed the Line Chart Example so that the legend is interactive)

   {
   "$schema": "https://vega.github.io/schema/vega/v5.json",
   "description": "A basic line chart example.",
   "padding": 5,
   "autosize": "fit"
   
   "signals": [
   {
     "name": "interpolate",
     "value": "linear",
     "bind": {
       "input": "select",
       "options": [
         "basis",
         "cardinal",
         "catmull-rom",
         "linear",
         "monotone",
         "natural",
         "step",
         "step-after",
         "step-before"
       ]
     }
   },
   {
     "name": "select_legend",
     "value": null,
     "on":[
       {
         "events": "@legendSymbol:mouseover, @legendLabel:mouseover",
         "update": "datum.value"
       },
       {
         "events": "@legendSymbol:mouseout,    @legendLabel:mouseout",
         "update": "null"
       }
     ]
   }
   ],
   
   "data": [
   {
     "name": "table",
     "values": [
       {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 20, "c":1},
       {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 35, "c":1},
       {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 10, "c":1},
       {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 15, "c":1},
       {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1},
       {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 28, "c":1},
       {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1},
       {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1},
       {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1},
       {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 25, "c":1}
     ]
   }
   ],
   
   "scales": [
   {
     "name": "x",
     "type": "point",
     "range": "width",
     "domain": {"data": "table", "field": "x"}
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "nice": true,
     "zero": true,
     "domain": {"data": "table", "field": "y"}
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category",
     "domain": {"data": "table", "field": "c"}
   }
   ],
   
   "axes": [
   {"orient": "bottom", "scale": "x"},
   {"orient": "left", "scale": "y"}
   ],
   
   "legends": [
   {
     "stroke": "color",
     "fill": "color",
     "direction": "horizontal",
     "orient": "none",
     "columns": 2,
     "columnPadding": 10,
     "rowPadding": 5,
     "legendX": {"signal": "width-60"},
     "encode": {
       "labels": {
         "name": "legendLabel",
         "interactive": true,
         "update": {
           "fontSize": {"value": 12},
           "fill": {"value": "#69707D"}
         },
         "hover": {
           "fill": {"value": "black"}
         }
       },
       "symbols": {
         "name": "legendSymbol",
         "interactive": true
       }
     }
   }
   ],
   
   "marks": [
   {
     "type": "group",
     "from": {
       "facet": {
         "name": "series",
         "data": "table",
         "groupby": "c"
       }
     },
     "marks": [
       {
         "type": "line",
         "from": {"data": "series"},
         "encode": {
           "enter": {
             "x": {"scale": "x", "field": "x"},
             "y": {"scale": "y", "field": "y"},
             "stroke": {"scale": "color", "field": "c"},
             "strokeWidth": {"value": 2}
           },
           "update": {
             "interpolate": {"signal": "interpolate"},
             "strokeOpacity": [
               {"test": "select_legend == null", "value": 1},
               {"test": "select_legend == datum.c", "value": 1},
               {"test": "datum.c != null & select_legend != datum.c", "value": 0.3},
               {"value": 1}
             ]
           },
           "hover": {
             "strokeOpacity": {"value": 0.5}
           }
         }
       }
     ]
   }
   ]
   }

3. Put the mouse over the legend and you will see that nothing happens.
4. Change the legends orient to "right" and put the mouse again, you will see it is interactive.
5. Paste the script with orient type "none" in vega editor and you will see that it works (obs: in vega editor you need to set height and width).

Expected behavior: The legend should be interactive for any type of orient.

[elasticmachine]

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

[flash1293]

I can reproduce the problem in Kibana but it's also happening with this minimal embedding described here: https://vega.github.io/vega-lite/usage/embed.html#start-using-vega-lite-with-vega-embed

I opened an upstream issue for this: https://github.com/vega/vega/issues/3612

[nickofthyme]

Yeah definitely seems like an upstream bug. A workaround is to specify a value for legendX and legendY, then the signal fires properly.

Vega config diff

```diff { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A basic line chart example.", "padding": 5, "autosize": "fit" "signals": [ { "name": "interpolate", "value": "linear", "bind": { "input": "select", "options": [ "basis", "cardinal", "catmull-rom", "linear", "monotone", "natural", "step", "step-after", "step-before" ] } }, { "name": "select_legend", "value": null, "on":[ { "events": "@legendSymbol:mouseover, @legendLabel:mouseover", "update": "datum.value" }, { "events": "@legendSymbol:mouseout, @legendLabel:mouseout", "update": "null" } ] } ], "data": [ { "name": "table", "values": [ {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 20, "c":1}, {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 35, "c":1}, {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 10, "c":1}, {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 15, "c":1}, {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1}, {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 28, "c":1}, {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1}, {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1}, {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1}, {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 25, "c":1} ] } ], "scales": [ { "name": "x", "type": "point", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "type": "linear", "range": "height", "nice": true, "zero": true, "domain": {"data": "table", "field": "y"} }, { "name": "color", "type": "ordinal", "range": "category", "domain": {"data": "table", "field": "c"} } ], "axes": [ {"orient": "bottom", "scale": "x"}, {"orient": "left", "scale": "y"} ], "legends": [ { "stroke": "color", "fill": "color", "direction": "horizontal", "orient": "none", "columns": 2, "columnPadding": 10, "rowPadding": 5, "legendX": {"signal": "width-60"}, + "legendY": 0, "encode": { "labels": { "name": "legendLabel", "interactive": true, "update": { "fontSize": {"value": 12}, "fill": {"value": "#69707D"} }, "hover": { "fill": {"value": "black"} } }, "symbols": { "name": "legendSymbol", "interactive": true } } } ], "marks": [ { "type": "group", "from": { "facet": { "name": "series", "data": "table", "groupby": "c" } }, "marks": [ { "type": "line", "from": {"data": "series"}, "encode": { "enter": { "x": {"scale": "x", "field": "x"}, "y": {"scale": "y", "field": "y"}, "stroke": {"scale": "color", "field": "c"}, "strokeWidth": {"value": 2} }, "update": { "interpolate": {"signal": "interpolate"}, "strokeOpacity": [ {"test": "select_legend == null", "value": 1}, {"test": "select_legend == datum.c", "value": 1}, {"test": "datum.c != null & select_legend != datum.c", "value": 0.3}, {"value": 1} ] }, "hover": { "strokeOpacity": {"value": 0.5} } } } ] } ] } ```