From 6bc77486f1d2c4e9f619b5fa5d15e54630dc3150 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Sun, 17 May 2026 09:32:31 +0200
Subject: [PATCH] =?UTF-8?q?Segments:=20color=20track=20green=E2=86=92red?=
 =?UTF-8?q?=20along=20direction=20of=20travel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/SegmentDetail.svelte |  6 +++++-
 site/src/components/SegmentsView.svelte  | 11 +++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/site/src/components/SegmentDetail.svelte b/site/src/components/SegmentDetail.svelte
index b76f6b6..e58f12e 100644
--- a/site/src/components/SegmentDetail.svelte
+++ b/site/src/components/SegmentDetail.svelte
@@ -109,6 +109,7 @@
     map.on('load', () => {
       map.addSource('seg', {
         type: 'geojson',
+        lineMetrics: true,
         data: {
           type: 'Feature',
           geometry: {
@@ -119,7 +120,10 @@
       });
       map.addLayer({ id: 'seg-line', type: 'line', source: 'seg',
         layout: { 'line-cap': 'round', 'line-join': 'round' },
-        paint: { 'line-color': '#f59e0b', 'line-width': 5 } });
+        paint: {
+          'line-gradient': ['interpolate', ['linear'], ['line-progress'], 0, '#22c55e', 1, '#ef4444'],
+          'line-width': 5,
+        } });
 
       // Start/end markers
       const start = segment!.polyline[0];
diff --git a/site/src/components/SegmentsView.svelte b/site/src/components/SegmentsView.svelte
index 235b6ef..bba9223 100644
--- a/site/src/components/SegmentsView.svelte
+++ b/site/src/components/SegmentsView.svelte
@@ -25,8 +25,7 @@
   let fetchTimer: ReturnType<typeof setTimeout> | null = null;
 
   const TILE_STYLE = 'https://tiles.openfreemap.org/styles/positron';
-  const SEG_COLOR  = '#f59e0b';
-  const SEG_SEL    = '#3b82f6';
+  const SEG_GRADIENT = ['interpolate', ['linear'], ['line-progress'], 0, '#22c55e', 1, '#ef4444'];
 
   $: selectedSeg = segments.find(s => s.id === selectedId) ?? null;
 
@@ -44,6 +43,7 @@
     map.on('load', () => {
       map.addSource('segments', {
         type: 'geojson',
+        lineMetrics: true,
         data: { type: 'FeatureCollection', features: [] },
       });
 
@@ -54,7 +54,7 @@
       map.addLayer({ id: 'seg-line', type: 'line', source: 'segments',
         layout: { 'line-cap': 'round', 'line-join': 'round' },
         paint: {
-          'line-color': ['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR],
+          'line-gradient': SEG_GRADIENT,
           'line-width': ['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3],
         },
       });
@@ -123,18 +123,13 @@
         properties: { id: s.id, name: s.name },
       })),
     });
-    // Repaint selection colour
     if (map.getLayer('seg-line')) {
-      map.setPaintProperty('seg-line', 'line-color',
-        ['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR]);
       map.setPaintProperty('seg-line', 'line-width',
         ['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3]);
     }
   }
 
   $: if (map?.getLayer('seg-line') && selectedId !== undefined) {
-    map.setPaintProperty('seg-line', 'line-color',
-      ['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR]);
     map.setPaintProperty('seg-line', 'line-width',
       ['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3]);
   }