feat(web): map timeline sidepanel (#26532)

* feat(web): map timeline panel

* update openapi

* remove #key

* add index on lat/lng

mobile/openapi/lib/api/timeline_api.dart

@@ -30,6 +30,9 @@ class TimelineApi {
   /// * [String] albumId:
   ///   Filter assets belonging to a specific album
   ///
+  /// * [String] bbox:
+  ///   Bounding box coordinates as west,south,east,north (WGS84)
+  ///
   /// * [bool] isFavorite:
   ///   Filter by favorite status (true for favorites only, false for non-favorites only)
   ///
@@ -63,7 +66,7 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<Response> getTimeBucketWithHttpInfo(String timeBucket, { String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
+  Future<Response> getTimeBucketWithHttpInfo(String timeBucket, { String? albumId, String? bbox, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/timeline/bucket';
 
@@ -77,6 +80,9 @@ class TimelineApi {
     if (albumId != null) {
       queryParams.addAll(_queryParams('', 'albumId', albumId));
     }
+    if (bbox != null) {
+      queryParams.addAll(_queryParams('', 'bbox', bbox));
+    }
     if (isFavorite != null) {
       queryParams.addAll(_queryParams('', 'isFavorite', isFavorite));
     }
@@ -141,6 +147,9 @@ class TimelineApi {
   /// * [String] albumId:
   ///   Filter assets belonging to a specific album
   ///
+  /// * [String] bbox:
+  ///   Bounding box coordinates as west,south,east,north (WGS84)
+  ///
   /// * [bool] isFavorite:
   ///   Filter by favorite status (true for favorites only, false for non-favorites only)
   ///
@@ -174,8 +183,8 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<TimeBucketAssetResponseDto?> getTimeBucket(String timeBucket, { String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketWithHttpInfo(timeBucket,  albumId: albumId, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, slug: slug, tagId: tagId, userId: userId, visibility: visibility, withCoordinates: withCoordinates, withPartners: withPartners, withStacked: withStacked, );
+  Future<TimeBucketAssetResponseDto?> getTimeBucket(String timeBucket, { String? albumId, String? bbox, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
+    final response = await getTimeBucketWithHttpInfo(timeBucket,  albumId: albumId, bbox: bbox, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, slug: slug, tagId: tagId, userId: userId, visibility: visibility, withCoordinates: withCoordinates, withPartners: withPartners, withStacked: withStacked, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }
@@ -200,6 +209,9 @@ class TimelineApi {
   /// * [String] albumId:
   ///   Filter assets belonging to a specific album
   ///
+  /// * [String] bbox:
+  ///   Bounding box coordinates as west,south,east,north (WGS84)
+  ///
   /// * [bool] isFavorite:
   ///   Filter by favorite status (true for favorites only, false for non-favorites only)
   ///
@@ -233,7 +245,7 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<Response> getTimeBucketsWithHttpInfo({ String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
+  Future<Response> getTimeBucketsWithHttpInfo({ String? albumId, String? bbox, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
     // ignore: prefer_const_declarations
     final apiPath = r'/timeline/buckets';
 
@@ -247,6 +259,9 @@ class TimelineApi {
     if (albumId != null) {
       queryParams.addAll(_queryParams('', 'albumId', albumId));
     }
+    if (bbox != null) {
+      queryParams.addAll(_queryParams('', 'bbox', bbox));
+    }
     if (isFavorite != null) {
       queryParams.addAll(_queryParams('', 'isFavorite', isFavorite));
     }
@@ -307,6 +322,9 @@ class TimelineApi {
   /// * [String] albumId:
   ///   Filter assets belonging to a specific album
   ///
+  /// * [String] bbox:
+  ///   Bounding box coordinates as west,south,east,north (WGS84)
+  ///
   /// * [bool] isFavorite:
   ///   Filter by favorite status (true for favorites only, false for non-favorites only)
   ///
@@ -340,8 +358,8 @@ class TimelineApi {
   ///
   /// * [bool] withStacked:
   ///   Include stacked assets in the response. When true, only primary assets from stacks are returned.
-  Future<List<TimeBucketsResponseDto>?> getTimeBuckets({ String? albumId, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
-    final response = await getTimeBucketsWithHttpInfo( albumId: albumId, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, slug: slug, tagId: tagId, userId: userId, visibility: visibility, withCoordinates: withCoordinates, withPartners: withPartners, withStacked: withStacked, );
+  Future<List<TimeBucketsResponseDto>?> getTimeBuckets({ String? albumId, String? bbox, bool? isFavorite, bool? isTrashed, String? key, AssetOrder? order, String? personId, String? slug, String? tagId, String? userId, AssetVisibility? visibility, bool? withCoordinates, bool? withPartners, bool? withStacked, }) async {
+    final response = await getTimeBucketsWithHttpInfo( albumId: albumId, bbox: bbox, isFavorite: isFavorite, isTrashed: isTrashed, key: key, order: order, personId: personId, slug: slug, tagId: tagId, userId: userId, visibility: visibility, withCoordinates: withCoordinates, withPartners: withPartners, withStacked: withStacked, );
     if (response.statusCode >= HttpStatus.badRequest) {
       throw ApiException(response.statusCode, await _decodeBodyBytes(response));
     }

open-api/immich-openapi-specs.json

@@ -13492,6 +13492,16 @@
               "type": "string"
             }
           },
+          {
+            "name": "bbox",
+            "required": false,
+            "in": "query",
+            "description": "Bounding box coordinates as west,south,east,north (WGS84)",
+            "schema": {
+              "example": "11.075683,49.416711,11.117589,49.454875",
+              "type": "string"
+            }
+          },
           {
             "name": "isFavorite",
             "required": false,
@@ -13668,6 +13678,16 @@
               "type": "string"
             }
           },
+          {
+            "name": "bbox",
+            "required": false,
+            "in": "query",
+            "description": "Bounding box coordinates as west,south,east,north (WGS84)",
+            "schema": {
+              "example": "11.075683,49.416711,11.117589,49.454875",
+              "type": "string"
+            }
+          },
           {
             "name": "isFavorite",
             "required": false,

open-api/typescript-sdk/src/fetch-client.ts

@@ -6421,8 +6421,9 @@ export function tagAssets({ id, bulkIdsDto }: {
 /**
  * Get time bucket
  */
-export function getTimeBucket({ albumId, isFavorite, isTrashed, key, order, personId, slug, tagId, timeBucket, userId, visibility, withCoordinates, withPartners, withStacked }: {
+export function getTimeBucket({ albumId, bbox, isFavorite, isTrashed, key, order, personId, slug, tagId, timeBucket, userId, visibility, withCoordinates, withPartners, withStacked }: {
     albumId?: string;
+    bbox?: string;
     isFavorite?: boolean;
     isTrashed?: boolean;
     key?: string;
@@ -6442,6 +6443,7 @@ export function getTimeBucket({ albumId, isFavorite, isTrashed, key, order, pers
         data: TimeBucketAssetResponseDto;
     }>(`/timeline/bucket${QS.query(QS.explode({
         albumId,
+        bbox,
         isFavorite,
         isTrashed,
         key,
@@ -6462,8 +6464,9 @@ export function getTimeBucket({ albumId, isFavorite, isTrashed, key, order, pers
 /**
  * Get time buckets
  */
-export function getTimeBuckets({ albumId, isFavorite, isTrashed, key, order, personId, slug, tagId, userId, visibility, withCoordinates, withPartners, withStacked }: {
+export function getTimeBuckets({ albumId, bbox, isFavorite, isTrashed, key, order, personId, slug, tagId, userId, visibility, withCoordinates, withPartners, withStacked }: {
     albumId?: string;
+    bbox?: string;
     isFavorite?: boolean;
     isTrashed?: boolean;
     key?: string;
@@ -6482,6 +6485,7 @@ export function getTimeBuckets({ albumId, isFavorite, isTrashed, key, order, per
         data: TimeBucketsResponseDto[];
     }>(`/timeline/buckets${QS.query(QS.explode({
         albumId,
+        bbox,
         isFavorite,
         isTrashed,
         key,

server/src/dtos/bbox.dto.ts

@@ -0,0 +1,25 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsLatitude, IsLongitude } from 'class-validator';
+import { IsGreaterThanOrEqualTo } from 'src/validation';
+
+export class BBoxDto {
+  @ApiProperty({ format: 'double', description: 'West longitude (-180 to 180)' })
+  @IsLongitude()
+  west!: number;
+
+  @ApiProperty({ format: 'double', description: 'South latitude (-90 to 90)' })
+  @IsLatitude()
+  south!: number;
+
+  @ApiProperty({
+    format: 'double',
+    description: 'East longitude (-180 to 180). May be less than west when crossing the antimeridian.',
+  })
+  @IsLongitude()
+  east!: number;
+
+  @ApiProperty({ format: 'double', description: 'North latitude (-90 to 90). Must be >= south.' })
+  @IsLatitude()
+  @IsGreaterThanOrEqualTo('south')
+  north!: number;
+}

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

@@ -1,7 +1,8 @@
 import { ApiProperty } from '@nestjs/swagger';
-
 import { IsString } from 'class-validator';
+import type { BBoxDto } from 'src/dtos/bbox.dto';
 import { AssetOrder, AssetVisibility } from 'src/enum';
+import { ValidateBBox } from 'src/utils/bbox';
 import { ValidateBoolean, ValidateEnum, ValidateUUID } from 'src/validation';
 
 export class TimeBucketDto {
@@ -59,6 +60,9 @@ export class TimeBucketDto {
     description: 'Include location data in the response',
   })
   withCoordinates?: boolean;
+
+  @ValidateBBox({ optional: true })
+  bbox?: BBoxDto;
 }
 
 export class TimeBucketAssetDto extends TimeBucketDto {

server/src/repositories/asset.repository.ts

@@ -1,5 +1,15 @@
 import { Injectable } from '@nestjs/common';
-import { ExpressionBuilder, Insertable, Kysely, NotNull, Selectable, sql, Updateable, UpdateResult } from 'kysely';
+import {
+  ExpressionBuilder,
+  Insertable,
+  Kysely,
+  NotNull,
+  Selectable,
+  SelectQueryBuilder,
+  sql,
+  Updateable,
+  UpdateResult,
+} from 'kysely';
 import { jsonArrayFrom } from 'kysely/helpers/postgres';
 import { isEmpty, isUndefined, omitBy } from 'lodash';
 import { InjectKysely } from 'nestjs-kysely';
@@ -36,6 +46,13 @@ import { globToSqlPattern } from 'src/utils/misc';
 
 export type AssetStats = Record<AssetType, number>;
 
+export interface BoundingBox {
+  west: number;
+  south: number;
+  east: number;
+  north: number;
+}
+
 interface AssetStatsOptions {
   isFavorite?: boolean;
   isTrashed?: boolean;
@@ -64,6 +81,7 @@ interface AssetBuilderOptions {
   assetType?: AssetType;
   visibility?: AssetVisibility;
   withCoordinates?: boolean;
+  bbox?: BoundingBox;
 }
 
 export interface TimeBucketOptions extends AssetBuilderOptions {
@@ -120,6 +138,34 @@ interface GetByIdsRelations {
 const distinctLocked = <T extends LockableProperty[] | null>(eb: ExpressionBuilder<DB, 'asset_exif'>, columns: T) =>
   sql<T>`nullif(array(select distinct unnest(${eb.ref('asset_exif.lockedProperties')} || ${columns})), '{}')`;
 
+const getBoundingCircle = (bbox: BoundingBox) => {
+  const { west, south, east, north } = bbox;
+  const eastUnwrapped = west <= east ? east : east + 360;
+  const centerLongitude = (((west + eastUnwrapped) / 2 + 540) % 360) - 180;
+  const centerLatitude = (south + north) / 2;
+  const radius = sql<number>`greatest(
+    earth_distance(ll_to_earth_public(${centerLatitude}, ${centerLongitude}), ll_to_earth_public(${south}, ${west})),
+    earth_distance(ll_to_earth_public(${centerLatitude}, ${centerLongitude}), ll_to_earth_public(${south}, ${east})),
+    earth_distance(ll_to_earth_public(${centerLatitude}, ${centerLongitude}), ll_to_earth_public(${north}, ${west})),
+    earth_distance(ll_to_earth_public(${centerLatitude}, ${centerLongitude}), ll_to_earth_public(${north}, ${east}))
+  )`;
+
+  return { centerLatitude, centerLongitude, radius };
+};
+
+const withBoundingBox = <T>(qb: SelectQueryBuilder<DB, 'asset' | 'asset_exif', T>, bbox: BoundingBox) => {
+  const { west, south, east, north } = bbox;
+  const withLatitude = qb.where('asset_exif.latitude', '>=', south).where('asset_exif.latitude', '<=', north);
+
+  if (west <= east) {
+    return withLatitude.where('asset_exif.longitude', '>=', west).where('asset_exif.longitude', '<=', east);
+  }
+
+  return withLatitude.where((eb) =>
+    eb.or([eb('asset_exif.longitude', '>=', west), eb('asset_exif.longitude', '<=', east)]),
+  );
+};
+
 @Injectable()
 export class AssetRepository {
   constructor(@InjectKysely() private db: Kysely<DB>) {}
@@ -651,6 +697,20 @@ export class AssetRepository {
           .select(truncatedDate<Date>().as('timeBucket'))
           .$if(!!options.isTrashed, (qb) => qb.where('asset.status', '!=', AssetStatus.Deleted))
           .where('asset.deletedAt', options.isTrashed ? 'is not' : 'is', null)
+          .$if(!!options.bbox, (qb) => {
+            const bbox = options.bbox!;
+            const circle = getBoundingCircle(bbox);
+
+            const withBoundingCircle = qb
+              .innerJoin('asset_exif', 'asset.id', 'asset_exif.assetId')
+              .where(
+                sql`earth_box(ll_to_earth_public(${circle.centerLatitude}, ${circle.centerLongitude}), ${circle.radius})`,
+                '@>',
+                sql`ll_to_earth_public(asset_exif.latitude, asset_exif.longitude)`,
+              );
+
+            return withBoundingBox(withBoundingCircle, bbox);
+          })
           .$if(options.visibility === undefined, withDefaultVisibility)
           .$if(!!options.visibility, (qb) => qb.where('asset.visibility', '=', options.visibility!))
           .$if(!!options.albumId, (qb) =>
@@ -725,6 +785,18 @@ export class AssetRepository {
           .where('asset.deletedAt', options.isTrashed ? 'is not' : 'is', null)
           .$if(options.visibility == undefined, withDefaultVisibility)
           .$if(!!options.visibility, (qb) => qb.where('asset.visibility', '=', options.visibility!))
+          .$if(!!options.bbox, (qb) => {
+            const bbox = options.bbox!;
+            const circle = getBoundingCircle(bbox);
+
+            const withBoundingCircle = qb.where(
+              sql`earth_box(ll_to_earth_public(${circle.centerLatitude}, ${circle.centerLongitude}), ${circle.radius})`,
+              '@>',
+              sql`ll_to_earth_public(asset_exif.latitude, asset_exif.longitude)`,
+            );
+
+            return withBoundingBox(withBoundingCircle, bbox);
+          })
           .where(truncatedDate(), '=', timeBucket.replace(/^[+-]/, ''))
           .$if(!!options.albumId, (qb) =>
             qb.where((eb) =>

server/src/schema/migrations/1772121424533-AddAssetExifGistEarthcoord.ts

@@ -0,0 +1,11 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`CREATE INDEX "IDX_asset_exif_gist_earthcoord" ON "asset_exif" USING gist (ll_to_earth_public(latitude, longitude));`.execute(db);
+  await sql`INSERT INTO "migration_overrides" ("name", "value") VALUES ('index_IDX_asset_exif_gist_earthcoord', '{"type":"index","name":"IDX_asset_exif_gist_earthcoord","sql":"CREATE INDEX \\"IDX_asset_exif_gist_earthcoord\\" ON \\"asset_exif\\" USING gist (ll_to_earth_public(latitude, longitude));"}'::jsonb);`.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`DROP INDEX "IDX_asset_exif_gist_earthcoord";`.execute(db);
+  await sql`DELETE FROM "migration_overrides" WHERE "name" = 'index_IDX_asset_exif_gist_earthcoord';`.execute(db);
+}

server/src/schema/tables/asset-exif.table.ts

@@ -1,9 +1,23 @@
-import { Column, ForeignKeyColumn, Generated, Int8, Table, Timestamp, UpdateDateColumn } from '@immich/sql-tools';
+import {
+  Column,
+  ForeignKeyColumn,
+  Generated,
+  Index,
+  Int8,
+  Table,
+  Timestamp,
+  UpdateDateColumn,
+} from '@immich/sql-tools';
 import { LockableProperty } from 'src/database';
 import { UpdatedAtTrigger, UpdateIdColumn } from 'src/decorators';
 import { AssetTable } from 'src/schema/tables/asset.table';
 
 @Table('asset_exif')
+@Index({
+  name: 'IDX_asset_exif_gist_earthcoord',
+  using: 'gist',
+  expression: 'll_to_earth_public(latitude, longitude)',
+})
 @UpdatedAtTrigger('asset_exif_updatedAt')
 export class AssetExifTable {
   @ForeignKeyColumn(() => AssetTable, { onDelete: 'CASCADE', primary: true })

server/src/services/timeline.service.spec.ts

@@ -23,6 +23,24 @@ describe(TimelineService.name, () => {
         userIds: [authStub.admin.user.id],
       });
     });
+
+    it('should pass bbox options to repository when all bbox fields are provided', async () => {
+      mocks.asset.getTimeBuckets.mockResolvedValue([{ timeBucket: 'bucket', count: 1 }]);
+
+      await sut.getTimeBuckets(authStub.admin, {
+        bbox: {
+          west: -70,
+          south: -30,
+          east: 120,
+          north: 55,
+        },
+      });
+
+      expect(mocks.asset.getTimeBuckets).toHaveBeenCalledWith({
+        userIds: [authStub.admin.user.id],
+        bbox: { west: -70, south: -30, east: 120, north: 55 },
+      });
+    });
   });
 
   describe('getTimeBucket', () => {

server/src/utils/bbox.ts

@@ -0,0 +1,32 @@
+import { applyDecorators } from '@nestjs/common';
+import { ApiPropertyOptions } from '@nestjs/swagger';
+import { Transform, Type } from 'class-transformer';
+import { IsNotEmpty, ValidateNested } from 'class-validator';
+import { Property } from 'src/decorators';
+import { BBoxDto } from 'src/dtos/bbox.dto';
+import { Optional } from 'src/validation';
+
+type BBoxOptions = { optional?: boolean };
+export const ValidateBBox = (options: BBoxOptions & ApiPropertyOptions = {}) => {
+  const { optional, ...apiPropertyOptions } = options;
+
+  return applyDecorators(
+    Transform(({ value }) => {
+      if (typeof value !== 'string') {
+        return value;
+      }
+
+      const [west, south, east, north] = value.split(',', 4).map(Number);
+      return Object.assign(new BBoxDto(), { west, south, east, north });
+    }),
+    Type(() => BBoxDto),
+    ValidateNested(),
+    Property({
+      type: 'string',
+      description: 'Bounding box coordinates as west,south,east,north (WGS84)',
+      example: '11.075683,49.416711,11.117589,49.454875',
+      ...apiPropertyOptions,
+    }),
+    optional ? Optional({}) : IsNotEmpty(),
+  );
+};

server/src/validation.ts

@@ -427,3 +427,25 @@ export function IsIPRange(options: IsIPRangeOptions, validationOptions?: Validat
     validationOptions,
   );
 }
+
+@ValidatorConstraint({ name: 'isGreaterThanOrEqualTo' })
+export class IsGreaterThanOrEqualToConstraint implements ValidatorConstraintInterface {
+  validate(value: unknown, args: ValidationArguments) {
+    const relatedPropertyName = args.constraints?.[0] as string;
+    const relatedValue = (args.object as Record<string, unknown>)[relatedPropertyName];
+    if (!Number.isFinite(value) || !Number.isFinite(relatedValue)) {
+      return true;
+    }
+
+    return Number(value) >= Number(relatedValue);
+  }
+
+  defaultMessage(args: ValidationArguments) {
+    const relatedPropertyName = args.constraints?.[0] as string;
+    return `${args.property} must be greater than or equal to ${relatedPropertyName}`;
+  }
+}
+
+export const IsGreaterThanOrEqualTo = (property: string, validationOptions?: ValidationOptions) => {
+  return Validate(IsGreaterThanOrEqualToConstraint, [property], validationOptions);
+};

web/src/lib/components/shared-components/map/MapTimelinePanel.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import type { SelectionBBox } from '$lib/components/shared-components/map/types';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import LinkLivePhotoAction from '$lib/components/timeline/actions/LinkLivePhotoAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import StackAction from '$lib/components/timeline/actions/StackAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
+  import Portal from '$lib/elements/Portal.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { getAssetBulkActions } from '$lib/services/asset.service';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { locale, mapSettings } from '$lib/stores/preferences.store';
+  import { preferences, user } from '$lib/stores/user.store';
+  import {
+    updateStackedAssetInTimeline,
+    updateUnstackedAssetInTimeline,
+    type OnLink,
+    type OnUnlink,
+  } from '$lib/utils/actions';
+  import { AssetVisibility } from '@immich/sdk';
+  import { ActionButton, CloseButton, CommandPaletteDefaultProvider, Icon } from '@immich/ui';
+  import { mdiDotsVertical, mdiImageMultiple } from '@mdi/js';
+  import { ceil, floor } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    bbox: SelectionBBox;
+    selectedClusterIds: Set<string>;
+    assetCount: number;
+    onClose: () => void;
+  }
+
+  let { bbox, selectedClusterIds, assetCount, onClose }: Props = $props();
+
+  const assetInteraction = new AssetInteraction();
+  let timelineManager = $state<TimelineManager>() as TimelineManager;
+  let selectedAssets = $derived(assetInteraction.selectedAssets);
+  let isAssetStackSelected = $derived(selectedAssets.length === 1 && !!selectedAssets[0].stack);
+  let isLinkActionAvailable = $derived.by(() => {
+    const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
+    const isLivePhotoCandidate =
+      selectedAssets.length === 2 &&
+      selectedAssets.some((asset) => asset.isImage) &&
+      selectedAssets.some((asset) => asset.isVideo);
+
+    return assetInteraction.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
+  });
+  const isAllUserOwned = $derived($user && selectedAssets.every((asset) => asset.ownerId === $user.id));
+
+  const handleLink: OnLink = ({ still, motion }) => {
+    timelineManager.removeAssets([motion.id]);
+    timelineManager.upsertAssets([still]);
+  };
+
+  const handleUnlink: OnUnlink = ({ still, motion }) => {
+    timelineManager.upsertAssets([motion]);
+    timelineManager.upsertAssets([still]);
+  };
+
+  const handleSetVisibility = (assetIds: string[]) => {
+    timelineManager.removeAssets(assetIds);
+    assetInteraction.clearMultiselect();
+  };
+
+  const handleEscape = () => {
+    assetInteraction.clearMultiselect();
+  };
+
+  const timelineBoundingBox = $derived(
+    `${floor(bbox.west, 6)},${floor(bbox.south, 6)},${ceil(bbox.east, 6)},${ceil(bbox.north, 6)}`,
+  );
+
+  const timelineOptions = $derived({
+    bbox: timelineBoundingBox,
+    visibility: $mapSettings.includeArchived ? undefined : AssetVisibility.Timeline,
+    isFavorite: $mapSettings.onlyFavorites || undefined,
+    withPartners: $mapSettings.withPartners || undefined,
+    assetFilter: selectedClusterIds,
+  });
+
+  const displayedAssetCount = $derived(timelineManager?.assetCount ?? assetCount);
+
+  $effect.pre(() => {
+    void timelineOptions;
+    assetInteraction.clearMultiselect();
+  });
+</script>
+
+<aside class="h-full w-full overflow-hidden bg-immich-bg dark:bg-immich-dark-bg flex flex-col contain-content">
+  <div class="flex items-center justify-between border-b border-gray-200 dark:border-immich-dark-gray pb-1 pe-1">
+    <div class="flex items-center gap-2">
+      <Icon icon={mdiImageMultiple} size="20" />
+      <p class="text-sm font-medium text-immich-fg dark:text-immich-dark-fg">
+        {displayedAssetCount.toLocaleString($locale)}
+        {$t('assets')}
+      </p>
+    </div>
+    <CloseButton onclick={onClose} />
+  </div>
+
+  <div class="min-h-0 flex-1">
+    <Timeline
+      bind:timelineManager
+      enableRouting={false}
+      options={timelineOptions}
+      onEscape={handleEscape}
+      {assetInteraction}
+      showArchiveIcon
+    />
+  </div>
+</aside>
+
+{#if assetInteraction.selectionActive}
+  {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+  <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
+
+  <Portal target="body">
+    <AssetSelectControlBar
+      ownerId={$user.id}
+      assets={assetInteraction.selectedAssets}
+      clearSelect={() => assetInteraction.clearMultiselect()}
+    >
+      <CreateSharedLink />
+      <SelectAllAssets {timelineManager} {assetInteraction} />
+      <ActionButton action={Actions.AddToAlbum} />
+
+      {#if isAllUserOwned}
+        <FavoriteAction
+          removeFavorite={assetInteraction.isAllFavorite}
+          onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
+        />
+
+        <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+          <DownloadAction menuItem />
+          {#if assetInteraction.selectedAssets.length > 1 || isAssetStackSelected}
+            <StackAction
+              unstack={isAssetStackSelected}
+              onStack={(result) => updateStackedAssetInTimeline(timelineManager, result)}
+              onUnstack={(assets) => updateUnstackedAssetInTimeline(timelineManager, assets)}
+            />
+          {/if}
+          {#if isLinkActionAvailable}
+            <LinkLivePhotoAction
+              menuItem
+              unlink={assetInteraction.selectedAssets.length === 1}
+              onLink={handleLink}
+              onUnlink={handleUnlink}
+            />
+          {/if}
+          <ChangeDate menuItem />
+          <ChangeDescription menuItem />
+          <ChangeLocation menuItem />
+          <ArchiveAction
+            menuItem
+            unarchive={assetInteraction.isAllArchived}
+            onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
+          />
+          {#if $preferences.tags.enabled}
+            <TagAction menuItem />
+          {/if}
+          <DeleteAssets
+            menuItem
+            onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
+            onUndoDelete={(assets) => timelineManager.upsertAssets(assets)}
+          />
+          <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
+          <hr />
+          <ActionMenuItem action={Actions.RegenerateThumbnailJob} />
+          <ActionMenuItem action={Actions.RefreshMetadataJob} />
+          <ActionMenuItem action={Actions.TranscodeVideoJob} />
+        </ButtonContextMenu>
+      {:else}
+        <DownloadAction />
+      {/if}
+    </AssetSelectControlBar>
+  </Portal>
+{/if}

web/src/lib/components/shared-components/map/map.svelte

@@ -49,6 +49,7 @@
     Popup,
     ScaleControl,
   } from 'svelte-maplibre';
+  import type { SelectionBBox } from './types';
 
   interface Props {
     mapMarkers?: MapMarkerResponseDto[];
@@ -61,6 +62,7 @@
     useLocationPin?: boolean;
     onOpenInMapView?: (() => Promise<void> | void) | undefined;
     onSelect?: (assetIds: string[]) => void;
+    onClusterSelect?: (assetIds: string[], bbox: SelectionBBox) => void;
     onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
     popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
     rounded?: boolean;
@@ -79,6 +81,7 @@
     useLocationPin = false,
     onOpenInMapView = undefined,
     onSelect = () => {},
+    onClusterSelect,
     onClickPoint = () => {},
     popup,
     rounded = false,
@@ -131,9 +134,30 @@
       return;
     }
 
-    const mapSource = map?.getSource('geojson') as GeoJSONSource;
+    const mapSource = map.getSource('geojson') as GeoJSONSource;
     const leaves = await mapSource.getClusterLeaves(clusterId, 10_000, 0);
-    const ids = leaves.map((leaf) => leaf.properties?.id);
+    const ids = leaves.map((leaf) => leaf.properties?.id as string);
+
+    if (onClusterSelect && ids.length > 1) {
+      const [firstLongitude, firstLatitude] = (leaves[0].geometry as Point).coordinates;
+      let west = firstLongitude;
+      let south = firstLatitude;
+      let east = firstLongitude;
+      let north = firstLatitude;
+
+      for (const leaf of leaves.slice(1)) {
+        const [longitude, latitude] = (leaf.geometry as Point).coordinates;
+        west = Math.min(west, longitude);
+        south = Math.min(south, latitude);
+        east = Math.max(east, longitude);
+        north = Math.max(north, latitude);
+      }
+
+      const bbox = { west, south, east, north };
+      onClusterSelect(ids, bbox);
+      return;
+    }
+
     onSelect(ids);
   }
 

web/src/lib/components/shared-components/map/types.ts

@@ -0,0 +1,6 @@
+export type SelectionBBox = {
+  west: number;
+  south: number;
+  east: number;
+  north: number;
+};

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

@@ -196,6 +196,11 @@ export class MonthGroup {
         timelineAsset.latitude = bucketAssets.latitude?.[i];
         timelineAsset.longitude = bucketAssets.longitude?.[i];
       }
+
+      if (this.timelineManager.isExcluded(timelineAsset)) {
+        continue;
+      }
+
       this.addTimelineAsset(timelineAsset, addContext);
     }
     if (preSorted) {

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

@@ -258,10 +258,16 @@ export class TimelineManager extends VirtualScrollManager {
     if (this.#options !== TimelineManager.#INIT_OPTIONS && isEqual(this.#options, options)) {
       return;
     }
-    await this.initTask.reset();
-    await this.#init(options);
-    this.updateViewportGeometry(false);
-    this.#createScrubberMonths();
+
+    this.suspendTransitions = true;
+    try {
+      await this.initTask.reset();
+      await this.#init(options);
+      this.updateViewportGeometry(false);
+      this.#createScrubberMonths();
+    } finally {
+      this.suspendTransitions = false;
+    }
   }
 
   async #init(options: TimelineManagerOptions) {
@@ -589,7 +595,8 @@ export class TimelineManager extends VirtualScrollManager {
     return (
       isMismatched(this.#options.visibility, asset.visibility) ||
       isMismatched(this.#options.isFavorite, asset.isFavorite) ||
-      isMismatched(this.#options.isTrashed, asset.isTrashed)
+      isMismatched(this.#options.isTrashed, asset.isTrashed) ||
+      (this.#options.assetFilter !== undefined && !this.#options.assetFilter.has(asset.id))
     );
   }
 

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

@@ -8,6 +8,7 @@ export type AssetApiGetTimeBucketsRequest = Parameters<typeof import('@immich/sd
 export type TimelineManagerOptions = Omit<AssetApiGetTimeBucketsRequest, 'size'> & {
   timelineAlbumId?: string;
   deferInit?: boolean;
+  assetFilter?: Set<string>;
 };
 
 export type AssetDescriptor = { id: string };

web/src/routes/(user)/map/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import MapTimelinePanel from '$lib/components/shared-components/map/MapTimelinePanel.svelte';
+  import type { SelectionBBox } from '$lib/components/shared-components/map/types';
   import { timeToLoadTheMap } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { handlePromiseError } from '$lib/utils';
   import { delay } from '$lib/utils/asset-utils';
   import { navigate } from '$lib/utils/navigation';
-  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
-  import { onDestroy, untrack } from 'svelte';
+  import { onDestroy } from 'svelte';
   import type { PageData } from './$types';
 
   interface Props {
@@ -24,7 +23,15 @@
 
   let { isViewing: showAssetViewer, asset: viewingAsset, setAssetId } = assetViewingStore;
 
-  let viewingAssets: string[] = $state([]);
+  let selectedClusterIds = $state.raw(new Set<string>());
+  let selectedClusterBBox = $state.raw<SelectionBBox>();
+  let isTimelinePanelVisible = $state(false);
+
+  function closeTimelinePanel() {
+    isTimelinePanelVisible = false;
+    selectedClusterBBox = undefined;
+    selectedClusterIds = new Set();
+  }
 
   onDestroy(() => {
     assetViewingStore.showAssetViewer(false);
@@ -35,96 +42,58 @@
   }
 
   async function onViewAssets(assetIds: string[]) {
-    viewingAssets = assetIds;
     await setAssetId(assetIds[0]);
+    closeTimelinePanel();
   }
 
-  async function navigateRandom() {
-    if (viewingAssets.length <= 0) {
-      return undefined;
-    }
-    const index = Math.floor(Math.random() * viewingAssets.length);
-    const asset = await setAssetId(viewingAssets[index]);
-    await navigate({ targetRoute: 'current', assetId: $viewingAsset.id });
-    return asset;
+  function onClusterSelect(assetIds: string[], bbox: SelectionBBox) {
+    selectedClusterIds = new Set(assetIds);
+    selectedClusterBBox = bbox;
+    isTimelinePanelVisible = true;
+    assetViewingStore.showAssetViewer(false);
+    handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));
   }
-
-  const getNextAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
-    if (!currentAsset) {
-      return;
-    }
-    const cursor = viewingAssets.indexOf(currentAsset.id);
-    if (cursor < viewingAssets.length - 1) {
-      const id = viewingAssets[cursor + 1];
-      const asset = await getAssetInfo({ ...authManager.params, id });
-      if (preload) {
-        void getNextAsset(asset, false);
-      }
-      return asset;
-    }
-  };
-
-  const getPreviousAsset = async (currentAsset: AssetResponseDto | undefined, preload: boolean = true) => {
-    if (!currentAsset) {
-      return;
-    }
-    const cursor = viewingAssets.indexOf(currentAsset.id);
-    if (cursor <= 0) {
-      return;
-    }
-    const id = viewingAssets[cursor - 1];
-    const asset = await getAssetInfo({ ...authManager.params, id });
-    if (preload) {
-      void getPreviousAsset(asset, false);
-    }
-    return asset;
-  };
-
-  let assetCursor = $state<AssetCursor>({
-    current: $viewingAsset,
-    previousAsset: undefined,
-    nextAsset: undefined,
-  });
-
-  const loadCloseAssets = async (currentAsset: AssetResponseDto) => {
-    const [nextAsset, previousAsset] = await Promise.all([getNextAsset(currentAsset), getPreviousAsset(currentAsset)]);
-    assetCursor = {
-      current: currentAsset,
-      nextAsset,
-      previousAsset,
-    };
-  };
-
-  //TODO: replace this with async derived in svelte 6
-  $effect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    $viewingAsset;
-    untrack(() => void loadCloseAssets($viewingAsset));
-  });
 </script>
 
 {#if featureFlagsManager.value.map}
   <UserPageLayout title={data.meta.title}>
-    <div class="isolate h-full w-full">
-      {#await import('$lib/components/shared-components/map/map.svelte')}
-        {#await delay(timeToLoadTheMap) then}
-          <!-- show the loading spinner only if loading the map takes too much time -->
-          <div class="flex items-center justify-center h-full w-full">
-            <LoadingSpinner />
-          </div>
+    <div class="isolate flex h-full w-full flex-col sm:flex-row">
+      <div
+        class={[
+          'min-h-0',
+          isTimelinePanelVisible ? 'h-1/2 w-full pb-2 sm:h-full sm:w-2/3 sm:pe-2 sm:pb-0' : 'h-full w-full',
+        ]}
+      >
+        {#await import('$lib/components/shared-components/map/map.svelte')}
+          {#await delay(timeToLoadTheMap) then}
+            <!-- show the loading spinner only if loading the map takes too much time -->
+            <div class="flex items-center justify-center h-full w-full">
+              <LoadingSpinner />
+            </div>
+          {/await}
+        {:then { default: Map }}
+          <Map hash onSelect={onViewAssets} {onClusterSelect} />
         {/await}
-      {:then { default: Map }}
-        <Map hash onSelect={onViewAssets} />
-      {/await}
+      </div>
+
+      {#if isTimelinePanelVisible && selectedClusterBBox}
+        <div class="h-1/2 min-h-0 w-full pt-2 sm:h-full sm:w-1/3 sm:ps-2 sm:pt-0">
+          <MapTimelinePanel
+            bbox={selectedClusterBBox}
+            {selectedClusterIds}
+            assetCount={selectedClusterIds.size}
+            onClose={closeTimelinePanel}
+          />
+        </div>
+      {/if}
     </div>
   </UserPageLayout>
   <Portal target="body">
-    {#if $showAssetViewer && assetCursor.current}
+    {#if $showAssetViewer}
       {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
         <AssetViewer
-          cursor={assetCursor}
-          showNavigation={viewingAssets.length > 1}
-          onRandom={navigateRandom}
+          cursor={{ current: $viewingAsset }}
+          showNavigation={false}
           onClose={() => {
             assetViewingStore.showAssetViewer(false);
             handlePromiseError(navigate({ targetRoute: 'current', assetId: null }));