Improve event switching speed

This commit is contained in:
Nicolas Mowen 2024-04-11 09:33:46 -06:00
parent 9b62ceade0
commit 826f02317c

View File

@ -295,6 +295,7 @@ export default function EventView({
filter={filter} filter={filter}
timeRange={timeRange} timeRange={timeRange}
startTime={startTime} startTime={startTime}
loading={severity != severityToggle}
markItemAsReviewed={markItemAsReviewed} markItemAsReviewed={markItemAsReviewed}
markAllItemsAsReviewed={markAllItemsAsReviewed} markAllItemsAsReviewed={markAllItemsAsReviewed}
onSelectReview={onSelectReview} onSelectReview={onSelectReview}
@ -334,6 +335,7 @@ type DetectionReviewProps = {
filter?: ReviewFilter; filter?: ReviewFilter;
timeRange: { before: number; after: number }; timeRange: { before: number; after: number };
startTime?: number; startTime?: number;
loading: boolean;
markItemAsReviewed: (review: ReviewSegment) => void; markItemAsReviewed: (review: ReviewSegment) => void;
markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void; markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
onSelectReview: (review: ReviewSegment, ctrl: boolean) => void; onSelectReview: (review: ReviewSegment, ctrl: boolean) => void;
@ -349,6 +351,7 @@ function DetectionReview({
filter, filter,
timeRange, timeRange,
startTime, startTime,
loading,
markItemAsReviewed, markItemAsReviewed,
markAllItemsAsReviewed, markAllItemsAsReviewed,
onSelectReview, onSelectReview,
@ -600,33 +603,41 @@ function DetectionReview({
</div> </div>
<div className="w-[65px] md:w-[110px] flex flex-row"> <div className="w-[65px] md:w-[110px] flex flex-row">
<div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar"> <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
<EventReviewTimeline {loading ? (
segmentDuration={segmentDuration} <Skeleton className="size-full" />
timestampSpread={15} ) : (
timelineStart={timeRange.before} <EventReviewTimeline
timelineEnd={timeRange.after} segmentDuration={segmentDuration}
showMinimap={showMinimap && !previewTime} timestampSpread={15}
minimapStartTime={minimapBounds.start} timelineStart={timeRange.before}
minimapEndTime={minimapBounds.end} timelineEnd={timeRange.after}
showHandlebar={previewTime != undefined} showMinimap={showMinimap && !previewTime}
handlebarTime={previewTime} minimapStartTime={minimapBounds.start}
visibleTimestamps={visibleTimestamps} minimapEndTime={minimapBounds.end}
events={reviewItems?.all ?? []} showHandlebar={previewTime != undefined}
severityType={severity} handlebarTime={previewTime}
contentRef={contentRef} visibleTimestamps={visibleTimestamps}
timelineRef={reviewTimelineRef} events={reviewItems?.all ?? []}
dense={isMobile} severityType={severity}
/> contentRef={contentRef}
timelineRef={reviewTimelineRef}
dense={isMobile}
/>
)}
</div> </div>
<div className="w-[10px]"> <div className="w-[10px]">
<SummaryTimeline {loading ? (
reviewTimelineRef={reviewTimelineRef} <Skeleton className="w-full" />
timelineStart={timeRange.before} ) : (
timelineEnd={timeRange.after} <SummaryTimeline
segmentDuration={segmentDuration} reviewTimelineRef={reviewTimelineRef}
events={reviewItems?.all ?? []} timelineStart={timeRange.before}
severityType={severity} timelineEnd={timeRange.after}
/> segmentDuration={segmentDuration}
events={reviewItems?.all ?? []}
severityType={severity}
/>
)}
</div> </div>
</div> </div>
</> </>