geonetwork-ui 2.8.0-dev.7ecc6ee1d → 2.8.0-dev.82b7031fa

package/src/libs/api/repository/src/lib/gn4/elasticsearch/constant.ts

@@ -7,7 +7,6 @@ export const ES_SOURCE_SUMMARY = [
   'resourceAbstractObject',
   'overview',
   'logo',
-  'codelist_status_text',
   'link',
   'linkProtocol',
   'contactForResource*.organisation*',
@@ -16,6 +15,7 @@ export const ES_SOURCE_SUMMARY = [
   'userSavedCount',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
+  'cl_presentationForm',
   'MD_LegalConstraints*Object',
   'qualityScore',
   'allKeywords',

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

@@ -3,4 +3,3 @@ export * from './lib/chart-view/chart-view.component'
 export * from './lib/figure/figure-container/figure-container.component'
 export * from './lib/geo-table-view/geo-table-view.component'
 export * from './lib/table-view/table-view.component'
-export * from './lib/stac-view/stac-view.component'

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

@@ -7,6 +7,9 @@ import {
   WfsEndpoint,
   WfsVersion,
   TmsEndpoint,
+  StacEndpoint,
+  GetCollectionItemsOptions,
+  StacItemsDocument,
 } from '@camptocamp/ogc-client'
 import {
   BaseReader,
@@ -244,6 +247,17 @@ export class DataService {
       })
   }
 
+  async getItemsFromStacApi(
+    url: string,
+    options: GetCollectionItemsOptions
+  ): Promise<StacItemsDocument> {
+    return await StacEndpoint.getItemsFromUrl(url, options)
+      .then((response) => response)
+      .catch(() => {
+        throw new Error(`ogc.unreachable.unknown`)
+      })
+  }
+
   async getGeodataLinksFromTms(
     tmsLink: DatasetServiceDistribution,
     keepOriginalLink = false

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

@@ -40,6 +40,7 @@
         <div
           class="flex flex-col gap-2 w-full px-2"
           data-test="langAvailable"
+          [attr.data-test-lang]="lang"
           *ngFor="let lang of languages"
         >
           <gn-ui-button

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

@@ -8,3 +8,4 @@ export * from './lib/external-viewer-button/external-viewer-button.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/stac-view/stac-view.component'

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

@@ -56,7 +56,11 @@ export class DataViewComponent {
       this.linkSelected.emit(this.selectedLink$.value)
     }
   }
-  @Input() set datavizConfig(value: any) {
+  @Input() set datavizConfig(value: {
+    view?: string
+    source?: DatasetOnlineResource
+    chartConfig?: DatavizChartConfigModel
+  }) {
     if ((value && value.view === 'table') || value.view === 'chart') {
       this._selectedView = value.view
     }

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.ts

@@ -45,8 +45,8 @@ export interface TermBucket {
 }
 
 export interface Field {
-  entry: Array<any>
-  link: any
+  entry: Array<unknown>
+  link: Record<string, unknown>
 }
 
 @Component({
@@ -75,7 +75,7 @@ export class GpfApiDlComponent implements OnInit {
   page$ = new BehaviorSubject(1)
   url =
     'https://data.geopf.fr/telechargement/capabilities?outputFormat=application/json'
-  choices: any
+  choices: { zone: TermBucket[]; format: TermBucket[]; category: TermBucket[] }
   bucketPromisesZone: Choice[]
   bucketPromisesFormat: Choice[]
   bucketPromisesCrs: Choice[]
@@ -144,8 +144,10 @@ export class GpfApiDlComponent implements OnInit {
     })
   )
 
-  getFilteredProduct$(url): Observable<any> {
-    return this.http.get(url)
+  getFilteredProduct$(
+    url
+  ): Observable<{ entry: unknown[]; totalentries: number }> {
+    return this.http.get<{ entry: unknown[]; totalentries: number }>(url)
   }
 
   getLinkFormat(produit): string {
@@ -224,7 +226,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempZone = this.choices.zone.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempZone.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempZone.unshift({ value: 'null', label: 'ZONE' })
@@ -233,7 +235,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempFormat = this.choices.format.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempFormat.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempFormat.unshift({ value: 'null', label: 'FORMAT' })
@@ -242,7 +244,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempCrs = this.choices.category.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempCrs.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempCrs.unshift({ value: 'null', label: 'CRS' })

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.ts

@@ -28,7 +28,7 @@ export class GpfApiDlListItemComponent implements OnInit {
   @Input() isFromWfs: boolean
 
   constructor(protected http: HttpClient) {}
-  liste$: Observable<any>
+  liste$: Observable<{ entry: unknown[] }>
 
   ngOnInit(): void {
     this.liste$ = this.http

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

@@ -112,9 +112,8 @@
         type="outline"
         (buttonClick)="toggleLegend()"
         extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
-        translate
       >
-        map.legend.title
+        {{ 'map.legend.title' | translate }}
       </gn-ui-button>
 
       <gn-ui-loading-mask

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

@@ -27,7 +27,6 @@ import {
   map,
   shareReplay,
   switchMap,
-  take,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
@@ -118,7 +117,11 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set selectedView(value: string) {
     this.selectedView$.next(value)
   }
-  @Input() set datavizConfig(value: any) {
+  @Input() set datavizConfig(value: {
+    view?: string
+    styleTMSIndex?: number
+    source?: DatasetOnlineResource
+  }) {
     if (value && value.view === 'map') {
       this.selectedView$.next(value.view)
       if (value.styleTMSIndex) {

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

@@ -0,0 +1,8 @@
+:host {
+  --gn-ui-button-padding: 7px 8px;
+}
+
+/* Ensure OpenLayers controls are above the custom toggle */
+::ng-deep .ol-overlaycontainer-stopevent {
+  z-index: 11 !important;
+}

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

@@ -0,0 +1,87 @@
+<div class="mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg">
+  <div
+    class="w-full h-[700px] md:h-[366px] flex md:flex-row flex-col border-b border-gray-300"
+  >
+    @let filterState = filterState$ | async;
+
+    <div class="w-full md:w-5/12 h-[366px] flex flex-col">
+      <gn-ui-date-range-inputs
+        [temporalExtent]="filterState.temporalExtent"
+        (temporalExtentChange)="onTemporalExtentChange($event)"
+      ></gn-ui-date-range-inputs>
+
+      <div class="mt-auto mb-8 mx-8" *ngIf="isFilterModified$ | async">
+        <gn-ui-button
+          id="reset-filters-button"
+          type="light"
+          (buttonClick)="onResetFilters()"
+        >
+          <span translate>stac.filter.reset</span>
+          <ng-icon name="matDeleteOutline" class="ml-2"></ng-icon>
+        </gn-ui-button>
+      </div>
+    </div>
+
+    <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
+    class="relative mx-5 my-[30px] min-h-[274px] flex items-center justify-center flex-col"
+  >
+    <!-- Keep grid outside ngIf to keep items$ observable alive -->
+    <gn-ui-stac-items-result-grid
+      [items]="items$ | async"
+    ></gn-ui-stac-items-result-grid>
+    <div
+      *ngIf="(items$ | async)?.length > 0; else noResultsOrError"
+      class="mt-[20px] mx-auto flex justify-center"
+    >
+      <gn-ui-previous-next-buttons
+        [listComponent]="this"
+        [displayLabels]="true"
+      ></gn-ui-previous-next-buttons>
+    </div>
+    <ng-template #noResultsOrError>
+      <gn-ui-popup-alert
+        *ngIf="error$ | async as error"
+        type="warning"
+        icon="matErrorOutlineOutline"
+        class="absolute left-0 top-0 w-full block"
+      >
+        <span translate>{{ error }}</span>
+      </gn-ui-popup-alert>
+      <div
+        *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>
+        <gn-ui-button
+          id="no-results-button"
+          type="secondary"
+          (buttonClick)="onResetFilters()"
+        >
+          <span translate>stac.filter.reset</span>
+          <ng-icon name="matDeleteOutline" class="ml-2"></ng-icon>
+        </gn-ui-button>
+      </div>
+    </ng-template>
+  </div>
+</div>

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

@@ -0,0 +1,339 @@
+import { CommonModule } from '@angular/common'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+import {
+  DatasetRecord,
+  DatasetTemporalExtent,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+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,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { DataService } from '../../../../../../libs/feature/dataviz/src'
+import {
+  BehaviorSubject,
+  catchError,
+  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'
+
+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',
+  styleUrls: ['./stac-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIconComponent,
+    TranslateDirective,
+    TranslatePipe,
+    StacItemsResultGridComponent,
+    DateRangeInputsComponent,
+    MapContainerComponent,
+    CheckToggleComponent,
+    PreviousNextButtonsComponent,
+    PopupAlertComponent,
+    ButtonComponent,
+  ],
+  viewProviders: [provideIcons({ matDeleteOutline })],
+})
+export class StacViewComponent implements OnInit, AfterViewInit {
+  @ViewChild('mapContainer') mapContainer: MapContainerComponent
+
+  initialTemporalExtent: DatasetTemporalExtent | null = null
+  initialSpatialExtent: Extent | null = null
+  resolvedInitialSpatialExtent: Extent | null = null
+  initialPageUrl: string
+  previousPageUrl: string
+  nextPageUrl: string
+
+  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),
+    distinctUntilChanged((prev, curr) => areFilterStatesEqual(prev, curr)),
+    switchMap((filterState) => {
+      if (filterState.pageUrl === null) {
+        return of([])
+      }
+
+      this.error$.next(null)
+      return from(
+        this.dataService.getItemsFromStacApi(
+          filterState.pageUrl,
+          this.buildRequestOptions(filterState)
+        )
+      ).pipe(
+        tap((stacDocument) => {
+          this.previousPageUrl =
+            stacDocument.links.find((link) => link.rel === 'previous')?.href ||
+            null
+          this.nextPageUrl =
+            stacDocument.links.find((link) => link.rel === 'next')?.href || null
+        }),
+        map((stacDocument) => stacDocument.features),
+        catchError((err) => {
+          this.handleError(err)
+          return of([])
+        })
+      )
+    }),
+    shareReplay({ bufferSize: 1, refCount: false })
+  )
+
+  constructor(
+    private dataService: DataService,
+    private metadataViewFacade: MdViewFacade,
+    private mapUtils: MapUtilsService,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.metadataViewFacade.metadata$
+      .pipe(
+        take(1),
+        map((metadata) => {
+          const temporalExtents =
+            metadata?.kind === 'dataset'
+              ? (metadata as DatasetRecord).temporalExtents
+              : []
+
+          const temporalExtent =
+            temporalExtents.length > 0
+              ? temporalExtents[0]
+              : ({
+                  start: null,
+                  end: null,
+                } as DatasetTemporalExtent)
+
+          const spatialExtent = this.mapUtils.getRecordExtent(metadata)
+          return { temporalExtent, spatialExtent }
+        })
+      )
+      .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$
+      .pipe(
+        take(1),
+        map((links) => (links && links.length > 0 ? links[0] : null))
+      )
+      .subscribe((link) => {
+        if (link) {
+          this.initialPageUrl = 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.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.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$.next(
+        this.translateService.instant(`dataset.error.${error.type}`, {
+          info: error.info,
+        })
+      )
+      console.warn(error.message)
+    } else if (error instanceof Error) {
+      this.error$.next(this.translateService.instant(error.message))
+      console.warn(error.stack || error)
+    } else {
+      this.error$.next(this.translateService.instant(error))
+      console.warn(error)
+    }
+  }
+
+  // Paginable API
+  get isFirstPage() {
+    return this.previousPageUrl == null
+  }
+  get isLastPage() {
+    return this.nextPageUrl == null
+  }
+  goToNextPage() {
+    this.filterState$.next({
+      ...this.filterState$.value,
+      pageUrl: this.nextPageUrl,
+    })
+  }
+  goToPrevPage() {
+    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 })))
     )
   )