Merge pull request #741 from geonetwork/update-quality-widget

[DH] Metadata-Quality widget update

.github/workflows/checks.yml

@@ -154,6 +154,9 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'npm'
 
+      - name: Create pipeline docker image
+        run: cd tools && docker build . -f pipelines/Dockerfile -t geonetwork/geonetwork-ui-tools-pipelines:latest
+
       - name: Build the backend
         run: sudo docker-compose -f support-services/docker-compose.yml up -d init
 

apps/datahub-e2e/src/e2e/datasets.cy.ts

@@ -456,4 +456,40 @@ describe('datasets', () => {
       })
     })
   })
+
+  describe('metadata quality', () => {
+    describe('metadata quality widget not enabled', () => {
+      it('should not show quality score sorting', () => {
+        cy.get('@sortBy').find('button').click()
+        cy.get('.cdk-overlay-container')
+          .find('[role=listbox]')
+          .find('button')
+          .should('have.length', 3)
+      })
+    })
+
+    describe('metadata quality widget enabled', () => {
+      beforeEach(() => {
+        // this will enable metadata quality widget
+        cy.intercept('GET', '/assets/configuration/default.toml', {
+          fixture: 'config-with-metadata-quality.toml',
+        })
+        cy.visit('/search')
+      })
+
+      it('should display quality widget', () => {
+        cy.get('@sortBy').selectDropdownOption('desc,createDate')
+        cy.get('gn-ui-progress-bar')
+          .eq(0)
+          .should('have.attr', 'ng-reflect-value', 87)
+      })
+
+      it('should display results sorted by quality score', () => {
+        cy.get('@sortBy').selectDropdownOption('desc,qualityScore')
+        cy.get('gn-ui-progress-bar')
+          .eq(0)
+          .should('have.attr', 'ng-reflect-value', 100)
+      })
+    })
+  })
 })

apps/datahub-e2e/src/fixtures/config-with-metadata-quality.toml

@@ -0,0 +1,12 @@
+[global]
+geonetwork4_api_url = "/geonetwork/srv/api"
+proxy_path = ""
+
+[theme]
+primary_color = "#c82850"
+secondary_color = "#001638"
+main_color = "#212029" # All-purpose text color
+background_color = "#fdfbff"
+
+[metadata-quality]
+enabled = true

apps/datahub/src/app/home/search/search-page/search-page.component.html

@@ -1,6 +1,6 @@
 <div class="container-lg mx-auto mt-8">
   <datahub-search-filters
-    [isQualitySortable]="isQualitySortable"
+    [isQualitySortable]="metadataQualityDisplay"
   ></datahub-search-filters>
   <div class="mt-6 rounded-lg text-gray-800 p-4 bg-slate-100">
     <gn-ui-results-hits></gn-ui-results-hits>

apps/datahub/src/app/home/search/search-page/search-page.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
 import { RouterFacade } from '@geonetwork-ui/feature/router'
 import { SearchFacade } from '@geonetwork-ui/feature/search'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
