geonetwork-ui 2.4.0-dev.f6f2f023 → 2.4.0-dev.fdf8f64b

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

@@ -1,42 +1,8 @@
-import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import type { FeatureCollection } from 'geojson'
-import { extend, Extent, isEmpty } from 'ol/extent'
-import Feature from 'ol/Feature'
+import { extend, Extent } from 'ol/extent'
 import GeoJSON from 'ol/format/GeoJSON'
-import { Geometry } from 'ol/geom'
-import Layer from 'ol/layer/Layer'
-import Map from 'ol/Map'
 import { transformExtent } from 'ol/proj'
-import Source from 'ol/source/Source'
-import ImageWMS from 'ol/source/ImageWMS'
-import TileWMS from 'ol/source/TileWMS'
-import VectorSource from 'ol/source/Vector'
-import { defaults, DragPan, Interaction, MouseWheelZoom } from 'ol/interaction'
-import {
-  mouseOnly,
-  noModifierKeys,
-  platformModifierKeyOnly,
-  primaryAction,
-} from 'ol/events/condition'
-import { Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
-import {
-  MapContextLayerModel,
-  MapContextLayerWmsModel,
-} from '../map-context/map-context.model'
-import Collection from 'ol/Collection'
-import MapBrowserEvent from 'ol/MapBrowserEvent'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { ProxyService } from '../../../../../../libs/util/shared/src'
-import { WmsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
-import { LONLAT_CRS_CODES } from '../constant/projections'
-import { fromEPSGCode, register } from 'ol/proj/proj4'
-import proj4 from 'proj4/dist/proj4'
-import { defaults as defaultControls } from 'ol/control/defaults'
-
-const FEATURE_PROJECTION = 'EPSG:3857'
-const DATA_PROJECTION = 'EPSG:4326'
 
 const GEOJSON = new GeoJSON()
 
@@ -44,212 +10,22 @@ const GEOJSON = new GeoJSON()
   providedIn: 'root',
 })
 export class MapUtilsService {
-  constructor(private http: HttpClient, private proxy: ProxyService) {}
-
-  createEmptyMap(): Map {
-    return new Map({
-      controls: defaultControls({
-        attribution: true,
-        attributionOptions: { collapsible: false },
-      }),
-      pixelRatio: 1,
-    })
-  }
-
-  readFeatureCollection = (
-    featureCollection: FeatureCollection,
-    featureProjection = FEATURE_PROJECTION,
-    dataProjection = DATA_PROJECTION
-  ): Feature<Geometry>[] => {
-    return GEOJSON.readFeatures(featureCollection, {
-      featureProjection,
-      dataProjection,
-    }) as Feature<Geometry>[]
-  }
-
-  isWMSLayer(layer: Layer<Source>): boolean {
-    return (
-      layer.getSource() instanceof TileWMS ||
-      layer.getSource() instanceof ImageWMS
-    )
-  }
-
-  getGFIUrl(layer, map, coordinate): string {
-    const view = map.getView()
-    const projection = view.getProjection()
-    const resolution = view.getResolution()
-    const source = layer.getSource()
-    const params = {
-      ...source.getParams(),
-      INFO_FORMAT: 'application/json',
-    }
-    return source.getFeatureInfoUrl(coordinate, resolution, projection, params)
-  }
-
-  getVectorFeaturesFromClick(olMap, event): Feature<Geometry>[] {
-    const features = []
-    const hit = olMap.forEachFeatureAtPixel(
-      event.pixel,
-      (feature: Feature<Geometry>) => {
-        return feature
-      },
-      { layerFilter: (layer) => layer.getSource() instanceof VectorSource }
-    )
-    if (hit) {
-      features.push(hit)
-    }
-    return features
-  }
-
-  getGFIFeaturesObservablesFromClick(
-    olMap: Map,
-    event: MapBrowserEvent<PointerEvent>
-  ): Observable<Feature<Geometry>[]>[] {
-    const wmsLayers = olMap.getLayers().getArray().filter(this.isWMSLayer)
-
-    if (wmsLayers.length > 0) {
-      const { coordinate } = event
-      const gfiUrls = wmsLayers.reduce(
-        (urls, layer) => [...urls, this.getGFIUrl(layer, olMap, coordinate)],
-
-        []
-      )
-      return gfiUrls.map((url) =>
-        this.http
-          .get<FeatureCollection>(url)
-          .pipe(map((collection) => this.readFeatureCollection(collection)))
-      )
-    } else {
-      return []
-    }
-  }
-
-  /**
-   * Will emit `null` if no extent could be computed
-   */
-  async getLayerExtent(layer: MapContextLayerModel): Promise<Extent | null> {
-    let latLonExtent: Extent
-    if (
-      layer &&
-      layer.type === 'geojson' &&
-      'data' in layer &&
-      typeof layer.data === 'object' &&
-      layer.data.features[0] &&
-      layer.data.features[0].geometry
-    ) {
-      latLonExtent = new GeoJSON()
-        .readFeatures(layer.data)
-        .map((feature) => feature.getGeometry())
-        .filter((geom) => !!geom)
-        .reduce(
-          (prev, curr) =>
-            prev ? extend(prev, curr.getExtent()) : curr.getExtent(),
-          null as Extent
-        )
-    } else if (layer && layer.type === 'wms') {
-      latLonExtent = await this.getWmsLayerExtent(layer)
-    } else if (layer && layer.type === 'wmts') {
-      // TODO: isolate this in utils service
-      latLonExtent = await new WmtsEndpoint(layer.url)
-        .isReady()
-        .then((endpoint) => {
-          const layerName = endpoint.getSingleLayerName() ?? layer.name
-          const wmtsLayer = endpoint.getLayerByName(layerName)
-          return wmtsLayer.latLonBoundingBox
-        })
-    } else {
-      return null
-    }
-    if (!latLonExtent || isEmpty(latLonExtent)) {
-      return null
-    }
-    return transformExtent(latLonExtent, 'EPSG:4326', 'EPSG:3857')
-  }
-
-  async getWmsLayerExtent(
-    layer: MapContextLayerWmsModel
-  ): Promise<Extent | null> {
-    const endpoint = await new WmsEndpoint(
-      this.proxy.getProxiedUrl(layer.url)
-    ).isReady()
-    const { boundingBoxes } = endpoint.getLayerByName(layer.name)
-    if (!Object.keys(boundingBoxes).length) {
-      return null
-    }
-    const lonLatCRS = Object.keys(boundingBoxes)?.find((crs) =>
-      LONLAT_CRS_CODES.includes(crs)
-    )
-    if (lonLatCRS) {
-      return boundingBoxes[lonLatCRS]
-    } else {
-      const availableEPSGCode = Object.keys(boundingBoxes)[0]
-      register(proj4)
-      const proj = await fromEPSGCode(availableEPSGCode)
-      return transformExtent(
-        boundingBoxes[availableEPSGCode],
-        proj,
-        'EPSG:4326'
-      )
-    }
-  }
-
-  prioritizePageScroll(interactions: Collection<Interaction>) {
-    interactions.clear()
-    interactions.extend(
-      defaults({
-        // remove rotate interactions
-        altShiftDragRotate: false,
-        pinchRotate: false,
-        // replace drag and zoom interactions
-        dragPan: false,
-        mouseWheelZoom: false,
-      })
-        .extend([
-          new DragPan({
-            condition: dragPanCondition,
-          }),
-          new MouseWheelZoom({
-            condition: mouseWheelZoomCondition,
-          }),
-        ])
-        .getArray()
-    )
-  }
-
   getRecordExtent(record: Partial<CatalogRecord>): Extent {
     if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
       return null
     }
-    // transform an array of geojson geometries into a bbox
+    // extend all the spatial extents into an including bbox
     const totalExtent = record.spatialExtents.reduce(
       (prev, curr) => {
-        const geom = GEOJSON.readGeometry(curr.geometry)
-        return extend(prev, geom.getExtent())
+        if ('bbox' in curr) return extend(prev, curr.bbox)
+        else if ('geometry' in curr) {
+          const geom = GEOJSON.readGeometry(curr.geometry)
+          return extend(prev, geom.getExtent())
+        }
+        return prev
       },
       [Infinity, Infinity, -Infinity, -Infinity]
     )
     return transformExtent(totalExtent, 'EPSG:4326', 'EPSG:3857')
   }
 }
