geonetwork-ui 2.6.0-dev.3a78a5eaa → 2.6.0-dev.47d0cd11c

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

@@ -7,10 +7,10 @@ import {
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
 import { MdViewFacade } from '../state'
 import { BehaviorSubject, combineLatest, map } from 'rxjs'
-import { GN_UI_VERSION } from '../gn-ui-version.token'
 import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GEONETWORK_UI_TAG_NAME } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-data-view-web-component',
@@ -18,7 +18,7 @@ import { TranslateModule } from '@ngx-translate/core'
   styleUrls: ['./data-view-web-component.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, CopyTextButtonComponent, TranslateModule],
+  imports: [CommonModule, CopyTextButtonComponent, TranslatePipe],
 })
 export class DataViewWebComponentComponent {
   viewType$ = new BehaviorSubject<string>('map')
@@ -36,7 +36,7 @@ export class DataViewWebComponentComponent {
         if (config) {
           const { aggregation, xProperty, yProperty, chartType } = config
           return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
-            this.version
+            GEONETWORK_UI_TAG_NAME
           }/gn-wc.js"></script>
   <gn-dataset-view-chart
           api-url="${new URL(
@@ -59,7 +59,7 @@ export class DataViewWebComponentComponent {
         return ''
       } else if (viewType === 'table') {
         return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
-          this.version
+          GEONETWORK_UI_TAG_NAME
         }/gn-wc.js"></script>
   <gn-dataset-view-table
           api-url="${new URL(
@@ -76,7 +76,7 @@ export class DataViewWebComponentComponent {
   ></gn-dataset-view-table>`
       } else {
         return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
-          this.version
+          GEONETWORK_UI_TAG_NAME
         }/gn-wc.js"></script>
 <gn-dataset-view-map
         api-url="${new URL(
@@ -97,7 +97,6 @@ export class DataViewWebComponentComponent {
 
   constructor(
     @Inject(Configuration) private config: Configuration,
-    @Inject(GN_UI_VERSION) private version: string,
     private facade: MdViewFacade
   ) {}
 }

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

@@ -1,9 +1,9 @@
 <gn-ui-button
   *ngIf="externalViewer"
   (buttonClick)="openInExternalViewer()"
-  type="secondary"
+  type="primary"
   [title]="'record.externalViewer.open' | translate"
-  extraClass="ms-2 !rounded-lg"
+  [extraClass]="extraClass + 'bg-primary ms-2 !rounded-lg'"
 >
   <ng-icon name="matOpenInNew"></ng-icon>
 </gn-ui-button>

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

@@ -8,7 +8,7 @@ import {
 } from '@angular/core'
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
@@ -31,11 +31,12 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
   styleUrls: ['./external-viewer-button.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, ButtonComponent, NgIcon, TranslateModule],
+  imports: [CommonModule, ButtonComponent, NgIcon, TranslatePipe],
   viewProviders: [provideIcons({ matOpenInNew })],
 })
 export class ExternalViewerButtonComponent {
   @Input() link: DatasetOnlineResource
+  @Input() extraClass = ''
 
   get externalViewer() {
     return !!this.urlTemplate && !!this.supportedLinkLayerType

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

@@ -2,13 +2,8 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 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 {
-  DropdownSelectorComponent,
-  UiInputsModule,
-} from '../../../../../libs/ui/inputs/src'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
+import { DropdownSelectorComponent } from '../../../../../libs/ui/inputs/src'
 import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
 import {
@@ -16,8 +11,7 @@ import {
   reducer,
 } from './state/mdview.reducer'
 import { MatTabsModule } from '@angular/material/tabs'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
 import { DataTableComponent } from '../../../../../libs/ui/dataviz/src'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
@@ -27,14 +21,11 @@ import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
     CommonModule,
     StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
     EffectsModule.forFeature([MdViewEffects]),
-    UiLayoutModule,
     FeatureMapModule,
     FeatureCatalogModule,
-    UiInputsModule,
-    UiElementsModule,
     MatTabsModule,
-    UiWidgetsModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     DataTableComponent,
     NgIconsModule,
     DropdownSelectorComponent,

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.ts

@@ -5,12 +5,12 @@ import {
   OnInit,
 } from '@angular/core'
 import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { BehaviorSubject, Observable, combineLatest, map, mergeMap } from 'rxjs'
+import { BehaviorSubject, combineLatest, map, mergeMap, Observable } from 'rxjs'
 import { HttpClient } from '@angular/common/http'
 import { Choice, DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 import axios from 'axios'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { GpfApiDlListItemComponent } from '../gpf-api-dl-list-item/gpf-api-dl-list-item.component'
 
 export interface Label {
@@ -57,7 +57,8 @@ export interface Field {
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     DropdownSelectorComponent,
     GpfApiDlListItemComponent,
   ],

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.ts

@@ -1,16 +1,22 @@
 import { CommonModule } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { Component, Input, OnInit } from '@angular/core'
-import { NgIconsModule } from '@ng-icons/core'
-import { TranslateModule } from '@ngx-translate/core'
-import { Observable, map, mergeMap } from 'rxjs'
+import { NgIconsModule, provideIcons } from '@ng-icons/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { map, mergeMap, Observable } from 'rxjs'
+import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-gpf-api-dl-list-item',
   templateUrl: './gpf-api-dl-list-item.component.html',
   styleUrls: ['./gpf-api-dl-list-item.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslateModule, NgIconsModule],
+  imports: [CommonModule, TranslateDirective, TranslatePipe, NgIconsModule],
+  providers: [
+    provideIcons({
+      matCloudDownloadOutline,
+    }),
+  ],
 })
 export class GpfApiDlListItemComponent implements OnInit {
   @Input() link

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

@@ -1,18 +1,42 @@
-<div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end">
+<div class="w-full h-full flex flex-col gap-[13px]">
+  <div
+    class="flex flex-col md:flex-row gap-4 py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+  >
     <gn-ui-dropdown-selector
-      [ngClass]="{ hidden: !displaySource }"
-      class="truncate p-1 -mx-1 mb-1"
-      extraBtnClass="!text-primary font-sans font-medium"
+      *ngIf="displaySource"
+      class="w-full md:flex-1 md:min-w-0"
+      extraBtnClass="font-sans font-bold"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"
       (selectValue)="selectLinkToDisplay($event)"
     ></gn-ui-dropdown-selector>
-    <gn-ui-external-viewer-button
-      class="shrink-0 py-1 place-self-end"
-      [link]="selectedLink$ | async"
-    >
-    </gn-ui-external-viewer-button>
+
+    <ng-container *ngIf="(styleLinks$ | async)?.length > 0; else styleDisabled">
+      <gn-ui-dropdown-selector
+        class="w-full md:flex-1 md:min-w-0"
+        extraBtnClass="font-sans font-bold"
+        [title]="'map.select.style' | translate"
+        [choices]="styleDropdownChoices$ | async"
+        (selectValue)="selectStyleToDisplay($event)"
+      ></gn-ui-dropdown-selector>
+    </ng-container>
+    <ng-template #styleDisabled>
+      <gn-ui-dropdown-selector
+        class="w-full md:flex-1 md:min-w-0 text-gray-400"
+        extraBtnClass="font-sans font-bold text-gray-400"
+        [title]="'map.select.style' | translate"
+        [choices]="styleDropdownChoices$ | async"
+        [disabled]="true"
+      ></gn-ui-dropdown-selector>
+    </ng-template>
+
+    <div class="self-end md:ml-2">
+      <gn-ui-external-viewer-button
+        extraClass="w-[44px] h-[44px]"
+        [link]="selectedLink$ | async"
+      >
+      </gn-ui-external-viewer-button>
+    </div>
   </div>
   <ng-container *ngIf="hidePreview; else mapView">
     <gn-ui-popup-alert
@@ -31,6 +55,7 @@
         #mapContainer
         [context]="mapContext$ | async"
         (featuresClick)="onMapFeatureSelect($event)"
+        (sourceLoadError)="onSourceLoadError($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"
@@ -48,7 +73,10 @@
         >
           <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
         </gn-ui-button>
-        <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
+        <gn-ui-feature-detail
+          [featureCatalog]="mdViewFacade.featureCatalog$ | async"
+          [feature]="selection"
+        ></gn-ui-feature-detail>
       </div>
 
       <div

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

@@ -3,7 +3,9 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  EventEmitter,
   Input,
+  Output,
   ViewChild,
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
@@ -25,21 +27,26 @@ import {
   map,
   shareReplay,
   switchMap,
+  take,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetOnlineResource,
+  DatasetServiceDistribution,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
+  SourceLoadErrorEvent,
 } from '@geospatial-sdk/core'
 import {
   FeatureDetailComponent,
   MapContainerComponent,
-  prioritizePageScroll,
   MapLegendComponent,
+  prioritizePageScroll,
 } from '../../../../../../libs/ui/map/src'
 import { Feature } from 'geojson'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
@@ -49,16 +56,23 @@ import {
   ButtonComponent,
   DropdownSelectorComponent,
 } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component'
 import {
   LoadingMaskComponent,
   PopupAlertComponent,
 } from '../../../../../../libs/ui/widgets/src'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { FetchError } from '../../../../../../libs/util/data-fetcher/src'
 
 marker('map.dropdown.placeholder')
 marker('wfs.feature.limit')
+marker('dataset.error.restrictedAccess')
+marker('map.select.style')
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -72,7 +86,8 @@ marker('wfs.feature.limit')
     MapContainerComponent,
     FeatureDetailComponent,
     PopupAlertComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     LoadingMaskComponent,
     NgIconComponent,
     ExternalViewerButtonComponent,
@@ -85,7 +100,15 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  @Input() set selectedView(value: string) {
+    if (value === 'map') {
+      this.selectedLink$.pipe(take(1)).subscribe((link) => {
+        this.linkSelected.emit(link)
+      })
+    }
+  }
   @Input() displaySource = true
+  @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)
@@ -93,25 +116,33 @@ export class MapViewComponent implements AfterViewInit {
   selection: Feature
   showLegend = true
   legendExists = false
+  loading = false
+  error = null
+
+  selectLinkToDisplay(i: number) {
+    this.selectedLinkIndex$.next(i)
+  }
+
+  selectStyleToDisplay(i: number) {
+    this.selectedStyleIndex$.next(i)
+  }
 
   toggleLegend() {
     this.showLegend = !this.showLegend
   }
-
-  onLegendStatusChange(status: boolean) {
-    this.legendExists = status
-    if (!status) {
-      this.showLegend = false
-    }
+  onLegendStatusChange(v: boolean) {
+    this.legendExists = v
   }
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,
     this.mdViewFacade.geoDataLinksWithGeometry$,
   ]).pipe(
-    map(([mapApiLinks, geoDataLinksWithGeometry]) => {
-      return [...mapApiLinks, ...geoDataLinksWithGeometry]
-    })
+    map(([mapApiLinks, geoDataLinksWithGeometry]) => [
+      ...mapApiLinks,
+      ...geoDataLinksWithGeometry,
+    ]),
+    shareReplay(1)
   )
 
   dropdownChoices$ = this.compatibleMapLinks$.pipe(
@@ -124,15 +155,84 @@ export class MapViewComponent implements AfterViewInit {
         : [{ label: 'map.dropdown.placeholder', value: 0 }]
     )
   )
-  selectedLinkIndex$ = new BehaviorSubject(0)
 
-  loading = false
-  error = null
+  selectedLinkIndex$ = new BehaviorSubject(0)
+  private selectedStyleIndex$ = new BehaviorSubject(0)
 
-  selectedLink$ = combineLatest([
+  selectedSourceLink$ = combineLatest([
     this.compatibleMapLinks$,
     this.selectedLinkIndex$.pipe(distinctUntilChanged()),
-  ]).pipe(map(([links, index]) => links[index]))
+  ]).pipe(
+    tap(() => {
+      this.error = null
+    }),
+    map(([links, index]) => {
+      this.linkSelected.emit(links[index])
+      return links[index]
+    })
+  )
+
+  styleLinks$ = this.selectedSourceLink$.pipe(
+    switchMap((src) => {
+      if (
+        src &&
+        src.type === 'service' &&
+        src.accessServiceProtocol === 'tms'
+      ) {
+        return from(
+          // WARNING: when using "getGeodataLinksFromTms", make sure to add error handling to prevent the rest of the logic from failing
+          // this may happen when TMS endpoint is in error
+          this.dataService.getGeodataLinksFromTms(
+            src as DatasetServiceDistribution,
+            false
+          )
+        ).pipe(
+          // We need to check for maplibre-style links because when a TMS service has no styles,
+          // getGeodataLinksFromTms returns the original TMS link, which isn't a maplibre-style link
+          map(
+            (links) =>
+              links?.filter(
+                (link) =>
+                  link.type === 'service' &&
+                  link.accessServiceProtocol === 'maplibre-style'
+              ) || []
+          ),
+          catchError((error) => {
+            this.handleError(error)
+            return of(src)
+          })
+        )
+      }
+      return of([])
+    }),
+    tap(() => this.selectedStyleIndex$.next(0)),
+    shareReplay(1)
+  )
+
+  styleDropdownChoices$ = this.styleLinks$.pipe(
+    map((links) =>
+      links.length
+        ? links.map((link, index) => ({
+            label: getLinkLabel(link),
+            value: index,
+          }))
+        : [
+            {
+              label: '\u00A0\u00A0\u00A0\u00A0',
+              value: 0,
+            },
+          ]
+    )
+  )
+
+  selectedLink$ = combineLatest([
+    this.selectedSourceLink$,
+    this.styleLinks$,
+    this.selectedStyleIndex$.pipe(distinctUntilChanged()),
+  ]).pipe(
+    map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
+    shareReplay(1)
+  )
 
   currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(
     switchMap(([link, excludeWfs]) => {
@@ -145,12 +245,14 @@ export class MapViewComponent implements AfterViewInit {
       }
       this.hidePreview = false
       this.loading = true
-      this.error = null
+      if (link.accessRestricted) {
+        this.handleError('dataset.error.restrictedAccess')
+        return of([])
+      }
       return this.getLayerFromLink(link).pipe(
         map((layer) => [layer]),
         catchError((e) => {
-          this.error = e.message
-          console.warn(e.stack || e.message)
+          this.handleError(e)
           return of([])
         }),
         finalize(() => (this.loading = false))
@@ -192,7 +294,8 @@ export class MapViewComponent implements AfterViewInit {
     private mdViewFacade: MdViewFacade,
     private mapUtils: MapUtilsService,
     private dataService: DataService,
-    private changeRef: ChangeDetectorRef
+    private changeRef: ChangeDetectorRef,
+    private translateService: TranslateService
   ) {}
 
   async ngAfterViewInit() {
@@ -210,6 +313,16 @@ export class MapViewComponent implements AfterViewInit {
     this.changeRef.detectChanges()
   }
 
+  onSourceLoadError(error: SourceLoadErrorEvent) {
+    if (error.httpStatus === 403 || error.httpStatus === 401) {
+      this.error = this.translateService.instant(`dataset.error.forbidden`)
+    } else {
+      this.error = this.translateService.instant(`dataset.error.http`, {
+        info: error.httpStatus,
+      })
+    }
+  }
+
   resetSelection(): void {
     if (this.selection) {
       // FIXME: restore styling of selected feature
@@ -225,6 +338,26 @@ export class MapViewComponent implements AfterViewInit {
         type: 'wms',
         name: link.name,
       })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'tms'
+    ) {
+      // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
+      return of({
+        url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+        type: 'xyz',
+        tileFormat: 'application/vnd.mapbox-vector-tile',
+        name: link.name,
+      })
+    } else if (
+      link.type === 'service' &&
+      link.accessServiceProtocol === 'maplibre-style'
+    ) {
+      return of({
+        type: 'maplibre-style',
+        name: link.name,
+        styleUrl: link.url.toString(),
+      })
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'wmts'
@@ -251,8 +384,23 @@ export class MapViewComponent implements AfterViewInit {
     }
     return throwError(() => 'protocol not supported')
   }
-
-  selectLinkToDisplay(link: number) {
-    this.selectedLinkIndex$.next(link)
+  handleError(error: FetchError | Error | string) {
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else if (error instanceof Error) {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    } else {
+      this.error = this.translateService.instant(error)
+      console.warn(error)
+    }
+    this.loading = false
+    this.changeRef.detectChanges()
   }
 }

package/src/libs/feature/record/src/lib/record-meta/record-meta.component.ts

@@ -6,7 +6,7 @@ import {
   OnDestroy,
 } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
-import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 @Component({
   selector: 'gn-ui-record-meta',
@@ -15,7 +15,7 @@ import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/mode
   standalone: true,
 })
 export class RecordMetaComponent implements OnDestroy, OnChanges {
-  @Input() metadata: DatasetRecord
+  @Input() metadata: CatalogRecord
 
   constructor(private meta: Meta) {}
 

package/src/libs/feature/record/src/lib/state/mdview.actions.ts

@@ -54,6 +54,16 @@ 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[] }>()
+)
+
 /*
   ChartConfig actions
  */

package/src/libs/feature/record/src/lib/state/mdview.effects.ts

@@ -1,16 +1,18 @@
 import { Injectable } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { exhaustMap, mergeMap, of } from 'rxjs'
-import { catchError, filter, map, switchMap, take } from 'rxjs/operators'
+import { catchError, filter, map, switchMap } from 'rxjs/operators'
 import * as MdViewActions from './mdview.actions'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { Router } from '@angular/router'
 @Injectable()
 export class MdViewEffects {
   constructor(
     private actions$: Actions,
     private recordsRepository: RecordsRepositoryInterface,
-    private platformServiceInterface: PlatformServiceInterface
+    private platformServiceInterface: PlatformServiceInterface,
+    private router: Router
   ) {}
 
   /*
@@ -21,7 +23,7 @@ export class MdViewEffects {
       ofType(MdViewActions.loadFullMetadata),
       switchMap(({ uuid }) => this.recordsRepository.getRecord(uuid)),
       map((record) => {
-        if (record === null) {
+        if (record === null || !this.router.url.includes(record.kind)) {
           return MdViewActions.loadFullMetadataFailure({ notFound: true })
         }
         return MdViewActions.loadFullMetadataSuccess({ full: record })
@@ -66,6 +68,28 @@ export class MdViewEffects {
     )
   )
 
+  loadSources$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(MdViewActions.loadFullMetadataSuccess),
+      switchMap(({ full }) => this.recordsRepository.getSources(full)),
+      map((sources) => {
+        return MdViewActions.setSources({ sources })
+      }),
+      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 })))
+    )
+  )
+
   /*
     UserFeedback effects
   */