feat(web,server): explore (#1926)

* feat: explore * chore: generate open api * styling explore page * styling no result page * style overlay * style: bluring text on thumbnail card for readability * explore page tweaks * fix(web): search urls * feat(web): use objects for things * feat(server): filter by motion, sort by createdAt * More styling * better navigation --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com> Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
2025-12-08 20:29:05 +00:00 · 2023-03-05 15:44:31 -05:00
parent 1f631eafce
commit 2ca560ebf8
35 changed files with 1079 additions and 63 deletions
--- a/server/apps/immich/src/controllers/search.controller.ts
+++ b/server/apps/immich/src/controllers/search.controller.ts
@@ -1,4 +1,11 @@
-import { AuthUserDto, SearchConfigResponseDto, SearchDto, SearchResponseDto, SearchService } from '@app/domain';
+import {
+  AuthUserDto,
+  SearchConfigResponseDto,
+  SearchDto,
+  SearchExploreResponseDto,
+  SearchResponseDto,
+  SearchService,
+} from '@app/domain';
 import { Controller, Get, Query, ValidationPipe } from '@nestjs/common';
 import { ApiTags } from '@nestjs/swagger';
 import { GetAuthUser } from '../decorators/auth-user.decorator';
@@ -10,7 +17,6 @@ import { Authenticated } from '../decorators/authenticated.decorator';
 export class SearchController {
  constructor(private readonly searchService: SearchService) {}

-  @Authenticated()
  @Get()
  async search(
    @GetAuthUser() authUser: AuthUserDto,
@@ -19,9 +25,13 @@ export class SearchController {
    return this.searchService.search(authUser, dto);
  }

-  @Authenticated()
  @Get('config')
  getSearchConfig(): SearchConfigResponseDto {
    return this.searchService.getConfig();
  }
+
+  @Get('explore')
+  getExploreData(@GetAuthUser() authUser: AuthUserDto): Promise<SearchExploreResponseDto[]> {
+    return this.searchService.getExploreData(authUser) as Promise<SearchExploreResponseDto[]>;
+  }
 }
--- a/server/apps/microservices/src/processors/metadata-extraction.processor.ts
+++ b/server/apps/microservices/src/processors/metadata-extraction.processor.ts
@@ -2,8 +2,8 @@ import {
  AssetCore,
  IAssetRepository,
  IAssetUploadedJob,
+  IJobRepository,
  IReverseGeocodingJob,
-  ISearchRepository,
  JobName,
  QueueName,
 } from '@app/domain';
@@ -86,14 +86,14 @@ export class MetadataExtractionProcessor {

  constructor(
    @Inject(IAssetRepository) assetRepository: IAssetRepository,
-    @Inject(ISearchRepository) searchRepository: ISearchRepository,
+    @Inject(IJobRepository) jobRepository: IJobRepository,

    @InjectRepository(ExifEntity)
    private exifRepository: Repository<ExifEntity>,

    configService: ConfigService,
  ) {
-    this.assetCore = new AssetCore(assetRepository, searchRepository);
+    this.assetCore = new AssetCore(assetRepository, jobRepository);

    if (!configService.get('DISABLE_REVERSE_GEOCODING')) {
      this.logger.log('Initializing Reverse Geocoding');
--- a/server/immich-openapi-specs.json
+++ b/server/immich-openapi-specs.json
@@ -640,6 +640,22 @@
                "type": "string"
              }
            }
+          },
+          {
+            "name": "recent",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "boolean"
+            }
+          },
+          {
+            "name": "motion",
+            "required": false,
+            "in": "query",
+            "schema": {
+              "type": "boolean"
+            }
          }
        ],
        "responses": {
@@ -658,12 +674,6 @@
          "Search"
        ],
        "security": [
-          {
-            "bearer": []
-          },
-          {
-            "cookie": []
-          },
          {
            "bearer": []
          },
@@ -699,7 +709,34 @@
          },
          {
            "cookie": []
-          },
+          }
+        ]
+      }
+    },
+    "/search/explore": {
+      "get": {
+        "operationId": "getExploreData",
+        "description": "",
+        "parameters": [],
+        "responses": {
+          "200": {
+            "description": "",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "$ref": "#/components/schemas/SearchExploreResponseDto"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "tags": [
+          "Search"
+        ],
+        "security": [
          {
            "bearer": []
          },
@@ -4149,6 +4186,39 @@
          "enabled"
        ]
      },
+      "SearchExploreItem": {
+        "type": "object",
+        "properties": {
+          "value": {
+            "type": "string"
+          },
+          "data": {
+            "$ref": "#/components/schemas/AssetResponseDto"
+          }
+        },
+        "required": [
+          "value",
+          "data"
+        ]
+      },
+      "SearchExploreResponseDto": {
+        "type": "object",
+        "properties": {
+          "fieldName": {
+            "type": "string"
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/SearchExploreItem"
+            }
+          }
+        },
+        "required": [
+          "fieldName",
+          "items"
+        ]
+      },
      "SharedLinkType": {
        "type": "string",
        "enum": [
--- a/server/libs/domain/src/asset/asset.core.ts
+++ b/server/libs/domain/src/asset/asset.core.ts
@@ -1,21 +1,21 @@
 import { AssetEntity, AssetType } from '@app/infra/db/entities';
-import { ISearchRepository, SearchCollection } from '../search/search.repository';
+import { IJobRepository, JobName } from '../job';
 import { AssetSearchOptions, IAssetRepository } from './asset.repository';

 export class AssetCore {
-  constructor(private repository: IAssetRepository, private searchRepository: ISearchRepository) {}
+  constructor(private assetRepository: IAssetRepository, private jobRepository: IJobRepository) {}

  getAll(options: AssetSearchOptions) {
-    return this.repository.getAll(options);
+    return this.assetRepository.getAll(options);
  }

  async save(asset: Partial<AssetEntity>) {
-    const _asset = await this.repository.save(asset);
-    await this.searchRepository.index(SearchCollection.ASSETS, _asset);
+    const _asset = await this.assetRepository.save(asset);
+    await this.jobRepository.queue({ name: JobName.SEARCH_INDEX_ASSET, data: { asset: _asset } });
    return _asset;
  }

  findLivePhotoMatch(livePhotoCID: string, otherAssetId: string, type: AssetType): Promise<AssetEntity | null> {
-    return this.repository.findLivePhotoMatch(livePhotoCID, otherAssetId, type);
+    return this.assetRepository.findLivePhotoMatch(livePhotoCID, otherAssetId, type);
  }
 }
--- a/server/libs/domain/src/asset/asset.service.spec.ts
+++ b/server/libs/domain/src/asset/asset.service.spec.ts
@@ -1,15 +1,12 @@
 import { AssetEntity, AssetType } from '@app/infra/db/entities';
 import { assetEntityStub, newAssetRepositoryMock, newJobRepositoryMock } from '../../test';
-import { newSearchRepositoryMock } from '../../test/search.repository.mock';
 import { AssetService, IAssetRepository } from '../asset';
 import { IJobRepository, JobName } from '../job';
-import { ISearchRepository } from '../search';

 describe(AssetService.name, () => {
  let sut: AssetService;
  let assetMock: jest.Mocked<IAssetRepository>;
  let jobMock: jest.Mocked<IJobRepository>;
-  let searchMock: jest.Mocked<ISearchRepository>;

  it('should work', () => {
    expect(sut).toBeDefined();
@@ -18,8 +15,7 @@ describe(AssetService.name, () => {
  beforeEach(async () => {
    assetMock = newAssetRepositoryMock();
    jobMock = newJobRepositoryMock();
-    searchMock = newSearchRepositoryMock();
-    sut = new AssetService(assetMock, jobMock, searchMock);
+    sut = new AssetService(assetMock, jobMock);
  });

  describe(`handle asset upload`, () => {
@@ -56,7 +52,10 @@ describe(AssetService.name, () => {
      await sut.save(assetEntityStub.image);

      expect(assetMock.save).toHaveBeenCalledWith(assetEntityStub.image);
-      expect(searchMock.index).toHaveBeenCalledWith('assets', assetEntityStub.image);
+      expect(jobMock.queue).toHaveBeenCalledWith({
+        name: JobName.SEARCH_INDEX_ASSET,
+        data: { asset: assetEntityStub.image },
+      });
    });
  });
 });
--- a/server/libs/domain/src/asset/asset.service.ts
+++ b/server/libs/domain/src/asset/asset.service.ts
@@ -1,7 +1,6 @@
 import { AssetEntity, AssetType } from '@app/infra/db/entities';
 import { Inject } from '@nestjs/common';
 import { IAssetUploadedJob, IJobRepository, JobName } from '../job';
-import { ISearchRepository } from '../search';
 import { AssetCore } from './asset.core';
 import { IAssetRepository } from './asset.repository';

@@ -11,9 +10,8 @@ export class AssetService {
  constructor(
    @Inject(IAssetRepository) assetRepository: IAssetRepository,
    @Inject(IJobRepository) private jobRepository: IJobRepository,
-    @Inject(ISearchRepository) searchRepository: ISearchRepository,
  ) {
-    this.assetCore = new AssetCore(assetRepository, searchRepository);
+    this.assetCore = new AssetCore(assetRepository, jobRepository);
  }

  async handleAssetUpload(data: IAssetUploadedJob) {
--- a/server/libs/domain/src/search/dto/search.dto.ts
+++ b/server/libs/domain/src/search/dto/search.dto.ts
@@ -54,4 +54,14 @@ export class SearchDto {
  @IsOptional()
  @Transform(({ value }) => value.split(','))
  'smartInfo.tags'?: string[];
+
+  @IsBoolean()
+  @IsOptional()
+  @Transform(toBoolean)
+  recent?: boolean;
+
+  @IsBoolean()
+  @IsOptional()
+  @Transform(toBoolean)
+  motion?: boolean;
 }
--- a/server/libs/domain/src/search/response-dto/index.ts
+++ b/server/libs/domain/src/search/response-dto/index.ts
@@ -1,2 +1,3 @@
 export * from './search-config-response.dto';
+export * from './search-explore.response.dto';
 export * from './search-response.dto';
--- a/server/libs/domain/src/search/response-dto/search-explore.response.dto.ts
+++ b/server/libs/domain/src/search/response-dto/search-explore.response.dto.ts
@@ -0,0 +1,11 @@
+import { AssetResponseDto } from '../../asset';
+
+class SearchExploreItem {
+  value!: string;
+  data!: AssetResponseDto;
+}
+
+export class SearchExploreResponseDto {
+  fieldName!: string;
+  items!: SearchExploreItem[];
+}
--- a/server/libs/domain/src/search/search.repository.ts
+++ b/server/libs/domain/src/search/search.repository.ts
@@ -17,6 +17,8 @@ export interface SearchFilter {
  model?: string;
  objects?: string[];
  tags?: string[];
+  recent?: boolean;
+  motion?: boolean;
 }

 export interface SearchResult<T> {
@@ -39,6 +41,14 @@ export interface SearchFacet {
  }>;
 }

+export interface SearchExploreItem<T> {
+  fieldName: string;
+  items: Array<{
+    value: string;
+    data: T;
+  }>;
+}
+
 export type SearchCollectionIndexStatus = Record<SearchCollection, boolean>;

 export const ISearchRepository = 'ISearchRepository';
@@ -57,4 +67,6 @@ export interface ISearchRepository {

  search(collection: SearchCollection.ASSETS, query: string, filters: SearchFilter): Promise<SearchResult<AssetEntity>>;
  search(collection: SearchCollection.ALBUMS, query: string, filters: SearchFilter): Promise<SearchResult<AlbumEntity>>;
+
+  explore(userId: string): Promise<SearchExploreItem<AssetEntity>[]>;
 }
--- a/server/libs/domain/src/search/search.service.ts
+++ b/server/libs/domain/src/search/search.service.ts
@@ -1,3 +1,4 @@
+import { AssetEntity } from '@app/infra/db/entities';
 import { BadRequestException, Inject, Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { IAlbumRepository } from '../album/album.repository';
@@ -6,7 +7,7 @@ import { AuthUserDto } from '../auth';
 import { IAlbumJob, IAssetJob, IDeleteJob, IJobRepository, JobName } from '../job';
 import { SearchDto } from './dto';
 import { SearchConfigResponseDto, SearchResponseDto } from './response-dto';
-import { ISearchRepository, SearchCollection } from './search.repository';
+import { ISearchRepository, SearchCollection, SearchExploreItem } from './search.repository';

@Injectable()
 export class SearchService {
@@ -52,10 +53,13 @@ export class SearchService {
    }
  }

+  async getExploreData(authUser: AuthUserDto): Promise<SearchExploreItem<AssetEntity>[]> {
+    this.assertEnabled();
+    return this.searchRepository.explore(authUser.id);
+  }
+
  async search(authUser: AuthUserDto, dto: SearchDto): Promise<SearchResponseDto> {
-    if (!this.enabled) {
-      throw new BadRequestException('Search is disabled');
-    }
+    this.assertEnabled();

    const query = dto.query || '*';

@@ -83,6 +87,7 @@ export class SearchService {

      this.logger.log(`Indexing ${assets.length} assets`);
      await this.searchRepository.import(SearchCollection.ASSETS, assets, true);
+      this.logger.debug('Finished re-indexing all assets');
    } catch (error: any) {
      this.logger.error(`Unable to index all assets`, error?.stack);
    }
@@ -94,6 +99,9 @@ export class SearchService {
    }

    const { asset } = data;
+    if (!asset.isVisible) {
+      return;
+    }

    try {
      await this.searchRepository.index(SearchCollection.ASSETS, asset);
@@ -111,6 +119,7 @@ export class SearchService {
      const albums = await this.albumRepository.getAll();
      this.logger.log(`Indexing ${albums.length} albums`);
      await this.searchRepository.import(SearchCollection.ALBUMS, albums, true);
+      this.logger.debug('Finished re-indexing all albums');
    } catch (error: any) {
      this.logger.error(`Unable to index all albums`, error?.stack);
    }
@@ -151,4 +160,10 @@ export class SearchService {
      this.logger.error(`Unable to remove ${collection}: ${id}`, error?.stack);
    }
  }
+
+  private assertEnabled() {
+    if (!this.enabled) {
+      throw new BadRequestException('Search is disabled');
+    }
+  }
 }
--- a/server/libs/domain/test/search.repository.mock.ts
+++ b/server/libs/domain/test/search.repository.mock.ts
@@ -8,5 +8,6 @@ export const newSearchRepositoryMock = (): jest.Mocked<ISearchRepository> => {
    import: jest.fn(),
    search: jest.fn(),
    delete: jest.fn(),
+    explore: jest.fn(),
  };
 };
--- a/server/libs/infra/src/search/schemas/asset.schema.ts
+++ b/server/libs/infra/src/search/schemas/asset.schema.ts
@@ -1,6 +1,6 @@
 import { CollectionCreateSchema } from 'typesense/lib/Typesense/Collections';

-export const assetSchemaVersion = 1;
+export const assetSchemaVersion = 2;
 export const assetSchema: CollectionCreateSchema = {
  name: `assets-v${assetSchemaVersion}`,
  fields: [
@@ -22,7 +22,6 @@ export const assetSchema: CollectionCreateSchema = {
    { name: 'exifInfo.state', type: 'string', facet: true, optional: true },
    { name: 'exifInfo.description', type: 'string', facet: false, optional: true },
    { name: 'exifInfo.imageName', type: 'string', facet: false, optional: true },
-    { name: 'geo', type: 'geopoint', facet: false, optional: true },
    { name: 'exifInfo.make', type: 'string', facet: true, optional: true },
    { name: 'exifInfo.model', type: 'string', facet: true, optional: true },
    { name: 'exifInfo.orientation', type: 'string', optional: true },
@@ -30,6 +29,10 @@ export const assetSchema: CollectionCreateSchema = {
    // smart info
    { name: 'smartInfo.objects', type: 'string[]', facet: true, optional: true },
    { name: 'smartInfo.tags', type: 'string[]', facet: true, optional: true },
+
+    // computed
+    { name: 'geo', type: 'geopoint', facet: false, optional: true },
+    { name: 'motion', type: 'bool', facet: true },
  ],
  token_separators: ['.'],
  enable_nested_fields: true,
--- a/server/libs/infra/src/search/typesense.repository.ts
+++ b/server/libs/infra/src/search/typesense.repository.ts
@@ -2,11 +2,13 @@ import {
  ISearchRepository,
  SearchCollection,
  SearchCollectionIndexStatus,
+  SearchExploreItem,
  SearchFilter,
  SearchResult,
 } from '@app/domain';
 import { Injectable, Logger } from '@nestjs/common';
 import _, { Dictionary } from 'lodash';
+import { filter, firstValueFrom, from, map, mergeMap, toArray } from 'rxjs';
 import { Client } from 'typesense';
 import { CollectionCreateSchema } from 'typesense/lib/Typesense/Collections';
 import { DocumentSchema, SearchResponse } from 'typesense/lib/Typesense/Documents';
@@ -14,8 +16,9 @@ import { AlbumEntity, AssetEntity } from '../db';
 import { albumSchema } from './schemas/album.schema';
 import { assetSchema } from './schemas/asset.schema';

-interface GeoAssetEntity extends AssetEntity {
+interface CustomAssetEntity extends AssetEntity {
  geo?: [number, number];
+  motion?: boolean;
 }

 function removeNil<T extends Dictionary<any>>(item: T): Partial<T> {
@@ -85,6 +88,12 @@ export class TypesenseRepository implements ISearchRepository {
  }

  async setup(): Promise<void> {
+    const collections = await this.client.collections().retrieve();
+    for (const collection of collections) {
+      this.logger.debug(`${collection.name} => ${collection.num_documents}`);
+      // await this.client.collections(collection.name).delete();
+    }
+
    // upsert collections
    for (const [collectionName, schema] of schemas) {
      const collection = await this.client
@@ -172,6 +181,59 @@ export class TypesenseRepository implements ISearchRepository {
    }
  }

+  async explore(userId: string): Promise<SearchExploreItem<AssetEntity>[]> {
+    const alias = await this.client.aliases(SearchCollection.ASSETS).retrieve();
+
+    const common = {
+      q: '*',
+      filter_by: `ownerId:${userId}`,
+      per_page: 100,
+    };
+
+    const asset$ = this.client.collections<AssetEntity>(alias.collection_name).documents();
+
+    const { facet_counts: facets } = await asset$.search({
+      ...common,
+      query_by: 'exifInfo.imageName',
+      facet_by: this.getFacetFieldNames(SearchCollection.ASSETS),
+      max_facet_values: 50,
+    });
+
+    return firstValueFrom(
+      from(facets || []).pipe(
+        mergeMap(
+          (facet) =>
+            from(facet.counts).pipe(
+              mergeMap(
+                (count) =>
+                  from(
+                    asset$.search({
+                      ...common,
+                      query_by: 'exifInfo.imageName',
+                      filter_by: `${facet.field_name}:${count.value}`,
+                    }),
+                  ).pipe(
+                    map((result) => ({
+                      value: count.value,
+                      data: result.hits?.[0]?.document as AssetEntity,
+                    })),
+                    filter((item) => !!item.data),
+                  ),
+                5,
+              ),
+              toArray(),
+              map((items) => ({
+                fieldName: facet.field_name as string,
+                items,
+              })),
+            ),
+          3,
+        ),
+        toArray(),
+      ),
+    );
+  }
+
  search(collection: SearchCollection.ASSETS, query: string, filter: SearchFilter): Promise<SearchResult<AssetEntity>>;
  search(collection: SearchCollection.ALBUMS, query: string, filter: SearchFilter): Promise<SearchResult<AlbumEntity>>;
  async search(collection: SearchCollection, query: string, filters: SearchFilter) {
@@ -213,10 +275,8 @@ export class TypesenseRepository implements ISearchRepository {
          ].join(','),
          filter_by: _filters.join(' && '),
          per_page: 250,
-          facet_by: (assetSchema.fields || [])
-            .filter((field) => field.facet)
-            .map((field) => field.name)
-            .join(','),
+          sort_by: filters.recent ? 'createdAt:desc' : undefined,
+          facet_by: this.getFacetFieldNames(SearchCollection.ASSETS),
        });

      return this.asResponse(results);
@@ -313,13 +373,24 @@ export class TypesenseRepository implements ISearchRepository {
    }
  }

-  private patchAsset(asset: AssetEntity): GeoAssetEntity {
+  private patchAsset(asset: AssetEntity): CustomAssetEntity {
+    let custom = asset as CustomAssetEntity;
+
    const lat = asset.exifInfo?.latitude;
    const lng = asset.exifInfo?.longitude;
    if (lat && lng && lat !== 0 && lng !== 0) {
-      return { ...asset, geo: [lat, lng] };
+      custom = { ...custom, geo: [lat, lng] };
    }

-    return asset;
+    custom = { ...custom, motion: !!asset.livePhotoVideoId };
+
+    return custom;
+  }
+
+  private getFacetFieldNames(collection: SearchCollection) {
+    return (schemaMap[collection].fields || [])
+      .filter((field) => field.facet)
+      .map((field) => field.name)
+      .join(',');
  }
 }