geonetwork-ui 2.6.0-dev.3e7617888 → 2.6.0-dev.492bf4497

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

@@ -1,13 +1,17 @@
-<div class="w-full h-full flex flex-col p-1">
-  <gn-ui-dropdown-selector
-    *ngIf="dropdownChoices$ | async as choices"
-    [ngClass]="{ hidden: !displaySource }"
-    [title]="'table.select.data' | translate"
-    class="truncate p-1 -mx-1 self-end mb-1"
-    extraBtnClass="!text-primary font-sans font-medium"
-    [choices]="choices"
-    (selectValue)="selectLink($event)"
-  ></gn-ui-dropdown-selector>
+<div class="w-full h-full flex flex-col gap-[13px]">
+  <div
+    class="w-full py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+  >
+    <gn-ui-dropdown-selector
+      *ngIf="dropdownChoices$ | async as choices"
+      [ngClass]="{ hidden: !displaySource }"
+      [title]="'table.select.data' | translate"
+      class="h-[44px] w-full"
+      extraBtnClass="font-sans font-bold"
+      [choices]="choices"
+      (selectValue)="selectLink($event)"
+    ></gn-ui-dropdown-selector>
+  </div>
   <ng-container *ngIf="hidePreview; else dataView">
     <gn-ui-popup-alert
       type="warning"
@@ -23,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/data-view-share/data-view-share.component.html

@@ -1,4 +1,4 @@
-<div class="px-5 my-1">
+<div>
   <mat-tab-group
     [selectedIndex]="0"
     animationDuration="0ms"

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html

@@ -1,9 +1,9 @@
 <gn-ui-button
   *ngIf="externalViewer"
   (buttonClick)="openInExternalViewer()"
-  type="secondary"
+  type="primary"
   [title]="'record.externalViewer.open' | translate"
