geonetwork-ui 2.11.0-dev.8442dae6e → 2.11.0-dev.9ba9c4d3d

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import {
+  AssociatedRecord,
   CatalogRecordKeys,
   Constraint,
   DatasetTemporalExtent,
@@ -39,6 +40,7 @@ import {
   FormFieldComponentName,
   FormFieldConfig,
 } from '../../../models'
+import { FormFieldAssociatedRecordsComponent } from './form-field-associated-records/form-field-associated-records.component'
 import { FormFieldContactsForResourceComponent } from './form-field-contacts-for-resource/form-field-contacts-for-resource.component'
 import { FormFieldContactsComponent } from './form-field-contacts/form-field-contacts.component'
 import { FormFieldKeywordsComponent } from './form-field-keywords/form-field-keywords.component'
@@ -70,6 +72,7 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldLicenseComponent,
     FormFieldDateComponent,
     FormFieldUpdateFrequencyComponent,
+    FormFieldAssociatedRecordsComponent,
     FormFieldTemporalExtentsComponent,
     FormFieldSimpleComponent,
     FormFieldRichComponent,
@@ -140,6 +143,9 @@ export class FormFieldComponent {
   get valueAsUpdateFrequency() {
     return this.value as UpdateFrequency
   }
+  get valueAsAssociatedRecords() {
+    return this.value as Array<AssociatedRecord>
+  }
   get valueAsTemporalExtents() {
     return this.value as Array<DatasetTemporalExtent>
   }

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -134,6 +134,11 @@ export const DEFAULT_CONFIGURATION: EditorConfig = {
               },
               hidden: '${record.kind == "service"}',
             },
+            {
+              model: 'associatedRecords',
+              formFieldConfig: {},
+              hidden: '${record.kind == "service"}',
+            },
           ],
         },
 

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"

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

@@ -9,6 +9,8 @@ import {
   Choice,
   DateRangeDropdownComponent,
   DropdownMultiselectComponent,
+  SpatialExtentDropdownComponent,
+  SpatialExtentDropdownError,
 } from '../../../../../../libs/ui/inputs/src'
 import { Observable, of, switchMap } from 'rxjs'
 import { catchError, filter, map, startWith } from 'rxjs/operators'
@@ -22,6 +24,10 @@ import {
 } from '../utils/service/fields'
 import { DateRange } from '../../../../../../libs/api/repository/src'
 import { CommonModule } from '@angular/common'
+import { BoundingBox } from '../../../../../../libs/util/shared/src'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
+import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -33,18 +39,23 @@ import { CommonModule } from '@angular/common'
     CommonModule,
     DateRangeDropdownComponent,
     DropdownMultiselectComponent,
