geonetwork-ui 2.6.0-dev.f073bbb4e → 2.7.0-dev.035ba2871

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -13,7 +13,7 @@
   </gn-ui-content-ghost>
 
   <p
-    class="mt-6 mb-3 font-medium text-primary text-sm"
+    class="mt-6 mb-3 font-medium text-black text-sm"
     translate
     *ngIf="!fieldReady('keywords') || metadata.keywords?.length"
   >
@@ -25,7 +25,7 @@
     [showContent]="fieldReady('keywords')"
   >
     <div *ngIf="metadata.keywords?.length">
-      <div class="sm:pb-4 flex flex-wrap gap-2">
+      <div class="metadata-info-keywords sm:pb-4 flex flex-wrap gap-2">
         <gn-ui-badge
           class="inline-block lowercase"
           (click)="onKeywordClick(keyword)"
@@ -46,6 +46,7 @@
     metadata.otherConstraints
   "
   [title]="'record.metadata.usage' | translate"
+  data-test="usage-panel"
 >
   <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
     <ng-container *ngFor="let license of licenses">
@@ -79,9 +80,12 @@
     </ng-container>
     <ng-container *ngIf="otherConstraints.length">
       <div gnUiLinkify *ngFor="let constraint of otherConstraints">
-        <h5 translate class="font-medium text-black text-sm mb-[2px] mt-[16px]">
+        <span
+          translate
+          class="font-medium text-black text-sm mb-[2px] mt-[16px]"
+        >
           record.metadata.otherConstraints
-        </h5>
+        </span>
         <div class="mb-6">
           <gn-ui-markdown-parser [textContent]="constraint">
           </gn-ui-markdown-parser>
@@ -96,12 +100,13 @@
 </gn-ui-expandable-panel>
 <gn-ui-expandable-panel
   *ngIf="
-    metadata.lineage ||
+    (metadata.kind === 'dataset' && metadata.lineage) ||
     metadata.resourceUpdated ||
     metadata.updateFrequency ||
-    metadata.status
+    (metadata.kind === 'dataset' && metadata.status)
   "
   [title]="'record.metadata.details' | translate"
+  data-test="details-panel"
 >
   <div *ngIf="metadata.lineage" class="text-gray-900 flex flex-col mt-4 gap-2">
     <p class="whitespace-pre-line break-words text-gray-900" gnUiLinkify>
@@ -225,9 +230,20 @@
     </div>
   </div>
 </gn-ui-expandable-panel>
+<gn-ui-expandable-panel
+  *ngIf="metadata.kind !== 'dataset' && metadata.spatialExtents"
+  [title]="'service.metadata.spatialExtent' | translate"
+  data-test="spatial-extent-panel"
+>
+  <gn-ui-spatial-extent
+    class="flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6"
+    [spatialExtents]="metadata.spatialExtents"
+  ></gn-ui-spatial-extent>
+</gn-ui-expandable-panel>
 <gn-ui-expandable-panel
   *ngIf="metadata.landingPage"
-  [title]="'record.metadata.technical' | translate"
+  [title]="'service.metadata.other' | translate"
+  data-test="other-panel"
 >
   <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
     <div *ngIf="metadata.recordUpdated">
@@ -267,6 +283,7 @@
       <p class="text-sm mb-1" translate>record.metadata.topics</p>
       <div class="sm:pb-4 sm:pr-16">
         <gn-ui-badge
+          [clickable]="false"
           class="inline-block mr-2 mb-2 lowercase"
           *ngFor="let topic of metadata.topics"
           >{{ topic }}</gn-ui-badge

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -6,7 +6,7 @@ import {
   Output,
 } from '@angular/core'
 import {
-  DatasetRecord,
+  CatalogRecord,
   Keyword,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DateService, getTemporalRangeUnion } from '../../../../../../libs/util/shared/src'
