Vega tooltip positioning is broken on dashboards

[nyurik]

The html Vega tooltip position is incorrectly calculated when showing it on a dashboard. The position shows up correctly in the design screen.

The temporary workaround is to disable the new HTML vega tooltip with

  "config": {
    "kibana": {"tooltips": false}
  }

[flash1293]

@nyurik I have problems reproducing this - for me the tooltips are positioned correctly (master, 6.6, 6.4). Do I need a specific vega chart type for this?

[ThiloSchoenfelder]

I've still a broken position on the right end of the vega graph in the dashboard.
The last two tooltip are shown right from the data point and so out side of the graph.
In the edit mode the tooltip are shown on the left and it is visible.

I'm using Kibana 6.7 and vega/v3.json

Update:
Fullscreen: is ok
and when an other tile is right of the diagram it is also OK.

[flash1293]

Hey @ThiloSchoenfelder thanks for reporting this. What browser / OS are you using? Is this IE 11?

[ThiloSchoenfelder]

Hi Joe, now I’m using Chrome on Windows 10 [cid:image001.png@01D50BC9.BF1FEC10] Best regards p.p. Thilo Schönfelder Software development - Quality Management Phone: +49 7156 303-31647, Fax: +49 7156 303-931647, thilo.schoenfelder@de.trumpf.com TRUMPF Werkzeugmaschinen GmbH + Co. KG, Johann-Maus-Strasse 2, 71254 Ditzingen, Germany, www.trumpf.com Follow us on Twitter, Youtube, LinkedIn & XING: www.twitter.com/TRUMPF_News | www.youtube.com/TRUMPFtube | www.linkedin.com/company/trumpf-gmbh-co-kg | www.xing.com/company/trumpf TRUMPF Werkzeugmaschinen GmbH + Co. KG, Ditzingen, Amtsgericht Stuttgart HRA 202772 Unlimited Liability Partner: TRUMPF Werkzeugmaschinen Beteiligungs-GmbH, Ditzingen, Amtsgericht Stuttgart HRB 206070 Managing Board: Dr.-Ing. Heinz-Jürgen Prokop, Dipl.-Wirt. Ing. (FH) Reinhold Groß, Dr.-Ing. Stephan Mayer, Dr.-Ing. Thomas Schneider The information in accordance with Article 13 GDPR on how your data are handled in our company can be found on our homepage https://www.trumpf.com/en_INT/meta/dataprivacynotice. Von: Joe Reuter <notifications@github.com> Gesendet: Mittwoch, 15. Mai 2019 21:52 An: elastic/kibana <kibana@noreply.github.com> Cc: Schoenfelder, Thilo <Thilo.Schoenfelder@TRUMPF.com>; Mention <mention@noreply.github.com> Betreff: Re: [elastic/kibana] Vega tooltip positioning is broken on dashboards (#25363) Hey @ThiloSchoenfelder<https://github.com/ThiloSchoenfelder> thanks for reporting this. What browser / OS are you using? Is this IE 11? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#25363?email_source=notifications&email_token=AG6GW4U6VWXKS4U3BNF7ZY3PVRSU7A5CNFSM4GCP2KE2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVPYHCY#issuecomment-492798859>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AG6GW4W3BMHVKA7A3UXY3TDPVRSU7ANCNFSM4GCP2KEQ>.

[flash1293]

I tried reproducing this, but the tooltip is moving to the left of the data point as it should for me. Could you share your vega spec?

[ThiloSchoenfelder]