+    SpatialExtentDropdownComponent,
   ],
 })
 export class FilterDropdownComponent implements OnInit {
   private searchFacade = inject(SearchFacade)
   private searchService = inject(SearchService)
   private fieldsService = inject(FieldsService)
+  private notificationsService = inject(NotificationsService)
+  private translateService = inject(TranslateService)
 
   @Input() fieldName: string
   @Input() title: string
 
+  spatialExtentMaxFileSize =
+    getOptionalSearchConfig()?.SPATIAL_EXTENT_MAX_FILE_SIZE
+
   fieldType: FieldType
-  dateRange: DateRange
   choices$: Observable<Choice[]>
   selected$ = this.searchFacade.searchFilters$.pipe(
     switchMap((filters) =>
@@ -57,7 +68,7 @@ export class FilterDropdownComponent implements OnInit {
   ) as Observable<FieldValue[]>
 
   selectedDateRange$ = this.selected$.pipe(
-    map((selectedDateRange) => selectedDateRange as DateRange)
+    map((selected) => (Array.isArray(selected) ? {} : (selected as DateRange)))
   ) as Observable<DateRange>
 
   onSelectedValues(values: unknown[]) {
@@ -66,6 +77,33 @@ export class FilterDropdownComponent implements OnInit {
       .subscribe((filters) => this.searchService.updateFilters(filters))
   }
 
+  private spatialExtentErrorNotificationId: number | null = null
+
+  onBboxChange(bbox: BoundingBox | null) {
+    console.log(bbox)
+    this.clearSpatialExtentErrorNotification()
+  }
+
+  onSpatialExtentError(error: SpatialExtentDropdownError) {
+    this.clearSpatialExtentErrorNotification()
+    this.spatialExtentErrorNotificationId =
+      this.notificationsService.showNotification({
+        type: 'error',
+        title: this.translateService.instant(
+          'search.filters.spatialExtent.error.title'
+        ),
+        text: this.translateService.instant(error.key, error.params),
+      })
+  }
+
+  private clearSpatialExtentErrorNotification() {
+    if (this.spatialExtentErrorNotificationId === null) return
+    this.notificationsService.removeNotificationById(
+      this.spatialExtentErrorNotificationId
+    )
+    this.spatialExtentErrorNotificationId = null
+  }
+
   ngOnInit() {
     this.fieldType = this.fieldsService.getFieldType(this.fieldName)
     this.choices$ = this.fieldsService.getAvailableValues(this.fieldName).pipe(
@@ -80,22 +118,11 @@ export class FilterDropdownComponent implements OnInit {
     )
   }
 
-  onStartDateChange(start: Date) {
-    if (!start) return
-    this.dateRange = { ...this.dateRange, start }
-  }
-
-  onEndDateChange(end: Date) {
-    if (!end) return
-    this.dateRange = { ...this.dateRange, end }
-    if (this.dateRange.start && this.dateRange.end) {
-      this.fieldsService
-        .buildFiltersFromFieldValues({
-          [this.fieldName]: this.dateRange,
-        })
-        .subscribe((filters) => {
-          return this.searchService.updateFilters(filters)
-        })
-    }
+  onDateRangeChange(dateRange: DateRange) {
+    this.fieldsService
+      .buildFiltersFromFieldValues({
+        [this.fieldName]: dateRange,
+      })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
   }
 }

package/src/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, inject } from '@angular/core'
-import { CommonModule, DatePipe } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import {
   catchError,
   firstValueFrom,
@@ -15,12 +15,14 @@ import { FieldType, FieldValue } from '../utils/service/fields'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { FieldsService } from '../utils/service/fields.service'
-import { formatUserInfo } from '../../../../../../libs/util/shared/src'
+import { DateService, formatUserInfo } from '../../../../../../libs/util/shared/src'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 marker('search.filters.summaryLabel.user')
 marker('search.filters.summaryLabel.changeDate')
 
+const OPEN_BOUND = '…'
+
 interface DisplayedValue {
   label: string
   value: FieldValue | DateRange
@@ -32,13 +34,12 @@ interface DisplayedValue {
   imports: [CommonModule, BadgeComponent],
   templateUrl: './search-filters-summary-item.component.html',
   styleUrls: ['./search-filters-summary-item.component.css'],
-  providers: [DatePipe],
 })
 export class SearchFiltersSummaryItemComponent implements OnInit {
   private searchFacade = inject(SearchFacade)
   private searchService = inject(SearchService)
   private fieldsService = inject(FieldsService)
-  private datePipe = inject(DatePipe)
+  private dateService = inject(DateService)
   private translate = inject(TranslateService)
 
   @Input() fieldName: string
@@ -82,12 +83,10 @@ export class SearchFiltersSummaryItemComponent implements OnInit {
   getReadableValues(fieldValues: FieldValue[] | DateRange[]): DisplayedValue[] {
     return fieldValues.map((value) => {
       if (this.fieldType === 'dateRange') {
+        const { start, end } = value as DateRange
         return {
           value,
-          label: `${this.datePipe.transform(
-            value.start,
-            'dd.MM.yyyy'
-          )} - ${this.datePipe.transform(value.end, 'dd.MM.yyyy')}`,
+          label: `${this.formatBound(start)} - ${this.formatBound(end)}`,
         }
       } else if (this.fieldName === 'user') {
         return { value, label: formatUserInfo(value) }
@@ -97,6 +96,16 @@ export class SearchFiltersSummaryItemComponent implements OnInit {
     })
   }
 
+  private formatBound(date: Date | undefined): string {
+    return date
+      ? this.dateService.formatDate(date, {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+        })
+      : OPEN_BOUND
+  }
+
   async removeFilterValue(fieldValue: FieldValue | DateRange) {
     const currentFieldValues: DisplayedValue[] = await firstValueFrom(
       this.fieldValues$

package/src/libs/feature/search/src/lib/sort-by/sort-by.component.ts

@@ -34,7 +34,7 @@ export class SortByComponent implements OnInit {
     },
     {
       label: marker('results.sortBy.dateStamp'),
-      value: SortByEnum.RESOURCE_DATES,
+      value: SortByEnum.RESOURCE_DATE,
     },
     {
       label: marker('results.sortBy.popularity'),

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

@@ -2,6 +2,7 @@ import { Injectable, Injector, inject } from '@angular/core'
 import {
   AbstractSearchField,
   AvailableServicesField,
+  BoundingBoxSearchField,
   DateRangeSearchField,
   FieldValue,
   FullTextSearchField,
@@ -42,7 +43,7 @@ marker('search.filters.producerOrg')
 marker('search.filters.publisherOrg')
 marker('search.filters.user')
 marker('search.filters.changeDate')
-
+marker('search.filters.spatialExtent')
 @Injectable({
   providedIn: 'root',
 })
@@ -95,6 +96,7 @@ export class FieldsService {
     user: new UserSearchField(this.injector),
     changeDate: new DateRangeSearchField('changeDate', this.injector, 'desc'),
     availableServices: new AvailableServicesField(this.injector),
+    spatialExtent: new BoundingBoxSearchField('spatialExtent', this.injector),
   } as Record<string, AbstractSearchField>
 
   get supportedFields() {

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

@@ -20,10 +20,14 @@ import {
   isDateRange,
   METADATA_LANGUAGE,
 } from '../../../../../../../libs/api/repository/src'
-import { formatUserInfo } from '../../../../../../../libs/util/shared/src'
+import {
+  BoundingBox,
+  formatUserInfo,
+  isBoundingBox,
+} from '../../../../../../../libs/util/shared/src'
 import { PossibleResourceTypes } from '../../../../../../../libs/api/metadata-converter/src'
 
-export type FieldType = 'values' | 'dateRange'
+export type FieldType = 'values' | 'dateRange' | 'spatialExtent'
 
 export type FieldValue = string | number
 export interface FieldAvailableValue {
@@ -431,6 +435,27 @@ export class DateRangeSearchField extends SimpleSearchField {
   }
 }
 
+export class BoundingBoxSearchField extends SimpleSearchField {
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    return of([])
+  }
+
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+    return of({
+      [this.esFieldName]: values.map(Number) as BoundingBox,
+    })
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const filter = filters[this.esFieldName]
+    return of(isBoundingBox(filter) ? filter : [])
+  }
+
+  getType(): FieldType {
+    return 'spatialExtent'
+  }
+}
+
 marker('search.filters.availableServices.view')
 marker('search.filters.availableServices.download')
 

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.html

@@ -6,33 +6,32 @@
       matSort
       (matSortChange)="setSort($event)"
       [matSortDisableClear]="true"
-      *ngrxLet="properties$ as properties"
     >
-      @for (attr of _featureAttributes; track attr) {
-        <ng-container [matColumnDef]="attr.value">
+      @for (column of columns; track column) {
+        <ng-container [matColumnDef]="column.name">
           <th
             mat-header-cell
             *matHeaderCellDef
             mat-sort-header
             class="text-sm text-black bg-white"
           >
-            {{ attr.label }}
+            {{ column.label }}
           </th>
           <td
             mat-cell
             *matCellDef="let element"
             class="whitespace-nowrap pr-1 truncate"
           >
-            {{ element[attr.value] }}
+            {{ element[column.name] }}
           </td>
         </ng-container>
       }
 
-      <tr mat-header-row *matHeaderRowDef="properties; sticky: true"></tr>
+      <tr mat-header-row *matHeaderRowDef="columnNames; sticky: true"></tr>
       <tr
         [id]="getRowEltId(row.id)"
         mat-row
-        *matRowDef="let row; columns: properties"
+        *matRowDef="let row; columns: columnNames"
         (click)="selected.emit(row)"
         [class.active]="
           activeId !== undefined && activeId !== null && row.id === activeId

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -6,14 +6,14 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   OnInit,
   Output,
   ViewChild,
-  inject,
 } from '@angular/core'
-import { MatSort, MatSortModule } from '@angular/material/sort'
+import { MatSort, MatSortModule, Sort } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
 import {
   TranslateDirective,
@@ -29,12 +29,11 @@ import {
 } from '@angular/material/paginator'
 import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
 import { CommonModule } from '@angular/common'
-import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
+import { BehaviorSubject } from 'rxjs'
 import {
   LoadingMaskComponent,
   PopupAlertComponent,
 } from '../../../../../../libs/ui/widgets/src'
-import { LetDirective } from '@ngrx/component'
 
 const rowIdPrefix = 'table-item-'
 
@@ -46,6 +45,11 @@ export interface TableItemModel {
   [key: string]: TableItemType
 }
 
+interface TableColumn {
+  name: string
+  label: string
+}
+
 @Component({
   standalone: true,
   imports: [
@@ -56,7 +60,6 @@ export interface TableItemModel {
     CommonModule,
     LoadingMaskComponent,
     PopupAlertComponent,
-    LetDirective,
     TranslatePipe,
     TranslateDirective,
   ],
@@ -71,15 +74,21 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   private cdr = inject(ChangeDetectorRef)
   private translateService = inject(TranslateService)
 
-  _featureAttributes = []
+  columnsFromFeatureCatalog: TableColumn[] = null
   @Input() set featureAttributes(value: { value: string; label: string }[]) {
-    this._featureAttributes = value
-    this.properties$.next(value.map((attr) => attr.value))
+    this.columnsFromFeatureCatalog = value.map((attrs) => ({
+      name: attrs.value,
+      label: attrs.label,
+    }))
   }
+  columnsFromDataset: TableColumn[] = []
   @Input() set dataset(value: BaseReader) {
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.info.then((info) => (this.count = info.itemsCount))
+    this.dataset_.info.then((info) => {
+      this.count = info.itemsCount
+      this.cdr.detectChanges()
+    })
   }
   @Input() activeId: TableItemId
   @Output() selected = new EventEmitter<any>()
@@ -88,13 +97,19 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   @ViewChild(MatPaginator) paginator: MatPaginator
 
   dataset_: BaseReader
-  properties$ = new BehaviorSubject<string[]>(null)
   dataSource: DataTableDataSource
   headerHeight: number
   count: number
   loading$ = new BehaviorSubject<boolean>(false)
   error = null
 
+  get columns() {
+    return this.columnsFromFeatureCatalog ?? this.columnsFromDataset
+  }
+  get columnNames() {
+    return this.columns.map((c) => c.name)
+  }
+
   ngOnInit() {
     this.dataSource = new DataTableDataSource()
   }
@@ -110,7 +125,7 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
     this.setPagination()
   }
 
-  setSort(sort: MatSort) {
+  setSort(sort: Sort) {
     if (!this.dataset_) return
     if (!sort.active) {
       this.dataset_.orderBy()
@@ -132,15 +147,12 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
 
   async readData() {
     this.loading$.next(true)
-    // wait for properties to be read
-    const properties = await firstValueFrom(
-      this.properties$.pipe(filter((p) => !!p))
-    )
-    const propsWithoutGeom = properties.filter(
-      (p) => !p.toLowerCase().startsWith('geom')
-    )
-    this.dataset_.select(...propsWithoutGeom)
     try {
+      // wait for properties to be read
+      if (!this.columnsFromFeatureCatalog) {
+        this.columnsFromDataset = await this.dataset_.properties
+      }
+      this.dataset_.select(...this.columnNames)
       await this.dataSource.showData(this.dataset_.read())
       this.error = null
     } catch (error) {