fix(elevation): color slopes by net per-bin grade, consistent with the popup

Reintroduces noise handling (dropped by the preceding revert) without a fixed
smoothing window, so the slope colors stay in sync with the hover popup, which
reports the exact local grade.

The area fill now colors each bin by its net (distance-weighted) grade instead
of the steepest sample in the bin. At normal zoom each bin is a single segment,
so the color equals the popup grade (a steep dip reads dark blue and the climb
out of it reads as a climb, not blue). When many points fall on one pixel the
net grade averages them, so a single noisy sample can no longer paint a whole
pixel as a steep climb/descent -- the artifact the reverted commit addressed,
now handled per-pixel instead of over a fixed 30m window that flattened real
short grades and disagreed with the popup.

The bin/merge logic is extracted into computeElevationColorRuns (pure, unit
tested); drawElevationArea just computes the pixel bin width and draws. The map
(buildInclineDetail) likewise colors each segment by its exact grade.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: karussell

src/pathDetails/elevationWidget/ChartRenderer.ts

@@ -6,7 +6,7 @@ import {
     computeDetailYRange,
     formatDetailTick,
 } from './axisUtils'
-import { getSlopeColor } from './colors'
+import { computeElevationColorRuns } from './pathDetailData'
 
 const DEFAULT_MARGIN = { top: 10, right: 15, bottom: 26, left: 48 }
 const DETAIL_BAR_HEIGHT = 50
@@ -442,48 +442,14 @@ export default class ChartRenderer {
         }
 
         // For long routes the elevation data can have thousands of points, leading to
-        // hundreds of tiny color-change polygons that create visual noise. To avoid this
-        // we quantize into bins of at least MIN_BIN_PX pixels wide. Within each bin we
-        // pick the steepest slope to determine the color — this preserves steep sections
-        // visually even when they span only a few data points. Adjacent bins with the
-        // same color are then merged into single polygons to minimize draw calls.
+        // hundreds of tiny color-change polygons that create visual noise. We quantize
+        // into bins at least MIN_BIN_PX pixels wide, colored by net grade and merged by
+        // color (see computeElevationColorRuns), then draw one polygon per run.
         const totalDist = elev[elev.length - 1].distance
         const plotWidth = xScale(totalDist) - xScale(0)
         const MIN_BIN_PX = 1
         const minBinDist = (MIN_BIN_PX / plotWidth) * totalDist
