geonetwork-ui 2.3.0-dev.f736344f → 2.3.0-dev.ff2a9db7

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -0,0 +1,135 @@
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  Input,
+  ChangeDetectorRef,
+} from '@angular/core'
+import { OgcApiEndpoint } from '@camptocamp/ogc-client'
+import { Subject, debounceTime } from 'rxjs'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+} from '../map-context/map-context.model'
+import { TranslateModule } from '@ngx-translate/core'
+import { DropdownChoice, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { MapLayer } from '../+state/map.models'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-ogc-api',
+  templateUrl: './add-layer-from-ogc-api.component.html',
+  styleUrls: ['./add-layer-from-ogc-api.component.css'],
+  standalone: true,
+  imports: [CommonModule, TranslateModule, UiInputsModule],
+})
+export class AddLayerFromOgcApiComponent implements OnInit {
+  @Input() ogcUrl: string
+  @Output() layerAdded = new EventEmitter<MapLayer>()
+
+  urlChange = new Subject<string>()
+  loading = false
+  layers: any[] = []
+  errorMessage: string | null = null
+  selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {}
+
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.urlChange.pipe(debounceTime(700)).subscribe(() => {
+      this.loadLayers()
+    })
+  }
+
+  async loadLayers() {
+    this.errorMessage = null
+    try {
+      this.loading = true
+      if (!this.ogcUrl.trim()) {
+        this.layers = []
+        return
+      }
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      this.layers = await ogcEndpoint.allCollections
+      this.setDefaultLayerTypes()
+    } catch (error) {
+      const err = error as Error
+      this.layers = []
+      this.errorMessage = 'Error loading layers: ' + err.message
+    } finally {
+      this.loading = false
+      this.changeDetectorRef.markForCheck()
+    }
+  }
+
+  setDefaultLayerTypes() {
+    this.layers.forEach((layer) => {
+      const choices = this.getLayerChoices(layer)
+      if (choices.length > 0) {
+        this.selectedLayerTypes[layer.name] = choices[0].value
+      }
+    })
+  }
+
+  getLayerChoices(layer: any) {
+    const choices = []
+    if (layer.hasRecords) {
+      choices.push({ label: 'Records', value: 'record' })
+    }
+    if (layer.hasFeatures) {
+      choices.push({ label: 'Features', value: 'features' })
+    }
+    if (layer.hasVectorTiles) {
+      choices.push({ label: 'Vector Tiles', value: 'vectorTiles' })
+    }
+    if (layer.hasMapTiles) {
+      choices.push({ label: 'Map Tiles', value: 'mapTiles' })
+    }
+    return choices
+  }
+
+  shouldDisplayLayer(layer: any) {
+    return (
+      layer.hasRecords ||
+      layer.hasFeatures ||
+      layer.hasVectorTiles ||
+      layer.hasMapTiles
+    )
+  }
+
+  onLayerTypeSelect(layerName: string, selectedType: any) {
+    this.selectedLayerTypes[layerName] = selectedType
+      ? selectedType
+      : this.getLayerChoices(layerName)[0]?.value
+  }
+
+  async addLayer(layer: string, layerType: any) {
+    try {
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      let layerUrl: string
+
+      if (layerType === 'vectorTiles') {
+        layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer)
+      } else if (layerType === 'mapTiles') {
+        layerUrl = await ogcEndpoint.getMapTilesetUrl(layer)
+      } else {
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
+          outputFormat: 'json',
+        })
+      }
+
+      const layerToAdd: MapContextLayerModel = {
+        name: layer,
+        url: layerUrl,
+        type: MapContextLayerTypeEnum.OGCAPI,
+        layerType: layerType,
+      }
+      this.layerAdded.emit({ ...layerToAdd, title: layer })
+    } catch (error) {
+      const err = error as Error
+      console.error('Error adding layer:', err.message)
+    }
+  }
+}

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

