From 51807650b205646f00818a3d5f420a16af258e2c Mon Sep 17 00:00:00 2001
From: David de la Iglesia Castro <daviddelaiglesiacastro@gmail.com>
Date: Thu, 1 Dec 2022 16:23:34 +0100
Subject: [PATCH] vega: templates: Update tooltip in linear plot. (#99)

---
 src/dvc_render/vega_templates.py | 88 ++++++++++----------------------
 1 file changed, 27 insertions(+), 61 deletions(-)

diff --git a/src/dvc_render/vega_templates.py b/src/dvc_render/vega_templates.py
index ad42b69..d381b33 100644
--- a/src/dvc_render/vega_templates.py
+++ b/src/dvc_render/vega_templates.py
@@ -635,79 +635,45 @@ class LinearTemplate(Template):
                         "scale": {"zero": False},
                     },
                     "color": {"field": "rev", "type": "nominal"},
+                    "tooltip": [
+                        {"field": "<DVC_METRIC_X>", "type": "quantitative"},
+                        {"field": "<DVC_METRIC_Y>", "type": "quantitative"},
+                        {"field": "rev", "type": "nominal"},
+                    ],
                 },
                 "layer": [
                     {"mark": "line"},
                     {
-                        "selection": {
-                            "label": {
-                                "type": "single",
-                                "nearest": True,
-                                "on": "mouseover",
-                                "encodings": ["x"],
-                                "empty": "none",
-                                "clear": "mouseout",
-                            }
-                        },
-                        "mark": "point",
-                        "encoding": {
-                            "opacity": {
-                                "condition": {
-                                    "selection": "label",
-                                    "value": 1,
-                                },
-                                "value": 0,
-                            }
-                        },
-                    },
-                ],
-            },
-            {
-                "transform": [{"filter": {"selection": "label"}}],
-                "layer": [
-                    {
-                        "mark": {"type": "rule", "color": "gray"},
-                        "encoding": {
-                            "x": {
-                                "field": Template.anchor("x"),
-                                "type": "quantitative",
-                            }
-                        },
+                        "transform": [
+                            {"filter": {"param": "hover", "empty": False}}
+                        ],
+                        "mark": "circle",
                     },
                     {
-                        "encoding": {
-                            "text": {
-                                "type": "quantitative",
-                                "field": Template.anchor("y"),
-                            },
-                            "x": {
-                                "field": Template.anchor("x"),
-                                "type": "quantitative",
-                            },
-                            "y": {
-                                "field": Template.anchor("y"),
-                                "type": "quantitative",
-                            },
-                        },
-                        "layer": [
+                        "mark": "rule",
+                        "params": [
                             {
-                                "mark": {
-                                    "type": "text",
-                                    "align": "left",
-                                    "dx": 5,
-                                    "dy": -5,
-                                },
-                                "encoding": {
-                                    "color": {
-                                        "type": "nominal",
-                                        "field": "rev",
-                                    }
+                                "name": "hover",
+                                "select": {
+                                    "type": "point",
+                                    "on": "mouseover",
+                                    "nearest": True,
                                 },
                             }
                         ],
+                        "encoding": {
+                            "color": {
+                                "condition": {
+                                    "param": "hover",
+                                    "empty": False,
+                                    "value": "1",
+                                },
+                                "value": "transparent",
+                            }
+                        },
                     },
                 ],
-            },
+            }
         ],
     }