fix(server, web): people page (#7319)

* fix: people page

* fix: use locale

* fix: e2e

* fix: remove useless w-full

* fix: don't count people without thumbnail

* fix: es6 template string

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

e2e/src/api/specs/person.e2e-spec.ts

@@ -56,6 +56,7 @@ describe('/activity', () => {
       expect(status).toBe(200);
       expect(body).toEqual({
         total: 2,
+        hidden: 1,
         people: [
           expect.objectContaining({ name: 'visible_person' }),
           expect.objectContaining({ name: 'hidden_person' }),
@@ -71,6 +72,7 @@ describe('/activity', () => {
       expect(status).toBe(200);
       expect(body).toEqual({
         total: 2,
+        hidden: 1,
         people: [expect.objectContaining({ name: 'visible_person' })],
       });
     });

open-api/immich-openapi-specs.json

@@ -8593,6 +8593,9 @@
       },
       "PeopleResponseDto": {
         "properties": {
+          "hidden": {
+            "type": "integer"
+          },
           "people": {
             "items": {
               "$ref": "#/components/schemas/PersonResponseDto"
@@ -8604,6 +8607,7 @@
           }
         },
         "required": [
+          "hidden",
           "people",
           "total"
         ],

open-api/typescript-sdk/axios-client/api.ts

@@ -2801,6 +2801,12 @@ export type PathType = typeof PathType[keyof typeof PathType];
  * @interface PeopleResponseDto
  */
 export interface PeopleResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof PeopleResponseDto
+     */
+    'hidden': number;
     /**
      * 
      * @type {Array<PersonResponseDto>}

server/src/domain/person/person.dto.ts

@@ -127,7 +127,8 @@ export class PersonStatisticsResponseDto {
 export class PeopleResponseDto {
   @ApiProperty({ type: 'integer' })
   total!: number;
-
+  @ApiProperty({ type: 'integer' })
+  hidden!: number;
   people!: PersonResponseDto[];
 }
 

server/src/domain/person/person.service.spec.ts

@@ -114,35 +114,12 @@ describe(PersonService.name, () => {
   });
 
   describe('getAll', () => {
-    it('should get all people with thumbnails', async () => {
-      personMock.getAllForUser.mockResolvedValue([personStub.withName, personStub.noThumbnail]);
-      personMock.getNumberOfPeople.mockResolvedValue(1);
-      await expect(sut.getAll(authStub.admin, { withHidden: undefined })).resolves.toEqual({
-        total: 1,
-        people: [responseDto],
-      });
-      expect(personMock.getAllForUser).toHaveBeenCalledWith(authStub.admin.user.id, {
-        minimumFaceCount: 3,
-        withHidden: false,
-      });
-    });
-    it('should get all visible people with thumbnails', async () => {
-      personMock.getAllForUser.mockResolvedValue([personStub.withName, personStub.hidden]);
-      personMock.getNumberOfPeople.mockResolvedValue(2);
-      await expect(sut.getAll(authStub.admin, { withHidden: false })).resolves.toEqual({
-        total: 2,
-        people: [responseDto],
-      });
-      expect(personMock.getAllForUser).toHaveBeenCalledWith(authStub.admin.user.id, {
-        minimumFaceCount: 3,
-        withHidden: false,
-      });
-    });
     it('should get all hidden and visible people with thumbnails', async () => {
       personMock.getAllForUser.mockResolvedValue([personStub.withName, personStub.hidden]);
-      personMock.getNumberOfPeople.mockResolvedValue(2);
+      personMock.getNumberOfPeople.mockResolvedValue({ total: 2, hidden: 1 });
       await expect(sut.getAll(authStub.admin, { withHidden: true })).resolves.toEqual({
         total: 2,
+        hidden: 1,
         people: [
           responseDto,
           {

server/src/domain/person/person.service.ts

@@ -82,15 +82,12 @@ export class PersonService {
       minimumFaceCount: machineLearning.facialRecognition.minFaces,
       withHidden: dto.withHidden || false,
     });
-    const total = await this.repository.getNumberOfPeople(auth.user.id);
-    const persons: PersonResponseDto[] = people
-      // with thumbnails
-      .filter((person) => !!person.thumbnailPath)
-      .map((person) => mapPerson(person));
+    const { total, hidden } = await this.repository.getNumberOfPeople(auth.user.id);
 
     return {
-      people: persons.filter((person) => dto.withHidden || !person.isHidden),
+      people: people.map((person) => mapPerson(person)),
       total,
+      hidden,
     };
   }
 

server/src/domain/repositories/person.repository.ts

@@ -28,6 +28,11 @@ export interface PersonStatistics {
   assets: number;
 }
 
+export interface PeopleStatistics {
+  total: number;
+  hidden: number;
+}
+
 export interface IPersonRepository {
   getAll(pagination: PaginationOptions, options?: FindManyOptions<PersonEntity>): Paginated<PersonEntity>;
   getAllForUser(userId: string, options: PersonSearchOptions): Promise<PersonEntity[]>;
@@ -54,7 +59,7 @@ export interface IPersonRepository {
   getRandomFace(personId: string): Promise<AssetFaceEntity | null>;
   getStatistics(personId: string): Promise<PersonStatistics>;
   reassignFace(assetFaceId: string, newPersonId: string): Promise<number>;
-  getNumberOfPeople(userId: string): Promise<number>;
+  getNumberOfPeople(userId: string): Promise<PeopleStatistics>;
   reassignFaces(data: UpdateFacesData): Promise<number>;
   update(entity: Partial<PersonEntity>): Promise<PersonEntity>;
 }

server/src/infra/repositories/person.repository.ts

@@ -3,6 +3,7 @@ import {
   IPersonRepository,
   Paginated,
   PaginationOptions,
+  PeopleStatistics,
   PersonNameSearchOptions,
   PersonSearchOptions,
   PersonStatistics,
@@ -69,6 +70,7 @@ export class PersonRepository implements IPersonRepository {
       .addOrderBy("NULLIF(person.name, '') IS NULL", 'ASC')
       .addOrderBy('COUNT(face.assetId)', 'DESC')
       .addOrderBy("NULLIF(person.name, '')", 'ASC', 'NULLS LAST')
+      .andWhere("person.thumbnailPath != ''")
       .having("person.name != '' OR COUNT(face.assetId) >= :faces", { faces: options?.minimumFaceCount || 1 })
       .groupBy('person.id')
       .limit(500);
@@ -207,15 +209,25 @@ export class PersonRepository implements IPersonRepository {
   }
 
   @GenerateSql({ params: [DummyValue.UUID] })
-  async getNumberOfPeople(userId: string): Promise<number> {
-    return this.personRepository
+  async getNumberOfPeople(userId: string): Promise<PeopleStatistics> {
+    const items = await this.personRepository
       .createQueryBuilder('person')
       .leftJoin('person.faces', 'face')
       .where('person.ownerId = :userId', { userId })
+      .innerJoin('face.asset', 'asset')
+      .andWhere('asset.isArchived = false')
+      .andWhere("person.thumbnailPath != ''")
+      .select('COUNT(DISTINCT(person.id))', 'total')
+      .addSelect('COUNT(DISTINCT(person.id)) FILTER (WHERE person.isHidden = true)', 'hidden')
       .having('COUNT(face.assetId) != 0')
-      .groupBy('person.id')
-      .withDeleted()
-      .getCount();
+      .getRawOne();
+
+    const result: PeopleStatistics = {
+      total: items ? Number.parseInt(items.total) : 0,
+      hidden: items ? Number.parseInt(items.hidden) : 0,
+    };
+
+    return result;
   }
 
   create(entity: Partial<PersonEntity>): Promise<PersonEntity> {

server/src/infra/sql/person.repository.sql

@@ -26,6 +26,7 @@ FROM
 WHERE
   "person"."ownerId" = $1
   AND "asset"."isArchived" = false
+  AND "person"."thumbnailPath" != ''
   AND "person"."isHidden" = false
 GROUP BY
   "person"."id"
@@ -344,12 +345,20 @@ LIMIT
 
 -- PersonRepository.getNumberOfPeople
 SELECT
-  COUNT(DISTINCT ("person"."id")) AS "cnt"
+  COUNT(DISTINCT ("person"."id")) AS "total",
+  COUNT(DISTINCT ("person"."id")) FILTER (
+    WHERE
+      "person"."isHidden" = true
+  ) AS "hidden"
 FROM
   "person" "person"
   LEFT JOIN "asset_faces" "face" ON "face"."personId" = "person"."id"
+  INNER JOIN "assets" "asset" ON "asset"."id" = "face"."assetId"
+  AND ("asset"."deletedAt" IS NULL)
 WHERE
   "person"."ownerId" = $1
+  AND "asset"."isArchived" = false
+  AND "person"."thumbnailPath" != ''
 HAVING
   COUNT("face"."assetId") != 0
 

web/src/lib/components/faces-page/show-hide.svelte

@@ -6,6 +6,7 @@
   import { createEventDispatcher } from 'svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
+  import { locale } from '$lib/stores/preferences.store';
 
   const dispatch = createEventDispatcher<{
     close: void;
@@ -17,6 +18,7 @@
   export let showLoadingSpinner: boolean;
   export let toggleVisibility: boolean;
   export let screenHeight: number;
+  export let countTotalPeople: number;
 </script>
 
 <section
@@ -28,7 +30,10 @@
   >
     <div class="flex items-center">
       <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
-      <p class="ml-4 hidden sm:block">Show & hide people</p>
+      <div class="flex gap-2 items-center">
+        <p class="ml-2">Show & hide people</p>
+        <p class="text-sm text-gray-400 dark:text-gray-600">({countTotalPeople.toLocaleString($locale)})</p>
+      </div>
     </div>
     <div class="flex items-center justify-end">
       <div class="flex items-center md:mr-8">
@@ -47,7 +52,7 @@
     </div>
   </div>
 
-  <div class="flex w-full flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 mt-16">
+  <div class="flex flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 mt-16">
     <slot />
   </div>
 </section>

web/src/routes/(user)/people/+page.svelte

@@ -40,11 +40,13 @@
   import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import type { PageData } from './$types';
+  import { locale } from '$lib/stores/preferences.store';
 
   export let data: PageData;
 
   let people = data.people.people;
   let countTotalPeople = data.people.total;
+  let countHiddenPeople = data.people.hidden;
 
   let selectHidden = false;
   let initialHiddenValues: Record<string, boolean> = {};
@@ -75,7 +77,7 @@
 
   $: searchedPeopleLocal = searchName ? searchNameLocal(searchName, searchedPeople, maximumLengthSearchPeople) : [];
 
-  $: countVisiblePeople = people.filter((person) => !person.isHidden).length;
+  $: countVisiblePeople = countTotalPeople - countHiddenPeople;
 
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
 
@@ -152,6 +154,11 @@
       for (const person of people) {
         if (person.isHidden !== initialHiddenValues[person.id]) {
           changed.push({ id: person.id, isHidden: person.isHidden });
+          if (person.isHidden) {
+            countHiddenPeople++;
+          } else {
+            countHiddenPeople--;
+          }
 
           // Update the initial hidden values
           initialHiddenValues[person.id] = person.isHidden;
@@ -203,10 +210,10 @@
 
       const mergedPerson = await getPerson({ id: personToBeMergedIn.id });
 
-      countVisiblePeople--;
       people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
       people = people.map((person: PersonResponseDto) => (person.id === personToBeMergedIn.id ? mergedPerson : person));
-
+      countHiddenPeople--;
+      countTotalPeople--;
       notificationController.show({
         message: 'Merge people successfully',
         type: NotificationType.Info,
@@ -274,7 +281,7 @@
       }
 
       showChangeNameModal = false;
-
+      countHiddenPeople++;
       notificationController.show({
         message: 'Changed visibility successfully',
         type: NotificationType.Info,
@@ -423,7 +430,10 @@
   </FullScreenModal>
 {/if}
 
-<UserPageLayout title="People" description={countTotalPeople === 0 ? undefined : `(${countTotalPeople.toString()})`}>
+<UserPageLayout
+  title="People"
+  description={countVisiblePeople === 0 ? undefined : `(${countVisiblePeople.toLocaleString($locale)})`}
+>
   <svelte:fragment slot="buttons">
     {#if countTotalPeople > 0}
       <div class="flex gap-2 items-center justify-center">
@@ -522,9 +532,10 @@
     on:change={handleToggleVisibility}
     bind:showLoadingSpinner
     bind:toggleVisibility
+    {countTotalPeople}
     screenHeight={innerHeight}
   >
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
+    <div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
       {#each people as person, index (person.id)}
         <button
           class="relative"