From 793b71998380d4f00d77df0e5597ba30071d8d07 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Thu, 21 May 2026 21:15:44 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20stable=20power=20curve=20colors=20?=
 =?UTF-8?q?=E2=80=94=20buttons=20and=20chart=20lines=20always=20match?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/MmpChart.svelte | 31 +++++++++++++++++------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/site/src/components/MmpChart.svelte b/site/src/components/MmpChart.svelte
index 6b34def..48d6176 100644
--- a/site/src/components/MmpChart.svelte
+++ b/site/src/components/MmpChart.svelte
@@ -32,8 +32,18 @@
     '#22d3ee', // cyan-400
   ];
 
-  function curveColor(key: RangeKey, index: number): string {
-    return PALETTE[index % PALETTE.length];
+  const allRangeKeys = [
+    ...Object.keys(PRESET_LABELS),
+    ...seasons.map(s => s.name),
+  ];
+
+  // Stable color per key — based on position in allRangeKeys, not in the active selection
+  const RANGE_COLOR: Record<string, string> = Object.fromEntries(
+    allRangeKeys.map((k, i) => [k, PALETTE[i % PALETTE.length]])
+  );
+
+  function curveColor(key: RangeKey): string {
+    return RANGE_COLOR[key] ?? PALETTE[0];
   }
 
   // ── Record-holder lookup ───────────────────────────────────────────────────
@@ -121,7 +131,7 @@
     });
   });
 
-  $: colorMap = Object.fromEntries(selectedKeys.map((k, i) => [k, curveColor(k, i)]));
+  $: colorMap = Object.fromEntries(selectedKeys.map(k => [k, curveColor(k)]));
 
   function getAxisColor() {
     return document.documentElement.getAttribute('data-theme') === 'light' ? '#52525b' : '#a1a1aa';
@@ -155,7 +165,7 @@
       },
       color: {
         domain: selectedKeys,
-        range: selectedKeys.map((k, i) => curveColor(k, i)),
+        range: selectedKeys.map(k => curveColor(k)),
         legend: selectedKeys.length > 1,
       },
       marks: [
@@ -222,11 +232,6 @@
     selectedRanges = next;
   }
 
-  const allRangeKeys = [
-    ...Object.keys(PRESET_LABELS),
-    ...seasons.map(s => s.name),
-  ];
-
   // ── Records table ──────────────────────────────────────────────────────────
 
   let tableRange: RangeKey = 'all_time';
@@ -254,9 +259,9 @@
 
 <!-- Range selector pills -->
 <div class="flex flex-wrap gap-2 mb-4">
-  {#each allRangeKeys as key, i}
+  {#each allRangeKeys as key}
     {@const active = selectedRanges.has(key)}
-    {@const color = curveColor(key, i)}
+    {@const color = curveColor(key)}
     <button
       on:click={() => toggleRange(key)}
       class="px-3 py-1 rounded-full text-sm font-medium border transition-colors"
@@ -282,12 +287,12 @@
     <div class="flex items-center justify-between mb-3">
       <h4 class="text-xs font-semibold text-zinc-400 uppercase tracking-wide">Power records</h4>
       <div class="flex gap-1">
-        {#each allRangeKeys as key, i}
+        {#each allRangeKeys as key}
           <button
             on:click={() => tableRange = key}
             class="px-2.5 py-1 rounded-full text-xs font-medium border transition-colors"
             style={tableRange === key
-              ? `background:${curveColor(key, i)}22; border-color:${curveColor(key, i)}; color:${curveColor(key, i)}`
+              ? `background:${curveColor(key)}22; border-color:${curveColor(key)}; color:${curveColor(key)}`
               : 'background:transparent; border-color:#3f3f46; color:#71717a'}
           >{PRESET_LABELS[key] ?? key}</button>
         {/each}