All tweaks added

frontend/src/components/activity/ActivityMap.jsx

@@ -2,7 +2,6 @@ import { useEffect, useRef } from 'react'
 import L from 'leaflet'
 import { sportColor } from '../../utils/format'
 
-// Fix Leaflet default icon issue with bundlers
 delete L.Icon.Default.prototype._getIconUrl
 L.Icon.Default.mergeOptions({
   iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
@@ -10,103 +9,87 @@ L.Icon.Default.mergeOptions({
   shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
 })
 
+const TILE_LAYERS = {
+  dark: {
+    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> © <a href="https://carto.com/">CARTO</a>',
+  },
+  street: {
+    url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> © <a href="https://carto.com/">CARTO</a>',
+  },
+  satellite: {
+    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+    attribution: '© <a href="https://www.esri.com/">Esri</a>',
+  },
+}
+
 function decodePolyline(encoded) {
-  // Simple polyline decoder
   const coords = []
   let index = 0, lat = 0, lng = 0
-
   while (index < encoded.length) {
     let b, shift = 0, result = 0
-    do {
-      b = encoded.charCodeAt(index++) - 63
-      result |= (b & 0x1f) << shift
-      shift += 5
-    } while (b >= 0x20)
+    do { b = encoded.charCodeAt(index++) - 63; result |= (b & 0x1f) << shift; shift += 5 } while (b >= 0x20)
     lat += (result & 1) ? ~(result >> 1) : result >> 1
-
     shift = 0; result = 0
-    do {
-      b = encoded.charCodeAt(index++) - 63
-      result |= (b & 0x1f) << shift
-      shift += 5
-    } while (b >= 0x20)
+    do { b = encoded.charCodeAt(index++) - 63; result |= (b & 0x1f) << shift; shift += 5 } while (b >= 0x20)
     lng += (result & 1) ? ~(result >> 1) : result >> 1
-
     coords.push([lat / 1e5, lng / 1e5])
   }
   return coords
 }
 
-export default function ActivityMap({ polyline, dataPoints, hoveredDistance, sportType }) {
+export default function ActivityMap({ polyline, dataPoints, hoveredDistance, sportType, mapType = 'dark' }) {
   const mapRef = useRef(null)
   const mapInstanceRef = useRef(null)
   const markerRef = useRef(null)
   const trackRef = useRef(null)
+  const tileLayerRef = useRef(null)
 
   useEffect(() => {
     if (!mapRef.current || mapInstanceRef.current) return
-
-    mapInstanceRef.current = L.map(mapRef.current, {
-      zoomControl: true,
-      attributionControl: true,
-    })
-
-    // Use CartoDB dark tiles (no API key needed)
-    L.tileLayer(
-      'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
-      {
-        attribution: '© <a href="https://www.openstreetmap.org/copyright">OSM</a> © <a href="https://carto.com/">CARTO</a>',
-        maxZoom: 19,
-      }
-    ).addTo(mapInstanceRef.current)
-
-    return () => {
-      mapInstanceRef.current?.remove()
-      mapInstanceRef.current = null
-    }
+    mapInstanceRef.current = L.map(mapRef.current, { zoomControl: true, attributionControl: true })
+    const tile = TILE_LAYERS['dark']
+    tileLayerRef.current = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: 19 })
+      .addTo(mapInstanceRef.current)
+    return () => { mapInstanceRef.current?.remove(); mapInstanceRef.current = null }
   }, [])
 
-  // Draw route when polyline changes
+  // Switch tile layer when mapType changes
+  useEffect(() => {
+    if (!mapInstanceRef.current) return
+    const tile = TILE_LAYERS[mapType] || TILE_LAYERS.dark
+    if (tileLayerRef.current) {
+      tileLayerRef.current.remove()
+    }
+    tileLayerRef.current = L.tileLayer(tile.url, { attribution: tile.attribution, maxZoom: 19 })
+      .addTo(mapInstanceRef.current)
+  }, [mapType])
+
+  // Draw route
   useEffect(() => {
     if (!mapInstanceRef.current || !polyline) return
-
-    if (trackRef.current) {
-      trackRef.current.remove()
-    }
-
+    if (trackRef.current) trackRef.current.remove()
     const coords = decodePolyline(polyline)
     if (!coords.length) return
-
-    trackRef.current = L.polyline(coords, {
-      color: sportColor(sportType),
-      weight: 3,
-      opacity: 0.9,
-    }).addTo(mapInstanceRef.current)
-
+    trackRef.current = L.polyline(coords, { color: sportColor(sportType), weight: 3, opacity: 0.9 })
+      .addTo(mapInstanceRef.current)
     mapInstanceRef.current.fitBounds(trackRef.current.getBounds(), { padding: [20, 20] })
-
-    // Start/end markers
     if (coords.length > 0) {
-      const startIcon = L.divIcon({
-        html: '<div style="width:12px;height:12px;background:#22c55e;border:2px solid white;border-radius:50%"></div>',
+      const dot = (color) => L.divIcon({
+        html: `<div style="width:12px;height:12px;background:${color};border:2px solid white;border-radius:50%"></div>`,
         iconSize: [12, 12], iconAnchor: [6, 6], className: '',
       })
-      const endIcon = L.divIcon({
-        html: '<div style="width:12px;height:12px;background:#ef4444;border:2px solid white;border-radius:50%"></div>',
-        iconSize: [12, 12], iconAnchor: [6, 6], className: '',
-      })
-      L.marker(coords[0], { icon: startIcon }).addTo(mapInstanceRef.current)
-      L.marker(coords[coords.length - 1], { icon: endIcon }).addTo(mapInstanceRef.current)
+      L.marker(coords[0], { icon: dot('#22c55e') }).addTo(mapInstanceRef.current)
+      L.marker(coords[coords.length - 1], { icon: dot('#ef4444') }).addTo(mapInstanceRef.current)
     }
   }, [polyline, sportType])
 
-  // Move position marker when timeline is hovered
+  // Position marker on timeline hover
   useEffect(() => {
     if (!mapInstanceRef.current || !dataPoints || !hoveredDistance) return
-
     const point = dataPoints.find(p => p.distance_m >= hoveredDistance)
     if (!point?.latitude || !point?.longitude) return
-
     if (markerRef.current) {
       markerRef.current.setLatLng([point.latitude, point.longitude])
     } else {
@@ -114,8 +97,7 @@ export default function ActivityMap({ polyline, dataPoints, hoveredDistance, spo
         html: '<div style="width:14px;height:14px;background:#fff;border:3px solid #3b82f6;border-radius:50%;box-shadow:0 0 6px rgba(59,130,246,0.8)"></div>',
         iconSize: [14, 14], iconAnchor: [7, 7], className: '',
       })
-      markerRef.current = L.marker([point.latitude, point.longitude], { icon })
-        .addTo(mapInstanceRef.current)
+      markerRef.current = L.marker([point.latitude, point.longitude], { icon }).addTo(mapInstanceRef.current)
     }
   }, [hoveredDistance, dataPoints])
 

frontend/src/components/activity/LapTable.jsx

@@ -1,4 +1,4 @@
-import { formatDuration, formatDistance, formatPace, formatHeartRate } from '../../utils/format'
+import { formatDuration, formatDistance, formatPace, formatHeartRate, formatCadence } from '../../utils/format'
 
 export default function LapTable({ laps, sportType }) {
   return (
@@ -26,7 +26,7 @@ export default function LapTable({ laps, sportType }) {
                 <span className="text-red-400">{formatHeartRate(lap.avg_heart_rate)}</span>
               </td>
               <td className="py-2 text-right text-gray-400">
-                {lap.avg_cadence ? `${Math.round(lap.avg_cadence)} rpm` : '--'}
+                {lap.avg_cadence ? formatCadence(lap.avg_cadence, sportType) : '--'}
               </td>
               <td className="py-2 text-right text-gray-400">
                 {lap.avg_power ? `${Math.round(lap.avg_power)} W` : '--'}

frontend/src/components/activity/MetricTimeline.jsx

@@ -1,9 +1,9 @@
-import { useMemo, useCallback } from 'react'
+import { useMemo } from 'react'
 import {
   ComposedChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
-  ResponsiveContainer, ReferenceLine,
+  ResponsiveContainer,
 } from 'recharts'
-import { formatDuration, formatPace } from '../../utils/format'
+import { formatPace, formatCadence } from '../../utils/format'
 
 function downsample(points, maxPoints = 500) {
   if (points.length <= maxPoints) return points
@@ -17,7 +17,7 @@ function buildChartData(dataPoints, activeMetrics) {
     .map(p => {
       const row = { distance_m: p.distance_m ?? 0 }
       for (const key of activeMetrics) {
-        row[key] = p[key] ?? null
+        row[key] = (p[key] != null && p[key] !== 0) ? p[key] : null
       }
       return row
     })
@@ -25,9 +25,7 @@ function buildChartData(dataPoints, activeMetrics) {
 
 const CustomTooltip = ({ active, payload, label, metrics, sportType, onHover }) => {
   if (!active || !payload?.length) return null
-
   if (onHover) onHover(label)
-
   return (
     <div className="bg-gray-900 border border-gray-700 rounded-lg p-3 text-xs shadow-xl">
       <p className="text-gray-400 mb-1">{(label / 1000).toFixed(2)} km</p>
@@ -37,7 +35,7 @@ const CustomTooltip = ({ active, payload, label, metrics, sportType, onHover })
         let display = entry.value.toFixed(1)
         if (entry.dataKey === 'speed_ms') display = formatPace(entry.value, sportType)
         else if (entry.dataKey === 'heart_rate') display = `${Math.round(entry.value)} bpm`
-        else if (entry.dataKey === 'cadence') display = `${Math.round(entry.value)} rpm`
+        else if (entry.dataKey === 'cadence') display = formatCadence(entry.value, sportType)
         else if (entry.dataKey === 'power') display = `${Math.round(entry.value)} W`
         else if (entry.dataKey === 'temperature_c') display = `${entry.value.toFixed(1)} °C`
         else if (entry.dataKey === 'altitude_m') display = `${entry.value.toFixed(0)} m`
@@ -61,7 +59,6 @@ export default function MetricTimeline({ dataPoints, activeMetrics, metrics, onH
 
   const activeMetricConfigs = metrics.filter(m => activeMetrics.includes(m.key))
 
-  // Build per-metric Y-axis domains
   const domains = useMemo(() => {
     const result = {}
     for (const m of activeMetricConfigs) {
@@ -70,6 +67,7 @@ export default function MetricTimeline({ dataPoints, activeMetrics, metrics, onH
       const min = Math.min(...vals)
       const max = Math.max(...vals)
       const pad = (max - min) * 0.1 || 1
+      // For elevation, don't start from 0 - show actual range
       result[m.key] = [min - pad, max + pad]
     }
     return result
@@ -87,18 +85,14 @@ export default function MetricTimeline({ dataPoints, activeMetrics, metrics, onH
     <div className="space-y-4">
       {activeMetricConfigs.map((metric, idx) => {
         const domain = domains[metric.key] || ['auto', 'auto']
-        const data = chartData.filter(p => p[metric.key] != null)
-        if (!data.length) return null
+        const hasData = chartData.some(p => p[metric.key] != null)
+        if (!hasData) return null
 
         return (
           <div key={metric.key}>
             <div className="flex items-center gap-2 mb-1">
-              <span style={{ color: metric.color }} className="text-xs font-medium">
-                {metric.label}
-              </span>
-              {metric.unit && (
-                <span className="text-xs text-gray-600">({metric.unit})</span>
-              )}
+              <span style={{ color: metric.color }} className="text-xs font-medium">{metric.label}</span>
+              {metric.unit && <span className="text-xs text-gray-600">({metric.unit})</span>}
             </div>
             <ResponsiveContainer width="100%" height={100}>
               <ComposedChart data={chartData} margin={{ top: 2, right: 8, bottom: 2, left: 8 }}>
@@ -118,20 +112,19 @@ export default function MetricTimeline({ dataPoints, activeMetrics, metrics, onH
                   tick={{ fontSize: 10, fill: '#6b7280' }}
                   axisLine={false}
                   tickLine={false}
-                  width={36}
+                  width={40}
                   tickFormatter={v => {
-                    if (metric.key === 'speed_ms') return `${(v * 3.6).toFixed(0)}`
+                    if (metric.key === 'speed_ms') {
+                      if (sportType === 'cycling') return `${(v * 3.6).toFixed(0)}`
+                      const spm = 1000 / v
+                      return `${Math.floor(spm/60)}:${String(Math.floor(spm%60)).padStart(2,'0')}`
+                    }
+                    if (metric.key === 'cadence') return Math.round(v * (sportType === 'running' ? 2 : 1))
                     return Math.round(v)
                   }}
                 />
                 <Tooltip
-                  content={
-                    <CustomTooltip
-                      metrics={metrics}
-                      sportType={sportType}
-                      onHover={onHoverDistance}
-                    />
-                  }
+                  content={<CustomTooltip metrics={metrics} sportType={sportType} onHover={onHoverDistance} />}
                   isAnimationActive={false}
                 />
                 <Line
@@ -148,8 +141,6 @@ export default function MetricTimeline({ dataPoints, activeMetrics, metrics, onH
           </div>
         )
       })}
-
-      {/* Shared distance axis label */}
       <p className="text-xs text-gray-600 text-center">Distance (km)</p>
     </div>
   )