# HG changeset patch
# User Raphaël Gomès <rgomes@octobus.net>
# Date 1657202606 -7200
#      Thu Jul 07 16:03:26 2022 +0200
# Node ID 970acab72161e6536ffc81e115b8893d943d921a
# Parent  b851950e15a2c9b4d2f497864b1842960c0cc0df
web-ui: add changeset information in tooltip and allow clipboard copy

diff --git a/web-ui/src/lib/Graph.svelte b/web-ui/src/lib/Graph.svelte
--- a/web-ui/src/lib/Graph.svelte
+++ b/web-ui/src/lib/Graph.svelte
@@ -26,17 +26,16 @@
   onMount(() => {
     const ctx = myChart.getContext("2d");
 
-    const labels = [];
     const datasets = [];
 
     const [repoName, results] = data;
-    console.log(repoName);
     let graphData = [];
     for (let result of results) {
-      labels.push(
-        result["bin-env-vars"]["hg"]["version"].split("+")[0]
-      );
-      graphData.push(result["result"]["time"]["median"]);
+      graphData.push({
+        x: result["bin-env-vars"]["hg"]["version"].split("+")[0],
+        y: result["result"]["time"]["median"],
+        node: result["bin-env-vars"]["hg"]["changeset"]["node"],
+      });
     }
     datasets.push({
       label: repoName,
@@ -49,15 +48,38 @@
     new Chart(ctx, {
       type: "line",
       data: {
-        labels: labels,
         datasets: datasets,
       },
       options: {
+        interaction: {
+          mode: "point",
+        },
         scales: {
           y: {
             beginAtZero: true,
           },
         },
+        plugins: {
+          tooltip: {
+            callbacks: {
+              footer: (items) => {
+                return items.map((item) => item.raw["node"]).join("\n");
+              },
+            },
+          },
+        },
+        onClick: (e, elements) => {
+          const nodes = elements
+            .map((el) => {
+              const datasetIndex = el.datasetIndex;
+              const index = el.index;
+
+              return e.chart.data.datasets[datasetIndex].data[index]["node"];
+            })
+            .join("+");
+          if (navigator && navigator.clipboard && navigator.clipboard.writeText)
+            return navigator.clipboard.writeText(nodes);
+        },
       },
     });
   });