geonetwork-ui 2.8.0-dev.83aaa1736 → 2.8.0-dev.8bc07e341

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

@@ -0,0 +1,338 @@
+import { CommonModule } from '@angular/common'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  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 {
+  private dataService = inject(DataService)
+  private metadataViewFacade = inject(MdViewFacade)
+  private mapUtils = inject(MapUtilsService)
+  private translateService = inject(TranslateService)
+
+  @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 })
+  )
+
+  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

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { exhaustMap, mergeMap, of } from 'rxjs'
 import { catchError, filter, map, switchMap } from 'rxjs/operators'
@@ -8,12 +8,10 @@ import { PlatformServiceInterface } from '../../../../../../libs/common/domain/s
 import { Router } from '@angular/router'
 @Injectable()
 export class MdViewEffects {
-  constructor(
-    private actions$: Actions,
-    private recordsRepository: RecordsRepositoryInterface,
-    private platformServiceInterface: PlatformServiceInterface,
-    private router: Router
-  ) {}
+  private actions$ = inject(Actions)
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private platformServiceInterface = inject(PlatformServiceInterface)
+  private router = inject(Router)
 
   /*
     Metadata effects
@@ -68,7 +66,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/record/src/lib/state/mdview.facade.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { select, Store } from '@ngrx/store'
 import {
   catchError,
@@ -20,7 +20,7 @@ import {
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 import { OgcApiRecord } from '@camptocamp/ogc-client'
-import { from, of, Observable } from 'rxjs'
+import { from, of } from 'rxjs'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
 
 @Injectable()
@@ -31,12 +31,10 @@ import { DataService } from '../../../../../../libs/feature/dataviz/src'
  * To clear the current record use the `close()` method.
  */
 export class MdViewFacade {
-  constructor(
-    private store: Store,
-    public linkClassifier: LinkClassifierService,
-    private avatarService: AvatarServiceInterface,
-    public dataService: DataService
-  ) {}
+  private store = inject(Store)
+  linkClassifier = inject(LinkClassifierService)
+  private avatarService = inject(AvatarServiceInterface)
+  dataService = inject(DataService)
 
   isPresent$ = this.store.pipe(
     select(MdViewSelectors.getMetadataUuid),
@@ -89,6 +87,25 @@ export class MdViewFacade {
     shareReplay(1)
   )
 
+  resourceDoi$ = this.metadata$.pipe(
+    map((record) => {
+      if (!record?.resourceIdentifiers?.length) return null
+      const doiIdentifier = record.resourceIdentifiers.find(
+        (id) =>
+          id.codeSpace?.toLowerCase().includes('doi.org') ||
+          id.code.startsWith('10.')
+      )
+
+      if (!doiIdentifier) return null
+
+      return {
+        code: doiIdentifier.code,
+        url: doiIdentifier.url ? doiIdentifier.url : null,
+      }
+    }),
+    shareReplay(1)
+  )
+
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
@@ -105,6 +122,16 @@ export class MdViewFacade {
     shareReplay(1)
   )
 
+  stacLinks$ = this.allLinks$.pipe(
+    map((links) =>
+      links.filter(
+        (link) =>
+          link.type === 'service' && link.accessServiceProtocol === 'stac'
+      )
+    ),
+    shareReplay(1)
+  )
+
   downloadLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>

package/src/libs/feature/router/src/lib/default/container/search-router.container.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Host, Input, OnInit } from '@angular/core'
+import { Directive, Input, OnInit, inject } from '@angular/core'
 import { SearchFacade, SearchService } from '../../../../../../../libs/feature/search/src'
 import { RouterSearchService } from '../services/router-search.service'
 
@@ -14,9 +14,9 @@ import { RouterSearchService } from '../services/router-search.service'
   standalone: true,
 })
 export class SearchRouterContainerDirective implements OnInit {
-  @Input('gnUiSearchRouterContainer') searchId: string
+  private facade = inject(SearchFacade, { host: true })
 
-  constructor(@Host() private facade: SearchFacade) {}
+  @Input('gnUiSearchRouterContainer') searchId: string
 
   ngOnInit(): void {
     this.facade.init(this.searchId)

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

@@ -1,4 +1,4 @@
-import { ModuleWithProviders, NgModule } from '@angular/core'
+import { ModuleWithProviders, NgModule, inject } from '@angular/core'
 import { RouteReuseStrategy } from '@angular/router'
 import { EffectsModule } from '@ngrx/effects'
 import {
@@ -32,7 +32,9 @@ import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
   ],
 })
 export class DefaultRouterModule {
-  constructor(private routerService: RouterService) {
+  private routerService = inject(RouterService)
+
+  constructor() {
     this.routerService.initRoutes()
   }
 

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

@@ -1,4 +1,4 @@
-import { Inject, Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_ORGANIZATION,
@@ -8,15 +8,17 @@ import {
 } from '.'
 import { Router, Routes } from '@angular/router'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
+import {
+  SortByEnum,
+  SortByField,
+} from '../../../../../../libs/common/domain/src/lib/model/search'
 
 @Injectable({
   providedIn: 'root',
 })
 export class RouterService {
-  constructor(
-    @Inject(ROUTER_CONFIG) protected routerConfig: RouterConfigModel,
-    private router: Router
-  ) {}
+  protected routerConfig = inject<RouterConfigModel>(ROUTER_CONFIG)
+  private router = inject(Router)
 
   initRoutes() {
     this.router.resetConfig(this.buildRoutes())
@@ -58,4 +60,8 @@ export class RouterService {
   getOrganizationPageRoute(): string {
     return ROUTER_ROUTE_ORGANIZATION
   }
+
+  getDefaultSort(): SortByField {
+    return SortByEnum.RESOURCE_DATES
+  }
 }

package/src/libs/feature/router/src/lib/default/services/router-search.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import {
   FieldsService,
   SearchFacade,
@@ -15,11 +15,9 @@ import { sortByToString } from '../../../../../../../libs/util/shared/src'
 
 @Injectable()
 export class RouterSearchService implements SearchServiceI {
-  constructor(
-    private searchFacade: SearchFacade,
-    private facade: RouterFacade,
-    private fieldsService: FieldsService
-  ) {}
+  private searchFacade = inject(SearchFacade)
+  private facade = inject(RouterFacade)
+  private fieldsService = inject(FieldsService)
 
   setSortAndFilters(filters: FieldFilters, sortBy: SortByField) {
     this.fieldsService

package/src/libs/feature/router/src/lib/default/state/router.effects.ts

@@ -1,5 +1,5 @@
 import { Location } from '@angular/common'
-import { Inject, Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { ActivatedRouteSnapshot, Router } from '@angular/router'
 import { MdViewActions } from '../../../../../../../libs/feature/record/src'
 import {
@@ -9,10 +9,7 @@ import {
   SetFilters,
   SetSortBy,
 } from '../../../../../../../libs/feature/search/src'
-import {
-  FieldFilters,
-  SortByEnum,
-} from '../../../../../../../libs/common/domain/src/lib/model/search'
+import { FieldFilters } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { navigation } from '@ngrx/router-store/data-persistence'
 import { of, pairwise, startWith } from 'rxjs'
@@ -22,17 +19,17 @@ import { RouterFacade } from './router.facade'
 import { ROUTE_PARAMS } from '../constants'
 import { sortByFromString } from '../../../../../../../libs/util/shared/src'
 import { ROUTER_CONFIG, RouterConfigModel } from '../router.config'
+import { RouterService } from '../router.service'
 
 @Injectable()
 export class RouterEffects {
-  constructor(
-    private _actions$: Actions,
-    private _router: Router,
-    private _location: Location,
-    private facade: RouterFacade,
-    @Inject(ROUTER_CONFIG) private routerConfig: RouterConfigModel,
-    private fieldsService: FieldsService
-  ) {}
+  private _actions$ = inject(Actions)
+  private _router = inject(Router)
+  private _location = inject(Location)
+  private facade = inject(RouterFacade)
+  private routerConfig = inject<RouterConfigModel>(ROUTER_CONFIG)
+  private fieldsService = inject(FieldsService)
+  private routerService = inject(RouterService)
 
   navigate$ = createEffect(
     () =>
@@ -61,7 +58,7 @@ export class RouterEffects {
         let sortBy =
           ROUTE_PARAMS.SORT in newParams
             ? sortByFromString(newParams[ROUTE_PARAMS.SORT])
-            : SortByEnum.CHANGE_DATE
+            : this.routerService.getDefaultSort()
         let pageNumber =
           ROUTE_PARAMS.PAGE in newParams
             ? parseInt(newParams[ROUTE_PARAMS.PAGE])
@@ -70,7 +67,7 @@ export class RouterEffects {
           const oldSort =
             ROUTE_PARAMS.SORT in oldParams
               ? sortByFromString(oldParams[ROUTE_PARAMS.SORT])
-              : SortByEnum.CHANGE_DATE
+              : this.routerService.getDefaultSort()
           if (JSON.stringify(sortBy) === JSON.stringify(oldSort)) {
             sortBy = null
           }

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { MdViewActions } from '../../../../../../../libs/feature/record/src'
 import { RouterService } from '../router.service'
 import { RouterReducerState } from '@ngrx/router-store'
@@ -23,6 +23,9 @@ import { expandQueryParams, flattenQueryParams } from './query-params.utils'
 
 @Injectable()
 export class RouterFacade {
+  private store = inject<Store<RouterReducerState>>(Store)
+  private routerService = inject(RouterService)
+
   currentRoute$ = this.store.pipe(select(selectCurrentRoute))
   pathParams$ = this.store.pipe(select(selectRouteParams))
 
@@ -40,11 +43,6 @@ export class RouterFacade {
     reuse: ROUTER_ROUTE_REUSE,
   }
 
-  constructor(
-    private store: Store<RouterReducerState>,
-    private routerService: RouterService
-  ) {}
-
   goToMetadata(metadata: CatalogRecord) {
     const selectedRoute = this.routeMap[metadata.kind] || ROUTER_ROUTE_DATASET
     this.pathParams$