geonetwork-ui 2.9.0-dev.083d7682e → 2.9.0-dev.0e5a99579

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

@@ -13,29 +13,21 @@
       ></gn-ui-dropdown-selector>
     }
 
-    @if ((styleLinks$ | async)?.length > 0) {
-      <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"
-        [selected]="_styleFromConfig"
-        (selectValue)="selectStyleToDisplay($event)"
-      ></gn-ui-dropdown-selector>
-    } @else {
-      <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>
-    }
+    <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"
+      [selected]="selectedStyleId$ | async"
+      [disabled]="(styleDropdownChoices$ | async)?.length <= 1"
+      (selectValue)="selectStyleToDisplay($event)"
+    ></gn-ui-dropdown-selector>
 
     <div class="self-end md:ml-2">
       <gn-ui-external-viewer-button
         extraClass="w-[44px] h-[44px]"
         [link]="selectedLink$ | async"
+        [mimeType]="wmsMimeType$ | async"
       >
       </gn-ui-external-viewer-button>
     </div>

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

@@ -11,6 +11,7 @@ import {
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { getLinkId, getLinkLabel } from '../../../../../../libs/util/shared/src'
+import { WmsEndpoint, LayerStyle } from '@camptocamp/ogc-client'
 import {
   BehaviorSubject,
   combineLatest,
@@ -40,6 +41,7 @@ import {
   createViewFromLayer,
   MapContext,
   MapContextLayer,
+  MapContextLayerWms,
   SourceLoadErrorEvent,
 } from '@geospatial-sdk/core'
 import {
@@ -77,6 +79,7 @@ marker('map.dropdown.placeholder')
 marker('wfs.feature.limit')
 marker('dataset.error.restrictedAccess')
 marker('map.select.style')
+marker('map.style.default')
 
 @Component({
   selector: 'gn-ui-map-view',
@@ -228,7 +231,16 @@ export class MapViewComponent implements AfterViewInit {
           return compatibleLinks[0]
         }
       }
-    })
+    }),
+    shareReplay(1)
+  )
+
+  isWmsStyleMode$ = this.selectedSourceLink$.pipe(
+    map(
+      (src) => src?.type === 'service' && src?.accessServiceProtocol === 'wms'
+    ),
+    distinctUntilChanged(),
+    shareReplay(1)
   )
 
   styleLinks$ = this.selectedSourceLink$.pipe(
@@ -262,6 +274,22 @@ export class MapViewComponent implements AfterViewInit {
           })
         )
       }
