geonetwork-ui 2.4.0-dev.a2f3bb9f → 2.4.0-dev.a9a61288

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -0,0 +1,91 @@
+import { Component, EventEmitter, OnDestroy, Output } from '@angular/core'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { SearchFacade } from '../state/search.facade'
+import { SelectionService } from '../../../../../../libs/api/repository/src'
+import { SearchService } from '../utils/service/search.service'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
+import { CommonModule } from '@angular/common'
+import { Subscription } from 'rxjs'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-results-table-container',
+  templateUrl: './results-table-container.component.html',
+  styleUrls: ['./results-table-container.component.css'],
+  standalone: true,
+  imports: [CommonModule, ResultsTableComponent],
+})
+export class ResultsTableContainerComponent implements OnDestroy {
+  @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+
+  subscription = new Subscription()
+
+  records$ = this.searchFacade.results$
+  selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
+  sortBy$ = this.searchFacade.sortBy$
+
+  hasDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
+
+  constructor(
+    private searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private selectionService: SelectionService,
+    private recordsRepository: RecordsRepositoryInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
+  ) {}
+
+  handleRecordClick(item: unknown) {
+    this.recordClick.emit(item as CatalogRecord)
+  }
+
+  handleDuplicateRecord(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
+  async handleDeleteRecord(item: unknown) {
+    const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    this.subscription.add(
+      this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
+        next: () => {
+          this.recordsRepository.clearRecordDraft(uniqueIdentifier)
+          this.searchFacade.requestNewResults()
+        },
+        error: (error) => {
+          this.notificationsService.showNotification({
+            type: 'error',
+            title: this.translateService.instant(
+              'editor.record.deleteError.title'
+            ),
+            text: `${this.translateService.instant(
+              'editor.record.deleteError.body'
+            )} ${error}`,
+            closeMessage: this.translateService.instant(
+              'editor.record.deleteError.closeMessage'
+            ),
+          })
+        },
+      })
+    )
+  }
+
+  handleSortByChange(col: string, order: 'asc' | 'desc') {
+    this.searchService.setSortBy([order, col])
+  }
+
+  handleRecordsSelectedChange(records: CatalogRecord[], selected: boolean) {
+    if (!selected) {
+      this.selectionService.deselectRecords(records)
+    } else {
+      this.selectionService.selectRecords(records)
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+}

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -8,6 +8,7 @@ import {
   Paginate,
   RequestMoreOnAggregation,
   RequestMoreResults,
+  RequestNewResults,
   SetConfigAggregations,
   SetConfigFilters,
   SetConfigRequestFields,
@@ -37,6 +38,7 @@ import {
   getSearchResultsLoading,
   getSearchSortBy,
   getSpatialFilterEnabled,
+  isBeginningOfResults,
   isEndOfResults,
   totalPages,
 } from './selectors'
@@ -58,6 +60,7 @@ export class SearchFacade {
   layout$: Observable<string>
   sortBy$: Observable<SortByField>
   isLoading$: Observable<boolean>
+  isBeginningOfResults$: Observable<boolean>
   isEndOfResults$: Observable<boolean>
   totalPages$: Observable<number>
   currentPage$: Observable<number>
@@ -98,6 +101,9 @@ export class SearchFacade {
     this.isLoading$ = this.store.pipe(select(getSearchResultsLoading, searchId))
     this.searchFilters$ = this.store.pipe(select(getSearchFilters, searchId))
     this.resultsHits$ = this.store.pipe(select(getSearchResultsHits, searchId))
+    this.isBeginningOfResults$ = this.store.pipe(
+      select(isBeginningOfResults, searchId)
+    )
     this.isEndOfResults$ = this.store.pipe(select(isEndOfResults, searchId))
     this.totalPages$ = this.store.pipe(select(totalPages, searchId))
     this.currentPage$ = this.store.pipe(select(currentPage, searchId))
@@ -146,6 +152,11 @@ export class SearchFacade {
     return this
   }
 
+  requestNewResults(): SearchFacade {
+    this.store.dispatch(new RequestNewResults(this.searchId))
+    return this
+  }
+
   requestMoreOnAggregation(key: string, increment: number): SearchFacade {
     this.store.dispatch(
       new RequestMoreOnAggregation(key, increment, this.searchId)

package/src/libs/feature/search/src/lib/state/selectors.ts

@@ -50,6 +50,13 @@ export const getSearchResultsHits = createSelector(
   (state: SearchStateSearch) => state.results.count
 )
 
+export const isBeginningOfResults = createSelector(
+  getSearchStateSearch,
+  (state: SearchStateSearch) => {
+    return state.params.currentPage === 0
+  }
+)
+
 export const isEndOfResults = createSelector(
   getSearchStateSearch,
   (state: SearchStateSearch) => {

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -25,19 +25,21 @@ marker('search.filters.keyword')
 marker('search.filters.isSpatial')
 marker('search.filters.license')
 marker('search.filters.publicationYear')
-marker('search.filters.publisher')
+marker('search.filters.organization')
 marker('search.filters.representationType')
 marker('search.filters.resourceType')
 marker('search.filters.standard')
 marker('search.filters.topic')
 marker('search.filters.contact')
+marker('search.filters.producerOrg')
+marker('search.filters.publisherOrg')
 
 @Injectable({
   providedIn: 'root',
 })
 export class FieldsService {
   protected fields = {
-    publisher: new OrganizationSearchField(this.injector),
+    organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
     resourceType: new TranslatedSearchField(
       'resourceType',
@@ -70,6 +72,18 @@ export class FieldsService {
     q: new FullTextSearchField(),
     license: new LicenseSearchField(this.injector),
     owner: new OwnerSearchField(this.injector),
+    producerOrg: new MultilingualSearchField(
+      'originatorOrgForResourceObject',
+      this.injector,
+      'asc',
+      'key'
+    ),
+    publisherOrg: new MultilingualSearchField(
+      'distributorOrgForResourceObject',
+      this.injector,
+      'asc',
+      'key'
+    ),
   } as Record<string, AbstractSearchField>
 
   get supportedFields() {

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -1,14 +1,14 @@
 <a href (click)="clickOrganisation($event)" [attr.href]="organisationUrl">
   <div
     class="group cursor-pointer rounded-lg h-full flex flex-col"
-    [title]="organisation.name"
+    [title]="organization.name"
   >
     <div
       class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
-        [thumbnailUrl]="organisation.logoUrl"
+        [thumbnailUrl]="organization.logoUrl"
         [fit]="'contain'"
       >
       </gn-ui-thumbnail>
@@ -18,22 +18,24 @@
         class="shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
         data-cy="organizationName"
       >
-        {{ organisation.name }}</span
+        {{ organization.name }}</span
       >
       <p
         class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden"
         data-cy="organizationDesc"
       >
-        {{ organisation.description }}
+        {{ organization.description }}
       </p>
       <div class="shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
           >folder_open
         </mat-icon>
         <span class="mx-1" data-cy="organizationRecordsCount">{{
-          organisation.recordCount
+          organization.recordCount
         }}</span>
-        <span translate>record.metadata.publications</span>
+        <span translate [translateParams]="{ count: organization.recordCount }"
+          >record.metadata.publications</span
+        >
       </div>
     </div>
   </div>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -14,12 +14,12 @@ import { Organization } from '../../../../../../libs/common/domain/src/lib/model
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OrganisationPreviewComponent {
-  @Input() organisation: Organization
+  @Input() organization: Organization
   @Input() organisationUrl: string
   @Output() clickedOrganisation = new EventEmitter<Organization>()
 
   clickOrganisation(event: Event) {
     event.preventDefault()
-    this.clickedOrganisation.emit(this.organisation)
+    this.clickedOrganisation.emit(this.organization)
   }
 }

package/src/libs/ui/catalog/src/lib/ui-catalog.module.ts

@@ -9,6 +9,7 @@ import { OrganisationsFilterComponent } from './organisations-filter/organisatio
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
 import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
+import { RouterLink } from '@angular/router'
 
 @NgModule({
   declarations: [
@@ -24,6 +25,7 @@ import { OrganisationsResultComponent } from './organisations-result/organisatio
     UiElementsModule,
     UiInputsModule,
     MatIconModule,
+    RouterLink,
   ],
   exports: [
     CatalogTitleComponent,

package/src/libs/ui/dataviz/src/lib/figure/figure.component.html

@@ -1,7 +1,13 @@
 <div
-  translate
   class="flex flex-row justify-start items-center overflow-hidden"
-  [title]="hoverTitle"
+  data-test="figureTitle"
+  [title]="
+    figure.toString() +
+    ' ' +
+    unit +
+    ' ' +
+    (title | translate: { count: figure })
+  "
 >
   <mat-icon
     class="material-symbols-outlined {{ bgClass }} {{
@@ -13,7 +19,9 @@
   </mat-icon>
   <div class="shrink overflow-hidden">
     <div class="figure-block text-[1.5em] text-black">
-      <span class="figure font-medium mr-[0.3em]">{{ figure }}</span>
+      <span class="figure font-medium mr-[0.3em]" data-test="figure">{{
+        figure
+      }}</span>
       <span class="unit text-[0.665em]">{{ unit }}</span>
     </div>
     <div translate class="title truncate" [translateParams]="{ count: figure }">

package/src/libs/ui/dataviz/src/lib/figure/figure.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 
 @Component({
   selector: 'gn-ui-figure',
@@ -10,17 +10,13 @@ export class FigureComponent {
   @Input() icon!: string
   @Input() title!: string
   @Input() figure!: string | number
-  @Input() unit?: string
+  @Input() unit = ''
   @Input() color: 'primary' | 'secondary' = 'primary'
 
-  get hoverTitle() {
-    return `${this.figure.toString()} ${this.unit || ''}
-${this.title}`
-  }
-
   get textClass() {
     return this.color === 'primary' ? 'text-primary' : 'text-secondary'
   }
+
   get bgClass() {
     return this.color === 'primary' ? 'bg-primary-white' : 'bg-secondary-white'
   }

package/src/libs/ui/elements/src/index.ts

@@ -1,24 +1,25 @@
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.component'
+export * from './lib/confirmation-dialog/confirmation-dialog.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/error/error.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'
-export * from './lib/max-lines/max-lines.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/notification/notification.component'
 export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
-export * from './lib/error/error.component'
+export * from './lib/sortable-list/sortable-list.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/notification/notification.component'

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,7 +1,5 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden"
-  [ngClass]="{ 'cursor-pointer': displayApiFormButton }"
-  (click)="openRecordApiFormPanel()"
+  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default"
 >
   <div
     class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
@@ -17,35 +15,37 @@
         }"
         >{{ link.accessServiceProtocol }}</span
       >
-      <gn-ui-copy-text-button
-        *ngIf="!displayApiFormButton"
-        [text]="link.url.toString()"
-        [tooltipText]="'tooltip.url.copy' | translate"
-        [displayText]="false"
-      ></gn-ui-copy-text-button>
-      <button
-        *ngIf="displayApiFormButton"
-        type="button"
-        [ngClass]="{
-          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-            displayText
-        }"
-        mat-raised-button
-        [matTooltip]="
-          !currentlyActive
-            ? ('record.metadata.api.form.openForm' | translate)
-            : ('record.metadata.api.form.closeForm' | translate)
-        "
-        matTooltipPosition="above"
-      >
-        <mat-icon
-          class="material-symbols-outlined pointer-events-none align-middle card-icon"
+      <div class="flex flex-row gap-2 items-center">
+        <gn-ui-copy-text-button
+          [text]="link.url"
+          [tooltipText]="'tooltip.url.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <button
+          *ngIf="displayApiFormButton"
+          type="button"
           [ngClass]="{
-            'text-secondary opacity-100': currentlyActive
+            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+              displayText
           }"
-          >more_horiz</mat-icon
+          mat-raised-button
+          [matTooltip]="
+            !currentlyActive
+              ? ('record.metadata.api.form.openForm' | translate)
+              : ('record.metadata.api.form.closeForm' | translate)
+          "
+          matTooltipPosition="above"
+          (click)="openRecordApiFormPanel()"
         >
-      </button>
+          <mat-icon
+            class="material-symbols-outlined pointer-events-none align-middle card-icon"
+            [ngClass]="{
+              'text-secondary opacity-100': currentlyActive
+            }"
+            >more_horiz</mat-icon
+          >
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>{{ data.message }}</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    cdkFocusInitial
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ConfirmationDialogData {
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatDialogModule, ButtonComponent],
+})
+export class ConfirmationDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmationDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

package/src/libs/ui/elements/src/lib/error/error.component.html

@@ -8,11 +8,11 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">face</mat-icon>
       <mat-icon class="material-symbols-outlined question-mark1"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
       <mat-icon class="material-symbols-outlined question-mark2"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
@@ -32,6 +32,15 @@
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div *ngIf="type === types.ORGANIZATION_HAS_NO_DATASET">
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate>search.error.organizationHasNoDataset</div>
+  </div>
   <div
     *ngIf="type === types.RECORD_NOT_FOUND"
     data-test="record-not-found-error"
@@ -39,12 +48,27 @@
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
       <mat-icon class="material-symbols-outlined computer-question-mark"
-        >question_mark</mat-icon
-      >
+        >question_mark
+      </mat-icon>
     </div>
     <div translate [translateParams]="{ id: recordId }">
       search.error.recordNotFound
     </div>
     <div *ngIf="error">{{ error }}</div>
   </div>
+  <div
+    *ngIf="type === types.ORGANIZATION_NOT_FOUND"
+    data-test="org-not-found-error"
+  >
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
+      <mat-icon class="material-symbols-outlined computer-question-mark"
+        >question_mark
+      </mat-icon>
+    </div>
+    <div translate [translateParams]="{ id: recordId }">
+      search.error.organizationNotFound
+    </div>
+    <div *ngIf="error">{{ error }}</div>
+  </div>
 </div>

package/src/libs/ui/elements/src/lib/error/error.component.ts

@@ -5,6 +5,8 @@ export enum ErrorType {
   RECEIVED_ERROR,
   RECORD_NOT_FOUND,
   DATASET_HAS_NO_LINK,
+  ORGANIZATION_HAS_NO_DATASET,
+  ORGANIZATION_NOT_FOUND,
 }
 
 @Component({

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html

@@ -1,5 +1,8 @@
 <div class="h-full flex flex-col">
-  <p class="flex-none mb-2 font-medium text-sm text-gray-900">
+  <p
+    *ngIf="helperText"
+    class="flex-none mb-2 font-medium text-sm text-gray-900"
+  >
     {{ helperText }}
   </p>
   <div class="flex-1" [hidden]="preview">

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -2,9 +2,10 @@
 :host ::ng-deep .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  margin: 0px 0px 1.5rem 0px;
+  margin: 0;
   line-height: 1.5;
   word-wrap: break-word;
+  height: 100%;
 }
 
 /** Emphasis **/

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -1,7 +1,7 @@
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
-      <div>
+      <div class="mb-6">
         <gn-ui-markdown-parser
           [textContent]="metadata.abstract"
         ></gn-ui-markdown-parser>
@@ -47,19 +47,23 @@
       </ng-template>
     </ng-container>
     <ng-container *ngIf="legalConstraints.length">
-      <gn-ui-markdown-parser
-        *ngFor="let constraint of legalConstraints"
-        [textContent]="constraint"
-      >
-      </gn-ui-markdown-parser>
+      <div class="mb-6">
+        <gn-ui-markdown-parser
+          *ngFor="let constraint of legalConstraints"
+          [textContent]="constraint"
+        >
+        </gn-ui-markdown-parser>
+      </div>
     </ng-container>
     <ng-container *ngIf="otherConstraints.length">
       <div gnUiLinkify *ngFor="let constraint of otherConstraints">
         <h5 translate class="font-medium text-black text-sm mb-[2px] mt-[16px]">
           record.metadata.otherConstraints
         </h5>
-        <gn-ui-markdown-parser [textContent]="constraint">
-        </gn-ui-markdown-parser>
+        <div class="mb-6">
+          <gn-ui-markdown-parser [textContent]="constraint">
+          </gn-ui-markdown-parser>
+        </div>
       </div>
     </ng-container>
 

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,22 +1,16 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
     <gn-ui-metadata-quality-item
       *ngFor="let e of items"
@@ -24,4 +18,4 @@
       [value]="e.value"
     ></gn-ui-metadata-quality-item>
   </div>
-</div>
+</ng-template>