[Datahub]: Add interactive map filter to STAC viewer by AlexianMasson · Pull Request #1403 · geonetwork/geonetwork-ui

AlexianMasson · 2025-11-03T13:14:44Z

Description

This PR enhances the STAC (SpatioTemporal Asset Catalog) viewer with an interactive map and spatial filtering capabilities. Users can now filter STAC items by both temporal extent (via date pickers) and spatial extent (via map interaction).

Architectural Changes

Dependencies Updated:

Upgraded @geospatial-sdk/* packages from 0.0.5-dev.37 to 0.0.5-dev.40 in both root and package directories

Component Modifications:

StacViewComponent - Added spatial filtering logic
MapContainerComponent - Template refactor to have the map div as root and overlay component as ng-content + added resolvedExtentChange and extentChange events
CheckToggleComponent - Minor template improvements for better styling
RecordDataPreview.component - Fix STAC tab content with lazy loading.

Screenshots

Desktop :

Mobile :

Quality Assurance Checklist

Commit history is devoid of any merge commits and readable to facilitate reviews
If new logic ⚙️ is introduced: unit tests were added
If new user stories 🤏 are introduced: E2E tests were added
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 📚 has received the love it deserves

How to Test

Navigate to a dataset with STAC links: http://localhost:4200/dataset/sentinel2-l2a-sen2cor
Test the spatial filter toggle
Test the combined temporal + spatial filtering
Set extreme value and test empty results state
Test the responsive behavior of the STAC component

Notes

This work is sponsored by INRAE.

github-actions · 2025-11-03T13:15:46Z

Affected libs:
api-metadata-converter,api-repository,feature-catalog,feature-record,feature-router,feature-search,feature-map,ui-search,feature-editor,ui-inputs,feature-dataviz,ui-elements,feature-notifications,ui-catalog,ui-layout,ui-map,database-dump,util-data-fetcher,ui-dataviz,common-fixtures,util-shared,ui-widgets,data-access-gn4,util-app-config,common-domain,util-i18n

Affected apps:
datahub,metadata-converter,metadata-editor,webcomponents,search,demo,map-viewer,data-platform

🚀 Build and deploy storybook and demo on GitHub Pages
📦 Build and push affected docker images

github-actions · 2025-11-03T14:15:22Z

📷 Screenshots are here!

…rts)

…ents

…lterCompoenent template

…played correctly

…ckitems search

See the mat-tab doc: https://material.angular.dev/components/tabs/overview#lazy-loading Eagerly loading the content of the tab meant the OL map was created while detached from the page, which in turn meant no valid size for the map

… map state tracking

…c-view

…value when resetFilters called

… one BehaviourSubject + fixes + update tests

…c-view

github-actions · 2025-11-19T16:03:16Z

📷 Screenshots for webcomponents are here!

tkohr

Thanks for huge work and the continued refactoring on this @AlexianMasson ! I really like your solution for the stac-view.component and it works very smoothly. The tests for it should still be cleaned from timeouts and comments I think.

Also just noticed that we don't have any e2e tests on the spatial filters, not sure if we have time to add one or two.

In the future it would make sense to have the _resolvedExtentChange in the geospatial-sdk I guess, but the implementation in the map-conatiner.component seems acceptable for now.

tkohr · 2025-11-21T14:41:03Z

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

-                (displayStac$ | async) && (selectedView$ | async) === 'stac'
-              "
-            >
+            <ng-template matTabContent>


Looking at the doc @jahow pointed to, it would make sense to put the contents of all four tabs in ng-templates (the other tabs only do so for the tab titles), I guess, but we can have a look at this in a separate PR.

We can do an atomic PR to handle only those changes :)

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

libs/feature/record/src/lib/stac-view/stac-view.component.spec.ts

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

…alExtentsEqual inside utils

…tTimeout (WIP)

…tTimeout (finalize)

tkohr

Thanks for the adaptions @AlexianMasson !

AlexianMasson · 2025-11-26T08:30:11Z

Thanks for the adaptions @AlexianMasson !

Thanks for the (looooong) review 😄

AlexianMasson changed the title ~~DH: add map inside stac view~~ DH: add map filter inside stac view Nov 3, 2025

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from d6050de to ee305e4 Compare November 3, 2025 14:01

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch 4 times, most recently from bdb8b96 to 225c90c Compare November 4, 2025 10:42

AlexianMasson added 2 commits November 4, 2025 11:57

feat(libs/ui/map): add MapFilterComponent

733719a

feat: use gn-ui-filter-map inside StacViewComponent

3eb3421

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from 225c90c to 07824e4 Compare November 4, 2025 14:54

AlexianMasson added 4 commits November 4, 2025 15:57

refactor(MapContainerComponent): minor changes (mostly moving code pa…

d4c55d9

…rts)

refactor(MapContainerComponent): add destroy$ + minor cleaning + comm…

218f352

…ents

refactor(MapContainerComponent): add setupEventListener(..)

b9b2917

feat(MapContainerComponent): add extentChange

0e973d2

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from 653e8ea to adbab71 Compare November 4, 2025 15:33

AlexianMasson added 2 commits November 5, 2025 12:42

refactor: allow content projection inside MapContainer + update MapFi…

f871678

…lterCompoenent template

fix(MapContainerComponent): mobile map navigation message was not dis…

d20bbec

…played correctly

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch 4 times, most recently from 9c6a712 to f51c9fb Compare November 5, 2025 13:18

feat+refactor: remove MapFilterComponent + plug spatial extent to sta…

d8ddf02

…ckitems search

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from f51c9fb to d8ddf02 Compare November 5, 2025 13:35

jahow and others added 2 commits November 12, 2025 22:21

fix(dh): lazy-load the content of the Stac preview tab

42e40d3

See the mat-tab doc: https://material.angular.dev/components/tabs/overview#lazy-loading Eagerly loading the content of the tab meant the OL map was created while detached from the page, which in turn meant no valid size for the map

feat(stac-view): synchronize map extent with STAC filters and improve…

e5c7458

… map state tracking

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from 07fbc38 to e5c7458 Compare November 13, 2025 16:13

AlexianMasson changed the title ~~DH: add map filter inside stac view~~ [Datahub]: Add interactive map filter to STAC viewer Nov 13, 2025

Merge remote-tracking branch 'origin/main' into dh-add-map-inside-sta…

3e9eaed

…c-view

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from 3dceacd to 65df609 Compare November 14, 2025 11:08

AlexianMasson added 2 commits November 19, 2025 11:10

fix&test(StacViewComponent): reset currentPageUrl$ to initialPageUrl …

eab72ae

…value when resetFilters called

refactor(StacViewComponent): group filter and pagination state inside…

984b5f8

… one BehaviourSubject + fixes + update tests

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from c3f85f9 to 984b5f8 Compare November 19, 2025 15:48

AlexianMasson added 2 commits November 19, 2025 16:55

Merge remote-tracking branch 'origin/main' into dh-add-map-inside-sta…

c6e56d8

…c-view

chore: update package-lock.json after merge with main

7b7f9c8

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch 2 times, most recently from 87f229c to ccc9ac7 Compare November 20, 2025 08:32

AlexianMasson added 3 commits November 20, 2025 09:49

fix: lint error and warnings

bc4153d

fix(MdViewEffectsTests): remove warnings

b33893c

fixStacViewComponent): minor change

fae58db

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from ccc9ac7 to fae58db Compare November 20, 2025 08:50

fix(DatasetPreview): e2e tests

e0ae4b1

tkohr approved these changes Nov 21, 2025

View reviewed changes

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch 4 times, most recently from fd33723 to 73ba74a Compare November 24, 2025 17:14

AlexianMasson added 2 commits November 24, 2025 18:17

clean : move areFilterStatesEqual, areSpatialExtentsEqual & areTempor…

914fd62

…alExtentsEqual inside utils

clean: use @let filterState instead of custom derived observables

2344fac

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from 73ba74a to 2344fac Compare November 24, 2025 17:17

AlexianMasson added 3 commits November 25, 2025 14:26

clean(StacViewComponent): remove useless filterState$.pageUrl value set

5e6e531

refactor(StacViewComponent Tests): use fakeAsync + tick instead of se…

417e60b

…tTimeout (WIP)

chore: rename mockSpatialExtent to mockInitialSpatialExtent

6d0412d

AlexianMasson force-pushed the dh-add-map-inside-stac-view branch from d0a1a74 to 6d0412d Compare November 25, 2025 13:56

refactor(StacViewComponent Tests): use fakeAsync + tick instead of se…

f99a4d8

…tTimeout (finalize)

tkohr approved these changes Nov 26, 2025

View reviewed changes

AlexianMasson merged commit 27e1de8 into main Nov 26, 2025
20 checks passed

AlexianMasson deleted the dh-add-map-inside-stac-view branch November 26, 2025 08:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Datahub]: Add interactive map filter to STAC viewer#1403

[Datahub]: Add interactive map filter to STAC viewer#1403
AlexianMasson merged 55 commits intomainfrom
dh-add-map-inside-stac-view

AlexianMasson commented Nov 3, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 3, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 3, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 19, 2025 •

edited

Loading

Uh oh!

tkohr left a comment •

edited

Loading

Uh oh!

tkohr Nov 21, 2025

Uh oh!

AlexianMasson Nov 24, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tkohr left a comment

Uh oh!

AlexianMasson commented Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

AlexianMasson commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Architectural Changes

Dependencies Updated:

Component Modifications:

Screenshots

Quality Assurance Checklist

How to Test

Notes

Uh oh!

github-actions bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tkohr left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tkohr Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

AlexianMasson Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tkohr left a comment

Choose a reason for hiding this comment

Uh oh!

AlexianMasson commented Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

AlexianMasson commented Nov 3, 2025 •

edited

Loading

github-actions bot commented Nov 3, 2025 •

edited

Loading

github-actions bot commented Nov 3, 2025 •

edited

Loading

github-actions bot commented Nov 19, 2025 •

edited

Loading

tkohr left a comment •

edited

Loading