-import { MetadataQualityDisplay } from '@geonetwork-ui/ui/elements'
 import {
   MetadataQualityConfig,
   getMetadataQualityConfig,
@@ -15,31 +14,19 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchPageComponent implements OnInit {
-  isQualitySortable = false
-  metadataQualityDisplay = {} as MetadataQualityDisplay
+  metadataQualityDisplay: boolean
 
   constructor(
     private searchRouter: RouterFacade,
-    private searchFacade: SearchFacade
+    public searchFacade: SearchFacade
   ) {}
 
   ngOnInit() {
     this.searchFacade.setResultsLayout('ROW')
 
     const cfg: MetadataQualityConfig =
       getMetadataQualityConfig() || ({} as MetadataQualityConfig)
-    this.isQualitySortable = cfg.SORTABLE === true
-    this.metadataQualityDisplay = {
-      widget: cfg.ENABLED && cfg.DISPLAY_WIDGET_IN_SEARCH !== false,
-      title: cfg.DISPLAY_TITLE,
-      description: cfg.DISPLAY_DESCRIPTION,
-      contact: cfg.DISPLAY_CONTACT,
-      keywords: cfg.DISPLAY_KEYWORDS,
-      legalConstraints: cfg.DISPLAY_LEGAL_CONSTRAINTS,
-      topic: cfg.DISPLAY_TOPIC,
-      updateFrequency: cfg.DISPLAY_UPDATE_FREQUENCY,
-      organisation: cfg.DISPLAY_ORGANISATION,
-    }
+    this.metadataQualityDisplay = cfg.ENABLED
   }
 
   onMetadataSelection(metadata: CatalogRecord): void {

apps/datahub/src/app/record/record-metadata/record-metadata.component.html

@@ -24,13 +24,12 @@
         </gn-ui-metadata-info>
       </div>
       <div>
-        <div *ngIf="hasMetadataQualityWidget">
+        <div *ngIf="metadataQualityDisplay">
           <p class="text text-gray-700 text-xs mb-3 uppercase" translate>
             record.metadata.quality
           </p>
           <gn-ui-metadata-quality
             [metadata]="facade.metadata$ | async"
-            [metadataQualityDisplay]="metadataQualityDisplay"
           ></gn-ui-metadata-quality>
         </div>
         <gn-ui-metadata-contact

apps/datahub/src/app/record/record-metadata/record-metadata.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { SourcesService } from '@geonetwork-ui/feature/catalog'
 import { SearchService } from '@geonetwork-ui/feature/search'
-import { ErrorType, MetadataQualityDisplay } from '@geonetwork-ui/ui/elements'
+import { ErrorType } from '@geonetwork-ui/ui/elements'
 import { BehaviorSubject, combineLatest } from 'rxjs'
 import { filter, map, mergeMap } from 'rxjs/operators'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
@@ -15,7 +15,7 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecordMetadataComponent {
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
 
   displayMap$ = combineLatest([
     this.facade.mapApiLinks$,
@@ -77,8 +77,4 @@ export class RecordMetadataComponent {
       .getFiltersForOrgs([org])
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
-
-  get hasMetadataQualityWidget() {
-    return this.metadataQualityDisplay?.widget === true
-  }
 }

apps/datahub/src/app/record/record-page/record-page.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core'
 import { MdViewFacade } from '@geonetwork-ui/feature/record'
-import { MetadataQualityDisplay } from '@geonetwork-ui/ui/elements'
 import {
   MetadataQualityConfig,
   getMetadataQualityConfig,
@@ -13,23 +12,13 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecordPageComponent implements OnDestroy {
-  metadataQualityDisplay: MetadataQualityDisplay = {} as MetadataQualityDisplay
+  metadataQualityDisplay: boolean
 
   constructor(public mdViewFacade: MdViewFacade) {
     document.documentElement.classList.add('record-page-active')
     const cfg: MetadataQualityConfig =
       getMetadataQualityConfig() || ({} as MetadataQualityConfig)
-    this.metadataQualityDisplay = {
-      widget: cfg.ENABLED && cfg.DISPLAY_WIDGET_IN_DETAIL !== false,
-      title: cfg.DISPLAY_TITLE,
-      description: cfg.DISPLAY_DESCRIPTION,
-      contact: cfg.DISPLAY_CONTACT,
-      keywords: cfg.DISPLAY_KEYWORDS,
-      legalConstraints: cfg.DISPLAY_LEGAL_CONSTRAINTS,
-      topic: cfg.DISPLAY_TOPIC,
-      updateFrequency: cfg.DISPLAY_UPDATE_FREQUENCY,
-      organisation: cfg.DISPLAY_ORGANISATION,
-    }
+    this.metadataQualityDisplay = cfg.ENABLED
   }
   ngOnDestroy() {
     document.documentElement.classList.remove('record-page-active')

conf/default.toml

@@ -109,27 +109,6 @@ background_color = "#fdfbff"
 # enabled = true
 # If u want to use metadata quality widget this configuration is required
 
-# if you add an indexed field to calculate the qualityScore, the datahub search allow you to sort on this field with this parameter
-# sortable = true
-
-# by default the widget appears in 2 locations in the search list and in the detail page
-# allow you to hide the widget in detail
-# display_widget_in_detail = false
-# allow you to hide the widget in search list
-# display_widget_in_search = false
-# If you want see the widget in the two locations, don't fill theses configurations
-
-# By default the window popup all fields to view if they are filled or not but you can hide some
-# display_title = false
-# display_description = false
-# display_topic = false
-# display_keywords = false
-# display_legal_constraints = false
-# display_contact = false
-# display_update_frequency = false
-# display_organisation = false
-# If you want see all fields, don't fill theses configurations
-
 ### MAP SETTINGS
 
 # The map section allows to customize how maps are configured.

libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -2,12 +2,13 @@
   <gn-ui-results-list
     [records]="facade.results$ | async"
     [layoutConfig]="layoutConfig$ | async"
-    [metadataQualityDisplay]="metadataQualityDisplay"
+    [metadataQualityDisplay]="
+      metadataQualityDisplay && (pipelineForQualityScoreActivated | async)
+    "
     [favoriteTemplate]="favoriteToggle"
     [recordUrlGetter]="recordUrlGetter"
     (mdSelect)="onMetadataSelection($event)"
   ></gn-ui-results-list>
-
   <ng-container
     *ngIf="
       (facade.isLoading$ | async) === false &&

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

@@ -7,11 +7,11 @@ import {
   Optional,
   Output,
 } from '@angular/core'
-import { Observable } from 'rxjs'
+import { Observable, tap } from 'rxjs'
 import { filter, map } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchError } from '../state/reducer'
-import { ErrorType, MetadataQualityDisplay } from '@geonetwork-ui/ui/elements'
+import { ErrorType } from '@geonetwork-ui/ui/elements'
 import {
   RESULTS_LAYOUT_CONFIG,
   ResultsLayoutConfigItem,
@@ -28,7 +28,7 @@ export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'
   styleUrls: ['./results-list.container.component.css'],
 })
 export class ResultsListContainerComponent implements OnInit {
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
   @Input() layout: string
   @Input() showMore: ResultsListShowMoreStrategy = 'auto'
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
@@ -38,6 +38,7 @@ export class ResultsListContainerComponent implements OnInit {
   error$: Observable<SearchError>
   errorCode$: Observable<number>
   errorMessage$: Observable<string>
+  pipelineForQualityScoreActivated: Observable<boolean>
 
   errorTypes = ErrorType
   recordUrlGetter = this.getRecordUrl.bind(this)
@@ -60,6 +61,17 @@ export class ResultsListContainerComponent implements OnInit {
       this.facade.setResultsLayout(this.layout)
     }
 
+    this.pipelineForQualityScoreActivated = this.facade.results$.pipe(
+      tap((records) => {
+        if (records?.length > 0 && !records[0].extras?.qualityScore) {
+          console.warn(
+            'It looks like the metadata quality indicator is not available on these records, probably due to a missing indexing pipeline'
+          )
+        }
+      }),
+      map((records) => !!records[0]?.extras.qualityScore)
+    )
+
     this.error$ = this.facade.error$
     this.errorCode$ = this.error$.pipe(
       filter((error) => error !== null),

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

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon>{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.spec.ts

@@ -53,7 +53,7 @@ describe('MetadataQualityInfoComponent', () => {
     fixture.detectChanges()
 
     const iconElement = fixture.debugElement.query(By.css('mat-icon'))
-    expect(iconElement.nativeElement.innerHTML).toBe('warning_amber')
+    expect(iconElement.nativeElement.innerHTML).toBe('warning')
 
     const textElement = fixture.debugElement.query(By.css('.text'))
     expect(textElement.nativeElement.innerHTML).toBe(
@@ -81,7 +81,7 @@ describe('MetadataQualityInfoComponent', () => {
     fixture.detectChanges()
 
     const iconElement = fixture.debugElement.query(By.css('mat-icon'))
-    expect(iconElement.nativeElement.innerHTML).toBe('warning_amber')
+    expect(iconElement.nativeElement.innerHTML).toBe('warning')
 
     const textElement = fixture.debugElement.query(By.css('.text'))
     expect(textElement.nativeElement.innerHTML).toBe(

libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts

@@ -33,7 +33,7 @@ export class MetadataQualityItemComponent implements MetadataQualityItem {
   @Input() value: boolean
 
   get icon() {
-    return this.value ? 'check' : 'warning_amber'
+    return this.value ? 'check' : 'warning'
   }
 
   get labelKey() {

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

@@ -1,5 +1,5 @@
 <div
-  *ngIf="metadataQualityDisplay?.widget === true"
+  *ngIf="metadataQualityDisplay"
   class="mb-6 metadata-quality"
   (mouseenter)="showMenu()"
   (mouseleave)="hideMenu()"

libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -8,18 +8,6 @@ import {
 import { MetadataQualityItem } from '../metadata-quality-item/metadata-quality-item.component'
 import { CatalogRecord } from '@geonetwork-ui/common/domain/model/record'
 
-export interface MetadataQualityDisplay {
-  widget: boolean
-  title: boolean
-  description: boolean
-  topic: boolean
-  keywords: boolean
-  legalConstraints: boolean
-  organisation: boolean
-  contact: boolean
-  updateFrequency: boolean
-}
-
 @Component({
   selector: 'gn-ui-metadata-quality',
   templateUrl: './metadata-quality.component.html',
@@ -29,7 +17,7 @@ export interface MetadataQualityDisplay {
 export class MetadataQualityComponent implements OnChanges {
   @Input() metadata: Partial<CatalogRecord>
   @Input() smaller = false
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
 
   items: MetadataQualityItem[] = []
 

libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -35,9 +35,7 @@
     <div
       class="text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1"
       data-cy="recordOrg"
-      [class]="
-        hasMetadataQualityWidget ? 'limit-organisation-with-quality' : ''
-      "
+      [class]="metadataQualityDisplay ? 'limit-organisation-with-quality' : ''"
     >
       {{ organization?.name }}
     </div>
@@ -56,7 +54,7 @@
       >
     </div>
     <div
-      *ngIf="hasMetadataQualityWidget"
+      *ngIf="metadataQualityDisplay"
       class="col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]"
     >
       <gn-ui-metadata-quality

libs/ui/search/src/lib/record-preview/record-preview.component.ts

@@ -13,7 +13,6 @@ import {
   stripHtml,
   removeWhitespace,
 } from '@geonetwork-ui/util/shared'
-import { MetadataQualityDisplay } from '@geonetwork-ui/ui/elements'
 import { fromEvent, Subscription } from 'rxjs'
 import {
   CatalogRecord,
@@ -31,7 +30,7 @@ export class RecordPreviewComponent implements OnInit, OnDestroy {
   @Input() linkTarget = '_blank'
   @Input() favoriteTemplate: TemplateRef<{ $implicit: CatalogRecord }>
   @Input() linkHref: string = null
-  @Input() metadataQualityDisplay: MetadataQualityDisplay
+  @Input() metadataQualityDisplay: boolean
   @Output() mdSelect = new EventEmitter<CatalogRecord>()
   subscription = new Subscription()
   abstract: string
@@ -51,9 +50,6 @@ export class RecordPreviewComponent implements OnInit, OnDestroy {
   get organization(): Organization {
     return this.record.ownerOrganization
   }
-  get hasMetadataQualityWidget(): boolean {
-    return this.metadataQualityDisplay?.widget === true
-  }
 
   constructor(protected elementRef: ElementRef) {}