fix(elevation): smooth slope coloring to ignore short noise spikes

Small elevation jitter between very close samples looked like ±10% slopes, and the bin-painter then stretched that color far past the short noisy bit, so hundreds
of meters got painted as steep climb or decline. Now slopes are measured over a fixed 30m forward window, so the colors show real sustained gradients. Applied in
buildInclineDetail (map) and drawElevationArea (chart).

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

Author: karussell

src/pathDetails/elevationWidget/ChartRenderer.ts

@@ -7,6 +7,7 @@ import {
     formatDetailTick,
 } from './axisUtils'
 import { getSlopeColor } from './colors'
+import { computeWindowedSlopes } from './pathDetailData'
 
 const DEFAULT_MARGIN = { top: 10, right: 15, bottom: 26, left: 48 }
 const DETAIL_BAR_HEIGHT = 50
@@ -447,18 +448,20 @@ export default class ChartRenderer {
         // 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.
+        // Slopes are computed over a fixed forward distance (see computeWindowedSlopes)
+        // so polyline-quantization noise can't paint long bins as steep climbs/descents.
         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 slopes = computeWindowedSlopes(elev)
         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 slope = slopes[i]
             const absSlope = Math.abs(slope)
             if (absSlope > maxAbsSlope) {
                 maxAbsSlope = absSlope

src/pathDetails/elevationWidget/pathDetailData.ts

@@ -23,6 +23,28 @@ export interface PathLike {
     distance: number
 }
 
+// Distance window (meters) for slope computation. Encoded polylines quantize
+// elevation to ~0.01m, which makes ~1m bumps over <20m sub-segments read as
+// 10%+ slopes. Computing slope over a fixed forward distance filters that
+// noise while preserving real sustained gradients (typical climbs span ≥100m).
+export const SLOPE_HORIZON_M = 30
+
+// Per-segment slope (%) using a forward distance window of SLOPE_HORIZON_M.
+// Returned array has length elevation.length - 1, indexed by segment start.
+export function computeWindowedSlopes(elevation: ElevationPoint[]): number[] {
+    const n = elevation.length
+    if (n < 2) return []
+    const slopes: number[] = new Array(n - 1)
+    let j = 1
+    for (let i = 0; i < n - 1; i++) {
+        if (j < i + 1) j = i + 1
+        while (j < n - 1 && elevation[j].distance - elevation[i].distance < SLOPE_HORIZON_M) j++
+        const dist = elevation[j].distance - elevation[i].distance
+        slopes[i] = dist > 0 ? (100 * (elevation[j].elevation - elevation[i].elevation)) / dist : 0
+    }
+    return slopes
+}
+
 export function extractElevationPoints(coordinates: number[][]): ElevationPoint[] {
     if (coordinates.length === 0) return []
     const has3D = coordinates[0].length >= 3
@@ -298,12 +320,12 @@ export function buildInclineDetail(elevation: ElevationPoint[]): ChartPathDetail
     }
 
     // Compute slope between consecutive points and assign incline colors
+    const slopes = computeWindowedSlopes(elevation)
     const raw: PathDetailSegment[] = []
     for (let i = 0; i < elevation.length - 1; i++) {
         const p = elevation[i]
         const q = elevation[i + 1]
-        const dist = q.distance - p.distance
-        const slopePercent = dist > 0 ? ((q.elevation - p.elevation) / dist) * 100 : 0
+        const slopePercent = slopes[i]
         const color = getSlopeColor(slopePercent)
         raw.push({
             fromDistance: p.distance,

test/pathDetails/elevationWidget/pathDetailData.test.ts

@@ -4,7 +4,11 @@ import {
     transformPathDetail,
     sanitizeNumericValues,
     buildChartData,
+    buildInclineDetail,
+    SLOPE_HORIZON_M,
 } from '@/pathDetails/elevationWidget/pathDetailData'
+import { getSlopeColor } from '@/pathDetails/elevationWidget/colors'
+import type { ElevationPoint } from '@/pathDetails/elevationWidget/types'
 
 describe('pathDetailData', () => {
     describe('extractElevationPoints', () => {
@@ -285,4 +289,67 @@ describe('pathDetailData', () => {
             expect(result.alternativeElevations[0]).toHaveLength(3)
         })
     })
+
+    describe('buildInclineDetail color binning', () => {
+        // Reproduces the GraphHopper-encoded-polyline noise pattern: a few sample points
+        // that are close together (<20m) with ~1m elevation jitter from quantization,
+        // surrounded by long, gently uphill sub-segments. Without windowed slopes the
+        // tiny jitter sub-segment would paint a 600m+ stretch as a steep decline.
+        it('does not paint a long stretch as steep decline due to a single short noisy sub-segment', () => {
+            const elev: ElevationPoint[] = [
+                { distance: 0, elevation: 200, lng: 0, lat: 0 },
+                { distance: 264, elevation: 207, lng: 0, lat: 0 }, // +2.65% over 264m (real gentle climb)
+                { distance: 275, elevation: 206, lng: 0, lat: 0 }, // 1m drop over 11m → -9% (noise)
+                { distance: 880, elevation: 220, lng: 0, lat: 0 }, // +2.31% over 605m
+                { distance: 970, elevation: 220, lng: 0, lat: 0 }, // flat
+                { distance: 985, elevation: 218, lng: 0, lat: 0 }, // 2m drop over 15m → -13% (noise)
+                { distance: 1300, elevation: 222, lng: 0, lat: 0 }, // +1.27% over 315m
+            ]
+            const detail = buildInclineDetail(elev)
+
+            // Compute total distance painted in each "decline" color category and the
+            // overall direction of every painted segment. No segment longer than 100m
+            // should ever be colored as decline (≤-6%) when the section actually climbs.
+            const declineColors = new Set([getSlopeColor(-7), getSlopeColor(-15)])
+            for (const seg of detail.segments) {
+                const span = seg.toDistance - seg.fromDistance
+                if (declineColors.has(seg.color) && span > 50) {
+                    // Find the actual elevation change over this segment using the source data
+                    const eAtFrom = interpElev(elev, seg.fromDistance)
+                    const eAtTo = interpElev(elev, seg.toDistance)
+                    const overall = ((eAtTo - eAtFrom) / span) * 100
+                    expect(overall).toBeLessThan(0) // decline coloring should require an actual decline
+                }
+            }
+        })
+
+        it('still colors a real sustained descent as decline', () => {
+            // Continuous -8% over 500m — every sample is part of a real steep descent.
+            const elev: ElevationPoint[] = []
+            for (let d = 0; d <= 500; d += 25) {
+                elev.push({ distance: d, elevation: 200 - 0.08 * d, lng: 0, lat: 0 })
+            }
+            const detail = buildInclineDetail(elev)
+            const declineColor = getSlopeColor(-7) // matches the -10..-6% bucket
+            const declineSpan = detail.segments
+                .filter(s => s.color === declineColor)
+                .reduce((sum, s) => sum + (s.toDistance - s.fromDistance), 0)
+            // Most of the route should be painted as decline (allow a small horizon tail-off)
+            expect(declineSpan).toBeGreaterThan(500 - SLOPE_HORIZON_M * 2)
+        })
+    })
 })
+
+// Linear interpolation of elevation at a given distance along the series.
+function interpElev(elev: ElevationPoint[], distance: number): number {
+    if (elev.length === 0) return 0
+    if (distance <= elev[0].distance) return elev[0].elevation
+    if (distance >= elev[elev.length - 1].distance) return elev[elev.length - 1].elevation
+    for (let i = 0; i < elev.length - 1; i++) {
+        if (distance >= elev[i].distance && distance <= elev[i + 1].distance) {
+            const t = (distance - elev[i].distance) / (elev[i + 1].distance - elev[i].distance)
+            return elev[i].elevation + t * (elev[i + 1].elevation - elev[i].elevation)
+        }
+    }
+    return 0
+}