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

* feat(web): map timeline panel

* update openapi

* remove #key

* add index on lat/lng

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 }));