geonetwork-ui 2.6.0-dev.502fa026d → 2.6.0-dev.5257edce4

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
@@ -49,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,11 +27,15 @@ 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,
@@ -39,8 +45,8 @@ import {
 import {
   FeatureDetailComponent,
   MapContainerComponent,
-  prioritizePageScroll,
   MapLegendComponent,
+  prioritizePageScroll,
 } from '../../../../../../libs/ui/map/src'
 import { Feature } from 'geojson'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
@@ -50,7 +56,11 @@ import {
   ButtonComponent,
   DropdownSelectorComponent,
 } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component'
 import {
   LoadingMaskComponent,
@@ -61,6 +71,8 @@ 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',
@@ -74,7 +86,8 @@ marker('wfs.feature.limit')
     MapContainerComponent,
     FeatureDetailComponent,
     PopupAlertComponent,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     LoadingMaskComponent,
     NgIconComponent,
     ExternalViewerButtonComponent,
@@ -87,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)
@@ -95,22 +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
+  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(
@@ -123,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]) => {
@@ -144,7 +245,10 @@ 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) => {
@@ -234,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'
@@ -260,11 +384,6 @@ 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(

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
   */

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

@@ -6,6 +6,7 @@ import {
   filter,
   map,
   mergeMap,
+  shareReplay,
   switchMap,
   toArray,
 } from 'rxjs/operators'
@@ -15,12 +16,11 @@ import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/sh
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
-  DatasetServiceDistribution,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 import { OgcApiRecord } from '@camptocamp/ogc-client'
-import { from, of } from 'rxjs'
+import { from, of, Observable } from 'rxjs'
 import { DataService } from '../../../../../../libs/feature/dataviz/src'
 
 @Injectable()
@@ -76,28 +76,24 @@ export class MdViewFacade {
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))
 
+  sources$ = this.store.pipe(select(MdViewSelectors.getSources))
+
+  sourceOf$ = this.store.pipe(select(MdViewSelectors.getSourceOf))
+
   chartConfig$ = this.store.pipe(select(MdViewSelectors.getChartConfig))
 
   allLinks$ = this.metadata$.pipe(
     map((record) =>
-      record.kind === 'dataset' && 'onlineResources' in record
-        ? record.onlineResources
-        : []
-    )
+      'onlineResources' in record ? record.onlineResources : []
+    ),
+    shareReplay(1)
   )
 
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
-      links
-        .filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
-        // Put links to IGN Géoplateforme first
-        .sort((dd1, dd2) => {
-          return (dd2 as DatasetServiceDistribution).accessServiceProtocol ===
-            'GPFDL'
-            ? 1
-            : undefined // do not change the sorting otherwise
-        })
-    )
+      links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+    ),
+    shareReplay(1)
   )
 
   mapApiLinks$ = this.allLinks$.pipe(
@@ -105,7 +101,8 @@ export class MdViewFacade {
       links.filter((link) =>
         this.linkClassifier.hasUsage(link, LinkUsage.MAP_API)
       )
-    )
+    ),
+    shareReplay(1)
   )
 
   downloadLinks$ = this.allLinks$.pipe(
@@ -219,4 +216,11 @@ export class MdViewFacade {
   loadUserFeedbacks(datasetUuid: string) {
     this.store.dispatch(MdViewActions.loadUserFeedbacks({ datasetUuid }))
   }
+
+  /**
+   * loadFeatureCatalog
+   */
+  loadFeatureCatalog(metadata: CatalogRecord) {
+    this.store.dispatch(MdViewActions.loadFeatureCatalog({ metadata }))
+  }
 }

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

@@ -14,6 +14,8 @@ export interface MetadataViewState {
   error: { notFound?: boolean; otherError?: string } | null
   metadata?: Partial<CatalogRecord>
   related?: CatalogRecord[]
+  sources?: CatalogRecord[]
+  sourceOf?: CatalogRecord[]
   userFeedbacks?: UserFeedback[]
   allUserFeedbacksLoading: boolean
   addUserFeedbackLoading: boolean
@@ -75,6 +77,16 @@ const metadataViewReducer = createReducer(
     related,
   })),
 
+  on(MetadataViewActions.setSources, (state, { sources }) => ({
+    ...state,
+    sources,
+  })),
+
+  on(MetadataViewActions.setSourceOf, (state, { sourceOf }) => ({
+    ...state,
+    sourceOf,
+  })),
+
   /*
     ChartConfig reducers
   */

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

@@ -41,6 +41,15 @@ export const getRelated = createSelector(
   (state: MetadataViewState) => state.related
 )
 
+export const getSources = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.sources
+)
+
+export const getSourceOf = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.sourceOf
+)
 /*
   Metadata selectors
 */