geonetwork-ui 2.1.0-initial

package/src/libs/feature/map/src/lib/+state/map.facade.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core'
+import { select, Store } from '@ngrx/store'
+import * as MapSelectors from './map.selectors'
+import { MapLayer } from './map.models'
+import * as MapActions from './map.actions'
+
+@Injectable()
+export class MapFacade {
+  layers$ = this.store.pipe(select(MapSelectors.getMapLayers))
+
+  constructor(private readonly store: Store) {}
+
+  /**
+   * Use the initialization action to perform one
+   * or more tasks in your Effects.
+   */
+  init() {
+    // placeholder
+  }
+
+  addLayer(layer: MapLayer) {
+    this.store.dispatch(MapActions.addLayer({ layer }))
+  }
+  addLayerAtIndex(layer: MapLayer, index: number) {
+    this.store.dispatch(MapActions.addLayer({ layer, atIndex: index }))
+  }
+  removeLayer(index: number) {
+    this.store.dispatch(MapActions.removeLayer({ index }))
+  }
+}

package/src/libs/feature/map/src/lib/+state/map.models.ts

@@ -0,0 +1,9 @@
+import { MapContextLayerModel } from '../map-context/map-context.model'
+
+export type MapLayer = MapContextLayerModel & {
+  title: string
+}
+export type MapLayerWithInfo = MapLayer & {
+  error: string | null
+  loading: boolean
+}

package/src/libs/feature/map/src/lib/+state/map.reducer.ts

@@ -0,0 +1,83 @@
+import { Action, createReducer, on } from '@ngrx/store'
+
+import * as MapActions from './map.actions'
+import { MapLayerWithInfo } from './map.models'
+
+export const MAP_FEATURE_KEY = 'map'
+
+export interface MapState {
+  layers: MapLayerWithInfo[]
+}
+
+export interface MapPartialState {
+  readonly [MAP_FEATURE_KEY]: MapState
+}
+
+export const initialMapState: MapState = {
+  layers: [],
+}
+
+const reducer = createReducer(
+  initialMapState,
+  on(MapActions.addLayer, (state, action) => {
+    const layers: MapLayerWithInfo[] = [...state.layers]
+    const layerWithInfo = { ...action.layer, loading: false, error: null }
+    if (!('atIndex' in action)) layers.push(layerWithInfo)
+    else layers.splice(action.atIndex, 0, layerWithInfo)
+    return {
+      ...state,
+      layers,
+    }
+  }),
+  on(MapActions.updateLayer, (state, action) => ({
+    ...state,
+    layers: state.layers.map((layer, index) =>
+      index === action.index
+        ? {
+            ...action.updatedLayer,
+            loading: false,
+            error: null,
+          }
+        : layer
+    ),
+  })),
+  on(MapActions.removeLayer, (state, action) => ({
+    ...state,
+    layers: state.layers.filter((layer, index) => index !== action.index),
+  })),
+  on(MapActions.changeLayerOrder, (state, action) => {
+    const layers: MapLayerWithInfo[] = [...state.layers]
+    const moved = layers.splice(action.currentIndex, 1)[0]
+    layers.splice(action.newIndex, 0, moved)
+    return {
+      ...state,
+      layers,
+    }
+  }),
+  on(MapActions.setLayerError, (state, action) => ({
+    ...state,
+    layers: state.layers.map((layer, index) =>
+      index === action.index
+        ? {
+            ...layer,
+            error: action.error,
+          }
+        : layer
+    ),
+  })),
+  on(MapActions.clearLayerError, (state, action) => ({
+    ...state,
+    layers: state.layers.map((layer, index) =>
+      index === action.index
+        ? {
+            ...layer,
+            error: null,
+          }
+        : layer
+    ),
+  }))
+)
+
+export function mapReducer(state: MapState | undefined, action: Action) {
+  return reducer(state, action)
+}

package/src/libs/feature/map/src/lib/+state/map.selectors.ts

@@ -0,0 +1,10 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store'
+import { MAP_FEATURE_KEY, MapState } from './map.reducer'
+
+// Lookup the 'Map' feature state managed by NgRx
+export const getMapState = createFeatureSelector<MapState>(MAP_FEATURE_KEY)
+
+export const getMapLayers = createSelector(
+  getMapState,
+  (state: MapState) => state.layers
+)

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-from-catalog.component.css

