geonetwork-ui 2.11.0-dev.96d0c6ce2 → 2.11.0-dev.9ba9c4d3d

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

@@ -11,6 +11,7 @@ import {
   AggregationsParams,
   FieldFilter,
   FieldFilters,
+  FieldSort,
   FilterQuery,
   FiltersAggregationParams,
   SortByField,
@@ -33,7 +34,12 @@ import {
   LanguageCode,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateService } from '@ngx-translate/core'
-import { getGeometryBoundingBox } from '../../../../../../../libs/util/shared/src'
+import {
+  bboxToPolygon,
+  BoundingBox,
+  getGeometryBoundingBox,
+  isBoundingBox,
+} from '../../../../../../../libs/util/shared/src'
 import { getLength as getGeodesicLength } from 'ol/sphere.js'
 import { LineString } from 'ol/geom.js'
 
@@ -141,6 +147,7 @@ export class ElasticsearchService {
           values: uuids,
         },
       },
+      size: uuids.length,
     }
   }
 
@@ -199,9 +206,27 @@ export class ElasticsearchService {
   }
 
   private buildPayloadSort(sortBy: SortByField): SortParams {
-    if (sortBy === null) return undefined
-    const fields = Array.isArray(sortBy[0]) ? sortBy : [sortBy]
-    return fields.map((field) => ({ [field[1]]: field[0] }))
+    if (!sortBy || sortBy.length === 0) return undefined
+    const fields = Array.isArray(sortBy[0])
+      ? (sortBy as FieldSort[])
+      : [sortBy as FieldSort]
+    return fields.map((field) => {
+      // Sort by nested array of dates only works with the explicit syntax
+      if (field[1].endsWith('.date')) {
+        const nestedPath = field[1].slice(0, field[1].lastIndexOf('.date'))
+        return {
+          [field[1]]: {
+            order: field[0] as 'desc' | 'asc',
+            mode: field[0] === 'desc' ? 'max' : 'min',
+            missing: '_last',
+            nested: {
+              path: nestedPath,
+            },
+          },
+        }
+      }
+      return { [field[1]]: field[0] }
+    })
   }
 
   private injectLangInQueryStringFields(
@@ -244,8 +269,18 @@ export class ElasticsearchService {
     return this.metadataLang === 'current'
   }
 
-  private filtersToQuery(
+  private findSpatialFilterExtent(
     filters: FieldFilters | FiltersAggregationParams | string
+  ): BoundingBox | undefined {
+    if (typeof filters === 'string') {
+      return undefined
+    }
+    return Object.values(filters).find(isBoundingBox)
+  }
+
+  private filtersToQuery(
+    filters: FieldFilters | FiltersAggregationParams | string,
+    spatialFilterExtent = this.findSpatialFilterExtent(filters)
   ): FilterQuery {
     const addQuote = (key: string) => (/^\/.+\/$/.test(key) ? key : `"${key}"`)
     const makeQuery = (filter: FieldFilter): string => {
@@ -266,7 +301,9 @@ export class ElasticsearchService {
         ? filters
         : Object.keys(filters)
             .filter((fieldname) => fieldname !== 'gn-ui-crossFieldFilter')
+            .filter((fieldname) => !isBoundingBox(filters[fieldname]))
             .filter((fieldname) => !isDateRange(filters[fieldname]))
+            .filter((fieldname) => !Array.isArray(filters[fieldname]))
             .filter(
               (fieldname) =>
                 filters[fieldname] &&
@@ -310,6 +347,21 @@ export class ElasticsearchService {
             },
           },
         },
+      spatialFilterExtent && {
+        geo_shape: {
+          geom: {
+            shape: {
+              type: 'envelope',
+              // spatialFilterExtent is [minX, minY, maxX, maxY]; envelope coordinates are [top-left, bottom-right]
+              coordinates: [
+                [spatialFilterExtent[0], spatialFilterExtent[3]],
+                [spatialFilterExtent[2], spatialFilterExtent[1]],
+              ],
+            },
+            relation: 'intersects',
+          },
+        },
+      },
     ].filter(Boolean)
     return queryParts.length > 0 ? (queryParts as FilterQuery) : undefined
   }
@@ -348,7 +400,12 @@ export class ElasticsearchService {
         },
       })
     }
