geonetwork-ui 2.8.0-dev.749c3ea3b → 2.8.0-dev.82b7031fa

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

@@ -1,14 +1,16 @@
 <div class="mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg">
   <div
-    class="w-full min-h-[366px] flex md:flex-row flex-col border-b border-gray-300"
+    class="w-full h-[700px] md:h-[366px] flex md:flex-row flex-col border-b border-gray-300"
   >
-    <div class="md:w-1/2 w-full flex-1 flex flex-col">
+    @let filterState = filterState$ | async;
+
+    <div class="w-full md:w-5/12 h-[366px] flex flex-col">
       <gn-ui-date-range-inputs
-        [temporalExtent]="currentTemporalExtent$ | async"
+        [temporalExtent]="filterState.temporalExtent"
         (temporalExtentChange)="onTemporalExtentChange($event)"
       ></gn-ui-date-range-inputs>
 
-      <div class="mt-auto mb-8 mx-8" *ngIf="isFilterModified">
+      <div class="mt-auto mb-8 mx-8" *ngIf="isFilterModified$ | async">
         <gn-ui-button
           id="reset-filters-button"
           type="light"
@@ -20,8 +22,25 @@
       </div>
     </div>
 
-    <div class="md:w-1/2 w-full min-h-[280px] flex items-center justify-center">
-      <span>Map...</span>
+    <div class="w-full md:w-7/12 h-[334px] md:h-[366px] flex flex-col">
+      <gn-ui-map-container
+        #mapContainer
+        [context]="mapContext$ | async"
+        (extentChange)="onSpatialExtentChange($event)"
+        (resolvedExtentChange)="onResolvedMapExtentChange($event)"
+        class="w-full h-full"
+      >
+        <div
+          class="bg-white rounded-xl shadow-xl absolute left-1/2 transform -translate-x-1/2 bottom-0 mb-2.5 px-4 py-2 z-10 max-w-[90%] w-max"
+        >
+          <gn-ui-check-toggle
+            [value]="filterState.isSpatialExtentFilterEnabled"
+            (toggled)="onSpatialFilterToggle($event)"
+            [label]="'stac.filter.enable' | translate"
+            [color]="'primary'"
+          ></gn-ui-check-toggle>
+        </div>
+      </gn-ui-map-container>
     </div>
   </div>
   <div
@@ -42,7 +61,7 @@
     </div>
     <ng-template #noResultsOrError>
       <gn-ui-popup-alert
-        *ngIf="error"
+        *ngIf="error$ | async as error"
         type="warning"
         icon="matErrorOutlineOutline"
         class="absolute left-0 top-0 w-full block"
@@ -50,7 +69,7 @@
         <span translate>{{ error }}</span>
       </gn-ui-popup-alert>
       <div
-        *ngIf="!error"
+        *ngIf="(error$ | async) === null"
         class="flex items-center justify-center flex-col h-full gap-[10px]"
       >
         <h2 class="text-center text-xl" translate>stac.results.noResults</h2>

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

