Fix/trip display

app/components/map/layers/mobile/mobile-box-layer.tsx

@@ -1,15 +1,6 @@
-import bbox from '@turf/bbox'
-import {
-	featureCollection,
-	lineString,
-	multiLineString,
-	point,
-} from '@turf/helpers'
-import { type MultiLineString, type Point } from 'geojson'
-import {
-	type CircleLayerSpecification,
-	type LineLayerSpecification,
-} from 'maplibre-gl'
+import { featureCollection, point } from '@turf/helpers'
+import { type Point } from 'geojson'
+import { type CircleLayerSpecification } from 'maplibre-gl'
 import { createContext, useContext, useEffect, useMemo } from 'react'
 import { Layer, Popup, Source, useMap } from 'react-map-gl/maplibre'
 import { HIGH_COLOR, LOW_COLOR, createPalette } from './color-palette'
@@ -18,7 +9,7 @@ import { type Sensor } from '~/db/schema'
 interface CustomGeoJsonProperties {
 	locationId: number
 	value: number
-	createdAt: Date
+	time: string
 	color: string
 }
 
@@ -36,47 +27,46 @@ export default function MobileBoxLayer({
 	maxColor = HIGH_COLOR,
 }: {
 	sensor: Sensor
-	minColor?:
-		| NonNullable<CircleLayerSpecification['paint']>['circle-color']
-		| NonNullable<LineLayerSpecification['paint']>['line-color']
-	maxColor?:
-		| NonNullable<CircleLayerSpecification['paint']>['circle-color']
-		| NonNullable<LineLayerSpecification['paint']>['line-color']
+	minColor?: NonNullable<CircleLayerSpecification['paint']>['circle-color']
+	maxColor?: NonNullable<CircleLayerSpecification['paint']>['circle-color']
 }) {
 	const { hoveredPoint, setHoveredPoint } = useContext(HoveredPointContext)
 	const { osem: mapRef } = useMap()
 
 	const sourceData = useMemo<GeoJSON.FeatureCollection | null>(() => {
 		const sensorData = (sensor.data ?? []) as unknown as {
-			value: string
-			location: { x: number; y: number; id: number }
-			createdAt: Date
+			value: number | string | null
+			location: { x: number; y: number; id: number } | null
+			time: Date | string | null
 		}[]
+		const mappableData = sensorData.filter(
+			(measurement) =>
+				measurement.location !== null &&
+				measurement.value !== null &&
+				Number.isFinite(Number(measurement.value)),
+		)
 
-		if (sensorData.length === 0) return null
+		if (mappableData.length === 0) return null
 
-		const minValue = Math.min(...sensorData.map((d) => Number(d.value)))
-		const maxValue = Math.max(...sensorData.map((d) => Number(d.value)))
+		const minValue = Math.min(...mappableData.map((d) => Number(d.value)))
+		const maxValue = Math.max(...mappableData.map((d) => Number(d.value)))
 		const palette = createPalette(
 			minValue,
 			maxValue,
 			minColor as string,
 			maxColor as string,
 		)
 
-		const points = sensorData.map((measurement) =>
-			point([measurement.location.x, measurement.location.y], {
+		const points = mappableData.map((measurement) =>
+			point([measurement.location!.x, measurement.location!.y], {
 				value: Number(measurement.value),
-				createdAt: new Date(measurement.createdAt),
+				time: measurement.time ? new Date(measurement.time).toISOString() : '',
 				color: palette(Number(measurement.value)).hex(),
-				locationId: measurement.location.id,
+				locationId: measurement.location!.id,
 			}),
 		)
 
-		const line = lineString(points.map((p) => p.geometry.coordinates))
-		const lines = multiLineString([line.geometry.coordinates])
-
-		return featureCollection<Point | MultiLineString>([...points, lines])
+		return featureCollection<Point>(points)
 	}, [maxColor, minColor, sensor.data])
 
 	const hoveredFeature = useMemo(() => {
@@ -92,26 +82,6 @@ export default function MobileBoxLayer({
 		)
 	}, [hoveredPoint, sourceData])
 
-	useEffect(() => {
-		if (!mapRef || !sourceData) return
-
-		const bounds = bbox(sourceData).slice(0, 4) as [
-			number,
-			number,
-			number,
-			number,
-		]
-
-		mapRef.fitBounds(bounds, {
-			padding: {
-				top: 100,
-				bottom: 400,
-				left: 500,
-				right: 100,
-			},
-		})
-	}, [mapRef, sourceData])
-
 	useEffect(() => {
 		if (!mapRef) return
 
@@ -152,17 +122,6 @@ export default function MobileBoxLayer({
 	return (
 		<>
 			<Source id="box-source" type="geojson" data={sourceData}>
-				<Layer
-					id="box-layer-line"
-					source="box-source"
-					type="line"
-					filter={['==', '$type', 'LineString']}
-					paint={{
-						'line-color': '#333',
-						'line-width': 2,
-						'line-opacity': 0.7,
-					}}
-				/>
 				<Layer
 					id="box-layer-point"
 					source="box-source"

app/components/map/layers/mobile/mobile-box-view.tsx

@@ -1,5 +1,6 @@
 import { ArrowDownUp } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { calculateColorRange } from './color-palette'
 import MobileBoxLayer from './mobile-box-layer'
 import { Button } from '~/components/ui/button'
@@ -26,9 +27,9 @@ export default function MobileBoxView({
 	}
 
 	return (
-		<div className="absolute top-10 right-0 flex flex-col gap-4 p-4">
+		<div className="absolute top-80 right-0 flex max-h-[calc(100vh-21rem)] flex-col gap-4 overflow-y-auto p-4">
 			{sensors.map((sensor, index) => (
-				<div key={index} className="flex flex-col items-center gap-4">
+				<div key={sensor.id} className="flex flex-col items-center gap-4">
 					{index === 1 && sensors.length === 2 && (
 						<Button
 							className="self-center rounded-full px-4 py-2"
@@ -86,6 +87,7 @@ function Legend({
 	sensor: SensorWithColor
 	onColorChange?: (min: string, max: string) => void
 }) {
+	const { t } = useTranslation('mobile-map')
 	const { lowColor, highColor } = calculateColorRange(sensor.color)
 
 	const minColorInputRef = useRef<HTMLInputElement>(null)
@@ -95,16 +97,31 @@ function Legend({
 	const [maxColor, setMaxColor] = useState(highColor)
 
 	useEffect(() => {
-		onColorChange && onColorChange(minColor, maxColor)
+		onColorChange?.(minColor, maxColor)
 	}, [minColor, maxColor, onColorChange])
 
-	const sensorData = Array.isArray(sensor.data) ? sensor.data : []
+	const sensorData = Array.isArray(sensor.data)
+		? sensor.data.filter(
+				(measurement) =>
+					measurement.value !== null &&
+					Number.isFinite(Number(measurement.value)),
+			)
+		: []
 
-	const minValue = Math.min(...sensorData.map((d) => Number(d.value)))
-	const maxValue = Math.max(...sensorData.map((d) => Number(d.value)))
+	const minValue =
+		sensorData.length > 0
+			? Math.min(...sensorData.map((d) => Number(d.value)))
+			: 0
+	const maxValue =
+		sensorData.length > 0
+			? Math.max(...sensorData.map((d) => Number(d.value)))
+			: 0
 
 	return (
 		<div className="z-50 flex w-40 flex-col gap-2 rounded-lg border-gray-200 bg-white p-2 shadow-xs">
+			<span className="text-muted-foreground text-[10px] font-medium tracking-wide uppercase">
+				{t('sensorValues')}
+			</span>
 			<span className="font-semibold">{sensor.title}</span>
 			<div
 				className="flex w-full items-center justify-between rounded-sm p-1"

app/components/map/layers/mobile/mobile-overview-layer.tsx

@@ -1,15 +1,12 @@
 import bbox from '@turf/bbox'
 import { point, featureCollection } from '@turf/helpers'
-import { format } from 'date-fns'
 import { type FeatureCollection, type Point } from 'geojson'
 import { CalendarClock } from 'lucide-react'
 import { useState, useEffect, useMemo, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Source, Layer, useMap, Popup } from 'react-map-gl/maplibre'
 import MapLegend from './mobile-overview-legend'
-import {
-	type LocationPoint,
-	categorizeIntoTrips,
-} from '~/lib/mobile-box-helper'
+import { type LocationPoint, getLatestTrips } from '~/lib/mobile-box-helper'
 
 const FIT_PADDING = 100
 
@@ -121,8 +118,17 @@ export default function MobileOverviewLayer({
 }: {
 	locations: LocationPoint[]
 }) {
-	// Generate trips and assign colors once
-	const trips = useMemo(() => categorizeIntoTrips(locations, 50), [locations])
+	const { i18n } = useTranslation('mobile-map')
+	const tripDateTimeFormatter = useMemo(
+		() =>
+			new Intl.DateTimeFormat(i18n.language, {
+				dateStyle: 'medium',
+				timeStyle: 'short',
+			}),
+		[i18n.language],
+	)
+	// Apply the same trip definition and limit as the server-side overview loader.
+	const trips = useMemo(() => getLatestTrips(locations), [locations])
 
 	// Cluster points within each trip
 	const clusteredTrips = useMemo(() => {
@@ -176,7 +182,7 @@ export default function MobileOverviewLayer({
 
 	// Legend items state
 	const [legendItems, setLegendItems] = useState<
-		{ label: string; color: string }[]
+		{ label: string; color: string; isLatest: boolean }[]
 	>([])
 
 	// State to track the highlighted trip number
@@ -198,7 +204,12 @@ export default function MobileOverviewLayer({
 	const [showOriginalColors, setShowOriginalColors] = useState(true)
 
 	useEffect(() => {
-		if (!clusteredTrips || clusteredTrips.length === 0) return
+		if (clusteredTrips.length === 0) {
+			setSourceData(null)
+			setExpandedSourceData(null)
+			setLegendItems([])
+			return
+		}
 
 		const colors = generateColors(clusteredTrips.length)
 
@@ -235,15 +246,20 @@ export default function MobileOverviewLayer({
 		)
 
 		// Set legend items for the trips
-		const legend = clusteredTrips.map((_, index) => ({
-			label: `Trip ${index + 1}`,
+		const legend = clusteredTrips.map((trip, index) => ({
+			label: formatTripTimeRange(
+				trip.startTime,
+				trip.endTime,
+				tripDateTimeFormatter,
+			),
 			color: colors[index],
+			isLatest: index === clusteredTrips.length - 1,
 		}))
 
 		setSourceData(featureCollection(points))
 		setExpandedSourceData(featureCollection(expandedPoints))
 		setLegendItems(legend)
-	}, [clusteredTrips])
+	}, [clusteredTrips, tripDateTimeFormatter])
 
 	useEffect(() => {
 		if (!mapRef || !sourceData) return
@@ -451,7 +467,7 @@ export default function MobileOverviewLayer({
 						)}
 						<div>
 							<p className="text-primary text-sm font-bold">
-								{format(new Date(popupInfo.startTime), 'Pp')}
+								{tripDateTimeFormatter.format(new Date(popupInfo.startTime))}
 							</p>
 						</div>
 						{popupInfo.isCluster &&
@@ -461,7 +477,7 @@ export default function MobileOverviewLayer({
 										To
 									</span>
 									<p className="text-primary text-sm font-bold">
-										{format(new Date(popupInfo.endTime), 'Pp')}
+										{tripDateTimeFormatter.format(new Date(popupInfo.endTime))}
 									</p>
 								</div>
 							)}
@@ -472,7 +488,7 @@ export default function MobileOverviewLayer({
 			<MapLegend
 				items={legendItems}
 				position="top-right"
-				toggleTrips={() => setShowOriginalColors(!showOriginalColors)}
+				onColorByTripChange={setShowOriginalColors}
 				showOriginalColors={showOriginalColors}
 				onLegendItemHover={(color) => {
 					setHighlightedTrip(
@@ -485,3 +501,11 @@ export default function MobileOverviewLayer({
 		</>
 	)
 }
+
+function formatTripTimeRange(
+	startTime: string,
+	endTime: string,
+	dateTimeFormatter: Intl.DateTimeFormat,
+) {
+	return dateTimeFormatter.formatRange(new Date(startTime), new Date(endTime))
+}