geonetwork-ui 2.6.0-dev.186d57931 → 2.6.0-dev.25158f859

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -6,6 +6,7 @@ import {
   OgcApiRecord,
   WfsEndpoint,
   WfsVersion,
+  TmsEndpoint,
 } from '@camptocamp/ogc-client'
 import {
   BaseReader,
@@ -231,6 +232,42 @@ export class DataService {
       })
   }
 
+  async getGeodataLinksFromTms(
+    tmsLink: DatasetServiceDistribution,
+    keepOriginalLink = false
+  ): Promise<DatasetServiceDistribution[]> {
+    const endpoint = new TmsEndpoint(tmsLink.url.toString())
+    const tileMaps = await endpoint.allTileMaps
+    if (!tileMaps?.length) return null
+
+    // TODO: at some point use the identifierInService field if more that one layers in the TMS service
+    const tileMapInfo = await endpoint.getTileMapInfo(tileMaps[0].href)
+
+    // case 1: no styles; return a plain TMS link
+    if (!tileMapInfo?.metadata?.length) return [tmsLink]
+
+    // case 2: styles present; return each as a separate link
+    const styleLinks = tileMapInfo.metadata
+      .filter((meta) => meta.href)
+      .map((meta) => {
+        const fileName = meta.href.split('/').pop() || ''
+        const linkName =
+          tmsLink.description || ('name' in tmsLink ? tmsLink.name : '')
+        const styleName = fileName.split('.')[0]
+        const name = `${linkName} - ${styleName}`
+        return {
+          type: 'service',
+          url: new URL(meta.href),
+          name,
+          accessServiceProtocol: 'maplibre-style',
+        } as DatasetServiceDistribution
+      })
+    if (keepOriginalLink) {
+      styleLinks.unshift(tmsLink)
+    }
+    return styleLinks
+  }
+
   getDownloadLinksFromEsriRest(
     esriRestLink: DatasetServiceDistribution
   ): DatasetOnlineResource[] {

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/editor/src/index.ts

@@ -11,3 +11,4 @@ export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'
 export * from './lib/components/wizard-summarize/wizard-summarize.component'
 export * from './lib/components/record-form/form-field'
+export * from './lib/components/multilingual-panel/multilingual-panel.component'

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.html

@@ -0,0 +1,14 @@
+<div
+  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-9 px-3 gap-8"
+>
+  <span class="text-3xl font-title text-black/80 px-2" translate
+    >editor.record.form.multilingual.title</span
+  >
+  <gn-ui-check-toggle
+    class="p-2"
+    [label]="'editor.record.form.multilingual.enable' | translate"
+    [color]="'primary'"
+    [value]="translationsEnabled"
+    (toggled)="translationsEnabled = $event"
+  ></gn-ui-check-toggle>
+</div>

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { CheckToggleComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-multilingual-panel',
+  standalone: true,
+  imports: [CommonModule, CheckToggleComponent, TranslateModule],
+  templateUrl: './multilingual-panel.component.html',
+  styleUrl: './multilingual-panel.component.css',
+})
+export class MultilingualPanelComponent {
+  translationsEnabled = false
+}

package/src/libs/feature/record/src/index.ts

@@ -5,7 +5,6 @@ export * from './lib/data-view/data-view.component'
 export * from './lib/data-view-share/data-view-share.component'
 export * from './lib/data-view-web-component/data-view-web-component.component'
 export * from './lib/external-viewer-button/external-viewer-button.component'
-export * from './lib/map-view/map-view.component'
 export * from './lib/gpf-api-dl/gpf-api-dl.component'
+export * from './lib/map-view/map-view.component'
 export * from './lib/record-meta/record-meta.component'
-export * from './lib/external-viewer-button/external-viewer-button.component'

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/feature/search/src/index.ts

@@ -17,7 +17,7 @@ export * from './lib/facets/facets.module'
 export * from './lib/facets/facets-container/facets-container.component'
 export * from './lib/records-metrics/records-metrics.component'
 export * from './lib/favorites/favorite-star/favorite-star.component'
-export * from './lib/results-hits-number/results-hits.container.component'
+export * from './lib/results-hits/results-hits.container.component'
 export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'

package/src/libs/feature/search/src/lib/constants.ts

@@ -12,6 +12,7 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'overview',
   'logo',
   'codelist_status_text',
+  'link',
   'linkProtocol',
   'contactForResource*.organisation*',
   'contact*.organisation*',

package/src/libs/feature/search/src/lib/feature-search.module.ts

@@ -4,6 +4,7 @@ import { UiSearchModule } from '../../../../../libs/ui/search/src'
 import { EffectsModule } from '@ngrx/effects'
 import { StoreModule } from '@ngrx/store'
 import { TranslateModule } from '@ngx-translate/core'
