geonetwork-ui 2.9.0-dev.981068ab5 → 2.9.0-dev.af124b7cd

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -44,6 +44,7 @@ export class ExternalViewerButtonComponent {
   private openinNewTab = inject(EXTERNAL_VIEWER_OPEN_NEW_TAB)
 
   @Input() link: DatasetOnlineResource
+  @Input() mimeType = ''
   @Input() extraClass = ''
 
   get externalViewer() {
@@ -80,6 +81,7 @@ export class ExternalViewerButtonComponent {
         `${encodeURIComponent(this.link.url.toString())}`
       )
       .replace('${service_type}', `${this.supportedLinkLayerType}`)
+      .replace('${mime_type}', `${encodeURIComponent(this.mimeType)}`)
     window.open(url, this.openinNewTab ? '_blank' : '_self').focus()
   }
 }

package/src/libs/feature/record/src/lib/gpf-api-dl/gpf-api-dl.component.html

@@ -12,7 +12,7 @@
     </h2>
     <button
       (click)="resetUrl()"
-      class="bg-primary-opacity-50 inline-flex items-center justify-center px-4 py-2 text-white rounded hover:bg-primary transition"
+      class="bg-primary/50 inline-flex items-center justify-center px-4 py-2 text-white rounded hover:bg-primary transition"
       [attr.title]="'record.metadata.api.form.resetTooltip' | translate"
       [attr.aria-label]="'record.metadata.api.form.resetTooltip' | translate"
     >
@@ -97,7 +97,7 @@
         'px-4 py-2 text-white rounded transition ' +
         ((page$ | async) <= 1
           ? 'bg-gray-400 cursor-not-allowed  '
-          : 'bg-primary-opacity-50  hover:bg-primary')
+          : 'bg-primary/50  hover:bg-primary')
       "
       [attr.title]="'record.metadata.api.form.previousPageTooltip' | translate"
       [attr.aria-label]="
@@ -117,10 +117,10 @@
     <button
       (click)="moreResult()"
       [class]="
-        'bg-primary-opacity-50 px-4 py-2 text-white rounded transition ' +
+        'bg-primary/50 px-4 py-2 text-white rounded transition ' +
         ((page$ | async) >= (pageMax$ | async)
           ? 'bg-gray-400 cursor-not-allowed  '
-          : 'bg-primary-opacity-50  hover:bg-primary')
+          : 'bg-primary/50  hover:bg-primary')
       "
       [attr.title]="'record.metadata.api.form.nextPageTooltip' | translate"
       [attr.aria-label]="'record.metadata.api.form.nextPageTooltip' | translate"

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/router.module.ts

@@ -1,6 +1,5 @@
-import { ModuleWithProviders, NgModule, inject } from '@angular/core'
+import { inject, ModuleWithProviders, NgModule } from '@angular/core'
 import { RouteReuseStrategy } from '@angular/router'