@@ -15,19 +15,21 @@ import {
   ExpandablePanelComponent,
   MaxLinesComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import {
   BadgeComponent,
   CopyTextButtonComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { ContentGhostComponent } from '../content-ghost/content-ghost.component'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { CommonModule } from '@angular/common'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
 
+import { CommonModule } from '@angular/common'
+import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
+
 @Component({
   selector: 'gn-ui-metadata-info',
   templateUrl: './metadata-info.component.html',
@@ -36,7 +38,8 @@ import { GnUiLinkifyDirective } from './linkify.directive'
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     MarkdownParserComponent,
     ExpandablePanelComponent,
     BadgeComponent,
@@ -46,6 +49,7 @@ import { GnUiLinkifyDirective } from './linkify.directive'
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
+    SpatialExtentComponent,
   ],
   viewProviders: [
     provideIcons({
@@ -55,7 +59,7 @@ import { GnUiLinkifyDirective } from './linkify.directive'
   ],
 })
 export class MetadataInfoComponent {
-  @Input() metadata: Partial<DatasetRecord>
+  @Input() metadata: Partial<CatalogRecord>
   @Input() incomplete: boolean
   @Output() keyword = new EventEmitter<Keyword>()
   updatedTimes: number
@@ -122,7 +126,8 @@ export class MetadataInfoComponent {
   }
 
   get temporalExtent(): { start: string; end: string } {
-    const temporalExtents = this.metadata.temporalExtents
+    const temporalExtents =
+      this.metadata.kind === 'dataset' ? this.metadata.temporalExtents : []
     return getTemporalRangeUnion(temporalExtents, this.dateService)
   }
 

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,25 +1,25 @@
-<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
-  <div
-    class="flex items-center"
-    [class]="smaller ? 'leading-[8px] min-w-[120px]' : 'min-w-[200px]'"
+<div
+  *ngIf="metadataQualityDisplay"
+  class="flex items-center metadata-quality min-w-0"
+  [ngClass]="{ 'text-xs leading-[8px] m-h-[120px]': smaller }"
+>
+  <gn-ui-progress-bar
+    tabindex="0"
+    [value]="qualityScore"
+    [type]="'light'"
+    class="flex-grow"
+  ></gn-ui-progress-bar>
+  <gn-ui-popover
+    *ngIf="popoverDisplay"
+    [content]="popoverItems"
+    theme="light-border"
+    [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"
   >
-    <gn-ui-progress-bar
-      tabindex="0"
-      [value]="qualityScore"
-      [type]="'light'"
-      class="flex-grow"
-    ></gn-ui-progress-bar>
-    <gn-ui-popover
-      [content]="popoverItems"
-      theme="light-border"
-      [class]="smaller ? 'ml-2' : 'ml-2 mt-1'"
-    >
-      <ng-icon
-        name="matInfoOutline"
-        class="flex-shrink-0 text-gray-600"
-      ></ng-icon>
-    </gn-ui-popover>
-  </div>
+    <ng-icon
+      name="matInfoOutline"
+      class="flex-shrink-0 text-gray-600"
+    ></ng-icon>
+  </gn-ui-popover>
 </div>
 <ng-template #popoverItems>
   <div class="p-2 py-4">

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -14,11 +14,15 @@ import {
   PopoverComponent,
   ProgressBarComponent,
 } from '../../../../../../libs/ui/widgets/src'
+import {
+  getQualityValidators,
+  getAllKeysValidator,
+  type ValidatorMapperKeys,
+} from '../../../../../../libs/util/shared/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
-import { NgIcon } from '@ng-icons/core'
+import { TranslateDirective } from '@ngx-translate/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matInfoOutline } from '@ng-icons/material-icons/outline'
-import { provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 
 @Component({
   selector: 'gn-ui-metadata-quality',
@@ -31,7 +35,7 @@ import { provideIcons, provideNgIconsConfig } from '@ng-icons/core'
     PopoverComponent,
     ProgressBarComponent,
     MetadataQualityItemComponent,
-    TranslateModule,
+    TranslateDirective,
     NgIcon,
   ],
   providers: [
@@ -45,42 +49,43 @@ import { provideIcons, provideNgIconsConfig } from '@ng-icons/core'
   ],
 })
 export class MetadataQualityComponent implements OnChanges {
-  @Input() metadata: Partial<CatalogRecord>
+  @Input() metadata: CatalogRecord
   @Input() smaller = false
   @Input() metadataQualityDisplay: boolean
+  @Input() popoverDisplay = true
+  @Input() propsToValidate?: ValidatorMapperKeys[]
+  @Input() forceComputeScore = false // Instead of returning es' quality score
 
   items: MetadataQualityItem[] = []
 
   get qualityScore() {
-    const qualityScore = this.metadata?.extras?.qualityScore
+    const qualityScore = !this.forceComputeScore
+      ? this.metadata?.extras?.qualityScore
+      : this.computedQualityScore
+
     return typeof qualityScore === 'number'
       ? qualityScore
-      : this.calculatedQualityScore
+      : this.computedQualityScore
   }
 
-  get calculatedQualityScore(): number {
+  get computedQualityScore(): number {
     return Math.round(
       (this.items.filter(({ value }) => value).length * 100) / this.items.length
     )
   }
 
-  private add(name: string, value: boolean) {
-    if (this.metadataQualityDisplay?.[name] !== false) {
-      this.items.push({ name, value })
-    }
+  hasGetCapabilities(url: string): boolean {
+    return url.toLowerCase().includes('capabilities')
   }
 
   initialize() {
-    const contact = this.metadata?.contacts?.[0]
-    this.items = []
-    this.add('title', !!this.metadata?.title)
-    this.add('description', !!this.metadata?.abstract)
-    this.add('topic', this.metadata?.topics?.length > 0)
-    this.add('keywords', this.metadata?.keywords?.length > 0)
-    this.add('legalConstraints', this.metadata?.legalConstraints?.length > 0)
-    this.add('organisation', !!contact?.organization)
-    this.add('contact', !!contact?.email)
-    this.add('updateFrequency', !!this.metadata?.updateFrequency)
+    if (!this.propsToValidate) {
+      this.propsToValidate = getAllKeysValidator()
+    }
+
+    this.items = getQualityValidators(this.metadata, this.propsToValidate).map(
+      ({ name, validator }) => ({ name, value: validator() })
+    )
   }
 
   ngOnChanges(changes: SimpleChanges): void {

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { matCheck, matWarningAmber } from '@ng-icons/material-icons/baseline'
 
 marker('record.metadata.quality.title.success')
@@ -20,6 +20,10 @@ marker('record.metadata.quality.updateFrequency.success')
 marker('record.metadata.quality.updateFrequency.failed')
 marker('record.metadata.quality.organisation.success')
 marker('record.metadata.quality.organisation.failed')
+marker('record.metadata.quality.capabilities.success')
+marker('record.metadata.quality.capabilities.failed')
+marker('record.metadata.quality.source.success')
+marker('record.metadata.quality.source.failed')
 
 export interface MetadataQualityItem {
   name: string
@@ -31,7 +35,7 @@ export interface MetadataQualityItem {
   templateUrl: './metadata-quality-item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NgIcon, TranslateModule],
+  imports: [NgIcon, TranslatePipe],
   viewProviders: [provideIcons({ matCheck, matWarningAmber })],
 })
 export class MetadataQualityItemComponent implements MetadataQualityItem {

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -13,7 +13,8 @@ import {
   TextInputComponent,
 } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -32,7 +33,8 @@ const DEFAULT_PARAMS = {
     TextInputComponent,
     DropdownSelectorComponent,
     CopyTextButtonComponent,
-    TranslateModule,
+    TranslateDirective,
+    MatTooltipModule,
   ],
 })
 export class RecordApiFormComponent {
@@ -162,7 +164,7 @@ export class RecordApiFormComponent {
       limit: limit !== '-1' ? Number(limit) : -1,
       offset: offset !== '' ? Number(offset) : undefined,
       outputCrs:
-        format === ('application/json' || 'geojson') ? 'EPSG:4326' : undefined,
+        format.toLowerCase().indexOf('json') > -1 ? 'EPSG:4326' : undefined,
     }
 
     if (this.endpoint instanceof WfsEndpoint) {
@@ -170,6 +172,7 @@ export class RecordApiFormComponent {
       options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
       return this.endpoint.getFeatureUrl(this.apiFeatureType, options)
     } else {
+      delete options.outputCrs
       return await this.endpoint.getCollectionItemsUrl(
         this.apiFeatureType,
         options

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -0,0 +1,107 @@
+<div
+  cdkScrollable
+  class="h-[562px] relative overflow-y-auto overflow-hidden"
+  data-cy="feat-catalog-scrollable"
+>
+  <div #scrollContainer class="flex flex-col gap-2 py-5 px-5">
+    <div
+      *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
+      class="rounded shadow bg-white"
+    >
+      <gn-ui-expandable-panel
+        #expanel
+        [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
+        iconColor="black"
+      >
+        <ng-template #titleTemplate>
+          <div class="px-2">
+            <div class="text-lg font-bold">{{ featureType.name }}</div>
+            <div class="text-sm" *ngIf="featureType.definition">
+              {{ featureType.definition }}
+            </div>
+          </div>
+        </ng-template>
+        <div
+          *ngIf="expanel && !expanel.collapsed"
+          class="grid gap-0"
+          [style.grid-template-columns]="
+            getGridTemplateColumns(featureType.attributes)
+          "
+          data-cy="feature-type-content"
+        >
+          <div
+            class="py-1 px-2 text-sm font-bold text-left border-t break-all"
+            [class.border-l]="i > 0"
+            [class.border-gray-300]="i > 0"
+            [ngClass]="col.class || ''"
+            *ngFor="
+              let col of getColumnsDefinition(featureType.attributes);
+              trackBy: trackByColumn;
+              let i = index
+            "
+            data-test="column-label"
+          >
+            {{ 'feature.catalog.attribute.' + col.key | translate }}
+          </div>
+          <ng-container *ngIf="expanel && !expanel.collapsed">
+            <ng-container *ngFor="let row of featureType.attributes">
+              <div
+                class="bg-white text-sm font-normal text-left border-t"
+                [class.border-l]="i > 0"
+                [class.border-gray-300]="i > 0"
+                *ngFor="
+                  let col of getColumnsDefinition(featureType.attributes);
+                  trackBy: trackByColumn;
+                  let i = index
+                "
+                data-test="cell-content"
+              >
+                <ng-container
+                  *ngIf="col.key === 'values'; then tplValues; else defaultTpl"
+                ></ng-container>
+
+                <ng-template #defaultTpl>
+                  <gn-ui-truncated-text
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    [text]="row[col.key]"
+                  ></gn-ui-truncated-text>
+                </ng-template>
+
+                <ng-template #tplValues>
+                  <gn-ui-cell-popin
+                    #popinRef
+                    [scrollContainer]="scrollContainer"
+                    [cdkScrollContainer]="scrollable"
+                    *ngIf="row.values?.length > 0"
+                  >
+                    <div cellContent data-cy="values-cell-popin-trigger">
+                      <gn-ui-button
+                        type="light"
+                        extraClass="bg-transparent border-none"
+                        (buttonClick)="popinRef.openOverlay()"
+                      >
+                        <ng-icon name="iconoirList" size="24"></ng-icon>
+                      </gn-ui-button>
+                    </div>
+                    <div
+                      popinContent
+                      class="max-h-60 overflow-y-auto min-w-64 py-4 px-6"
+                      style="scrollbar-width: thin"
+                    >
+                      <ul class="list-disc list-inside mr-4">
+                        <li *ngFor="let v of row.values">
+                          {{ v.label || v.code }}
+                        </li>
+                      </ul>
+                    </div>
+                  </gn-ui-cell-popin>
+                </ng-template>
+              </div>
+            </ng-container>
+          </ng-container>
+        </div>
+      </gn-ui-expandable-panel>
+    </div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -0,0 +1,82 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslatePipe } from '@ngx-translate/core'
+import {
+  DatasetFeatureAttribute,
+  DatasetFeatureCatalog,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  CellPopinComponent,
+  ExpandablePanelComponent,
+  TruncatedTextComponent,
+} from '../../../../../../../libs/ui/layout/src'
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { iconoirList } from '@ng-icons/iconoir'
+
+marker('feature.catalog.attribute.type')
+marker('feature.catalog.attribute.name')
+marker('feature.catalog.attribute.code')
+marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.values')
+
+interface ColumnDefinition {
+  key: string
+  width: string
+  class?: string
+}
+
+@Component({
+  selector: 'gn-ui-feature-catalog-list',
+  templateUrl: './feature-catalog-list.component.html',
+  styleUrls: [],
+  standalone: true,
+  imports: [
+    ButtonComponent,
+    CellPopinComponent,
+    CommonModule,
+    TranslatePipe,
+    ExpandablePanelComponent,
+    TruncatedTextComponent,
+    NgIconComponent,
+    ScrollingModule,
+  ],
+  providers: [provideIcons({ iconoirList })],
+})
+export class FeatureCatalogListComponent {
+  @Input() filteredFeatureCatalog!: DatasetFeatureCatalog
+
+  @ViewChild('scrollContainer') scrollContainer!: ElementRef
+  @ViewChild(CdkScrollable, { static: true }) scrollable!: CdkScrollable
+  @ViewChild('expanel', { read: ExpandablePanelComponent, static: true })
+  panelComponent: ExpandablePanelComponent
+
+  readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
+    { key: 'type', width: '25%' },
+    { key: 'name', width: '40%' },
+    { key: 'definition', width: 'minmax(0px, 1fr)' },
+  ]
+
+  readonly COLUMN_VALUES: ColumnDefinition = {
+    key: 'values',
+    width: '73px',
+    class: 'text-center',
+  }
+
+  getColumnsDefinition(attrs: DatasetFeatureAttribute[]): ColumnDefinition[] {
+    const hasValues = attrs.some((a) => a.values?.length > 0)
+    return [...this.COLUMNS_DEFAULT, ...(hasValues ? [this.COLUMN_VALUES] : [])]
+  }
+
+  getGridTemplateColumns(attributes: DatasetFeatureAttribute[]) {
+    return this.getColumnsDefinition(attributes)
+      .map((col) => col.width)
+      .join(' ')
+  }
+
+  trackByColumn(_i: number, col: { key: string }) {
+    return col.key
+  }
+}

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -0,0 +1,110 @@
+<div style="height: 652px" id="preview" *ngIf="apiLinks.length > 0">
+  <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
+    <div class="container-lg px-4 lg:mx-auto">
+      <div>
+        <div class="gn-ui-section-title mb-6" translate>
+          service.metadata.capabilities
+        </div>
+        <div
+          *ngIf="loading"
+          class="flex justify-center w-full h-[200px] items-center"
+        >
+          <gn-ui-spinning-loader></gn-ui-spinning-loader>
+        </div>
+        <div *ngIf="!loading">
+          <div class="flex flex-row gap-5">
+            <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
+              <gn-ui-text-input
+                class="w-full"
+                [(value)]="searchQuery"
+                [extraClass]="getExtraInputClass()"
+                [placeholder]="'service.metadata.search' | translate"
+                (input)="onSearchChange($event)"
+                (keydown.enter)="onSearchEnter($event)"
+              >
+              </gn-ui-text-input>
+              <div
+                class="absolute right-14 h-14 w-14 flex items-center justify-center"
+              >
+                <button
+                  #inputBtn
+                  *ngIf="searchQuery"
+                  [aria-label]="'service.metadata.search.clear' | translate"
+                  (click)="clearSearch()"
+                  class="h-12 w-12 border-0 flex items-center justify-center"
+                >
+                  <ng-icon name="matClose"></ng-icon>
+                </button>
+              </div>
+              <div class="border-l absolute border-gray-200 right-0 h-14 w-14">
+                <gn-ui-button
+                  #inputBtn
+                  type="outline"
+                  extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
+                  (buttonClick)="searchLayers()"
+                >
+                  <ng-icon name="iconoirSearch"></ng-icon>
+                </gn-ui-button>
+              </div>
+            </div>
+            <gn-ui-popover
+              [content]="popoverItems"
+              theme="light"
+              class="w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center"
+            >
+              <ng-icon name="matInfoOutline" class="w-6 h-6 pt-0.5"></ng-icon>
+            </gn-ui-popover>
+          </div>
+          <div
+            style="height: 500px"
+            class="bg-white shadow-xl rounded p-0 flex md:flex-row flex-col"
+          >
+            <div
+              class="flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3"
+              data-test="layer-list"
+            >
+              <gn-ui-button
+                *ngFor="let layerItem of filteredLayers"
+                type="outline"
+                [extraClass]="getExtraClass(layerItem)"
+                (buttonClick)="selectLayer(layerItem)"
+              >
+                {{ layerItem.title || layerItem.name }}
+              </gn-ui-button>
+              <span *ngIf="filteredLayers.length === 0" class="text-gray-800">
+                {{ 'service.metadata.filter.noLayers' | translate }}
+              </span>
+            </div>
+            <div
+              data-test="layer-information"
+              class="flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto"
+            >
+              <div
+                *ngFor="let item of layerInformation"
+                class="flex flex-row gap-4 border-b border-gray-200"
+              >
+                <span class="font-semibold w-24">{{ item.displayName }}</span>
+                <div *ngIf="isList(item.value)">
+                  <div
+                    *ngFor="let subItem of item.value"
+                    class="flex flex-row break-words max-w-72"
+                  >
+                    {{ subItem }}
+                  </div>
+                </div>
+                <div class="break-words max-w-72" *ngIf="!isList(item.value)">
+                  {{ item.value }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
+    <div translate>service.metadata.filter</div>
+  </div>
+</ng-template>