administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-03-10 02:29:19 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

optimize calendar rendering with Set lookups and remove unnecessary remount key

Browse Source 
The old code built Date[] arrays with a TZDate object for every day in recording history (365+ timezone-aware date constructions). react-day-picker then did O(visible × history) date comparisons to match each of the displayed days against these arrays. Now we build Set<string> from the raw keys (zero date construction), and pass matcher functions that do O(1) Set.has() lookups. react-day-picker only calls these for visible days
This commit is contained in:
Josh Hawkins 2026-03-09 18:07:21 -05:00
parent 9b2bd14db6
commit bcf0705132
1 changed files with 26 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
web/src/components/overlay/ReviewActivityCalendar.tsx
View File

@ -3,7 +3,7 @@ import { Calendar } from "../ui/calendar";
import { ButtonHTMLAttributes, useEffect, useMemo, useRef } from "react";
import { FaCircle } from "react-icons/fa";
import { getUTCOffset } from "@/utils/dateUtil";
import { type DayButtonProps, TZDate } from "react-day-picker";
import { type DayButtonProps } from "react-day-picker";
import { LAST_24_HOURS_KEY } from "@/types/filter";
import { useUserPersistence } from "@/hooks/use-user-persistence";
import { cn } from "@/lib/utils";
@ -38,60 +38,46 @@ export default function ReviewActivityCalendar({
}, []);
const modifiers = useMemo(() => {
const recordings: Date[] = [];
const alerts: Date[] = [];
const detections: Date[] = [];
const recordingsSet = new Set<string>();
const alertsSet = new Set<string>();
const detectionsSet = new Set<string>();
// Handle recordings
if (recordingsSummary) {
Object.keys(recordingsSummary).forEach((date) => {
if (date === LAST_24_HOURS_KEY) {
return;
for (const date of Object.keys(recordingsSummary)) {
if (date !== LAST_24_HOURS_KEY) {
recordingsSet.add(date);
}
const parts = date.split("-");
const cal = new TZDate(date + "T00:00:00", timezone);
cal.setFullYear(
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
);
recordings.push(cal);
});
}
}
// Handle reviews if present
if (reviewSummary) {
Object.entries(reviewSummary).forEach(([date, data]) => {
if (date === LAST_24_HOURS_KEY) {
return;
}
const parts = date.split("-");
const cal = new TZDate(date + "T00:00:00", timezone);
cal.setFullYear(
parseInt(parts[0]),
parseInt(parts[1]) - 1,
parseInt(parts[2]),
);
for (const [date, data] of Object.entries(reviewSummary)) {
if (date === LAST_24_HOURS_KEY) continue;
if (data.total_alert > data.reviewed_alert) {
alerts.push(cal);
alertsSet.add(date);
} else if (data.total_detection > data.reviewed_detection) {
detections.push(cal);
detectionsSet.add(date);
}
});
}
}
return { alerts, detections, recordings };
}, [reviewSummary, recordingsSummary, timezone]);
const formatDay = (day: Date) => {
const y = day.getFullYear();
const m = String(day.getMonth() + 1).padStart(2, "0");
const d = String(day.getDate()).padStart(2, "0");
return `${y}-${m}-${d}`;
};
return {
recordings: (day: Date) => recordingsSet.has(formatDay(day)),
alerts: (day: Date) => alertsSet.has(formatDay(day)),
detections: (day: Date) => detectionsSet.has(formatDay(day)),
};
}, [reviewSummary, recordingsSummary]);
return (
<Calendar
key={selectedDay ? selectedDay.toISOString() : "reset"}
mode="single"
disabled={disabledDates}
showOutsideDays={false}
@ -223,7 +209,6 @@ export function TimezoneAwareCalendar({
return (
<Calendar
key={selectedDay ? selectedDay.toISOString() : "reset"}
mode="single"
disabled={disabledDates}
showOutsideDays={false}