+
Throttle
+
{telemetryData.length > 0 &&
selectedIndex !== null &&
selectedIndex >= 0
diff --git a/dashboard/components/OptimizedTrackMap.tsx b/dashboard/components/OptimizedTrackMap.tsx
index e349606..19eb163 100644
--- a/dashboard/components/OptimizedTrackMap.tsx
+++ b/dashboard/components/OptimizedTrackMap.tsx
@@ -1,38 +1,34 @@
"use client";
-import Feature from "ol/Feature";
-import { LineString, Point } from "ol/geom";
-import TileLayer from "ol/layer/Tile";
-import VectorLayer from "ol/layer/Vector";
-import OlMap from "ol/Map";
-import { fromLonLat } from "ol/proj";
-import VectorSource from "ol/source/Vector";
-import XYZ from "ol/source/XYZ";
-import { Circle, Fill, Stroke, Style } from "ol/style";
-import View from "ol/View";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { TelemetryDataPoint } from "@/lib/types";
-import { usePerformanceMonitor } from "@/hooks/usePerformanceMonitor";
+// Tree-shaken OpenLayers imports for better performance
+import Feature from "ol/Feature.js";
+import { LineString, Point } from "ol/geom.js";
+import TileLayer from "ol/layer/Tile.js";
+import VectorLayer from "ol/layer/Vector.js";
+import OlMap from "ol/Map.js";
+import { fromLonLat } from "ol/proj.js";
+import VectorSource from "ol/source/Vector.js";
+import XYZ from "ol/source/XYZ.js";
+import { Circle, Fill, Stroke, Style } from "ol/style.js";
+import View from "ol/View.js";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import type { TelemetryDataPoint } from "../lib/types";
interface OptimizedTrackMapProps {
dataWithCoordinates: TelemetryDataPoint[];
selectedPointIndex: number;
onPointClick?: (index: number) => void;
selectedMetric?: string;
+ setSelectedMetric: (metric: string) => void;
+ onMetricChange?: (metric: string) => void;
}
-const MAP_THEMES = {
- dark: {
- name: "Dark",
- url: "https://{a-d}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
- },
-};
-
-export default function OptimizedTrackMap({
+export const OptimizedTrackMap = memo(function OptimizedTrackMap({
dataWithCoordinates,
selectedPointIndex,
onPointClick,
selectedMetric = "Speed",
+ setSelectedMetric,
}: OptimizedTrackMapProps) {
const mapRef = useRef(null);
const mapInstanceRef = useRef(null);
@@ -40,23 +36,12 @@ export default function OptimizedTrackMap({
const markerSourceRef = useRef(null);
const trackRenderedRef = useRef(false);
- const [mapTheme, setMapTheme] = useState("dark");
- const [displayMetric, setDisplayMetric] = useState(
- selectedMetric || "Speed",
- );
-
- // PERFORMANCE FIX: Color cache to avoid recalculating same colors
const colorCacheRef = useRef>(new Map());
- // Performance monitoring (enable during development)
- const perfMonitor = usePerformanceMonitor("OptimizedTrackMap", process.env.NODE_ENV === 'development');
-
- // Color mapping function for different metrics with caching
const getColorForMetric = useCallback(
(value: number, metric: string, minVal: number, maxVal: number): string => {
if (!value || minVal === maxVal) return "#888888";
- // PERFORMANCE FIX: Use cache to avoid recalculating same colors
const cacheKey = `${metric}-${value}-${minVal}-${maxVal}`;
const cached = colorCacheRef.current.get(cacheKey);
if (cached) return cached;
@@ -66,16 +51,16 @@ export default function OptimizedTrackMap({
switch (metric) {
case "Speed":
- if (normalized < 0.3) color = "#ef4444"; // Red for low speed
- else if (normalized < 0.6) color = "#f97316"; // Orange for medium
- else if (normalized < 0.8) color = "#eab308"; // Yellow for medium-high
- else color = "#22c55e"; // Green for high speed
+ if (normalized < 0.3) color = "#ef4444";
+ else if (normalized < 0.6) color = "#f97316";
+ else if (normalized < 0.8) color = "#eab308";
+ else color = "#22c55e";
break;
case "Throttle":
- color = `rgb(0, ${Math.round(150 + 105 * normalized)}, 0)`; // Green gradient
+ color = `rgb(0, ${Math.round(150 + 105 * normalized)}, 0)`;
break;
case "Brake":
- color = `rgb(${Math.round(150 + 105 * normalized)}, 0, 0)`; // Red gradient
+ color = `rgb(${Math.round(150 + 105 * normalized)}, 0, 0)`;
break;
case "Gear": {
const gearColors = [
@@ -88,15 +73,16 @@ export default function OptimizedTrackMap({
"#ec4899",
"#f59e0b",
];
- color = gearColors[Math.min(Math.floor(normalized * 8), 7)] || "#888888";
+ color =
+ gearColors[Math.min(Math.floor(normalized * 8), 7)] || "#888888";
break;
}
case "RPM":
- color = `rgb(${Math.round(255 * normalized)}, ${Math.round(100 + 155 * (1 - normalized))}, 255)`; // Purple-pink gradient
+ color = `rgb(${Math.round(255 * normalized)}, ${Math.round(100 + 155 * (1 - normalized))}, 255)`;
break;
case "SteeringWheelAngle": {
const absNormalized = Math.abs(normalized - 0.5) * 2;
- color = `rgb(${Math.round(150 + 105 * absNormalized)}, 0, ${Math.round(150 + 105 * absNormalized)})`; // Purple for steering
+ color = `rgb(${Math.round(150 + 105 * absNormalized)}, 0, ${Math.round(150 + 105 * absNormalized)})`;
break;
}
default:
@@ -105,8 +91,7 @@ export default function OptimizedTrackMap({
// Cache the result
colorCacheRef.current.set(cacheKey, color);
-
- // Limit cache size to prevent memory leaks
+
if (colorCacheRef.current.size > 10000) {
const firstKey = colorCacheRef.current.keys().next().value;
colorCacheRef.current.delete(firstKey!);
@@ -117,7 +102,6 @@ export default function OptimizedTrackMap({
[],
);
- // Memoize the static track data - this should NEVER change once created
const staticTrackData = useMemo(() => {
if (!dataWithCoordinates?.length) return null;
@@ -139,29 +123,43 @@ export default function OptimizedTrackMap({
maxLon: Math.max(...validGPSPoints.map((p) => p.Lon)),
},
};
- }, [dataWithCoordinates]); // Only recalculate if data completely changes
+ }, [dataWithCoordinates]);
- // Initialize map ONCE - never again
useEffect(() => {
if (!mapRef.current || mapInstanceRef.current || !staticTrackData) return;
- console.log("ONE-TIME: Initializing optimized track map...");
-
const racingLineSource = new VectorSource();
const markerSource = new VectorSource();
racingLineSourceRef.current = racingLineSource;
markerSourceRef.current = markerSource;
+ const tileUrl = window.location.href.includes("dashboard")
+ ? "/dashboard/api/tiles/dark/{z}/{x}/{y}"
+ : "/api/tiles/dark/{z}/{x}/{y}";
+
const baseLayer = new TileLayer({
source: new XYZ({
- url: MAP_THEMES[mapTheme].url,
+ url: tileUrl,
+ crossOrigin: "anonymous",
+ maxZoom: 20,
+ minZoom: 5,
+ transition: 250,
+ cacheSize: 512,
+ reprojectionErrorThreshold: 0.5,
}),
+ preload: 1,
+ useInterimTilesOnError: true,
});
- // Create racing line layer (STATIC - track never re-renders, only colors change)
const racingLineLayer = new VectorLayer({
source: racingLineSource,
+ style: new Style({
+ stroke: new Stroke({
+ color: "#888888",
+ width: 3,
+ }),
+ }),
});
// Create marker layer (DYNAMIC - only this updates)
@@ -169,7 +167,7 @@ export default function OptimizedTrackMap({
source: markerSource,
style: new Style({
image: new Circle({
- radius: 10, // 20% smaller (was 12, now 10)
+ radius: 5, // 20% smaller (was 12, now 10)
fill: new Fill({
color: "#ffff00",
}),
@@ -207,7 +205,7 @@ export default function OptimizedTrackMap({
markerSourceRef.current = null;
trackRenderedRef.current = false;
};
- }, [staticTrackData, mapTheme]); // Only re-init if track data completely changes
+ }, [staticTrackData]);
// ONE-TIME: Render the static racing line
useEffect(() => {
@@ -280,7 +278,7 @@ export default function OptimizedTrackMap({
source.addFeature(lineFeature);
}
- // Fit view to track bounds
+ // Fit view to track bounds and warm tile cache
if (mapInstanceRef.current) {
const view = mapInstanceRef.current.getView();
view.fit(source.getExtent(), {
@@ -297,7 +295,12 @@ export default function OptimizedTrackMap({
);
}, [staticTrackData]); // Only render if track data changes
- // DYNAMIC: Update ONLY the marker position with throttling
+ useEffect(() => {
+ if (staticTrackData) {
+ colorCacheRef.current.clear();
+ }
+ }, [staticTrackData]);
+
const lastMarkerUpdateRef = useRef(0);
useEffect(() => {
if (!markerSourceRef.current || !staticTrackData || selectedPointIndex < 0)
@@ -306,14 +309,12 @@ export default function OptimizedTrackMap({
const point = staticTrackData.validGPSPoints[selectedPointIndex];
if (!point) return;
- // PERFORMANCE FIX: Throttle marker updates to 60fps max
const now = performance.now();
- if (now - lastMarkerUpdateRef.current < 16) { // 60fps = 16.67ms
+ if (now - lastMarkerUpdateRef.current < 16) {
return;
}
lastMarkerUpdateRef.current = now;
- // Use requestAnimationFrame for smooth marker movement
requestAnimationFrame(() => {
if (!markerSourceRef.current) return;
@@ -332,11 +333,11 @@ export default function OptimizedTrackMap({
// No console log here to avoid spam - this runs frequently
}, [selectedPointIndex, staticTrackData]); // Updates frequently but only affects marker
- // EFFICIENT: Update only line colors when metric changes (no track re-rendering)
+ // biome-ignore lint/correctness/useExhaustiveDependencies:
useEffect(() => {
if (!racingLineSourceRef.current || !mapInstanceRef.current) return;
- console.log("Updating racing line colors for metric:", displayMetric);
+ console.log("Updating racing line colors for metric:", selectedMetric);
// PERFORMANCE FIX: Clear color cache when metric changes to avoid stale colors
colorCacheRef.current.clear();
@@ -357,20 +358,24 @@ export default function OptimizedTrackMap({
// Batch style updates to avoid layout thrashing
features.forEach((feature) => {
- const metricValue = feature.get(displayMetric) || 0;
- const minVal = feature.get(`${displayMetric}_min`) || 0;
- const maxVal = feature.get(`${displayMetric}_max`) || 1;
+ const metricValue = feature.get(selectedMetric) || 0;
+ const minVal = feature.get(`${selectedMetric}_min`) || 0;
+ const maxVal = feature.get(`${selectedMetric}_max`) || 1;
const color = getColorForMetric(
metricValue,
- displayMetric,
+ selectedMetric,
minVal,
maxVal,
);
// Reuse existing style object if possible
const existingStyle = feature.getStyle();
- if (existingStyle && typeof existingStyle !== 'function' && Array.isArray(existingStyle) === false) {
+ if (
+ existingStyle &&
+ typeof existingStyle !== "function" &&
+ Array.isArray(existingStyle) === false
+ ) {
const stroke = (existingStyle as Style).getStroke();
if (stroke) {
stroke.setColor(color);
@@ -385,7 +390,7 @@ export default function OptimizedTrackMap({
color: color,
width: 3,
}),
- })
+ }),
);
});
@@ -396,7 +401,7 @@ export default function OptimizedTrackMap({
// Use requestAnimationFrame for smooth updates
requestAnimationFrame(updateStyles);
}
- }, [displayMetric, getColorForMetric]);
+ }, [getColorForMetric, staticTrackData, selectedMetric]);
// Handle click events
useEffect(() => {
@@ -421,13 +426,13 @@ export default function OptimizedTrackMap({
if (!staticTrackData) {
return (
-
+
-
-
+
-
No GPS data available
-
+
No GPS data available
+
This session may not contain GPS coordinates or they may be invalid.
@@ -436,184 +441,163 @@ export default function OptimizedTrackMap({
}
return (
- <>
-
-
- {displayMetric === "Speed" && "Speed (km/h)"}
- {displayMetric === "Throttle" && "Throttle (%)"}
- {displayMetric === "Brake" && "Brake (%)"}
- {displayMetric === "Gear" && "Gear"}
- {displayMetric === "RPM" && "RPM"}
- {displayMetric === "SteeringWheelAngle" && "Steering (deg)"}
-
-
- {displayMetric === "Speed" && (
- <>
-
-
-
-
- )}
- {displayMetric === "Throttle" && (
- <>
-
-
-
- )}
- {displayMetric === "Brake" && (
- <>
-
-
-
- )}
- {displayMetric === "Gear" && (
- <>
-
-
-
- )}
- {displayMetric === "RPM" && (
- <>
-
-
-
- )}
- {displayMetric === "SteeringWheelAngle" && (
- <>
-
-
-
- )}
-
-
-
- {/* Controls */}
-
- {/* Zoom controls */}
-
-
-
-
-
- {/* Metric selector */}
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedMetric === "Speed" && "Speed (km/h)"}
+ {selectedMetric === "Throttle" && "Throttle (%)"}
+ {selectedMetric === "Brake" && "Brake (%)"}
+ {selectedMetric === "Gear" && "Gear"}
+ {selectedMetric === "RPM" && "RPM"}
+ {selectedMetric === "SteeringWheelAngle" && "Steering (deg)"}
+
+ {selectedMetric === "Speed" && (
+ <>
+
+
+
+
+ )}
+ {selectedMetric === "Throttle" && (
+ <>
+
+
+
+ )}
+ {selectedMetric === "Brake" && (
+ <>
+
+
+
+ )}
+ {selectedMetric === "Gear" && (
+ <>
+
+
+
+ )}
+ {selectedMetric === "RPM" && (
+ <>
+
+
+
+ )}
+ {selectedMetric === "SteeringWheelAngle" && (
+ <>
+
+
+
+ )}
+
+
+
+
);
-}
+});
diff --git a/dashboard/components/ProfessionalTelemetryCharts.tsx b/dashboard/components/ProfessionalTelemetryCharts.tsx
index 7fb4003..db2af3f 100644
--- a/dashboard/components/ProfessionalTelemetryCharts.tsx
+++ b/dashboard/components/ProfessionalTelemetryCharts.tsx
@@ -1,17 +1,17 @@
"use client";
-import React, { useCallback, useMemo, useRef, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
import {
CartesianGrid,
Line,
LineChart,
+ ReferenceLine,
ResponsiveContainer,
+ Tooltip,
XAxis,
YAxis,
- ReferenceLine,
- Tooltip,
} from "recharts";
-import type { TelemetryDataPoint } from "@/lib/types";
+import type { TelemetryDataPoint } from "../lib/types";
interface ProfessionalTelemetryChartsProps {
telemetryData: TelemetryDataPoint[];
@@ -21,261 +21,284 @@ interface ProfessionalTelemetryChartsProps {
onMouseLeave?: () => void;
}
-const ProfessionalTelemetryCharts = React.memo(function ProfessionalTelemetryCharts({
- telemetryData,
- selectedIndex,
- onHover,
- onIndexChange,
- onMouseLeave,
-}: ProfessionalTelemetryChartsProps) {
- const chartData = useMemo(() => {
- // Sample data for better performance - show every nth point for charts
- // This reduces 39K points to ~4K points for rendering while maintaining shape
- const sampleRate = Math.max(1, Math.floor(telemetryData.length / 4000));
-
- // PERFORMANCE FIX: Build sampled data and index mapping efficiently
- const sampledData: (TelemetryDataPoint & { originalIndex: number; index: number; lapDistance: number })[] = [];
- const originalToSampledIndex = new Map
();
-
- telemetryData.forEach((point, originalIndex) => {
- if (originalIndex % sampleRate === 0) {
- const sampledIndex = sampledData.length;
- sampledData.push({
- ...point,
- originalIndex, // Store original index efficiently
- index: sampledIndex,
- lapDistance: (point.LapDistPct / 100) * 5.5, // Approximate track distance in km
- });
- originalToSampledIndex.set(originalIndex, sampledIndex);
- }
- });
-
- return { sampledData, originalToSampledIndex };
- }, [telemetryData]);
+const ProfessionalTelemetryCharts = React.memo(
+ function ProfessionalTelemetryCharts({
+ telemetryData,
+ selectedIndex,
+ onHover,
+ onIndexChange,
+ onMouseLeave,
+ }: ProfessionalTelemetryChartsProps) {
+ const chartData = useMemo(() => {
+ // Sample data for better performance - show every nth point for charts
+ // This reduces 39K points to ~4K points for rendering while maintaining shape
+ const sampleRate = Math.max(1, Math.floor(telemetryData.length / 4000));
- // Throttle hover events for better performance
- const throttledHoverRef = useRef(null);
- const lastHoverIndex = useRef(-1);
+ // PERFORMANCE FIX: Build sampled data and index mapping efficiently
+ const sampledData: (TelemetryDataPoint & {
+ originalIndex: number;
+ index: number;
+ lapDistance: number;
+ })[] = [];
+ const originalToSampledIndex = new Map();
- // Cleanup throttled events on unmount
- useEffect(() => {
- return () => {
- if (throttledHoverRef.current) {
- cancelAnimationFrame(throttledHoverRef.current);
- }
- };
- }, []);
+ telemetryData.forEach((point, originalIndex) => {
+ if (originalIndex % sampleRate === 0) {
+ const sampledIndex = sampledData.length;
+ sampledData.push({
+ ...point,
+ originalIndex, // Store original index efficiently
+ index: sampledIndex,
+ lapDistance: (point.LapDistPct / 100) * 5.5, // Approximate track distance in km
+ });
+ originalToSampledIndex.set(originalIndex, sampledIndex);
+ }
+ });
+
+ return { sampledData, originalToSampledIndex };
+ }, [telemetryData]);
- const handleMouseMove = useCallback(
- (data: any) => {
- if (data && data.activeTooltipIndex !== undefined && chartData.sampledData[data.activeTooltipIndex]) {
- const originalIndex = chartData.sampledData[data.activeTooltipIndex].originalIndex;
-
- // Skip if same index to prevent unnecessary updates
- if (lastHoverIndex.current === originalIndex) return;
-
- // Throttle hover events to 30fps (33ms) for better performance
+ // Throttle hover events for better performance
+ const throttledHoverRef = useRef(null);
+ const lastHoverIndex = useRef(-1);
+
+ // Cleanup throttled events on unmount
+ useEffect(() => {
+ return () => {
if (throttledHoverRef.current) {
cancelAnimationFrame(throttledHoverRef.current);
}
- throttledHoverRef.current = requestAnimationFrame(() => {
- lastHoverIndex.current = originalIndex;
- onHover(originalIndex);
- });
+ };
+ }, []);
+
+ const handleMouseMove = useCallback(
+ (data: any) => {
+ if (
+ data &&
+ data.activeTooltipIndex !== undefined &&
+ chartData.sampledData[data.activeTooltipIndex]
+ ) {
+ const originalIndex =
+ chartData.sampledData[data.activeTooltipIndex].originalIndex;
+
+ // Skip if same index to prevent unnecessary updates
+ if (lastHoverIndex.current === originalIndex) return;
+
+ // Throttle hover events to 30fps (33ms) for better performance
+ if (throttledHoverRef.current) {
+ cancelAnimationFrame(throttledHoverRef.current);
+ }
+ throttledHoverRef.current = requestAnimationFrame(() => {
+ lastHoverIndex.current = originalIndex;
+ onHover(originalIndex);
+ });
+ }
+ },
+ [onHover, chartData.sampledData],
+ );
+
+ const handleChartClick = useCallback(
+ (data: any) => {
+ if (
+ data &&
+ data.activeTooltipIndex !== undefined &&
+ chartData.sampledData[data.activeTooltipIndex]
+ ) {
+ // Use original index from the sampled data
+ const originalIndex =
+ chartData.sampledData[data.activeTooltipIndex].originalIndex;
+ onIndexChange(originalIndex);
+ }
+ },
+ [onIndexChange, chartData.sampledData],
+ );
+
+ // Memoize chart configurations to prevent recreations
+ const chartConfigs = useMemo(
+ () => [
+ {
+ title: "Speed",
+ dataKey: "Speed",
+ color: "#ef4444",
+ unit: "km/h",
+ yDomain: [0, 300],
+ height: 120,
+ },
+ {
+ title: "Throttle",
+ dataKey: "Throttle",
+ color: "#22c55e",
+ unit: "%",
+ yDomain: [0, 100],
+ height: 100,
+ },
+ {
+ title: "Brake",
+ dataKey: "Brake",
+ color: "#f97316",
+ unit: "%",
+ yDomain: [0, 100],
+ height: 100,
+ },
+ {
+ title: "Gear",
+ dataKey: "Gear",
+ color: "#8b5cf6",
+ unit: "",
+ yDomain: [0, 8],
+ height: 80,
+ },
+ {
+ title: "RPM",
+ dataKey: "RPM",
+ color: "#06b6d4",
+ unit: "",
+ yDomain: [0, 8000],
+ height: 100,
+ },
+ {
+ title: "Steering",
+ dataKey: "SteeringWheelAngle",
+ color: "#ec4899",
+ unit: "deg",
+ yDomain: [-180, 180],
+ height: 100,
+ },
+ ],
+ [],
+ );
+
+ // Memoize tooltip component
+ const CustomTooltip = useCallback(({ active, payload, label }: any) => {
+ if (active && payload && payload.length) {
+ const dataPoint = payload[0].payload as TelemetryDataPoint & {
+ lapDistance?: number;
+ };
+ return (
+
+
+ Distance: {dataPoint.lapDistance?.toFixed(2)} km
+
+
+ Time: {dataPoint.sessionTime?.toFixed(2)}s
+
+
-
- Distance: {dataPoint.lapDistance?.toFixed(2)} km
-
-
- Time: {dataPoint.sessionTime?.toFixed(2)}s
-
+ return (
+ // biome-ignore lint/a11y/noStaticElementInteractions: na
+
+
+ Telemetry Data
- );
- }
- return null;
- }, []);
- // PERFORMANCE FIX: Memoize reference line position to prevent jumping
- const referenceLineDistance = useMemo(() => {
- if (selectedIndex < 0 || !telemetryData[selectedIndex]) return null;
-
- // Try to find exact sampled point first
- const sampledIndex = chartData.originalToSampledIndex.get(selectedIndex);
- if (sampledIndex !== undefined && chartData.sampledData[sampledIndex]) {
- return chartData.sampledData[sampledIndex].lapDistance;
- }
-
- // Fallback: calculate from original data
- const originalPoint = telemetryData[selectedIndex];
- if (originalPoint?.LapDistPct !== undefined) {
- return (originalPoint.LapDistPct / 100) * 5.5;
- }
-
- return null;
- }, [selectedIndex, chartData.originalToSampledIndex, chartData.sampledData, telemetryData]);
+ {chartConfigs.map((config) => (
+
+
+
+ {config.title}
+
+ {config.unit}
+
- return (
-
-
- Telemetry Data
-
-
- {chartConfigs.map((config) => (
-
-
-
- {config.title}
-
- {config.unit}
-
-
-
-
-
-
-
-
- } />
-
-
-
- {/* FIXED: Memoized reference line to prevent jumping */}
- {referenceLineDistance !== null && (
-
+
+
+
+
- )}
-
-
+
+ } />
+
+
+
+ {/* FIXED: Memoized reference line to prevent jumping */}
+ {referenceLineDistance !== null && (
+
+ )}
+
+
+
+ ))}
+
+ {/* Distance markers */}
+
+ 0 km
+ 1 km
+ 2 km
+ 3 km
+ 4 km
+ 5 km
- ))}
-
- {/* Distance markers */}
-
- 0 km
- 1 km
- 2 km
- 3 km
- 4 km
- 5 km
-
- );
-});
+ );
+ },
+);
-ProfessionalTelemetryCharts.displayName = 'ProfessionalTelemetryCharts';
+ProfessionalTelemetryCharts.displayName = "ProfessionalTelemetryCharts";
-export default ProfessionalTelemetryCharts;
\ No newline at end of file
+export default ProfessionalTelemetryCharts;
diff --git a/dashboard/components/ServiceWorkerProvider.tsx b/dashboard/components/ServiceWorkerProvider.tsx
new file mode 100644
index 0000000..439fe93
--- /dev/null
+++ b/dashboard/components/ServiceWorkerProvider.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+ registerServiceWorker,
+ unregisterServiceWorker,
+} from "../lib/sw-register";
+
+export default function ServiceWorkerProvider() {
+ useEffect(() => {
+ if (import.meta.env.MODE === "development") {
+ // In development, actively unregister any existing Service Workers
+ unregisterServiceWorker();
+ console.log("Development mode: Service Worker disabled and unregistered");
+ return;
+ }
+
+ // Only register Service Worker in production
+ registerServiceWorker();
+ }, []);
+
+ return null; // This component doesn't render anything
+}
diff --git a/dashboard/components/SessionSelector.tsx b/dashboard/components/SessionSelector.tsx
index 626e207..22a63fd 100644
--- a/dashboard/components/SessionSelector.tsx
+++ b/dashboard/components/SessionSelector.tsx
@@ -1,11 +1,10 @@
-"use client";
+import { Link } from "@tanstack/react-router";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-
-interface Session {
+export interface Session {
+ last_updated: string;
+ max_lap_id: string;
session_id: string;
- last_updated: Date;
+ session_name: string;
track_name: string;
}
@@ -14,15 +13,6 @@ interface SessionSelectorProps {
}
export default function SessionSelector({ sessions }: SessionSelectorProps) {
- const router = useRouter();
- const [selectedSession, setSelectedSession] = useState
("");
-
- const handleSessionSelect = (sessionId: string) => {
- if (sessionId) {
- router.push(`/${sessionId}?lapId=1`);
- }
- };
-
const formatDate = (date: Date) => {
return new Intl.DateTimeFormat("en-US", {
year: "numeric",
@@ -43,86 +33,109 @@ export default function SessionSelector({ sessions }: SessionSelectorProps) {
if (diffDays > 0) return `${diffDays}d ago`;
if (diffHours > 0) return `${diffHours}h ago`;
if (diffMinutes > 0) return `${diffMinutes}m ago`;
- return 'Just now';
+ return "Just now";
};
// Group sessions by track for better organization
- const sessionsByTrack = sessions.reduce((acc, session) => {
- const track = session.track_name || 'Unknown Track';
- if (!acc[track]) acc[track] = [];
- acc[track].push(session);
- return acc;
- }, {} as Record);
+ const sessionsByTrack = sessions.reduce(
+ (acc, session) => {
+ const track = session.track_name || "Unknown Track";
+ if (!acc[track]) acc[track] = [];
+ acc[track].push(session);
+ return acc;
+ },
+ {} as Record,
+ );
return (
{/* Sessions Grid */}
{sessions.map((session) => (
-