@@ -25,6 +25,7 @@ import { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-
 import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wfs.component'
 import { GeocodingComponent } from './geocoding/geocoding.component'
 import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
+import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api/add-layer-from-ogc-api.component'
 
 @NgModule({
   declarations: [
@@ -59,6 +60,7 @@ import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
     EffectsModule.forFeature([MapEffects]),
     UiElementsModule,
     UiInputsModule,
+    AddLayerFromOgcApiComponent,
   ],
   providers: [
     {

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.html

@@ -40,6 +40,14 @@
           <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>
         </div>
       </mat-tab>
+      <mat-tab [label]="'map.add.layer.ogc.api' | translate" bodyClass="h-full">
+        <div class="p-3">
+          <gn-ui-add-layer-from-ogc-api
+            [ogcUrl]="ogcUrl"
+            (layerAdded)="addLayer($event)"
+          ></gn-ui-add-layer-from-ogc-api>
+        </div>
+      </mat-tab>
       <mat-tab [label]="'map.add.layer.file' | translate" bodyClass="h-full">
         <div class="p-3">
           <gn-ui-add-layer-from-file></gn-ui-add-layer-from-file>

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts

@@ -9,9 +9,14 @@ import { MapFacade } from '../+state/map.facade'
 })
 export class LayersPanelComponent {
   layers$ = this.mapFacade.layers$
+  ogcUrl = ''
   constructor(private mapFacade: MapFacade) {}
 
   deleteLayer(index: number) {
     this.mapFacade.removeLayer(index)
   }
+
+  addLayer(layer) {
+    this.mapFacade.addLayer(layer)
+  }
 }

package/src/libs/feature/map/src/lib/map-context/map-context.model.ts

@@ -1,7 +1,6 @@
 import type { FeatureCollection } from 'geojson'
 import { Coordinate } from 'ol/coordinate'
 import type { Extent } from 'ol/extent'
-import { Options } from 'ol/source/WMTS'
 
 export enum MapContextLayerTypeEnum {
   XYZ = 'xyz',
@@ -9,6 +8,7 @@ export enum MapContextLayerTypeEnum {
   WMTS = 'wmts',
   WFS = 'wfs',
   GEOJSON = 'geojson',
+  OGCAPI = 'ogcapi',
 }
 
 export interface MapContextModel {
@@ -24,8 +24,8 @@ export interface MapContextLayerWmsModel {
 
 export interface MapContextLayerWmtsModel {
   type: 'wmts'
-  options: Options
-  extent?: Extent
+  url: string
+  name: string
 }
 
 interface MapContextLayerWfsModel {
@@ -34,6 +34,13 @@ interface MapContextLayerWfsModel {
   name: string
 }
 
+export interface MapContextLayerOgcapiModel {
+  type: 'ogcapi'
+  url: string
+  name: string
+  layerType: 'feature' | 'vectorTiles' | 'mapTiles' | 'record'
+}
+
 interface LayerXyzModel {
   type: 'xyz'
   name?: string
@@ -71,6 +78,7 @@ export type MapContextLayerModel =
   | MapContextLayerWfsModel
   | MapContextLayerXyzModel
   | MapContextLayerGeojsonModel
+  | MapContextLayerOgcapiModel
 
 export interface MapContextViewModel {
   center?: Coordinate // expressed in long/lat (EPSG:4326)

package/src/libs/feature/map/src/lib/map-context/map-context.service.ts

@@ -22,9 +22,13 @@ import { LayerConfig, MapConfig } from '../../../../../../libs/util/app-config/s
 import { FeatureCollection } from 'geojson'
 import { fromLonLat } from 'ol/proj'
 import WMTS from 'ol/source/WMTS'
-import { removeSearchParams } from '../../../../../../libs/util/shared/src'
 import { Geometry } from 'ol/geom'
 import Feature from 'ol/Feature'
+import { WfsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
+import OGCVectorTile from 'ol/source/OGCVectorTile.js'
+import { MVT } from 'ol/format'
+import VectorTileLayer from 'ol/layer/VectorTile'
+import OGCMapTile from 'ol/source/OGCMapTile.js'
 
 export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = {
   type: MapContextLayerTypeEnum.XYZ,
@@ -77,6 +81,29 @@ export class MapContextService {
     const { type } = layerModel
     const style = this.styleService.styles.default
     switch (type) {
+      case MapContextLayerTypeEnum.OGCAPI:
+        if (layerModel.layerType === 'vectorTiles') {
+          return new VectorTileLayer({
+            source: new OGCVectorTile({
+              url: layerModel.url,
+              format: new MVT(),
+            }),
+          })
+        } else if (layerModel.layerType === 'mapTiles') {
+          return new TileLayer({
+            source: new OGCMapTile({
+              url: layerModel.url,
+            }),
+          })
+        } else {
+          return new VectorLayer({
+            source: new VectorSource({
+              format: new GeoJSON(),
+              url: layerModel.url,
+            }),
+            style,
+          })
+        }
       case MapContextLayerTypeEnum.XYZ:
         return new TileLayer({
           source: new XYZ({
@@ -87,44 +114,63 @@ export class MapContextService {
       case MapContextLayerTypeEnum.WMS:
         return new TileLayer({
           source: new TileWMS({
-            url: removeSearchParams(layerModel.url, ['request', 'service']),
+            url: layerModel.url,
             params: { LAYERS: layerModel.name },
             gutter: 20,
           }),
         })
-      case MapContextLayerTypeEnum.WMTS:
-        return new TileLayer({
-          source: new WMTS(layerModel.options),
+      case MapContextLayerTypeEnum.WMTS: {
+        // TODO: isolate this in utils service
+        const olLayer = new TileLayer({})
+        const endpoint = new WmtsEndpoint(layerModel.url)
+        endpoint.isReady().then(async (endpoint) => {
+          const layerName = endpoint.getSingleLayerName() ?? layerModel.name
+          const layer = endpoint.getLayerByName(layerName)
+          const matrixSet = layer.matrixSets[0]
+          const tileGrid = await endpoint.getOpenLayersTileGrid(layer.name)
+          const resourceUrl = layer.resourceLinks[0]
+          const dimensions = endpoint.getDefaultDimensions(layer.name)
+          olLayer.setSource(
+            new WMTS({
+              layer: layer.name,
+              style: layer.defaultStyle,
+              matrixSet: matrixSet.identifier,
+              format: resourceUrl.format,
+              url: resourceUrl.url,
+              requestEncoding: resourceUrl.encoding,
+              tileGrid,
+              projection: matrixSet.crs,
+              dimensions,
+            })
+          )
         })
-      case MapContextLayerTypeEnum.WFS:
-        return new VectorLayer({
-          source: new VectorSource({
-            format: new GeoJSON(),
-            url: function (extent) {
-              const urlObj = new URL(
-                removeSearchParams(layerModel.url, [
-                  'service',
-                  'version',
-                  'request',
-                ])
-              )
-              urlObj.searchParams.set('service', 'WFS')
-              urlObj.searchParams.set('version', '1.1.0')
-              urlObj.searchParams.set('request', 'GetFeature')
-              urlObj.searchParams.set('outputFormat', 'application/json')
-              urlObj.searchParams.set('typename', layerModel.name)
-              urlObj.searchParams.set('srsname', 'EPSG:3857')
-              urlObj.searchParams.set('bbox', `${extent.join(',')},EPSG:3857`)
-              urlObj.searchParams.set(
-                'maxFeatures',
-                WFS_MAX_FEATURES.toString()
-              )
-              return urlObj.toString()
-            },
-            strategy: bboxStrategy,
-          }),
+        return olLayer
+      }
+      case MapContextLayerTypeEnum.WFS: {
+        const olLayer = new VectorLayer({
           style,
         })
+        new WfsEndpoint(layerModel.url).isReady().then((endpoint) => {
+          const featureType =
+            endpoint.getSingleFeatureTypeName() ?? layerModel.name
+          olLayer.setSource(
+            new VectorSource({
+              format: new GeoJSON(),
+              url: function (extent: [number, number, number, number]) {
+                return endpoint.getFeatureUrl(featureType, {
+                  maxFeatures: WFS_MAX_FEATURES,
+                  asJson: true,
+                  outputCrs: 'EPSG:3857',
+                  extent,
+                  extentCrs: 'EPSG:3857',
+                })
+              },
+              strategy: bboxStrategy,
+            })
+          )
+        })
+        return olLayer
+      }
       case MapContextLayerTypeEnum.GEOJSON: {
         if ('url' in layerModel) {
           return new VectorLayer({

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -12,7 +12,6 @@ import Source from 'ol/source/Source'
 import ImageWMS from 'ol/source/ImageWMS'
 import TileWMS from 'ol/source/TileWMS'
 import VectorSource from 'ol/source/Vector'
-import { optionsFromCapabilities } from 'ol/source/WMTS'
 import { defaults, DragPan, Interaction, MouseWheelZoom } from 'ol/interaction'
 import {
   mouseOnly,
@@ -20,23 +19,17 @@ import {
   platformModifierKeyOnly,
   primaryAction,
 } from 'ol/events/condition'
-import WMTSCapabilities from 'ol/format/WMTSCapabilities'
-import { from, Observable } from 'rxjs'
+import { Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import {
   MapContextLayerModel,
-  MapContextLayerTypeEnum,
   MapContextLayerWmsModel,
-  MapContextLayerWmtsModel,
 } from '../map-context/map-context.model'
 import Collection from 'ol/Collection'
 import MapBrowserEvent from 'ol/MapBrowserEvent'
-import {
-  CatalogRecord,
-  DatasetDistribution,
-} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { ProxyService } from '../../../../../../libs/util/shared/src'
-import { WmsEndpoint } from '@camptocamp/ogc-client'
+import { WmsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
 import { LONLAT_CRS_CODES } from '../constant/projections'
 import { fromEPSGCode, register } from 'ol/proj/proj4'
 import proj4 from 'proj4/dist/proj4'
@@ -152,11 +145,14 @@ export class MapUtilsService {
     } else if (layer && layer.type === 'wms') {
       latLonExtent = await this.getWmsLayerExtent(layer)
     } else if (layer && layer.type === 'wmts') {
-      if (layer.extent) {
-        latLonExtent = layer.extent
-      } else {
-        return layer.options.tileGrid.getExtent()
-      }
+      // TODO: isolate this in utils service
+      latLonExtent = await new WmtsEndpoint(layer.url)
+        .isReady()
+        .then((endpoint) => {
+          const layerName = endpoint.getSingleLayerName() ?? layer.name
+          const wmtsLayer = endpoint.getLayerByName(layerName)
+          return wmtsLayer.latLonBoundingBox
+        })
     } else {
       return null
     }
@@ -180,59 +176,19 @@ export class MapUtilsService {
       LONLAT_CRS_CODES.includes(crs)
     )
     if (lonLatCRS) {
-      return boundingBoxes[lonLatCRS].map(parseFloat)
+      return boundingBoxes[lonLatCRS]
     } else {
       const availableEPSGCode = Object.keys(boundingBoxes)[0]
       register(proj4)
       const proj = await fromEPSGCode(availableEPSGCode)
-      const bboxWithFiniteNumbers =
-        boundingBoxes[availableEPSGCode].map(parseFloat)
-      return transformExtent(bboxWithFiniteNumbers, proj, 'EPSG:4326')
+      return transformExtent(
+        boundingBoxes[availableEPSGCode],
+        proj,
+        'EPSG:4326'
+      )
     }
   }
 
-  getWmtsLayerFromCapabilities(
-    link: DatasetDistribution
-  ): Observable<MapContextLayerWmtsModel> {
-    const getCapabilitiesUrl = new URL(link.url, window.location.toString())
-    getCapabilitiesUrl.searchParams.set('SERVICE', 'WMTS')
-    getCapabilitiesUrl.searchParams.set('REQUEST', 'GetCapabilities')
-    return from(
-      fetch(getCapabilitiesUrl.toString())
-        .then(async function (response) {
-          if (!response.ok) {
-            throw new Error(`WMTS GetCapabilities HTTP request failed with code ${
-              response.status
-            } and body:
-${await response.text()}`)
-          }
-          return response.text()
-        })
-        .then(function (text) {
-          try {
-            const result = new WMTSCapabilities().read(text)
-            const options = optionsFromCapabilities(result, {
-              layer: link.name,
-              matrixSet: 'EPSG:3857',
-            })
-            const layerCap = result?.Contents?.Layer.find(
-              (layer) => layer.Identifier === link.name
-            )
-            return {
-              options,
-              type: MapContextLayerTypeEnum.WMTS as 'wmts',
-              ...(layerCap?.WGS84BoundingBox
-                ? { extent: layerCap.WGS84BoundingBox }
-                : {}),
-            }
-          } catch (e: any) {
-            throw new Error(`WMTS GetCapabilities parsing failed:
-${e.stack || e.message || e}`)
-          }
-        })
-    )
-  }
-
   prioritizePageScroll(interactions: Collection<Interaction>) {
     interactions.clear()
     interactions.extend(

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

@@ -0,0 +1,3 @@
+export * from './lib/feature-notifications.module'
+export * from './lib/notifications.service'
+export * from './lib/notifications-container/notifications-container.component'

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

@@ -0,0 +1,10 @@
+import { NotificationsService } from './notifications.service'
+import { NgModule } from '@angular/core'
+
+@NgModule({
+  declarations: [],
+  exports: [],
+  imports: [],
+  providers: [NotificationsService],
+})
+export class FeatureNotificationsModule {}

package/src/libs/feature/notifications/src/lib/notification.model.ts

@@ -0,0 +1,6 @@
+export interface NotificationContent {
+  type: 'info' | 'warning' | 'error' | 'success'
+  title: string
+  text: string
+  closeMessage?: string
+}

package/src/libs/feature/notifications/src/lib/notifications-container/notifications-container.component.html

@@ -0,0 +1,17 @@
+<div class="flex flex-col gap-6 p-6 items-start pointer-events-none">
+  <gn-ui-notification
+    *ngFor="
+      let notification of notificationsService.notifications$ | async;
+      trackBy: trackById
+    "
+    class="max-w-full pointer-events-auto"
+    [text]="notification.text"
+    [type]="notification.type"
+    [title]="notification.title"
+    [closeMessage]="notification.closeMessage"
+    (notificationClose)="
+      notificationsService.removeNotificationById(notification.id)
+    "
+    [@enterExit]
+  ></gn-ui-notification>
+</div>

package/src/libs/feature/notifications/src/lib/notifications-container/notifications-container.component.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { NotificationsService } from '../notifications.service'
+import { NotificationComponent } from '../../../../../../libs/ui/elements/src'
+import {
+  animate,
+  keyframes,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations'
+
+@Component({
+  selector: 'gn-ui-notifications-container',
+  standalone: true,
+  imports: [CommonModule, NotificationComponent],
+  templateUrl: './notifications-container.component.html',
+  styleUrls: ['./notifications-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('enterExit', [
+      transition(':enter', [
+        animate(
+          '150ms',
+          keyframes([
+            style({ transform: 'scale(1)', opacity: 0 }),
+            style({ transform: 'scale(1.03)', opacity: 0.5 }),
+            style({ transform: 'scale(1)', opacity: 1 }),
+          ])
+        ),
+      ]),
+      transition(':leave', [
+        animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
+      ]),
+    ]),
+  ],
+})
+export class NotificationsContainerComponent {
+  constructor(protected notificationsService: NotificationsService) {}
+
+  trackById(index: number, notification: { id: number }) {
+    return notification.id
+  }
+}

package/src/libs/feature/notifications/src/lib/notifications.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core'
+import { NotificationContent } from './notification.model'
+import { BehaviorSubject } from 'rxjs'
+
+type NotificationWithIdentity = NotificationContent & { id: number }
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NotificationsService {
+  notifications$ = new BehaviorSubject<NotificationWithIdentity[]>([])
+
+  showNotification(content: NotificationContent, timeoutMs?: number) {
+    const id = Math.floor(Math.random() * 1000000)
+    this.notifications$.next([...this.notifications$.value, { ...content, id }])
+    if (typeof timeoutMs === 'undefined') return
+    setTimeout(() => {
+      this.removeNotificationById(id)
+    }, timeoutMs)
+  }
+
+  removeNotificationById(id: number) {
+    this.notifications$.next(
+      this.notifications$.value.filter((n) => n.id !== id)
+    )
+  }
+}

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

@@ -11,7 +11,10 @@ import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
 import { MapViewComponent } from './map-view/map-view.component'
 import { DataViewComponent } from './data-view/data-view.component'
-import { MD_VIEW_FEATURE_STATE_KEY, reducer } from './state/mdview.reducer'
+import {
+  METADATA_VIEW_FEATURE_STATE_KEY,
+  reducer,
+} from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatIconModule } from '@angular/material/icon'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
@@ -35,7 +38,7 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
   ],
   imports: [
     CommonModule,
-    StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer),
+    StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
     EffectsModule.forFeature([MdViewEffects]),
     UiLayoutModule,
     FeatureMapModule,

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

@@ -188,11 +188,16 @@ export class MapViewComponent implements OnInit, OnDestroy {
       link.type === 'service' &&
       link.accessServiceProtocol === 'wmts'
     ) {
-      return this.mapUtils.getWmtsLayerFromCapabilities(link)
+      return of({
+        url: link.url.toString(),
+        type: MapContextLayerTypeEnum.WMTS,
+        name: link.name,
+      })
     } else if (
       (link.type === 'service' &&
         (link.accessServiceProtocol === 'wfs' ||
-          link.accessServiceProtocol === 'esriRest')) ||
+          link.accessServiceProtocol === 'esriRest' ||
+          link.accessServiceProtocol === 'ogcFeatures')) ||
       link.type === 'download'
     ) {
       return this.dataService.readAsGeoJson(link).pipe(