feat: enhance search (#7127)

* feat: hybrid search * fixing normal search * building out the query * okla * filters * date * order by date * Remove hybrid search endpoint * remove search hybrid endpoint * faces query * search for person * search and pagination * with exif * with exif * justify gallery viewer * memory view * Fixed userId is null * openapi and styling * searchdto * lint and format * remove term * generate sql * fix test * chips * not showing true * pr feedback * pr feedback * nit name * linting * pr feedback * styling * linting
2025-11-24 23:40:45 +09:00 · 2024-02-17 11:00:55 -06:00
parent 60ba37b3a7
commit 69983ff83a
40 changed files with 3400 additions and 2585 deletions
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -51,7 +51,7 @@
 <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
  <div
    id="asset-selection-app-bar"
-    class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[20%_60%_20%] lg:grid-cols-3 ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
+    class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[15%_70%_15%] lg:grid-cols-[25%_50%_25%]  ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
      forceDark && 'bg-immich-dark-gray text-white'
    }`}
  >
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -2,13 +2,14 @@
  import { page } from '$app/stores';
  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import type { BucketPosition } from '$lib/stores/assets.store';
+  import type { BucketPosition, Viewport } from '$lib/stores/assets.store';
  import { handleError } from '$lib/utils/handle-error';
-  import { getThumbnailSize } from '$lib/utils/thumbnail-util';
-  import { ThumbnailFormat, type AssetResponseDto } from '@immich/sdk';
+  import { type AssetResponseDto } from '@immich/sdk';
  import { createEventDispatcher, onDestroy } from 'svelte';
-  import { flip } from 'svelte/animate';
  import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
+  import justifiedLayout from 'justified-layout';
+  import { getAssetRatio } from '$lib/utils/asset-utils';
+  import { calculateWidth } from '$lib/utils/timeline-util';

  const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();

@@ -16,14 +17,12 @@
  export let selectedAssets: Set<AssetResponseDto> = new Set();
  export let disableAssetSelect = false;
  export let showArchiveIcon = false;
+  export let viewport: Viewport;

  let { isViewing: showAssetViewer } = assetViewingStore;

  let selectedAsset: AssetResponseDto;
  let currentViewAssetIndex = 0;
-  let viewWidth: number;
-  $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
-
  $: isMultiSelectionMode = selectedAssets.size > 0;

  const viewAssetHandler = (event: CustomEvent) => {
@@ -86,23 +85,45 @@
  onDestroy(() => {
    $showAssetViewer = false;
  });
+
+  $: geometry = (() => {
+    const justifiedLayoutResult = justifiedLayout(
+      assets.map((asset) => getAssetRatio(asset)),
+      {
+        boxSpacing: 2,
+        containerWidth: Math.floor(viewport.width),
+        containerPadding: 0,
+        targetRowHeightTolerance: 0.15,
+        targetRowHeight: 235,
+      },
+    );
+
+    return {
+      ...justifiedLayoutResult,
+      containerWidth: calculateWidth(justifiedLayoutResult.boxes),
+    };
+  })();
 </script>

 {#if assets.length > 0}
-  <div class="flex w-full flex-wrap gap-1 pb-20" bind:clientWidth={viewWidth}>
-    {#each assets as asset, i (asset.id)}
-      <div animate:flip={{ duration: 500 }}>
+  <div class="relative" style="height: {geometry.containerHeight}px;width: {geometry.containerWidth}px ">
+    {#each assets as asset, i (i)}
+      <div
+        class="absolute"
+        style="width: {geometry.boxes[i].width}px; height: {geometry.boxes[i].height}px; top: {geometry.boxes[i]
+          .top}px; left: {geometry.boxes[i].left}px"
+      >
        <Thumbnail
          {asset}
-          {thumbnailSize}
          readonly={disableAssetSelect}
-          format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
          on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
          on:select={selectAssetHandler}
          on:intersected={(event) =>
            i === Math.max(1, assets.length - 7) ? dispatch('intersected', event.detail) : undefined}
          selected={selectedAssets.has(asset)}
          {showArchiveIcon}
+          thumbnailWidth={geometry.boxes[i].width}
+          thumbnailHeight={geometry.boxes[i].height}
        />
      </div>
    {/each}
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -2,12 +2,18 @@
  import { AppRoute } from '$lib/constants';
  import Icon from '$lib/components/elements/icon.svelte';
  import { goto } from '$app/navigation';
-  import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
+  import {
+    isSearchEnabled,
+    preventRaceConditionSearchBar,
+    savedSearchTerms,
+    searchQuery,
+  } from '$lib/stores/search.store';
  import { clickOutside } from '$lib/utils/click-outside';
  import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
  import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
  import SearchHistoryBox from './search-history-box.svelte';
  import SearchFilterBox from './search-filter-box.svelte';
+  import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
  export let value = '';
  export let grayTheme: boolean;

@@ -17,28 +23,17 @@
  let showFilter = false;
  $: showClearIcon = value.length > 0;

-  function onSearch() {
-    let smartSearch = 'true';
-    let searchValue = value;
-
-    if (value.slice(0, 2) == 'm:') {
-      smartSearch = 'false';
-      searchValue = value.slice(2);
-    }
-
-    $savedSearchTerms = $savedSearchTerms.filter((item) => item !== value);
-    saveSearchTerm(value);
-
+  const onSearch = (payload: SmartSearchDto | MetadataSearchDto) => {
    const parameters = new URLSearchParams({
-      q: searchValue,
-      smart: smartSearch,
-      take: '100',
+      query: JSON.stringify(payload),
    });

    showHistory = false;
+    showFilter = false;
    $isSearchEnabled = false;
+    $searchQuery = payload;
    goto(`${AppRoute.SEARCH}?${parameters}`, { invalidateAll: true });
-  }
+  };

  const clearSearchTerm = (searchTerm: string) => {
    input.focus();
@@ -70,6 +65,26 @@

    showHistory = false;
    $isSearchEnabled = false;
+    showFilter = false;
+  };
+
+  const onHistoryTermClick = (searchTerm: string) => {
+    const searchPayload = { query: searchTerm };
+    onSearch(searchPayload);
+  };
+
+  const onFilterClick = () => {
+    showFilter = !showFilter;
+    value = '';
+
+    if (showFilter) {
+      showHistory = false;
+    }
+  };
+
+  const onSubmit = () => {
+    onSearch({ query: value });
+    saveSearchTerm(value);
  };
 </script>

@@ -80,7 +95,7 @@
    class="relative select-text text-sm"
    action={AppRoute.SEARCH}
    on:reset={() => (value = '')}
-    on:submit|preventDefault={() => onSearch()}
+    on:submit|preventDefault={onSubmit}
  >
    <label>
      <div class="absolute inset-y-0 left-0 flex items-center pl-6">
@@ -107,9 +122,9 @@
        disabled={showFilter}
      />

-      <div class="absolute inset-y-0 right-5 flex items-center pl-6">
+      <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-5'} flex items-center pl-6 transition-all">
        <div class="dark:text-immich-dark-fg/75">
-          <IconButton on:click={() => (showFilter = !showFilter)} title="Show search options">
+          <IconButton on:click={onFilterClick} title="Show search options">
            <Icon path={mdiTune} size="1.5em" />
          </IconButton>
        </div>
@@ -131,15 +146,12 @@
      <SearchHistoryBox
        on:clearAllSearchTerms={clearAllSearchTerms}
        on:clearSearchTerm={({ detail: searchTerm }) => clearSearchTerm(searchTerm)}
-        on:selectSearchTerm={({ detail: searchTerm }) => {
-          value = searchTerm;
-          onSearch();
-        }}
+        on:selectSearchTerm={({ detail: searchTerm }) => onHistoryTermClick(searchTerm)}
      />
    {/if}

    {#if showFilter}
-      <SearchFilterBox />
+      <SearchFilterBox on:search={({ detail }) => onSearch(detail)} />
    {/if}
  </form>
 </div>
--- a/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
@@ -4,12 +4,20 @@
  import Icon from '$lib/components/elements/icon.svelte';
  import { getPeopleThumbnailUrl } from '$lib/utils';
  import { handleError } from '$lib/utils/handle-error';
-  import { SearchSuggestionType, type PersonResponseDto } from '@immich/sdk';
+  import {
+    AssetTypeEnum,
+    SearchSuggestionType,
+    type PersonResponseDto,
+    type SmartSearchDto,
+    type MetadataSearchDto,
+  } from '@immich/sdk';
  import { getAllPeople, getSearchSuggestions } from '@immich/sdk';
  import { mdiArrowRight, mdiClose } from '@mdi/js';
-  import { onMount } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
  import { fly } from 'svelte/transition';
  import Combobox, { type ComboBoxOption } from '../combobox.svelte';
+  import { DateTime } from 'luxon';
+  import { searchQuery } from '$lib/stores/search.store';

  enum MediaType {
    All = 'all',
@@ -22,8 +30,8 @@
    country: ComboBoxOption[];
    state: ComboBoxOption[];
    city: ComboBoxOption[];
-    cameraMake: ComboBoxOption[];
-    cameraModel: ComboBoxOption[];
+    make: ComboBoxOption[];
+    model: ComboBoxOption[];
  };

  type SearchParams = {
@@ -49,14 +57,14 @@
      model?: ComboBoxOption;
    };

-    dateRange: {
-      startDate?: Date;
-      endDate?: Date;
+    date: {
+      takenAfter?: string;
+      takenBefore?: string;
    };

-    inArchive?: boolean;
-    inFavorite?: boolean;
-    notInAlbum?: boolean;
+    isArchive?: boolean;
+    isFavorite?: boolean;
+    isNotInAlbum?: boolean;

    mediaType: MediaType;
  };
@@ -66,8 +74,8 @@
    country: [],
    state: [],
    city: [],
-    cameraMake: [],
-    cameraModel: [],
+    make: [],
+    model: [],
  };

  let filter: SearchFilter = {
@@ -82,21 +90,23 @@
      make: undefined,
      model: undefined,
    },
-    dateRange: {
-      startDate: undefined,
-      endDate: undefined,
+    date: {
+      takenAfter: undefined,
+      takenBefore: undefined,
    },
-    inArchive: undefined,
-    inFavorite: undefined,
-    notInAlbum: undefined,
+    isArchive: undefined,
+    isFavorite: undefined,
+    isNotInAlbum: undefined,
    mediaType: MediaType.All,
  };

+  const dispatch = createEventDispatcher<{ search: SmartSearchDto | MetadataSearchDto }>();
  let showAllPeople = false;
  $: peopleList = showAllPeople ? suggestions.people : suggestions.people.slice(0, 11);

  onMount(() => {
    getPeople();
+    populateExistingFilters();
  });

  const showSelectedPeopleFirst = () => {
@@ -141,7 +151,7 @@
    }

    if (type === SearchSuggestionType.CameraMake || type === SearchSuggestionType.CameraModel) {
-      suggestions = { ...suggestions, cameraMake: [], cameraModel: [] };
+      suggestions = { ...suggestions, make: [], model: [] };
    }

    try {
@@ -178,14 +188,14 @@

        case SearchSuggestionType.CameraMake: {
          for (const make of data) {
-            suggestions.cameraMake = [...suggestions.cameraMake, { label: make, value: make }];
+            suggestions.make = [...suggestions.make, { label: make, value: make }];
          }
          break;
        }

        case SearchSuggestionType.CameraModel: {
          for (const model of data) {
-            suggestions.cameraModel = [...suggestions.cameraModel, { label: model, value: model }];
+            suggestions.model = [...suggestions.model, { label: model, value: model }];
          }
          break;
        }
@@ -208,18 +218,99 @@
        make: undefined,
        model: undefined,
      },
-      dateRange: {
-        startDate: undefined,
-        endDate: undefined,
+      date: {
+        takenAfter: undefined,
+        takenBefore: undefined,
      },
-      inArchive: undefined,
-      inFavorite: undefined,
-      notInAlbum: undefined,
+      isArchive: undefined,
+      isFavorite: undefined,
+      isNotInAlbum: undefined,
      mediaType: MediaType.All,
    };
  };

-  const search = () => {};
+  const search = async () => {
+    let type: AssetTypeEnum | undefined = undefined;
+
+    if (filter.mediaType === MediaType.Image) {
+      type = AssetTypeEnum.Image;
+    } else if (filter.mediaType === MediaType.Video) {
+      type = AssetTypeEnum.Video;
+    }
+
+    let payload: SmartSearchDto | MetadataSearchDto = {
+      country: filter.location.country?.value,
+      state: filter.location.state?.value,
+      city: filter.location.city?.value,
+      make: filter.camera.make?.value,
+      model: filter.camera.model?.value,
+      takenAfter: filter.date.takenAfter
+        ? DateTime.fromFormat(filter.date.takenAfter, 'yyyy-MM-dd').toUTC().startOf('day').toString()
+        : undefined,
+      takenBefore: filter.date.takenBefore
+        ? DateTime.fromFormat(filter.date.takenBefore, 'yyyy-MM-dd').toUTC().endOf('day').toString()
+        : undefined,
+      /* eslint-disable unicorn/prefer-logical-operator-over-ternary */
+      isArchived: filter.isArchive ? filter.isArchive : undefined,
+      isFavorite: filter.isFavorite ? filter.isFavorite : undefined,
+      isNotInAlbum: filter.isNotInAlbum ? filter.isNotInAlbum : undefined,
+      personIds: filter.people && filter.people.length > 0 ? filter.people.map((p) => p.id) : undefined,
+      type,
+    };
+
+    if (filter.context) {
+      if (payload.personIds && payload.personIds.length > 0) {
+        handleError(
+          new Error('Context search does not support people filter'),
+          'Context search does not support people filter',
+        );
+        return;
+      }
+
+      payload = {
+        ...payload,
+        query: filter.context,
+      };
+    }
+
+    dispatch('search', payload);
+  };
+
+  function populateExistingFilters() {
+    if ($searchQuery) {
+      filter = {
+        context: 'query' in $searchQuery ? $searchQuery.query : '',
+        people:
+          'personIds' in $searchQuery ? ($searchQuery.personIds?.map((id) => ({ id })) as PersonResponseDto[]) : [],
+        location: {
+          country: $searchQuery.country ? { label: $searchQuery.country, value: $searchQuery.country } : undefined,
+          state: $searchQuery.state ? { label: $searchQuery.state, value: $searchQuery.state } : undefined,
+          city: $searchQuery.city ? { label: $searchQuery.city, value: $searchQuery.city } : undefined,
+        },
+        camera: {
+          make: $searchQuery.make ? { label: $searchQuery.make, value: $searchQuery.make } : undefined,
+          model: $searchQuery.model ? { label: $searchQuery.model, value: $searchQuery.model } : undefined,
+        },
+        date: {
+          takenAfter: $searchQuery.takenAfter
+            ? DateTime.fromISO($searchQuery.takenAfter).toUTC().toFormat('yyyy-MM-dd')
+            : undefined,
+          takenBefore: $searchQuery.takenBefore
+            ? DateTime.fromISO($searchQuery.takenBefore).toUTC().toFormat('yyyy-MM-dd')
+            : undefined,
+        },
+        isArchive: $searchQuery.isArchived,
+        isFavorite: $searchQuery.isFavorite,
+        isNotInAlbum: 'isNotInAlbum' in $searchQuery ? $searchQuery.isNotInAlbum : undefined,
+        mediaType:
+          $searchQuery.type === AssetTypeEnum.Image
+            ? MediaType.Image
+            : $searchQuery.type === AssetTypeEnum.Video
+              ? MediaType.Video
+              : MediaType.All,
+      };
+    }
+  }
 </script>

 <div
@@ -347,7 +438,7 @@
        <div class="w-full">
          <p class="text-sm text-black dark:text-white">Make</p>
          <Combobox
-            options={suggestions.cameraMake}
+            options={suggestions.make}
            bind:selectedOption={filter.camera.make}
            placeholder="Search camera make..."
            on:click={() =>
@@ -358,7 +449,7 @@
        <div class="w-full">
          <p class="text-sm text-black dark:text-white">Model</p>
          <Combobox
-            options={suggestions.cameraModel}
+            options={suggestions.model}
            bind:selectedOption={filter.camera.model}
            placeholder="Search camera model..."
            on:click={() =>
@@ -379,7 +470,7 @@
          type="date"
          id="start-date"
          name="start-date"
-          bind:value={filter.dateRange.startDate}
+          bind:value={filter.date.takenAfter}
        />
      </div>

@@ -391,7 +482,7 @@
          id="end-date"
          name="end-date"
          placeholder=""
-          bind:value={filter.dateRange.endDate}
+          bind:value={filter.date.takenBefore}
        />
      </div>
    </div>
@@ -450,17 +541,17 @@

        <div class="flex gap-5 mt-3">
          <label class="flex items-center mb-2">
-            <input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.notInAlbum} />
+            <input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.isNotInAlbum} />
            <span class="ml-2 text-sm text-black dark:text-white pt-1">Not in any album</span>
          </label>

          <label class="flex items-center mb-2">
-            <input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.inArchive} />
+            <input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.isArchive} />
            <span class="ml-2 text-sm text-black dark:text-white pt-1">Archive</span>
          </label>

          <label class="flex items-center mb-2">
-            <input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.inFavorite} />
+            <input type="checkbox" class="form-checkbox h-5 w-5 color" bind:checked={filter.isFavorite} />
            <span class="ml-2 text-sm text-black dark:text-white pt-1">Favorite</span>
          </label>
        </div>
--- a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
@@ -16,15 +16,6 @@
  transition:fly={{ y: 25, duration: 250 }}
  class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
 >
-  <div class="flex px-5 pt-5 text-left text-sm">
-    <p>
-      Smart search is enabled by default, to search for metadata use the syntax <span
-        class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
-        >m:your-search-term</span
-      >
-    </p>
-  </div>
-
  {#if $savedSearchTerms.length > 0}
    <div class="flex items-center justify-between px-5 pt-5 text-xs">
      <p>RECENT SEARCHES</p>