[Datahub]: Add interactive map filter to STAC viewer

.github/PULL_REQUEST_TEMPLATE.md

@@ -30,7 +30,7 @@ If the changes incur visual changes, please include screenshots or an animated s
 - [ ] If **new UI components** 🕹️ are introduced: corresponding stories in Storybook were created
 - [ ] If **breaking changes** 🪚 are introduced: add the `breaking change` label
 - [ ] If **bugs** 🐞 are fixed: add the `backport <release branch>` label
-- [ ] The [documentation website](docs) 📚 has received the love it deserves
+- [ ] The [documentation website](https://geonetwork.github.io/geonetwork-ui/main/docs/) 📚 has received the love it deserves
 
 <!--
 Please only check items relevant to your contribution. Thank you very much for your time and efforts!

.github/workflows/snyk-security.yml

@@ -46,6 +46,7 @@ jobs:
           args: --sarif-file-output=snyk.sarif
 
       - name: Upload result to GitHub Code Scanning
-        uses: github/codeql-action/upload-sarif@v2
+        uses: github/codeql-action/upload-sarif@v3
+        if: hashFiles('snyk.sarif') != ''
         with:
           sarif_file: snyk.sarif

apps/datahub-e2e/src/e2e/dataset/datasetPreview.cy.ts

@@ -2,6 +2,9 @@ import 'cypress-real-events'
 
 beforeEach(() => {
   // GEOSERVER stubs
+  cy.intercept('GET', 'https://data.geopf.fr/tms/1.0.0/PLAN.IGN', {
+    fixture: 'PLAN_IGN.xml',
+  })
   cy.intercept(
     'GET',
     '/geoserver/insee/ows?SERVICE=WMS&REQUEST=GetCapabilities',
@@ -253,9 +256,12 @@ describe('Preview section', () => {
       .find('gn-ui-dropdown-selector')
       .filter(':visible')
       .as('drop')
-    cy.get('@drop').eq(0).selectDropdownOption('pie')
-    cy.get('@drop').eq(2).selectDropdownOption('men')
-    cy.get('@drop').eq(3).selectDropdownOption('average')
+    cy.get('@drop').eq(0).as('chartTypeDropdown')
+    cy.get('@chartTypeDropdown').selectDropdownOption('pie')
+    cy.get('@drop').eq(2).as('chartXDropdown')
+    cy.get('@chartXDropdown').selectDropdownOption('men')
+    cy.get('@drop').eq(3).as('chartAggDropdown')
+    cy.get('@chartAggDropdown').selectDropdownOption('average')
     cy.get('@previewSection')
       .find('gn-ui-chart')
       .invoke('attr', 'ng-reflect-type')
@@ -425,8 +431,10 @@ describe('Preview section', () => {
       .should('not.contain', '#reset-filters-button')
 
     // Choose date span without results
-    cy.get('@startDatePicker').clear().type('1990-01-01{enter}')
-    cy.get('@endDatePicker').clear().type('1995-01-01{enter}')
+    cy.get('@startDatePicker').clear()
+    cy.get('@startDatePicker').type('1990-01-01{enter}')
+    cy.get('@endDatePicker').clear()
+    cy.get('@endDatePicker').type('1995-01-01{enter}')
 
     // it should show a second reset button instead of results
     cy.get('@previewSection')
@@ -435,8 +443,10 @@ describe('Preview section', () => {
       .should('be.visible')
 
     // Delete start and end dates
-    cy.get('@startDatePicker').clear().type('{enter}')
-    cy.get('@endDatePicker').clear().type('{enter}')
+    cy.get('@startDatePicker').clear()
+    cy.get('@startDatePicker').type('{enter}')
+    cy.get('@endDatePicker').clear()
+    cy.get('@endDatePicker').type('{enter}')
 
     // it should display 12 items
     cy.get('@stacItems').should('have.length', 12)
@@ -530,16 +540,16 @@ describe('Preview section', () => {
         cy.get('@previewSection')
           .find('gn-ui-dropdown-selector')
           .eq(0)
-          .selectDropdownOption(
-            'Plan IGN Tuiles vectorielles (TMS)-https://data.geopf.fr/tms/1.0.0'
-          )
-        // TMS styles need time to load
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        cy.wait(1000)
+          .as('layerDropdown')
+        cy.get('@layerDropdown').selectDropdownOption(
+          'Plan IGN Tuiles vectorielles (TMS)-https://data.geopf.fr/tms/1.0.0'
+        )
         cy.get('@previewSection')
           .find('gn-ui-dropdown-selector')
           .eq(1)
-          .selectDropdownOption('4')
+          .should('not.have.attr', 'ng-reflect-disabled', 'true')
+          .as('styleDropdown')
+        cy.get('@styleDropdown').selectDropdownOption('4')
         cy.get('@configTab').find('gn-ui-button').click()
         cy.visit('/dataset/zzz_nl_test_wfs_syth_la_ciotat')
         cy.get('@mapTab').invoke('attr', 'aria-selected').should('eq', 'true')
@@ -569,9 +579,12 @@ describe('Preview section', () => {
           .find('gn-ui-dropdown-selector')
           .filter(':visible')
           .as('drop')
-        cy.get('@drop').eq(0).selectDropdownOption('pie')
-        cy.get('@drop').eq(2).selectDropdownOption('men')
-        cy.get('@drop').eq(3).selectDropdownOption('average')
+        cy.get('@drop').eq(0).as('chartTypeDropdown')
+        cy.get('@chartTypeDropdown').selectDropdownOption('pie')
+        cy.get('@drop').eq(2).as('chartXDropdown')
+        cy.get('@chartXDropdown').selectDropdownOption('men')
+        cy.get('@drop').eq(3).as('chartAggDropdown')
+        cy.get('@chartAggDropdown').selectDropdownOption('average')
         cy.get('@configTab').find('gn-ui-button').click()
         cy.visit('/dataset/04bcec79-5b25-4b16-b635-73115f7456e4')
         cy.get('@chartTab').invoke('attr', 'aria-selected').should('eq', 'true')

apps/datahub-e2e/src/fixtures/PLAN_IGN.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<TileMap version="1.0.0" tilemapservice="https://data.geopf.fr/tms/1.0.0"><Title>Plan IGN</Title><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/epure.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/accentue.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/classique.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/transparent.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/toponymes.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/sans_toponymes.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/attenue.json"/><Metadata type="Other" mime-type="application/json" href="https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/gris.json"/><SRS>EPSG:3857</SRS><BoundingBox CRS="EPSG:3857" minx="-20026376.393709917" maxx="20026376.393709917" miny="-15538711.09630922" maxy="15538711.09630922"/><Origin x="-20037508.342789199" y="-20037508.342789259"/><TileFormat width="256" height="256" mime-type="application/x-protobuf" extension="pbf"/><TileSets profile="none"><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/0" minrow="0" maxrow="0" mincol="0" maxcol="0" units-per-pixel="156543.033928041" order="0"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/1" minrow="0" maxrow="1" mincol="0" maxcol="1" units-per-pixel="78271.516964020499" order="1"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/2" minrow="0" maxrow="3" mincol="0" maxcol="3" units-per-pixel="39135.758482010198" order="2"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/3" minrow="0" maxrow="7" mincol="0" maxcol="7" units-per-pixel="19567.879241005099" order="3"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/4" minrow="1" maxrow="14" mincol="0" maxcol="15" units-per-pixel="9783.9396205025605" order="4"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/5" minrow="3" maxrow="28" mincol="0" maxcol="31" units-per-pixel="4891.9698102512803" order="5"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/6" minrow="7" maxrow="56" mincol="0" maxcol="63" units-per-pixel="2445.9849051256401" order="6"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/7" minrow="14" maxrow="113" mincol="0" maxcol="127" units-per-pixel="1222.9924525628201" order="7"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/8" minrow="28" maxrow="227" mincol="0" maxcol="255" units-per-pixel="611.49622628141003" order="8"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/9" minrow="57" maxrow="454" mincol="0" maxcol="511" units-per-pixel="305.74811314070502" order="9"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/10" minrow="114" maxrow="909" mincol="0" maxcol="1023" units-per-pixel="152.87405657035299" order="10"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/11" minrow="229" maxrow="1818" mincol="0" maxcol="2047" units-per-pixel="76.437028285176197" order="11"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/12" minrow="459" maxrow="3636" mincol="1" maxcol="4094" units-per-pixel="38.218514142588099" order="12"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/13" minrow="919" maxrow="7272" mincol="2" maxcol="8189" units-per-pixel="19.109257071294099" order="13"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/14" minrow="1839" maxrow="14544" mincol="4" maxcol="16379" units-per-pixel="9.55462853564703" order="14"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/15" minrow="3678" maxrow="29089" mincol="9" maxcol="32758" units-per-pixel="4.7773142678235203" order="15"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/16" minrow="7357" maxrow="58178" mincol="18" maxcol="65517" units-per-pixel="2.3886571339117602" order="16"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/17" minrow="14714" maxrow="116357" mincol="36" maxcol="131035" units-per-pixel="1.1943285669558801" order="17"/><TileSet href="https://data.geopf.fr/tms/1.0.0/PLAN.IGN/18" minrow="29428" maxrow="232715" mincol="72" maxcol="262071" units-per-pixel="0.59716428347793904" order="18"/></TileSets></TileMap>

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.html

@@ -101,14 +101,9 @@
             <ng-template mat-tab-label>
               <span class="tab-header-label" translate>record.tab.stac</span>
             </ng-template>
-            <div
-              class="block"
-              *ngIf="
-                (displayStac$ | async) && (selectedView$ | async) === 'stac'
-              "
-            >
+            <ng-template matTabContent>
               <gn-ui-stac-view></gn-ui-stac-view>
-            </div>
+            </ng-template>
           </mat-tab>
         </mat-tab-group>
       </div>

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.spec.ts

@@ -311,11 +311,16 @@ describe('RecordDataPreviewComponent', () => {
       it('stac tab is selected', () => {
         expect(tabGroup.componentInstance.selectedIndex).toBe(4)
       })
-      it('renders the STAC view component', () => {
-        expect(
-          fixture.debugElement.query(By.directive(StacViewComponent))
-        ).toBeTruthy()
-      })
+      it('renders the STAC view component', fakeAsync(() => {
+        // Wait for all async operations to complete (including lazy-loaded content)
+        fixture.whenStable().then(() => {
+          fixture.detectChanges()
+
+          expect(
+            fixture.debugElement.query(By.directive(StacViewComponent))
+          ).toBeTruthy()
+        })
+      }))
       it('does NOT render the permalink component', () => {
         expect(
           fixture.debugElement.query(By.directive(DataViewShareComponent))

docs/developers/maps.md

@@ -12,7 +12,14 @@ Two components are present in GeoNetwork-UI to render a map using a context.
 
 This component simply takes a map context as input and will render it. Everytime the map context changes, the map is updated accordingly.
 
-This component also offers the following events: `mapClick`, `featuresClicked`, `featuresHovered`.
+This component also offers the following events:
+
+- `mapClick`: emitted when the map is clicked, provides the clicked coordinate
+- `featuresClick`: emitted when features are clicked
+- `featuresHover`: emitted when features are hovered
+- `extentChange`: emitted when the map extent changes (e.g. when panning or zooming)
+- `resolvedExtentChange`: emitted when the view is initialized or changes via the given `context` input
+- `sourceLoadError`: emitted when a layer source fails to load
 
 ```ts
 import { MapContainerComponent } from '@geonetwork-ui/ui/map'

libs/api/metadata-converter/src/lib/xml-utils.spec.ts

@@ -212,10 +212,13 @@ world</root>
       const xmlDoc = assertValidXml(validXml)
 
       expect(xmlDoc).toBeDefined()
-      expect(xmlDoc.querySelector('MD_Metadata')).toBeTruthy()
-      expect(xmlDoc.querySelector('CharacterString')?.textContent).toContain(
-        'my-dataset-001'
+      expect(xmlDoc.documentElement.localName).toBe('MD_Metadata')
+      const characterStrings = xmlDoc.getElementsByTagNameNS(
+        'http://standards.iso.org/iso/19115/-3/gco/1.0',
+        'CharacterString'
       )
+      expect(characterStrings.length).toBeGreaterThan(0)
+      expect(characterStrings[0]?.textContent).toContain('my-dataset-001')
     })
 
     it('should throw an error for invalid XML', () => {

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

@@ -56,7 +56,11 @@ export class DataViewComponent {
       this.linkSelected.emit(this.selectedLink$.value)
     }
   }
-  @Input() set datavizConfig(value: any) {
+  @Input() set datavizConfig(value: {
+    view?: string
+    source?: DatasetOnlineResource
+    chartConfig?: DatavizChartConfigModel
+  }) {
     if ((value && value.view === 'table') || value.view === 'chart') {
       this._selectedView = value.view
     }

libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.ts

@@ -28,7 +28,7 @@ export class GpfApiDlListItemComponent implements OnInit {
   @Input() isFromWfs: boolean
 
   constructor(protected http: HttpClient) {}
-  liste$: Observable<any>
+  liste$: Observable<{ entry: unknown[] }>
 
   ngOnInit(): void {
     this.liste$ = this.http

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

@@ -45,8 +45,8 @@ export interface TermBucket {
 }
 
 export interface Field {
-  entry: Array<any>
-  link: any
+  entry: Array<unknown>
+  link: Record<string, unknown>
 }
 
 @Component({
@@ -75,7 +75,7 @@ export class GpfApiDlComponent implements OnInit {
   page$ = new BehaviorSubject(1)
   url =
     'https://data.geopf.fr/telechargement/capabilities?outputFormat=application/json'
-  choices: any
+  choices: { zone: TermBucket[]; format: TermBucket[]; category: TermBucket[] }
   bucketPromisesZone: Choice[]
   bucketPromisesFormat: Choice[]
   bucketPromisesCrs: Choice[]
@@ -144,8 +144,10 @@ export class GpfApiDlComponent implements OnInit {
     })
   )
 
-  getFilteredProduct$(url): Observable<any> {
-    return this.http.get(url)
+  getFilteredProduct$(
+    url
+  ): Observable<{ entry: unknown[]; totalentries: number }> {
+    return this.http.get<{ entry: unknown[]; totalentries: number }>(url)
   }
 
   getLinkFormat(produit): string {
@@ -224,7 +226,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempZone = this.choices.zone.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempZone.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempZone.unshift({ value: 'null', label: 'ZONE' })
@@ -233,7 +235,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempFormat = this.choices.format.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempFormat.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempFormat.unshift({ value: 'null', label: 'FORMAT' })
@@ -242,7 +244,7 @@ export class GpfApiDlComponent implements OnInit {
 
     const tempCrs = this.choices.category.map((bucket) => ({
       value: bucket.term,
-      label: bucket.label,
+      label: String(bucket.label),
     }))
     tempCrs.sort((a, b) => (a.label > b.label ? 1 : -1))
     tempCrs.unshift({ value: 'null', label: 'CRS' })

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

@@ -27,7 +27,6 @@ import {
   map,
   shareReplay,
   switchMap,
-  take,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
@@ -118,7 +117,11 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set selectedView(value: string) {
     this.selectedView$.next(value)
   }
-  @Input() set datavizConfig(value: any) {
+  @Input() set datavizConfig(value: {
+    view?: string
+    styleTMSIndex?: number
+    source?: DatasetOnlineResource
+  }) {
     if (value && value.view === 'map') {
       this.selectedView$.next(value.view)
       if (value.styleTMSIndex) {

libs/feature/record/src/lib/stac-view/stac-view.component.css

@@ -1,3 +1,8 @@
 :host {
   --gn-ui-button-padding: 7px 8px;
 }
+
+/* Ensure OpenLayers controls are above the custom toggle */
+::ng-deep .ol-overlaycontainer-stopevent {
+  z-index: 11 !important;
+}

libs/feature/record/src/lib/stac-view/stac-view.component.html

@@ -1,14 +1,16 @@
 <div class="mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg">
   <div
-    class="w-full min-h-[366px] flex md:flex-row flex-col border-b border-gray-300"
+    class="w-full h-[700px] md:h-[366px] flex md:flex-row flex-col border-b border-gray-300"
   >
-    <div class="md:w-1/2 w-full flex-1 flex flex-col">
+    @let filterState = filterState$ | async;
+
+    <div class="w-full md:w-5/12 h-[366px] flex flex-col">
       <gn-ui-date-range-inputs
-        [temporalExtent]="currentTemporalExtent$ | async"
+        [temporalExtent]="filterState.temporalExtent"
         (temporalExtentChange)="onTemporalExtentChange($event)"
       ></gn-ui-date-range-inputs>
 
-      <div class="mt-auto mb-8 mx-8" *ngIf="isFilterModified">
+      <div class="mt-auto mb-8 mx-8" *ngIf="isFilterModified$ | async">
         <gn-ui-button
           id="reset-filters-button"
           type="light"
@@ -20,8 +22,25 @@
       </div>
     </div>
 
-    <div class="md:w-1/2 w-full min-h-[280px] flex items-center justify-center">
-      <span>Map...</span>
+    <div class="w-full md:w-7/12 h-[334px] md:h-[366px] flex flex-col">
+      <gn-ui-map-container
+        #mapContainer
+        [context]="mapContext$ | async"
+        (extentChange)="onSpatialExtentChange($event)"
+        (resolvedExtentChange)="onResolvedMapExtentChange($event)"
+        class="w-full h-full"
+      >
+        <div
+          class="bg-white rounded-xl shadow-xl absolute left-1/2 transform -translate-x-1/2 bottom-0 mb-2.5 px-4 py-2 z-10 max-w-[90%] w-max"
+        >
+          <gn-ui-check-toggle
+            [value]="filterState.isSpatialExtentFilterEnabled"
+            (toggled)="onSpatialFilterToggle($event)"
+            [label]="'stac.filter.enable' | translate"
+            [color]="'primary'"
+          ></gn-ui-check-toggle>
+        </div>
+      </gn-ui-map-container>
     </div>
   </div>
   <div
@@ -42,15 +61,15 @@
     </div>
     <ng-template #noResultsOrError>
       <gn-ui-popup-alert
-        *ngIf="error"
+        *ngIf="error$ | async as error"
         type="warning"
         icon="matErrorOutlineOutline"
         class="absolute left-0 top-0 w-full block"
       >
         <span translate>{{ error }}</span>
       </gn-ui-popup-alert>
       <div
-        *ngIf="!error"
+        *ngIf="(error$ | async) === null"
         class="flex items-center justify-center flex-col h-full gap-[10px]"
       >
         <h2 class="text-center text-xl" translate>stac.results.noResults</h2>