geonetwork-ui 2.6.0-dev.9df114cd4 → 2.6.0-dev.a225a5e7a

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -6,6 +6,7 @@ import {
   OgcApiRecord,
   WfsEndpoint,
   WfsVersion,
+  TmsEndpoint,
 } from '@camptocamp/ogc-client'
 import {
   BaseReader,
@@ -231,6 +232,42 @@ export class DataService {
       })
   }
 
+  async getGeodataLinksFromTms(
+    tmsLink: DatasetServiceDistribution,
+    keepOriginalLink = false
+  ): Promise<DatasetServiceDistribution[]> {
+    const endpoint = new TmsEndpoint(tmsLink.url.toString())
+    const tileMaps = await endpoint.allTileMaps
+    if (!tileMaps?.length) return null
+
+    // TODO: at some point use the identifierInService field if more that one layers in the TMS service
+    const tileMapInfo = await endpoint.getTileMapInfo(tileMaps[0].href)
+
+    // case 1: no styles; return a plain TMS link
+    if (!tileMapInfo?.metadata?.length) return [tmsLink]
+
+    // case 2: styles present; return each as a separate link
+    const styleLinks = tileMapInfo.metadata
+      .filter((meta) => meta.href)
+      .map((meta) => {
+        const fileName = meta.href.split('/').pop() || ''
+        const linkName =
+          tmsLink.description || ('name' in tmsLink ? tmsLink.name : '')
+        const styleName = fileName.split('.')[0]
+        const name = `${linkName} - ${styleName}`
+        return {
+          type: 'service',
+          url: new URL(meta.href),
+          name,
+          accessServiceProtocol: 'maplibre-style',
+        } as DatasetServiceDistribution
+      })
+    if (keepOriginalLink) {
+      styleLinks.unshift(tmsLink)
+    }
+    return styleLinks
+  }
+
   getDownloadLinksFromEsriRest(
     esriRestLink: DatasetServiceDistribution
   ): DatasetOnlineResource[] {

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.html

@@ -4,6 +4,7 @@
       *ngIf="tableData$ | async as dataset"
       class="overflow-auto grow"
       [dataset]="dataset"
+      [featureAttributes]="featureAttributes"
       (selected)="onTableSelect($event)"
     ></gn-ui-data-table>
     <gn-ui-loading-mask

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.ts

@@ -6,11 +6,15 @@ import {
   shareReplay,
   startWith,
   switchMap,
+  tap,
 } from 'rxjs/operators'
 import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
 import { DataTableComponent } from '../../../../../../libs/ui/dataviz/src'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetFeatureCatalog,
+  DatasetOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import {
   LoadingMaskComponent,
@@ -33,6 +37,8 @@ import { CommonModule } from '@angular/common'
   standalone: true,
 })
 export class TableViewComponent {
+  featureAttributes = []
+  @Input() featureCatalog: DatasetFeatureCatalog
   @Input() cacheActive = true
   @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
@@ -52,6 +58,7 @@ export class TableViewComponent {
       }
       this.loading = true
       return this.getDatasetReader(link).pipe(
+        tap((dataset: BaseReader) => this.setProperties(dataset)),
         catchError((error) => {
           this.handleError(error)
           return of(undefined)
@@ -96,4 +103,23 @@ export class TableViewComponent {
     }
     this.loading = false
   }
+
+  setProperties(dataset: BaseReader) {
+    dataset.properties.then((properties) => {
+      const updatedProperties = properties.map((p) => {
+        let label = p.name
+        if (this.featureCatalog) {
+          const attributes = this.featureCatalog.featureTypes[0].attributes
+          const matchingAttribute = attributes.find(
+            (attr) => attr.name === p.name
+          )
+          if (matchingAttribute && matchingAttribute.code) {
+            label = matchingAttribute.code
+          }
+        }
+        return { value: p.name, label }
+      })
+      this.featureAttributes = updatedProperties
+    })
+  }
 }

package/src/libs/feature/editor/src/index.ts

@@ -11,3 +11,4 @@ export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'
 export * from './lib/components/wizard-summarize/wizard-summarize.component'
 export * from './lib/components/record-form/form-field'
+export * from './lib/components/multilingual-panel/multilingual-panel.component'

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.html

@@ -0,0 +1,120 @@
+<div
+  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-8 px-3 gap-6 overflow-auto"
+>
+  <div class="flex flex-row px-2 justify-between">
+    <span class="text-3xl font-title text-black/80" translate
+      >editor.record.form.multilingual.title</span
+    >
+    <button
+      [title]="'editor.record.form.multilingual.open' | translate"
+      (click)="toggleLanguageSelection()"
+      *ngIf="isMultilingual"
+      data-test="activateSelection"
+    >
+      <ng-icon class="mt-1" name="iconoirSettings"></ng-icon>
+    </button>
+  </div>
+  <div class="flex flex-col gap-2" *ngIf="editTranslations || !isMultilingual">
+    <gn-ui-check-toggle
+      class="p-2"
+      [label]="'editor.record.form.multilingual.enable' | translate"
+      [color]="'primary'"
+      [(value)]="isMultilingual"
+      (toggled)="switchMultilingual($event)"
+    ></gn-ui-check-toggle>
+    <div *ngIf="isMultilingual" class="flex flex-col gap-2">
+      <div class="flex flex-row justify-between border-t border-gray-300 p-3">
+        <span class="mt-2 text-sm text-gray-600" translate
+          >editor.record.form.multilingual.activate</span
+        >
+        <gn-ui-button
+          extraClass="w-16 h-8 font-bold"
+          type="gray"
+          (buttonClick)="validateTranslations()"
+          data-test="validateSelection"
+          >{{ 'editor.record.form.multilingual.validate' | translate }}
+        </gn-ui-button>
+      </div>
+      <ng-container *ngIf="supportedLanguages$ | async as languages">
+        <div
+          class="flex flex-col gap-2 w-full px-2"
+          data-test="langAvailable"
+          *ngFor="let lang of languages"
+        >
+          <gn-ui-button
+            [extraClass]="getExtraClass(lang)"
+            type="gray"
+            (buttonClick)="toggleLanguage(lang)"
+            [disabled]="lang === _record.defaultLanguage"
+            [title]="getToggleTitle(lang)"
+          >
+            <span [class]="getIconClass(lang)"></span>
+            <span class="ml-2">{{ 'language.' + lang | translate }}</span>
+          </gn-ui-button>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+  <div *ngIf="!editTranslations && isMultilingual" class="flex flex-col gap-2">
+    <gn-ui-button
+      *ngFor="let recordLang of sortLanguages(recordLanguages); let i = index"
+      extraClass="flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full"
+      [ngClass]="{
+        'mt-8': isFirstUnsupported(i),
+        '': true,
+      }"
+      (buttonClick)="switchFormLang(recordLang)"
+      type="outline"
+      data-test="langSwitch"
+    >
+      <div class="flex flex-row gap-2 items-center">
+        <ng-icon
+          *ngIf="recordLang === formLanguage"
+          class="text-primary mt-1"
+          name="iconoirCheckCircle"
+        ></ng-icon>
+        <ng-icon
+          *ngIf="recordLang !== formLanguage"
+          class="text-gray-800 mt-1"
+          name="iconoirCircle"
+        ></ng-icon>
+        <span
+          *ngIf="recordLang.length === 2"
+          [class]="getIconClass(recordLang) + 'mt-1'"
+        ></span>
+        <span [ngClass]="recordLang === formLanguage ? 'text-black' : ''">{{
+          isLangSupported(recordLang)
+            ? ('language.' + recordLang | translate)
+            : recordLang.toUpperCase()
+        }}</span>
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <span
+          *ngIf="recordLang === formLanguage"
+          class="text-xs text-base"
+          translate
+          >editor.record.form.multilingual.default</span
+        >
+        <button
+          (click)="
+            openActionMenu(recordLang, template); $event.stopPropagation()
+          "
+          cdkOverlayOrigin
+          #actionMenuButton
+        >
+          <ng-icon class="pb-5" name="matMoreHorizOutline"></ng-icon>
+        </button>
+        <ng-template #template>
+          <gn-ui-action-menu
+            [canDelete]="recordLang !== _record.defaultLanguage"
+            page="record"
+            (delete)="confirmDeleteAction(recordLang)"
+            (closeActionMenu)="closeActionMenu()"
+            (switch)="switchDefaultLang(recordLang)"
+          >
+          </gn-ui-action-menu>
+        </ng-template>
+      </div>
+    </gn-ui-button>
+  </div>
+</div>

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.ts

@@ -0,0 +1,325 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  QueryList,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent, CheckToggleComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  iconoirCheckCircle,
+  iconoirCircle,
+  iconoirSettings,
+} from '@ng-icons/iconoir'
+import { matMoreHorizOutline } from '@ng-icons/material-icons/outline'
+import { EditorFacade } from '../../+state/editor.facade'
+import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elements/src'
+import { MatDialog } from '@angular/material/dialog'
+import { RecordsRepositoryInterface } from '../../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
+import { map, Subscription } from 'rxjs'
+import { Overlay, OverlayRef } from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
+import { ActionMenuComponent } from '../../../../../../../libs/ui/search/src'
+
+const extraFlagMap: { [key: string]: string } = {
+  ar: 'arab',
+  en: 'gb',
+  ko: 'kr',
+  cs: 'cz',
+  zh: 'cn',
+  ca: 'es-ct',
+  rm: 'ch',
+  da: 'dk',
+  sv: 'se',
+  cy: 'gb-wls',
+  hy: 'am',
+  ka: 'ge',
+  uk: 'ua',
+}
+
+@Component({
+  selector: 'gn-ui-multilingual-panel',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CheckToggleComponent,
+    TranslateModule,
+    ButtonComponent,
+    NgIconComponent,
+    ActionMenuComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirSettings,
+      matMoreHorizOutline,
+      iconoirCheckCircle,
+      iconoirCircle,
+    }),
+    provideNgIconsConfig({
+      size: '1.25em',
+    }),
+  ],
+  templateUrl: './multilingual-panel.component.html',
+  styleUrl: './multilingual-panel.component.css',
+})
+export class MultilingualPanelComponent implements OnDestroy {
+  isMultilingual: boolean
+  _record: CatalogRecord
+  editTranslations: boolean
+  selectedLanguages = []
+  recordLanguages = []
+  formLanguage = ''
+  @Input() set record(value: CatalogRecord) {
+    this._record = value
+    this.isMultilingual = value.otherLanguages.length > 0
+    this.editTranslations = false
+    this.recordLanguages = [...value.otherLanguages, value.defaultLanguage]
+    this.selectedLanguages = this.recordLanguages
+    this.formLanguage = value.defaultLanguage
+  }
+  @ViewChildren('actionMenuButton', { read: ElementRef })
+  actionMenuButtons!: QueryList<ElementRef>
+  private overlayRef!: OverlayRef
+
+  isActionMenuOpen = false
+  subscription = new Subscription()
+
+  supportedLanguages$ = this.recordsRepository
+    .getApplicationLanguages()
+    .pipe(map((languages) => this.sortLanguages(languages)))
+
+  constructor(
+    public facade: EditorFacade,
+    public dialog: MatDialog,
+    private translateService: TranslateService,
+    private recordsRepository: RecordsRepositoryInterface,
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
+
+  sortLanguages(languages: string[]) {
+    return languages
+      .map((lang) => {
+        const label = this.translateService.instant('language.' + lang)
+        const isTranslated = label !== 'language.' + lang
+
+        return {
+          lang,
+          label,
+          isTranslated,
+        }
+      })
+      .sort((a, b) => {
+        if (a.isTranslated && !b.isTranslated) return -1
+        if (!a.isTranslated && b.isTranslated) return 1
+
+        return a.label.localeCompare(b.label)
+      })
+      .map((item) => item.lang)
+  }
+
+  toggleLanguageSelection() {
+    this.editTranslations = !this.editTranslations
+  }
+
+  getIconClass(lang: string) {
+    return extraFlagMap[lang]
+      ? `fi fi-${extraFlagMap[lang]} w-4 h-3`
+      : `fi fi-${lang} w-4 h-3`
+  }
+
+  switchMultilingual() {
+    if (this.isMultilingual && this.selectedLanguages.length > 1) {
+      this.confirmDeleteAction()
+    } else {
+      this.isMultilingual = true
+      this.editTranslations = true
+    }
+  }
+
+  getExtraClass(lang: string) {
+    const baseClass = 'h-[34px] w-full font-bold justify-start hover:bg-white'
+    if (this.selectedLanguages.includes(lang)) {
+      return `${baseClass} bg-white border border-black`
+    }
+    return baseClass
+  }
+
+  toggleLanguage(lang: string) {
+    if (this.selectedLanguages.includes(lang)) {
+      this.removeSelectedLanguage(lang)
+    } else {
+      this.selectedLanguages.push(lang)
+    }
+  }
+
+  removeSelectedLanguage(lang: string) {
+    this.selectedLanguages = this.selectedLanguages.filter(
+      (language) => language !== lang
+    )
+  }
+
+  validateTranslations() {
+    const equalLength =
+      this.selectedLanguages.length === this.recordLanguages.length
+    if (
+      this.selectedLanguages.length < this.recordLanguages.length ||
+      (equalLength && this.selectedLanguages !== this.recordLanguages)
+    ) {
+      this.confirmDeleteAction(this.selectedLanguages)
+    } else {
+      this.updateTranslations()
+    }
+  }
+
+  updateTranslations() {
+    this.facade.updateRecordField(
+      'otherLanguages',
+      this.selectedLanguages.filter((lang) => lang !== this.formLanguage)
+    )
+    this.recordLanguages = this.selectedLanguages
+    this.editTranslations = false
+  }
+
+  switchFormLang(lang) {
+    // TO IMPLEMENT FURTHER
+  }
+
+  switchDefaultLang(lang: string) {
+    this.formLanguage = lang
+    this.facade.updateRecordField('defaultLanguage', lang)
+    this.facade.updateRecordField(
+      'otherLanguages',
+      this.selectedLanguages.filter((lang) => lang !== this.formLanguage)
+    )
+    this.closeActionMenu()
+  }
+
+  confirmDeleteAction(lang?: string[] | string) {
+    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: {
+        title: this.translateService.instant(
+          'editor.record.multilingual.confirmation.title'
+        ),
+        message: this.translateService.instant(
+          'editor.record.multilingual.confirmation.message'
+        ),
+        confirmText: this.translateService.instant(
+          'editor.record.multilingual.confirmation.confirmText'
+        ),
+        cancelText: this.translateService.instant(
+          'editor.record.multilingual.confirmation.cancelText'
+        ),
+      },
+      restoreFocus: true,
+    })
+    this.subscription.add(
+      dialogRef.afterClosed().subscribe((confirmed) => {
+        if (confirmed) {
+          if (lang) {
+            if (!Array.isArray(lang)) {
+              this.removeSelectedLanguage(lang)
+              this.closeActionMenu()
+            }
+            this.updateTranslations()
+          } else {
+            this.facade.updateRecordField('otherLanguages', [])
+            this.isMultilingual = false
+            this.selectedLanguages = []
+          }
+        } else {
+          this.isMultilingual = true
+          this.selectedLanguages = this.recordLanguages
+        }
+        this.editTranslations = false
+      })
+    )
+  }
+
+  isFirstUnsupported(index: number): boolean {
+    const langs = this.sortLanguages(this.recordLanguages)
+    return (
+      langs[index].length === 3 &&
+      langs.slice(0, index).every((lang) => lang.length !== 3)
+    )
+  }
+
+  isLangSupported(lang: string) {
+    return lang.length === 2
+  }
+
+  getToggleTitle(lang: string) {
+    if (lang === this._record.defaultLanguage) {
+      return this.translateService.instant(
+        'editor.record.form.multilingual.forbidden'
+      )
+    }
+    return ''
+  }
+
+  openActionMenu(item: string, template) {
+    this.isActionMenuOpen = true
+    const index = this.sortLanguages(this.selectedLanguages).indexOf(item)
+    const buttonElement = this.actionMenuButtons.toArray()[index]
+
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo(buttonElement)
+      .withFlexibleDimensions(true)
+      .withPush(true)
+      .withPositions([
+        {
+          originX: 'end',
+          originY: 'bottom',
+          overlayX: 'end',
+          overlayY: 'top',
+        },
+        {
+          originX: 'end',
+          originY: 'top',
+          overlayX: 'end',
+          overlayY: 'bottom',
+        },
+      ])
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      positionStrategy: positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    })
+
+    const portal = new TemplatePortal(template, this.viewContainerRef)
+
+    this.overlayRef.attach(portal)
+    this.subscription.add(
+      this.overlayRef.backdropClick().subscribe(() => {
+        this.closeActionMenu()
+      })
+    )
+  }
+
+  closeActionMenu() {
+    if (this.overlayRef) {
+      this.isActionMenuOpen = false
+      this.overlayRef.dispose()
+      this.cdr.markForCheck()
+    }
+  }
+}