@@ -0,0 +1,4 @@
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+::ng-deep .mat-tab-body-wrapper {
+  flex-grow: 1;
+}

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

@@ -0,0 +1,6 @@
+<div class="h-full text-sm">
+  <gn-ui-fuzzy-search></gn-ui-fuzzy-search>
+  <gn-ui-results-list-container
+    layout="ADDLAYER"
+  ></gn-ui-results-list-container>
+</div>

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-from-catalog.component.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
+import {
+  FIELDS_BRIEF,
+  SearchFacade,
+  SearchService,
+} from '../../../../../../libs/feature/search/src'
+import {
+  RESULTS_LAYOUT_CONFIG,
+  ResultsLayoutConfigItem,
+} from '../../../../../../libs/ui/search/src'
+import { AddLayerRecordPreviewComponent } from './add-layer-record-preview/add-layer-record-preview.component'
+
+@Component({
+  selector: 'gn-ui-add-layer-from-catalog',
+  templateUrl: './add-layer-from-catalog.component.html',
+  styleUrls: ['./add-layer-from-catalog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    SearchFacade,
+    SearchService,
+    {
+      provide: RESULTS_LAYOUT_CONFIG,
+      useValue: {
+        ADDLAYER: new ResultsLayoutConfigItem(
+          AddLayerRecordPreviewComponent,
+          'py-2',
+          '',
+          'flex flex-col divide-y divide-y-grey-50'
+        ),
+      },
+    },
+  ],
+})
+export class AddLayerFromCatalogComponent implements OnInit {
+  constructor(private searchFacade: SearchFacade) {}
+
+  ngOnInit() {
+    this.searchFacade.init('map-add-layer')
+    this.searchFacade.setConfigRequestFields([...FIELDS_BRIEF, 'link'])
+    this.searchFacade.setFilters({
+      availableInServices: '+linkProtocol:/OGC:WMS.*/',
+    })
+  }
+}

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.html