-    const queryFilters = this.filtersToQuery(fieldSearchFilters)
+    // a spatial extent filter takes precedence over the preference geometry for boosting
+    const spatialFilterExtent = this.findSpatialFilterExtent(fieldSearchFilters)
+    const queryFilters = this.filtersToQuery(
+      fieldSearchFilters,
+      spatialFilterExtent
+    )
     if (queryFilters) {
       filter.push(...queryFilters)
     }
@@ -359,7 +416,10 @@ export class ElasticsearchService {
         },
       })
     }
-    if (geometry) {
+    const boostGeometry = spatialFilterExtent
+      ? bboxToPolygon(spatialFilterExtent)
+      : geometry
+    if (boostGeometry) {
       // boosts applied using the filter geometry:
       // * records completely within the geometry receive a boost of 5
       // * records intersecting the geometry receive a boost of 2
@@ -369,7 +429,7 @@ export class ElasticsearchService {
         {
           geo_shape: {
             geom: {
-              shape: geometry,
+              shape: boostGeometry,
               relation: 'within',
             },
             boost: 5.0,
@@ -378,7 +438,7 @@ export class ElasticsearchService {
         {
           geo_shape: {
             geom: {
-              shape: geometry,
+              shape: boostGeometry,
               relation: 'intersects',
             },
             boost: 2.0,
@@ -389,7 +449,7 @@ export class ElasticsearchService {
       // this will boost the results variably depending on their distance from the given geometry
       // note: this takes into account the `location` field of a record; this is generally the center of all spatial extents
       // combined, and thus the actual size/coverage of the record spatial extent isn't relevant here
-      const bbox = getGeometryBoundingBox(geometry)
+      const bbox = getGeometryBoundingBox(boostGeometry)
       const center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2]
       const northToCenter = new LineString([
         [center[0], bbox[3]],

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

@@ -14,10 +14,13 @@ import {
 } from '../../../../../../libs/api/metadata-converter/src'
 import { PublicationVersionError } from '../../../../../../libs/common/domain/src/lib/model/error'
 import {
+  AssociatedRecord,
   CatalogRecord,
   DatasetFeatureCatalog,
   DatasetFeatureType,
   LanguageCode,
+  LinkedRecord,
+  RecordRelation,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
   Aggregations,
@@ -145,7 +148,7 @@ export class Gn4Repository implements RecordsRepositoryInterface {
     return this.gn4SearchApi
       .search(
         'bucket',
-        ['fcats', 'hassources'],
+        ['fcats', 'hassources', 'siblings', 'associated'],
         JSON.stringify(
           this.gn4SearchHelper.getMetadataByIdsPayload([uniqueIdentifier])
         )
@@ -249,22 +252,43 @@ export class Gn4Repository implements RecordsRepositoryInterface {
       )
   }
 
-  getSources(record: CatalogRecord): Observable<CatalogRecord[]> {
-    const sourcesIdentifiers = record.extras?.['sourcesIdentifiers'] as string[]
-    if (sourcesIdentifiers && sourcesIdentifiers.length > 0) {
-      return this.getMultipleRecords(sourcesIdentifiers)
-    }
-    return of(null)
-  }
-
-  getSourceOf(record: CatalogRecord): Observable<CatalogRecord[]> {
-    const sourceOfIdentifiers = record.extras?.[
-      'sourceOfIdentifiers'
-    ] as string[]
-    if (sourceOfIdentifiers && sourceOfIdentifiers.length > 0) {
-      return this.getMultipleRecords(sourceOfIdentifiers)
+  getLinkedRecords(record: CatalogRecord): Observable<LinkedRecord[]> {
+    const siblings = (record.extras?.['siblings'] ?? []) as AssociatedRecord[]
+    const relations: Array<[RecordRelation, string[]]> = [
+      ['source', (record.extras?.['sourcesIdentifiers'] ?? []) as string[]],
+      ['sourceOf', (record.extras?.['sourceOfIdentifiers'] ?? []) as string[]],
+      ['sibling', siblings.map(({ uniqueIdentifier }) => uniqueIdentifier)],
+      [
+        'associated',
+        (record.extras?.['associatedIdentifiers'] ?? []) as string[],
+      ],
+    ]
+    const requested = relations.filter(
+      ([, identifiers]) => identifiers.length > 0
+    )
+    if (requested.length === 0) {
+      return of([])
     }
-    return of(null)
+    return forkJoin(
+      requested.map(([relation, identifiers]) =>
+        this.getMultipleRecords(identifiers).pipe(
+          map((records) =>
+            (records ?? []).map((record) => ({
+              record,
+              relation,
+              associationType:
+                relation === 'sibling'
+                  ? siblings.find(
+                      ({ uniqueIdentifier }) =>
+                        uniqueIdentifier === record.uniqueIdentifier
+                    )?.associationType
+                  : undefined,
+            }))
+          ),
+          catchError(() => of([]))
+        )
+      )
+    ).pipe(map((groups) => groups.flat()))
   }
 
   aggregate(params: AggregationsParams): Observable<Aggregations> {

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

@@ -294,6 +294,18 @@ export interface AssociatedRecord {
   associationType: AssociationType
 }
 
+/**
+ * Nature of the link between a record and another one; the association type is
+ * only known for 'sibling' relations, as it is held by the declaring record.
+ */
+export type RecordRelation = 'source' | 'sourceOf' | 'sibling' | 'associated'
+
+export interface LinkedRecord {
+  record: CatalogRecord
+  relation: RecordRelation
+  associationType?: AssociationType
+}
+
 export interface DatasetRecord extends BaseRecord {
   kind: 'dataset'
   status: RecordStatus

package/src/libs/common/domain/src/lib/model/search/filter.model.ts

@@ -6,11 +6,15 @@ export type FieldFilterByRange = {
   start?: Date
   end?: Date
 }
+// matches util/shared's BoundingBox; duplicated here to avoid a circular
+// dependency (util/shared already depends on common/domain)
+export type FieldFilterByBoundingBox = [number, number, number, number]
 
 export type FieldFilter =
   | FieldFilterByExpression
   | FieldFilterByValues
   | FieldFilterByRange
+  | FieldFilterByBoundingBox
 export type FieldFilters = Record<FieldName, FieldFilter>
 
 export type QueryString = {
@@ -19,4 +23,12 @@ export type QueryString = {
 export type QueryRange = {
   range: Record<string, { format: string; gte: string; lte: string }>
 }
-export type FilterQuery = Array<QueryString | QueryRange>
+export type QueryGeoShape = {
+  geo_shape: {
+    geom: {
+      shape: { type: string; coordinates: number[][] }
+      relation: string
+    }
+  }
+}
+export type FilterQuery = Array<QueryString | QueryRange | QueryGeoShape>

package/src/libs/common/domain/src/lib/model/search/sort-by.model.ts

@@ -6,9 +6,5 @@ export const SortByEnum: Record<string, SortByField> = {
   RELEVANCY: ['desc', '_score'],
   QUALITY_SCORE: ['desc', 'qualityScore'],
   CHANGE_DATE: ['desc', 'changeDate'],
-  RESOURCE_DATES: [
-    ['desc', 'revisionDateForResource'],
-    ['desc', 'publicationDateForResource'],
-    ['desc', 'creationDateForResource'],
-  ],
+  RESOURCE_DATE: ['desc', 'resourceDate.date'],
 }

package/src/libs/common/domain/src/lib/repository/records-repository.interface.ts

@@ -10,6 +10,7 @@ import {
   CatalogRecord,
   DatasetFeatureCatalog,
   LanguageCode,
+  LinkedRecord,
 } from '../model/record'
 
 export abstract class RecordsRepositoryInterface {
@@ -23,8 +24,7 @@ export abstract class RecordsRepositoryInterface {
   abstract getSimilarRecords(
     similarTo: CatalogRecord
   ): Observable<CatalogRecord[]>
-  abstract getSources(record: CatalogRecord): Observable<CatalogRecord[]>
-  abstract getSourceOf(record: CatalogRecord): Observable<CatalogRecord[]>
+  abstract getLinkedRecords(record: CatalogRecord): Observable<LinkedRecord[]>
   abstract fuzzySearch(query: string): Observable<SearchResults>
   abstract canDuplicate(record: CatalogRecord): boolean
   abstract canDelete(record: CatalogRecord): Observable<boolean>

package/src/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts

@@ -2,9 +2,9 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  inject,
   Input,
   Output,
-  inject,
 } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
@@ -183,7 +183,7 @@ export class ChartViewComponent {
   yChoices$ = this.properties$.pipe(
     map((properties) =>
       properties
-        .filter((prop) => prop.type === 'number' || prop.type === 'date')
+        .filter((prop) => prop.type === 'number')
         .map((prop) => ({ value: prop.name, label: prop.label || prop.name }))
     ),
     tap((choices) => {
@@ -222,6 +222,7 @@ export class ChartViewComponent {
     switchMap(([dataset, xProp, yProp, aggregation]) => {
       const fieldAgg: FieldAggregation =
         aggregation === 'count' ? ['count'] : [aggregation, yProp]
+      this.loading = true
       return dataset
         .groupBy(['distinct', xProp])
         .aggregate(fieldAgg)

package/src/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts

@@ -2,11 +2,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  inject,
   Input,
   OnDestroy,
   OnInit,
   ViewChild,
-  inject,
 } from '@angular/core'
 import {
   DataTableComponent,
@@ -75,6 +75,7 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
   }
 
   private async initMapContext(): Promise<MapContext> {
+    this.dataset.load()
     this.dataset.selectAll()
     return {
       layers: [

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

@@ -1,15 +1,15 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
+  GetCollectionItemsOptions,
   OgcApiCollectionInfo,
   OgcApiEndpoint,
   OgcApiRecord,
-  WfsEndpoint,
-  WfsVersion,
-  TmsEndpoint,
   StacEndpoint,
-  GetCollectionItemsOptions,
   StacItemsDocument,
+  TmsEndpoint,
+  WfsEndpoint,
+  WfsVersion,
 } from '@camptocamp/ogc-client'
 import {
   BaseReader,
@@ -26,7 +26,7 @@ import {
 } from '../../../../../../libs/util/shared/src'
 import type { FeatureCollection } from 'geojson'
 import { from, Observable, throwError } from 'rxjs'
-import { catchError, map, switchMap, tap } from 'rxjs/operators'
+import { catchError, map, switchMap } from 'rxjs/operators'
 import {
   DatasetOnlineResource,
   DatasetServiceDistribution,
@@ -347,14 +347,11 @@ export class DataService {
     if (link.type === 'service' && link.accessServiceProtocol === 'wfs') {
       const wfsUrlEndpoint = this.proxy.getProxiedUrl(link.url.toString())
       return from(
-        openDataset(
-          wfsUrlEndpoint,
-          'wfs',
-          {
-            wfsFeatureType: link.name,
-          },
-          cacheActive
-        )
+        openDataset(wfsUrlEndpoint, {
+          typeHint: 'wfs',
+          wfsFeatureType: link.name,
+          enableCache: cacheActive,
+        })
       )
     } else if (link.type === 'download') {
       const linkProxifiedUrl = this.proxy.getProxiedUrl(link.url.toString())
@@ -364,7 +361,10 @@ export class DataService {
           ? (format as SupportedType)
           : undefined
       return from(
-        openDataset(linkProxifiedUrl, supportedType, undefined, cacheActive)
+        openDataset(linkProxifiedUrl, {
+          typeHint: supportedType,
+          enableCache: cacheActive,
+        })
       ).pipe()
     } else if (
       link.type === 'service' &&
@@ -374,7 +374,9 @@ export class DataService {
         link.url.toString(),
         'geojson'
       )
-      return from(openDataset(url, 'geojson', undefined, cacheActive)).pipe()
+      return from(
+        openDataset(url, { typeHint: 'geojson', enableCache: cacheActive })
+      ).pipe()
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'ogcFeatures'
@@ -395,12 +397,10 @@ export class DataService {
           }
           const urlWithoutLimit = new URL(geojsonUrl)
           urlWithoutLimit.searchParams.delete('limit')
-          return openDataset(
-            urlWithoutLimit.toString(),
-            'geojson',
-            undefined,
-            cacheActive
-          )
+          return openDataset(urlWithoutLimit.toString(), {
+            typeHint: 'geojson',
+            enableCache: cacheActive,
+          })
         })
       )
     }

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.html

@@ -5,6 +5,7 @@
         (fileChange)="handleFileChange($event)"
         [accept]="acceptedMimeType.join(',')"
         [placeholder]="'map.addFromFile.placeholder' | translate"
+        textClass="text-gray-900 pl-2 py-2"
         class="placeholder-grey"
       ></gn-ui-drag-and-drop-file-input>
     </div>

package/src/libs/feature/notifications/src/lib/notifications.service.ts

@@ -18,10 +18,12 @@ export class NotificationsService {
     error && console.error(error)
     const id = Math.floor(Math.random() * 1000000)
     this.notifications$.next([...this.notifications$.value, { ...content, id }])
-    if (typeof timeoutMs === 'undefined') return
-    setTimeout(() => {
-      this.removeNotificationById(id)
-    }, timeoutMs)
+    if (typeof timeoutMs !== 'undefined') {
+      setTimeout(() => {
+        this.removeNotificationById(id)
+      }, timeoutMs)
+    }
+    return id
   }
 
   removeNotificationById(id: number) {

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

@@ -3,6 +3,7 @@ import { createAction, props } from '@ngrx/store'
 import {
   CatalogRecord,
   DatasetFeatureCatalog,
+  LinkedRecord,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -54,14 +55,9 @@ export const setRelated = createAction(
   props<{ related: CatalogRecord[] }>()
 )
 
-export const setSources = createAction(
-  '[Metadata view] Set sources',
-  props<{ sources: CatalogRecord[] }>()
-)
-
-export const setSourceOf = createAction(
-  '[Metadata view] Set has sources',
-  props<{ sourceOf: CatalogRecord[] }>()
+export const setLinkedRecords = createAction(
+  '[Metadata view] Set associated records',
+  props<{ linkedRecords: LinkedRecord[] }>()
 )
 
 /*

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

@@ -70,25 +70,16 @@ export class MdViewEffects {
     )
   )
 
-  loadSources$ = createEffect(() =>
+  loadLinkedRecords$ = createEffect(() =>
     this.actions$.pipe(
       ofType(MdViewActions.loadFullMetadataSuccess),
-      switchMap(({ full }) => this.recordsRepository.getSources(full)),
-      map((sources) => {
-        return MdViewActions.setSources({ sources })
+      switchMap(({ full }) => this.recordsRepository.getLinkedRecords(full)),
+      map((linkedRecords) => {
+        return MdViewActions.setLinkedRecords({ linkedRecords })
       }),
-      catchError(() => of(MdViewActions.setSources({ sources: null })))
-    )
-  )
-
-  loadSourceOf$ = createEffect(() =>
-    this.actions$.pipe(
-      ofType(MdViewActions.loadFullMetadataSuccess),
-      switchMap(({ full }) => this.recordsRepository.getSourceOf(full)),
-      map((sourceOf) => {
-        return MdViewActions.setSourceOf({ sourceOf })
-      }),
-      catchError(() => of(MdViewActions.setSourceOf({ sourceOf: null })))
+      catchError(() =>
+        of(MdViewActions.setLinkedRecords({ linkedRecords: null }))
+      )
     )
   )
 

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

@@ -74,9 +74,7 @@ export class MdViewFacade {
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))
 
-  sources$ = this.store.pipe(select(MdViewSelectors.getSources))
-
-  sourceOf$ = this.store.pipe(select(MdViewSelectors.getSourceOf))
+  linkedRecords$ = this.store.pipe(select(MdViewSelectors.getLinkedRecords))
 
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 

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

@@ -4,6 +4,7 @@ import { DatavizChartConfigModel } from '../../../../../../libs/common/domain/sr
 import {
   CatalogRecord,
   DatasetFeatureCatalog,
+  LinkedRecord,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 
@@ -14,8 +15,7 @@ export interface MetadataViewState {
   error: { notFound?: boolean; otherError?: string } | null
   metadata?: Partial<CatalogRecord>
   related?: CatalogRecord[]
-  sources?: CatalogRecord[]
-  sourceOf?: CatalogRecord[]
+  linkedRecords?: LinkedRecord[]
   userFeedbacks?: UserFeedback[]
   allUserFeedbacksLoading: boolean
   addUserFeedbackLoading: boolean
@@ -77,14 +77,9 @@ const metadataViewReducer = createReducer(
     related,
   })),
 
-  on(MetadataViewActions.setSources, (state, { sources }) => ({
+  on(MetadataViewActions.setLinkedRecords, (state, { linkedRecords }) => ({
     ...state,
-    sources,
-  })),
-
-  on(MetadataViewActions.setSourceOf, (state, { sourceOf }) => ({
-    ...state,
-    sourceOf,
+    linkedRecords,
   })),
 
   /*

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

@@ -41,14 +41,9 @@ export const getRelated = createSelector(
   (state: MetadataViewState) => state.related
 )
 
-export const getSources = createSelector(
+export const getLinkedRecords = createSelector(
   getMdViewState,
-  (state: MetadataViewState) => state.sources
-)
-
-export const getSourceOf = createSelector(
-  getMdViewState,
-  (state: MetadataViewState) => state.sourceOf
+  (state: MetadataViewState) => state.linkedRecords
 )
 /*
   Metadata selectors

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

@@ -62,6 +62,6 @@ export class RouterService {
   }
 
   getDefaultSort(): SortByField {
-    return SortByEnum.RESOURCE_DATES
+    return SortByEnum.RESOURCE_DATE
   }
 }

package/src/libs/feature/router/src/lib/default/state/query-params.utils.ts

@@ -22,7 +22,7 @@ export function flattenQueryParams(
       const start = (flattened[key] as DateRange).start
       const end = (flattened[key] as DateRange).end
       flattened[key] = [
-        `${start ? formatDate(start) : ''}..${formatDate(end) || ''}`,
+        `${start ? formatDate(start) : ''}..${end ? formatDate(end) : ''}`,
       ]
     }
   }

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

@@ -1,11 +1,16 @@
 @if (fieldType === 'dateRange') {
   <gn-ui-date-range-dropdown
     [title]="title"
-    [startDate]="(selectedDateRange$ | async)?.start"
-    [endDate]="(selectedDateRange$ | async)?.end"
-    (startDateChange)="onStartDateChange($event)"
-    (endDateChange)="onEndDateChange($event)"
+    [dateRange]="(selectedDateRange$ | async) ?? {}"
+    (dateRangeChange)="onDateRangeChange($event)"
   ></gn-ui-date-range-dropdown>
+} @else if (fieldType === 'spatialExtent') {
+  <gn-ui-spatial-extent-dropdown
+    [title]="title"
+    [maxFileSizeMb]="spatialExtentMaxFileSize"
+    (bboxChange)="onBboxChange($event)"
+    (errorChange)="onSpatialExtentError($event)"
+  ></gn-ui-spatial-extent-dropdown>
 } @else {
   <gn-ui-dropdown-multiselect
     class="w-full"