package/src/libs/feature/editor/src/lib/components/online-resource-card/online-resource-card.component.ts

@@ -66,9 +66,8 @@ export class OnlineResourceCardComponent {
   get subtitle(): string {
     switch (this.onlineResource.type) {
       case 'service':
-        return `${this.onlineResource.accessServiceProtocol}`
       case 'endpoint':
-        return `${this.onlineResource.protocol}`
+        return `${this.onlineResource.accessServiceProtocol}`
       case 'link':
       case 'download':
         return this.getFormat(this.onlineResource)

package/src/libs/feature/editor/src/lib/components/online-service-resource-input/online-service-resource-input.component.ts

@@ -81,8 +81,8 @@ export class OnlineServiceResourceInputComponent {
   errorMessage = false
   resetUrlOnChange = Math.random()
 
-  layersSubject = new BehaviorSubject<{ name: string; title: string }[]>([])
-  layers$: Observable<{ name: string; title: string }[]> =
+  layersSubject = new BehaviorSubject<{ name?: string; title?: string }[]>([])
+  layers$: Observable<{ name?: string; title?: string }[]> =
     this.layersSubject.asObservable()
 
   protocolOptions: {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.html

@@ -8,8 +8,8 @@
   >
   </gn-ui-generic-keywords>
   <div class="w-full h-96 mt-2">
-    <gn-ui-form-field-map-container
+    <gn-ui-spatial-extent
       [spatialExtents]="spatialExtents$ | async"
-    ></gn-ui-form-field-map-container>
+    ></gn-ui-spatial-extent>
   </div>
 </div>

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-spatial-extent/form-field-spatial-extent.component.ts

@@ -9,9 +9,9 @@ import { PlatformServiceInterface } from '../../../../../../../../../libs/common
 import { firstValueFrom, map, shareReplay } from 'rxjs'
 import { EditorFacade } from '../../../../+state/editor.facade'
 import { switchMap } from 'rxjs/operators'
-import { FormFieldMapContainerComponent } from '../form-field-map-container/form-field-map-container.component'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { SPATIAL_SCOPES } from '../../../../fields.config'
+import { SpatialExtentComponent } from '../../../../../../../../../libs/ui/map/src'
 
 // This intermediary type will let us keep track of which keyword is bound to
 // which extent; these properties will not be persisted
@@ -35,8 +35,8 @@ type KeywordWithExtent = Keyword & {
   imports: [
     CommonModule,
     GenericKeywordsComponent,
-    FormFieldMapContainerComponent,
     TranslateModule,
+    SpatialExtentComponent,
   ],
 })
 export class FormFieldSpatialExtentComponent {

package/src/libs/feature/record/src/index.ts

@@ -1,12 +1,10 @@
 export * from './lib/feature-record.module'
-export * from './lib/gn-ui-version.token'
 export * from './lib/state'
 export * from './lib/data-view-permalink/data-view-permalink.component'
 export * from './lib/data-view/data-view.component'
 export * from './lib/data-view-share/data-view-share.component'
 export * from './lib/data-view-web-component/data-view-web-component.component'
 export * from './lib/external-viewer-button/external-viewer-button.component'
-export * from './lib/map-view/map-view.component'
 export * from './lib/gpf-api-dl/gpf-api-dl.component'
+export * from './lib/map-view/map-view.component'
 export * from './lib/record-meta/record-meta.component'
-export * from './lib/external-viewer-button/external-viewer-button.component'

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

@@ -1,13 +1,17 @@
-<div class="w-full h-full flex flex-col p-1">
-  <gn-ui-dropdown-selector
-    *ngIf="dropdownChoices$ | async as choices"
-    [ngClass]="{ hidden: !displaySource }"
-    [title]="'table.select.data' | translate"
-    class="truncate p-1 -mx-1 self-end mb-1"
-    extraBtnClass="!text-primary font-sans font-medium"
-    [choices]="choices"
-    (selectValue)="selectLink($event)"
-  ></gn-ui-dropdown-selector>
+<div class="w-full h-full flex flex-col gap-[13px]">
+  <div
+    class="w-full py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+  >
+    <gn-ui-dropdown-selector
+      *ngIf="dropdownChoices$ | async as choices"
+      [ngClass]="{ hidden: !displaySource }"
+      [title]="'table.select.data' | translate"
+      class="h-[44px] w-full"
+      extraBtnClass="font-sans font-bold"
+      [choices]="choices"
+      (selectValue)="selectLink($event)"
+    ></gn-ui-dropdown-selector>
+  </div>
   <ng-container *ngIf="hidePreview; else dataView">
     <gn-ui-popup-alert
       type="warning"
@@ -23,12 +27,14 @@
         *ngIf="mode === 'table'"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-table-view>
       <gn-ui-chart-view
         *ngIf="mode === 'chart'"
         (chartConfig$)="setChartConfig($event)"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-chart-view>
     </div>
   </ng-template>