-import { EffectsModule } from '@ngrx/effects'
 import {
   FullRouterStateSerializer,
   routerReducer,
@@ -11,8 +10,9 @@ import { ROUTER_STATE_KEY } from './constants'
 import { RouterService } from './router.service'
 import { SearchRouteReuseStrategy } from './SearchRouteReuseStrategy'
 import { RouterFacade } from './state/router.facade'
-import { RouterEffects } from './state/router.effects'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
+import { RouterEffects } from './state/router.effects'
+import { EffectsModule } from '@ngrx/effects'
 
 @NgModule({
   imports: [

package/src/libs/feature/router/src/lib/default/router.service.ts

@@ -1,10 +1,10 @@
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import {
   ROUTER_ROUTE_DATASET,
   ROUTER_ROUTE_ORGANIZATION,
+  ROUTER_ROUTE_REUSE,
   ROUTER_ROUTE_SEARCH,
   ROUTER_ROUTE_SERVICE,
-  ROUTER_ROUTE_REUSE,
 } from '.'
 import { Router, Routes } from '@angular/router'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'

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'
@@ -20,6 +21,7 @@ export class RouterSearchService implements SearchServiceI {
   private fieldsService = inject(FieldsService)
 
   setSortAndFilters(filters: FieldFilters, sortBy: SortByField) {
+    console.log('RouterSearchService - setSortAndFilters', { filters, sortBy })
     this.fieldsService
       .readFieldValuesFromFilters(filters)
       .subscribe((values) => {
@@ -31,10 +33,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,
@@ -42,13 +46,21 @@ export class RouterSearchService implements SearchServiceI {
   }
 
   async updateFilters(newFilters: FieldFilters) {
+    console.log('RouterSearchService - updateFilters', newFilters)
     const currentFilters = await firstValueFrom(
       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),
+      }
+    }
+    console.log('RouterSearchService - updateFilters - newParams', newParams)
     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'
 
@@ -55,6 +58,12 @@ export class RouterEffects {
       startWith([null, {}] as [Record<string, string>, FieldFilters]),
       pairwise(),
       map(([[oldParams, oldFilters], [newParams, newFilters]]) => {
+        console.log('RouterEffects - syncSearchState', {
+          oldParams,
+          newParams,
+          oldFilters,
+          newFilters,
+        })
         let sortBy =
           ROUTE_PARAMS.SORT in newParams
             ? sortByFromString(newParams[ROUTE_PARAMS.SORT])
@@ -103,6 +112,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/router/src/lib/default/state/router.facade.ts

@@ -70,6 +70,7 @@ export class RouterFacade {
   }
 
   updateSearch(query?: SearchRouteParams) {
+    console.log('RouterFacade - updateSearch', query)
     this.go({
       path: this.routerService.getSearchRoute(),
       ...(query && { query: flattenQueryParams(query) }),
@@ -78,6 +79,7 @@ export class RouterFacade {
   }
 
   setSearch(query?: SearchRouteParams) {
+    console.log('RouterFacade - setSearch', query)
     this.go({
       path: this.routerService.getSearchRoute(),
       ...(query && { query: flattenQueryParams(query) }),

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts

@@ -79,6 +79,7 @@ export class FuzzySearchComponent implements OnInit {
     if (this.inputSubmitted.observers.length > 0) {
       this.inputSubmitted.emit(any)
     } else {
+      console.log('FuzzySearchComponent - handleInputSubmission', any)
       this.searchService.updateFilters({ any })
     }
   }

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

@@ -111,7 +111,10 @@ export function reducerSearch(
         },
       }
     }
+    // From router.effects
+    // From home - fuzzy-search - search.service
     case fromActions.SET_FILTERS: {
+      console.log('reducerSearch - SET_FILTERS', action.payload)
       return {
         ...state,
         params: {
@@ -132,6 +135,7 @@ export function reducerSearch(
         },
       }
     }
+    // From results WC
     case fromActions.SET_SEARCH: {
       return {
         ...state,

package/src/libs/feature/search/src/lib/utils/service/search.service.ts

@@ -19,11 +19,13 @@ export class SearchService implements SearchServiceI {
   private facade = inject(SearchFacade)
 
   setSortAndFilters(filters: FieldFilters, sort: SortByField) {
+    console.log('SearchService - setSortAndFilters', { filters, sort })
     this.setFilters(filters)
     this.setSortBy(sort)
   }
 
   updateFilters(params: FieldFilters) {
+    console.log('SearchService - updateFilters', params)
     this.facade.searchFilters$
       .pipe(
         first(),

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

@@ -64,7 +64,7 @@
     <div class="flex flex-row gap-2.5 items-center pt-1">
       @if (link.accessServiceProtocol !== 'GPFDL') {
         <span
-          class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
+          class="bg-primary/50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
           [ngClass]="{
             '!bg-primary': currentlyActive,
           }"
@@ -76,7 +76,7 @@
       }
       @if (link.accessServiceProtocol === 'GPFDL') {
         <span
-          class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
+          class="bg-primary/50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
           [ngClass]="{
             '!bg-primary': currentlyActive,
           }"

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.ts

@@ -45,13 +45,12 @@ export class ApplicationBannerComponent {
         this.icon = 'matWarning'
         break
       case 'light':
-        this.msgClass =
-          'bg-primary-opacity-10 border-primary-lightest text-black'
+        this.msgClass = 'bg-primary/10 border-primary-lightest text-black'
         this.icon = 'matInfoOutline'
         break
       case 'secondary':
       default:
-        this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        this.msgClass = 'bg-primary/50 border-primary-darker text-black'
         this.icon = 'matWarningAmberOutline'
         break
     }

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