geonetwork-ui 2.2.0-dev.95201f8f → 2.2.0-dev.ae0a63ae

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.2.0-dev.95201f8f",
+  "version": "2.2.0-dev.ae0a63ae",
   "engines": {
     "node": ">=14.17.0"
   },
@@ -48,12 +48,14 @@
   "dependencies": {
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@camptocamp/ogc-client": "^0.4.0",
+    "@geospatial-sdk/geocoding": "^0.0.5-alpha.1",
     "@ltd/j-toml": "~1.35.2",
     "@messageformat/core": "^3.0.1",
     "@nx/angular": "16.6.0",
     "@rgrove/parse-xml": "~4.0.1",
     "alasql": "^3.1.0",
     "axios": "^1.6.0",
+    "basiclightbox": "^5.0.4",
     "chart.js": "^4.2.0",
     "chroma-js": "^2.1.2",
     "date-fns": "^2.29.3",
@@ -62,6 +64,7 @@
     "embla-carousel": "^8.0.0-rc14",
     "express": "^4.17.1",
     "geojson-validation": "^1.0.2",
+    "marked": "^11.1.1",
     "moment": "^2.29.4",
     "ng-table-virtual-scroll": "^1.4.1",
     "ngx-chips": "3.0.0",

package/src/libs/api/metadata-converter/src/lib/gn4/atomic-operations.ts

@@ -41,6 +41,9 @@ export const toDate = (field) => new Date(field)
 export const getFirstValue = (field) =>
   Array.isArray(field) ? field[0] : field
 
+export const getArrayItem = (field, index) =>
+  Array.isArray(field) && field[index] !== undefined ? field[index] : null
+
 export const getAsArray = (field) =>
   Array.isArray(field) ? field : field !== null ? [field] : []
 

package/src/libs/api/metadata-converter/src/lib/gn4/gn4.field.mapper.ts

@@ -1,4 +1,5 @@
 import {
+  getArrayItem,
   getAsArray,
   getAsUrl,
   getFirstValue,
@@ -22,6 +23,7 @@ import {
   DatasetDistributionType,
   DatasetDownloadDistribution,
   DatasetServiceDistribution,
+  DatasetSpatialExtent,
   OnlineLinkResource,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { matchProtocol } from '../common/distribution.mapper'
@@ -258,6 +260,47 @@ export class Gn4FieldMapper {
         kind,
       }
     },
+    geom: (output, source) => {
+      const geoms = getAsArray(selectField(source, 'geom'))
+      const shapes = getAsArray(selectField(source, 'shape'))
+      const extentDescriptions = getAsArray(
+        selectField(source, 'extentDescriptionObject')
+      )
+      const spatialExtents = getAsArray(selectField(source, 'spatialExtents'))
+      return {
+        ...output,
+        spatialExtents: [
+          ...spatialExtents,
+          ...geoms.map((geom, index) => {
+            const description = selectTranslatedValue(
+              getArrayItem(extentDescriptions, index),
+              this.lang3
+            )
+            const geometry = shapes[index] ?? geom
+            return {
+              ...(description !== null ? { description } : null),
+              geometry,
+            } as DatasetSpatialExtent
+          }),
+        ],
+      }
+    },
+    resourceTemporalDateRange: (output, source) => {
+      const ranges = getAsArray(
+        selectField(source, 'resourceTemporalDateRange')
+      )
+      return {
+        ...output,
+        temporalExtents: ranges.map((range) => {
+          const start = selectField(range, 'gte')
+          const end = selectField(range, 'lte')
+          return {
+            ...(start !== null ? { start: toDate(start) } : null),
+            ...(end !== null ? { end: toDate(end) } : null),
+          }
+        }),
+      }
+    },
   }
 
   private genericField = (output) => output

package/src/libs/api/repository/src/lib/gn4/index.ts

@@ -6,3 +6,5 @@ export * from './auth'
 export * from './favorites/favorites.service'
 export * from './selection/selection.service'
 export * from './gn4.provider'
+export * from './platform/gn4-platform.service'
+export * from './platform/gn4-platform.mapper'

package/src/libs/common/domain/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './organizations.service.interface'
+export * from './platform.service.interface'

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -1,6 +1,7 @@
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { Individual } from './contact.model'
-import { Organization } from './organization.model'
+import type { Individual } from './contact.model'
+import type { Organization } from './organization.model'
+import type { Geometry } from 'geojson'
 
 type Uuid = string
 
@@ -122,6 +123,7 @@ export interface DatasetDownloadDistribution {
   // textEncoding?: string
   name?: string
   description?: string
+  accessServiceProtocol?: ServiceProtocol
 }
 
 export interface OnlineLinkResource {
@@ -145,13 +147,16 @@ export interface GraphicOverview {
 }
 
 export interface DatasetSpatialExtent {
-  geometry: unknown // GeoJSON
+  geometry: Geometry
   description?: string
 }
 
+/**
+ * At least a start or an end date should be provided
+ */
 export interface DatasetTemporalExtent {
-  start: Date
-  end: Date
+  start?: Date
+  end?: Date
   description?: string
 }
 
@@ -163,8 +168,8 @@ export interface DatasetRecord extends BaseRecord {
   datasetUpdated?: Date
   lineage: string // Explanation of the origin of this record (e.g: how, why)"
   distributions: Array<DatasetDistribution>
-  spatialExtents: Array<DatasetSpatialExtent> // not handled yet
-  temporalExtents: Array<DatasetTemporalExtent> // not handled yet
+  spatialExtents: Array<DatasetSpatialExtent>
+  temporalExtents: Array<DatasetTemporalExtent>
   spatialRepresentation?: SpatialRepresentationType
 }
 

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

@@ -9,8 +9,8 @@ import {
   SupportedTypes,
 } from '../../../../../../libs/util/data-fetcher/src'
 import {
-  extensionToFormat,
   getFileFormat,
+  getFileFormatFromServiceOutput,
   getMimeTypeForFormat,
   ProxyService,
 } from '../../../../../../libs/util/shared/src'
@@ -45,7 +45,7 @@ interface WfsDownloadUrls {
 export class DataService {
   constructor(private proxy: ProxyService) {}
 
-  private getDownloadUrlsFromWfs(
+  getDownloadUrlsFromWfs(
     wfsUrl: string,
     featureTypeName: string
   ): Observable<WfsDownloadUrls> {
@@ -120,7 +120,7 @@ export class DataService {
     )
   }
 
-  private getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
+  getDownloadUrlFromEsriRest(apiUrl: string, format: string): string {
     return this.proxy.getProxiedUrl(
       `${apiUrl}/query?f=${format}&where=1=1&outFields=*`
     )
@@ -138,8 +138,11 @@ export class DataService {
       map((urls) =>
         Object.keys(urls).map((format) => ({
           ...wfsLink,
+          type: 'download',
           url: new URL(urls[format]),
-          mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+          mimeType: getMimeTypeForFormat(
+            getFileFormatFromServiceOutput(format)
+          ),
         }))
       )
     )
@@ -153,7 +156,7 @@ export class DataService {
       url: new URL(
         this.getDownloadUrlFromEsriRest(esriRestLink.url.toString(), format)
       ),
-      mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+      mimeType: getMimeTypeForFormat(getFileFormatFromServiceOutput(format)),
     }))
   }
 

package/src/libs/feature/editor/src/lib/record-form/record-form.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { EditorService, FormField } from '../services/editor.service'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 
 @Component({
   selector: 'gn-ui-record-form',
@@ -8,7 +9,7 @@ import { EditorService, FormField } from '../services/editor.service'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, UiInputsModule],
 })
 export class RecordFormComponent {
   constructor(public editorService: EditorService) {}

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

@@ -17,3 +17,4 @@ export * from './lib/layers-panel/layers-panel.component'
 export * from './lib/add-layer-from-catalog/add-layer-from-catalog.component'
 export * from './lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
 export * from './lib/map-container/map-container.component'
+export * from './lib/geocoding/geocoding.component'

package/src/libs/feature/map/src/lib/constant/index.ts

@@ -1 +1,2 @@
 export * from './map-options'
+export * from './projections'

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

@@ -23,6 +23,8 @@ import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { AddLayerFromWmsComponent } from './add-layer-from-wms/add-layer-from-wms.component'
 import { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-file.component'
 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'
 
 @NgModule({
   declarations: [
@@ -35,6 +37,7 @@ import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wf
     AddLayerFromWmsComponent,
     AddLayerFromFileComponent,
     AddLayerFromWfsComponent,
+    GeocodingComponent,
   ],
   exports: [
     MapContextComponent,
@@ -42,6 +45,7 @@ import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wf
     LayersPanelComponent,
     AddLayerFromCatalogComponent,
     MapContainerComponent,
+    GeocodingComponent,
   ],
   imports: [
     CommonModule,
@@ -62,6 +66,10 @@ import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wf
       useValue: defaultMapOptions,
     },
     MapFacade,
+    {
+      provide: GEOCODING_PROVIDER,
+      useValue: ['geonames', { maxRows: 5 }] as GeocodingProvider,
+    },
   ],
 })
 export class FeatureMapModule {}

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.html

@@ -0,0 +1,39 @@
+<gn-ui-search-input
+  [(value)]="searchText"
+  (valueChange)="onSearchChange($event)"
+  (keyup.enter)="onEnterPress()"
+  [placeholder]="'map.geocoding.placeholder' | translate"
+>
+</gn-ui-search-input>
+<ul
+  class="bg-gray-50 border border-gray-200 w-full mt-2 shadow-sm rounded-lg"
+  *ngIf="results && results.length"
+>
+  <li
+    *ngFor="let result of results"
+    (click)="zoomToLocation(result)"
+    class="flex items-center pl-8 pr-4 py-2 border-b border-gray-200 relative cursor-pointer hover:bg-blue-100 hover:text-gray-800 transition duration-300 ease-in-out"
+  >
+    <svg
+      class="stroke-current text-blue-500 absolute w-5 h-5 left-3 top-3"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+      />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+    <span class="font-sans font-semibold ml-4">{{ result.label }}</span>
+  </li>
+</ul>

package/src/libs/feature/map/src/lib/geocoding/geocoding.component.ts

@@ -0,0 +1,99 @@
+import { Component, OnDestroy } from '@angular/core'
+import { catchError, from, Subject, takeUntil } from 'rxjs'
+import { debounceTime, switchMap } from 'rxjs/operators'
+import { MapManagerService } from '../manager/map-manager.service'
+import { fromLonLat } from 'ol/proj'
+import { Polygon } from 'ol/geom'
+import { GeocodingService } from '../geocoding.service'
+
+@Component({
+  selector: 'gn-ui-geocoding',
+  templateUrl: './geocoding.component.html',
+  styleUrls: ['./geocoding.component.css'],
+})
+export class GeocodingComponent implements OnDestroy {
+  searchText = ''
+  results: any[] = []
+  searchTextChanged = new Subject<string>()
+  destroy$ = new Subject<void>()
+  errorMessage: string | null = null
+
+  constructor(
+    private mapManager: MapManagerService,
+    private geocodingService: GeocodingService
+  ) {
+    this.searchTextChanged
+      .pipe(
+        debounceTime(300),
+        switchMap((searchText) => {
+          return from(this.geocodingService.query(searchText)).pipe(
+            catchError((error) => {
+              this.errorMessage =
+                'An error occurred while searching. Please try again.'
+              console.error(error)
+              return []
+            })
+          )
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((results) => {
+        this.results = results
+      })
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
+
+  onSearchChange(searchText: string) {
+    if (!searchText) {
+      this.clearSearch()
+      return
+    } else {
+      this.searchTextChanged.next(searchText)
+    }
+  }
+
+  clearSearch() {
+    this.searchText = ''
+    this.results = []
+    this.errorMessage = null
+  }
+
+  zoomToLocation(result: any) {
+    const map = this.mapManager.map
+    const view = map.getView()
+    const geometry = result.geom
+
+    if (geometry.type === 'Point') {
+      this.zoomToPoint(geometry.coordinates, view)
+    } else if (geometry.type === 'Polygon') {
+      this.zoomToPolygon(geometry.coordinates, view)
+    } else {
+      console.error(`Unsupported geometry type: ${geometry.type}`)
+    }
+  }
+
+  zoomToPoint(pointCoords: [number, number], view: any) {
+    const transformedCoords = fromLonLat(pointCoords)
+    view.setCenter(transformedCoords)
+    view.setZoom(12)
+  }
+
+  zoomToPolygon(polygonCoords: [[number, number][]], view: any) {
+    const transformedCoords = polygonCoords[0].map((coord) => fromLonLat(coord))
+    const polygon = new Polygon([transformedCoords])
+    view.fit(polygon, {
+      duration: 100,
+      maxZoom: 12,
+    })
+  }
+
+  onEnterPress() {
+    if (this.results && this.results.length > 0) {
+      this.zoomToLocation(this.results[0])
+    }
+  }
+}

package/src/libs/feature/map/src/lib/geocoding.service.ts

@@ -0,0 +1,59 @@
+import { Injectable, Inject, InjectionToken } from '@angular/core'
+import {
+  queryGeoadmin,
+  GeoadminOptions,
+  GeocodingResult,
+  queryGeonames,
+  GeonamesOptions,
+  DataGouvFrOptions,
+  queryDataGouvFr,
+} from '@geospatial-sdk/geocoding'
+import { from, Observable, throwError } from 'rxjs'
+import { catchError } from 'rxjs/operators'
+
+type GeoadminGeocodingProvider = ['geoadmin', GeoadminOptions]
+type GeonamesGeocodingProvider = ['geonames', GeonamesOptions]
+type DataGouvFrGeocodingProvider = ['data-gouv-fr', DataGouvFrOptions]
+export type GeocodingProvider =
+  | GeoadminGeocodingProvider
+  | GeonamesGeocodingProvider
+  | DataGouvFrGeocodingProvider
+
+export const GEOCODING_PROVIDER = new InjectionToken<GeocodingProvider>(
+  'geocoding-provider'
+)
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GeocodingService {
+  constructor(
+    @Inject(GEOCODING_PROVIDER) private provider: GeocodingProvider
+  ) {}
+
+  query(text: string): Observable<GeocodingResult[]> {
+    let queryObservable: Observable<GeocodingResult[]>
+    switch (this.provider[0]) {
+      case 'geoadmin':
+        queryObservable = from(
+          queryGeoadmin(text, this.provider[1] as GeoadminOptions)
+        )
+        break
+      case 'geonames':
+        queryObservable = from(
+          queryGeonames(text, this.provider[1] as GeonamesOptions)
+        )
+        break
+      case 'data-gouv-fr':
+        queryObservable = from(
+          queryDataGouvFr(text, this.provider[1] as DataGouvFrOptions)
+        )
+        break
+      default:
+        return throwError(
+          () => new Error(`Unsupported geocoding provider: ${this.provider[0]}`)
+        )
+    }
+    return queryObservable.pipe(catchError((error) => throwError(error)))
+  }
+}

package/src/libs/feature/map/src/lib/utils/index.ts

@@ -1,3 +1 @@
 export * from './map-utils.service'
-export * from './map-utils-wms.service'
-export * from './projections'