-
-export function dragPanCondition(
-  this: DragPan,
-  event: MapBrowserEvent<PointerEvent>
-) {
-  const dragPanCondition = this.getPointerCount() === 2 || mouseOnly(event)
-  if (!dragPanCondition) {
-    this.getMap().dispatchEvent('mapmuted')
-  }
-  // combine the condition with the default DragPan conditions
-  return dragPanCondition && noModifierKeys(event) && primaryAction(event)
-}
-
-export function mouseWheelZoomCondition(
-  this: MouseWheelZoom,
-  event: MapBrowserEvent<UIEvent>
-) {
-  if (!platformModifierKeyOnly(event) && event.type === 'wheel') {
-    this.getMap().dispatchEvent('mapmuted')
-  }
-  return platformModifierKeyOnly(event)
-}

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

@@ -9,7 +9,7 @@ import { BehaviorSubject, combineLatest } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-data-view',
@@ -43,7 +43,7 @@ export class DataViewComponent {
       }))
     )
   )
-  selectedLink$ = new BehaviorSubject<DatasetDistribution>(null)
+  selectedLink$ = new BehaviorSubject<DatasetOnlineResource>(null)
 
   constructor(private mdViewFacade: MdViewFacade) {}
 
@@ -52,7 +52,7 @@ export class DataViewComponent {
   }
 
   selectLink(linkAsString: string) {
-    const link: DatasetDistribution = JSON.parse(linkAsString)
+    const link: DatasetOnlineResource = JSON.parse(linkAsString)
     link.url = new URL(link.url)
     this.selectedLink$.next(link)
   }

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