@@ -0,0 +1,23 @@
+<div class="w-full flex flex-row rounded-sm" [title]="record.abstract">
+  <gn-ui-thumbnail
+    class="w-16 h-16 shrink-0 border-r border-gray-200 bg-gray-100"
+    [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+  ></gn-ui-thumbnail>
+
+  <div class="flex flex-col p-2 gap-2 overflow-hidden">
+    <h1 class="text-sm font-medium truncate">
+      {{ record.title }}
+    </h1>
+    <ng-container *ngFor="let link of mapLinks">
+      <gn-ui-button
+        [type]="'outline'"
+        (buttonClick)="handleLinkClick(link)"
+        extraClass="!py-[8px] !px-[12px]"
+      >
+        <div class="text-left text-[12px] line-clamp-2">
+          {{ getLinkLabel(link) }}
+        </div>
+      </gn-ui-button>
+    </ng-container>
+  </div>
+</div>

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
+import { RecordPreviewComponent } from '../../../../../../../libs/ui/search/src'
+import {
+  getLinkLabel,
+  LinkClassifierService,
+  LinkUsage,
+} from '../../../../../../../libs/util/shared/src'
+import { Observable, of, throwError } from 'rxjs'
+import { map } from 'rxjs/operators'
+import { MapUtilsService } from '../../utils'
+import { MapFacade } from '../../+state/map.facade'
+import {
+  MapContextLayerModel,
+  MapContextLayerTypeEnum,
+} from '../../map-context/map-context.model'
+import {
+  DatasetDistribution,
+  DatasetRecord,
+} from '../../../../../../../libs/common/domain/src/lib/record'
+
+@Component({
+  selector: 'gn-ui-add-layer-record-preview',
+  templateUrl: './add-layer-record-preview.component.html',
+  styleUrls: ['./add-layer-record-preview.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
+  get mapLinks(): DatasetDistribution[] {
+    return (this.record as DatasetRecord).distributions.filter((link) =>
+      this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
+    ) as DatasetDistribution[]
+  }
+
+  constructor(
+    protected elementRef: ElementRef,
+    private linkClassifier: LinkClassifierService,
+    private mapFacade: MapFacade,
+    private mapUtils: MapUtilsService
+  ) {
+    super(elementRef)
+  }
+
+  async handleLinkClick(link: DatasetDistribution) {
+    const layer = await this.getLayerFromLink(link).toPromise()
+    this.mapFacade.addLayer({ ...layer, title: this.record.title })
+  }
+
+  getLayerFromLink(
+    link: DatasetDistribution
+  ): Observable<MapContextLayerModel> {
+    if (link.type !== 'service')
+      return throwError(
+        () => 'map layer could not be built for this distribution'
+      )
+    if (link.accessServiceProtocol === 'wms') {
+      return of({
+        url: link.url.toString(),
+        type: MapContextLayerTypeEnum.WMS,
+        name: link.name,
+      })
+    } else if (link.accessServiceProtocol === 'wmts') {
+      return this.mapUtils.getWmtsOptionsFromCapabilities(link).pipe(
+        map((options) => ({
+          type: MapContextLayerTypeEnum.WMTS,
+          options: options,
+        }))
+      )
+    }
+    return throwError(() => 'protocol not supported')
+  }
+
+  getLinkLabel(link: DatasetDistribution) {
+    return getLinkLabel(link)
+  }
+}

package/src/libs/feature/map/src/lib/constant/index.ts

@@ -0,0 +1 @@
+export * from './map-options'

package/src/libs/feature/map/src/lib/constant/map-options.ts

@@ -0,0 +1,17 @@
+import { InjectionToken } from '@angular/core'
+import { StyleFunction } from 'ol/style/Style'
+import { defaultStyle, hlStyle } from './style.constant'
+
+export interface MapOptionsModel {
+  defaultStyle: StyleFunction
+  hlStyle: StyleFunction
+}
+
+export const defaultMapOptions: MapOptionsModel = {
+  defaultStyle,
+  hlStyle,
+}
+
+export const FEATURE_MAP_OPTIONS = new InjectionToken<MapOptionsModel>(
+  'mapOptions'
+)

package/src/libs/feature/map/src/lib/constant/style.constant.ts

@@ -0,0 +1,18 @@
+import { Circle, Fill, Stroke } from 'ol/style'
+import Style, { createDefaultStyle, StyleFunction } from 'ol/style/Style'
+
+export const defaultStyle: StyleFunction = createDefaultStyle
+
+const _hlStyle: Style = new Style({
+  image: new Circle({
+    fill: new Fill({
+      color: 'red',
+    }),
+    stroke: new Stroke({
+      color: 'red',
+      width: 2,
+    }),
+    radius: 5,
+  }),
+})
+export const hlStyle: StyleFunction = () => _hlStyle

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

@@ -0,0 +1,42 @@
+import { EventEmitter, Injectable } from '@angular/core'
+import Feature from 'ol/Feature'
+import { Geometry } from 'ol/geom'
+import { forkJoin, Observable, of } from 'rxjs'
+import { MapManagerService } from '../manager/map-manager.service'
+import { MapUtilsService } from '../utils/map-utils.service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FeatureInfoService {
+  features$ = new EventEmitter<Feature<Geometry>[]>()
+
+  constructor(
+    private manager: MapManagerService,
+    private mapUtils: MapUtilsService
+  ) {}
+
+  handleFeatureInfo(): void {
+    const { map } = this.manager
+    map.on('click', (event) => {
+      const gfiFeaturesObservables =
+        this.mapUtils.getGFIFeaturesObservablesFromClick(map, event)
+      const vectorFeatures$ = of(
+        this.mapUtils.getVectorFeaturesFromClick(map, event)
+      )
+
+      const featuresObservablesArray: Observable<Feature<Geometry>[]>[] = [
+        ...gfiFeaturesObservables,
+        vectorFeatures$,
+      ]
+
+      forkJoin(...featuresObservablesArray).subscribe((featuresArrays) => {
+        const allFeatures = featuresArrays.reduce(
+          (outputFeatures, features) => [...outputFeatures, ...features],
+          []
+        )
+        this.features$.emit(allFeatures)
+      })
+    })
+  }
+}

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

@@ -0,0 +1,61 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { UiMapModule } from '../../../../../libs/ui/map/src'
+import { defaultMapOptions, FEATURE_MAP_OPTIONS } from './constant'
+import { MapInstanceDirective } from './manager/map-instance.directive'
+import { MapContextComponent } from './map-context/component/map-context.component'
+import { LayersPanelComponent } from './layers-panel/layers-panel.component'
+import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTabsModule } from '@angular/material/tabs'
+import { TranslateModule } from '@ngx-translate/core'
+import { AddLayerFromCatalogComponent } from './add-layer-from-catalog/add-layer-from-catalog.component'
+import { FeatureSearchModule } from '../../../../../libs/feature/search/src'
+import { StoreModule } from '@ngrx/store'
+import { EffectsModule } from '@ngrx/effects'
+import * as fromMap from './+state/map.reducer'
+import { MapEffects } from './+state/map.effects'
+import { MapFacade } from './+state/map.facade'
+import { MapContainerComponent } from './map-container/map-container.component'
+import { AddLayerRecordPreviewComponent } from './add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
+import { UiElementsModule } from '../../../../../libs/ui/elements/src'
+import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+
+@NgModule({
+  declarations: [
+    MapContextComponent,
+    MapInstanceDirective,
+    LayersPanelComponent,
+    AddLayerFromCatalogComponent,
+    MapContainerComponent,
+    AddLayerRecordPreviewComponent,
+  ],
+  exports: [
+    MapContextComponent,
+    MapInstanceDirective,
+    LayersPanelComponent,
+    AddLayerFromCatalogComponent,
+    MapContainerComponent,
+  ],
+  imports: [
+    CommonModule,
+    UiMapModule,
+    UiLayoutModule,
+    MatIconModule,
+    MatTabsModule,
+    TranslateModule,
+    FeatureSearchModule,
+    StoreModule.forFeature(fromMap.MAP_FEATURE_KEY, fromMap.mapReducer),
+    EffectsModule.forFeature([MapEffects]),
+    UiElementsModule,
+    UiInputsModule,
+  ],
+  providers: [
+    {
+      provide: FEATURE_MAP_OPTIONS,
+      useValue: defaultMapOptions,
+    },
+    MapFacade,
+  ],
+})
+export class FeatureMapModule {}

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.html

@@ -0,0 +1,49 @@
+<div
+  class="bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden"
+>
+  <div class="p-3 border-b border-gray-300 flex items-center">
+    <mat-icon class="material-symbols-outlined mr-2">layers</mat-icon>
+    <span translate>map.layers.list</span>
+  </div>
+  <div class="flex flex-col px-4 divide-y divide-y-gray-50">
+    <div
+      *ngFor="let layer of layers$ | async; let index = index"
+      class="flex flex-row py-3"
+    >
+      <mat-icon class="material-symbols-outlined -ml-2 mr-2 shrink-0"
+        >chevron_right</mat-icon
+      >
+      <span class="mr-2 grow">{{ layer.title }}</span>
+      <a
+        href
+        class="underline text-sm text-red-700 hover:text-red-900"
+        (click)="deleteLayer(index)"
+      >
+        delete
+      </a>
+    </div>
+  </div>
+  <gn-ui-expandable-panel-button [titleTemplate]="addLayerTitle">
+    <mat-tab-group animationDuration="200ms" class="h-full">
+      <mat-tab [label]="'map.add.layer.catalog' | translate">
+        <div class="p-3">
+          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>
+        </div>
+      </mat-tab>
+      <mat-tab [label]="'map.add.layer.wms' | translate" bodyClass="h-full">
+        <div class="p-3 h-full">Add from WMS</div>
+      </mat-tab>
+      <mat-tab [label]="'map.add.layer.wfs' | translate" bodyClass="h-full">
+        <div class="p-3 h-full">Add from WFS</div>
+      </mat-tab>
+      <mat-tab [label]="'map.add.layer.file' | translate" bodyClass="h-full">
+        <div class="p-3 h-full">Add from file</div>
+      </mat-tab>
+    </mat-tab-group>
+  </gn-ui-expandable-panel-button>
+</div>
+
+<ng-template #addLayerTitle>
+  <mat-icon class="material-symbols-outlined mr-4">add_circle</mat-icon>
+  <span translate>map.add.layer</span>
+</ng-template>

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts

@@ -0,0 +1,17 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { MapFacade } from '../+state/map.facade'
+
+@Component({
+  selector: 'gn-ui-layers-panel',
+  templateUrl: './layers-panel.component.html',
+  styleUrls: ['./layers-panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LayersPanelComponent {
+  layers$ = this.mapFacade.layers$
+  constructor(private mapFacade: MapFacade) {}
+
+  deleteLayer(index: number) {
+    this.mapFacade.removeLayer(index)
+  }
+}

package/src/libs/feature/map/src/lib/manager/map-instance.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core'
+import { MapManagerService } from './map-manager.service'
+
+@Directive({
+  selector: '[gnUiMapContainer]',
+  providers: [MapManagerService],
+})
+export class MapInstanceDirective {
+  constructor(private manager: MapManagerService) {}
+}

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

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core'
+import Map from 'ol/Map'
+import { MapUtilsService } from '../utils/map-utils.service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MapManagerService {
+  readonly map: Map
+  constructor(private utils: MapUtilsService) {
+    this.map = this.utils.createEmptyMap()
+  }
+}

package/src/libs/feature/map/src/lib/map-container/map-container.component.html

@@ -0,0 +1 @@
+<gn-ui-map-context [context]="context$ | async"></gn-ui-map-context>

package/src/libs/feature/map/src/lib/map-container/map-container.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
+import { MapFacade } from '../+state/map.facade'
+import { MapContextModel } from '../map-context/map-context.model'
+import { DEFAULT_BASELAYER_CONTEXT } from '../map-context/map-context.service'
+
+@Component({
+  selector: 'gn-ui-map-container',
+  templateUrl: './map-container.component.html',
+  styleUrls: ['./map-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MapContainerComponent {
+  context$: Observable<MapContextModel> = this.mapFacade.layers$.pipe(
+    map((layers) => ({
+      view: {
+        center: [4, 42],
+        zoom: 6,
+      },
+      layers: [DEFAULT_BASELAYER_CONTEXT, ...layers],
+    }))
+  )
+
+  constructor(private mapFacade: MapFacade) {}
+}

package/src/libs/feature/map/src/lib/map-context/component/map-context.component.html

@@ -0,0 +1 @@
+<gn-ui-map [map]="map"></gn-ui-map>

package/src/libs/feature/map/src/lib/map-context/component/map-context.component.ts

@@ -0,0 +1,57 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+} from '@angular/core'
+import { MapUtilsService } from '../../utils/map-utils.service'
+import Feature from 'ol/Feature'
+import { Geometry } from 'ol/geom'
+
+import Map from 'ol/Map'
+import { FeatureInfoService } from '../../feature-info/feature-info.service'
+import { MapManagerService } from '../../manager/map-manager.service'
+import { MapContextModel } from '../map-context.model'
+import { MapContextService } from '../map-context.service'
+import { MapConfig } from '../../../../../../../libs/util/app-config/src'
+
+@Component({
+  selector: 'gn-ui-map-context',
+  templateUrl: './map-context.component.html',
+  styleUrls: ['./map-context.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MapContextComponent implements OnChanges {
+  @Input() context: MapContextModel
+  @Input() mapConfig: MapConfig
+  @Output() featureClicked = new EventEmitter<Feature<Geometry>[]>()
+
+  map: Map
+
+  constructor(
+    private service: MapContextService,
+    private featureInfo: FeatureInfoService,
+    private manager: MapManagerService,
+    private utils: MapUtilsService
+  ) {
+    this.map = manager.map
+  }
+
+  ngOnChanges() {
+    if (this.context?.view) {
+      if (this.context.view.extent && !this.map.getSize()) {
+        this.map.once('change:size', () => {
+          this.service.resetMapFromContext(
+            this.map,
+            this.context,
+            this.mapConfig
+          )
+        })
+      } else {
+        this.service.resetMapFromContext(this.map, this.context, this.mapConfig)
+      }
+    }
+  }
+}