From 7827b9e8887dd17764d60aabe1e03e0713c2ae53 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Thu, 11 Jan 2024 10:32:13 +0100
Subject: [PATCH 1/7] feat(DH): Add basiclightbox for thumbnail preview

---
 apps/datahub/project.json                     |   1 +
 .../record-metadata.component.html            | 246 ++++++++++--------
 .../record-metadata.component.ts              |  11 +
 package-lock.json                             |   6 +
 package.json                                  |   1 +
 5 files changed, 159 insertions(+), 106 deletions(-)

diff --git a/apps/datahub/project.json b/apps/datahub/project.json
index aa1c97bd2d..7d3ed4e6a4 100644
--- a/apps/datahub/project.json
+++ b/apps/datahub/project.json
@@ -31,6 +31,7 @@
           "tailwind.base.css",
           "apps/datahub/src/styles.css",
           "node_modules/tippy.js/dist/tippy.css",
+          "node_modules/basiclightbox/dist/basicLightbox.min.css",
           "node_modules/ol/ol.css",
           "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
         ],
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index c07d56fccc..618edd32c3 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -33,127 +33,161 @@
             [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
-        <gn-ui-metadata-contact
-          (organizationClick)="onOrganizationClick($event)"
-          [metadata]="facade.metadata$ | async"
+        <div
+          *ngIf="lightbox$ | async as lightbox"
+          data-cy="record-thumbnail"
+          class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
         >
-        </gn-ui-metadata-contact>
-        <gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
-        </gn-ui-metadata-catalog>
+          <gn-ui-thumbnail
+            class="relative h-full w-full"
+            [thumbnailUrl]="(facade.metadata$ | async).overviews?.[0]?.url"
+            fit="cover"
+          ></gn-ui-thumbnail>
+          <div class="relative">
+            <gn-ui-button
+              class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
+              [type]="'outline'"
+              [extraClass]="'!p-1'"
+              (buttonClick)="openLightbox(lightbox)"
+            >
+              <mat-icon class="material-symbols-outlined"
+                >zoom_out_map</mat-icon
+              >
+            </gn-ui-button>
+          </div>
+        </div>
+        <div>
+          <gn-ui-metadata-contact
+            (organizationClick)="onOrganizationClick($event)"
+            [metadata]="facade.metadata$ | async"
+          >
+          </gn-ui-metadata-contact>
+          <gn-ui-metadata-catalog [sourceLabel]="sourceLabel$ | async">
+          </gn-ui-metadata-catalog>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    style="height: 612px"
-    *ngIf="(displayMap$ | async) || (displayData$ | async)"
-    id="preview"
-  >
     <div
-      class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
-      style="height: 512px"
+      style="height: 612px"
+      *ngIf="(displayMap$ | async) || (displayData$ | async)"
+      id="preview"
     >
-      <div class="container-lg px-4 lg:mx-auto">
-        <div>
-          <div
-            class="text-[28px] text-title font-title transform sm:translate-y-10"
-            translate
-            id="preview"
-          >
-            record.metadata.preview
-          </div>
-          <mat-tab-group
-            (selectedIndexChange)="onTabIndexChange($event)"
-            [selectedIndex]="(displayMap$ | async) ? 0 : 1"
-            animationDuration="200ms"
-            mat-stretch-tabs="false"
-            mat-align-tabs="start"
-          >
-            <mat-tab [disabled]="(displayMap$ | async) === false">
-              <ng-template mat-tab-label>
-                <span class="tab-header-label sm:ml-32" translate
-                  >record.tab.map</span
+      <div
+        class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
+        style="height: 512px"
+      >
+        <div class="container-lg px-4 lg:mx-auto">
+          <div>
+            <div
+              class="text-[28px] text-title font-title transform sm:translate-y-10"
+              translate
+              id="preview"
+            >
+              record.metadata.preview
+            </div>
+            <mat-tab-group
+              (selectedIndexChange)="onTabIndexChange($event)"
+              [selectedIndex]="(displayMap$ | async) ? 0 : 1"
+              animationDuration="200ms"
+              mat-stretch-tabs="false"
+              mat-align-tabs="start"
+            >
+              <mat-tab [disabled]="(displayMap$ | async) === false">
+                <ng-template mat-tab-label>
+                  <span class="tab-header-label sm:ml-32" translate
+                    >record.tab.map</span
+                  >
+                </ng-template>
+                <div
+                  class="block"
+                  style="height: 500px"
+                  *ngIf="displayMap$ | async"
                 >
-              </ng-template>
-              <div
-                class="block"
-                style="height: 500px"
-                *ngIf="displayMap$ | async"
-              >
-                <gn-ui-map-view></gn-ui-map-view>
-              </div>
-            </mat-tab>
-            <mat-tab [disabled]="(displayData$ | async) === false">
-              <ng-template mat-tab-label>
-                <span class="tab-header-label" translate>record.tab.data</span>
-              </ng-template>
-              <div class="block" *ngIf="displayData$ | async">
-                <gn-ui-data-view mode="table"></gn-ui-data-view>
-              </div>
-            </mat-tab>
-            <mat-tab [disabled]="(displayData$ | async) === false">
-              <ng-template mat-tab-label>
-                <span class="tab-header-label" translate>record.tab.chart</span>
-              </ng-template>
-              <div class="block" *ngIf="displayData$ | async">
-                <gn-ui-data-view mode="chart"></gn-ui-data-view>
-              </div>
-            </mat-tab>
-          </mat-tab-group>
+                  <gn-ui-map-view></gn-ui-map-view>
+                </div>
+              </mat-tab>
+              <mat-tab [disabled]="(displayData$ | async) === false">
+                <ng-template mat-tab-label>
+                  <span class="tab-header-label" translate
+                    >record.tab.data</span
+                  >
+                </ng-template>
+                <div class="block" *ngIf="displayData$ | async">
+                  <gn-ui-data-view mode="table"></gn-ui-data-view>
+                </div>
+              </mat-tab>
+              <mat-tab [disabled]="(displayData$ | async) === false">
+                <ng-template mat-tab-label>
+                  <span class="tab-header-label" translate
+                    >record.tab.chart</span
+                  >
+                </ng-template>
+                <div class="block" *ngIf="displayData$ | async">
+                  <gn-ui-data-view mode="chart"></gn-ui-data-view>
+                </div>
+              </mat-tab>
+            </mat-tab-group>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <gn-ui-data-view-share
-    *ngIf="(selectedTabIndex$ | async) === 2"
-  ></gn-ui-data-view-share>
-  <div
-    id="access"
-    class="container-lg px-4 lg:mx-auto"
-    *ngIf="displayDownload$ | async"
-  >
-    <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
-  </div>
-
-  <div id="links" class="lg:mx-auto">
-    <div class="container-lg px-4 lg:mx-auto" *ngIf="displayOtherLinks | async">
-      <datahub-record-otherlinks class="block mt-5"></datahub-record-otherlinks>
+    <gn-ui-data-view-share
+      *ngIf="(selectedTabIndex$ | async) === 2"
+    ></gn-ui-data-view-share>
+    <div
+      id="access"
+      class="container-lg px-4 lg:mx-auto"
+      *ngIf="displayDownload$ | async"
+    >
+      <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
     </div>
 
-    <div *ngIf="displayApi$ | async">
-      <datahub-record-apis
-        [isPanelOpen]="isPanelOpen"
-        class="block mt-6"
-      ></datahub-record-apis>
+    <div id="links" class="lg:mx-auto">
+      <div
+        class="container-lg px-4 lg:mx-auto"
+        *ngIf="displayOtherLinks | async"
+      >
+        <datahub-record-otherlinks
+          class="block mt-5"
+        ></datahub-record-otherlinks>
+      </div>
+
+      <div *ngIf="displayApi$ | async">
+        <datahub-record-apis
+          [isPanelOpen]="isPanelOpen"
+          class="block mt-6"
+        ></datahub-record-apis>
+      </div>
     </div>
-  </div>
 
-  <div id="related-records" *ngIf="displayRelated$ | async">
-    <div>
-      <div class="h-48 overflow-visible">
-        <div class="container-lg px-4 lg:mx-auto">
-          <datahub-record-related-records
-            [records]="facade.related$ | async"
-          ></datahub-record-related-records>
+    <div id="related-records" *ngIf="displayRelated$ | async">
+      <div>
+        <div class="h-48 overflow-visible">
+          <div class="container-lg px-4 lg:mx-auto">
+            <datahub-record-related-records
+              [records]="facade.related$ | async"
+            ></datahub-record-related-records>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="bg-primary">
-      <div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
+      <div class="bg-primary">
+        <div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
+      </div>
     </div>
   </div>
-</div>
-<div
-  class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
-  *ngIf="facade.error$ | async as error"
->
-  <gn-ui-search-results-error
-    *ngIf="error.notFound"
-    [type]="errorTypes.RECORD_NOT_FOUND"
-    [recordId]="(facade.metadata$ | async).uniqueIdentifier"
-  ></gn-ui-search-results-error>
-  <gn-ui-search-results-error
-    *ngIf="error.otherError"
-    [type]="errorTypes.RECEIVED_ERROR"
-    [error]="error.otherError"
-  ></gn-ui-search-results-error>
+  <div
+    class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
+    *ngIf="facade.error$ | async as error"
+  >
+    <gn-ui-search-results-error
+      *ngIf="error.notFound"
+      [type]="errorTypes.RECORD_NOT_FOUND"
+      [recordId]="(facade.metadata$ | async).uniqueIdentifier"
+    ></gn-ui-search-results-error>
+    <gn-ui-search-results-error
+      *ngIf="error.otherError"
+      [type]="errorTypes.RECEIVED_ERROR"
+      [error]="error.otherError"
+    ></gn-ui-search-results-error>
+  </div>
 </div>
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
index ac9d0aeabe..bada318129 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
@@ -7,6 +7,7 @@ import { filter, map, mergeMap } from 'rxjs/operators'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
+import * as basicLightbox from 'basiclightbox'
 
 @Component({
   selector: 'datahub-record-metadata',
@@ -55,6 +56,11 @@ export class RecordMetadataComponent {
   errorTypes = ErrorType
   selectedTabIndex$ = new BehaviorSubject(0)
 
+  lightbox$ = this.facade.metadata$.pipe(
+    map((metadata) => metadata?.overviews?.[0]?.url)
+  )
+  lightboxInstance: any
+
   constructor(
     public facade: MdViewFacade,
     private searchService: SearchService,
@@ -77,4 +83,9 @@ export class RecordMetadataComponent {
       .getFiltersForOrgs([org])
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
+
+  openLightbox(src: string) {
+    this.lightboxInstance = basicLightbox.create(`<img src="${src}"/>`)
+    this.lightboxInstance.show()
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index e1d431a51d..065a5cf555 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
         "@rgrove/parse-xml": "~4.0.1",
         "alasql": "^3.1.0",
         "axios": "^1.6.0",
+        "basiclightbox": "^5.0.4",
         "chart.js": "^4.2.0",
         "chroma-js": "^2.1.2",
         "cypress-browser-permissions": "^1.1.0",
@@ -14708,6 +14709,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/basiclightbox": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/basiclightbox/-/basiclightbox-5.0.4.tgz",
+      "integrity": "sha512-EsuNWmfcFXWZOe0txKXsllYOC7bDpoaVLc4HHHlYKB/roymlZs+FBdLUU6rx2yPpnJZhulwheKdPjqr2k0+NGQ=="
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
diff --git a/package.json b/package.json
index 7c3bde2dd8..2287327f1f 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "@rgrove/parse-xml": "~4.0.1",
     "alasql": "^3.1.0",
     "axios": "^1.6.0",
+    "basiclightbox": "^5.0.4",
     "chart.js": "^4.2.0",
     "chroma-js": "^2.1.2",
     "cypress-browser-permissions": "^1.1.0",

From f37b1407a21239b56ee1cb26f46ac5bc9ffcf5a3 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Thu, 11 Jan 2024 14:35:04 +0100
Subject: [PATCH 2/7] feat(DH): Adapt styling for expand button

---
 .../app/record/record-metadata/record-metadata.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index 618edd32c3..4a0c661099 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -47,10 +47,10 @@
             <gn-ui-button
               class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
               [type]="'outline'"
-              [extraClass]="'!p-1'"
+              [extraClass]="'!py-2 !px-0'"
               (buttonClick)="openLightbox(lightbox)"
             >
-              <mat-icon class="material-symbols-outlined"
+              <mat-icon class="material-symbols-outlined font-extralight"
                 >zoom_out_map</mat-icon
               >
             </gn-ui-button>

From 63516ae5b38ac65b4ddf550cc32600504767d90b Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Mon, 15 Jan 2024 14:05:14 +0100
Subject: [PATCH 3/7] feat(DH): Fix div order

---
 .../record-metadata.component.html            | 209 +++++++++---------
 1 file changed, 100 insertions(+), 109 deletions(-)

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index 4a0c661099..0cbd0c38b2 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -67,127 +67,118 @@
         </div>
       </div>
     </div>
+  </div>
+  <div
+    style="height: 612px"
+    *ngIf="(displayMap$ | async) || (displayData$ | async)"
+    id="preview"
+  >
     <div
-      style="height: 612px"
-      *ngIf="(displayMap$ | async) || (displayData$ | async)"
-      id="preview"
+      class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
+      style="height: 512px"
     >
-      <div
-        class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
-        style="height: 512px"
-      >
-        <div class="container-lg px-4 lg:mx-auto">
-          <div>
-            <div
-              class="text-[28px] text-title font-title transform sm:translate-y-10"
-              translate
-              id="preview"
-            >
-              record.metadata.preview
-            </div>
-            <mat-tab-group
-              (selectedIndexChange)="onTabIndexChange($event)"
-              [selectedIndex]="(displayMap$ | async) ? 0 : 1"
-              animationDuration="200ms"
-              mat-stretch-tabs="false"
-              mat-align-tabs="start"
-            >
-              <mat-tab [disabled]="(displayMap$ | async) === false">
-                <ng-template mat-tab-label>
-                  <span class="tab-header-label sm:ml-32" translate
-                    >record.tab.map</span
-                  >
-                </ng-template>
-                <div
-                  class="block"
-                  style="height: 500px"
-                  *ngIf="displayMap$ | async"
-                >
-                  <gn-ui-map-view></gn-ui-map-view>
-                </div>
-              </mat-tab>
-              <mat-tab [disabled]="(displayData$ | async) === false">
-                <ng-template mat-tab-label>
-                  <span class="tab-header-label" translate
-                    >record.tab.data</span
-                  >
-                </ng-template>
-                <div class="block" *ngIf="displayData$ | async">
-                  <gn-ui-data-view mode="table"></gn-ui-data-view>
-                </div>
-              </mat-tab>
-              <mat-tab [disabled]="(displayData$ | async) === false">
-                <ng-template mat-tab-label>
-                  <span class="tab-header-label" translate
-                    >record.tab.chart</span
-                  >
-                </ng-template>
-                <div class="block" *ngIf="displayData$ | async">
-                  <gn-ui-data-view mode="chart"></gn-ui-data-view>
-                </div>
-              </mat-tab>
-            </mat-tab-group>
+      <div class="container-lg px-4 lg:mx-auto">
+        <div>
+          <div
+            class="text-[28px] text-title font-title transform sm:translate-y-10"
+            translate
+            id="preview"
+          >
+            record.metadata.preview
           </div>
+          <mat-tab-group
+            (selectedIndexChange)="onTabIndexChange($event)"
+            [selectedIndex]="(displayMap$ | async) ? 0 : 1"
+            animationDuration="200ms"
+            mat-stretch-tabs="false"
+            mat-align-tabs="start"
+          >
+            <mat-tab [disabled]="(displayMap$ | async) === false">
+              <ng-template mat-tab-label>
+                <span class="tab-header-label sm:ml-32" translate
+                  >record.tab.map</span
+                >
+              </ng-template>
+              <div
+                class="block"
+                style="height: 500px"
+                *ngIf="displayMap$ | async"
+              >
+                <gn-ui-map-view></gn-ui-map-view>
+              </div>
+            </mat-tab>
+            <mat-tab [disabled]="(displayData$ | async) === false">
+              <ng-template mat-tab-label>
+                <span class="tab-header-label" translate>record.tab.data</span>
+              </ng-template>
+              <div class="block" *ngIf="displayData$ | async">
+                <gn-ui-data-view mode="table"></gn-ui-data-view>
+              </div>
+            </mat-tab>
+            <mat-tab [disabled]="(displayData$ | async) === false">
+              <ng-template mat-tab-label>
+                <span class="tab-header-label" translate>record.tab.chart</span>
+              </ng-template>
+              <div class="block" *ngIf="displayData$ | async">
+                <gn-ui-data-view mode="chart"></gn-ui-data-view>
+              </div>
+            </mat-tab>
+          </mat-tab-group>
         </div>
       </div>
     </div>
-    <gn-ui-data-view-share
-      *ngIf="(selectedTabIndex$ | async) === 2"
-    ></gn-ui-data-view-share>
-    <div
-      id="access"
-      class="container-lg px-4 lg:mx-auto"
-      *ngIf="displayDownload$ | async"
-    >
-      <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
-    </div>
+  </div>
+  <gn-ui-data-view-share
+    *ngIf="(selectedTabIndex$ | async) === 2"
+  ></gn-ui-data-view-share>
+  <div
+    id="access"
+    class="container-lg px-4 lg:mx-auto"
+    *ngIf="displayDownload$ | async"
+  >
+    <datahub-record-downloads class="block mt-5"></datahub-record-downloads>
+  </div>
 
-    <div id="links" class="lg:mx-auto">
-      <div
-        class="container-lg px-4 lg:mx-auto"
-        *ngIf="displayOtherLinks | async"
-      >
-        <datahub-record-otherlinks
-          class="block mt-5"
-        ></datahub-record-otherlinks>
-      </div>
+  <div id="links" class="lg:mx-auto">
+    <div class="container-lg px-4 lg:mx-auto" *ngIf="displayOtherLinks | async">
+      <datahub-record-otherlinks class="block mt-5"></datahub-record-otherlinks>
+    </div>
 
-      <div *ngIf="displayApi$ | async">
-        <datahub-record-apis
-          [isPanelOpen]="isPanelOpen"
-          class="block mt-6"
-        ></datahub-record-apis>
-      </div>
+    <div *ngIf="displayApi$ | async">
+      <datahub-record-apis
+        [isPanelOpen]="isPanelOpen"
+        class="block mt-6"
+      ></datahub-record-apis>
     </div>
+  </div>
 
-    <div id="related-records" *ngIf="displayRelated$ | async">
-      <div>
-        <div class="h-48 overflow-visible">
-          <div class="container-lg px-4 lg:mx-auto">
-            <datahub-record-related-records
-              [records]="facade.related$ | async"
-            ></datahub-record-related-records>
-          </div>
+  <div id="related-records" *ngIf="displayRelated$ | async">
+    <div>
+      <div class="h-48 overflow-visible">
+        <div class="container-lg px-4 lg:mx-auto">
+          <datahub-record-related-records
+            [records]="facade.related$ | async"
+          ></datahub-record-related-records>
         </div>
       </div>
-      <div class="bg-primary">
-        <div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
-      </div>
+    </div>
+    <div class="bg-primary">
+      <div class="container-lg mx-auto h-[1096px] sm:h-96"></div>
     </div>
   </div>
-  <div
-    class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
-    *ngIf="facade.error$ | async as error"
-  >
-    <gn-ui-search-results-error
-      *ngIf="error.notFound"
-      [type]="errorTypes.RECORD_NOT_FOUND"
-      [recordId]="(facade.metadata$ | async).uniqueIdentifier"
-    ></gn-ui-search-results-error>
-    <gn-ui-search-results-error
-      *ngIf="error.otherError"
-      [type]="errorTypes.RECEIVED_ERROR"
-      [error]="error.otherError"
-    ></gn-ui-search-results-error>
-  </div>
+</div>
+<div
+  class="mt-12 p-4 max-w-[600px] m-auto text-[13px]"
+  *ngIf="facade.error$ | async as error"
+>
+  <gn-ui-search-results-error
+    *ngIf="error.notFound"
+    [type]="errorTypes.RECORD_NOT_FOUND"
+    [recordId]="(facade.metadata$ | async).uniqueIdentifier"
+  ></gn-ui-search-results-error>
+  <gn-ui-search-results-error
+    *ngIf="error.otherError"
+    [type]="errorTypes.RECEIVED_ERROR"
+    [error]="error.otherError"
+  ></gn-ui-search-results-error>
 </div>

From 1c8b2b7c9600228fa1e9c5cd7c4e9fbe899458fa Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Tue, 16 Jan 2024 16:35:51 +0100
Subject: [PATCH 4/7] feat(ui): Create new component for lightbox, don't
 display thumbnail if image is a placeholder

---
 .../record-metadata.component.html            | 27 ++++-------------
 .../record-metadata.component.ts              | 15 ++++------
 libs/ui/elements/src/index.ts                 |  1 +
 .../image-overlay-preview.component.css       |  0
 .../image-overlay-preview.component.html      | 29 +++++++++++++++++++
 .../image-overlay-preview.component.spec.ts   | 21 ++++++++++++++
 .../image-overlay-preview.component.ts        | 15 ++++++++++
 .../metadata-contact.component.html           |  2 +-
 .../src/lib/thumbnail/thumbnail.component.ts  |  4 +++
 .../ui/elements/src/lib/ui-elements.module.ts |  3 ++
 10 files changed, 85 insertions(+), 32 deletions(-)
 create mode 100644 libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.css
 create mode 100644 libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html
 create mode 100644 libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.spec.ts
 create mode 100644 libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
index 0cbd0c38b2..c4e7a0fcb1 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html
@@ -33,29 +33,12 @@
             [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
-        <div
-          *ngIf="lightbox$ | async as lightbox"
-          data-cy="record-thumbnail"
-          class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
+        <gn-ui-image-overlay-preview
+          [imageUrl]="thumbnailUrl$ | async"
+          (isPlaceholderShown)="showOverlay = !$event"
+          *ngIf="showOverlay"
         >
-          <gn-ui-thumbnail
-            class="relative h-full w-full"
-            [thumbnailUrl]="(facade.metadata$ | async).overviews?.[0]?.url"
-            fit="cover"
-          ></gn-ui-thumbnail>
-          <div class="relative">
-            <gn-ui-button
-              class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
-              [type]="'outline'"
-              [extraClass]="'!py-2 !px-0'"
-              (buttonClick)="openLightbox(lightbox)"
-            >
-              <mat-icon class="material-symbols-outlined font-extralight"
-                >zoom_out_map</mat-icon
-              >
-            </gn-ui-button>
-          </div>
-        </div>
+        </gn-ui-image-overlay-preview>
         <div>
           <gn-ui-metadata-contact
             (organizationClick)="onOrganizationClick($event)"
diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
index bada318129..23f69eed99 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
@@ -7,7 +7,6 @@ import { filter, map, mergeMap } from 'rxjs/operators'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
-import * as basicLightbox from 'basiclightbox'
 
 @Component({
   selector: 'datahub-record-metadata',
@@ -56,10 +55,13 @@ export class RecordMetadataComponent {
   errorTypes = ErrorType
   selectedTabIndex$ = new BehaviorSubject(0)
 
-  lightbox$ = this.facade.metadata$.pipe(
-    map((metadata) => metadata?.overviews?.[0]?.url)
+  thumbnailUrl$ = this.facade.metadata$.pipe(
+    map((metadata) => {
+      return metadata?.overviews?.[0]?.url
+    })
   )
-  lightboxInstance: any
+
+  showOverlay = true
 
   constructor(
     public facade: MdViewFacade,
@@ -83,9 +85,4 @@ export class RecordMetadataComponent {
       .getFiltersForOrgs([org])
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
-
-  openLightbox(src: string) {
-    this.lightboxInstance = basicLightbox.create(`<img src="${src}"/>`)
-    this.lightboxInstance.show()
-  }
 }
diff --git a/libs/ui/elements/src/index.ts b/libs/ui/elements/src/index.ts
index ed3b7f3ad5..a0ee32142f 100644
--- a/libs/ui/elements/src/index.ts
+++ b/libs/ui/elements/src/index.ts
@@ -20,3 +20,4 @@ export * from './lib/search-results-error/search-results-error.component'
 export * from './lib/user-preview/user-preview.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/markdown-parser/markdown-parser.component'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.css b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html
new file mode 100644
index 0000000000..024d2bdbfa
--- /dev/null
+++ b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html
@@ -0,0 +1,29 @@
+<gn-ui-content-ghost
+  [showContent]="imageUrl !== undefined"
+  ghostClass="h-36 mb-3"
+>
+  <div
+    *ngIf="imageUrl"
+    data-cy="record-thumbnail"
+    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3"
+  >
+    <gn-ui-thumbnail
+      class="relative h-full w-full"
+      [thumbnailUrl]="imageUrl"
+      fit="cover"
+      (placeholderShown)="isPlaceholderShown.emit($event)"
+    ></gn-ui-thumbnail>
+    <div class="relative">
+      <gn-ui-button
+        class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
+        [type]="'outline'"
+        [extraClass]="'!py-2 !px-0'"
+        (buttonClick)="openLightbox(imageUrl)"
+      >
+        <mat-icon class="material-symbols-outlined font-extralight"
+          >zoom_out_map</mat-icon
+        >
+      </gn-ui-button>
+    </div>
+  </div>
+</gn-ui-content-ghost>
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.spec.ts b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.spec.ts
new file mode 100644
index 0000000000..2e4c996979
--- /dev/null
+++ b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ImageOverlayPreviewComponent } from './image-overlay-preview.component'
+
+describe('ImageOverlayPreviewComponent', () => {
+  let component: ImageOverlayPreviewComponent
+  let fixture: ComponentFixture<ImageOverlayPreviewComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ImageOverlayPreviewComponent],
+    })
+    fixture = TestBed.createComponent(ImageOverlayPreviewComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts
new file mode 100644
index 0000000000..c7f24db928
--- /dev/null
+++ b/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts
@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import * as basicLightbox from 'basiclightbox'
+
+@Component({
+  selector: 'gn-ui-image-overlay-preview',
+  templateUrl: './image-overlay-preview.component.html',
+  styleUrls: ['./image-overlay-preview.component.css'],
+})
+export class ImageOverlayPreviewComponent {
+  @Input() imageUrl: string
+  @Output() isPlaceholderShown = new EventEmitter<boolean>()
+  openLightbox(src: string) {
+    basicLightbox.create(`<img src="${src}"/>`).show()
+  }
+}
diff --git a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html
index 6670ab21ec..804dfe6a5e 100644
--- a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html
+++ b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html
@@ -20,7 +20,7 @@
           (click)="onOrganizationClick()"
           data-cy="organization-name"
         >
-          {{ shownOrganization.name }}
+          {{ shownOrganization?.name }}
         </div>
       </div>
       <div *ngIf="shownOrganization?.website">
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
index be4e85eaf5..239dc4ca52 100644
--- a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
+++ b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -10,6 +10,8 @@ import {
   Optional,
   SimpleChanges,
   ViewChild,
+  Output,
+  EventEmitter,
 } from '@angular/core'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
@@ -36,6 +38,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() fit: FitOptions | FitOptions[] = 'cover'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
+  @Output() placeholderShown = new EventEmitter<boolean>()
   imgUrl: string
   imgFit: FitOptions
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
@@ -85,6 +88,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   private setNewSrcImage(image: ThumbnailImageObject) {
     this.imgFit = image.fit
     this.imgUrl = image.url
+    this.placeholderShown.emit(this.isPlaceholder)
   }
 
   private setPlaceholder(): void {
diff --git a/libs/ui/elements/src/lib/ui-elements.module.ts b/libs/ui/elements/src/lib/ui-elements.module.ts
index eac4060e3b..0fd0093efa 100644
--- a/libs/ui/elements/src/lib/ui-elements.module.ts
+++ b/libs/ui/elements/src/lib/ui-elements.module.ts
@@ -30,6 +30,7 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt
 import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
 
 @NgModule({
   imports: [
@@ -67,6 +68,7 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
     MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
+    ImageOverlayPreviewComponent,
   ],
   exports: [
     MetadataInfoComponent,
@@ -88,6 +90,7 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
     PaginationButtonsComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
+    ImageOverlayPreviewComponent,
   ],
 })
 export class UiElementsModule {}

From 1c5f6266fc4a11aafe97c02f05953612e1b984fd Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Thu, 18 Jan 2024 09:50:20 +0100
Subject: [PATCH 5/7] feat(DH): Add e2e test for thumbnail in dataset page

---
 apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
index 2862cb59c9..e490683a5e 100644
--- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
+++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -103,6 +103,20 @@ describe('dataset pages', () => {
             expect(text).not.to.equal('')
           })
       })
+      it.only('should display the thumbnail image and magnify', () => {
+        cy.get('datahub-record-metadata')
+          .find('[id="about"]')
+          .find('gn-ui-image-overlay-preview')
+          .as('overlay')
+          .should('have.length', 1)
+        cy.get('@overlay').find('gn-ui-button').click()
+        cy.get('[class="basicLightbox__placeholder"]')
+          .as('lightbox')
+          .find('img')
+          .should('have.length', 1)
+        cy.get('body').click()
+        cy.get('@lightbox').should('have.length', 0)
+      })
       it('should display the contact details', () => {
         cy.get('datahub-record-metadata')
           .find('[id="about"]')

From 77875c2b1f3db1d0e4e46fb02d32039050f15b61 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Tue, 23 Jan 2024 13:54:53 +0100
Subject: [PATCH 6/7] feat(DH): Differentiate thumbnailUrl for content ghost

---
 .../record/record-metadata/record-metadata.component.ts  | 9 ++++++++-
 .../src/lib/gn4/gn4.metadata.mapper.ts                   | 1 +
 .../related-record-card.component.html                   | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
index 23f69eed99..58d718ee5d 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.ts
@@ -57,7 +57,14 @@ export class RecordMetadataComponent {
 
   thumbnailUrl$ = this.facade.metadata$.pipe(
     map((metadata) => {
-      return metadata?.overviews?.[0]?.url
+      // in order to differentiate between metadata not loaded yet
+      // and url not defined
+      // the content-ghost of image-overlay-preview relies on this differentiation
+      if (metadata?.overviews === undefined) {
+        return undefined
+      } else {
+        return metadata?.overviews?.[0]?.url ?? null
+      }
     })
   )
 
diff --git a/libs/api/metadata-converter/src/lib/gn4/gn4.metadata.mapper.ts b/libs/api/metadata-converter/src/lib/gn4/gn4.metadata.mapper.ts
index a324fe1742..24b67007df 100644
--- a/libs/api/metadata-converter/src/lib/gn4/gn4.metadata.mapper.ts
+++ b/libs/api/metadata-converter/src/lib/gn4/gn4.metadata.mapper.ts
@@ -34,6 +34,7 @@ export class Gn4MetadataMapper extends MetadataBaseMapper<Gn4Record> {
       useLimitations: [],
       spatialExtents: [],
       temporalExtents: [],
+      overviews: [],
     }
     const record: CatalogRecord = Object.keys(_source).reduce(
       (prev, fieldName) =>
diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
index b6fb95eba8..932c405b23 100644
--- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
+++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html
@@ -6,7 +6,7 @@
   <div class="h-52 bg-gray-100">
     <gn-ui-thumbnail
       class="h-52 w-full object-cover"
-      [thumbnailUrl]="record.overviews?.[0].url.toString()"
+      [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
     ></gn-ui-thumbnail>
   </div>
   <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">

From 1ba72275ec1141ca27ef4ea95e0d2fbf7859162a Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Wed, 24 Jan 2024 16:25:58 +0100
Subject: [PATCH 7/7] feat(DH): Add tests for thumbnailUrl logic

---
 .../record-metadata.component.spec.ts         | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
index 4e449bfc01..35243aa0ae 100644
--- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
+++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.spec.ts
@@ -148,6 +148,15 @@ export class MockMetadataCatalogComponent {
 export class MockRecordApiFormComponent {
   @Input() apiLink: DatasetServiceDistribution
 }
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'gn-ui-image-overlay-preview',
+  template: '<div></div>',
+})
+export class MockImgOverlayPreviewComponent {
+  @Input() imageUrl: string
+  @Output() isPlaceholderShown = new EventEmitter<boolean>()
+}
 
 describe('RecordMetadataComponent', () => {
   let component: RecordMetadataComponent
@@ -172,6 +181,7 @@ describe('RecordMetadataComponent', () => {
         MockMetadataCatalogComponent,
         MockMetadataContactComponent,
         MockRecordApiFormComponent,
+        MockImgOverlayPreviewComponent,
       ],
       schemas: [NO_ERRORS_SCHEMA],
       imports: [TranslateModule.forRoot()],
@@ -267,6 +277,56 @@ describe('RecordMetadataComponent', () => {
           fixture.debugElement.query(By.directive(MockMetadataCatalogComponent))
         ).toBeFalsy()
       })
+      it('does not display the image overlay preview', () => {
+        expect(
+          fixture.debugElement.query(
+            By.directive(MockImgOverlayPreviewComponent)
+          )
+        ).toBeFalsy()
+      })
+    })
+    describe('Image Overlay Preview', () => {
+      describe('if metadata without overview', () => {
+        let imgOverlayPreview: MockImgOverlayPreviewComponent
+        beforeEach(() => {
+          facade.isPresent$.next(true)
+          facade.metadata$.next({})
+          fixture.detectChanges()
+          imgOverlayPreview = fixture.debugElement.query(
+            By.directive(MockImgOverlayPreviewComponent)
+          ).componentInstance
+        })
+        it('should send undefined as imageUrl to imgOverlayPreview component', () => {
+          expect(imgOverlayPreview).toBeTruthy()
+          expect(imgOverlayPreview.imageUrl).toBe(undefined)
+        })
+      })
+      describe('if metadata with overview', () => {
+        let imgOverlayPreview: MockImgOverlayPreviewComponent
+        beforeEach(() => {
+          facade.isPresent$.next(true)
+          fixture.detectChanges()
+          imgOverlayPreview = fixture.debugElement.query(
+            By.directive(MockImgOverlayPreviewComponent)
+          ).componentInstance
+        })
+        describe('and url defined', () => {
+          it('should send the imageUrl to imgOverlayPreview component', () => {
+            expect(imgOverlayPreview).toBeTruthy()
+            expect(imgOverlayPreview.imageUrl).toBeDefined()
+          })
+        })
+        describe('and url undefined', () => {
+          beforeEach(() => {
+            facade.metadata$.next({ overviews: [] })
+            fixture.detectChanges()
+          })
+          it('should send the imagUrl as null to imgOverlayPreview component', () => {
+            expect(imgOverlayPreview).toBeTruthy()
+            expect(imgOverlayPreview.imageUrl).toBeNull()
+          })
+        })
+      })
     })
   })