@jupytergis/base 0.14.1 → 0.15.0

package/lib/mainview/mainView.js

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { JupyterGISModel, } from '@jupytergis/schema';
+import { JupyterGISModel, DEFAULT_PROJECTION, } from '@jupytergis/schema';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
-import { ContextMenu } from '@lumino/widgets';
+import { ContextMenu, Menu } from '@lumino/widgets';
 import { Collection, Map as OlMap, View, getUid, } from 'ol';
 import Feature from 'ol/Feature';
 import { FullScreen, ScaleLine, Zoom } from 'ol/control';
@@ -27,7 +27,7 @@ import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, get as getProjection, toLonLat, transformExtent, } from 'ol/proj';
 import { register } from 'ol/proj/proj4.js';
 import RenderFeature, { toGeometry } from 'ol/render/Feature';
-import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
+import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, TileWMS as TileWMSSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
 import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
 //@ts-expect-error no types for ol-pmtiles
@@ -161,11 +161,54 @@ export class MainView extends React.Component {
                     });
                 },
             });
+            this._commands.addCommand('Copy-Coordinates-Map-CRS', {
+                label: () => {
+                    if (!this._Map || !this._clickCoords) {
+                        return 'Map CRS';
+                    }
+                    const proj = this._Map.getView().getProjection().getCode();
+                    const coord = this._clickCoords;
+                    return `Map CRS — ${proj} (${coord[0].toFixed(0)}E, ${coord[1].toFixed(0)}N)`;
+                },
+                execute: async () => {
+                    const coord = this._clickCoords;
+                    const text = `${coord[0].toFixed(0)}, ${coord[1].toFixed(0)}`;
+                    await navigator.clipboard.writeText(text);
+                },
+            });
+            this._commands.addCommand('Copy-Coordinates-LonLat', {
+                label: () => {
+                    if (!this._Map || !this._clickCoords) {
+                        return 'Latitude/Longitude';
+                    }
+                    const lonLat = toLonLat(this._clickCoords, this._Map.getView().getProjection());
+                    return `Latitude/Longitude: (${lonLat[1].toFixed(6)}N, ${lonLat[0].toFixed(6)}E)`;
+                },
+                execute: async () => {
+                    const lonLat = toLonLat(this._clickCoords, this._Map.getView().getProjection());
+                    const text = `${lonLat[1].toFixed(6)}, ${lonLat[0].toFixed(6)}`;
+                    await navigator.clipboard.writeText(text);
+                },
+            });
             this._contextMenu.addItem({
                 command: CommandIDs.addAnnotation,
                 selector: '.ol-viewport',
                 rank: 1,
             });
