@geogirafe/lib-geoportal 1.2.0-dev.2657999728 → 1.2.0-dev.2666667702

package/components/advancedfilter/component.d.ts

@@ -12,6 +12,7 @@ declare class AdvancedFilterComponent extends GirafeHTMLElement implements IGira
     panelTitle: string;
     panelTogglePath: string;
     loading: boolean;
+    private readonly debouncedUpdateFilterItems;
     layers: LayerWms[];
     layerFilterElements: LayerFilterElement[];
     columnAliasHelper: ColumnAliasHelper;
@@ -40,7 +41,12 @@ declare class AdvancedFilterComponent extends GirafeHTMLElement implements IGira
      */
     private addFilterElementFromLayer;
     onFilterRemoved(filterElement: LayerFilterElement): void;
+    /**
+     * Removes a filter element from the UI and optionally from the layer.
+     * Note that the filter should only be removed from the layer if this was triggered by a user action in this component.
+     */
     private removeFilterElement;
+    private onFilterChangedInLayerTree;
     onLayerChanged(filterElement: LayerFilterElement, e: Event): Promise<void>;
     onConditionRemoved(filterElement: LayerFilterElement, condition: FilterConditionElement): void;
     onConditionAdded(filterElement: LayerFilterElement): void;

package/components/advancedfilter/component.js

@@ -11,6 +11,7 @@ import LayerWms from '../../models/layers/layerwms.js';
 import ColumnAliasHelper from '../../tools/utils/aliases.js';
 import LayerFilterElement from './layerfilterelement.js';
 import GroupLayer from '../../models/layers/grouplayer.js';
+import { debounce } from '../../tools/utils/debounce.js';
 import { UsedInTemplateOnly } from '../../decorators.js';
 import FilterConditionElement from './filterconditionelement.js';
 import LayerCsvExporter from './layercsvexporter.js';
@@ -31,6 +32,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     panelTitle = 'advanced-filter-panel';
     panelTogglePath = 'interface.advancedFilterPanelVisible';
     loading = false;
+    debouncedUpdateFilterItems = debounce(this.updateFilterItemsByLayerState.bind(this), 200);
     layers = [];
     layerFilterElements = [];
     columnAliasHelper;
@@ -48,15 +50,13 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         super.girafeTranslate();
     }
     registerEvents() {
-        this.subscribe(/layers\.layersList\..*/, () => {
-            if (this.isPanelVisible) {
-                void this.updateFilterItemsByLayerState();
-            }
-        });
+        // Listen for filter changes on the layer list, triggered by changes in the simple filter component
+        this.subscribe(/layers\.layersList\..*\.filter/, (oldFilter, newFilter, layer) => this.onFilterChangedInLayerTree(oldFilter, newFilter, layer));
+        // Listen for layer visibility changes
         this.subscribe(/layers\.layersList\..*\.activeState/, (_oldValue, _newValue, layer) => {
             if (layer instanceof LayerWms && this.isPanelVisible && !this.state.loading) {
-                this.updateFilterableLayerList();
-                this.render();
+                // Debounce the filter element updates to avoid premature action / rendering while the layer tree is still changing
+                void this.debouncedUpdateFilterItems();
             }
         });
         this.subscribe('loading', (_, loading) => {
@@ -88,18 +88,17 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         //  Update which layers are active and queryable
         this.updateFilterableLayerList();
         // Remove filter elements that are no longer needed
-        for (const filterElement of this.layerFilterElements) {
+        const filtersToBeRemoved = this.layerFilterElements.filter((filterElement) => {
             const layerInTree = this.layers.find((l) => l.id === filterElement.layer?.id);
-            if (
+            return (
             // Filter element does not have a layer yet
             filterElement.layer === undefined ||
                 // Layer isn't in layer tree anymore
                 (filterElement.layer && !layerInTree) ||
                 // Filter in layer was removed by simple filter component
-                (filterElement.layer && layerInTree.filter === undefined && filterElement.hasAppliedConditions())) {
-                this.removeFilterElement(filterElement);
-            }
-        }
+                (filterElement.layer && layerInTree.filter === undefined && filterElement.hasAppliedConditions()));
+        });
+        filtersToBeRemoved.forEach((filterElement) => this.removeFilterElement(filterElement, false));
         // Add filter elements for layers that are new in the layer tree and do not have a filter element yet
         for (const layer of this.layers) {
             if (layer.hasFilter && !this.layerFilterElements.some((f) => f.layer?.id === layer.id)) {
@@ -148,20 +147,38 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.layerFilterElements.push(filterElement);
     }
     onFilterRemoved(filterElement) {
-        this.removeFilterElement(filterElement);
+        this.removeFilterElement(filterElement, true);
         this.render();
     }
-    removeFilterElement(filterElement) {
+    /**
+     * Removes a filter element from the UI and optionally from the layer.
+     * Note that the filter should only be removed from the layer if this was triggered by a user action in this component.
+     */
+    removeFilterElement(filterElement, removeFilterFromLayer = true) {
         const idx = this.layerFilterElements.indexOf(filterElement);
         if (idx !== -1) {
             filterElement.removeConditions();
             this.layerFilterElements.splice(idx, 1);
-            if (filterElement.layer?.filter) {
+            if (removeFilterFromLayer && filterElement.layer?.filter) {
                 // Note: Changing layer.filter will trigger the subscription that re-renders the component
                 filterElement.layer.filter = undefined;
             }
         }
     }
+    onFilterChangedInLayerTree(oldFilter, newFilter, layer) {
+        if (oldFilter === undefined || newFilter === undefined) {
+            // Cleanly add or remove filter elements in the UI
+            void this.updateFilterItemsByLayerState();
+            return;
+        }
+        // Refresh the displayed filter element with the new filter
+        for (const filterElement of this.layerFilterElements) {
+            if (filterElement.layer?.id === layer.id) {
+                filterElement.setFromLayer(layer).then(() => this.render());
+                break;
+            }
+        }
+    }
     async onLayerChanged(filterElement, e) {
         if (!filterElement.conditions.length) {
             // Display an empty condition while layer metadata is being loaded
@@ -176,7 +193,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
             this.layerFilterElements.push(newFilter);
             newFilter?.setLayer(layer).then((_) => this.render());
             // Remove filter from previous layer and from UI
-            this.removeFilterElement(filterElement);
+            this.removeFilterElement(filterElement, true);
         }
         else {
             // Simply switch out layers

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2657999728",
+  "version": "1.2.0-dev.2666667702",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2657999728", "build":"2657999728", "date":"07/07/2026"}
+{"version":"1.2.0-dev.2666667702", "build":"2666667702", "date":"10/07/2026"}