geonetwork-ui 2.2.0-dev.f866474c → 2.3.0-dev.179fba83

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

@@ -2,64 +2,65 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import type { FeatureCollection } from 'geojson'
 import { extend, Extent, isEmpty } from 'ol/extent'
-import OlFeature, { FeatureLike } from 'ol/Feature'
+import Feature from 'ol/Feature'
 import GeoJSON from 'ol/format/GeoJSON'
 import { Geometry } from 'ol/geom'
 import Layer from 'ol/layer/Layer'
 import Map from 'ol/Map'
-import { fromLonLat } from 'ol/proj'
+import { transformExtent } from 'ol/proj'
 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 { Options, optionsFromCapabilities } from 'ol/source/WMTS'
-import { DragPan, MouseWheelZoom, defaults, Interaction } from 'ol/interaction'
+import { defaults, DragPan, Interaction, MouseWheelZoom } from 'ol/interaction'
 import {
   mouseOnly,
   noModifierKeys,
   platformModifierKeyOnly,
   primaryAction,
 } from 'ol/events/condition'
-import WMTSCapabilities from 'ol/format/WMTSCapabilities'
-import { from, Observable, of } from 'rxjs'
+import { Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import {
   MapContextLayerModel,
-  MapContextLayerTypeEnum,
-  MapContextLayerWmtsModel,
+  MapContextLayerWmsModel,
 } from '../map-context/map-context.model'
-import { MapUtilsWMSService } from './map-utils-wms.service'
 import Collection from 'ol/Collection'
 import MapBrowserEvent from 'ol/MapBrowserEvent'
-import { 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, 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'
 
 const FEATURE_PROJECTION = 'EPSG:3857'
 const DATA_PROJECTION = 'EPSG:4326'
 
+const GEOJSON = new GeoJSON()
+
 @Injectable({
   providedIn: 'root',
 })
 export class MapUtilsService {
-  constructor(private http: HttpClient, private wmsUtils: MapUtilsWMSService) {}
+  constructor(private http: HttpClient, private proxy: ProxyService) {}
 
   createEmptyMap(): Map {
-    const map = new Map({
+    return new Map({
       controls: [],
       pixelRatio: 1,
     })
-    return map
   }
 
   readFeatureCollection = (
     featureCollection: FeatureCollection,
     featureProjection = FEATURE_PROJECTION,
     dataProjection = DATA_PROJECTION
-  ): FeatureLike[] => {
-    const olFeatures = new GeoJSON().readFeatures(featureCollection, {
+  ): Feature<Geometry>[] => {
+    return GEOJSON.readFeatures(featureCollection, {
       featureProjection,
       dataProjection,
-    })
-    return olFeatures
+    }) as Feature<Geometry>[]
   }
 
   isWMSLayer(layer: Layer<Source>): boolean {
@@ -78,20 +79,14 @@ export class MapUtilsService {
       ...source.getParams(),
       INFO_FORMAT: 'application/json',
     }
-    const url = source.getFeatureInfoUrl(
-      coordinate,
-      resolution,
-      projection,
-      params
-    )
-    return url
+    return source.getFeatureInfoUrl(coordinate, resolution, projection, params)
   }
 
-  getVectorFeaturesFromClick(olMap, event): OlFeature<Geometry>[] {
+  getVectorFeaturesFromClick(olMap, event): Feature<Geometry>[] {
     const features = []
     const hit = olMap.forEachFeatureAtPixel(
       event.pixel,
-      (feature: OlFeature<Geometry>) => {
+      (feature: Feature<Geometry>) => {
         return feature
       },
       { layerFilter: (layer) => layer.getSource() instanceof VectorSource }
@@ -103,9 +98,9 @@ export class MapUtilsService {
   }
 
   getGFIFeaturesObservablesFromClick(
-    olMap,
-    event
-  ): Observable<OlFeature<Geometry>[]>[] {
+    olMap: Map,
+    event: MapBrowserEvent<PointerEvent>
+  ): Observable<Feature<Geometry>[]>[] {
     const wmsLayers = olMap.getLayers().getArray().filter(this.isWMSLayer)
 
     if (wmsLayers.length > 0) {
@@ -128,8 +123,8 @@ export class MapUtilsService {
   /**
    * Will emit `null` if no extent could be computed
    */
-  getLayerExtent(layer: MapContextLayerModel): Observable<Extent | null> {
-    let geographicExtent: Observable<Extent>
+  async getLayerExtent(layer: MapContextLayerModel): Promise<Extent | null> {
+    let latLonExtent: Extent
     if (
       layer &&
       layer.type === 'geojson' &&
@@ -138,79 +133,60 @@ export class MapUtilsService {
       layer.data.features[0] &&
       layer.data.features[0].geometry
     ) {
-      geographicExtent = of(layer.data).pipe(
-        map((layerData) =>
-          new GeoJSON()
-            .readFeatures(layerData)
-            .map((feature) => feature.getGeometry())
-            .filter((geom) => !!geom)
-            .reduce(
-              (prev, curr) =>
-                prev ? extend(prev, curr.getExtent()) : curr.getExtent(),
-              null as Extent
-            )
+      latLonExtent = new GeoJSON()
+        .readFeatures(layer.data)
+        .map((feature) => feature.getGeometry())
+        .filter((geom) => !!geom)
+        .reduce(
+          (prev, curr) =>
+            prev ? extend(prev, curr.getExtent()) : curr.getExtent(),
+          null as Extent
         )
-      )
     } else if (layer && layer.type === 'wms') {
-      geographicExtent = this.wmsUtils.getLayerLonLatBBox(layer)
+      latLonExtent = await this.getWmsLayerExtent(layer)
     } else if (layer && layer.type === 'wmts') {
-      if (layer.extent) {
-        geographicExtent = of(layer.extent)
-      } else {
-        return of(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 of(null)
+      return null
     }
-    return geographicExtent.pipe(
-      map((extent) => [
-        ...fromLonLat([extent[0], extent[1]], 'EPSG:3857'),
-        ...fromLonLat([extent[2], extent[3]], 'EPSG:3857'),
-      ]),
-      map((extent) => (isEmpty(extent) ? null : extent))
-    )
+    if (!latLonExtent || isEmpty(latLonExtent)) {
+      return null
+    }
+    return transformExtent(latLonExtent, 'EPSG:4326', 'EPSG:3857')
   }
 
-  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}`)
-          }
-        })
+  async getWmsLayerExtent(
+    layer: MapContextLayerWmsModel
+  ): Promise<Extent | null> {
+    const endpoint = await new WmsEndpoint(
+      this.proxy.getProxiedUrl(layer.url)
+    ).isReady()
+    const { boundingBoxes } = endpoint.getLayerByName(layer.name)
+    if (!Object.keys(boundingBoxes).length) {
+      return null
+    }
+    const lonLatCRS = Object.keys(boundingBoxes)?.find((crs) =>
+      LONLAT_CRS_CODES.includes(crs)
     )
+    if (lonLatCRS) {
+      return boundingBoxes[lonLatCRS]
+    } else {
+      const availableEPSGCode = Object.keys(boundingBoxes)[0]
+      register(proj4)
+      const proj = await fromEPSGCode(availableEPSGCode)
+      return transformExtent(
+        boundingBoxes[availableEPSGCode],
+        proj,
+        'EPSG:4326'
+      )
+    }
   }
 
   prioritizePageScroll(interactions: Collection<Interaction>) {
@@ -235,6 +211,21 @@ ${e.stack || e.message || e}`)
         .getArray()
     )
   }
+
+  getRecordExtent(record: Partial<CatalogRecord>): Extent {
+    if (!('spatialExtents' in record)) {
+      return null
+    }
+    // transform an array of geojson geometries into a bbox
+    const totalExtent = record.spatialExtents.reduce(
+      (prev, curr) => {
+        const geom = GEOJSON.readGeometry(curr.geometry)
+        return extend(prev, geom.getExtent())
+      },
+      [Infinity, Infinity, -Infinity, -Infinity]
+    )
+    return transformExtent(totalExtent, 'EPSG:4326', 'EPSG:3857')
+  }
 }
 
 export function dragPanCondition(

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

@@ -29,18 +29,18 @@ export class DataViewPermalinkComponent {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
         const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
-        url.search = `?v=${this.version}
-&e=gn-dataset-view-chart
-&a=api-url=${this.config.basePath}
-&a=dataset-id=${metadata.uniqueIdentifier}
-&a=primary-color=%230f4395
-&a=secondary-color=%238bc832
-&a=main-color=%23555
-&a=background-color=%23fdfbff
-&a=aggregation=${aggregation}
-&a=x-property=${xProperty}
-&a=y-property=${yProperty}
-&a=chart-type=${chartType}`
+        url.searchParams.set('v', `${this.version}`)
+        url.searchParams.append('e', `gn-dataset-view-chart`)
+        url.searchParams.append('a', `api-url=${this.config.basePath}`)
+        url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
+        url.searchParams.append('a', `primary-color=#0f4395`)
+        url.searchParams.append('a', `secondary-color=#8bc832`)
+        url.searchParams.append('a', `main-color=#555`)
+        url.searchParams.append('a', `background-color=#fdfbff`)
+        url.searchParams.append('a', `aggregation=${aggregation}`)
+        url.searchParams.append('a', `x-property=${xProperty}`)
+        url.searchParams.append('a', `y-property=${yProperty}`)
+        url.searchParams.append('a', `chart-type=${chartType}`)
         return url.toString()
       }
       return ''

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

@@ -22,10 +22,14 @@ import { StyleLike } from 'ol/style/Style'
 import {
   BehaviorSubject,
   combineLatest,
+  from,
+  lastValueFrom,
   Observable,
   of,
+  startWith,
   Subscription,
   throwError,
+  withLatestFrom,
 } from 'rxjs'
 import {
   catchError,
@@ -99,7 +103,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
 
   mapContext$ = this.currentLayers$.pipe(
     switchMap((layers) =>
-      this.mapUtils.getLayerExtent(layers[0]).pipe(
+      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
         catchError((error) => {
           console.warn(error) // FIXME: report this to the user somehow
           return of(undefined)
@@ -115,7 +119,19 @@ export class MapViewComponent implements OnInit, OnDestroy {
         ),
         tap(() => this.resetSelection())
       )
-    )
+    ),
+    withLatestFrom(this.mdViewFacade.metadata$),
+    map(([context, metadata]) => {
+      if (context.view.extent) return context
+      const extent = this.mapUtils.getRecordExtent(metadata)
+      return {
+        ...context,
+        view: {
+          ...context.view,
+          extent,
+        },
+      }
+    })
   )
 
   constructor(
@@ -123,7 +139,6 @@ export class MapViewComponent implements OnInit, OnDestroy {
     private mapManager: MapManagerService,
     private mapUtils: MapUtilsService,
     private dataService: DataService,
-    private proxy: ProxyService,
     private featureInfo: FeatureInfoService,
     private changeRef: ChangeDetectorRef,
     private styleService: MapStyleService
@@ -173,7 +188,11 @@ 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' ||

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

@@ -50,7 +50,7 @@ const mdViewReducer = createReducer(
     chartConfig,
   })),
   on(MdViewActions.close, (state) => {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { metadata, related, ...stateWithoutMd } = state
     return stateWithoutMd
   })

package/src/libs/feature/router/src/lib/default/index.ts

@@ -2,6 +2,7 @@ export * from './router.module'
 export * from './constants'
 export * from './state/router.facade'
 export * from './router.service'
+export * from './router.config'
 export * from './state/router.effects'
 export * from './state/router.facade'
 export * from './container/search-router.container.directive'

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -8,7 +8,7 @@ import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
 })
 export class RouterService {
   constructor(
-    @Inject(ROUTER_CONFIG) private routerConfig: RouterConfigModel,
+    @Inject(ROUTER_CONFIG) protected routerConfig: RouterConfigModel,
     private router: Router
   ) {}
 

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

@@ -1,4 +1,6 @@
 export * from './lib/feature-search.module'
+export * from './lib/filter-geometry.token'
+export * from './lib/record-url.token'
 export * from './lib/state/actions'
 export * from './lib/state/selectors'
 export * from './lib/state/search.facade'
@@ -18,3 +20,4 @@ export * from './lib/results-hits-number/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'
+export * from './lib/results-table/results-table.component'

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.html

@@ -1,10 +1,19 @@
-<div>
-  <span class="align-text-top mr-1.5 favorite-count" *ngIf="hasFavoriteCount">{{
-    favoriteCount
-  }}</span>
+<div class="flex flex-row items-center">
+  <span
+    class="align-text-top mr-1.5"
+    data-test="favorite-count"
+    *ngIf="hasFavoriteCount && displayCount"
+    >{{ favoriteCount }}</span
+  >
   <gn-ui-star-toggle
     [toggled]="isFavorite$ | async"
     (newValue)="toggleFavorite($event)"
     [disabled]="loading || (isAnonymous$ | async)"
   ></gn-ui-star-toggle>
+  <span
+    class="align-text-top ml-1.5"
+    data-test="favorite-count"
+    *ngIf="!displayCount"
+    translate="datahub.record.addToFavorites"
+  ></span>
 </div>

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts

@@ -24,6 +24,7 @@ import { PlatformServiceInterface } from '../../../../../../../libs/common/domai
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
+  @Input() displayCount? = true
   @Input() set record(value) {
     this.record_ = value
     this.favoriteCount =
@@ -38,7 +39,7 @@ export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
     map((favorites) => favorites.indexOf(this.record.uniqueIdentifier) > -1)
   )
   isAnonymous$ = this.platformService.isAnonymous()
-  record_: CatalogRecord
+  record_: Partial<CatalogRecord>
   favoriteCount: number | null
   loading = false
   loginUrl = this.authService.loginUrl

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

@@ -15,24 +15,15 @@ import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
 import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
-import { InjectionToken, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
 import { MatIconModule } from '@angular/material/icon'
 import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
-import { Geometry } from 'geojson'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { RecordsRepositoryInterface } from '../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { Gn4Repository } from '../../../../../libs/api/repository/src'
 
-// this geometry will be used to filter & boost results accordingly
-export const FILTER_GEOMETRY = new InjectionToken<Promise<Geometry>>(
-  'filter-geometry'
-)
-
-// expects the replacement key ${uuid}
-export const RECORD_URL_TOKEN = new InjectionToken<string>('record-url-token')
-
 @NgModule({
   declarations: [
     SortByComponent,

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts

@@ -10,7 +10,7 @@ import { catchError, filter, map, startWith } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { FieldsService } from '../utils/service/fields.service'
-import { FieldAvailableValue } from '../utils/service/fields'
+import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -31,11 +31,11 @@ export class FilterDropdownComponent implements OnInit {
     filter((selected) => !!selected),
     startWith([]),
     catchError(() => of([]))
-  )
+  ) as Observable<FieldValue[]>
 
-  onSelectedValues(values: (string | number)[]) {
+  onSelectedValues(values: unknown[]) {
     this.fieldsService
-      .buildFiltersFromFieldValues({ [this.fieldName]: values })
+      .buildFiltersFromFieldValues({ [this.fieldName]: values as FieldValue[] })
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
 

package/src/libs/feature/search/src/lib/filter-geometry.token.ts

@@ -0,0 +1,7 @@
+// this geometry will be used to filter & boost results accordingly
+import { InjectionToken } from '@angular/core'
+import { Geometry } from 'geojson'
+
+export const FILTER_GEOMETRY = new InjectionToken<Promise<Geometry>>(
+  'filter-geometry'
+)

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts

@@ -11,12 +11,13 @@ import {
   AutocompleteComponent,
   AutocompleteItem,
 } from '../../../../../../libs/ui/inputs/src'
-import { Observable } from 'rxjs'
+import { Observable, firstValueFrom } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { SearchFilters } from '../../../../../../libs/api/metadata-converter/src'
 
 @Component({
   selector: 'gn-ui-fuzzy-search',
@@ -75,7 +76,12 @@ export class FuzzySearchComponent implements OnInit {
     }
   }
 
-  handleInputCleared() {
-    this.searchService.updateFilters({ any: '' })
+  async handleInputCleared() {
+    const currentSearchFilters: SearchFilters = await firstValueFrom(
+      this.searchFacade.searchFilters$
+    )
+    if (currentSearchFilters.any) {
+      this.searchService.updateFilters({ any: '' })
+    }
   }
 }

package/src/libs/feature/search/src/lib/record-url.token.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core'
+
+// expects the replacement key ${uuid}
+export const RECORD_URL_TOKEN = new InjectionToken<string>('record-url-token')

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

@@ -17,7 +17,7 @@ import {
   ResultsLayoutConfigItem,
   ResultsLayoutConfigModel,
 } from '../../../../../../libs/ui/search/src'
-import { RECORD_URL_TOKEN } from '../feature-search.module'
+import { RECORD_URL_TOKEN } from '../record-url.token'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export type ResultsListShowMoreStrategy = 'auto' | 'button' | 'none'