geonetwork-ui 2.7.0-dev.d500b08cc → 2.7.0-dev.d51ff2ddf

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

@@ -5,15 +5,16 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { getLinkLabel, getLinkPriority } from '../../../../../../libs/util/shared/src'
+import {
+  getLinkId,
+  getLinkLabel,
+  getLinkPriority,
+} from '../../../../../../libs/util/shared/src'
 import { BehaviorSubject, combineLatest } from 'rxjs'
 import { map, tap } from 'rxjs/operators'
 import { MdViewFacade } from '../state'
 import { DatavizChartConfigModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import {
-  DatasetOnlineResource,
-  DatasetServiceDistribution,
-} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 import {
   ChartViewComponent,
@@ -45,13 +46,28 @@ export class DataViewComponent {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  linkMap: Map<string, DatasetOnlineResource> = new Map()
   _selectedView = ''
+  _chartConfig = null
+  _selectedChoice = null
   @Input() set selectedView(value: string) {
     this._selectedView = value
-    if (value !== 'map') {
+    if (this.mode === value) {
       this.linkSelected.emit(this.selectedLink$.value)
     }
   }
+  @Input() set datavizConfig(value: any) {
+    this._selectedView = value.view
+    if (this.mode === value.view) {
+      if (!value.source) {
+        this.linkSelected.emit(this.selectedLink$.value)
+      } else {
+        this._chartConfig = value.chartConfig
+        this._selectedChoice = getLinkId(value.source)
+        this.selectedLink$.next(value.source)
+      }
+    }
+  }
   @Output() chartConfig$ = new BehaviorSubject<DatavizChartConfigModel>(null)
   @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
   cacheActive$ = this.mdViewFacade.isHighUpdateFrequency$.pipe(
@@ -69,15 +85,19 @@ export class DataViewComponent {
     })
   )
   dropdownChoices$ = this.compatibleDataLinks$.pipe(
-    tap((links) => {
-      if (links.indexOf(this.selectedLink$.value) === -1) {
-        this.selectLink(JSON.stringify(links[0]))
+    tap((links: DatasetOnlineResource[]) => {
+      this.linkMap.clear()
+      links.forEach((link: DatasetOnlineResource) =>
+        this.linkMap.set(getLinkId(link), link)
+      )
+      if (!links.some((l) => l.url === this.selectedLink$.value?.url)) {
+        this.selectLink(getLinkId(links[0]))
       }
     }),
     map((links) =>
-      links.map((link) => ({
+      links.map((link: DatasetOnlineResource) => ({
         label: getLinkLabel(link),
-        value: JSON.stringify(link),
+        value: getLinkId(link),
       }))
     )
   )
@@ -93,12 +113,11 @@ export class DataViewComponent {
     this.mdViewFacade.setChartConfig(event)
   }
 
-  selectLink(linkAsString: string) {
-    const link: DatasetOnlineResource = JSON.parse(linkAsString)
-    if (this._selectedView && this._selectedView !== 'map') {
+  selectLink(linkId: string) {
+    const link = this.linkMap.get(linkId)
+    if (this._selectedView && this._selectedView === this.mode) {
       this.linkSelected.emit(link)
     }
-    link.url = new URL(link.url)
     this.selectedLink$.next(link)
   }
 }

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

@@ -8,6 +8,7 @@
       extraBtnClass="font-sans font-bold"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"
+      [selected]="_selectedChoice"
       (selectValue)="selectLinkToDisplay($event)"
     ></gn-ui-dropdown-selector>
 
@@ -17,6 +18,7 @@
         extraBtnClass="font-sans font-bold"
         [title]="'map.select.style' | translate"
         [choices]="styleDropdownChoices$ | async"
+        [selected]="_styleFromConfig"
         (selectValue)="selectStyleToDisplay($event)"
       ></gn-ui-dropdown-selector>
     </ng-container>
@@ -85,7 +87,7 @@
         [hidden]="!showLegend || !legendExists"
       >
         <div class="flex justify-between items-center mb-2">
-          <div class="text-primary font-bold">Legend</div>
+          <div class="text-primary font-bold" translate>map.legend.title</div>
           <gn-ui-button
             type="light"
             (buttonClick)="toggleLegend()"
@@ -110,8 +112,9 @@
         type="outline"
         (buttonClick)="toggleLegend()"
         extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
+        translate
       >
-        Legend
+        map.legend.title
       </gn-ui-button>
 
       <gn-ui-loading-mask

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

@@ -9,7 +9,7 @@ import {
   ViewChild,
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
-import { getLinkLabel } from '../../../../../../libs/util/shared/src'
+import { getLinkId, getLinkLabel } from '../../../../../../libs/util/shared/src'
 import {
   BehaviorSubject,
   combineLatest,
@@ -100,15 +100,28 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
+  linkFromConfig$ = new BehaviorSubject(null)
+  _selectedChoice = null
+  _styleFromConfig = null
+
+  linkMap: Map<string, DatasetOnlineResource> = new Map()
   @Input() set selectedView(value: string) {
-    if (value === 'map') {
-      this.selectedLink$.pipe(take(1)).subscribe((link) => {
-        this.linkSelected.emit(link)
-      })
+    this.selectedView$.next(value)
+  }
+  @Input() set datavizConfig(value: any) {
+    if (value.view === 'map') {
+      this.selectedView$.next(value.view)
+      if (value.styleTMSIndex) {
+        this._styleFromConfig = value.styleTMSIndex
+      }
+      if (value.source) {
+        this.linkFromConfig$.next(value.source)
+      }
     }
   }
   @Input() displaySource = true
   @Output() linkSelected = new EventEmitter<DatasetOnlineResource>()
+  @Output() styleSelected = new EventEmitter<number>()
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
   excludeWfs$ = new BehaviorSubject(false)
@@ -119,12 +132,13 @@ export class MapViewComponent implements AfterViewInit {
   loading = false
   error = null
 
-  selectLinkToDisplay(i: number) {
-    this.selectedLinkIndex$.next(i)
+  selectLinkToDisplay(id: string) {
+    this.selectedLinkId$.next(id)
   }
 
   selectStyleToDisplay(i: number) {
-    this.selectedStyleIndex$.next(i)
+    this.selectedStyleId$.next(i)
+    this.styleSelected.emit(i)
   }
 
   toggleLegend() {
@@ -146,29 +160,54 @@ export class MapViewComponent implements AfterViewInit {
   )
 
   dropdownChoices$ = this.compatibleMapLinks$.pipe(
-    map((links) =>
-      links.length
-        ? links.map((link, index) => ({
+    map((links) => {
+      this.linkMap.clear()
+      links.forEach((link: DatasetOnlineResource) =>
+        this.linkMap.set(getLinkId(link), link)
+      )
+      return links.length
+        ? links.map((link) => ({
             label: getLinkLabel(link),
-            value: index,
+            value: getLinkId(link),
           }))
-        : [{ label: 'map.dropdown.placeholder', value: 0 }]
-    )
+        : [{ label: 'map.dropdown.placeholder', value: '' }]
+    })
   )
 
-  selectedLinkIndex$ = new BehaviorSubject(0)
-  private selectedStyleIndex$ = new BehaviorSubject(0)
+  selectedView$ = new BehaviorSubject(null)
+  selectedLinkId$ = new BehaviorSubject(null)
+  selectedStyleId$ = new BehaviorSubject(null)
 
   selectedSourceLink$ = combineLatest([
     this.compatibleMapLinks$,
-    this.selectedLinkIndex$.pipe(distinctUntilChanged()),
+    this.linkFromConfig$,
+    this.selectedLinkId$.pipe(distinctUntilChanged()),
+    this.selectedView$,
   ]).pipe(
     tap(() => {
       this.error = null
     }),
-    map(([links, index]) => {
-      this.linkSelected.emit(links[index])
-      return links[index]
+    map(([compatibleLinks, configLink, id, view]) => {
+      if (view === 'map') {
+        if (
+          configLink &&
+          !id &&
+          compatibleLinks.some(
+            (link) => getLinkId(link) === getLinkId(configLink)
+          )
+        ) {
+          this._selectedChoice = getLinkId(configLink)
+          this.linkSelected.emit(configLink)
+          return configLink
+        } else if (id) {
+          this._selectedChoice = id
+          this.linkSelected.emit(this.linkMap.get(id))
+          return this.linkMap.get(id)
+        } else {
+          this.linkSelected.emit(compatibleLinks[0])
+          return compatibleLinks[0]
+        }
+      }
     })
   )
 
@@ -205,7 +244,13 @@ export class MapViewComponent implements AfterViewInit {
       }
       return of([])
     }),
-    tap(() => this.selectedStyleIndex$.next(0)),
+    tap((styles) => {
+      if (this._styleFromConfig && this._styleFromConfig <= styles.length) {
+        this.selectedStyleId$.next(this._styleFromConfig)
+      } else {
+        this.selectedStyleId$.next(0)
+      }
+    }),
     shareReplay(1)
   )
 
@@ -228,7 +273,7 @@ export class MapViewComponent implements AfterViewInit {
   selectedLink$ = combineLatest([
     this.selectedSourceLink$,
     this.styleLinks$,
-    this.selectedStyleIndex$.pipe(distinctUntilChanged()),
+    this.selectedStyleId$.pipe(distinctUntilChanged()),
   ]).pipe(
     map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
     shareReplay(1)
@@ -344,7 +389,9 @@ export class MapViewComponent implements AfterViewInit {
     ) {
       // 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'),
+        url: link.url
+          .toString()
+          .replace(/\/?$/, `/${link.name}/{z}/{x}/{y}.pbf`),
         type: 'xyz',
         tileFormat: 'application/vnd.mapbox-vector-tile',
         name: link.name,

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

@@ -23,7 +23,11 @@ export class MdViewEffects {
       ofType(MdViewActions.loadFullMetadata),
       switchMap(({ uuid }) => this.recordsRepository.getRecord(uuid)),
       map((record) => {
-        if (record === null || !this.router.url.includes(record.kind)) {
+        if (
+          record === null ||
+          (this.router.url !== '/' && // FIXME: special case for WC, find a better way
+            !this.router.url.includes(record.kind))
+        ) {
           return MdViewActions.loadFullMetadataFailure({ notFound: true })
         }
         return MdViewActions.loadFullMetadataSuccess({ full: record })

package/src/libs/feature/search/src/lib/state/reducer.ts

@@ -8,6 +8,7 @@ import {
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { DEFAULT_PAGE_SIZE, FIELDS_SUMMARY } from '../constants'
+import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export const SEARCH_FEATURE_KEY = 'searchState'
@@ -55,7 +56,9 @@ export const initSearch = (): SearchStateSearch => {
     },
     params: {
       filters: {},
-      pageSize: DEFAULT_PAGE_SIZE,
+      pageSize: getOptionalSearchConfig()?.LIMIT
+        ? getOptionalSearchConfig().LIMIT
+        : DEFAULT_PAGE_SIZE,
       currentPage: 0,
       favoritesOnly: false,
       useSpatialFilter: true,

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -14,7 +14,11 @@ import {
 } from '@angular/core'
 import { MatSort, MatSortModule } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
-import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { DataTableDataSource } from './data-table.data.source'
 import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import {
@@ -53,6 +57,7 @@ export interface TableItemModel {
     PopupAlertComponent,
     LetDirective,
     TranslatePipe,
+    TranslateDirective,
   ],
   providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
   selector: 'gn-ui-data-table',

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -13,8 +13,7 @@
       <span class="px-3">({{ linksCount }})</span>
     </div>
     <gn-ui-previous-next-buttons
-      class="md:block hidden"
-      *ngIf="_list?.pagesCount > 1"
+      *ngIf="(isMobile$ | async) === false && _list?.pagesCount > 1"
       [listComponent]="_list"
     ></gn-ui-previous-next-buttons>
   </div>
@@ -40,7 +39,7 @@
 
 <ng-container>
   <gn-ui-block-list
-    class="md:block hidden"
+    *ngIf="(isMobile$ | async) === false"
     #blockList
     (listChanges)="updateList($event)"
     containerClass="gap-4 pt-5 pb-7"
@@ -57,12 +56,14 @@
   </gn-ui-block-list>
 </ng-container>
 
-<div class="mb-5 md:hidden block" *ngFor="let link of filteredLinks">
-  <gn-ui-download-item
-    size="M"
-    [link]="link"
-    [color]="getLinkColor(link)"
-    [format]="getLinkFormat(link)"
-    [isFromApi]="isFromApi(link)"
-  ></gn-ui-download-item>
+<div class="mb-5" *ngFor="let link of filteredLinks">
+  <ng-container *ngIf="(isMobile$ | async) === true">
+    <gn-ui-download-item
+      size="M"
+      [link]="link"
+      [color]="getLinkColor(link)"
+      [format]="getLinkFormat(link)"
+      [isFromApi]="isFromApi(link)"
+    ></gn-ui-download-item>
+  </ng-container>
 </div>

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -6,7 +6,11 @@ import {
 } from '@angular/core'
 import { TranslateDirective, TranslateService } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { getBadgeColor, getFileFormat } from '../../../../../../libs/util/shared/src'
+import {
+  getBadgeColor,
+  getFileFormat,
+  getIsMobile,
+} from '../../../../../../libs/util/shared/src'
 import { DatasetDownloadDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
@@ -50,6 +54,8 @@ export class DownloadsListComponent {
     return this.filteredLinks?.length || 0
   }
 
+  isMobile$ = getIsMobile()
+
   activeFilterFormats: FilterFormat[] = ['all']
 
   updateList($event: BlockListComponent) {

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.html

@@ -7,7 +7,10 @@
     class="shrink-0 text-[0.75em]"
     name="matLocationSearchingOutline"
   ></ng-icon>
-  <span class="ml-1 hidden sm:inline-block shrink-0" *ngIf="showLabel" translate
+  <span
+    class="ml-1 inline-block shrink-0"
+    *ngIf="(isMobile$ | async) === false && showLabel"
+    translate
     >record.metadata.isGeographical</span
   >
 </div>

package/src/libs/ui/elements/src/lib/geo-data-badge/geo-data-badge.component.ts

@@ -4,7 +4,11 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
 import { CommonModule } from '@angular/common'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { NgIcon, provideIcons } from '@ng-icons/core'
-import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
+import {
+  getIsMobile,
+  LinkClassifierService,
+  LinkUsage,
+} from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-geo-data-badge',
@@ -24,6 +28,8 @@ export class GeoDataBadgeComponent {
   @Input() styling = 'default'
   @Input() record: CatalogRecord
 
+  isMobile$ = getIsMobile()
+
   isGeodata() {
     const links =
       'onlineResources' in this.record ? this.record.onlineResources : []

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.html

@@ -68,6 +68,7 @@
               [smaller]="true"
               [metadata]="record"
               [metadataQualityDisplay]="metadataQualityDisplay"
+              [popoverDisplay]="true"
             ></gn-ui-metadata-quality>
           </div>
           <div

package/src/libs/ui/elements/src/lib/internal-link-card/internal-link-card.component.ts

@@ -21,7 +21,11 @@ import { KindBadgeComponent } from '../kind-badge/kind-badge.component'
 import { MarkdownParserComponent } from '../markdown-parser/markdown-parser.component'
 import { MetadataQualityComponent } from '../metadata-quality/metadata-quality.component'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
-import { removeWhitespace, stripHtml } from '../../../../../../libs/util/shared/src'
+import {
+  removeWhitespace,
+  stripHtml,
+  type ValidatorMapperKeys,
+} from '../../../../../../libs/util/shared/src'
 
 type CardSize = 'L' | 'M' | 'S' | 'XS'
 

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

@@ -10,6 +10,7 @@
     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'"

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

@@ -14,15 +14,16 @@ import {
   PopoverComponent,
   ProgressBarComponent,
 } from '../../../../../../libs/ui/widgets/src'
+import {
+  getQualityValidators,
+  getAllKeysValidator,
+  type ValidatorMapperKeys,
+} from '../../../../../../libs/util/shared/src'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { matInfoOutline } from '@ng-icons/material-icons/outline'
 
-type QualityChecks = {
-  [key: string]: (metadata: Partial<CatalogRecord>) => boolean
-}
-
 @Component({
   selector: 'gn-ui-metadata-quality',
   templateUrl: './metadata-quality.component.html',
@@ -48,77 +49,43 @@ type QualityChecks = {
   ],
 })
 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')
   }
 
-  private readonly COMMON_CHECKS: QualityChecks = {
-    title: (metadata) => !!metadata?.title,
-    description: (metadata) => !!metadata?.abstract,
-    keywords: (metadata) => (metadata?.keywords?.length ?? 0) > 0,
-    legalConstraints: (metadata) =>
-      (metadata?.legalConstraints?.length ?? 0) > 0,
-    contact: (metadata) => !!metadata?.contacts?.[0]?.email,
-  }
-
-  private readonly SPECIFIC_CHECKS: Record<string, QualityChecks> = {
-    dataset: {
-      updateFrequency: (metadata) => !!metadata?.updateFrequency,
-      topic: (metadata) => (metadata?.topics?.length ?? 0) > 0,
-      organisation: (metadata) => !!metadata?.contacts?.[0]?.organization?.name,
-    },
-    service: {
-      capabilities: (metadata) =>
-        (metadata?.onlineResources ?? []).some((resource) =>
-          this.hasGetCapabilities(resource?.url?.href ?? '')
-        ),
-    },
-    reuse: {
-      topic: (metadata) => (metadata?.topics?.length ?? 0) > 0,
-      organisation: (metadata) => !!metadata?.contacts?.[0]?.organization?.name,
-      source: (metadata) => !!metadata?.extras?.sourcesIdentifiers,
-    },
-  }
-
   initialize() {
-    this.items = []
-
-    Object.entries(this.COMMON_CHECKS).forEach(([name, check]) => {
-      this.add(name, check(this.metadata))
-    })
-
-    const datasetType = this.metadata?.kind
-    if (datasetType && this.SPECIFIC_CHECKS[datasetType]) {
-      Object.entries(this.SPECIFIC_CHECKS[datasetType]).forEach(
-        ([name, check]) => {
-          this.add(name, check(this.metadata))
-        }
-      )
+    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/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -1,5 +1,8 @@
 <div
   class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+  *ngIf="
+    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1
+  "
 >
   <div
     class="relative shrink-0"
@@ -17,7 +20,10 @@
       name="iconoirSearch"
     ></ng-icon>
   </div>
-  <div class="text-sm px-1 ml-auto hidden sm:inline">
+  <div
+    *ngIf="(isMobile$ | async) === false"
+    class="text-sm px-1 ml-auto inline"
+  >
     <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
       <span
         class="text-sm font-medium text-gray-900"

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.ts

@@ -6,7 +6,7 @@ import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/
 import { FormsModule } from '@angular/forms'
 import { of } from 'rxjs'
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
-import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { createFuzzyFilter, getIsMobile } from '../../../../../../libs/util/shared/src'
 import { iconoirSearch } from '@ng-icons/iconoir'
 
 @Component({
@@ -39,6 +39,8 @@ export class SearchFeatureCatalogComponent {
     return this._featureCatalog
   }
 
+  isMobile$ = getIsMobile()
+
   @Output() filteredFeatureCatalogChange =
     new EventEmitter<DatasetFeatureCatalog>()
   filteredFeatureCatalog: DatasetFeatureCatalog

package/src/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts

@@ -27,7 +27,7 @@ export class MapLegendComponent implements OnChanges {
   async ngOnChanges(changes: SimpleChanges) {
     if ('context' in changes) {
       const mapContext = changes['context'].currentValue
-      if (mapContext.layers && mapContext.layers.length > 0) {
+      if (mapContext?.layers && mapContext.layers.length > 0) {
         const mapContextLayer = mapContext.layers[0]
         this.legendHTML = await createLegendFromLayer(mapContextLayer)
         if (this.legendHTML) {