geonetwork-ui 2.2.0-dev.2446b017 → 2.2.0-dev.266c9755

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -2,18 +2,18 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import type { FeatureCollection } from 'geojson'
 import { extend, Extent, isEmpty } from 'ol/extent'
-import OlFeature, { FeatureLike } from 'ol/Feature'
+import Feature from 'ol/Feature'
 import GeoJSON from 'ol/format/GeoJSON'
 import { Geometry } from 'ol/geom'
 import Layer from 'ol/layer/Layer'
 import Map from 'ol/Map'
-import { fromLonLat } from 'ol/proj'
+import { transformExtent } from 'ol/proj'
 import Source from 'ol/source/Source'
 import ImageWMS from 'ol/source/ImageWMS'
 import TileWMS from 'ol/source/TileWMS'
 import VectorSource from 'ol/source/Vector'
-import { Options, optionsFromCapabilities } from 'ol/source/WMTS'
-import { DragPan, MouseWheelZoom, defaults, Interaction } from 'ol/interaction'
+import { optionsFromCapabilities } from 'ol/source/WMTS'
+import { defaults, DragPan, Interaction, MouseWheelZoom } from 'ol/interaction'
 import {
   mouseOnly,
   noModifierKeys,
@@ -21,45 +21,53 @@ import {
   primaryAction,
 } from 'ol/events/condition'
 import WMTSCapabilities from 'ol/format/WMTSCapabilities'
-import { from, Observable, of } from 'rxjs'
+import { from, Observable } from 'rxjs'
 import { map } from 'rxjs/operators'
 import {
   MapContextLayerModel,
   MapContextLayerTypeEnum,
+  MapContextLayerWmsModel,
   MapContextLayerWmtsModel,
 } from '../map-context/map-context.model'
-import { MapUtilsWMSService } from './map-utils-wms.service'
 import Collection from 'ol/Collection'
 import MapBrowserEvent from 'ol/MapBrowserEvent'
-import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  DatasetDistribution,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ProxyService } from '../../../../../../libs/util/shared/src'
+import { WmsEndpoint } from '@camptocamp/ogc-client'
+import { LONLAT_CRS_CODES } from '../constant/projections'
+import { fromEPSGCode, register } from 'ol/proj/proj4'
+import proj4 from 'proj4/dist/proj4'
 
 const FEATURE_PROJECTION = 'EPSG:3857'
 const DATA_PROJECTION = 'EPSG:4326'
 