+import { NgIconsModule } from '@ng-icons/core'
 import { FacetsModule } from './facets/facets.module'
 import { FuzzySearchComponent } from './fuzzy-search/fuzzy-search.component'
 import { RecordsMetricsComponent } from './records-metrics/records-metrics.component'
@@ -12,7 +13,7 @@ import { ResultsListContainerComponent } from './results-list/results-list.conta
 import { SortByComponent } from './sort-by/sort-by.component'
 import { SearchEffects } from './state/effects'
 import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
-import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
+import { ResultsHitsContainerComponent } from './results-hits/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
 import {
   AutocompleteComponent,
@@ -20,7 +21,11 @@ import {
   UiInputsModule,
 } from '../../../../../libs/ui/inputs/src'
 import { NgModule } from '@angular/core'
-import { ErrorComponent, UiElementsModule } from '../../../../../libs/ui/elements/src'
+import {
+  ErrorComponent,
+  KindBadgeComponent,
+  UiElementsModule,
+} from '../../../../../libs/ui/elements/src'
 import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
 import {
   SpinningLoaderComponent,
@@ -58,6 +63,8 @@ import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.c
     ErrorComponent,
     FavoriteStarComponent,
     DateRangeDropdownComponent,
+    NgIconsModule,
+    KindBadgeComponent,
   ],
   exports: [
     SortByComponent,

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

@@ -0,0 +1,16 @@
+<div
+  class="flex flex-col gap-3 sm:flex-row justify-between"
+  [ngClass]="{
+    'sm:items-center': (searchFacade.resultsHits$ | async) !== 0,
+  }"
+>
+  <gn-ui-results-hits-number
+    [loading]="searchFacade.isLoading$ | async"
+    [hits]="searchFacade.resultsHits$ | async"
+  ></gn-ui-results-hits-number>
+  <gn-ui-results-hits-search-kind
+    (selectionChanged)="onSelectionChanged($event)"
+    [choices]="filterChoices$ | async"
+    [selected]="selected$ | async"
+  ></gn-ui-results-hits-search-kind>
+</div>

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

@@ -0,0 +1,59 @@
+import {
+  catchError,
+  filter,
+  map,
+  Observable,
+  of,
+  startWith,
+  switchMap,
+} from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { SearchFacade } from '../state/search.facade'
+import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
+import { SearchService } from '../utils/service/search.service'
+import { FieldsService } from '../utils/service/fields.service'
+
+marker('search.filters.recordKind.all')
+marker('search.filters.recordKind.dataset')
+marker('search.filters.recordKind.service')
+marker('search.filters.recordKind.reuse')
+
+@Component({
+  selector: 'gn-ui-results-hits',
+  templateUrl: './results-hits.container.component.html',
+  styleUrls: ['./results-hits.container.component.css'],
+})
+export class ResultsHitsContainerComponent implements OnInit {
+  fieldName = 'recordKind'
+  filterChoices$: Observable<FieldAvailableValue[]>
+  selected$: Observable<FieldValue[]>
+
+  constructor(
+    protected searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private fieldsService: FieldsService
+  ) {}
+
+  ngOnInit() {
+    this.selected$ = this.searchFacade.searchFilters$.pipe(
+      switchMap((filters) =>
+        this.fieldsService.readFieldValuesFromFilters(filters)
+      ),
+      map((fieldValues) => fieldValues[this.fieldName]),
+      filter((selected) => !!selected),
+      startWith([]),
+      catchError(() => of([]))
+    ) as Observable<FieldValue[]>
+
+    this.filterChoices$ = <Observable<FieldAvailableValue[]>>(
+      this.fieldsService.getAvailableValues(this.fieldName)
+    )
+  }
+
+  onSelectionChanged(values: string[]) {
+    this.fieldsService
+      .buildFiltersFromFieldValues({ [this.fieldName]: values })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
+  }
+}

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

@@ -55,8 +55,10 @@ export class ResultsListContainerComponent implements OnInit {
     @Optional()
     @Inject(RECORD_DATASET_URL_TOKEN)
     private recordDatasetUrlTemplate: string,
+    @Optional()
     @Inject(RECORD_SERVICE_URL_TOKEN)
     private recordServiceUrlTemplate: string,
+    @Optional()
     @Inject(RECORD_REUSE_URL_TOKEN)
     private recordReuseUrlTemplate: string
   ) {}

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

@@ -10,8 +10,10 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
+  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -47,11 +49,8 @@ export class FieldsService {
   protected fields = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
-    resourceType: new TranslatedSearchField(
-      'resourceType',
-      this.injector,
-      'asc'
-    ),
+    resourceType: new ResourceTypeLegacyField(this.injector), // Deprecated, use `recordKind` instead
+    recordKind: new RecordKindField(this.injector),
     representationType: new TranslatedSearchField(
       'cl_spatialRepresentationType.key',
       this.injector,