+            const copyCoordinatesMenu = new Menu({ commands: this._commands });
+            copyCoordinatesMenu.title.label = 'Copy Coordinates';
+            copyCoordinatesMenu.addItem({
+                command: 'Copy-Coordinates-Map-CRS',
+            });
+            copyCoordinatesMenu.addItem({
+                command: 'Copy-Coordinates-LonLat',
+            });
+            this._contextMenu.addItem({
+                type: 'submenu',
+                submenu: copyCoordinatesMenu,
+                selector: '.ol-viewport',
+                rank: 2,
+            });
         };
         this.vectorLayerStyleRuleBuilder = (layer) => {
             var _a, _b;
@@ -213,6 +256,70 @@ export class MainView extends React.Component {
             }
             const newStyle = Object.assign(Object.assign({}, defaultStyle), layerParams.color);
             layerStyle.style = newStyle;
+            // When fallbackColor[3] === 0, add an OL filter so features that would be
+            // drawn with a transparent color are excluded from rendering entirely.
+            // alpha === 0 is the contract: the default TRANSPARENT [0,0,0,0] triggers
+            // this automatically, and a future dedicated picker option can set it.
+            const symbologyState = layerParams.symbologyState;
+            if (Array.isArray(symbologyState === null || symbologyState === void 0 ? void 0 : symbologyState.fallbackColor) &&
+                symbologyState.fallbackColor[3] === 0) {
+                let matchFilter;
+                if (symbologyState.renderType === 'Categorized') {
+                    const fillExpr = layerParams.color['fill-color'];
+                    if (Array.isArray(fillExpr) &&
+                        fillExpr[0] === 'case' &&
+                        fillExpr.length >= 4) {
+                        // Extract conditions from ['case', cond, val, cond, val, ..., fallback],
+                        // skipping any whose matched output color is also fully transparent.
+                        const conditions = [];
+                        for (let i = 1; i < fillExpr.length - 1; i += 2) {
+                            const output = fillExpr[i + 1];
+                            if (Array.isArray(output) && output[3] === 0) {
+                                continue;
+                            }
+                            conditions.push(fillExpr[i]);
+                        }
+                        // If every stop is transparent, use a never-true filter to hide all.
+                        matchFilter =
+                            conditions.length === 0
+                                ? ['==', 0, 1]
+                                : conditions.length === 1
+                                    ? conditions[0]
+                                    : ['any', ...conditions];
+                    }
+                }
+                else if (symbologyState.renderType === 'Graduated') {
+                    const fillExpr = layerParams.color['fill-color'];
+                    // Graduated fill is ['case', ['has', field], interpolateExpr, fallback].
+                    // Features missing the attribute fall through to the fallback, so filter
+                    // them out with the same ['has', field] condition.
+                    if (Array.isArray(fillExpr) &&
+                        fillExpr[0] === 'case' &&
+                        Array.isArray(fillExpr[1]) &&
+                        fillExpr[1][0] === 'has') {
+                        matchFilter = fillExpr[1];
+                    }
+                }
+                else if (symbologyState.renderType === 'Canonical') {
+                    const fillExpr = layerParams.color['fill-color'];
+                    // Canonical fill is ['coalesce', ['get', field], fallback].
+                    // Features missing the attribute fall through to the fallback, so filter
+                    // them out with ['has', field]. Note: features that have the field but
+                    // with a non-color value also get the fallback — that gap is accepted.
+                    if (Array.isArray(fillExpr) &&
+                        fillExpr[0] === 'coalesce' &&
+                        Array.isArray(fillExpr[1]) &&
+                        fillExpr[1][0] === 'get') {
+                        matchFilter = ['has', fillExpr[1][1]];
+                    }
+                }
+                if (matchFilter) {
+                    // Combine with any existing user-applied filter.
+                    layerStyle.filter = layerStyle.filter
+                        ? ['all', layerStyle.filter, matchFilter]
+                        : matchFilter;
+                }
+            }
             return [layerStyle];
         };
         /**
@@ -268,7 +375,7 @@ export class MainView extends React.Component {
          * to work with the temporal controller
          */
         this.handleTemporalController = (id, layer) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const selectedLayer = (_c = (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
             // Temporal Controller shouldn't be active if more than one layer is selected
             if (!selectedLayer || Object.keys(selectedLayer).length !== 1) {
@@ -286,13 +393,13 @@ export class MainView extends React.Component {
                 const activeFilter = layer.filters.appliedFilters[0];
                 // Save original features on first filter application
                 if (!Object.keys(this._originalFeatures).includes(id)) {
-                    this._originalFeatures[id] = source.getFeatures();
+                    this._originalFeatures[id] = (_e = source.getFeatures()) !== null && _e !== void 0 ? _e : [];
                 }
                 // clear current features
                 source.clear();
-                const startTime = (_e = activeFilter.betweenMin) !== null && _e !== void 0 ? _e : 0;
-                const endTime = (_f = activeFilter.betweenMax) !== null && _f !== void 0 ? _f : 1000;
-                const filteredFeatures = this._originalFeatures[id].filter(feature => {
+                const startTime = (_f = activeFilter.betweenMin) !== null && _f !== void 0 ? _f : 0;
+                const endTime = (_g = activeFilter.betweenMax) !== null && _g !== void 0 ? _g : 1000;
+                const filteredFeatures = ((_h = this._originalFeatures[id]) !== null && _h !== void 0 ? _h : []).filter(feature => {
                     const featureTime = feature.get(activeFilter.feature);
                     return featureTime >= startTime && featureTime <= endTime;
                 });
@@ -302,7 +409,7 @@ export class MainView extends React.Component {
             }
             else {
                 // Restore original features when no filters are applied
-                source.addFeatures(this._originalFeatures[id]);
+                source.addFeatures((_j = this._originalFeatures[id]) !== null && _j !== void 0 ? _j : []);
                 delete this._originalFeatures[id];
             }
         };
@@ -421,6 +528,11 @@ export class MainView extends React.Component {
         this._setupSpectaMode = () => {
             this._removeAllInteractions();
             this._setupStoryScrollListener();
+            // Ensure keybindings have a focused target in Specta mode.
+            window.requestAnimationFrame(() => {
+                var _a;
+                (_a = this.mainViewRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
         };
         this._removeAllInteractions = () => {
             // Remove all default interactions
@@ -555,6 +667,7 @@ export class MainView extends React.Component {
             });
             this.setState(old => (Object.assign(Object.assign({}, old), { annotations: newState })));
         };
+        this._lastPointerCoord = null;
         this._syncPointer = throttle((coordinates) => {
             const pointer = {
                 coordinates: { x: coordinates[0], y: coordinates[1] },
@@ -597,6 +710,7 @@ export class MainView extends React.Component {
         };
         this._isPositionInitialized = false;
         this.divRef = React.createRef(); // Reference of render div
+        this.mainViewRef = React.createRef();
         this.controlsToolbarRef = React.createRef();
         this.spectaContainerRef = React.createRef();
         this.storyViewerPanelRef = React.createRef();
@@ -683,13 +797,15 @@ export class MainView extends React.Component {
         this._updateCenter = debounce(this.updateCenter, 100);
     }
     async componentDidMount() {
+        var _a;
         window.addEventListener('resize', this._handleWindowResize);
         const options = this._model.getOptions();
+        const projection = (_a = options.projection) !== null && _a !== void 0 ? _a : DEFAULT_PROJECTION;
         const center = options.longitude !== undefined && options.latitude !== undefined
-            ? fromLonLat([options.longitude, options.latitude])
+            ? fromLonLat([options.longitude, options.latitude], projection)
             : [0, 0];
         const zoom = options.zoom !== undefined ? options.zoom : 1;
-        await this.generateMap(center, zoom);
+        await this.generateMap(center, zoom, projection);
         this._mainViewModel.initSignal();
         if (window.jupytergisMaps !== undefined && this._documentPath) {
             window.jupytergisMaps[this._documentPath] = this._Map;
@@ -717,7 +833,7 @@ export class MainView extends React.Component {
         this._cleanupStoryScrollListener();
         this._mainViewModel.dispose();
     }
-    async generateMap(center, zoom) {
+    async generateMap(center, zoom, projection = DEFAULT_PROJECTION) {
         const layers = this._model.getLayers();
         this._initialLayersCount = Object.values(layers).filter(layer => layer.type !== 'StorySegmentLayer').length;
         const scaleLine = new ScaleLine({
@@ -741,6 +857,7 @@ export class MainView extends React.Component {
                 view: new View({
                     center,
                     zoom,
+                    projection,
                 }),
                 controls,
             });
@@ -803,11 +920,12 @@ export class MainView extends React.Component {
                 }
             });
             this._Map.on('moveend', () => {
+                var _a;
                 const currentOptions = this._model.getOptions();
                 const view = this._Map.getView();
                 const center = view.getCenter() || [0, 0];
                 const zoom = view.getZoom() || 0;
-                const projection = view.getProjection();
+                const projection = (_a = getProjection(currentOptions.projection)) !== null && _a !== void 0 ? _a : view.getProjection();
                 const latLng = toLonLat(center, projection);
                 const bearing = view.getRotation();
                 const resolution = view.getResolution();
@@ -842,14 +960,18 @@ export class MainView extends React.Component {
             this._Map.getViewport().addEventListener('contextmenu', event => {
                 event.preventDefault();
                 event.stopPropagation();
-                const coordinate = this._Map.getEventCoordinate(event);
-                this._clickCoords = coordinate;
+                if (this._lastPointerCoord) {
+                    this._clickCoords = this._lastPointerCoord;
+                }
                 this._contextMenu.open(event);
             });
-            this.setState(old => (Object.assign(Object.assign({}, old), { loading: false, viewProjection: {
-                    code: view.getProjection().getCode(),
-                    units: view.getProjection().getUnits(),
-                } })));
+            this.setState(old => {
+                var _a;
+                return (Object.assign(Object.assign({}, old), { loading: false, viewProjection: {
+                        code: projection,
+                        units: ((_a = getProjection(projection)) !== null && _a !== void 0 ? _a : view.getProjection()).getUnits(),
+                    } }));
+            });
         }
     }
     /**
@@ -859,7 +981,7 @@ export class MainView extends React.Component {
      * @param source - the source object.
      */
     async addSource(id, source) {
-        var _a, _b;
+        var _a, _b, _c;
         let newSource;
         switch (source.type) {
             case 'RasterSource': {
@@ -1074,6 +1196,21 @@ export class MainView extends React.Component {
                 newSource = new VectorSource({
                     features: [marker],
                 });
+                break;
+            }
+            case 'WmsTileSource': {
+                const sourceParameters = source.parameters;
+                const url = sourceParameters.url;
+                const selectedLayer = (_c = sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.params) === null || _c === void 0 ? void 0 : _c.layers;
+                newSource = new TileWMSSource({
+                    attributions: sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.attribution,
+                    url,
+                    params: {
+                        LAYERS: selectedLayer,
+                        TILED: true,
+                    },
+                });
+                break;
             }
         }
         newSource.set('id', id);
@@ -1580,6 +1717,9 @@ export class MainView extends React.Component {
         }
     }
     _onSharedOptionsChanged() {
+        if (!this._Map) {
+            return;
+        }
         // ! would prefer a model ready signal or something, this feels hacky
         const enableSpectaPresentation = this._model.isSpectaMode();
         // Handle initialization based on specta presentation state
@@ -1632,6 +1772,12 @@ export class MainView extends React.Component {
         if (projection !== undefined && currentProjection !== projection) {
             const newProjection = getProjection(projection);
             if (newProjection) {
+                this.setState(old => ({
+                    viewProjection: {
+                        code: newProjection.getCode(),
+                        units: newProjection.getUnits(),
+                    },
+                }));
                 view = new View({ projection: newProjection });
             }
             else {
@@ -1639,6 +1785,8 @@ export class MainView extends React.Component {
                 return;
             }
         }
+        view.setRotation(bearing || 0);
+        this._Map.setView(view);
         // Use the extent only if explicitly requested (QGIS files).
         if (useExtent && extent) {
             view.fit(extent);
@@ -1652,8 +1800,6 @@ export class MainView extends React.Component {
                 this._model.setOptions(options);
             }
         }
-        view.setRotation(bearing || 0);
-        this._Map.setView(view);
     }
     _onViewChanged(sender, change) {
         // TODO SOMETHING
@@ -1932,6 +2078,7 @@ export class MainView extends React.Component {
     _onPointerMove(e) {
         const pixel = this._Map.getEventPixel(e);
         const coordinates = this._Map.getCoordinateFromPixel(pixel);
+        this._lastPointerCoord = coordinates;
         this._syncPointer(coordinates);
     }
     async _addMarker(e) {
@@ -2107,7 +2254,7 @@ export class MainView extends React.Component {
             }),
             React.createElement("div", { className: "jGIS-Mainview-Container" },
                 this.state.displayTemporalController && (React.createElement(TemporalSlider, { model: this._model, filterStates: this.state.filterStates })),
-                React.createElement("div", { className: "jGIS-Mainview data-jgis-keybinding", tabIndex: 0, style: {
+                React.createElement("div", { ref: this.mainViewRef, className: "jGIS-Mainview data-jgis-keybinding", tabIndex: 0, style: {
                         border: this.state.remoteUser
                             ? `solid 3px ${this.state.remoteUser.color}`
                             : 'unset',

package/lib/menus.js

@@ -33,6 +33,10 @@ export const rasterSubMenu = (commands) => {
         type: 'command',
         command: CommandIDs.openNewRasterDialog,
     });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.openNewWmsDialog,
+    });
     subMenu.addItem({
         type: 'command',
         command: CommandIDs.openNewHillshadeDialog,

package/lib/panelview/components/layers.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { DOMUtils } from '@jupyterlab/apputils';
 import { Button, LabIcon, caretDownIcon, caretRightIcon, } from '@jupyterlab/ui-components';
 import React, { useEffect, useState, } from 'react';
@@ -104,8 +115,14 @@ export const LayersBodyComponent = props => {
                 };
             }
             else {
-                // If types are the same add the selection - multi-selection
-                newSelection = Object.assign(Object.assign({}, selectedValue), { [item]: { type } });
+                // If types are the same modify the selection (either add or remove to multi-selection)
+                if (item in selectedValue) {
+                    const _a = selectedValue, _b = item, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                    newSelection = rest;
+                }
+                else {
+                    newSelection = Object.assign(Object.assign({}, selectedValue), { [item]: { type } });
+                }
             }
         }
         // Set the selection

package/lib/panelview/components/legendItem.js

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from 'react';
+import { findExprNode } from "../../dialogs/symbology/colorRampUtils";
 import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
 export const LegendItem = ({ layerId, model }) => {
     const { symbology, isLoading, error } = useGetSymbology({ layerId, model });
     const [content, setContent] = useState(null);
     const parseColorStops = (expr) => {
-        if (!Array.isArray(expr) || expr[0] !== 'interpolate') {
+        const interpolate = findExprNode(expr, 'interpolate');
+        if (!interpolate) {
             return [];
         }
         const stops = [];
-        for (let i = 3; i < expr.length; i += 2) {
-            const value = expr[i];
-            const rgba = expr[i + 1];
+        for (let i = 3; i < interpolate.length; i += 2) {
+            const value = interpolate[i];
+            const rgba = interpolate[i + 1];
             const color = Array.isArray(rgba)
                 ? `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`
                 : String(rgba);
@@ -130,6 +132,14 @@ export const LegendItem = ({ layerId, model }) => {
                 }))));
             return;
         }
+        // Canonical
+        if (renderType === 'Canonical') {
+            setContent(React.createElement("div", { style: { padding: 6 } },
+                property && (React.createElement("div", { style: { fontSize: '1em' } },
+                    React.createElement("strong", null, property))),
+                React.createElement("div", { style: { fontSize: '0.8em', opacity: 0.7 } }, "hex color attribute")));
+            return;
+        }
         // Categorized
         if (renderType === 'Categorized') {
             const cats = parseCaseCategories(fill || stroke);

package/lib/stacBrowser/components/filter-extension/QueryableComboBox.js

@@ -1,10 +1,55 @@
-import React, { useMemo } from 'react';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { Combobox } from "../../../shared/components/Combobox";
 import { Input } from "../../../shared/components/Input";
 import { Select } from "../../../shared/components/Select";
 import QueryableRow from "./QueryableRow";
+import { debounce } from "../../../tools";
 import SingleDatePicker from '../../../shared/components/SingleDatePicker';
 export function QueryableComboBox({ queryables, selectedQueryables, updateSelectedQueryables, }) {
+    const [draftValues, setDraftValues] = useState({});
+    const selectedQueryablesRef = useRef(selectedQueryables);
+    const debouncedCommitByKeyRef = useRef({});
+    useEffect(() => {
+        selectedQueryablesRef.current = selectedQueryables;
+    }, [selectedQueryables]);
+    const normalizeInputValue = useCallback((schema, value) => {
+        let valueToStore = value;
+        if (schema.type === 'string' &&
+            schema.format === 'date-time' &&
+            typeof value === 'string') {
+            try {
+                const localDate = new Date(value);
+                valueToStore = localDate.toISOString();
+            }
+            catch (_a) {
+                valueToStore = value;
+            }
+        }
+        return valueToStore;
+    }, []);
+    const scheduleQueryableCommit = useCallback((key, value) => {
+        if (!debouncedCommitByKeyRef.current[key]) {
+            debouncedCommitByKeyRef.current[key] = debounce((nextValue) => {
+                const latestFilter = selectedQueryablesRef.current[key];
+                if (!latestFilter) {
+                    return;
+                }
+                updateSelectedQueryables(key, Object.assign(Object.assign({}, latestFilter), { inputValue: nextValue }));
+            }, 500);
+        }
+        debouncedCommitByKeyRef.current[key](value);
+    }, [updateSelectedQueryables]);
     // Derive selected items from selectedQueryables
     const selectedItems = useMemo(() => {
         return queryables.filter(([key]) => key in selectedQueryables);
@@ -14,6 +59,11 @@ export function QueryableComboBox({ queryables, selectedQueryables, updateSelect
         const isCurrentlySelected = key in selectedQueryables;
         if (isCurrentlySelected) {
             // Remove if already selected - pass null to explicitly remove
+            delete debouncedCommitByKeyRef.current[key];
+            setDraftValues(prev => {
+                const _a = prev, _b = key, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                return rest;
+            });
             updateSelectedQueryables(key, null);
         }
         else {
@@ -152,26 +202,19 @@ export function QueryableComboBox({ queryables, selectedQueryables, updateSelect
                 operator: ((_b = operators[0]) === null || _b === void 0 ? void 0 : _b.value) || '=',
                 inputValue: undefined,
             };
+            const inputValue = draftValues[key] !== undefined
+                ? draftValues[key]
+                : currentFilter.inputValue;
             const handleInputChange = (value) => {
-                // For datetime values, convert local time to UTC ISO string
-                let valueToStore = value;
-                if (val.type === 'string' &&
-                    val.format === 'date-time' &&
-                    typeof value === 'string') {
-                    try {
-                        // Parse local time and convert to UTC ISO string
-                        const localDate = new Date(value);
-                        valueToStore = localDate.toISOString();
-                    }
-                    catch (_a) {
-                        valueToStore = value;
-                    }
-                }
-                updateSelectedQueryables(key, Object.assign(Object.assign({}, currentFilter), { inputValue: valueToStore }));
+                const normalizedValue = normalizeInputValue(val, value);
+                setDraftValues(prev => (Object.assign(Object.assign({}, prev), { [key]: normalizedValue })));
+                // Uses a stable per-field debounced function
+                // inline debounce would recreate each render and reset its timer
+                scheduleQueryableCommit(key, normalizedValue);
             };
             const handleOperatorChange = (operator) => {
                 updateSelectedQueryables(key, Object.assign(Object.assign({}, currentFilter), { operator }));
             };
-            return (React.createElement(QueryableRow, { key: key, qKey: key, qVal: val, operators: operators, currentFilter: currentFilter, inputComponent: getInputBasedOnType(val, currentFilter.inputValue, handleInputChange), onOperatorChange: handleOperatorChange }));
+            return (React.createElement(QueryableRow, { key: key, qKey: key, qVal: val, operators: operators, currentFilter: currentFilter, inputComponent: getInputBasedOnType(val, inputValue, handleInputChange), onOperatorChange: handleOperatorChange }));
         }))));
 }

package/lib/stacBrowser/hooks/useStacFilterExtension.d.ts

@@ -14,7 +14,7 @@ export declare function useStacFilterExtension({ model, baseUrl, limit, }: IUseS
     queryableFields: IStacQueryables | undefined;
     collections: FilteredCollection[];
     selectedCollection: string;
-    setSelectedCollection: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setSelectedCollection: (nextSelectedCollection: string) => void;
     handleSubmit: () => Promise<void>;
     startTime: Date | undefined;
     endTime: Date | undefined;