Merge pull request #137 from Dataport/fix/plugin-filter-inconsistencies

fix filter plugin inconsistencies

Author: warm-coolguy

packages/plugins/Filter/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## unpublished
 
+- Fix: Features with categories that are not listed in `knownValues` are never displayed now. Previously, they were initially visible, but disappeared once any filter was touched.
+- Fix: It was possible to have features visible that were loaded after the filter was applied and that would have been filtered out. This has been resolved.
 - Fix: Adjust documentation to properly describe optionality of configuration parameters.
 - Fix: Correctly log an error if required parameter `layers` is not provided.
 

packages/plugins/Filter/README.md

@@ -27,7 +27,7 @@ The following chapters contain drafts in this format. Please mind that they neit
 
 | fieldName | type | description |
 | - | - | - |
-| knownValues | (string \| number \| boolean \| null)[] | Array of known values for the feature properties. Each entry will result in a checkbox that allows filtering the appropriate features. Properties not listed will not be filterable. The technical name will result in a localization key that can be configured on a per-client basis. |
+| knownValues | (string \| number \| boolean \| null)[] | Array of known values for the feature properties. Each entry will result in a checkbox that allows filtering the appropriate features. Properties not listed will not be filterable and never be visible. The technical name will result in a localization key that can be configured on a per-client basis. |
 | targetProperty | string | Target property to filter by. This is the name (that is, key) of a feature property. |
 | selectAll | boolean? | If true, a checkbox is added to de/select all `knownValues` (above) at once. Defaults to `false`. |
 

packages/plugins/Filter/src/store/index.ts

@@ -3,6 +3,7 @@ import {
   generateSimpleMutations,
 } from '@repositoryname/vuex-generators'
 import { FilterConfiguration, PolarModule } from '@polar/lib-custom-types'
+import ClusterSource from 'ol/source/Cluster'
 import ChooseTimeFrame from '../components/ChooseTimeFrame.vue'
 import {
   FilterGetters,
@@ -11,7 +12,10 @@ import {
   LayerId,
   TargetProperty,
 } from '../types'
-import { updateFeatureVisibility } from '../utils/updateFeatureVisibility'
+import {
+  getLayer,
+  updateFeatureVisibility,
+} from '../utils/updateFeatureVisibility'
 import { setState } from '../utils/setState'
 import { arrayOnlyContains } from '../utils/arrayOnlyContains'
 import { parseTimeOption } from '../utils/parseTimeOption'
@@ -28,7 +32,12 @@ export const makeStoreModule = () => {
     namespaced: true,
     state: getInitialState(),
     actions: {
-      setupModule({ getters: { filterConfiguration }, commit }): void {
+      setupModule({
+        getters: { filterConfiguration },
+        rootGetters: { map },
+        commit,
+        dispatch,
+      }): void {
         if (Object.entries(filterConfiguration.layers).length === 0) {
           console.error(
             '@polar/plugin-filter: No configuration for parameter "layers" was found. Plugin will not be usable.'
@@ -59,6 +68,17 @@ export const makeStoreModule = () => {
                 },
               })
             }
+            // apply filter effects on layer loads
+            // @ts-expect-error | only layers with getSource allowed
+            let source = getLayer(map, layerId).getSource()
+            while (source instanceof ClusterSource) {
+              source = source.getSource()
+            }
+            source.on('featuresloadend', () =>
+              dispatch('updateFeatureVisibility', layerId)
+            )
+            // initially update visibility in case loading already took place
+            dispatch('updateFeatureVisibility', layerId)
           }
         )
       },

packages/plugins/Filter/src/utils/updateFeatureVisibility.ts

@@ -111,7 +111,7 @@ const doesFeaturePassFilter = (
   )
 }
 
-const getLayer = (map: Map, layerId: LayerId): BaseLayer => {
+export const getLayer = (map: Map, layerId: LayerId): BaseLayer => {
   const layer = map
     .getLayers()
     .getArray()