-  extraClass="ms-2 !rounded-lg"
+  [extraClass]="extraClass + 'bg-primary ms-2 !rounded-lg'"
 >
   <ng-icon name="matOpenInNew"></ng-icon>
 </gn-ui-button>

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -36,6 +36,7 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
 })
 export class ExternalViewerButtonComponent {
   @Input() link: DatasetOnlineResource
+  @Input() extraClass = ''
 
   get externalViewer() {
     return !!this.urlTemplate && !!this.supportedLinkLayerType

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

@@ -1,18 +1,24 @@
-<div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end">
-    <gn-ui-dropdown-selector
-      [ngClass]="{ hidden: !displaySource }"
-      class="truncate p-1 -mx-1 mb-1"
-      extraBtnClass="!text-primary font-sans font-medium"
-      [title]="'map.select.layer' | translate"
-      [choices]="dropdownChoices$ | async"
-      (selectValue)="selectLinkToDisplay($event)"
-    ></gn-ui-dropdown-selector>
-    <gn-ui-external-viewer-button
-      class="shrink-0 py-1 place-self-end"
-      [link]="selectedLink$ | async"
-    >
-    </gn-ui-external-viewer-button>
+<div class="w-full h-full flex flex-col gap-[13px]">
+  <div
+    class="flex py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+  >
+    <div class="grow min-w-0">
+      <gn-ui-dropdown-selector
+        [ngClass]="{ hidden: !displaySource }"
+        class="w-full"
+        extraBtnClass="font-sans font-bold"
+        [title]="'map.select.layer' | translate"
+        [choices]="dropdownChoices$ | async"
+        (selectValue)="selectLinkToDisplay($event)"
+      ></gn-ui-dropdown-selector>
+    </div>
+    <div class="self-end">
+      <gn-ui-external-viewer-button
+        extraClass="w-[44px] h-[44px]"
+        [link]="selectedLink$ | async"
+      >
+      </gn-ui-external-viewer-button>
+    </div>
   </div>
   <ng-container *ngIf="hidePreview; else mapView">
     <gn-ui-popup-alert
@@ -49,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/map-view/map-view.component.ts

@@ -39,8 +39,8 @@ import {
 import {
   FeatureDetailComponent,
   MapContainerComponent,
-  prioritizePageScroll,
   MapLegendComponent,
+  prioritizePageScroll,
 } from '../../../../../../libs/ui/map/src'
 import { Feature } from 'geojson'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
@@ -109,9 +109,20 @@ export class MapViewComponent implements AfterViewInit {
     this.mdViewFacade.mapApiLinks$,
     this.mdViewFacade.geoDataLinksWithGeometry$,
   ]).pipe(
-    map(([mapApiLinks, geoDataLinksWithGeometry]) => {
-      return [...mapApiLinks, ...geoDataLinksWithGeometry]
-    })
+    switchMap(async ([mapApiLinks, geoDataLinksWithGeometry]) => {
+      // looking for TMS links to process
+      let processedMapApiLinks = await Promise.all(
+        mapApiLinks.map((link) => {
+          if (link.type === 'service' && link.accessServiceProtocol === 'tms') {
+            return this.dataService.getGeodataLinksFromTms(link)
+          }
+          return link
+        })
+      )
+      processedMapApiLinks = processedMapApiLinks.flat()
+      return [...processedMapApiLinks, ...geoDataLinksWithGeometry]
+    }),
+    shareReplay(1)
   )
 
   dropdownChoices$ = this.compatibleMapLinks$.pipe(
@@ -239,6 +250,26 @@ export class MapViewComponent implements AfterViewInit {
         type: 'wms',
         name: link.name,
       })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'tms'
+    ) {
+      // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
+      return of({
+        url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+        type: 'xyz',
+        tileFormat: 'application/vnd.mapbox-vector-tile',
+        name: link.name,
+      })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'maplibre-style'
+    ) {
+      return of({
+        type: 'maplibre-style',
+        name: link.name,
+        styleUrl: link.url.toString(),
+      })
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'wmts'

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

@@ -6,6 +6,7 @@ import {
   filter,
   map,
   mergeMap,
+  shareReplay,
   switchMap,
   toArray,
 } from 'rxjs/operators'
@@ -15,13 +16,11 @@ import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/sh
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
-  DatasetServiceDistribution,
-  ServiceEndpoint,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 import { OgcApiRecord } from '@camptocamp/ogc-client'
-import { from, of } from 'rxjs'
+import { from, of, Observable } from 'rxjs'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
 
 @Injectable()
@@ -80,21 +79,17 @@ export class MdViewFacade {
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 
   allLinks$ = this.metadata$.pipe(
-    map((record) => ('onlineResources' in record ? record.onlineResources : []))
+    map((record) =>
+      'onlineResources' in record ? record.onlineResources : []
+    ),
+    shareReplay(1)
   )
 
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
-      links
-        .filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
-        // Put links to IGN Géoplateforme first
-        .sort((dd1, dd2) => {
-          return (dd2 as DatasetServiceDistribution | ServiceEndpoint)
-            .accessServiceProtocol === 'GPFDL'
-            ? 1
-            : undefined // do not change the sorting otherwise
-        })
-    )
+      links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+    ),
+    shareReplay(1)
   )
 
   mapApiLinks$ = this.allLinks$.pipe(
@@ -102,7 +97,8 @@ export class MdViewFacade {
       links.filter((link) =>
         this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
       )
-    )
+    ),
+    shareReplay(1)
   )
 
   downloadLinks$ = this.allLinks$.pipe(
@@ -216,4 +212,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/api-card/api-card.component.html

@@ -1,12 +1,12 @@
 <div
-  class="group flex justify-between rounded filter overflow-hidden"
+  class="group flex justify-between rounded filter overflow-hidden card-shadow"
   [ngClass]="cardClass"
 >
   <ng-container *ngIf="size !== 'S'">
-    <div>
+    <div class="flex-1 min-w-0">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center min-w-[32px]">
       <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
   </ng-container>
@@ -51,7 +51,7 @@
 </ng-template>
 
 <ng-template #content>
-  <div>
+  <div class="flex-1 min-w-0">
     <div class="gn-ui-card-title">
       {{ link.description || link.name }}
     </div>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -1,20 +1,20 @@
 <a
   href="{{ link.url }}"
   target="_blank"
-  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden w-full"
   rel="noopener"
   [ngClass]="cardClass"
 >
-  <div class="flex flex-col justify-between">
+  <div class="flex flex-col flex-1 justify-between min-w-0">
     <div class="gn-ui-card-title" [title]="link.description || link.name">
       {{ link.description || link.name }}
     </div>
     <div class="gn-ui-card-detail">
       {{ link.name }}
     </div>
-    <div class="flex flex-row gap-2 items-center pt-1">
+    <div class="flex flex-row gap-2 items-center pt-1 min-w-0">
       <span
-        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100 whitespace-nowrap"
         [style.background-color]="color"
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
@@ -24,7 +24,10 @@
       >
     </div>
   </div>
-  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+  <div
+    class="flex min-w-[32px] flex-shrink-0"
+    [ngClass]="size === 'S' ? 'items-end' : 'items-center'"
+  >
     <div class="gn-ui-card-icon">
       <ng-icon
         class="inline-block card-icon align-middle"

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -27,7 +27,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   ],
 })
 export class DownloadItemComponent {
-  private _size: 'L' | 'M' | 'S' | 'XS'
+  private _size: CardSize
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
@@ -43,7 +43,7 @@ export class DownloadItemComponent {
     this._size = value
     this.cardClass = this.sizeClassMap[value]
   }
-  get size(): 'L' | 'M' | 'S' | 'XS' {
+  get size(): CardSize {
     return this._size
   }
   cardClass = ''

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -2,12 +2,23 @@
   class="flex flex-wrap justify-between items-center pb-4"
   *ngIf="links && links.length > 0"
 >
-  <div
-    class="font-title text-xl text-title font-medium mr-4 text-center sm:text-left"
-    translate
-  >
-    record.metadata.download
+  <div class="flex flex-row items-center gap-x-4">
+    <div>
+      <h3
+        class="inline-block font-title text-xl text-title font-medium mr-4"
+        translate
+      >
+        record.metadata.download
+      </h3>
+      <span class="px-3">({{ linksCount }})</span>
+    </div>
+    <gn-ui-previous-next-buttons
+      class="md:block hidden"
+      *ngIf="_list?.pagesCount > 1"
+      [listComponent]="_list"
+    ></gn-ui-previous-next-buttons>
   </div>
+
   <div
     class="flex flex-wrap justify-start sm:justify-end"
     data-cy="download-format-filters"
@@ -26,9 +37,29 @@
     </gn-ui-button>
   </div>
 </div>
-<div class="mb-2 sm:mb-3" *ngFor="let link of filteredLinks">
+
+<ng-container>
+  <gn-ui-block-list
+    class="md:block hidden"
+    #blockList
+    (listChanges)="updateList($event)"
+    containerClass="gap-4 pt-5 pb-7"
+  >
+    <gn-ui-download-item
+      #block
+      *ngFor="let link of filteredLinks"
+      [link]="link"
+      [color]="getLinkColor(link)"
+      [format]="getLinkFormat(link)"
+      [isFromApi]="isFromApi(link)"
+      [size]="blockList.subComponentSize"
+    ></gn-ui-download-item>
+  </gn-ui-block-list>
+</ng-container>
+
+<div class="mb-5 md:hidden block" *ngFor="let link of filteredLinks">
   <gn-ui-download-item
-    size="L"
+    size="M"
     [link]="link"
     [color]="getLinkColor(link)"
     [format]="getLinkFormat(link)"

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  ViewChild,
+} from '@angular/core'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
@@ -6,6 +13,11 @@ import { DatasetDownloadDistribution } from '../../../../../../libs/common/domai
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { DownloadItemComponent } from '../download-item/download-item.component'
+import {
+  BlockListComponent,
+  Paginable,
+  PreviousNextButtonsComponent,
+} from '../../../../../../libs/ui/layout/src'
 
 marker('datahub.search.filter.all')
 marker('datahub.search.filter.others')
@@ -22,17 +34,32 @@ type FilterFormat = (typeof FILTER_FORMATS)[number]
   imports: [
     CommonModule,
     ButtonComponent,
+    BlockListComponent,
     DownloadItemComponent,
     TranslateModule,
+    PreviousNextButtonsComponent,
   ],
 })
 export class DownloadsListComponent {
-  constructor(private translateService: TranslateService) {}
+  constructor(
+    private translateService: TranslateService,
+    private changeDetector: ChangeDetectorRef
+  ) {}
 
+  _list: BlockListComponent
   @Input() links: DatasetDownloadDistribution[]
 
+  get linksCount(): number {
+    return this.filteredLinks?.length || 0
+  }
+
   activeFilterFormats: FilterFormat[] = ['all']
 
+  updateList($event: BlockListComponent) {
+    this._list = $event
+    this.changeDetector.detectChanges()
+  }
+
   private removeDuplicateFormats(
     links: DatasetDownloadDistribution[]
   ): DatasetDownloadDistribution[] {

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -5,7 +5,7 @@
   <div
     *ngIf="imageUrl"
     data-cy="record-thumbnail"
-    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-full w-full"
+    class="shrink-0 rounded-lg overflow-hidden group-hover:shadow-xl group-hover:border-0 h-full w-full"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

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

@@ -5,7 +5,7 @@
   [ngClass]="cardClass"
   [title]="title"
 >
-  <div class="flex flex-col justify-between">
+  <div class="flex flex-col justify-between flex-1 min-w-0">
     <div class="gn-ui-card-title">
       {{ link.description || link.name }}
     </div>
@@ -26,7 +26,10 @@
       >
     </div>
   </div>
-  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+  <div
+    class="flex min-w-[32px]"
+    [ngClass]="size === 'S' ? 'items-end' : 'items-center'"
+  >
     <div class="gn-ui-card-icon">
       <ng-icon
         class="inline-block card-icon align-middle"

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,9 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import {
-  DatasetDownloadDistribution,
-  DatasetOnlineResource,
-  DatasetServiceDistribution,
-} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import {
   NgIconComponent,
@@ -30,7 +26,7 @@ type CardSize = 'L' | 'M' | 'S' | 'XS'
   ],
 })
 export class LinkCardComponent {
-  private _size: 'L' | 'M' | 'S' | 'XS'
+  private _size: CardSize
   @Input() link: DatasetOnlineResource
   private readonly sizeClassMap: Record<CardSize, string> = {
     L: 'gn-ui-card-l py-2 px-5',
@@ -43,7 +39,7 @@ export class LinkCardComponent {
     this._size = value
     this.cardClass = this.sizeClassMap[value]
   }
-  get size(): 'L' | 'M' | 'S' | 'XS' {
+  get size(): CardSize {
     return this._size
   }
   cardClass = ''

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

@@ -1,8 +1,6 @@
-<div>
-  <p class="text-gray-900 text-xs mb-3 uppercase" translate>
-    record.metadata.catalog
-  </p>
-  <p class="text-primary font-title text-21 mb-1">
+<div class="text-black">
+  <p class="text-base mb-3" translate>record.metadata.catalog</p>
+  <p class="font-title text-21 mb-1">
     {{ sourceLabel }}
   </p>
 </div>