geonetwork-ui 2.6.0-dev.5b83cdcc5 → 2.6.0-dev.6681b0ab3

package/src/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts

@@ -2,9 +2,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Inject,
   Input,
-  Optional,
   Output,
 } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
@@ -13,6 +11,7 @@ import {
   FetchError,
   FieldAggregation,
   getJsonDataItemsProxy,
+  PropertyInfo,
 } from '../../../../../../libs/util/data-fetcher/src'
 import {
   DropdownChoice,
@@ -30,7 +29,10 @@ import {
 } from 'rxjs/operators'
 import { DataService } from '../service/data.service'
 import { InputChartType } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetFeatureCatalog,
+  DatasetOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { CommonModule } from '@angular/common'
 import { ChartComponent } from '../../../../../../libs/ui/dataviz/src'
@@ -67,9 +69,18 @@ marker('chart.aggregation.count')
   standalone: true,
 })
 export class ChartViewComponent {
+  public featureCatalog$ = new BehaviorSubject<DatasetFeatureCatalog | null>(
+    null
+  )
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    this.featureCatalog$.next(value)
+  }
   @Input() cacheActive = true
   @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
+    if (value) {
+      this.aggregation$.next('sum')
+    }
   }
   private currentLink$ = new BehaviorSubject<DatasetOnlineResource>(null)
 
@@ -150,13 +161,8 @@ export class ChartViewComponent {
     }),
     shareReplay(1)
   )