@@ -1,33 +1,56 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
 import {
   DatasetRecord,
   DatasetTemporalExtent,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { StacItemsResultGridComponent } from '../../../../../../libs/ui/elements/src'
 import {
   ButtonComponent,
   DateRangeInputsComponent,
+  CheckToggleComponent,
 } from '../../../../../../libs/ui/inputs/src'
+import {
+  MapContainerComponent,
+  prioritizePageScroll,
+} from '../../../../../../libs/ui/map/src'
+import { Extent, MapContext } from '@geospatial-sdk/core/dist/model'
+import { StacItemsResultGridComponent } from '../../../../../../libs/ui/elements/src'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
 import { matDeleteOutline } from '@ng-icons/material-icons/outline'
-import { TranslateDirective, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
 import {
   BehaviorSubject,
   catchError,
-  combineLatest,
   debounceTime,
+  distinctUntilChanged,
   from,
   map,
   Observable,
   of,
+  shareReplay,
   switchMap,
   take,
   tap,
 } from 'rxjs'
 import { GetCollectionItemsOptions, StacItem } from '@camptocamp/ogc-client'
 import { MdViewFacade } from '../state'
+import {
+  areSpatialExtentsEqual,
+  areTemporalExtentsEqual,
+  areFilterStatesEqual,
+} from './utils'
+import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { PreviousNextButtonsComponent } from '../../../../../../libs/ui/layout/src'
 import { FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
@@ -35,6 +58,13 @@ import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 const STAC_ITEMS_PER_PAGE = 12
 const DEBOUNCE_TIME_MS = 500
 
+export interface StacFilterState {
+  temporalExtent: DatasetTemporalExtent | null
+  spatialExtent: Extent | null
+  isSpatialExtentFilterEnabled: boolean
+  pageUrl: string | null
+}
+
 @Component({
   selector: 'gn-ui-stac-view',
   templateUrl: './stac-view.component.html',
@@ -45,46 +75,74 @@ const DEBOUNCE_TIME_MS = 500
     CommonModule,
     NgIconComponent,
     TranslateDirective,
+    TranslatePipe,
     StacItemsResultGridComponent,
     DateRangeInputsComponent,
+    MapContainerComponent,
+    CheckToggleComponent,
     PreviousNextButtonsComponent,
     PopupAlertComponent,
     ButtonComponent,
   ],
   viewProviders: [provideIcons({ matDeleteOutline })],
 })
-export class StacViewComponent implements OnInit {
-  isFilterModified = false
-  error = null
+export class StacViewComponent implements OnInit, AfterViewInit {
+  @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   initialTemporalExtent: DatasetTemporalExtent | null = null
-  currentTemporalExtent$ = new BehaviorSubject<DatasetTemporalExtent | null>(
-    null
-  )
-
+  initialSpatialExtent: Extent | null = null
+  resolvedInitialSpatialExtent: Extent | null = null
   initialPageUrl: string
   previousPageUrl: string
   nextPageUrl: string
-  currentPageUrl$ = new BehaviorSubject<string | null>(null)
 
-  items$: Observable<StacItem[]> = combineLatest([
-    this.currentPageUrl$,
-    this.currentTemporalExtent$,
-  ]).pipe(
+  error$ = new BehaviorSubject<string | null>(null)
+  mapContext$ = new BehaviorSubject<MapContext>({
+    layers: [],
+    view: null,
+  })
+  filterState$ = new BehaviorSubject<StacFilterState>({
+    temporalExtent: null,
+    spatialExtent: null,
+    isSpatialExtentFilterEnabled: true,
+    pageUrl: null,
+  })
+
+  isFilterModified$ = this.filterState$.pipe(
+    map((filterState) => {
+      const isTemporalModified = !areTemporalExtentsEqual(
+        filterState.temporalExtent,
+        this.initialTemporalExtent
+      )
+
+      const isSpatialModified =
+        this.resolvedInitialSpatialExtent &&
+        filterState.spatialExtent !== null &&
+        filterState.isSpatialExtentFilterEnabled &&
+        !areSpatialExtentsEqual(
+          filterState.spatialExtent,
+          this.resolvedInitialSpatialExtent
+        )
+
+      return isTemporalModified || isSpatialModified
+    }),
+    shareReplay({ bufferSize: 1, refCount: false })
+  )
+
+  items$: Observable<StacItem[]> = this.filterState$.pipe(
     debounceTime(DEBOUNCE_TIME_MS),
-    switchMap(([currentPageUrl, temporalExtent]) => {
-      this.error = null
-      const options: GetCollectionItemsOptions = {
-        limit: STAC_ITEMS_PER_PAGE,
-      }
-      if (temporalExtent && (temporalExtent.start || temporalExtent.end)) {
-        options.datetime = {
-          ...(temporalExtent.start && { start: temporalExtent.start }),
-          ...(temporalExtent.end && { end: temporalExtent.end }),
-        }
+    distinctUntilChanged((prev, curr) => areFilterStatesEqual(prev, curr)),
+    switchMap((filterState) => {
+      if (filterState.pageUrl === null) {
+        return of([])
       }
+
+      this.error$.next(null)
       return from(
-        this.dataService.getItemsFromStacApi(currentPageUrl, options)
+        this.dataService.getItemsFromStacApi(
+          filterState.pageUrl,
+          this.buildRequestOptions(filterState)
+        )
       ).pipe(
         tap((stacDocument) => {
           this.previousPageUrl =
@@ -99,12 +157,14 @@ export class StacViewComponent implements OnInit {
           return of([])
         })
       )
-    })
+    }),
+    shareReplay({ bufferSize: 1, refCount: false })
   )
 
   constructor(
     private dataService: DataService,
     private metadataViewFacade: MdViewFacade,
+    private mapUtils: MapUtilsService,
     private translateService: TranslateService
   ) {}
 
@@ -118,17 +178,33 @@ export class StacViewComponent implements OnInit {
               ? (metadata as DatasetRecord).temporalExtents
               : []
 
-          return temporalExtents.length > 0
-            ? temporalExtents[0]
-            : ({
-                start: null,
-                end: null,
-              } as DatasetTemporalExtent)
+          const temporalExtent =
+            temporalExtents.length > 0
+              ? temporalExtents[0]
+              : ({
+                  start: null,
+                  end: null,
+                } as DatasetTemporalExtent)
+
+          const spatialExtent = this.mapUtils.getRecordExtent(metadata)
+          return { temporalExtent, spatialExtent }
         })
       )
-      .subscribe((extent) => {
-        this.initialTemporalExtent = extent
-        this.currentTemporalExtent$.next(extent)
+      .subscribe(({ temporalExtent, spatialExtent }) => {
+        this.initialTemporalExtent = temporalExtent
+        this.initialSpatialExtent = spatialExtent
+
+        this.filterState$.next({
+          ...this.filterState$.value,
+          temporalExtent: this.initialTemporalExtent,
+        })
+
+        this.mapContext$.next({
+          ...this.mapContext$.value,
+          view: {
+            extent: spatialExtent,
+          },
+        })
       })
 
     this.metadataViewFacade.stacLinks$
@@ -139,37 +215,104 @@ export class StacViewComponent implements OnInit {
       .subscribe((link) => {
         if (link) {
           this.initialPageUrl = link.url.href
-          this.currentPageUrl$.next(link.url.href)
+          this.filterState$.next({
+            ...this.filterState$.value,
+            pageUrl: link.url.href,
+          })
         }
       })
   }
 
+  async ngAfterViewInit() {
+    const map = await this.mapContainer.openlayersMap
+    prioritizePageScroll(map.getInteractions())
+  }
+
   onTemporalExtentChange(extent: DatasetTemporalExtent | null) {
-    this.currentTemporalExtent$.next(extent)
-    // make sure to use url without pagination token when temporal filter changes
-    this.currentPageUrl$.next(this.initialPageUrl)
-    this.isFilterModified = true
+    this.filterState$.next({
+      ...this.filterState$.value,
+      temporalExtent: extent,
+      pageUrl: this.initialPageUrl,
+    })
+  }
+
+  onSpatialExtentChange(extent: Extent) {
+    this.filterState$.next({
+      ...this.filterState$.value,
+      spatialExtent: extent,
+      pageUrl: this.initialPageUrl,
+    })
+  }
+
+  onResolvedMapExtentChange(extent: Extent) {
+    this.resolvedInitialSpatialExtent = extent
+  }
+
+  onSpatialFilterToggle(enabled: boolean) {
+    this.filterState$.next({
+      ...this.filterState$.value,
+      isSpatialExtentFilterEnabled: enabled,
+      pageUrl: this.initialPageUrl,
+    })
   }
 
   onResetFilters() {
-    this.currentTemporalExtent$.next(this.initialTemporalExtent)
-    this.isFilterModified = false
+    this.mapContext$.next({
+      ...this.mapContext$.value,
+      view: {
+        extent: this.initialSpatialExtent,
+      },
+    })
+
+    this.filterState$.next({
+      temporalExtent: this.initialTemporalExtent,
+      spatialExtent: this.resolvedInitialSpatialExtent,
+      isSpatialExtentFilterEnabled: true,
+      pageUrl: this.initialPageUrl,
+    })
+  }
+
+  private buildRequestOptions(
+    filterState: StacFilterState
+  ): GetCollectionItemsOptions {
+    const options: GetCollectionItemsOptions = {
+      limit: STAC_ITEMS_PER_PAGE,
+    }
+
+    if (
+      filterState.temporalExtent &&
+      (filterState.temporalExtent.start || filterState.temporalExtent.end)
+    ) {
+      options.datetime = {
+        ...(filterState.temporalExtent.start && {
+          start: filterState.temporalExtent.start,
+        }),
+        ...(filterState.temporalExtent.end && {
+          end: filterState.temporalExtent.end,
+        }),
+      }
+    }
+
+    if (filterState.isSpatialExtentFilterEnabled && filterState.spatialExtent) {
+      options.bbox = filterState.spatialExtent
+    }
+
+    return options
   }
 
   handleError(error: FetchError | Error | string) {
     if (error instanceof FetchError) {
-      this.error = this.translateService.instant(
-        `dataset.error.${error.type}`,
-        {
+      this.error$.next(
+        this.translateService.instant(`dataset.error.${error.type}`, {
           info: error.info,
-        }
+        })
       )
       console.warn(error.message)
     } else if (error instanceof Error) {
-      this.error = this.translateService.instant(error.message)
+      this.error$.next(this.translateService.instant(error.message))
       console.warn(error.stack || error)
     } else {
-      this.error = this.translateService.instant(error)
+      this.error$.next(this.translateService.instant(error))
       console.warn(error)
     }
   }
@@ -182,9 +325,15 @@ export class StacViewComponent implements OnInit {
     return this.nextPageUrl == null
   }
   goToNextPage() {
-    this.currentPageUrl$.next(this.nextPageUrl)
+    this.filterState$.next({
+      ...this.filterState$.value,
+      pageUrl: this.nextPageUrl,
+    })
   }
   goToPrevPage() {
-    this.currentPageUrl$.next(this.previousPageUrl)
+    this.filterState$.next({
+      ...this.filterState$.value,
+      pageUrl: this.previousPageUrl,
+    })
   }
 }

package/src/libs/feature/record/src/lib/stac-view/utils.ts

@@ -0,0 +1,57 @@
+import { DatasetTemporalExtent } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { Extent } from '@geospatial-sdk/core/dist/model'
+import { StacFilterState } from './stac-view.component'
+
+export function areTemporalExtentsEqual(
+  previous: DatasetTemporalExtent | null,
+  current: DatasetTemporalExtent | null
+): boolean {
+  const previousStartTime = previous?.start?.getTime() ?? null
+  const previousEndTime = previous?.end?.getTime() ?? null
+
+  const currentStartTime = current?.start?.getTime() ?? null
+  const currentEndTime = current?.end?.getTime() ?? null
+
+  return (
+    previousStartTime === currentStartTime && previousEndTime === currentEndTime
+  )
+}
+
+export function areSpatialExtentsEqual(
+  previous: Extent | null,
+  current: Extent | null
+): boolean {
+  return (
+    previous?.[0] === current?.[0] &&
+    previous?.[1] === current?.[1] &&
+    previous?.[2] === current?.[2] &&
+    previous?.[3] === current?.[3]
+  )
+}
+
+export function areFilterStatesEqual(
+  previous: StacFilterState,
+  current: StacFilterState
+): boolean {
+  const sameTemporalExtents = areTemporalExtentsEqual(
+    previous.temporalExtent,
+    current.temporalExtent
+  )
+
+  const sameSpatialExtents =
+    !current.isSpatialExtentFilterEnabled ||
+    areSpatialExtentsEqual(previous.spatialExtent, current.spatialExtent)
+
+  const sameIsSpatialExtentFilterEnabled =
+    previous.isSpatialExtentFilterEnabled ===
+    current.isSpatialExtentFilterEnabled
+
+  const samePageUrl = previous.pageUrl === current.pageUrl
+
+  return (
+    sameTemporalExtents &&
+    sameSpatialExtents &&
+    sameIsSpatialExtentFilterEnabled &&
+    samePageUrl
+  )
+}

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

@@ -68,7 +68,7 @@ export class MdViewEffects {
       map((related) => {
         return MdViewActions.setRelated({ related })
       }),
-      catchError((error) => of(MdViewActions.setRelated({ related: null })))
+      catchError(() => of(MdViewActions.setRelated({ related: null })))
     )
   )
 

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

@@ -19,6 +19,7 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'userSavedCount',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
+  'cl_presentationForm',
   'MD_LegalConstraints*Object',
   'qualityScore',
   'allKeywords',

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

@@ -34,6 +34,7 @@ marker('search.filters.publicationYear')
 marker('search.filters.organization')
 marker('search.filters.representationType')
 marker('search.filters.resourceType')
+marker('search.filters.recordKind')
 marker('search.filters.standard')
 marker('search.filters.topic')
 marker('search.filters.contact')

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

@@ -505,11 +505,15 @@ export class ResourceTypeLegacyField extends TranslatedSearchField {
 
 export class RecordKindField extends SimpleSearchField {
   TYPE_MAPPING = {
-    dataset: ['dataset', 'series', 'featureCatalog'],
+    dataset: ['dataset', 'series', 'featureCatalog', 'document'],
     service: ['service'],
-    reuse: Object.entries(PossibleResourceTypes)
-      .filter(([_, v]) => v === 'reuse')
-      .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+    reuse: [
+      ...Object.entries(PossibleResourceTypes)
+        .filter(([_, v]) => v === 'reuse')
+        .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+      'dataset', // allow datasets and documents to be filtered as 'reuse' by cl_presentationForm
+      'document',
+    ],
   }
 
   constructor(injector: Injector) {
@@ -517,38 +521,25 @@ export class RecordKindField extends SimpleSearchField {
   }
 
   getAvailableValues(): Observable<FieldAvailableValue[]> {
-    return this.repository.aggregate(this.getAggregations()).pipe(
-      map(
-        (response) =>
-          (response[this.esFieldName] as AggregationBuckets).buckets || []
-      ),
-      map((buckets: TermBucket[]) => {
-        const counts = buckets.reduce(
-          (acc, { term, count }) => {
-            const value = term.toString()
-            const key = this.TYPE_MAPPING.reuse.includes(value)
-              ? 'reuse'
-              : this.TYPE_MAPPING.dataset.includes(value)
-                ? 'dataset'
-                : value
-
-            acc[key] = (acc[key] || 0) + count
-            return acc
-          },
-          {} as Record<string, number>
-        )
-
-        return Object.keys(this.TYPE_MAPPING).map((type) => ({
-          label: type,
-          value: type,
-          count: counts[type] ?? 0,
-        }))
-      })
-    )
+    // simplified as available values now depend on 'resourceType' and 'cl_presentationForm' fields
+    return of([
+      {
+        label: 'dataset',
+        value: 'dataset',
+      },
+      {
+        label: 'service',
+        value: 'service',
+      },
+      {
+        label: 'reuse',
+        value: 'reuse',
+      },
+    ])
   }
 
   getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
-    const filters = {
+    const filters: FieldFilters = {
       [this.esFieldName]: values.reduce((acc, value) => {
         if (value === '') return { ...acc, [value]: true }
 
@@ -559,6 +550,19 @@ export class RecordKindField extends SimpleSearchField {
       }, {}),
     }
 
+    const presentationFormFilter = {}
+    if (values.includes('reuse') && !values.includes('dataset')) {
+      presentationFormFilter['mapDigital'] = true
+      presentationFormFilter['mapHardcopy'] = true
+    } else if (values.includes('dataset') && !values.includes('reuse')) {
+      presentationFormFilter['mapDigital'] = false
+      presentationFormFilter['mapHardcopy'] = false
+    }
+
+    if (Object.keys(presentationFormFilter).length > 0) {
+      filters['cl_presentationForm.key'] = presentationFormFilter
+    }
+
     return of(filters)
   }
 

package/src/libs/ui/inputs/src/lib/check-toggle/check-toggle.component.html

@@ -1,8 +1,8 @@
 <label
-  class="inline-flex relative items-start cursor-pointer"
+  class="flex relative items-center cursor-pointer w-full"
   [title]="title || label"
 >
-  <span class="shrink-0">
+  <span class="shrink-0 relative">
     <input
       type="checkbox"
       class="sr-only peer"
@@ -18,5 +18,5 @@
       "
     ></div>
   </span>
-  <span class="ml-3 mt-[2px] text-sm font-medium">{{ label }}</span>
+  <span class="ml-3 mt-[2px] text-sm font-medium flex-1">{{ label }}</span>
 </label>

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.html

@@ -1,16 +1,18 @@
-<div class="h-full w-full" #map></div>
-<div
-  class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
-  [ngClass]="
-    (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
-  "
->
+<div class="relative h-full w-full" #map>
+  <ng-content></ng-content>
   <div
-    class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
-  ></div>
-  <ng-icon
-    class="!w-16 !h-16 text-[64px] mb-4"
-    name="matSwipeOutline"
-  ></ng-icon>
-  <p translate>map.navigation.message</p>
+    class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
+    [ngClass]="
+      (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
+    "
+  >
+    <div
+      class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
+    ></div>
+    <ng-icon
+      class="!w-16 !h-16 text-[64px] mb-4"
+      name="matSwipeOutline"
+    ></ng-icon>
+    <p translate>map.navigation.message</p>
+  </div>
 </div>