From 2b9e080b4c2a56842260882e1b950daff2eba621 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Thu, 14 May 2026 16:07:57 +0200
Subject: [PATCH] Explore: opacity slider heatmap-only; lines mode width-only
 at 100% opacity

---
 site/src/components/Explore.svelte | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/site/src/components/Explore.svelte b/site/src/components/Explore.svelte
index 97fce3a..0572735 100644
--- a/site/src/components/Explore.svelte
+++ b/site/src/components/Explore.svelte
@@ -153,7 +153,13 @@
   function _updateHeatPaint(width: number, opacityPct: number) {
     if (!map) return;
     const p = _heatPaint(width, opacityPct);
-    for (const id of ['explore-lines', 'explore-heat-global', ...HEAT_TYPES.map(t => `explore-heat-${t}`)]) {
+    // Lines layer: width from slider, opacity always full
+    if (map.getLayer('explore-lines')) {
+      map.setPaintProperty('explore-lines', 'line-width',   p['line-width']);
+      map.setPaintProperty('explore-lines', 'line-opacity', 1);
+    }
+    // Heat layers: both width and opacity from sliders
+    for (const id of ['explore-heat-global', ...HEAT_TYPES.map(t => `explore-heat-${t}`)]) {
       if (!map.getLayer(id)) continue;
       map.setPaintProperty(id, 'line-width',   p['line-width']);
       map.setPaintProperty(id, 'line-opacity', p['line-opacity']);
@@ -324,17 +330,17 @@
           <button class="pill small" class:active={heatmapMode === 'global'} onclick={() => heatmapMode = 'global'}>Global</button>
           <button class="pill small" class:active={heatmapMode === 'bytype'} onclick={() => heatmapMode = 'bytype'}>By type</button>
         </div>
+        <div class="slider-row">
+          <span class="slider-label">Opacity</span>
+          <input type="range" min="3" max="30" step="1" class="slider" bind:value={heatOpacityPct} />
+          <span class="slider-val">{heatOpacityPct}%</span>
+        </div>
       {/if}
       <div class="slider-row">
         <span class="slider-label">Width</span>
         <input type="range" min="2" max="12" step="1" class="slider" bind:value={heatWidth} />
         <span class="slider-val">{heatWidth}</span>
       </div>
-      <div class="slider-row">
-        <span class="slider-label">Opacity</span>
-        <input type="range" min="3" max="30" step="1" class="slider" bind:value={heatOpacityPct} />
-        <span class="slider-val">{heatOpacityPct}%</span>
-      </div>
     </section>
 
     <!-- Stats -->