geonetwork-ui 2.10.0-dev.e97ea6950 → 2.10.0-dev.f1c00d5fe

package/src/libs/feature/editor/src/lib/models/editor-config.model.ts

@@ -19,9 +19,17 @@ export interface FormFieldConfig {
 // This is used for instance to target only certain online resources in a field
 type OnlineLinkResourceSpecifier = `onlineResourceType:link`
 type DatasetDistributionsSpecifier = `onlineResourceType:!link`
+// Renders a single URL input bound to the first online resource of the record
+// (FormFieldOnlineSingleLinkResourceComponent)
+type OnlineSingleLinkResourceSpecifier = `onlineResourceType:singleLink`
+// When set on the `contacts` field, contacts are rendered as editable detail
+// fields (ContactDetailsFormComponent) instead of cards (ContactCardComponent)
+type EditableContactDetailsSpecifier = `contact:editableDetails`
 export type FieldModelSpecifier =
   | OnlineLinkResourceSpecifier
   | DatasetDistributionsSpecifier
+  | OnlineSingleLinkResourceSpecifier
+  | EditableContactDetailsSpecifier
 
 export type FormFieldComponentName =
   | 'form-field-constraints-shortcuts'
@@ -44,8 +52,7 @@ export interface EditorField extends EditorFieldIdentification {
   gridColumnSpan?: number
 
   // a hidden field won't show but can still be used to modify the record
-  // FIXME: currently this is redundant with an absence of formFieldConfig but necessary for clarity
-  hidden?: boolean
+  hidden?: boolean | EditorFieldExpression
 
   // the result of this expression will replace the field value on save
   onSaveProcess?: EditorFieldExpression
@@ -54,7 +61,7 @@ export interface EditorField extends EditorFieldIdentification {
 export interface EditorSection {
   labelKey?: string
   descriptionKey?: string
-  hidden: boolean
+  hidden?: boolean | EditorFieldExpression
   fields: EditorField[]
 }
 

package/src/libs/feature/editor/src/lib/services/editor.service.ts

@@ -1,5 +1,5 @@
-import { Injectable, inject } from '@angular/core'
-import { forkJoin, Observable, of, switchMap } from 'rxjs'
+import { inject, Injectable } from '@angular/core'
+import { Observable, switchMap } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { EditorConfig } from '../models/'
@@ -16,7 +16,8 @@ export class EditorService {
   saveRecord(
     record: CatalogRecord,
     recordSource: string,
-    fieldsConfig: EditorConfig
+    fieldsConfig: EditorConfig,
+    publish: boolean
   ): Observable<[CatalogRecord, string]> {
     const savedRecord = { ...record }
 
@@ -27,22 +28,17 @@ export class EditorService {
     // run onSave processes
     for (const field of fields) {
       if (field.onSaveProcess && field.model) {
-        const evaluator = evaluate(field.onSaveProcess)
+        const { evaluator } = evaluate(field.onSaveProcess)
         savedRecord[field.model] = evaluator({
-          model: field.model,
-          value: record[field.model],
+          globals: {
+            record,
+          },
         })
       }
     }
-    let publishToAll = true
-    // if the record is new, generate a new unique identifier and pass publishToAll as false
-    if (!record.uniqueIdentifier) {
-      savedRecord.uniqueIdentifier = null
-      publishToAll = false
-    }
 
     return this.recordsRepository
-      .saveRecord(savedRecord, recordSource, publishToAll)
+      .saveRecord(savedRecord, recordSource, publish)
       .pipe(
         switchMap((uniqueIdentifier) =>
           this.recordsRepository.openRecordForEdition(uniqueIdentifier)

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/notify-reuse/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/edit-delete-reuse-buttons/edit-delete-reuse-buttons.component'
+export * from './lib/notify-reuse-form/notify-reuse-form.component'

package/src/libs/feature/notify-reuse/src/lib/edit-delete-reuse-buttons/edit-delete-reuse-buttons.component.html

@@ -0,0 +1,23 @@
+<div class="flex flex-row gap-6">
+  <gn-ui-button
+    class="grow"
+    type="primary"
+    extraClass="w-full flex flex-row justify-between"
+    [style.--gn-ui-button-rounded]="'10px'"
+    (buttonClick)="editReuse()"
+    data-cy="editReuseButton"
+  >
+    <span translate>notify.reuse.record.action.edit</span>
+    <ng-icon class="mr-[5px]" name="iconoirEdit"></ng-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    type="outline"
+    [style.--gn-ui-button-rounded]="'10px'"
+    [style.--gn-ui-button-height]="'50px'"
+    [title]="'notify.reuse.record.action.delete' | translate"
+    (buttonClick)="deleteReuse()"
+    data-cy="deleteReuseButton"
+  >
+    <ng-icon name="iconoirTrash"></ng-icon>
+  </gn-ui-button>
+</div>

package/src/libs/feature/notify-reuse/src/lib/edit-delete-reuse-buttons/edit-delete-reuse-buttons.component.ts

@@ -0,0 +1,114 @@
+import { LocationStrategy } from '@angular/common'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { MatDialog } from '@angular/material/dialog'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { MdViewFacade } from '../../../../../../libs/feature/record/src'
+import { RouterFacade } from '../../../../../../libs/feature/router/src'
+import { ConfirmationDialogComponent } from '../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { iconoirEdit, iconoirTrash } from '@ng-icons/iconoir'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { filter, map, take } from 'rxjs/operators'
+import { REUSE_FORM_URL } from '../../index'
+import { navigateToLightEdit } from '../utils/url'
+
+@Component({
+  selector: 'gn-ui-edit-delete-reuse-buttons',
+  templateUrl: './edit-delete-reuse-buttons.component.html',
+  styleUrl: './edit-delete-reuse-buttons.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ButtonComponent, TranslatePipe, TranslateDirective, NgIcon],
+  viewProviders: [
+    provideIcons({
+      iconoirEdit,
+      iconoirTrash,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class EditDeleteReuseButtonsComponent {
+  metadataViewFacade = inject(MdViewFacade)
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private notificationsService = inject(NotificationsService)
+  private routerFacade = inject(RouterFacade)
+  private translateService = inject(TranslateService)
+  private dialog = inject(MatDialog)
+  reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private locationStrategy = inject(LocationStrategy)
+
+  metadataUuid$ = this.metadataViewFacade.metadata$.pipe(
+    map((record) => record?.uniqueIdentifier),
+    filter(Boolean)
+  )
+
+  editReuse() {
+    this.metadataUuid$.pipe(take(1)).subscribe((uniqueIdentifier) => {
+      navigateToLightEdit(
+        this.reuseFormUrl,
+        this.locationStrategy.getBaseHref(),
+        uniqueIdentifier
+      )
+    })
+  }
+
+  deleteReuse() {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        title: this.translateService.instant(
+          'record.reuse.delete.confirmation.title'
+        ),
+        message: this.translateService.instant(
+          'record.reuse.delete.confirmation.message'
+        ),
+        confirmText: this.translateService.instant(
+          'record.reuse.delete.confirmation.confirmText'
+        ),
+        cancelText: this.translateService.instant(
+          'record.reuse.delete.confirmation.cancelText'
+        ),
+        focusCancel: true,
+      },
+      restoreFocus: true,
+    })
+
+    dialogRef.afterClosed().subscribe((confirmed) => {
+      if (confirmed) {
+        this.performReuseDeletion()
+      }
+    })
+  }
+
+  private performReuseDeletion() {
+    this.metadataUuid$.pipe(take(1)).subscribe((uuid) =>
+      this.recordsRepository.deleteRecord(uuid).subscribe({
+        next: () => {
+          this.routerFacade.setSearch()
+        },
+        error: (error) => {
+          this.notificationsService.showNotification(
+            {
+              type: 'error',
+              title: this.translateService.instant(
+                'record.reuse.deleteError.title'
+              ),
+              text: `${this.translateService.instant(
+                'record.reuse.deleteError.body'
+              )} ${error}`,
+            },
+            undefined,
+            error
+          )
+        },
+      })
+    )
+  }
+}

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.html

@@ -0,0 +1,111 @@
+<gn-ui-button
+  type="outline"
+  extraClass="w-full flex flex-row justify-between"
+  [style.--gn-ui-button-rounded]="'10px'"
+  (buttonClick)="toggleOverlay()"
+>
+  <span translate>notify.reuse.record.action.declare</span>
+  <ng-icon class="mr-[5px]" name="iconoirAppWindow"></ng-icon>
+</gn-ui-button>
+<ng-template #notifyReuseForm>
+  <div
+    class="w-[400px] max-w-[90vw] flex flex-col gap-3 bg-gray-50 rounded-l overflow-clip px-4 py-5 shadow-[0px_9px_12px_0px_rgba(9,30,66,0.15),0px_0px_1px_0px_rgba(9,30,66,0.31)]"
+  >
+    <div class="flex flex-col gap-3 pb-3">
+      <div class="flex items-start justify-between pb-3">
+        <p class="text-xl font-medium text-black" translate>
+          notify.reuse.form.title
+        </p>
+        <gn-ui-button
+          type="gray-light"
+          class="shrink-0"
+          (buttonClick)="closeOverlay()"
+          [style.--gn-ui-button-padding]="0"
+          [style.--gn-ui-button-width]="'21px'"
+          [style.--gn-ui-button-height]="'21px'"
+          aria-label="Close"
+        >
+          <ng-icon
+            class="text-[22px] !w-[21px] !h-[21px]"
+            name="matCloseOutline"
+          ></ng-icon>
+        </gn-ui-button>
+      </div>
+
+      <div class="flex flex-col gap-[10px]">
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.title</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #titleInput
+            [(value)]="title"
+            [placeholder]="
+              'notify.reuse.form.field.title.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+
+        <div class="flex flex-col gap-2 pt-3">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.url</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #urlInput
+            [(value)]="url"
+            [type]="'url'"
+            [placeholder]="
+              'notify.reuse.form.field.url.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+
+        <div class="flex flex-col gap-2 pt-3">
+          <div class="flex items-center">
+            <label class="font-bold text-base text-main leading-6">
+              <span translate>notify.reuse.form.field.email</span>
+              <span class="text-red-500">*</span>
+            </label>
+          </div>
+          <gn-ui-text-input
+            #emailInput
+            [(value)]="email"
+            [type]="'email'"
+            [placeholder]="
+              'notify.reuse.form.field.email.placeholder' | translate
+            "
+            [required]="true"
+          ></gn-ui-text-input>
+        </div>
+      </div>
+
+      <p class="font-medium text-sm text-gray-700 leading-5" translate>
+        notify.reuse.form.required.hint
+      </p>
+    </div>
+
+    <div class="flex flex-col">
+      <gn-ui-button
+        type="primary"
+        extraClass="w-full h-8 justify-center gap-2"
+        [disabled]="!isFormValid() || loading()"
+        (buttonClick)="submit()"
+      >
+        @if (loading()) {
+          <mat-spinner [diameter]="16"></mat-spinner>
+        } @else {
+          <span translate>notify.reuse.form.submit</span>
+          <ng-icon name="iconoirPlusCircle" size="1.5em"></ng-icon>
+        }
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>

package/src/libs/feature/notify-reuse/src/lib/notify-reuse-form/notify-reuse-form.component.ts

@@ -0,0 +1,234 @@
+import {
+  Overlay,
+  OverlayModule,
+  OverlayRef,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
+import { CommonModule, LocationStrategy } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  InjectionToken,
+  input,
+  OnDestroy,
+  signal,
+  TemplateRef,
+  viewChild,
+  ViewContainerRef,
+} from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
+import { MatProgressSpinner } from '@angular/material/progress-spinner'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  CatalogRecord,
+  Individual,
+  OnlineLinkResource,
+  ReuseRecord,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { NOT_KNOWN_CONSTRAINT } from '../../../../../../libs/feature/editor/src'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { getOptionalEditorConfig } from '../../../../../../libs/util/app-config/src'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { iconoirAppWindow, iconoirPlusCircle } from '@ng-icons/iconoir'
+import { matCloseOutline } from '@ng-icons/material-icons/outline'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
+import { navigateToLightEdit } from '../utils/url'
+
+marker('notify.reuse.form.error.title')
+marker('notify.reuse.form.error.body')
+
+export const REUSE_FORM_URL = new InjectionToken<string>('reuseFormUrl')
+
+@Component({
+  selector: 'gn-ui-notify-reuse-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    OverlayModule,
+    TextInputComponent,
+    ButtonComponent,
+    TranslatePipe,
+    TranslateDirective,
+    NgIcon,
+    MatProgressSpinner,
+  ],
+  templateUrl: './notify-reuse-form.component.html',
+  styleUrl: './notify-reuse-form.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    provideIcons({
+      iconoirAppWindow,
+      iconoirPlusCircle,
+      matCloseOutline,
+    }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
+})
+export class NotifyReuseFormComponent implements OnDestroy {
+  private overlay = inject(Overlay)
+  private viewContainerRef = inject(ViewContainerRef)
+  private scrollStrategies = inject(ScrollStrategyOptions)
+  private overlayRef: OverlayRef | null = null
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private readonly translate = inject(TranslateService)
+  private readonly notificationsService = inject(NotificationsService)
+  private readonly platformServiceInterface = inject(PlatformServiceInterface)
+  reuseFormUrl = inject(REUSE_FORM_URL, { optional: true })
+  private locationStrategy = inject(LocationStrategy)
+
+  me = toSignal(this.platformServiceInterface.getMe())
+  initialEmail = computed(() => this.me()?.email)
+  templateRef = viewChild<TemplateRef<HTMLElement>>('notifyReuseForm')
+  record = input<Partial<CatalogRecord | null>>(null)
+
+  // TODO: use a form() signal once migrated to Angular 22
+  title = signal('')
+  url = signal('')
+  email = signal(this.initialEmail() ?? '')
+
+  titleInput = viewChild<TextInputComponent>('titleInput')
+  urlInput = viewChild<TextInputComponent>('urlInput')
+  emailInput = viewChild<TextInputComponent>('emailInput')
+
+  loading = signal(false)
+
+  isFormValid = computed(
+    () =>
+      this.titleInput().isValid() &&
+      this.urlInput().isValid() &&
+      this.emailInput().isValid()
+  )
+
+  clearInputs() {
+    this.title.set('')
+    this.url.set('')
+    this.email.set(this.initialEmail() ?? '')
+  }
+
+  toggleOverlay() {
+    if (this.overlayRef) {
+      this.closeOverlay()
+    } else {
+      this.openOverlay()
+    }
+  }
+
+  openOverlay() {
+    const positionStrategy = this.overlay
+      .position()
+      .global()
+      .centerVertically()
+      .right('16px')
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      hasBackdrop: false,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      scrollStrategy: this.scrollStrategies.noop(),
+    })
+
+    this.overlayRef.attach(
+      new TemplatePortal(this.templateRef(), this.viewContainerRef)
+    )
+    this.overlayRef.backdropClick().subscribe(() => this.closeOverlay())
+  }
+
+  closeOverlay() {
+    this.clearInputs()
+    this.overlayRef?.dispose()
+    this.overlayRef = null
+  }
+
+  ngOnDestroy() {
+    this.closeOverlay()
+  }
+
+  submit() {
+    if (!this.isFormValid()) return
+    const defaultLang =
+      getOptionalEditorConfig()?.NEW_RECORD_DEFAULT_LANGUAGE ??
+      this.translate.currentLang
+    const onlineResource: OnlineLinkResource = {
+      type: 'link',
+      url: new URL(this.url()),
+      description: this.translate.instant('notify.reuse.link.description'),
+    }
+    const contact: Individual = {
+      firstName: this.me()?.name,
+      lastName: this.me()?.surname,
+      email: this.email(),
+      role: 'point_of_contact',
+      organization: { name: this.me()?.organisation },
+    }
+    const reuseRecord: ReuseRecord = {
+      kind: 'reuse',
+      reuseType: 'application',
+      uniqueIdentifier: null,
+      title: this.title(),
+      abstract: '',
+      overviews: [],
+      ownerOrganization: {
+        name: 'Owner organization',
+      },
+      recordUpdated: new Date(),
+      updateFrequency: 'unknown',
+      otherLanguages: [],
+      defaultLanguage: defaultLang,
+      topics: [],
+      keywords: [],
+      licenses: [],
+      legalConstraints: [NOT_KNOWN_CONSTRAINT],
+      securityConstraints: [],
+      otherConstraints: [],
+      contacts: [contact],
+      contactsForResource: [],
+      lineage: '',
+      sourceRecords: [
+        {
+          uuid: this.record()?.uniqueIdentifier ?? '',
+          title: this.record()?.title ?? '',
+        },
+      ],
+      associatedRecords: [],
+      onlineResources: [onlineResource],
+      spatialExtents: [],
+      temporalExtents: [],
+    }
+    this.loading.set(true)
+    this.recordsRepository.saveRecord(reuseRecord, undefined, false).subscribe({
+      next: (uniqueIdentifier) => {
+        this.loading.set(false)
+        this.closeOverlay()
+        navigateToLightEdit(
+          this.reuseFormUrl,
+          this.locationStrategy.getBaseHref(),
+          uniqueIdentifier
+        )
+      },
+      error: (err) => {
+        this.loading.set(false)
+        this.notificationsService.showNotification(
+          {
+            type: 'error',
+            title: this.translate.instant('notify.reuse.form.error.title'),
+            text: this.translate.instant('notify.reuse.form.error.body'),
+          },
+          undefined,
+          err
+        )
+      },
+    })
+  }
+}

package/src/libs/feature/notify-reuse/src/lib/utils/url.ts

@@ -0,0 +1,16 @@
+export const navigateToLightEdit = (
+  reuseFormUrl: string,
+  baseHref: string,
+  uniqueIdentifier: string
+) => {
+  const baseUrl = `${reuseFormUrl ?? ''}`.replace(/\/+$/, '')
+  // Normalisation du baseHref pour éviter les doubles /
+  const baseHrefClean = baseHref.replace(/^\/+|\/+$/g, '')
+  const prefix = baseHrefClean ? `/${baseHrefClean}` : ''
+  const rawRedirectUrl = `${window.location.origin}${prefix}/reuse/${uniqueIdentifier}`
+  const redirect_on_leave = encodeURIComponent(rawRedirectUrl)
+  window.open(
+    `${baseUrl}/light-edit/${uniqueIdentifier}?redirect_on_leave=${redirect_on_leave}`,
+    '_self'
+  )
+}

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,
       }
     }),