From 10b9291221010b05c6a134bc7e3f34fe2b3238a9 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Fri, 5 Jun 2026 09:43:35 +0200
Subject: [PATCH] fix(charts): drop the color dot from sankey tooltip context

The hover highlight on the diagram already identifies the ribbon; the
swatch repeated it inside the card. Names alone keep the context line
quieter.
---
 .../controllers/sankey_chart_controller.js        | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/javascript/controllers/sankey_chart_controller.js b/app/javascript/controllers/sankey_chart_controller.js
index 4cffaa938..60f01143f 100644
--- a/app/javascript/controllers/sankey_chart_controller.js
+++ b/app/javascript/controllers/sankey_chart_controller.js
@@ -452,7 +452,6 @@ export default class extends Controller {
           d.value,
           d.percentage,
           this.#tooltipContext(
-            d.source.color,
             `${this.#esc(d.source.name)} → ${this.#esc(d.target.name)}`,
           ),
         );
@@ -480,7 +479,7 @@ export default class extends Controller {
           event,
           d.value,
           d.percentage,
-          this.#tooltipContext(d.color, this.#esc(d.name)),
+          this.#tooltipContext(this.#esc(d.name)),
         );
       })
       .on("mousemove", (event) => this.#updateTooltipPosition(event))
@@ -509,7 +508,7 @@ export default class extends Controller {
           event,
           d.value,
           d.percentage,
-          this.#tooltipContext(d.color, this.#esc(d.name)),
+          this.#tooltipContext(this.#esc(d.name)),
         );
       })
       .on("mousemove", (event) => this.#updateTooltipPosition(event))
@@ -547,11 +546,11 @@ export default class extends Controller {
     );
   }
 
-  // Context line shared by node and link tooltips: a swatch dot tying the
-  // card to the hovered ribbon/node color, plus the (escaped) name(s).
-  #tooltipContext(color, label) {
-    const dot = `<span class="inline-block shrink-0 rounded-full" style="width: 8px; height: 8px; background: ${this.#esc(color || "var(--color-gray-400)")};"></span>`;
-    return `<div class="flex items-center gap-1.5 text-xs text-secondary mb-1">${dot}<span class="min-w-0 truncate">${label}</span></div>`;
+  // Context line shared by node and link tooltips: the (escaped) name(s) of
+  // what's hovered. No color swatch — the hover highlight on the diagram
+  // itself already says which ribbon the card belongs to.
+  #tooltipContext(label) {
+    return `<div class="text-xs text-secondary mb-1 truncate">${label}</div>`;
   }
 
   #showTooltip(event, value, percentage, contextHtml = null) {