feat: improve performance: don't sort timeline buckets from server (#24032)
parent
75d23fe135
commit
d6b39a464d
|
|
@ -1,6 +1,5 @@
|
||||||
import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
|
import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
|
||||||
import { AssetOrder } from '@immich/sdk';
|
import { AssetOrder } from '@immich/sdk';
|
||||||
import { SvelteSet } from 'svelte/reactivity';
|
|
||||||
import type { DayGroup } from './day-group.svelte';
|
import type { DayGroup } from './day-group.svelte';
|
||||||
import type { MonthGroup } from './month-group.svelte';
|
import type { MonthGroup } from './month-group.svelte';
|
||||||
import type { TimelineAsset } from './types';
|
import type { TimelineAsset } from './types';
|
||||||
|
|
@ -10,8 +9,10 @@ export class GroupInsertionCache {
|
||||||
[year: number]: { [month: number]: { [day: number]: DayGroup } };
|
[year: number]: { [month: number]: { [day: number]: DayGroup } };
|
||||||
} = {};
|
} = {};
|
||||||
unprocessedAssets: TimelineAsset[] = [];
|
unprocessedAssets: TimelineAsset[] = [];
|
||||||
changedDayGroups = new SvelteSet<DayGroup>();
|
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||||
newDayGroups = new SvelteSet<DayGroup>();
|
changedDayGroups = new Set<DayGroup>();
|
||||||
|
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||||
|
newDayGroups = new Set<DayGroup>();
|
||||||
|
|
||||||
getDayGroup({ year, month, day }: TimelineDate): DayGroup | undefined {
|
getDayGroup({ year, month, day }: TimelineDate): DayGroup | undefined {
|
||||||
return this.#lookupCache[year]?.[month]?.[day];
|
return this.#lookupCache[year]?.[month]?.[day];
|
||||||
|
|
@ -32,7 +33,8 @@ export class GroupInsertionCache {
|
||||||
}
|
}
|
||||||
|
|
||||||
get updatedBuckets() {
|
get updatedBuckets() {
|
||||||
const updated = new SvelteSet<MonthGroup>();
|
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||||
|
const updated = new Set<MonthGroup>();
|
||||||
for (const group of this.changedDayGroups) {
|
for (const group of this.changedDayGroups) {
|
||||||
updated.add(group.monthGroup);
|
updated.add(group.monthGroup);
|
||||||
}
|
}
|
||||||
|
|
@ -40,7 +42,8 @@ export class GroupInsertionCache {
|
||||||
}
|
}
|
||||||
|
|
||||||
get bucketsWithNewDayGroups() {
|
get bucketsWithNewDayGroups() {
|
||||||
const updated = new SvelteSet<MonthGroup>();
|
// eslint-disable-next-line svelte/prefer-svelte-reactivity
|
||||||
|
const updated = new Set<MonthGroup>();
|
||||||
for (const group of this.newDayGroups) {
|
for (const group of this.newDayGroups) {
|
||||||
updated.add(group.monthGroup);
|
updated.add(group.monthGroup);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ export async function loadFromTimeBuckets(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const unprocessedAssets = monthGroup.addAssets(bucketResponse);
|
const unprocessedAssets = monthGroup.addAssets(bucketResponse, true);
|
||||||
if (unprocessedAssets.length > 0) {
|
if (unprocessedAssets.length > 0) {
|
||||||
console.error(
|
console.error(
|
||||||
`Warning: getTimeBucket API returning assets not in requested month: ${monthGroup.yearMonth.month}, ${JSON.stringify(
|
`Warning: getTimeBucket API returning assets not in requested month: ${monthGroup.yearMonth.month}, ${JSON.stringify(
|
||||||
|
|
|
||||||
|
|
@ -153,7 +153,7 @@ export class MonthGroup {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
addAssets(bucketAssets: TimeBucketAssetResponseDto) {
|
addAssets(bucketAssets: TimeBucketAssetResponseDto, preSorted: boolean) {
|
||||||
const addContext = new GroupInsertionCache();
|
const addContext = new GroupInsertionCache();
|
||||||
for (let i = 0; i < bucketAssets.id.length; i++) {
|
for (let i = 0; i < bucketAssets.id.length; i++) {
|
||||||
const { localDateTime, fileCreatedAt } = getTimes(
|
const { localDateTime, fileCreatedAt } = getTimes(
|
||||||
|
|
@ -194,6 +194,9 @@ export class MonthGroup {
|
||||||
}
|
}
|
||||||
this.addTimelineAsset(timelineAsset, addContext);
|
this.addTimelineAsset(timelineAsset, addContext);
|
||||||
}
|
}
|
||||||
|
if (preSorted) {
|
||||||
|
return addContext.unprocessedAssets;
|
||||||
|
}
|
||||||
|
|
||||||
for (const group of addContext.existingDayGroups) {
|
for (const group of addContext.existingDayGroups) {
|
||||||
group.sortAssets(this.#sortOrder);
|
group.sortAssets(this.#sortOrder);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue