geonetwork-ui 2.9.0-dev.6da5cd143 → 2.9.0-dev.af124b7cd

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

@@ -231,7 +231,8 @@ export class MapViewComponent implements AfterViewInit {
           return compatibleLinks[0]
         }
       }
-    })
+    }),
+    shareReplay(1)
   )
 
   isWmsStyleMode$ = this.selectedSourceLink$.pipe(
@@ -346,12 +347,38 @@ export class MapViewComponent implements AfterViewInit {
     shareReplay(1)
   )
 
+  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]) => {
+    switchMap(([link, excludeWfs, wmsStyleName, wmsMimeType]) => {
       if (!link) {
         return of([])
       }
@@ -367,8 +394,12 @@ export class MapViewComponent implements AfterViewInit {
       }
       return this.getLayerFromLink(link).pipe(
         map((layer) =>
-          wmsStyleName && layer.type === 'wms'
-            ? { ...layer, style: wmsStyleName }
+          layer.type === 'wms'
+            ? {
+                ...layer,
+                ...(wmsStyleName && { style: wmsStyleName }),
+                ...(wmsMimeType && { format: wmsMimeType }),
+              }
             : layer
         ),
         map((layer) => [layer]),

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'
@@ -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/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/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) {