-  properties$ = this.dataset$.pipe(
-    switchMap((dataset) =>
-      dataset.properties.catch((error) => {
-        this.handleError(error)
-        return []
-      })
-    ),
+  properties$ = combineLatest([this.dataset$, this.featureCatalog$]).pipe(
+    switchMap(([dataset, catalog]) => this.setProperties(dataset, catalog)),
     shareReplay(1)
   )
   yChoices$ = this.properties$.pipe(
@@ -197,6 +203,7 @@ export class ChartViewComponent {
     this.yProperty$.pipe(filter((value) => value !== undefined)),
     this.aggregation$,
   ]).pipe(
+    filter(([_, x, y]) => !!x || !!y),
     switchMap(([dataset, xProp, yProp, aggregation]) => {
       const fieldAgg: FieldAggregation =
         aggregation === 'count' ? ['count'] : [aggregation, yProp]
@@ -217,6 +224,18 @@ export class ChartViewComponent {
     shareReplay(1)
   )
 
+  prettyLabel$ = combineLatest([
+    this.aggregation$,
+    this.properties$,
+    this.yProperty$,
+  ]).pipe(
+    map(([aggregation, properties, yProperty]) => {
+      if (aggregation === 'count') return 'count()'
+      const prop = properties.find((p) => p.name === yProperty)
+      return prop ? `${aggregation}(${prop.label})` : ''
+    })
+  )
+
   get labelProperty() {
     if (!this.xProperty$.value) return ''
     return `distinct(${this.xProperty$.value})`
@@ -235,6 +254,31 @@ export class ChartViewComponent {
     private translateService: TranslateService
   ) {}
 
+  setProperties(
+    dataset: BaseReader,
+    catalog: DatasetFeatureCatalog
+  ): Promise<PropertyInfo[]> {
+    return dataset.properties
+      .then((properties) => {
+        return properties.map((p) => {
+          if (catalog) {
+            const featureAttributes = catalog?.featureTypes[0]?.attributes ?? []
+            const matchingAttribute = featureAttributes.find(
+              (attr) => attr.name === p.label
+            )
+            if (matchingAttribute?.code) {
+              return { ...p, label: matchingAttribute.code }
+            }
+            return p
+          }
+          return p
+        })
+      })
+      .catch((error) => {
+        this.handleError(error)
+        return []
+      })
+  }
   handleError(error: FetchError | Error | string) {
     if (error instanceof FetchError) {
       this.error = this.translateService.instant(

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.html

@@ -4,6 +4,7 @@
       *ngIf="tableData$ | async as dataset"
       class="overflow-auto grow"
       [dataset]="dataset"
+      [featureAttributes]="featureAttributes"
       (selected)="onTableSelect($event)"
     ></gn-ui-data-table>
     <gn-ui-loading-mask

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.ts

@@ -6,11 +6,15 @@ import {
   shareReplay,
   startWith,
   switchMap,
+  tap,
 } from 'rxjs/operators'
 import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
 import { DataTableComponent } from '../../../../../../libs/ui/dataviz/src'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetFeatureCatalog,
+  DatasetOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import {
   LoadingMaskComponent,
@@ -33,6 +37,8 @@ import { CommonModule } from '@angular/common'
   standalone: true,
 })
 export class TableViewComponent {
+  featureAttributes = []
+  @Input() featureCatalog: DatasetFeatureCatalog
   @Input() cacheActive = true
   @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
@@ -52,6 +58,7 @@ export class TableViewComponent {
       }
       this.loading = true
       return this.getDatasetReader(link).pipe(
+        tap((dataset: BaseReader) => this.setProperties(dataset)),
         catchError((error) => {
           this.handleError(error)
           return of(undefined)
@@ -96,4 +103,23 @@ export class TableViewComponent {
     }
     this.loading = false
   }
+
+  setProperties(dataset: BaseReader) {
+    dataset.properties.then((properties) => {
+      const updatedProperties = properties.map((p) => {
+        let label = p.name
+        if (this.featureCatalog) {
+          const attributes = this.featureCatalog.featureTypes[0].attributes
+          const matchingAttribute = attributes.find(
+            (attr) => attr.name === p.name
+          )
+          if (matchingAttribute && matchingAttribute.code) {
+            label = matchingAttribute.code
+          }
+        }
+        return { value: p.name, label }
+      })
+      this.featureAttributes = updatedProperties
+    })
+  }
 }

package/src/libs/feature/record/src/lib/data-view/data-view.component.html

@@ -27,12 +27,14 @@
         *ngIf="mode === 'table'"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-table-view>
       <gn-ui-chart-view
         *ngIf="mode === 'chart'"
         (chartConfig$)="setChartConfig($event)"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-chart-view>
     </div>
   </ng-template>

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -55,7 +55,10 @@
         >
           <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
         </gn-ui-button>
-        <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
+        <gn-ui-feature-detail
+          [featureCatalog]="mdViewFacade.featureCatalog$ | async"
+          [feature]="selection"
+        ></gn-ui-feature-detail>
       </div>
 
       <div

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -216,4 +216,11 @@ export class MdViewFacade {
   loadUserFeedbacks(datasetUuid: string) {
     this.store.dispatch(MdViewActions.loadUserFeedbacks({ datasetUuid }))
   }
+
+  /**
+   * loadFeatureCatalog
+   */
+  loadFeatureCatalog(metadata: CatalogRecord) {
+    this.store.dispatch(MdViewActions.loadFeatureCatalog({ metadata }))
+  }
 }

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

@@ -57,6 +57,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
     this.dataRaw = value
   }
   @Input() labelProperty: string
+  @Input() prettyLabel: string
   @Input() valueProperty: string
   @Input() secondaryValueProperty: string
   @Input() type: InputChartType = 'bar'
@@ -95,7 +96,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
       labels: this.getDataProxy(this.labelProperty) as string[],
       datasets: [
         {
-          label: this.valueProperty,
+          label: this.prettyLabel,
           data,
         },
       ],

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.html

@@ -8,21 +8,24 @@
       [matSortDisableClear]="true"
       *ngrxLet="properties$ as properties"
     >
-      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
+      <ng-container
+        *ngFor="let attr of _featureAttributes"
+        [matColumnDef]="attr.value"
+      >
         <th
           mat-header-cell
           *matHeaderCellDef
           mat-sort-header
           class="text-sm text-black bg-white"
         >
-          {{ prop }}
+          {{ attr.label }}
         </th>
         <td
           mat-cell
           *matCellDef="let element"
           class="whitespace-nowrap pr-1 truncate"
         >
-          {{ element[prop] }}
+          {{ element[attr.value] }}
         </td>
       </ng-container>
 

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -61,13 +61,14 @@ export interface TableItemModel {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  _featureAttributes = []
+  @Input() set featureAttributes(value: { value: string; label: string }[]) {
+    this._featureAttributes = value
+    this.properties$.next(value.map((attr) => attr.value))
+  }
   @Input() set dataset(value: BaseReader) {
-    this.properties$.next(null)
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.properties.then((properties) =>
-      this.properties$.next(properties.map((p) => p.name))
-    )
     this.dataset_.info.then((info) => (this.count = info.itemsCount))
   }
   @Input() activeId: TableItemId

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

@@ -26,3 +26,4 @@ export * from './lib/user-preview/user-preview.component'
 export * from './lib/application-banner/application-banner.component'
 export * from './lib/internal-link-card/internal-link-card.component'
 export * from './lib/service-capabilities/service-capabilities.component'
+export * from './lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component'

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

@@ -1,5 +1,8 @@
-<div class="py-5 px-5 rounded-lg bg-gray-100 text-black">
-  <div class="grid grid-cols-1 gap-3 overflow-hidden">
+<div
+  class="py-5 px-5 rounded bg-gray-100 text-black"
+  data-cy="metadata-organization"
+>
+  <div class="grid gap-3 overflow-hidden">
     <div>
       <p class="text-base font-medium" translate>record.metadata.contact</p>
     </div>
@@ -18,7 +21,7 @@
         <div
           class="font-title text-21 mr-2 cursor-pointer hover:underline"
           (click)="onOrganizationClick()"
-          data-cy="organization-name"
+          data-cy="organization-name-link"
         >
           {{ shownOrganization?.name }}
         </div>

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

@@ -46,6 +46,7 @@
     metadata.otherConstraints
   "
   [title]="'record.metadata.usage' | translate"
+  data-test="usage-panel"
 >
   <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
     <ng-container *ngFor="let license of licenses">
@@ -105,6 +106,7 @@
     (metadata.kind === 'dataset' && metadata.status)
   "
   [title]="'record.metadata.details' | translate"
+  data-test="details-panel"
 >
   <div *ngIf="metadata.lineage" class="text-gray-900 flex flex-col mt-4 gap-2">
     <p class="whitespace-pre-line break-words text-gray-900" gnUiLinkify>
@@ -231,6 +233,7 @@
 <gn-ui-expandable-panel
   *ngIf="metadata.kind !== 'dataset' && metadata.spatialExtents"
   [title]="'service.metadata.spatialExtent' | translate"
+  data-test="spatial-extent-panel"
 >
   <gn-ui-spatial-extent
     class="flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6"
@@ -240,6 +243,7 @@
 <gn-ui-expandable-panel
   *ngIf="metadata.landingPage"
   [title]="'service.metadata.other' | translate"
+  data-test="other-panel"
 >
   <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
     <div *ngIf="metadata.recordUpdated">

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -0,0 +1,48 @@
+<div class="flex flex-col gap-2 py-5 px-5 h-[562px] overflow-y-auto">
+  <div
+    *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
+    class="rounded shadow bg-white"
+  >
+    <gn-ui-expandable-panel
+      [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
+      iconColor="black"
+    >
+      <ng-template #titleTemplate>
+        <div class="px-2">
+          <div class="text-lg font-bold">{{ featureType.name }}</div>
+          <div class="text-sm" *ngIf="featureType.definition">
+            {{ featureType.definition }}
+          </div>
+        </div>
+      </ng-template>
+      <div
+        class="grid gap-0"
+        [style.grid-template-columns]="gridTemplateColumns"
+        data-cy="feature-type-content"
+      >
+        <div
+          class="py-1 px-2 text-sm font-bold text-left border-t"
+          [class.border-l]="i > 0"
+          [class.border-gray-300]="i > 0"
+          *ngFor="let col of columns; let i = index"
+          data-test="column-label"
+        >
+          {{ col.label | translate }}
+        </div>
+        <ng-container *ngFor="let row of featureType.attributes">
+          <div
+            class="bg-white text-sm font-normal text-left border-t"
+            [class.border-l]="i > 0"
+            [class.border-gray-300]="i > 0"
+            *ngFor="let col of columns; let i = index"
+          >
+            <gn-ui-truncated-text
+              extraClass="py-3 px-2"
+              [text]="row[col.key]"
+            ></gn-ui-truncated-text>
+          </div>
+        </ng-container>
+      </div>
+    </gn-ui-expandable-panel>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { DatasetFeatureCatalog } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  ExpandablePanelComponent,
+  TruncatedTextComponent,
+} from '../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-feature-catalog-list',
+  templateUrl: './feature-catalog-list.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ExpandablePanelComponent,
+    TruncatedTextComponent,
+  ],
+})
+export class FeatureCatalogListComponent implements OnInit {
+  @Input() filteredFeatureCatalog: DatasetFeatureCatalog
+
+  columns = [
+    {
+      key: 'type',
+      label: 'feature.catalog.attribute.type',
+      width: '19%',
+    },
+    {
+      key: 'name',
+      label: 'feature.catalog.attribute.name',
+      width: '32%',
+    },
+    {
+      key: 'code',
+      label: 'feature.catalog.attribute.code',
+      width: '24%',
+    },
+    {
+      key: 'title',
+      label: 'feature.catalog.attribute.description',
+      width: '25%',
+    },
+  ]
+
+  gridTemplateColumns = ''
+
+  ngOnInit(): void {
+    this.gridTemplateColumns = this.columns.map((col) => col.width).join(' ')
+  }
+}

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

@@ -23,7 +23,6 @@ import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { ApplicationBannerComponent } from './application-banner/application-banner.component'
 import { InternalLinkCardComponent } from './internal-link-card/internal-link-card.component'
 import { ServiceCapabilitiesComponent } from './service-capabilities/service-capabilities.component'
-
 @NgModule({
   imports: [
     CommonModule,

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

@@ -24,3 +24,4 @@ export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/search-feature-catalog/search-feature-catalog.component'

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -0,0 +1,43 @@
+<div
+  class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+>
+  <div
+    class="relative shrink-0"
+    *ngIf="featureCatalog?.featureTypes?.length > 1"
+  >
+    <input
+      type="text"
+      [placeholder]="'search.filter.into.feature.catalog' | translate"
+      class="w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md"
+      [(ngModel)]="searchTerm"
+      (ngModelChange)="filterAction(searchTerm)"
+    />
+    <ng-icon
+      class="absolute right-2.5 top-1 w-6 h-6 text-black"
+      name="iconoirSearch"
+    ></ng-icon>
+  </div>
+  <div class="text-sm px-1 ml-auto hidden sm:inline">
+    <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
+      <span
+        class="text-sm font-medium text-gray-900"
+        data-cy="total-objects-label"
+        translate
+        >record.feature.catalog.number.total.object</span
+      ><span
+        class="text-sm font-bold px-1 text-gray-900"
+        data-cy="total-objects"
+        >{{ totalObjects }}</span
+      >
+      <span class="px-1.5">|</span>
+    </ng-container>
+    <span
+      class="text-sm font-medium px-1 text-gray-900"
+      data-cy="total-attributes-label"
+      translate
+      >record.feature.catalog.number.total.attribute</span
+    ><span class="text-sm font-bold text-gray-900" data-cy="total-attributes">{{
+      totalAttributes
+    }}</span>
+  </div>
+</div>

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { FormsModule } from '@angular/forms'
+import { of } from 'rxjs'
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
+import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { iconoirSearch } from '@ng-icons/iconoir'
+
+@Component({
+  selector: 'gn-ui-search-feature-catalog',
+  templateUrl: './search-feature-catalog.component.html',
+  styleUrls: ['./search-feature-catalog.component.css'],
+  standalone: true,
+  imports: [CommonModule, NgIcon, TranslateModule, FormsModule],
+  viewProviders: [
+    provideIcons({ iconoirSearch }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+  ],
+})
+export class SearchFeatureCatalogComponent {
+  private _featureCatalog: DatasetFeatureCatalog
+  searchTerm: any
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    this._featureCatalog = value
+    this.filteredFeatureCatalog = value
+  }
+  get featureCatalog(): DatasetFeatureCatalog {
+    return this._featureCatalog
+  }
+
+  @Output() filteredFeatureCatalogChange =
+    new EventEmitter<DatasetFeatureCatalog>()
+  filteredFeatureCatalog: DatasetFeatureCatalog
+
+  filterAction = (searchTerm: string): void => {
+    of(searchTerm)
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        tap(() => {
+          const filtered = (this.featureCatalog?.featureTypes || []).filter(
+            (featureType) => {
+              const fuzzyFilter = createFuzzyFilter(searchTerm)
+              return (
+                fuzzyFilter(featureType.name) ||
+                (featureType.definition && fuzzyFilter(featureType.definition))
+              )
+            }
+          )
+          this.filteredFeatureCatalog = {
+            ...this.featureCatalog,
+            featureTypes: filtered,
+          }
+          this.filteredFeatureCatalogChange.emit(this.filteredFeatureCatalog)
+        })
+      )
+      .subscribe()
+  }
+
+  get totalObjects(): number {
+    return this.filteredFeatureCatalog?.featureTypes?.length || 0
+  }
+
+  get totalAttributes(): number {
+    return (
+      this.filteredFeatureCatalog?.featureTypes?.reduce(
+        (total, featureType) => total + (featureType.attributes?.length || 0),
+        0
+      ) || 0
+    )
+  }
+}

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html

@@ -1,22 +1,38 @@
 <div
-  class="group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5"
+  class="group flex items-center justify-between title border-b border-gray-100 cursor-pointer"
   (click)="toggle()"
+  data-cy="expandable-panel-header"
 >
-  <div class="grow font-medium text-black text-sm">
-    {{ title }}
+  <div class="grow py-2.5">
+    <ng-container *ngIf="titleTemplate; else simpleTitle">
+      <div data-cy="expandable-panel-custom-title">
+        <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
+      </div>
+    </ng-container>
+    <ng-template #simpleTitle>
+      <div
+        class="font-medium text-black text-sm"
+        data-cy="expandable-panel-title"
+      >
+        {{ title }}
+      </div>
+    </ng-template>
   </div>
   <div
-    class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity"
+    class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity flex items-center shrink-0"
   >
-    <ng-icon name="matAdd" *ngIf="collapsed"></ng-icon>
-    <ng-icon name="matRemove" *ngIf="!collapsed"></ng-icon>
+    <ng-icon
+      [name]="collapsed ? 'matAdd' : 'matRemove'"
+      [style.color]="iconColor"
+    ></ng-icon>
   </div>
 </div>
 <div
-  class="content overflow-hidden transition-[max-height] duration-300"
+  class="content overflow-hidden transition-all duration-300"
   [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
-  [style.maxHeight]="maxHeight"
   #contentDiv
+  *ngIf="!collapsed"
+  data-cy="expandable-panel-content"
 >
   <ng-content></ng-content>
 </div>