Hi Joe, when I tried to extract a vega spec for you, I found a few scary things. It happens only on dedicated positions and page scroll positions, and definitely not in the top position. The same layout in a fullscreen did not show the issue. When you reduce the window size and scroll down you can find the issue in two ways. 1. Tooltip above the data point 2. Tooltip right of the data point You will find a few screenshot attached and the vega spec. I see now, why you can can’t reproduce it. 😊 Hope this helps you to reproduce the bug now. Best regards { "$schema": "https://vega.github.io/schema/vega/v3.json", "padding": 5, "data": [ { "name": "table", "values":[ { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "S7y0emoBSsvLjYJdIbb8", "_score" : null, "_source" : { "@timestamp" : "2019-05-02T22:39:46.383Z", "test" : { "duration" : 885241.5, "name" : "FavoriteWorkflow", "Iterations" : 5 }, "Version" : "09.02.10.10", "timestamp" : "2019-05-02T01:48:03.455" }, "sort" : [ 1556836786383 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "Try0emoBSsvLjYJdIbb9", "_score" : null, "_source" : { "@timestamp" : "2019-05-02T22:39:46.395Z", "test" : { "duration" : 299374.75, "name" : "AutotechWorkflow", "Iterations" : 5 }, "Version" : "09.02.10.10", "timestamp" : "2019-05-02T01:48:37.278" }, "sort" : [ 1556836786395 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "Tby0emoBSsvLjYJdIbb9", "_score" : null, "_source" : { "@timestamp" : "2019-05-02T22:39:46.395Z", "test" : { "duration" : null, "name" : "PunchWorkflow", "Iterations" : null }, "Version" : "09.02.10.10", "timestamp" : "2019-05-02T01:48:37.160" }, "sort" : [ 1556836786395 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "TLy0emoBSsvLjYJdIbb9", "_score" : null, "_source" : { "@timestamp" : "2019-05-02T22:39:46.395Z", "test" : { "duration" : 869519.083, "name" : "LaserWorkflow", "Iterations" : 4 }, "Version" : "09.02.10.10", "timestamp" : "2019-05-02T01:48:24.490" }, "sort" : [ 1556836786395 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "O8S0gmoBSsvLjYJdhnH2", "_score" : null, "_source" : { "@timestamp" : "2019-05-04T11:57:10.091Z", "test" : { "duration" : 874578.8, "name" : "FavoriteWorkflow", "Iterations" : 6 }, "Version" : "09.02.10.12", "timestamp" : "2019-05-03T13:39:12.892" }, "sort" : [ 1556971030091 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "PMS0gmoBSsvLjYJdhnH2", "_score" : null, "_source" : { "@timestamp" : "2019-05-04T11:57:10.094Z", "test" : { "duration" : 765240.3, "name" : "LaserWorkflow", "Iterations" : 5 }, "Version" : "09.02.10.12", "timestamp" : "2019-05-03T13:39:34.428" }, "sort" : [ 1556971030094 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "PcS0gmoBSsvLjYJdhnH2", "_score" : null, "_source" : { "@timestamp" : "2019-05-04T11:57:10.094Z", "test" : { "duration" : null, "name" : "PunchWorkflow", "Iterations" : null }, "Version" : "09.02.10.12", "timestamp" : "2019-05-03T13:39:47.175" }, "sort" : [ 1556971030094 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "PsS0gmoBSsvLjYJdhnH2", "_score" : null, "_source" : { "@timestamp" : "2019-05-04T11:57:10.095Z", "test" : { "duration" : 388382.8, "name" : "AutotechWorkflow", "Iterations" : 6 }, "Version" : "09.02.10.12", "timestamp" : "2019-05-03T13:39:47.290" }, "sort" : [ 1556971030095 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "Cc1YjGoBSsvLjYJdIcOI", "_score" : null, "_source" : { "@timestamp" : "2019-05-06T08:52:27.022Z", "test" : { "duration" : 773248.267, "name" : "FavoriteWorkflow", "Iterations" : 4 }, "Version" : "09.02.10.14", "timestamp" : "2019-05-06T10:51:24.727" }, "sort" : [ 1557132747022 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "Cs1YjGoBSsvLjYJdIcOI", "_score" : null, "_source" : { "@timestamp" : "2019-05-06T08:52:27.024Z", "test" : { "duration" : 1040130.0, "name" : "LaserWorkflow", "Iterations" : 6 }, "Version" : "09.02.10.14", "timestamp" : "2019-05-06T10:51:44.697" }, "sort" : [ 1557132747024 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "DM1YjGoBSsvLjYJdIcOI", "_score" : null, "_source" : { "@timestamp" : "2019-05-06T08:52:27.025Z", "test" : { "duration" : 356716.0, "name" : "AutotechWorkflow", "Iterations" : 6 }, "Version" : "09.02.10.14", "timestamp" : "2019-05-06T10:51:56.627" }, "sort" : [ 1557132747025 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "C81YjGoBSsvLjYJdIcOI", "_score" : null, "_source" : { "@timestamp" : "2019-05-06T08:52:27.025Z", "test" : { "duration" : null, "name" : "PunchWorkflow", "Iterations" : null }, "Version" : "09.02.10.14", "timestamp" : "2019-05-06T10:51:56.515" }, "sort" : [ 1557132747025 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "StIikWoBSsvLjYJdgGS9", "_score" : null, "_source" : { "@timestamp" : "2019-05-07T07:11:58.532Z", "test" : { "duration" : 872324.91, "name" : "FavoriteWorkflow", "Iterations" : 8 }, "Version" : "09.02.10.15", "timestamp" : "2019-05-07T09:11:14.090" }, "sort" : [ 1557213118532 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "S9IikWoBSsvLjYJdgGS9", "_score" : null, "_source" : { "@timestamp" : "2019-05-07T07:11:58.534Z", "test" : { "duration" : 960523.197, "name" : "LaserWorkflow", "Iterations" : 8 }, "Version" : "09.02.10.15", "timestamp" : "2019-05-07T09:11:35.919" }, "sort" : [ 1557213118534 ] }, { "_index" : "qstat_perfoadaily", "_type" : "doc", "_id" : "TNIikWoBSsvLjYJdgGS9", "_score" : null, "_source" : { "@timestamp" : "2019-05-07T07:11:58.535Z", "test" : { "duration" : null, "name" : "PunchWorkflow", "Iterations" : null }, "Version" : "09.02.10.15", "timestamp" : "2019-05-07T09:11:48.324" }, "sort" : [ 1557213118535 ] } ], "transform": [ { "type": "formula", "expr": "toDate(datum._source['@timestamp'])", "as": "curTimeStamp" },{ "type": "formula", "expr": "(datum._source.test.Iterations)*50", "as": "scaledIterations" }, { "type": "formula", "expr": "round(toNumber(datum._source.test.duration)/60/10)/100", "as": "duration" } ] }, { "name": "drop", "source": "table", "transform": [ { "type": "filter", "expr": "datum._source.test.duration != null" } ] } ], "scales": [ { "name": "x", "type": "point", "range": "width", "domain": {"data": "table", "field": "_source.Version"} }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "table", "field": "duration"} }, { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "_source.test.name"}, "range": {"scheme": "tableau10"} } ], "axes": [ {"orient": "bottom", "scale": "x", "labelAngle": -45, "labelColor": "lightgray", "labelPadding": 20 }, {"orient": "left", "scale": "y"} ], "marks": [ { "type": "group", "from": { "facet": { "name": "series_drop", "data": "drop", "groupby": "_source.test.name" } }, "marks": [ { "type": "symbol", "from": {"data": "series_drop"}, "encode": { "enter": { "x": {"scale": "x", "field": "_source.Version"}, "y": {"scale": "y", "field": "duration"}, "size": { "field": "scaledIterations"}, "fill": {"scale": "color", "field": "_source.test.name"}, "tooltip": { "signal": "{ 'Set': datum._source.test.name, 'Duration ': datum.duration + ' min','Iterations ': datum._source.test.Iterations, 'Version': datum._source.Version,'TimeStamp': datum._source.timestamp}"}, "fillOpacity": {"value": 0.7}, "stroke": {"value": "black"}, "strokeOpacity": {"value": 0.3}, "strokeWidth": {"value": 1.5} }, "update": { "interpolate": {"value": "linear"}, "defined": {"signal": "datum._source.test.duration != null"} } } } ] } ] }