refactor(web): replace per-asset viewport proximity with day-tier active indices

Binary search on asset positions replaces per-ViewerAsset $derived
proximity tracking. Reactive churn during scroll reduces from O(N)
per-asset deriveds to O(log N) per-day binary search.

Change-Id: Ib4bdaec5df4801d1347f41bbabd607956a6a6964

mobile/openapi/lib/model/time_bucket_asset_response_dto.dart

@@ -276,6 +276,8 @@ class TimeBucketAssetResponseDto {
 
   /// The list of required keys that must be present in a JSON.
   static const requiredKeys = <String>{
+    'city',
+    'country',
     'createdAt',
     'duration',
     'fileCreatedAt',

open-api/immich-openapi-specs.json

@@ -25324,6 +25324,8 @@
           }
         },
         "required": [
+          "city",
+          "country",
           "createdAt",
           "duration",
           "fileCreatedAt",

packages/sdk/src/fetch-client.ts

@@ -2612,9 +2612,9 @@ export type TagUpdateDto = {
 };
 export type TimeBucketAssetResponseDto = {
     /** Array of city names extracted from EXIF GPS data */
-    city?: (string | null)[];
+    city: (string | null)[];
     /** Array of country names extracted from EXIF GPS data */
-    country?: (string | null)[];
+    country: (string | null)[];
     /** Array of UTC timestamps when each asset was originally uploaded to Immich */
     createdAt: string[];
     /** Array of video/gif durations in milliseconds (null for static images) */

server/src/dtos/time-bucket.dto.ts

@@ -107,8 +107,8 @@ const TimeBucketAssetResponseSchema = z
     livePhotoVideoId: z
       .array(z.string().nullable())
       .describe('Array of live photo video asset IDs (null for non-live photos)'),
-    city: z.array(z.string().nullable()).optional().describe('Array of city names extracted from EXIF GPS data'),
-    country: z.array(z.string().nullable()).optional().describe('Array of country names extracted from EXIF GPS data'),
+    city: z.array(z.string().nullable()).describe('Array of city names extracted from EXIF GPS data'),
+    country: z.array(z.string().nullable()).describe('Array of country names extracted from EXIF GPS data'),
     latitude: z
       .array(z.number().nullable())
       .optional()

server/src/queries/asset.repository.sql

@@ -384,6 +384,8 @@ with
       asset."fileCreatedAt" at time zone 'utc' as "fileCreatedAt",
       asset."createdAt" at time zone 'utc' as "createdAt",
       encode("asset"."thumbhash", 'base64') as "thumbhash",
+      "asset_exif"."city",
+      "asset_exif"."country",
       "asset_exif"."projectionType",
       coalesce(
         case
@@ -396,8 +398,6 @@ with
         end,
         1
       ) as "ratio",
-      "asset_exif"."city",
-      "asset_exif"."country",
       "stack"
     from
       "asset"
@@ -432,6 +432,8 @@ with
   ),
   "agg" as (
     select
+      coalesce(array_agg("city"), '{}') as "city",
+      coalesce(array_agg("country"), '{}') as "country",
       coalesce(array_agg("duration"), '{}') as "duration",
       coalesce(array_agg("id"), '{}') as "id",
       coalesce(array_agg("visibility"), '{}') as "visibility",
@@ -447,8 +449,6 @@ with
       coalesce(array_agg("ratio"), '{}') as "ratio",
       coalesce(array_agg("status"), '{}') as "status",
       coalesce(array_agg("thumbhash"), '{}') as "thumbhash",
-      coalesce(array_agg("city"), '{}') as "city",
-      coalesce(array_agg("country"), '{}') as "country",
       coalesce(json_agg("stack"), '[]') as "stack"
     from
       "cte"

server/src/queries/search.repository.sql

@@ -134,7 +134,7 @@ from
   "cte"
 where
   "cte"."distance" <= $4
-rollback
+commit
 
 -- SearchRepository.searchPlaces
 select

server/src/repositories/asset.repository.ts

@@ -786,6 +786,8 @@ export class AssetRepository {
             sql`asset."fileCreatedAt" at time zone 'utc'`.as('fileCreatedAt'),
             sql`asset."createdAt" at time zone 'utc'`.as('createdAt'),
             eb.fn('encode', ['asset.thumbhash', sql.lit('base64')]).as('thumbhash'),
+            'asset_exif.city',
+            'asset_exif.country',
             'asset_exif.projectionType',
             eb.fn
               .coalesce(
@@ -799,9 +801,6 @@ export class AssetRepository {
               )
               .as('ratio'),
           ])
-          .$if(!auth.sharedLink || auth.sharedLink.showExif, (qb) =>
-            qb.select(['asset_exif.city', 'asset_exif.country']),
-          )
           .$if(!!options.withCoordinates, (qb) => qb.select(['asset_exif.latitude', 'asset_exif.longitude']))
           .where('asset.deletedAt', options.isTrashed ? 'is not' : 'is', null)
           .$if(options.visibility == undefined, withDefaultVisibility)
@@ -876,6 +875,8 @@ export class AssetRepository {
         qb
           .selectFrom('cte')
           .select((eb) => [
+            eb.fn.coalesce(eb.fn('array_agg', ['city']), sql.lit('{}')).as('city'),
+            eb.fn.coalesce(eb.fn('array_agg', ['country']), sql.lit('{}')).as('country'),
             eb.fn.coalesce(eb.fn('array_agg', ['duration']), sql.lit('{}')).as('duration'),
             eb.fn.coalesce(eb.fn('array_agg', ['id']), sql.lit('{}')).as('id'),
             eb.fn.coalesce(eb.fn('array_agg', ['visibility']), sql.lit('{}')).as('visibility'),
@@ -893,12 +894,6 @@ export class AssetRepository {
             eb.fn.coalesce(eb.fn('array_agg', ['status']), sql.lit('{}')).as('status'),
             eb.fn.coalesce(eb.fn('array_agg', ['thumbhash']), sql.lit('{}')).as('thumbhash'),
           ])
-          .$if(!auth.sharedLink || auth.sharedLink.showExif, (qb) =>
-            qb.select((eb) => [
-              eb.fn.coalesce(eb.fn('array_agg', ['city']), sql.lit('{}')).as('city'),
-              eb.fn.coalesce(eb.fn('array_agg', ['country']), sql.lit('{}')).as('country'),
-            ]),
-          )
           .$if(!!options.withCoordinates, (qb) =>
             qb.select((eb) => [
               eb.fn.coalesce(eb.fn('array_agg', ['latitude']), sql.lit('{}')).as('latitude'),

server/src/services/timeline.service.ts

@@ -66,10 +66,6 @@ export class TimelineService extends BaseService {
       await this.requireAccess({ auth, permission: Permission.TagRead, ids: [dto.tagId] });
     }
 
-    if (auth.sharedLink && !auth.sharedLink.showExif) {
-      dto.withCoordinates = false;
-    }
-
     if (dto.withPartners) {
       const requestedArchived = dto.visibility === AssetVisibility.Archive || dto.visibility === undefined;
       const requestedFavorite = dto.isFavorite === true || dto.isFavorite === false;

server/test/medium/specs/services/timeline.service.spec.ts

@@ -1,11 +1,10 @@
 import { BadRequestException } from '@nestjs/common';
 import { Kysely } from 'kysely';
-import { AssetVisibility, SharedLinkType } from 'src/enum';
+import { AssetVisibility } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
 import { AssetRepository } from 'src/repositories/asset.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { PartnerRepository } from 'src/repositories/partner.repository';
-import { SharedLinkRepository } from 'src/repositories/shared-link.repository';
 import { DB } from 'src/schema';
 import { TimelineService } from 'src/services/timeline.service';
 import { newMediumService } from 'test/medium.factory';
@@ -208,32 +207,4 @@ describe(TimelineService.name, () => {
       expect(response2).toEqual(expect.objectContaining({ id: [asset2.id, asset1.id], isFavorite: [true, false] }));
     });
   });
-
-  it('should strip geodata metadata if shared link without exif', async () => {
-    const { sut, ctx } = setup();
-    const sharedLinkRepo = ctx.get(SharedLinkRepository);
-
-    const { user } = await ctx.newUser();
-    const { asset } = await ctx.newAsset({
-      ownerId: user.id,
-      localDateTime: new Date('1970-02-12'),
-      deletedAt: new Date(),
-    });
-    const { album } = await ctx.newAlbum({ ownerId: user.id });
-    await ctx.newAlbumAsset({ albumId: album.id, assetId: asset.id });
-
-    const { id: sharedLinkId } = await sharedLinkRepo.create({
-      allowUpload: false,
-      key: Buffer.from('123'),
-      type: SharedLinkType.Album,
-      userId: user.id,
-      albumId: album.id,
-    });
-
-    await ctx.newExif({ assetId: asset.id, city: 'Austin', country: 'USA' });
-    const auth = factory.auth({ sharedLink: { id: sharedLinkId, showExif: false } });
-    const rawResponse = await sut.getTimeBucket(auth, { albumId: album.id, timeBucket: '1970-02-01', isTrashed: true });
-    const response = JSON.parse(rawResponse);
-    expect(response).not.toEqual(expect.objectContaining({ city: expect.any(Array), country: expect.any(Array) }));
-  });
 });

web/src/lib/components/AdaptiveImage.svelte

@@ -149,35 +149,29 @@
     return { width: 1, height: 1 };
   });
 
-  const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
-    () => {
-      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-      const { width, height } = scaleFn(imageDimensions, container);
-      if (maxRasterPixels === 0) {
-        return {
-          insetInlineStart: (container.width - width) / 2 + 'px',
-          top: (container.height - height) / 2 + 'px',
-          displayWidth: width + 'px',
-          displayHeight: height + 'px',
-          rasterWidth: width + 'px',
-          rasterHeight: height + 'px',
-          rasterScale: 1,
-        };
-      }
-      const nativeRatio = imageDimensions.width / width;
-      const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
-      const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
+  const { insetInlineStart, top, rasterWidth, rasterHeight, rasterScale } = $derived.by(() => {
+    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+    const { width, height } = scaleFn(imageDimensions, container);
+    if (maxRasterPixels === 0) {
       return {
         insetInlineStart: (container.width - width) / 2 + 'px',
         top: (container.height - height) / 2 + 'px',
-        displayWidth: width + 'px',
-        displayHeight: height + 'px',
-        rasterWidth: width * rasterRatio + 'px',
-        rasterHeight: height * rasterRatio + 'px',
-        rasterScale: 1 / rasterRatio,
+        rasterWidth: width + 'px',
+        rasterHeight: height + 'px',
+        rasterScale: 1,
       };
-    },
-  );
+    }
+    const nativeRatio = imageDimensions.width / width;
+    const budgetRatio = Math.sqrt(maxRasterPixels / Math.max(width * height, 1));
+    const rasterRatio = Math.max(1, Math.min(nativeRatio, budgetRatio));
+    return {
+      insetInlineStart: (container.width - width) / 2 + 'px',
+      top: (container.height - height) / 2 + 'px',
+      rasterWidth: width * rasterRatio + 'px',
+      rasterHeight: height * rasterRatio + 'px',
+      rasterScale: 1 / rasterRatio,
+    };
+  });
 
   const { status } = $derived(adaptiveImageLoader);
   const alt = $derived(status.urls.preview ? $getAltText(toTimelineAsset(asset)) : '');
@@ -222,78 +216,69 @@
   {@render backdrop?.()}
 
   <div
-    class="pointer-events-none absolute overflow-hidden"
+    class="pointer-events-none absolute"
     style:inset-inline-start={insetInlineStart}
     style:top
-    style:width={displayWidth}
-    style:height={displayHeight}
+    style:width={rasterWidth}
+    style:height={rasterHeight}
+    style:transform="scale({rasterScale})"
+    style:transform-origin="0 0"
+    style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
   >
-    <div
-      style:width={rasterWidth}
-      style:height={rasterHeight}
-      style:transform="scale({rasterScale})"
-      style:transform-origin="0 0"
-      style:will-change={maxRasterPixels > 0 ? 'transform' : undefined}
-    >
-      {#if show.alphaBackground}
-        <AlphaBackground />
-      {/if}
+    {#if show.alphaBackground}
+      <AlphaBackground />
+    {/if}
 
-      {#if show.thumbhash}
-        {#if asset.thumbhash}
-          <!-- Thumbhash / spinner layer  -->
-          <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
-        {:else if show.spinner}
-          <DelayedLoadingSpinner />
-        {/if}
+    {#if show.thumbhash}
+      {#if asset.thumbhash}
+        <!-- Thumbhash / spinner layer  -->
+        <Thumbhash base64ThumbHash={asset.thumbhash} class="absolute size-full" />
+      {:else if show.spinner}
+        <DelayedLoadingSpinner />
       {/if}
+    {/if}
 
-      {#if show.thumbnail}
-        <ImageLayer
-          {adaptiveImageLoader}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="thumbnail"
-          src={status.urls.thumbnail}
-          alt=""
-          role="presentation"
-          bind:ref={thumbnailElement}
-        />
-      {/if}
+    {#if show.thumbnail}
+      <ImageLayer
+        {adaptiveImageLoader}
+        width={rasterWidth}
+        height={rasterHeight}
+        quality="thumbnail"
+        src={status.urls.thumbnail}
+        alt=""
+        role="presentation"
+        bind:ref={thumbnailElement}
+      />
+    {/if}
 
-      {#if show.brokenAsset}
-        <BrokenAsset class="absolute size-full text-xl" />
-      {/if}
+    {#if show.brokenAsset}
+      <BrokenAsset class="absolute size-full text-xl" />
+    {/if}
 
-      {#if show.preview}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="preview"
-          src={status.urls.preview}
-          bind:ref={previewElement}
-        />
-      {/if}
+    {#if show.preview}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        width={rasterWidth}
+        height={rasterHeight}
+        {overlays}
+        quality="preview"
+        src={status.urls.preview}
+        bind:ref={previewElement}
+      />
+    {/if}
 
-      {#if show.original}
-        <ImageLayer
-          {adaptiveImageLoader}
-          {alt}
-          width={rasterWidth}
-          height={rasterHeight}
-          quality="original"
-          src={status.urls.original}
-          bind:ref={originalElement}
-        />
-      {/if}
-    </div>
-
-    {#if overlays}
-      <div class="pointer-events-none absolute inset-0">
-        {@render overlays()}
-      </div>
+    {#if show.original}
+      <ImageLayer
+        {adaptiveImageLoader}
+        {alt}
+        width={rasterWidth}
+        height={rasterHeight}
+        {overlays}
+        quality="original"
+        src={status.urls.original}
+        bind:ref={originalElement}
+      />
     {/if}
   </div>
 </div>

web/src/lib/components/ImageLayer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Image from '$lib/components/Image.svelte';
   import type { AdaptiveImageLoader, ImageQuality } from '$lib/utils/adaptive-image-loader.svelte';
+  import type { Snippet } from 'svelte';
 
   type Props = {
     adaptiveImageLoader: AdaptiveImageLoader;
@@ -11,9 +12,20 @@
     ref?: HTMLImageElement;
     width: string;
     height: string;
+    overlays?: Snippet;
   };
 
-  let { adaptiveImageLoader, quality, src, alt = '', role, ref = $bindable(), width, height }: Props = $props();
+  let {
+    adaptiveImageLoader,
+    quality,
+    src,
+    alt = '',
+    role,
+    ref = $bindable(),
+    width,
+    height,
+    overlays,
+  }: Props = $props();
 </script>
 
 {#key adaptiveImageLoader}
@@ -30,5 +42,6 @@
       draggable={false}
       data-testid={quality}
     />
+    {@render overlays?.()}
   </div>
 {/key}

web/src/lib/components/timeline/AssetLayout.svelte

@@ -30,14 +30,11 @@
 
   const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
   const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  const firstInOrNearViewport = $derived(viewerAssets.findIndex((a) => a.isInOrNearViewport));
-  const lastInOrNearViewport = $derived(viewerAssets.findLastIndex((a) => a.isInOrNearViewport));
 </script>
 
 <!-- Image grid -->
 <div data-image-grid class="relative overflow-clip" style:height={height + 'px'} style:width={width + 'px'}>
-  {#each viewerAssets.slice(firstInOrNearViewport, lastInOrNearViewport + 1) as viewerAsset (viewerAsset.id)}
+  {#each viewerAssets as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
 

web/src/lib/components/timeline/Month.svelte

@@ -100,7 +100,7 @@
 
     <AssetLayout
       {manager}
-      viewerAssets={timelineDay.viewerAssets}
+      viewerAssets={timelineDay.activeViewerAssets}
       height={timelineDay.height}
       width={timelineDay.width}
       {customThumbnailLayout}

web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts

@@ -53,17 +53,3 @@ export function updateTimelineMonthViewportProximity(timelineManager: TimelineMa
     timelineManager.clearDeferredLayout(month);
   }
 }
-
-export function calculateViewerAssetViewportProximity(
-  timelineManager: TimelineManager,
-  positionTop: number,
-  positionHeight: number,
-) {
-  const headerHeight = timelineManager.headerHeight;
-  return calculateViewportProximity(
-    positionTop,
-    positionTop + positionHeight,
-    timelineManager.visibleWindow.top - headerHeight,
-    timelineManager.visibleWindow.bottom + headerHeight,
-  );
-}

web/src/lib/managers/timeline-manager/timeline-day.svelte.ts

@@ -1,12 +1,31 @@
 import { AssetOrder, AssetOrderBy } from '@immich/sdk';
 import { SvelteSet } from 'svelte/reactivity';
-import type { CommonLayoutOptions } from '$lib/utils/layout-utils';
+import type { CommonLayoutOptions, CommonPosition } from '$lib/utils/layout-utils';
 import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
 import { getOrderingDate, plainDateTimeCompare } from '$lib/utils/timeline-util';
+import { TUNABLES } from '$lib/utils/tunables';
 import type { TimelineMonth } from './timeline-month.svelte';
 import type { Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';
 
+const {
+  TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
+} = TUNABLES;
+
+function lowerBound(assets: ViewerAsset[], target: number, key: (pos: CommonPosition) => number): number {
+  let lo = 0;
+  let hi = assets.length;
+  while (lo < hi) {
+    const mid = Math.floor((lo + hi) / 2);
+    if (key(assets[mid].position!) < target) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  return lo;
+}
+
 export class TimelineDay {
   readonly timelineMonth: TimelineMonth;
   readonly index: number;
@@ -18,12 +37,15 @@ export class TimelineDay {
   height = $state(0);
   width = $state(0);
 
+  // Assets in or near the viewport; active assets should be added to the DOM.
+  activeViewerAssets: ViewerAsset[] = $state([]);
+  isInOrNearViewport = $state(false);
+
   #top: number = $state(0);
   #start: number = $state(0);
   #row = $state(0);
   #col = $state(0);
   #deferredLayout = false;
-  #lastInOrNearViewport = -1;
 
   constructor(timelineMonth: TimelineMonth, index: number, day: number, groupTitle: string, orderBy: AssetOrderBy) {
     this.index = index;
@@ -149,18 +171,32 @@ export class TimelineDay {
     for (let i = 0; i < this.viewerAssets.length; i++) {
       this.viewerAssets[i].position = geometry.getPosition(i);
     }
+    this.updateAssetBoundaries();
+  }
+
+  updateAssetBoundaries() {
+    const manager = this.timelineMonth.timelineManager;
+    const visibleWindow = manager.visibleWindow;
+    if (this.viewerAssets.length === 0 || !this.viewerAssets[0].position) {
+      this.activeViewerAssets = [];
+      this.isInOrNearViewport = false;
+      return;
+    }
+
+    const dayOffset = this.absoluteTimelineDayTop;
+    const headerHeight = manager.headerHeight;
+    const expandedTop = visibleWindow.top - headerHeight - INTERSECTION_EXPAND_TOP - dayOffset;
+    const expandedBottom = visibleWindow.bottom + headerHeight + INTERSECTION_EXPAND_BOTTOM - dayOffset;
+
+    const first = lowerBound(this.viewerAssets, expandedTop, (p) => p.top + p.height);
+    const last = lowerBound(this.viewerAssets, expandedBottom, (p) => p.top) - 1;
+
+    const hasActive = last >= first && first < this.viewerAssets.length;
+    this.activeViewerAssets = hasActive ? this.viewerAssets.slice(first, last + 1) : [];
+    this.isInOrNearViewport = hasActive;
   }
 
   get absoluteTimelineDayTop() {
     return this.timelineMonth.top + this.#top;
   }
-
-  get isInOrNearViewport() {
-    if (this.#lastInOrNearViewport !== -1 && this.viewerAssets[this.#lastInOrNearViewport].isInOrNearViewport) {
-      return true;
-    }
-
-    this.#lastInOrNearViewport = this.viewerAssets.findIndex((viewAsset) => viewAsset.isInOrNearViewport);
-    return this.#lastInOrNearViewport !== -1;
-  }
 }

web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts

@@ -214,6 +214,11 @@ export class TimelineManager extends VirtualScrollManager {
 
     for (const month of this.months) {
       updateTimelineMonthViewportProximity(this, month);
+      if (month.isInOrNearViewport && month.isLoaded) {
+        for (const day of month.timelineDays) {
+          day.updateAssetBoundaries();
+        }
+      }
     }
 
     const month = this.months.find((month) => month.isInViewport);

web/src/lib/managers/timeline-manager/timeline-month.svelte.ts

@@ -179,8 +179,8 @@ export class TimelineMonth {
       );
 
       const timelineAsset: TimelineAsset = {
-        city: bucketAssets.city?.[i] ?? null,
-        country: bucketAssets.country?.[i] ?? null,
+        city: bucketAssets.city[i],
+        country: bucketAssets.country[i],
         duration: bucketAssets.duration[i],
         id: bucketAssets.id[i],
         visibility: bucketAssets.visibility[i],
@@ -254,7 +254,7 @@ export class TimelineMonth {
       addContext.newTimelineDays.add(timelineDay);
     }
 
-    const viewerAsset = new ViewerAsset(timelineDay, timelineAsset);
+    const viewerAsset = new ViewerAsset(timelineAsset);
     timelineDay.viewerAssets.push(viewerAsset);
     addContext.changedTimelineDays.add(timelineDay);
   }

web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts

@@ -1,36 +1,12 @@
 import type { CommonPosition } from '$lib/utils/layout-utils';
-import {
-  ViewportProximity,
-  calculateViewerAssetViewportProximity,
-  isInOrNearViewport,
-} from './internal/intersection-support.svelte';
-import type { TimelineDay } from './timeline-day.svelte';
 import type { TimelineAsset } from './types';
 
 export class ViewerAsset {
-  readonly #group: TimelineDay;
-
-  #viewportProximity = $derived.by(() => {
-    if (!this.position) {
-      return ViewportProximity.FarFromViewport;
-    }
-
-    const store = this.#group.timelineMonth.timelineManager;
-    const positionTop = this.#group.absoluteTimelineDayTop + this.position.top;
-
-    return calculateViewerAssetViewportProximity(store, positionTop, this.position.height);
-  });
-
-  get isInOrNearViewport() {
-    return isInOrNearViewport(this.#viewportProximity);
-  }
-
   position: CommonPosition | undefined = $state.raw();
   asset: TimelineAsset = $state() as TimelineAsset;
   id: string = $derived(this.asset.id);
 
-  constructor(group: TimelineDay, asset: TimelineAsset) {
-    this.#group = group;
+  constructor(asset: TimelineAsset) {
     this.asset = asset;
   }
 }

web/src/test-data/factories/asset-factory.ts

@@ -76,8 +76,8 @@ export const toResponseDto = (...timelineAsset: TimelineAsset[]) => {
   };
   for (const asset of timelineAsset) {
     const fileCreatedAt = fromTimelinePlainDateTime(asset.fileCreatedAt).toISO();
-    bucketAssets.city?.push(asset.city);
-    bucketAssets.country?.push(asset.country);
+    bucketAssets.city.push(asset.city);
+    bucketAssets.country.push(asset.country);
     bucketAssets.duration.push(asset.duration!);
     bucketAssets.id.push(asset.id);
     bucketAssets.visibility.push(asset.visibility);