feat(filter): migrate plugin by oeninghe-dataport · Pull Request #436 · Dataport/polar

oeninghe-dataport · 2026-01-02T12:20:20Z

Summary

The filter plugin is migrated to POLAR@3.

Instructions for local reproduction and review

Open snowbox.
Enable the layer "Anliegen (MML)" and move the map to Hamburg, Germany.
Use the filters and test them.

Additional hints

Layout flaws

The layout of the filter dialog is somehow broken.
It is larger than the map's height (in the snowbox).
You may scroll it, but you cannot see the bottom of the scrollbar, as it overflows.

This, however, is, as far as I can tell, not a filter-specific problem but located probably in iconMenu.
Therefore, it is not considered here.

Fixed with #493

Styling

The general styling for this component is inspired by some (deprecated) UI/UX drafts.

Date range picker

The date range picker consists of two browser-native date pickers.
This control is supported by all major browsers (https://caniuse.com/input-datetime).

This improvised date range picker already supports limiting the dates (up to or starting with today's date).
An advanced implementation (as before with Vuetify) is left open to another PR.

Relevant tickets, issues, et cetera

Closes #370

Bumps [@commitlint/cli](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/cli) from 20.2.0 to 20.3.0. - [Release notes](https://github.com/conventional-changelog/commitlint/releases) - [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md) - [Commits](https://github.com/conventional-changelog/commitlint/commits/v20.3.0/@commitlint/cli) --- updated-dependencies: - dependency-name: "@commitlint/cli" dependency-version: 20.3.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>

src/plugins/filter/store.ts

# Conflicts: # package-lock.json # src/core/types/plugin.ts

github-actions · 2026-01-19T15:47:26Z

PR Preview Action v1.8.0
🚀 View preview at https://Dataport.github.io/polar/pr-preview/pr-436/
Built to branch `gh-pages` at 2026-02-16 17:35 UTC. Preview will be ready when the GitHub Pages deployment is complete.

dopenguin

I can't seem to be able to tab through the selection of the buttons. Please take a look at this. This probably results from the <input>s being hidden and only the labels being displayed. Not sure how a ScreenReader would interpret them as well. Maybe using an actual button here seems reasonable?
Selecting a BlockButton makes it jiggle a bit, which is annoying. This should be fixable by reserving some space for the border.
Implement the old UI for layout: 'nineRegions'. As we didn't have a final draft yet, the previous layout should be available.

I've also attached a patch which adds the pointer-events to the correct elements.

🏓 @oeninghe-dataport

examples/iceberg/tsconfig.json

src/plugins/filter/types.ts

dopenguin · 2026-01-20T18:10:16Z

src/plugins/filter/types.ts

+	/**
+	 * Technical value of a feature property.
+	 */
+	value: string


It seems fitting to also allow multiple values here.

This type describes a single entry (checkbox) for a category. As far as I understand the POLAR@2 documentation on this (and the requirements spec), this should be a single value.

Why would you allow multiple values here? Is the intention to group multiple values to a single option?

knownValues previously was of type string[], so we didn't have this situation yet.

It seemed fitting to be able to group multiple known values as a single option to reduce e.g. an almost endless list. This is not essential though 🎩

src/plugins/filter/components/FilterUI.ce.vue

src/plugins/filter/components/FilterLayerChooser.ce.vue

src/plugins/filter/components/FilterTime.ce.vue

src/plugins/filter/components/FilterUI.spec.ts

src/plugins/filter/components/FilterTime.ce.vue

src/lib/getVectorSource.ts

src/plugins/filter/store.ts

oeninghe-dataport · 2026-02-03T19:19:20Z

I've also attached a patch which adds the pointer-events to the correct elements.

I cannot access that file...feel free to commit it directly on the branch.
@dopenguin

oeninghe-dataport · 2026-02-03T19:43:28Z

Selecting a BlockButton makes it jiggle a bit, which is annoying. This should be fixable by reserving some space for the border.

20d3c31

oeninghe-dataport · 2026-02-03T20:44:08Z

I can't seem to be able to tab through the selection of the buttons. Please take a look at this. This probably results from the <input>s being hidden and only the labels being displayed. Not sure how a ScreenReader would interpret them as well. Maybe using an actual button here seems reasonable?

ac723a0

oeninghe-dataport · 2026-02-03T20:47:22Z

Implement the old UI for layout: 'nineRegions'. As we didn't have a final draft yet, the previous layout should be available.

Old UI = visible checkboxes and radio buttons?
Or is there anything else that should differ to the current layout?

oeninghe-dataport · 2026-02-03T20:51:55Z

🏓 @dopenguin

dopenguin

🏓 @oeninghe-dataport

dopenguin · 2026-02-04T16:49:01Z

src/core/stores/main.ts

 	}

+	function getLayerConfiguration(layerId: string) {
+		const polar = configuration.value.layers.find(


Wouldn't mapConfiguration be more precise?

dopenguin · 2026-02-04T16:49:57Z

src/core/stores/index.ts


+		/**
+		 * Returns the layer configuration or `null` if the layer was not found.
+		 * The configuration is merged from the service register and the POLAR `layers` configuration.


Linking {@link createMap | serviceRegister parameter of createMap} and MapConfiguration.layers seems reasonable

src/plugins/filter/components/FilterUI.ce.vue

dopenguin · 2026-02-04T16:54:55Z

src/plugins/filter/components/FilterUI.ce.vue

 .polar-filter-card {
 	pointer-events: all;
-	padding-bottom: 3em;
 }


Not needed. Just makes the whole card focusable as well.
Don't forget to remove the class on the card as well.

dopenguin · 2026-02-04T16:58:44Z

src/core/stores/main.ts

+		if (!polar || !register) {
+			return null
+		}
+		return { ...register, ...polar }


The return should have some other type than any

src/plugins/filter/components/FilterTime.ce.vue

src/plugins/filter/components/FilterLayerChooser.ce.vue

src/plugins/filter/components/FilterCategory.ce.vue

dopenguin · 2026-02-05T12:51:26Z

src/plugins/filter/stores/main.ts

+	watch(selectedLayerId, (newLayerId) => {
+		if (newLayerId === null || state.value[newLayerId]) {
+			return
+		}
+		state.value[newLayerId] = {}
+	})


Could this be done on setup instead? Or is there a reason behind doing this "lazily"? It would also ease the type for selectedLayerState

src/plugins/filter/stores/main.ts

For some reasons not further researched Gecko sometimes allows focusing a PolarCard. This occured before this commit in the filter plugin. To fix this, the element is explicitly removed from regular tab order.

oeninghe-dataport · 2026-02-16T12:15:15Z

🏓 @dopenguin

oeninghe-dataport added this to the POLAR@3 milestone Jan 2, 2026

oeninghe-dataport self-assigned this Jan 2, 2026

oeninghe-dataport added the refactor Refactoring of previous code label Jan 2, 2026

oeninghe-dataport linked an issue Jan 2, 2026 that may be closed by this pull request

Migration of Filter plugin to POLAR@3 #370

Open

oeninghe-dataport force-pushed the vue3/migrate-plugin-filter branch from bd44e84 to 4640a4e Compare January 2, 2026 13:02

dependabot bot and others added 2 commits January 5, 2026 17:07

ci(iceberg): make tsc acknowledge vitest-caused node types

0328f14

oeninghe-dataport force-pushed the vue3/migrate-plugin-filter branch from 4640a4e to 22cd58a Compare January 5, 2026 16:09

fix(core): enforce usage of Icon type

07048a5

oeninghe-dataport force-pushed the vue3/migrate-plugin-filter branch 2 times, most recently from a9658ca to 9a5d3cf Compare January 7, 2026 15:33

feat(filter): migrate plugin

2fa72f1

oeninghe-dataport force-pushed the vue3/migrate-plugin-filter branch from 9a5d3cf to 2fa72f1 Compare January 7, 2026 15:38

oeninghe-dataport marked this pull request as ready for review January 7, 2026 15:45

oeninghe-dataport requested review from dopenguin and warm-coolguy as code owners January 7, 2026 15:45

oeninghe-dataport commented Jan 12, 2026

View reviewed changes

src/plugins/filter/store.ts Outdated Show resolved Hide resolved

dopenguin added 2 commits January 16, 2026 16:46

Merge branch 'next' into vue3/migrate-plugin-filter

6aabb56

# Conflicts: # package-lock.json # src/core/types/plugin.ts

fix(filter): use correct import for export store

cd23d05

dopenguin removed the request for review from warm-coolguy January 19, 2026 10:33

Merge branch 'next' into vue3/migrate-plugin-filter

56ea116

dopenguin added 2 commits January 20, 2026 11:27

Merge branch 'next' into vue3/migrate-plugin-filter

9c92633

Merge branch 'next' into vue3/migrate-plugin-filter

e6916db

dopenguin mentioned this pull request Jan 22, 2026

fix(iconMenu): adjust size of the StandardMenuList #493

Merged

oeninghe-dataport and others added 2 commits January 23, 2026 10:42

style: apply new linting rule for self-closing

25d11ec

Merge branch 'next' into vue3/migrate-plugin-filter

b7b6c3b

dopenguin requested changes Jan 23, 2026

View reviewed changes

dopenguin added 2 commits January 23, 2026 13:50

Merge branch 'next' into vue3/migrate-plugin-filter

0d1200c

Merge branch 'next' into vue3/migrate-plugin-filter

52c14f3

oeninghe-dataport added 4 commits February 2, 2026 11:18

refactor(filter): use PluginId as namespace for i18n

bdb3cd6

refactor: move getVectorSource to global lib functions

952f425

refactor(filter): move common getters to store

e573790

refactor(filter): introduce store logic for time-related filters

49d36bb

oeninghe-dataport added 2 commits February 3, 2026 20:41

fix: reserve space for border in KernBlockButtonX

20d3c31

chore(filter): add missing store files

36777db

refactor: show focus for KernBlockButtonX

ac723a0

chore: remove now unused @ts-expect-error directives

715c37b

Merge branch 'next' into vue3/migrate-plugin-filter

01f8943

dopenguin requested changes Feb 5, 2026

View reviewed changes

oeninghe-dataport added 13 commits February 6, 2026 10:41

feat(filter): allow multiple filter categories for a targetProperty

3288804

refactor(filter): replace non-null-assertion w/ explicit type assertion

2f0ef30

feat(filter): allow grouping multiple values to a single category entry

873e53f

refactor(filter): remove card CSS that is no longer needed

4e97981

fix: prohibit that PolarCard is sometimes focusable in Gecko

1a9f2a7

For some reasons not further researched Gecko sometimes allows focusing a PolarCard. This occured before this commit in the filter plugin. To fix this, the element is explicitly removed from regular tab order.

fix: hide block button input elements w/ Gecko

413aece

feat: radio groups behave more like buttons

c879fbf

feat: show focus for block buttons only if keyboard-focused

cd44fbc

feat: allow enabling/toggling w/ enter for block buttons

afb71b1

feat(filter): improved scrolling behavior for tab navigation

c7942f3

refactor(core): rename getLayerConfiguration and improve types

04d38ef

feat(filter): add nine-regions-style layout

537f5d2

refactor(filter): initialize state non-lazily

740e0a8

Merge branch 'next' into vue3/migrate-plugin-filter

b19e761

Conversation

oeninghe-dataport commented Jan 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Instructions for local reproduction and review

Additional hints

Layout flaws

Styling

Date range picker

Relevant tickets, issues, et cetera

Uh oh!

Uh oh!

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

Uh oh!

Built to branch gh-pages at 2026-02-16 17:35 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

dopenguin 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!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oeninghe-dataport commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oeninghe-dataport commented Feb 3, 2026

Uh oh!

oeninghe-dataport commented Feb 3, 2026

Uh oh!

oeninghe-dataport commented Feb 3, 2026

Uh oh!

oeninghe-dataport commented Feb 3, 2026

Uh oh!

dopenguin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

oeninghe-dataport commented Feb 16, 2026

Uh oh!

Reviewers

Assignees

oeninghe-dataport commented Jan 2, 2026 •

edited

Loading

github-actions bot commented Jan 19, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-02-16 17:35 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

dopenguin left a comment •

edited

Loading

oeninghe-dataport commented Feb 3, 2026 •

edited

Loading