tanner/sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

perf: memoize coordinate processing to prevent UI freeze

Browse Source
This commit is contained in:
Tanner Collin (aider)
2025-08-14 20:25:18 +00:00
parent 0a02db9a8d
commit 2adc0a9fcb
1 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
mapper/src/App.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import * as leaflet from 'leaflet';
import { MapContainer, Polyline, TileLayer, useMap, useMapEvents } from 'react-leaflet';
import Datetime from 'react-datetime';
@@ -153,9 +153,22 @@ function FitBounds({ coords, mapState, end, duration }) {
function Map({end, duration, slider, mapState, setMapState}) {
const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
const range = parseSlider(end, duration, slider);
const range = useMemo(() => parseSlider(end, duration, slider), [end, duration, slider]);
const coords = data.length ? data.filter(x => !range || (x.time >= range[0] && x.time <= range[1])).map(({ lat, lon }) => [lat, lon]).filter(([lat, lon]) => typeof lat === 'number' && typeof lon === 'number' && isFinite(lat) && isFinite(lon)) : [];
const coords = useMemo(() => {
if (!data || !data.length) return [];
const result = [];
for (const point of data) {
if ((!range || (point.time >= range[0] && point.time <= range[1]))) {
const { lat, lon } = point;
if (typeof lat === 'number' && typeof lon === 'number' && isFinite(lat) && isFinite(lon)) {
result.push([lat, lon]);
}
}
}
return result;
}, [data, range]);
const handleSubmit = (e) => {
e.preventDefault();