geonetwork-ui 2.10.0-dev.b6696be21 → 2.10.0-dev.c12b52b04

package/src/libs/api/metadata-converter/src/lib/gn4/types/metadata.model.ts

@@ -62,6 +62,7 @@ type ThesaurusName = string
 export interface Thesaurus {
   id?: string
   title?: string
+  multilingualTitle?: MultilingualField
   theme?: string
   link?: string
   keywords: MultilingualField[]

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

@@ -1,4 +1,4 @@
-import { Injectable, InjectionToken, inject } from '@angular/core'
+import { inject, Injectable, InjectionToken } from '@angular/core'
 import { toLang2, toLang3 } from '../../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
 import { Location } from '@angular/common'
@@ -48,8 +48,8 @@ export class AuthService {
         '${current_path}',
         this.location.prepareExternalUrl(this.location.path())
       )
-      .replace('${lang2}', toLang2(this.translateService.currentLang))
-      .replace('${lang3}', toLang3(this.translateService.currentLang))
+      .replace('${lang2}', toLang2(this.translateService.getCurrentLang()))
+      .replace('${lang3}', toLang3(this.translateService.getCurrentLang()))
   }
 
   get logoutUrl() {
@@ -59,7 +59,7 @@ export class AuthService {
   get settingsUrl() {
     return this.baseSettingsUrl.replace(
       '${lang3}',
-      toLang3(this.translateService.currentLang)
+      toLang3(this.translateService.getCurrentLang())
     )
   }
 }

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

@@ -1,4 +1,4 @@
-import { Injectable, Injector, inject } from '@angular/core'
+import { inject, Injectable, Injector } from '@angular/core'
 import type { Geometry } from 'geojson'
 import {
   ES_QUERY_FIELDS_PRIORITY,
@@ -234,7 +234,7 @@ export class ElasticsearchService {
     if (this.metadataLang) {
       const lang3 = toLang3(
         this.isCurrentSearchLang()
-          ? this.translateService.currentLang
+          ? this.translateService.getCurrentLang()
           : this.metadataLang
       )
       return `lang${lang3}`

package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-groups.service.ts

@@ -52,7 +52,7 @@ export class OrganizationsFromGroupsService
   organisationsCount$ = this.organisations$.pipe(map((orgs) => orgs.length))
 
   private get lang3() {
-    return toLang3(this.translateService.currentLang)
+    return toLang3(this.translateService.getCurrentLang())
   }
 
   constructor(

package/src/libs/api/repository/src/lib/gn4/organizations/organizations-from-metadata.service.ts

@@ -128,7 +128,7 @@ export class OrganizationsFromMetadataService
   ) {}
 
   private get langIndex() {
-    return `lang${toLang3(this.translateService.currentLang)}`
+    return `lang${toLang3(this.translateService.getCurrentLang())}`
   }
 
   equalsNormalizedStrings(

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

@@ -1,5 +1,5 @@
 import { HttpClient, HttpEventType } from '@angular/common/http'
-import { Injectable, InjectionToken, inject } from '@angular/core'
+import { inject, Injectable, InjectionToken } from '@angular/core'
 import {
   KeywordApiResponse,
   ThesaurusApiResponse,
@@ -100,7 +100,7 @@ export class Gn4PlatformService implements PlatformServiceInterface {
   private keywordsByThesauri: Record<string, Observable<Keyword[]>> = {}
 
   private get lang3() {
-    return toLang3(this.translateService.currentLang)
+    return toLang3(this.translateService.getCurrentLang())
   }
 
   constructor() {

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

@@ -104,6 +104,8 @@ export interface Keyword {
   type: KeywordType
   thesaurus?: ThesaurusModel
   bbox?: [number, number, number, number]
+  // thesaurus hierarchy path incl. the keyword as last element; unset for root-level keywords
+  hierarchyPath?: string[]
 
   translations?: KeywordTranslations
 }

package/src/libs/common/domain/src/lib/model/thesaurus/thesaurus.model.ts

@@ -1,7 +1,8 @@
 export type KeywordType = 'place' | 'temporal' | 'theme' | 'other'
 
 export interface ThesaurusModel {
-  id: string
+  // absent when the source provides no identifier for the thesaurus
+  id?: string
   name?: string
   url?: URL
   thesaurusKey?: string

package/src/libs/feature/catalog/src/lib/sources/sources.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { SourcesApiService } from '../../../../../../libs/data-access/gn4/src'
 import { Observable } from 'rxjs'
 import { filter, map, shareReplay } from 'rxjs/operators'
@@ -21,7 +21,10 @@ export class SourcesService {
     return this.sources$.pipe(
       map((sources) => sources.filter((source) => source.uuid === uuid)[0]),
       filter((source) => !!source),
-      map((source) => source.label[toLang3(this.translateService.currentLang)])
+      map(
+        (source) =>
+          source.label[toLang3(this.translateService.getCurrentLang())]
+      )
     )
   }
 }

package/src/libs/feature/editor/src/lib/components/constraint-card/constraint-card.component.ts

@@ -8,7 +8,6 @@ import {
 
 import { FormFieldRichComponent } from '../record-form/form-field/form-field-rich/form-field-rich.component'
 import { ButtonComponent, UrlInputComponent } from '../../../../../../../libs/ui/inputs/src'
-import { MatIconModule } from '@angular/material/icon'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { Constraint } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import {
@@ -26,7 +25,6 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
     FormFieldRichComponent,
     UrlInputComponent,
     ButtonComponent,
-    MatIconModule,
     TranslateDirective,
     TranslatePipe,
     NgIconComponent,

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.html

@@ -3,13 +3,13 @@
     editor.record.form.field.onlineResource.edit.protocol
   </h3>
   @if (protocolHint) {
-    <span
-      class="material-symbols-outlined m-2 gn-ui-icon-small"
+    <ng-icon
+      name="matHelpOutline"
+      size="16"
+      class="m-2"
       [matTooltip]="protocolHint"
       matTooltipPosition="above"
-    >
-      help
-    </span>
+    ></ng-icon>
   }
 </div>
 <div class="flex flex-row items-center gap-4 h-[48px]">

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -30,6 +30,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirRefresh } from '@ng-icons/iconoir'
+import { matHelpOutline } from '@ng-icons/material-icons/outline'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BehaviorSubject,
@@ -65,7 +66,7 @@ marker(
     UrlInputComponent,
   ],
   providers: [
-    provideIcons({ iconoirRefresh }),
+    provideIcons({ iconoirRefresh, matHelpOutline }),
     provideNgIconsConfig({
       size: '1.5em',
     }),

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

@@ -10,7 +10,7 @@ export class FieldFocusDirective {
 
   private el = inject(ElementRef)
 
-  public focusField() {
+  public focusField(focusInnerTarget = true) {
     setTimeout(() => {
       const host = this.el.nativeElement as HTMLElement
       const glowClass = this.gnUiFieldFocusGlowClass
@@ -25,6 +25,9 @@ export class FieldFocusDirective {
       )
 
       host.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      if (!focusInnerTarget) {
+        return
+      }
       const target =
         host.querySelector<HTMLElement>(
           'input, textarea, select, [contenteditable="true"]'

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

@@ -131,13 +131,12 @@ export class FormFieldConstraintsShortcutsComponent implements OnDestroy {
           map((c) => c.length > 0),
           distinctUntilChanged()
         )
-        combineLatest([
-          isConstraintNotEmpty$,
-          this.anyToggleActivated$,
-        ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
-          const visible = isNotEmpty && !anyToggleActivated
-          this.editorFacade.setFieldVisibility({ model }, visible)
-        })
+        combineLatest([isConstraintNotEmpty$, this.anyToggleActivated$])
+          .pipe(takeUntil(this.onDestroy$))
+          .subscribe(([isNotEmpty, anyToggleActivated]) => {
+            const visible = isNotEmpty && !anyToggleActivated
+            this.editorFacade.setFieldVisibility({ model }, visible)
+          })
       }
       hideEmptyConstraints(this.securityConstraints$, 'securityConstraints')
       hideEmptyConstraints(this.otherConstraints$, 'otherConstraints')

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

@@ -9,11 +9,11 @@
     "
     (buttonClick)="togglePreview()"
   >
-    <span
-      class="material-symbols-outlined gn-ui-icon-small"
+    <ng-icon
+      [name]="preview ? 'matVisibilityOffOutline' : 'matVisibilityOutline'"
+      size="16"
       [ngClass]="{ 'text-primary': !preview }"
-      >{{ preview ? 'visibility_off' : 'visibility' }}</span
-    >
+    ></ng-icon>
     &nbsp;
     {{ preview ? 'Edit' : 'Preview' }}
   </gn-ui-button>

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

@@ -10,6 +10,11 @@ import { ReactiveFormsModule } from '@angular/forms'
 import { MarkdownEditorComponent } from '../../../../../../../../../libs/ui/elements/src'
 import { ButtonComponent } from '../../../../../../../../../libs/ui/inputs/src'
 import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/layout/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matVisibilityOffOutline,
+  matVisibilityOutline,
+} from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-form-field-rich',
@@ -23,7 +28,9 @@ import { FormFieldWrapperComponent } from '../../../../../../../../../libs/ui/la
     MarkdownEditorComponent,
     FormFieldWrapperComponent,
     ButtonComponent,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matVisibilityOutline, matVisibilityOffOutline })],
 })
 export class FormFieldRichComponent {
   @Input() label: string

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

@@ -1,37 +1,3 @@
 :host {
   scroll-margin-top: 90px;
 }
-
-:host.gn-ui-field-focus-glow {
-  position: relative;
-}
-
-:host.gn-ui-field-focus-glow::after {
-  content: '';
-  position: absolute;
-  inset: -8px;
-  border-radius: 8px;
-  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  pointer-events: none;
-  animation: gn-ui-field-focus-glow 3s ease-out forwards;
-}
-
-:host.gn-ui-field-focus-glow::before {
-  content: '';
-  position: absolute;
-  inset: -16px;
-  border: 2px dashed var(--color-primary);
-  border-radius: 10px;
-  pointer-events: none;
-  animation: gn-ui-field-focus-glow 3s ease-out forwards;
-}
-
-@keyframes gn-ui-field-focus-glow {
-  0%,
-  55% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}

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

@@ -38,19 +38,20 @@
           "
         ></textarea>
         <div class="flex flex-row justify-between self-start mt-0.5">
-          <span
-            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+          <ng-icon
+            name="matEditOutline"
+            size="16"
+            class="m-2 cursor-pointer"
             (click)="focusTitleInput()"
-            >edit</span
-          >
-          <span
+          ></ng-icon>
+          <ng-icon
             *ngIf="config.hintKey"
-            class="material-symbols-outlined gn-ui-icon-small m-2"
+            name="matHelpOutline"
+            size="16"
+            class="m-2"
             [matTooltip]="config.hintKey! | translate"
             matTooltipPosition="above"
-          >
-            help
-          </span>
+          ></ng-icon>
         </div>
       </div>
     </ng-container>

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

@@ -21,6 +21,11 @@ import {
   UpdateFrequency,
 } from '../../../../../../../../libs/common/domain/src/lib/model/record'
 import { FormFieldWrapperComponent } from '../../../../../../../../libs/ui/layout/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  matEditOutline,
+  matHelpOutline,
+} from '@ng-icons/material-icons/outline'
 import { TranslatePipe } from '@ngx-translate/core'
 import {
   FieldFocusDirective,
@@ -78,7 +83,9 @@ import { FormFieldTopicsComponent } from './form-field-topics/form-field-topics.
     FormFieldSpatialToggleComponent,
     FormFieldTopicsComponent,
     TextFieldModule,
+    NgIconComponent,
   ],
+  providers: [provideIcons({ matEditOutline, matHelpOutline })],
   hostDirectives: [FieldFocusDirective],
 })
 export class FormFieldComponent {

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

@@ -0,0 +1,35 @@
+/* Glow applied by FieldFocusDirective (gnUiFieldFocus) to a focused field or,
+   when the field is hidden, to its whole section. */
+.gn-ui-field-focus-glow {
+  position: relative;
+}
+
+.gn-ui-field-focus-glow::after {
+  content: '';
+  position: absolute;
+  inset: -8px;
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+.gn-ui-field-focus-glow::before {
+  content: '';
+  position: absolute;
+  inset: -16px;
+  border: 2px dashed var(--color-primary);
+  border-radius: 10px;
+  pointer-events: none;
+  animation: gn-ui-field-focus-glow 3s ease-out forwards;
+}
+
+@keyframes gn-ui-field-focus-glow {
+  0%,
+  55% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

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

@@ -4,7 +4,11 @@
     track sectionTracker($index, section)
   ) {
     @if (!section.hidden) {
-      <div class="flex flex-col gap-6 border p-8 rounded-[8px] shadow">
+      <div
+        class="flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px]"
+        gnUiFieldFocus
+        #sectionFocus="fieldFocus"
+      >
         <div class="flex flex-col gap-2">
           @if (section.labelKey) {
             <div class="text-2xl font-title text-black" translate>

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

@@ -9,7 +9,7 @@ import {
 } from '@angular/core'
 import { EditorFacade } from '../../+state/editor.facade'
 import { EditorFieldValue } from '../../models'
-import { FormFieldComponent } from './form-field'
+import { FieldFocusDirective, FormFieldComponent } from './form-field'
 import { TranslateDirective } from '@ngx-translate/core'
 import {
   EditorFieldWithValue,
@@ -25,7 +25,12 @@ import { switchMap } from 'rxjs/operators'
   styleUrls: ['./record-form.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, FormFieldComponent, TranslateDirective],
+  imports: [
+    CommonModule,
+    FormFieldComponent,
+    FieldFocusDirective,
+    TranslateDirective,
+  ],
 })
 export class RecordFormComponent implements OnInit, OnDestroy {
   facade = inject(EditorFacade)
@@ -36,17 +41,22 @@ export class RecordFormComponent implements OnInit, OnDestroy {
   )
 
   focusFieldWithPage$ = this.facade.focusedField$.pipe(
-    switchMap(
-      async (field) => [field, await this.getPageIndexForField(field)] as const
-    )
+    switchMap(async (field) => {
+      const location = await this.getFieldLocation(field)
+      return [field, location?.page ?? null, location?.section ?? -1] as const
+    })
   )
 
   formFields = viewChildren(FormFieldComponent)
+  sectionFocusDirectives = viewChildren<FieldFocusDirective>('sectionFocus')
 
-  focusField(model: CatalogRecordKeys) {
-    const fields = this.formFields()
-    const field = fields.find((f) => f.model === model)
-    field?.fieldFocus.focusField()
+  focusField(model: CatalogRecordKeys, sectionIndex: number) {
+    const field = this.formFields().find((f) => f.model === model)
+    if (field) {
+      field.fieldFocus.focusField()
+      return
+    }
+    this.sectionFocusDirectives()[sectionIndex]?.focusField(false)
   }
 
   ngOnInit() {
@@ -55,15 +65,15 @@ export class RecordFormComponent implements OnInit, OnDestroy {
         .pipe(
           withLatestFrom(
             this.facade.currentPage$,
-            ([field, fieldPage], currentPage) =>
-              [field, fieldPage, currentPage] as const
+            ([field, fieldPage, fieldSection], currentPage) =>
+              [field, fieldPage, fieldSection, currentPage] as const
           )
         )
-        .subscribe(([field, fieldPage, currentPage]) => {
+        .subscribe(([field, fieldPage, fieldSection, currentPage]) => {
           if (fieldPage !== null && fieldPage !== currentPage) {
             this.facade.setCurrentPage(fieldPage)
           }
-          setTimeout(() => this.focusField(field))
+          setTimeout(() => this.focusField(field, fieldSection))
         })
     )
   }
@@ -87,13 +97,19 @@ export class RecordFormComponent implements OnInit, OnDestroy {
     return section.labelKey
   }
 
-  async getPageIndexForField(model: CatalogRecordKeys): Promise<number | null> {
+  async getFieldLocation(
+    model: CatalogRecordKeys
+  ): Promise<{ page: number; section: number } | null> {
     const config = await firstValueFrom(this.facade.editorConfig$)
-    const pageIndex = config.pages.findIndex((page) =>
-      page.sections.some((section) =>
-        section.fields.some((field) => field.model === model)
-      )
+    const page = config.pages.findIndex((p) =>
+      p.sections.some((s) => s.fields.some((f) => f.model === model))
     )
-    return pageIndex >= 0 ? pageIndex : null
+    if (page < 0) {
+      return null
+    }
+    const section = config.pages[page].sections
+      .filter((s) => !s.hidden)
+      .findIndex((s) => s.fields.some((f) => f.model === model))
+    return { page, section }
   }
 }

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -2,6 +2,23 @@ import { Injectable } from '@angular/core'
 import { extend } from 'ol/extent.js'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { BoundingBox, getGeometryBoundingBox } from '../../../../../../libs/util/shared/src'
+import { MapContextLayer } from '@geospatial-sdk/core'
+import {
+  createSpatialExtentLayer,
+  SpatialExtentLayerStyle,
+} from '../../../../../../libs/ui/map/src'
+
+/**
+ * Style of the extent overlay drawn on top of the previewed data: a dashed
+ * black outline over a very light fill, so the extent stays readable without
+ * hiding the data underneath.
+ */
+const RECORD_EXTENT_OVERLAY_STYLE: SpatialExtentLayerStyle = {
+  'stroke-color': 'rgba(0, 0, 0, 0.6)',
+  'stroke-width': 2,
+  'stroke-line-dash': [8, 6],
+  'fill-color': 'rgba(0, 0, 0, 0.03)',
+}
 
 @Injectable({
   providedIn: 'root',
@@ -26,4 +43,20 @@ export class MapUtilsService {
       [Infinity, Infinity, -Infinity, -Infinity]
     )
   }
+
+  /**
+   * Builds a non-interactive overlay layer drawing the spatial extent(s)
+   * declared in the record's metadata (bounding boxes and/or geometries).
+   * Returns null when the record has no usable spatial extent.
+   *
+   * This is purely for display and is independent from the map's initial view,
+   * which is derived separately (see {@link getRecordExtent}).
+   */
+  getRecordExtentLayer(record: Partial<CatalogRecord>): MapContextLayer | null {
+    return createSpatialExtentLayer(record.spatialExtents ?? [], {
+      label: 'Spatial extent',
+      clickable: false,
+      style: RECORD_EXTENT_OVERLAY_STYLE,
+    })
+  }
 }

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

@@ -431,11 +431,19 @@ export class MapViewComponent implements AfterViewInit {
     }),
     withLatestFrom(this.mdViewFacade.metadata$),
     map(([context, metadata]) => {
-      if (context.view) return context
+      // overlay the record's declared spatial extent on top of the data layers
+      const extentLayer = this.mapUtils.getRecordExtentLayer(metadata)
+      const layers = extentLayer
+        ? [...context.layers, extentLayer]
+        : context.layers
+      // the view (initial zoom) is derived from the data layer or, as a
+      // fallback, from the record extent — independently from the overlay above
+      if (context.view) return { ...context, layers }
       const extent = this.mapUtils.getRecordExtent(metadata)
       const view = extent ? { extent } : null
       return {
         ...context,
+        layers,
         view,
       }
     }),

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts

@@ -1,4 +1,4 @@
-import { Component, InjectionToken, inject } from '@angular/core'
+import { Component, inject, InjectionToken } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
@@ -26,7 +26,7 @@ export class LanguageSwitcherComponent {
   )
 
   get currentLang() {
-    return this.translate.currentLang
+    return this.translate.getCurrentLang()
   }
 
   changeLanguage(value: unknown) {

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

@@ -1,4 +1,3 @@
 export * from './lib/chart/chart.component'
 export * from './lib/data-table/data-table.component'
-export * from './lib/data-table/data-table.fixtures'
 export * from './lib/figure/figure.component'