+      if (
+        src &&
+        src.type === 'service' &&
+        src.accessServiceProtocol === 'wms'
+      ) {
+        return from(new WmsEndpoint(src.url.toString()).isReady()).pipe(
+          map((endpoint) => {
+            const layer = endpoint.getLayerByName(src.name)
+            return layer?.styles || []
+          }),
+          catchError((error) => {
+            this.handleError(error)
+            return of([])
+          })
+        )
+      }
       return of([])
     }),
     tap((styles) => {
@@ -274,33 +302,83 @@ export class MapViewComponent implements AfterViewInit {
     shareReplay(1)
   )
 
-  styleDropdownChoices$ = this.styleLinks$.pipe(
-    map((links) =>
+  styleDropdownChoices$ = combineLatest([
+    this.styleLinks$,
+    this.isWmsStyleMode$,
+  ]).pipe(
+    map(([links, isWmsStyleMode]) =>
       links.length
         ? links.map((link, index) => ({
-            label: getLinkLabel(link),
+            label: isWmsStyleMode
+              ? (link as LayerStyle).title || (link as LayerStyle).name
+              : getLinkLabel(link as DatasetOnlineResource),
             value: index,
           }))
         : [
             {
-              label: '\u00A0\u00A0\u00A0\u00A0',
+              label: this.translateService.instant('map.style.default'),
               value: 0,
             },
           ]
     )
   )
 
+  selectedWmsStyleName$ = combineLatest([
+    this.styleLinks$,
+    this.isWmsStyleMode$,
+    this.selectedStyleId$.pipe(distinctUntilChanged()),
+  ]).pipe(
+    map(([styles, isWmsStyleMode, styleIdx]) =>
+      isWmsStyleMode && Array.isArray(styles)
+        ? (styles[styleIdx] as LayerStyle)?.name
+        : undefined
+    )
+  )
+
   selectedLink$ = combineLatest([
     this.selectedSourceLink$,
     this.styleLinks$,
     this.selectedStyleId$.pipe(distinctUntilChanged()),
+    this.isWmsStyleMode$,
   ]).pipe(
-    map(([src, styles, styleIdx]) => (styles.length ? styles[styleIdx] : src)),
+    map(([src, styles, styleIdx, isWmsStyleMode]) =>
+      !isWmsStyleMode && styles.length ? styles[styleIdx] : src
+    ),
     shareReplay(1)
   )
 
-  currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(
-    switchMap(([link, excludeWfs]) => {
+  wmsMimeType$ = this.selectedSourceLink$.pipe(
+    switchMap((link) => {
+      if (link?.type === 'service' && link?.accessServiceProtocol === 'wms') {
+        return from(
+          new WmsEndpoint(link.url.toString())
+            .isReady()
+            .then((endpoint) => {
+              return endpoint.describeLayer(link.name).then((description) => {
+                if (description) {
+                  return description.owsType === 'wfs'
+                    ? 'image/png'
+                    : 'image/jpeg'
+                }
+                const layer = endpoint.getLayerByName(link.name)
+                return layer?.opaque ? 'image/jpeg' : 'image/png'
+              })
+            })
+            .catch(() => 'image/png')
+        )
+      }
+      return of('')
+    }),
+    shareReplay(1)
+  )
+
+  currentLayers$ = combineLatest([
+    this.selectedLink$,
+    this.excludeWfs$,
+    this.selectedWmsStyleName$,
+    this.wmsMimeType$,
+  ]).pipe(
+    switchMap(([link, excludeWfs, wmsStyleName, wmsMimeType]) => {
       if (!link) {
         return of([])
       }
@@ -315,6 +393,15 @@ export class MapViewComponent implements AfterViewInit {
         return of([])
       }
       return this.getLayerFromLink(link).pipe(
+        map((layer) =>
+          layer.type === 'wms'
+            ? {
+                ...layer,
+                ...(wmsStyleName && { style: wmsStyleName }),
+                ...(wmsMimeType && { format: wmsMimeType }),
+              }
+            : layer
+        ),
         map((layer) => [layer]),
         catchError((e) => {
           this.handleError(e)
@@ -394,7 +481,7 @@ export class MapViewComponent implements AfterViewInit {
         url: link.url.toString(),
         type: 'wms',
         name: link.name,
-      })
+      } as MapContextLayerWms)
     } else if (
       link.type === 'service' &&
       link.accessServiceProtocol === 'tms'

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

@@ -164,7 +164,7 @@ export class MdViewFacade {
               link.accessServiceProtocol === 'ogcFeatures'
             ) {
               return from(
-                this.dataService.getItemsFromOgcApi(link.url.href)
+                this.dataService.getItemsFromOgcApi(link.url.href, 1)
               ).pipe(
                 map((collectionRecords: OgcApiRecord[]) => {
                   return collectionRecords &&

package/src/libs/feature/router/src/lib/default/services/router-search.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import {
   FieldsService,
   SearchFacade,
@@ -6,6 +6,7 @@ import {
 } from '../../../../../../../libs/feature/search/src'
 import {
   FieldFilters,
+  SortByEnum,
   SortByField,
 } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { ROUTE_PARAMS, SearchRouteParams } from '../constants'
@@ -31,10 +32,12 @@ export class RouterSearchService implements SearchServiceI {
   }
 
   async setFilters(newFilters: FieldFilters) {
-    const sortBy = await firstValueFrom(this.searchFacade.sortBy$)
+    let sortBy = await firstValueFrom(this.searchFacade.sortBy$)
     const fieldSearchParams = await firstValueFrom(
       this.fieldsService.readFieldValuesFromFilters(newFilters)
     )
+    // apply relevancy sort if a full text criteria is given
+    sortBy = newFilters['any'] ? SortByEnum.RELEVANCY : sortBy
     this.facade.setSearch({
       ...fieldSearchParams,
       [ROUTE_PARAMS.SORT]: sortBy ? sortByToString(sortBy) : undefined,
@@ -46,9 +49,15 @@ export class RouterSearchService implements SearchServiceI {
       this.searchFacade.searchFilters$
     )
     const updatedFilters = { ...currentFilters, ...newFilters }
-    const newParams = await firstValueFrom(
+    let newParams = await firstValueFrom(
       this.fieldsService.readFieldValuesFromFilters(updatedFilters)
     )
+    if (newFilters['any']) {
+      newParams = {
+        ...newParams,
+        [ROUTE_PARAMS.SORT]: sortByToString(SortByEnum.RELEVANCY),
+      }
+    }
     this.facade.updateSearch(newParams as SearchRouteParams)
   }
 

package/src/libs/feature/router/src/lib/default/state/router.effects.ts

@@ -1,5 +1,5 @@
 import { Location } from '@angular/common'
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { ActivatedRouteSnapshot, Router } from '@angular/router'
 import { MdViewActions } from '../../../../../../../libs/feature/record/src'
 import {
@@ -9,15 +9,18 @@ import {
   SetFilters,
   SetSortBy,
 } from '../../../../../../../libs/feature/search/src'
-import { FieldFilters } from '../../../../../../../libs/common/domain/src/lib/model/search'
+import {
+  FieldFilters,
+  SortByEnum,
+} from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { navigation } from '@ngrx/router-store/data-persistence'
 import { of, pairwise, startWith } from 'rxjs'
-import { map, mergeMap, tap } from 'rxjs/operators'
+import { map, mergeMap, take, tap } from 'rxjs/operators'
 import * as RouterActions from './router.actions'
 import { RouterFacade } from './router.facade'
 import { ROUTE_PARAMS } from '../constants'
-import { sortByFromString } from '../../../../../../../libs/util/shared/src'
+import { sortByFromString, sortByToString } from '../../../../../../../libs/util/shared/src'
 import { ROUTER_CONFIG, RouterConfigModel } from '../router.config'
 import { RouterService } from '../router.service'
 
@@ -103,6 +106,33 @@ export class RouterEffects {
     )
   )
 
+  /**
+   * This effect is needed because on the page load, the search params from the URL are
+   * directly applied to the underlying search facade; this means that it doesn't go
+   * through the RouterSearchService which makes sure that a relevancy sort is applied
+   * whenever there's a full text search criteria set.
+   */
+  applyInitialRelevancySort$ = createEffect(
+    () =>
+      this.facade.searchParams$.pipe(
+        take(1),
+        tap((filters) => {
+          const relevancySort = sortByToString(SortByEnum.RELEVANCY)
+          if (
+            filters['q'] &&
+            (!Array.isArray(filters['q']) || filters['q'].length > 0) &&
+            !filters[ROUTE_PARAMS.SORT]
+          ) {
+            this.facade.updateSearch({
+              ...filters,
+              [ROUTE_PARAMS.SORT]: relevancySort,
+            })
+          }
+        })
+      ),
+    { dispatch: false }
+  )
+
   /**
    * This effect will load the metadata when a navigation to
    * a metadata record happens

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

@@ -111,6 +111,8 @@ export function reducerSearch(
         },
       }
     }
+    // From router.effects
+    // From home - fuzzy-search - search.service
     case fromActions.SET_FILTERS: {
       return {
         ...state,
@@ -132,6 +134,7 @@ export function reducerSearch(
         },
       }
     }
+    // From results WC
     case fromActions.SET_SEARCH: {
       return {
         ...state,

package/src/libs/ui/elements/src/lib/image-input/image-input.component.html

@@ -1,6 +1,9 @@
 @if (previewUrl) {
-  <div class="w-80 h-full flex flex-col gap-2">
-    <gn-ui-image-overlay-preview class="h-48" [imageUrl]="previewUrl">
+  <div class="w-[314px] h-full flex flex-col gap-2">
+    <gn-ui-image-overlay-preview
+      class="w-[314px] h-[314px]"
+      [imageUrl]="previewUrl"
+    >
     </gn-ui-image-overlay-preview>
     @if (showAltTextInput) {
       <gn-ui-text-input

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

@@ -14,7 +14,7 @@
     </div>
   }
   <div class="grow pt-1" [ngClass]="shouldShowThumbnail ? 'sm:w-0' : ''">
-    <div class="flex flex-col gap-2 h-full">
+    <div class="flex flex-col gap-2" [class.h-full]="size !== 'M'">
       <h4
         class="record-card__title"
         data-cy="recordTitle"
@@ -32,63 +32,70 @@
           [title]="abstract"
         ></gn-ui-markdown-parser>
       </div>
-      <div class="record-card__footer">
-        @if (record.ownerOrganization?.name) {
-          <div
-            data-cy="recordOrg"
-            class="grow flex flex-row gap-1 items-center text-primary-lighter"
-            [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
+      @if (size !== 'M') {
+        <ng-container [ngTemplateOutlet]="footerTpl"></ng-container>
+      }
+    </div>
+  </div>
+  @if (size === 'M') {
+    <ng-container [ngTemplateOutlet]="footerTpl"></ng-container>
+  }
+</a>
+
+<ng-template #footerTpl>
+  <div class="record-card__footer">
+    @if (record.ownerOrganization?.name) {
+      <div
+        data-cy="recordOrg"
+        class="grow flex flex-row gap-1 items-center text-primary-lighter"
+        [ngClass]="displayContactIconOnly ? 'justify-center' : ''"
+      >
+        <ng-icon
+          name="iconoirBank"
+          class="text-primary -translate-y-[0.5px] shrink-0"
+          [title]="record.ownerOrganization.name"
+        ></ng-icon>
+        @if (!displayContactIconOnly) {
+          <span
+            data-cy="recordOrgName"
+            class="line-clamp-1"
+            [title]="record.ownerOrganization.name"
+            >{{ record.ownerOrganization.name }}</span
           >
-            <ng-icon
-              name="iconoirBank"
-              class="text-primary -translate-y-[0.5px] shrink-0"
-              [title]="record.ownerOrganization.name"
-            ></ng-icon>
-            @if (!displayContactIconOnly) {
-              <span
-                data-cy="recordOrgName"
-                class="line-clamp-1"
-                [title]="record.ownerOrganization.name"
-                >{{ record.ownerOrganization.name }}</span
-              >
-            }
-          </div>
         }
-        <div class="record-card__footer__other">
-          <div
-            class="xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0"
-          >
-            <gn-ui-kind-badge
-              [extraClass]="'text-[1.2em]'"
-              [styling]="'gray'"
-              [kind]="record?.kind"
-              [contentTemplate]="customTemplate"
-              class="pt-1"
-            >
-              <ng-template #customTemplate></ng-template
-            ></gn-ui-kind-badge>
-            @if (metadataQualityDisplay) {
-              <gn-ui-metadata-quality
-                class="flex items-center min-w-[113px]"
-                [smaller]="true"
-                [metadata]="record"
-                [metadataQualityDisplay]="metadataQualityDisplay"
-                [popoverDisplay]="true"
-              ></gn-ui-metadata-quality>
-            }
-          </div>
-          <div
-            class="flex justify-center"
-            data-cy="recordFav"
-            [ngClass]="displayContactIconOnly ? 'px-1' : 'px-4'"
-          >
-            <ng-container
-              [ngTemplateOutlet]="favoriteTemplate"
-              [ngTemplateOutletContext]="{ $implicit: record }"
-            ></ng-container>
-          </div>
-        </div>
+      </div>
+    }
+    <div class="record-card__footer__other">
+      <div class="xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0">
+        <gn-ui-kind-badge
+          [extraClass]="'text-[1.2em]'"
+          [styling]="'gray'"
+          [kind]="record?.kind"
+          [contentTemplate]="customTemplate"
+          class="pt-1"
+        >
+          <ng-template #customTemplate></ng-template
+        ></gn-ui-kind-badge>
+        @if (metadataQualityDisplay) {
+          <gn-ui-metadata-quality
+            class="flex items-center min-w-[113px]"
+            [smaller]="true"
+            [metadata]="record"
+            [metadataQualityDisplay]="metadataQualityDisplay"
+            [popoverDisplay]="true"
+          ></gn-ui-metadata-quality>
+        }
+      </div>
+      <div
+        class="flex justify-center"
+        data-cy="recordFav"
+        [ngClass]="displayContactIconOnly ? 'px-1' : 'px-4'"
+      >
+        <ng-container
+          [ngTemplateOutlet]="favoriteTemplate"
+          [ngTemplateOutletContext]="{ $implicit: record }"
+        ></ng-container>
       </div>
     </div>
   </div>
-</a>
+</ng-template>

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

@@ -6,7 +6,7 @@
   }
 
   &.size-M {
-    @apply max-w-[940px] md:h-[231px] gap-4;
+    @apply max-w-[940px] gap-4 flex-wrap;
   }
 
   &.size-S {
@@ -28,11 +28,11 @@
   @apply border rounded-lg overflow-hidden shrink-0;
 
   .size-L & {
-    @apply w-full w-[190px] h-[184px];
+    @apply w-[184px] h-[184px];
   }
 
   .size-M & {
-    @apply w-full w-[138px] h-[207px];
+    @apply w-[138px] h-[138px];
   }
 }
 
@@ -44,7 +44,7 @@
   }
 
   .size-M & {
-    @apply line-clamp-2 ml-2;
+    @apply line-clamp-2;
   }
 
   .size-S & {
@@ -64,7 +64,7 @@
   }
 
   .size-M & {
-    @apply line-clamp-3 ml-2;
+    @apply line-clamp-3;
   }
 
   .size-S & {

package/src/libs/ui/map/src/lib/map-utils.ts

@@ -50,7 +50,7 @@ export function dragPanCondition(
 
 export function mouseWheelZoomCondition(
   this: MouseWheelZoom,
-  event: MapBrowserEvent<UIEvent>
+  event: MapBrowserEvent<WheelEvent>
 ) {
   if (!platformModifierKeyOnly(event) && event.type === 'wheel') {
     this.getMap().dispatchEvent('mapmuted')

package/src/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html

@@ -30,7 +30,7 @@
           ></gn-ui-thumbnail>
         }
       </div>
-      <div class="flex flex-col overflow-hidden items-start">
+      <div class="flex flex-col overflow-hidden items-start grow">
         @if (hasOrganization) {
           <span
             class="font-bold transition duration-200 text-primary truncate max-w-full"
@@ -51,32 +51,35 @@
           >
         </p>
       </div>
-    </div>
-    <div class="pt-5 pb-5 px-10 relative">
-      <div class="absolute top-[0.85em] right-[0.85em]">
+      <div class="ml-3 shrink-0">
         <ng-container
           [ngTemplateOutlet]="favoriteTemplate"
           [ngTemplateOutletContext]="{ $implicit: record }"
         ></ng-container>
       </div>
-      <h1
-        class="font-title text-black text-[21px] font-medium mb-3 pr-8"
-        data-cy="recordTitle"
-      >
-        {{ record.title }}
-      </h1>
+    </div>
+    <div class="pt-5 pb-5 px-10 relative">
+      <div class="flex flex-col sm:flex-row gap-4 mb-3">
+        @if (record.overviews?.[0]) {
+          <gn-ui-thumbnail
+            class="block shrink-0 w-[120px] h-[120px] border border-gray-100 rounded-lg overflow-hidden"
+            [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
+            [fit]="'cover'"
+          ></gn-ui-thumbnail>
+        }
+        <h1
+          class="font-title text-black text-[21px] font-medium"
+          data-cy="recordTitle"
+        >
+          {{ record.title }}
+        </h1>
+      </div>
       <p class="line-clamp-3">
         <gn-ui-markdown-parser
           [textContent]="abstract"
           [whitoutStyles]="true"
         />
       </p>
-      @if (record.overviews?.[0]) {
-        <gn-ui-thumbnail
-          class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
-          [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
-        ></gn-ui-thumbnail>
-      }
       @if (isDownloadable || isViewable) {
         <div class="flex flex-row mt-3">
           @if (isDownloadable) {

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -331,11 +331,15 @@ export async function getLayers(url: string, serviceProtocol: ServiceProtocol) {
     case 'wfs': {
       const endpointWfs = await new WfsEndpoint(url).isReady()
       const featureTypes = await endpointWfs.getFeatureTypes()
-      const layers = await Promise.all(
-        featureTypes.map(async (collection) => {
-          return await endpointWfs.getFeatureTypeFull(collection.name)
-        })
+      const layers = (
+        await Promise.allSettled(
+          featureTypes.map((collection) => {
+            return endpointWfs.getFeatureTypeFull(collection.name)
+          })
+        )
       )
+        .filter((settled) => settled.status === 'fulfilled')
+        .map((fulfilled) => fulfilled.value)
       return layers
     }
     case 'wms': {

package/translations/de.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Die URL des OGC API-Dienstes eingeben",
   "map.select.layer": "Datenquelle",
   "map.select.style": "Style",
+  "map.style.default": "Standard",
   "map.wfs.urlInput.hint": "Die WFS URL eingeben",
   "map.wms.urlInput.hint": "Die WMS URL eingeben",
   "multiselect.filter.placeholder": "Suche",
@@ -604,6 +605,7 @@
   "search.filters.producerOrg": "Herausgeber",
   "search.filters.publicationYear": "Veröffentlichungsjahr",
   "search.filters.publisherOrg": "Vertreiber",
+  "search.filters.recordKind": "",
   "search.filters.recordKind.all": "Alle",
   "search.filters.recordKind.dataset": "Datensätze",
   "search.filters.recordKind.reuse": "Wiederverwendungen",
@@ -642,7 +644,6 @@
   "service.metadata.spatialExtent": "Räumliche Ausdehnung",
   "share.tab.permalink": "Teilen",
   "share.tab.webComponent": "Integrieren",
-  "stac.filter.reset": "Filter zurücksetzen",
   "stac.filter.enable": "",
   "stac.filter.reset": "",
   "stac.results.noResults": "Ihre Suchfilter lieferten keine Ergebnisse",

package/translations/en.json

@@ -382,6 +382,7 @@
   "map.ogc.urlInput.hint": "Enter OGC API service URL",
   "map.select.layer": "Data source",
   "map.select.style": "Style",
+  "map.style.default": "Default",
   "map.wfs.urlInput.hint": "Enter WFS service URL",
   "map.wms.urlInput.hint": "Enter WMS service URL",
   "multiselect.filter.placeholder": "Search",