@@ -3,10 +3,11 @@ import {
   Component,
   Inject,
   InjectionToken,
+  Input,
   Optional,
 } from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
-import { combineLatest, map } from 'rxjs'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { MdViewFacade } from '../state'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
 
@@ -21,29 +22,45 @@ export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewPermalinkComponent {
+  viewType$ = new BehaviorSubject<string>('map')
+  @Input()
+  set viewType(value: string) {
+    this.viewType$.next(value)
+  }
+
   permalinkUrl$ = combineLatest([
+    this.viewType$,
     this.facade.chartConfig$,
     this.facade.metadata$,
   ]).pipe(
-    map(([config, metadata]) => {
-      if (config) {
-        const { aggregation, xProperty, yProperty, chartType } = config
-        const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
-        url.searchParams.set('v', `${this.version}`)
-        url.searchParams.append('e', `gn-dataset-view-chart`)
-        url.searchParams.append('a', `api-url=${this.config.basePath}`)
-        url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
-        url.searchParams.append('a', `primary-color=#0f4395`)
-        url.searchParams.append('a', `secondary-color=#8bc832`)
-        url.searchParams.append('a', `main-color=#555`)
-        url.searchParams.append('a', `background-color=#fdfbff`)
-        url.searchParams.append('a', `aggregation=${aggregation}`)
-        url.searchParams.append('a', `x-property=${xProperty}`)
-        url.searchParams.append('a', `y-property=${yProperty}`)
-        url.searchParams.append('a', `chart-type=${chartType}`)
-        return url.toString()
+    map(([viewType, config, metadata]) => {
+      const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
+      url.searchParams.set('v', `${this.version}`)
+      if (viewType === 'chart') {
+        if (config) {
+          const { aggregation, xProperty, yProperty, chartType } = config
+          url.searchParams.append('e', `gn-dataset-view-chart`)
+          url.searchParams.append('a', `aggregation=${aggregation}`)
+          url.searchParams.append('a', `x-property=${xProperty}`)
+          url.searchParams.append('a', `y-property=${yProperty}`)
+          url.searchParams.append('a', `chart-type=${chartType}`)
+        } else {
+          return ''
+        }
+      } else if (viewType === 'table') {
+        // table
+        url.searchParams.append('e', `gn-dataset-view-table`)
+      } else {
+        // map
+        url.searchParams.append('e', `gn-dataset-view-map`)
       }
-      return ''
+      url.searchParams.append('a', `api-url=${this.config.basePath}`)
+      url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`)
+      url.searchParams.append('a', `primary-color=#0f4395`)
+      url.searchParams.append('a', `secondary-color=#8bc832`)
+      url.searchParams.append('a', `main-color=#555`)
+      url.searchParams.append('a', `background-color=#fdfbff`)
+      return url.toString()
     })
   )
 

package/src/libs/feature/record/src/lib/data-view-share/data-view-share.component.html

@@ -10,7 +10,9 @@
       <ng-template mat-tab-label>
         <span class="tab-header-label-gray" translate>share.tab.permalink</span>
       </ng-template>
-      <gn-ui-data-view-permalink></gn-ui-data-view-permalink>
+      <gn-ui-data-view-permalink
+        [viewType]="viewType"
+      ></gn-ui-data-view-permalink>
     </mat-tab>
     <mat-tab>
       <ng-template mat-tab-label>
@@ -24,7 +26,9 @@
           >share.tab.webComponent</span
         >
       </ng-template>
-      <gn-ui-data-view-web-component></gn-ui-data-view-web-component>
+      <gn-ui-data-view-web-component
+        [viewType]="viewType"
+      ></gn-ui-data-view-web-component>
     </mat-tab>
   </mat-tab-group>
 </div>

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

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   Inject,
+  Input,
   Optional,
 } from '@angular/core'
 import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-permalink.component'
@@ -13,6 +14,16 @@ import { WEB_COMPONENT_EMBEDDER_URL } from '../data-view-permalink/data-view-per
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewShareComponent {
+  private _viewType: string
+
+  @Input()
+  set viewType(value: string) {
+    this._viewType = value
+  }
+
+  get viewType(): string {
+    return this._viewType
+  }
   constructor(
     @Optional()
     @Inject(WEB_COMPONENT_EMBEDDER_URL)

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

@@ -1,7 +1,12 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+} from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
 import { MdViewFacade } from '../state'
-import { combineLatest, map } from 'rxjs'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
 
 @Component({
@@ -11,35 +16,77 @@ import { GN_UI_VERSION } from '../gn-ui-version.token'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewWebComponentComponent {
+  viewType$ = new BehaviorSubject<string>('map')
+  @Input()
+  set viewType(value: string) {
+    this.viewType$.next(value)
+  }
   webComponentHtml$ = combineLatest(
+    this.viewType$,
     this.facade.chartConfig$,
     this.facade.metadata$
   ).pipe(
-    map(([config, metadata]) => {
-      if (config) {
-        const { aggregation, xProperty, yProperty, chartType } = config
+    map(([viewType, config, metadata]) => {
+      if (viewType === 'chart') {
+        if (config) {
+          const { aggregation, xProperty, yProperty, chartType } = config
+          return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+            this.version
+          }/gn-wc.js"></script>
+  <gn-dataset-view-chart
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          aggregation="${aggregation}"
+          x-property="${xProperty}"
+          y-property="${yProperty}"
+          chart-type="${chartType}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-chart>`
+        }
+        return ''
+      } else if (viewType === 'table') {
         return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
           this.version
         }/gn-wc.js"></script>
-<gn-dataset-view-chart
+  <gn-dataset-view-table
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-table>`
+      } else {
+        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+          this.version
+        }/gn-wc.js"></script>
+<gn-dataset-view-map
         api-url="${new URL(
           this.config.basePath,
           window.location.origin
         ).toString()}"
         dataset-id="${metadata.uniqueIdentifier}"
-        aggregation="${aggregation}"
-        x-property="${xProperty}"
-        y-property="${yProperty}"
-        chart-type="${chartType}"
         primary-color="#0f4395"
         secondary-color="#8bc832"
         main-color="#555"
         background-color="#fdfbff"
         main-font="'Inter', sans-serif"
         title-font="'DM Serif Display', serif"
-></gn-dataset-view-chart>`
+></gn-dataset-view-map>`
       }
-      return ''
     })
   )
 

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -1,12 +1,26 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { MapConfig } from '../../../../../../libs/util/app-config/src'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  InjectionToken,
+  Input,
+  Optional,
+} from '@angular/core'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
 
 marker('externalviewer.dataset.unnamed')
 
+export const EXTERNAL_VIEWER_URL_TEMPLATE = new InjectionToken<string>(
+  'externalViewerUrlTemplate'
+)
+export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
+  'externalViewerOpenNewTab',
+  { factory: () => false }
+)
+
 @Component({
   selector: 'gn-ui-external-viewer-button',
   templateUrl: './external-viewer-button.component.html',
@@ -14,17 +28,10 @@ marker('externalviewer.dataset.unnamed')
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExternalViewerButtonComponent {
-  @Input() link: DatasetDistribution
-  @Input() mapConfig: MapConfig
+  @Input() link: DatasetOnlineResource
 
   get externalViewer() {
-    if (this.link && this.mapConfig) {
-      return (
-        !!this.mapConfig.EXTERNAL_VIEWER_URL_TEMPLATE &&
-        !!this.supportedLinkLayerType
-      )
-    }
-    return false
+    return !!this.urlTemplate && !!this.supportedLinkLayerType
   }
 
   get supportedLinkLayerType() {
@@ -45,10 +52,17 @@ export class ExternalViewerButtonComponent {
     return null
   }
 
-  constructor(private translateService: TranslateService) {}
+  constructor(
+    private translateService: TranslateService,
+    @Inject(EXTERNAL_VIEWER_URL_TEMPLATE)
+    @Optional()
+    private urlTemplate: string,
+    @Inject(EXTERNAL_VIEWER_OPEN_NEW_TAB)
+    private openinNewTab: boolean
+  ) {}
 
   openInExternalViewer() {
-    const templateUrl = this.mapConfig.EXTERNAL_VIEWER_URL_TEMPLATE
+    const templateUrl = this.urlTemplate
     const layerName = this.link.name
       ? this.link.name
       : this.translateService.instant('externalviewer.dataset.unnamed')
@@ -59,11 +73,6 @@ export class ExternalViewerButtonComponent {
         `${encodeURIComponent(this.link.url.toString())}`
       )
       .replace('${service_type}', `${this.supportedLinkLayerType}`)
-    window
-      .open(
-        url,
-        this.mapConfig.EXTERNAL_VIEWER_OPEN_NEW_TAB ? '_blank' : '_self'
-      )
-      .focus()
+    window.open(url, this.openinNewTab ? '_blank' : '_self').focus()
   }
 }

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -1,10 +1,16 @@
-import { InjectionToken, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { UiMapModule } from '../../../../../libs/ui/map/src'
+import {
+  FeatureDetailComponent,
+  MapContainerComponent,
+} from '../../../../../libs/ui/map/src'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
-import { FeatureMapModule } from '../../../../../libs/feature/map/src'
+import {
+  FeatureMapModule,
+  MapStateContainerComponent,
+} from '../../../../../libs/feature/map/src'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { MdViewFacade } from './state'
@@ -17,7 +23,7 @@ import {
 } from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
 import { MatIconModule } from '@angular/material/icon'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { PopupAlertComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from './external-viewer-button/external-viewer-button.component'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
@@ -43,7 +49,6 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     UiLayoutModule,
     FeatureMapModule,
     FeatureCatalogModule,
-    UiMapModule,
     UiInputsModule,
     UiElementsModule,
     MatTabsModule,
@@ -52,6 +57,10 @@ import { DataViewShareComponent } from './data-view-share/data-view-share.compon
     TranslateModule,
     TableComponent,
     FeatureDatavizModule,
+    PopupAlertComponent,
+    FeatureDetailComponent,
+    MapStateContainerComponent,
+    MapContainerComponent,
   ],
   providers: [MdViewFacade],
   exports: [

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

@@ -10,17 +10,17 @@
     <gn-ui-external-viewer-button
       class="shrink-0 py-1 place-self-end"
       [link]="selectedLink$ | async"
-      [mapConfig]="mapConfig"
     >
     </gn-ui-external-viewer-button>
   </div>
   <div
     class="relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden"
   >
-    <gn-ui-map-context
+    <gn-ui-map-container
+      #mapContainer
       [context]="mapContext$ | async"
-      [mapConfig]="mapConfig"
-    ></gn-ui-map-context>
+      (featuresClick)="onMapFeatureSelect($event)"
+    ></gn-ui-map-container>
     <div
       class="top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
       [class.hidden]="!selection"