+const GEOJSON = new GeoJSON()
+
 @Injectable({
   providedIn: 'root',
 })
 export class MapUtilsService {
-  constructor(private http: HttpClient, private wmsUtils: MapUtilsWMSService) {}
+  constructor(private http: HttpClient, private proxy: ProxyService) {}
 
   createEmptyMap(): Map {
-    const map = new Map({
+    return new Map({
       controls: [],
       pixelRatio: 1,
     })
-    return map
   }
 
   readFeatureCollection = (
     featureCollection: FeatureCollection,
     featureProjection = FEATURE_PROJECTION,
     dataProjection = DATA_PROJECTION
-  ): FeatureLike[] => {
-    const olFeatures = new GeoJSON().readFeatures(featureCollection, {
+  ): Feature<Geometry>[] => {
+    return GEOJSON.readFeatures(featureCollection, {
       featureProjection,
       dataProjection,
-    })
-    return olFeatures
+    }) as Feature<Geometry>[]
   }
 
   isWMSLayer(layer: Layer<Source>): boolean {
@@ -78,20 +86,14 @@ export class MapUtilsService {
       ...source.getParams(),
       INFO_FORMAT: 'application/json',
     }
-    const url = source.getFeatureInfoUrl(
-      coordinate,
-      resolution,
-      projection,
-      params
-    )
-    return url
+    return source.getFeatureInfoUrl(coordinate, resolution, projection, params)
   }
 
-  getVectorFeaturesFromClick(olMap, event): OlFeature<Geometry>[] {
+  getVectorFeaturesFromClick(olMap, event): Feature<Geometry>[] {
     const features = []
     const hit = olMap.forEachFeatureAtPixel(
       event.pixel,
-      (feature: OlFeature<Geometry>) => {
+      (feature: Feature<Geometry>) => {
         return feature
       },
       { layerFilter: (layer) => layer.getSource() instanceof VectorSource }
@@ -103,9 +105,9 @@ export class MapUtilsService {
   }
 
   getGFIFeaturesObservablesFromClick(
-    olMap,
-    event
-  ): Observable<OlFeature<Geometry>[]>[] {
+    olMap: Map,
+    event: MapBrowserEvent<PointerEvent>
+  ): Observable<Feature<Geometry>[]>[] {
     const wmsLayers = olMap.getLayers().getArray().filter(this.isWMSLayer)
 
     if (wmsLayers.length > 0) {
@@ -128,8 +130,8 @@ export class MapUtilsService {
   /**
    * Will emit `null` if no extent could be computed
    */
-  getLayerExtent(layer: MapContextLayerModel): Observable<Extent | null> {
-    let geographicExtent: Observable<Extent>
+  async getLayerExtent(layer: MapContextLayerModel): Promise<Extent | null> {
+    let latLonExtent: Extent
     if (
       layer &&
       layer.type === 'geojson' &&
@@ -138,37 +140,55 @@ export class MapUtilsService {
       layer.data.features[0] &&
       layer.data.features[0].geometry
     ) {
-      geographicExtent = of(layer.data).pipe(
-        map((layerData) =>
-          new GeoJSON()
-            .readFeatures(layerData)
-            .map((feature) => feature.getGeometry())
-            .filter((geom) => !!geom)
-            .reduce(
-              (prev, curr) =>
-                prev ? extend(prev, curr.getExtent()) : curr.getExtent(),
-              null as Extent
-            )
+      latLonExtent = new GeoJSON()
+        .readFeatures(layer.data)
+        .map((feature) => feature.getGeometry())
+        .filter((geom) => !!geom)
+        .reduce(
+          (prev, curr) =>
+            prev ? extend(prev, curr.getExtent()) : curr.getExtent(),
+          null as Extent
         )
-      )
     } else if (layer && layer.type === 'wms') {
-      geographicExtent = this.wmsUtils.getLayerLonLatBBox(layer)
+      latLonExtent = await this.getWmsLayerExtent(layer)
     } else if (layer && layer.type === 'wmts') {
       if (layer.extent) {
-        geographicExtent = of(layer.extent)
+        latLonExtent = layer.extent
       } else {
-        return of(layer.options.tileGrid.getExtent())
+        return layer.options.tileGrid.getExtent()
       }
     } else {
-      return of(null)
+      return null
+    }
+    if (!latLonExtent || isEmpty(latLonExtent)) {
+      return null
     }
-    return geographicExtent.pipe(
-      map((extent) => [
-        ...fromLonLat([extent[0], extent[1]], 'EPSG:3857'),
-        ...fromLonLat([extent[2], extent[3]], 'EPSG:3857'),
-      ]),
-      map((extent) => (isEmpty(extent) ? null : extent))
+    return transformExtent(latLonExtent, 'EPSG:4326', 'EPSG:3857')
+  }
+
+  async getWmsLayerExtent(
+    layer: MapContextLayerWmsModel
+  ): Promise<Extent | null> {
+    const endpoint = await new WmsEndpoint(
+      this.proxy.getProxiedUrl(layer.url)
+    ).isReady()
+    const { boundingBoxes } = endpoint.getLayerByName(layer.name)
+    if (!Object.keys(boundingBoxes).length) {
+      return null
+    }
+    const lonLatCRS = Object.keys(boundingBoxes)?.find((crs) =>
+      LONLAT_CRS_CODES.includes(crs)
     )
+    if (lonLatCRS) {
+      return boundingBoxes[lonLatCRS].map(parseFloat)
+    } else {
+      const availableEPSGCode = Object.keys(boundingBoxes)[0]
+      register(proj4)
+      const proj = await fromEPSGCode(availableEPSGCode)
+      const bboxWithFiniteNumbers =
+        boundingBoxes[availableEPSGCode].map(parseFloat)
+      return transformExtent(bboxWithFiniteNumbers, proj, 'EPSG:4326')
+    }
   }
 
   getWmtsLayerFromCapabilities(
@@ -235,6 +255,21 @@ ${e.stack || e.message || e}`)
         .getArray()
     )
   }
+
+  getRecordExtent(record: Partial<CatalogRecord>): Extent {
+    if (!('spatialExtents' in record)) {
+      return null
+    }
+    // transform an array of geojson geometries into a bbox
+    const totalExtent = record.spatialExtents.reduce(
+      (prev, curr) => {
+        const geom = GEOJSON.readGeometry(curr.geometry)
+        return extend(prev, geom.getExtent())
+      },
+      [Infinity, Infinity, -Infinity, -Infinity]
+    )
+    return transformExtent(totalExtent, 'EPSG:4326', 'EPSG:3857')
+  }
 }
 
 export function dragPanCondition(

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

@@ -22,10 +22,14 @@ import { StyleLike } from 'ol/style/Style'
 import {
   BehaviorSubject,
   combineLatest,
+  from,
+  lastValueFrom,
   Observable,
   of,
+  startWith,
   Subscription,
   throwError,
+  withLatestFrom,
 } from 'rxjs'
 import {
   catchError,
@@ -99,7 +103,7 @@ export class MapViewComponent implements OnInit, OnDestroy {
 
   mapContext$ = this.currentLayers$.pipe(
     switchMap((layers) =>
-      this.mapUtils.getLayerExtent(layers[0]).pipe(
+      from(this.mapUtils.getLayerExtent(layers[0])).pipe(
         catchError((error) => {
           console.warn(error) // FIXME: report this to the user somehow
           return of(undefined)
@@ -115,7 +119,19 @@ export class MapViewComponent implements OnInit, OnDestroy {
         ),
         tap(() => this.resetSelection())
       )
-    )
+    ),
+    withLatestFrom(this.mdViewFacade.metadata$),
+    map(([context, metadata]) => {
+      if (context.view.extent) return context
+      const extent = this.mapUtils.getRecordExtent(metadata)
+      return {
+        ...context,
+        view: {
+          ...context.view,
+          extent,
+        },
+      }
+    })
   )
 
   constructor(
@@ -123,7 +139,6 @@ export class MapViewComponent implements OnInit, OnDestroy {
     private mapManager: MapManagerService,
     private mapUtils: MapUtilsService,
     private dataService: DataService,
-    private proxy: ProxyService,
     private featureInfo: FeatureInfoService,
     private changeRef: ChangeDetectorRef,
     private styleService: MapStyleService

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.html

@@ -1,10 +1,18 @@
-<div>
-  <span class="align-text-top mr-1.5 favorite-count" *ngIf="hasFavoriteCount">{{
-    favoriteCount
-  }}</span>
+<div class="flex flex-row content-center">
+  <span
+    class="align-text-top mr-1.5 mt-1.5 favorite-count"
+    *ngIf="hasFavoriteCount && displayCount"
+    >{{ favoriteCount }}</span
+  >
   <gn-ui-star-toggle
     [toggled]="isFavorite$ | async"
     (newValue)="toggleFavorite($event)"
     [disabled]="loading || (isAnonymous$ | async)"
+    class="mt-1"
   ></gn-ui-star-toggle>
+  <span
+    class="align-text-top ml-1.5 favorite-count mt-1.5"
+    *ngIf="!displayCount"
+    translate="datahub.record.addToFavorites"
+  ></span>
 </div>

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts

@@ -24,6 +24,7 @@ import { PlatformServiceInterface } from '../../../../../../../libs/common/domai
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
+  @Input() displayCount? = true
   @Input() set record(value) {
     this.record_ = value
     this.favoriteCount =

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html

@@ -5,5 +5,6 @@
   [selected]="currentLang"
   ariaName="languages"
   [showTitle]="false"
+  [extraBtnClass]="'flex justify-items-center text-white !pl-2 !py-1'"
 >
 </gn-ui-dropdown-selector>

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts

@@ -34,7 +34,7 @@ export class LanguageSwitcherComponent implements OnInit {
   ngOnInit(): void {
     const languages = this.languagePlaceholder || DEFAULT_LANGUAGES
     this.languageList = languages.map((language) => ({
-      label: `language.${language}`,
+      label: `${language}`.toUpperCase(),
       value: language,
     }))
   }

package/src/libs/ui/elements/src/index.ts

@@ -18,4 +18,7 @@ export * from './lib/pagination/pagination.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/max-lines/max-lines.component'
 export * from './lib/record-api-form/record-api-form.component'
+export * from './lib/markdown-parser/markdown-parser.component'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'

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

@@ -8,7 +8,10 @@
   >
     record.metadata.download
   </p>
-  <div class="flex flex-wrap justify-start sm:justify-end sm:pb-4">
+  <div
+    class="flex flex-wrap justify-start sm:justify-end sm:pb-4"
+    data-cy="download-format-filters"
+  >
     <gn-ui-button
       class="m-1 format-filter"
       [extraClass]="

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

@@ -0,0 +1,30 @@
+<gn-ui-content-ghost
+  [showContent]="imageUrl !== undefined"
+  ghostClass="h-48 mb-3"
+>
+  <div
+    *ngIf="imageUrl"
+    [showContent]="imageUrl !== undefined"
+    data-cy="record-thumbnail"
+    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+  >
+    <gn-ui-thumbnail
+      class="relative h-full w-full"
+      [thumbnailUrl]="imageUrl"
+      fit="cover"
+      (placeholderShown)="isPlaceholderShown.emit($event)"
+    ></gn-ui-thumbnail>
+    <div class="relative">
+      <gn-ui-button
+        class="absolute bottom-0 right-0 z-10 mr-2 mb-2"
+        [type]="'outline'"
+        [extraClass]="'!py-2 !px-0'"
+        (buttonClick)="openLightbox(imageUrl)"
+      >
+        <mat-icon class="material-symbols-outlined font-extralight"
+          >zoom_out_map</mat-icon
+        >
+      </gn-ui-button>
+    </div>
+  </div>
+</gn-ui-content-ghost>

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import * as basicLightbox from 'basiclightbox'
+
+@Component({
+  selector: 'gn-ui-image-overlay-preview',
+  templateUrl: './image-overlay-preview.component.html',
+  styleUrls: ['./image-overlay-preview.component.css'],
+})
+export class ImageOverlayPreviewComponent {
+  @Input() imageUrl: string
+  @Output() isPlaceholderShown = new EventEmitter<boolean>()
+  openLightbox(src: string) {
+    basicLightbox.create(`<img src="${src}"/>`).show()
+  }
+}

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -0,0 +1,264 @@
+/** Body **/
+:host ::ng-deep .markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  margin: 0px 0px 1.5rem 0px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+/** Emphasis **/
+
+:host ::ng-deep .markdown-body strong {
+  @apply font-bold;
+  color: var(--color-secondary-darker);
+}
+
+/** Headings **/
+
+:host ::ng-deep .markdown-body h1,
+:host ::ng-deep .markdown-body h2,
+:host ::ng-deep .markdown-body h3,
+:host ::ng-deep .markdown-body h4,
+:host ::ng-deep .markdown-body h5,
+:host ::ng-deep .markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  line-height: 1.25;
+  @apply text-title font-title font-bold;
+}
+
+:host ::ng-deep .markdown-body h1 {
+  margin: 0.67em 0;
+  padding-bottom: 0.3em;
+  font-size: 2em;
+  color: var(--color-primary);
+}
+
+:host ::ng-deep .markdown-body h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.5em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h3 {
+  font-size: 1.25em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h4 {
+  font-size: 1em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h5 {
+  font-size: 0.875em;
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body h6 {
+  font-size: 0.85em;
+  color: var(--color-secondary-lighter);
+}
+
+/** Paragraphs **/
+
+:host ::ng-deep .markdown-body p {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+/** Links **/
+
+:host ::ng-deep .markdown-body p > a {
+  margin-top: 0;
+  margin-bottom: 10px;
+  color: var(--color-primary) !important;
+  text-decoration: none !important;
+  @apply font-bold;
+}
+
+:host ::ng-deep .markdown-body p > a:hover {
+  color: var(--color-primary-darker) !important;
+}
+
+/** Blockquotes **/
+
+:host ::ng-deep .markdown-body blockquote {
+  margin: 0;
+  padding: 0 1em;
+  color: var(--color-secondary-lighter);
+  border-left: 0.25em solid var(--color-primary-lighter);
+}
+
+/** Code **/
+
+:host ::ng-deep .markdown-body pre {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 12px;
+  background-color: var(--color-gray-100);
+  word-wrap: normal;
+}
+
+:host ::ng-deep .markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  color: var(--color-secondary);
+  border-radius: 6px;
+}
+
+:host ::ng-deep .markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  white-space: break-spaces;
+  border-radius: 6px;
+}
+
+:host ::ng-deep .markdown-body pre code {
+  display: inline;
+  max-width: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  line-height: inherit;
+  word-wrap: normal;
+  border: 0;
+}
+
+/** Horizontal rules **/
+
+:host ::ng-deep .markdown-body hr {
+  box-sizing: content-box;
+  overflow: hidden;
+  background: transparent;
+  border-bottom: 1px solid var(--color-secondary);
+  height: 0.15em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--color-secondary);
+  border: 0;
+}
+
+:host ::ng-deep .markdown-body hr::before {
+  display: table;
+  content: '';
+}
+
+:host ::ng-deep .markdown-body hr::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+
+/** Lists **/
+
+:host ::ng-deep .markdown-body ul,
+:host ::ng-deep .markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2em;
+  list-style: revert;
+}
+
+:host ::ng-deep .markdown-body ol ol,
+:host ::ng-deep .markdown-body ul ol {
+  list-style-type: lower-roman;
+}
+
+:host ::ng-deep .markdown-body ul ul ol,
+:host ::ng-deep .markdown-body ul ol ol,
+:host ::ng-deep .markdown-body ol ul ol,
+:host ::ng-deep .markdown-body ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+:host ::ng-deep .markdown-body ol[type='a s'] {
+  list-style-type: lower-alpha;
+}
+
+:host ::ng-deep .markdown-body ol[type='A s'] {
+  list-style-type: upper-alpha;
+}
+
+:host ::ng-deep .markdown-body ol[type='i s'] {
+  list-style-type: lower-roman;
+}
+
+:host ::ng-deep .markdown-body ol[type='I s'] {
+  list-style-type: upper-roman;
+}
+
+:host ::ng-deep .markdown-body ol[type='1'] {
+  list-style: unset;
+  list-style-type: decimal;
+}
+
+:host ::ng-deep .markdown-body div > ol:not([type]) {
+  list-style: unset;
+  list-style-type: decimal;
+}
+
+/** Table **/
+
+:host ::ng-deep .markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  overflow: auto;
+  padding-bottom: 15px;
+}
+
+:host ::ng-deep .markdown-body td,
+:host ::ng-deep .markdown-body th {
+  padding: 0;
+}
+
+:host ::ng-deep .markdown-body th {
+  color: var(--color-secondary);
+}
+
+:host ::ng-deep .markdown-body table th,
+:host ::ng-deep .markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid var(--color-gray-500);
+}
+
+:host ::ng-deep .markdown-body table td > :last-child {
+  margin-bottom: 0;
+}
+
+:host ::ng-deep .markdown-body table tr {
+  background-color: #ffffff;
+  border-top: 1px solid var(--color-secondary-lighter);
+}
+
+:host ::ng-deep .markdown-body table tr:nth-child(2n) {
+  background-color: var(--color-gray-100);
+}
+
+:host ::ng-deep .markdown-body table img {
+  background-color: transparent;
+}
+
+/** Images **/
+
+:host ::ng-deep .markdown-body img {
+  border-style: none;
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: transparent;
+}
+
+:host ::ng-deep .markdown-body img[align='right'] {
+  padding-left: 20px;
+}
+
+:host ::ng-deep .markdown-body img[align='left'] {
+  padding-right: 20px;
+}

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.html

@@ -0,0 +1 @@
+<div class="markdown-body" [innerHTML]="parsedMarkdown"></div>

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
+import { marked } from 'marked'
+
+@Component({
+  selector: 'gn-ui-markdown-parser',
+  templateUrl: './markdown-parser.component.html',
+  styleUrls: ['./markdown-parser.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MarkdownParserComponent {
+  @Input() textContent: string
+
+  get parsedMarkdown() {
+    return marked.parse(this.textContent)
+  }
+}