-        const bins: { fromIdx: number; toIdx: number; color: string }[] = []
-        let binStart = 0
-        let maxAbsSlope = 0
-        let steepestSlope = 0
-
-        for (let i = 0; i < elev.length - 1; i++) {
-            const segDist = elev[i + 1].distance - elev[i].distance
-            const slope = segDist > 0 ? (100 * (elev[i + 1].elevation - elev[i].elevation)) / segDist : 0
-            const absSlope = Math.abs(slope)
-            if (absSlope > maxAbsSlope) {
-                maxAbsSlope = absSlope
-                steepestSlope = slope
-            }
-
-            const binSpan = elev[i + 1].distance - elev[binStart].distance
-            if (binSpan >= minBinDist || i === elev.length - 2) {
-                bins.push({ fromIdx: binStart, toIdx: i + 1, color: getSlopeColor(steepestSlope) })
-                binStart = i + 1
-                maxAbsSlope = 0
-                steepestSlope = 0
-            }
-        }
-
-        // Merge consecutive bins with the same color
-        const runs: { fromIdx: number; toIdx: number; color: string }[] = []
-        for (const bin of bins) {
-            const last = runs[runs.length - 1]
-            if (last && last.color === bin.color) {
-                last.toIdx = bin.toIdx
-            } else {
-                runs.push({ ...bin })
-            }
-        }
+        const runs = computeElevationColorRuns(elev, minBinDist)
 
         // Draw each run as a single filled polygon
         for (const run of runs) {

src/pathDetails/elevationWidget/pathDetailData.ts

@@ -23,6 +23,46 @@ export interface PathLike {
     distance: number
 }
 
+export interface ElevationColorRun {
+    fromIdx: number
+    toIdx: number
+    color: string
+}
+
+// Quantize an elevation profile into colored runs for the area fill. Points are
+// grouped into bins at least minBinDist meters wide and each bin is colored by
+// its net (distance-weighted) grade — total elevation change over the bin's
+// distance. At normal zoom a bin is a single segment, so the color equals the
+// grade the hover popup reports there; when many points share one pixel the net
+// grade averages them, so a single noisy sample can't paint the whole pixel as a
+// steep climb/descent. Consecutive bins with the same color are merged so the
+// renderer draws one polygon per run. Indices refer to the input array.
+export function computeElevationColorRuns(elevation: ElevationPoint[], minBinDist: number): ElevationColorRun[] {
+    const bins: ElevationColorRun[] = []
+    let binStart = 0
+    for (let i = 0; i < elevation.length - 1; i++) {
+        const binSpan = elevation[i + 1].distance - elevation[binStart].distance
+        if (binSpan >= minBinDist || i === elevation.length - 2) {
+            const slope =
+                binSpan > 0 ? (100 * (elevation[i + 1].elevation - elevation[binStart].elevation)) / binSpan : 0
+            bins.push({ fromIdx: binStart, toIdx: i + 1, color: getSlopeColor(slope) })
+            binStart = i + 1
+        }
+    }
+
+    // Merge consecutive bins with the same color.
+    const runs: ElevationColorRun[] = []
+    for (const bin of bins) {
+        const last = runs[runs.length - 1]
+        if (last && last.color === bin.color) {
+            last.toIdx = bin.toIdx
+        } else {
+            runs.push({ ...bin })
+        }
+    }
+    return runs
+}
+
 export function extractElevationPoints(coordinates: number[][]): ElevationPoint[] {
     if (coordinates.length === 0) return []
     const has3D = coordinates[0].length >= 3
@@ -297,7 +337,7 @@ export function buildInclineDetail(elevation: ElevationPoint[]): ChartPathDetail
         return { key: '_incline', label: 'Incline', type: 'bars', segments: [], legend }
     }
 
-    // Compute slope between consecutive points and assign incline colors
+    // Color each segment by its exact grade so the map matches the elevation popup.
     const raw: PathDetailSegment[] = []
     for (let i = 0; i < elevation.length - 1; i++) {
         const p = elevation[i]

test/pathDetails/elevationWidget/pathDetailData.test.ts

@@ -4,7 +4,14 @@ import {
     transformPathDetail,
     sanitizeNumericValues,
     buildChartData,
+    computeElevationColorRuns,
 } from '@/pathDetails/elevationWidget/pathDetailData'
+import { ElevationPoint } from '@/pathDetails/elevationWidget/types'
+
+// Create a list of mock ElevationPoint objects from (distance, elevation) pairs.
+function pts(pairs: [number, number][]): ElevationPoint[] {
+    return pairs.map(([distance, elevation]) => ({ distance, elevation, lng: 0, lat: 0 }))
+}
 
 describe('pathDetailData', () => {
     describe('extractElevationPoints', () => {
@@ -182,6 +189,69 @@ describe('pathDetailData', () => {
         })
     })
 
+    describe('computeElevationColorRuns', () => {
+        const GREEN = '#2E7D32' // -6..3%
+        const BLUE = '#42A5F5' // -10..-6%
+        const DARK_BLUE = '#1565C0' // < -10%
+        const RED = '#F44336' // 6..10%
+
+        it('returns no runs for fewer than two points', () => {
+            expect(computeElevationColorRuns([], 1)).toEqual([])
+            expect(computeElevationColorRuns(pts([[0, 100]]), 1)).toEqual([])
+        })
+
+        it('colors each segment by its exact grade when bins are per-segment (the reported case)', () => {
+            // Steep descent into a dip, then a climb out. With a tiny bin width every
+            // segment is its own bin, so the color is the segment's own grade: the climb
+            // must read as a climb, not inherit the neighboring descent's color.
+            const runs = computeElevationColorRuns(
+                pts([
+                    [0, 100],
+                    [10, 98.5], // -15% -> dark blue
+                    [20, 99.3], // +8%  -> red (uphill)
+                ]),
+                0.001,
+            )
+            expect(runs).toEqual([
+                { fromIdx: 0, toIdx: 1, color: DARK_BLUE },
+                { fromIdx: 1, toIdx: 2, color: RED },
+            ])
+        })
+
+        it('averages a single noisy sample away inside a wide bin', () => {
+            // 60m of flat ground with one +1m spike. The raw grade at the spike is ±10%,
+            // but a bin spanning the whole route nets to 0% -> flat, so the spike cannot
+            // paint the pixel steep.
+            const runs = computeElevationColorRuns(
+                pts([
+                    [0, 100],
+                    [10, 100],
+                    [20, 101], // spike
+                    [30, 100],
+                    [40, 100],
+                    [50, 100],
+                    [60, 100],
+                ]),
+                1000,
+            )
+            expect(runs).toEqual([{ fromIdx: 0, toIdx: 6, color: GREEN }])
+        })
+
+        it('merges a sustained steep grade into one run', () => {
+            // Steady -8% descent: every per-segment bin is blue, so they merge.
+            const runs = computeElevationColorRuns(
+                pts([
+                    [0, 100],
+                    [10, 99.2],
+                    [20, 98.4],
+                    [30, 97.6],
+                ]),
+                0.001,
+            )
+            expect(runs).toEqual([{ fromIdx: 0, toIdx: 3, color: BLUE }])
+        })
+    })
+
     describe('buildChartData', () => {
         it('builds complete chart data', () => {
             const path = {