@jupytergis/base 0.14.0 → 0.15.0

package/lib/panelview/story-maps/hooks/useStoryMap.js

@@ -16,6 +16,7 @@ export function getSpectaPresentationStyle(story) {
     return style;
 }
 export function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLayer, panelRef, isSpecta, }) {
+    var _a;
     const [currentIndex, setCurrentIndex] = useState(() => { var _a; return (_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0; });
     const [storyData, setStoryData] = useState(() => { var _a; return (_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null; });
     const storySegments = useMemo(() => {
@@ -32,6 +33,7 @@ export function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLa
     const activeSlide = useMemo(() => currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.parameters, [currentStorySegment]);
     const layerName = useMemo(() => { var _a; return (_a = currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.name) !== null && _a !== void 0 ? _a : ''; }, [currentStorySegment]);
     const currentStorySegmentId = useMemo(() => storySegmentIds === null || storySegmentIds === void 0 ? void 0 : storySegmentIds[currentIndex], [storySegmentIds, currentIndex]);
+    const showGradient = (_a = storyData === null || storyData === void 0 ? void 0 : storyData.showGradient) !== null && _a !== void 0 ? _a : true;
     const hasPrev = currentIndex > 0;
     const hasNext = currentIndex < segmentCount - 1;
     const clearOverrideLayers = useCallback(() => {
@@ -236,6 +238,7 @@ export function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLa
         storyData,
         storySegments,
         currentIndex,
+        showGradient,
         clearOverrideLayers,
         setIndex,
         handlePrev,

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 {
@@ -105,9 +155,7 @@ export function QueryableComboBox({ queryables, selectedQueryables, updateSelect
                     };
                     return (React.createElement(SingleDatePicker, { date: parseDate(currentValue), onDateChange: handleDateChange, dateFormat: "P", showIcon: true, placeholder: "Select date", className: "jgis-queryable-combo-input jgis-queryable-combo-input-date-picker" }));
                 }
-                return (React.createElement(Input, { type: "text", className: "jgis-queryable-combo-input", 
-                    // style={{borderRadius: 0}}
-                    value: currentValue || '', onChange: e => onChange(e.target.value) }));
+                return (React.createElement(Input, { type: "text", value: currentValue || '', onChange: e => onChange(e.target.value) }));
             case 'number':
             case 'integer':
                 if (val.enum) {
@@ -154,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;

package/lib/stacBrowser/hooks/useStacFilterExtension.js

@@ -10,13 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { endOfToday, startOfToday } from 'date-fns';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import useIsFirstRender from "../../shared/hooks/useIsFirstRender";
 import { useStacResultsContext } from "../context/StacResultsContext";
 import { useStacSearch } from "./useStacSearch";
 import { GlobalStateDbManager } from "../../store";
 import { fetchWithProxies } from "../../tools";
 const STAC_FILTER_EXTENSION_STATE_KEY = 'jupytergis:stac-filter-extension-state';
+const STAC_COLLECTIONS_CACHE_STATE_KEY = 'jupytergis:stac-collections-cache';
+const STAC_QUERYABLES_CACHE_STATE_KEY = 'jupytergis:stac-queryables-cache';
 /**
  * Hook for searching STAC catalogs that support the Filter Extension (CQL2-JSON).
  * Fetches collections and queryables, and builds filter queries using the STAC Filter Extension.
@@ -25,7 +27,7 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
     const isFirstRender = useIsFirstRender();
     const { registerBuildQuery, executeQuery } = useStacResultsContext();
     // Get temporal/spatial filters from useStacSearch
-    const { startTime, endTime, setStartTime, setEndTime, currentBBox, useWorldBBox, setUseWorldBBox, } = useStacSearch({
+    const { startTime, endTime, setStartTime, setEndTime, currentBBox, useWorldBBox, setUseWorldBBox, hasLoadedInitialSearchState, } = useStacSearch({
         model,
     });
     const [queryableFields, setQueryableFields] = useState();
@@ -33,30 +35,132 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
     const [selectedCollection, setSelectedCollection] = useState('');
     const [selectedQueryables, setSelectedQueryables] = useState({});
     const [filterOperator, setFilterOperator] = useState('and');
+    const hasLoadedInitialFilterStateRef = useRef(false);
+    const hasLoadedInitialQueryablesRef = useRef(false);
+    /** Last auto-search request; skips duplicate consecutive fetches (React churn). */
+    const lastAutoQueryKeyRef = useRef(null);
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    const getCollectionsCacheKey = useCallback(() => `${STAC_COLLECTIONS_CACHE_STATE_KEY}:${baseUrl}`, [baseUrl]);
+    const getQueryablesCacheKey = useCallback(() => `${STAC_QUERYABLES_CACHE_STATE_KEY}:${baseUrl}:${selectedCollection}`, [baseUrl, selectedCollection]);
+    const updateSelectedQueryables = useCallback((qKey, filter) => {
+        setSelectedQueryables(prev => {
+            // If filter is null, remove the key entirely
+            if (filter === null) {
+                const _a = prev, _b = qKey, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                return rest;
+            }
+            // If inputValue is undefined but filter exists, keep it (user might be
+            // entering value). Only remove if explicitly set to null.
+            return Object.assign(Object.assign({}, prev), { [qKey]: filter });
+        });
+    }, []);
+    const handleSelectedCollectionChange = useCallback((nextSelectedCollection) => {
+        if (selectedCollection !== '' &&
+            nextSelectedCollection !== '' &&
+            selectedCollection !== nextSelectedCollection) {
+            setSelectedQueryables({});
+            setQueryableFields(undefined);
+            setFilterOperator('and');
+        }
+        setSelectedCollection(nextSelectedCollection);
+    }, [selectedCollection]);
+    const buildQuery = useCallback(() => {
+        const st = startTime
+            ? startTime.toISOString()
+            : startOfToday().toISOString();
+        const et = endTime ? endTime.toISOString() : endOfToday().toISOString();
+        // Build filter object from selectedQueryables
+        const filterConditions = Object.entries(selectedQueryables)
+            .filter(([, filter]) => filter.inputValue !== undefined)
+            .map(([property, filter]) => {
+            var _a, _b;
+            // Check if this property is a datetime type
+            const queryableField = queryableFields === null || queryableFields === void 0 ? void 0 : queryableFields.find(([key]) => key === property);
+            const isDateTime = queryableField &&
+                ((_a = queryableField[1]) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
+                ((_b = queryableField[1]) === null || _b === void 0 ? void 0 : _b.format) === 'date-time';
+            // For datetime values, wrap in timestamp object; otherwise use value directly
+            const value = isDateTime
+                ? { timestamp: filter.inputValue }
+                : filter.inputValue;
+            const condition = {
+                op: filter.operator,
+                args: [{ property }, value],
+            };
+            return condition;
+        });
+        const body = {
+            bbox: currentBBox,
+            collections: [selectedCollection],
+            datetime: `${st}/${et}`,
+            limit,
+            'filter-lang': 'cql2-json',
+        };
+        // Only add filter if there are any conditions
+        if (filterConditions.length > 0) {
+            body.filter = {
+                op: filterOperator,
+                args: filterConditions,
+            };
+        }
+        return body;
+    }, [
+        startTime,
+        endTime,
+        currentBBox,
+        selectedCollection,
+        limit,
+        selectedQueryables,
+        filterOperator,
+        queryableFields,
+    ]);
+    // Register buildQuery with context
+    useEffect(() => {
+        registerBuildQuery(() => buildQuery());
+    }, [registerBuildQuery, buildQuery, baseUrl]);
+    const handleSubmit = useCallback(async () => {
+        if (!model) {
+            return;
+        }
+        // Build query body and execute query
+        const queryBody = buildQuery();
+        const searchUrl = baseUrl.endsWith('/')
+            ? `${baseUrl}search`
+            : `${baseUrl}/search`;
+        lastAutoQueryKeyRef.current = JSON.stringify({
+            searchUrl,
+            queryBody,
+        });
+        await executeQuery(queryBody, searchUrl);
+    }, [model, buildQuery, baseUrl]);
     // On mount, load saved filter state from StateDB (if present)
     useEffect(() => {
         async function loadFilterExtensionStateFromDb() {
-            const savedFilterState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_FILTER_EXTENSION_STATE_KEY)));
-            if (savedFilterState) {
-                if (savedFilterState.selectedCollection) {
-                    setSelectedCollection(savedFilterState.selectedCollection);
-                }
-                if (savedFilterState.queryableFilters) {
-                    // Convert null back to undefined for inputValue
-                    const restoredFilters = {};
-                    Object.entries(savedFilterState.queryableFilters).forEach(([key, filter]) => {
-                        restoredFilters[key] = {
-                            operator: filter.operator,
-                            inputValue: filter.inputValue === null ? undefined : filter.inputValue,
-                        };
-                    });
-                    setSelectedQueryables(restoredFilters);
-                }
-                if (savedFilterState.filterOperator) {
-                    setFilterOperator(savedFilterState.filterOperator);
+            hasLoadedInitialFilterStateRef.current = false;
+            try {
+                const savedFilterState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_FILTER_EXTENSION_STATE_KEY)));
+                if (savedFilterState) {
+                    if (savedFilterState.selectedCollection) {
+                        handleSelectedCollectionChange(savedFilterState.selectedCollection);
+                    }
+                    if (savedFilterState.queryableFilters) {
+                        const restoredFilters = {};
+                        Object.entries(savedFilterState.queryableFilters).forEach(([key, filter]) => {
+                            restoredFilters[key] = {
+                                operator: filter.operator,
+                                inputValue: filter.inputValue === null ? undefined : filter.inputValue,
+                            };
+                        });
+                        setSelectedQueryables(restoredFilters);
+                    }
+                    if (savedFilterState.filterOperator) {
+                        setFilterOperator(savedFilterState.filterOperator);
+                    }
                 }
             }
+            finally {
+                hasLoadedInitialFilterStateRef.current = true;
+            }
         }
         loadFilterExtensionStateFromDb();
     }, [stateDb]);
@@ -84,6 +188,8 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
     }, [selectedCollection, selectedQueryables, filterOperator, stateDb]);
     // Reset all state when URL changes
     useEffect(() => {
+        lastAutoQueryKeyRef.current = null;
+        hasLoadedInitialQueryablesRef.current = false;
         setQueryableFields(undefined);
         setCollections([]);
         setSelectedCollection('');
@@ -96,14 +202,37 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
             return;
         }
         const fetchCollections = async () => {
+            var _a;
             if (!baseUrl) {
                 return;
             }
+            const cachedCollections = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(getCollectionsCacheKey())));
+            if (cachedCollections && cachedCollections.length > 0) {
+                setCollections(cachedCollections);
+                if (hasLoadedInitialQueryablesRef.current &&
+                    selectedCollection === '') {
+                    handleSelectedCollectionChange(cachedCollections[0].id);
+                }
+                return;
+            }
             const collectionsUrl = baseUrl.endsWith('/')
                 ? `${baseUrl}collections`
                 : `${baseUrl}/collections`;
-            const data = await fetchWithProxies(collectionsUrl, model, async (response) => await response.json(), undefined);
-            const collections = data.collections
+            const allCollections = [];
+            let nextUrl = collectionsUrl;
+            while (nextUrl) {
+                const page = await fetchWithProxies(nextUrl, model, async (response) => await response.json(), undefined);
+                if (!page) {
+                    break;
+                }
+                allCollections.push(...page.collections);
+                const currentPageUrl = nextUrl;
+                const nextLinkHref = (_a = page.links.find(link => link.rel === 'next')) === null || _a === void 0 ? void 0 : _a.href;
+                nextUrl = nextLinkHref
+                    ? new URL(nextLinkHref, currentPageUrl).toString()
+                    : null;
+            }
+            const collections = allCollections
                 .map((collection) => {
                 var _a;
                 return ({
@@ -118,13 +247,23 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
                 return titleA.localeCompare(titleB);
             });
             setCollections(collections);
+            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(getCollectionsCacheKey(), collections));
             // Set first collection as default if one isn't loaded
-            if (collections.length > 0 && !(selectedCollection === '')) {
-                setSelectedCollection(collections[0].id);
+            if (hasLoadedInitialQueryablesRef.current &&
+                collections.length > 0 &&
+                !(selectedCollection === '')) {
+                handleSelectedCollectionChange(collections[0].id);
             }
         };
         fetchCollections();
-    }, [model, baseUrl]);
+    }, [
+        model,
+        baseUrl,
+        stateDb,
+        selectedCollection,
+        getCollectionsCacheKey,
+        handleSelectedCollectionChange,
+    ]);
     // for queryables
     // ! TODO - support multiple collection selections
     useEffect(() => {
@@ -132,102 +271,46 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
             return;
         }
         const fetchQueryables = async () => {
-            if (!baseUrl) {
+            if (!baseUrl || selectedCollection === '') {
+                return;
+            }
+            hasLoadedInitialQueryablesRef.current = false;
+            const cachedQueryables = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(getQueryablesCacheKey())));
+            if (cachedQueryables !== undefined) {
+                setQueryableFields(Object.entries(cachedQueryables));
+                hasLoadedInitialQueryablesRef.current = true;
                 return;
             }
             const queryablesUrl = baseUrl.endsWith('/')
-                ? `${baseUrl}queryables`
-                : `${baseUrl}/queryables`;
+                ? `${baseUrl}collections/${encodeURIComponent(selectedCollection)}/queryables`
+                : `${baseUrl}/collections/${encodeURIComponent(selectedCollection)}/queryables`;
             const data = await fetchWithProxies(queryablesUrl, model, async (response) => await response.json(), undefined);
-            setQueryableFields(Object.entries(data.properties));
+            const queryableProperties = data.properties;
+            setQueryableFields(Object.entries(queryableProperties));
+            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(getQueryablesCacheKey(), queryableProperties));
+            hasLoadedInitialQueryablesRef.current = true;
         };
         fetchQueryables();
-    }, [model, baseUrl]);
-    const updateSelectedQueryables = useCallback((qKey, filter) => {
-        setSelectedQueryables(prev => {
-            // If filter is null, remove the key entirely
-            if (filter === null) {
-                const _a = prev, _b = qKey, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-                return rest;
-            }
-            // If inputValue is undefined but filter exists, keep it (user might be entering value)
-            // Only remove if explicitly set to null
-            return Object.assign(Object.assign({}, prev), { [qKey]: filter });
-        });
-    }, []);
-    const buildQuery = useCallback(() => {
-        const st = startTime
-            ? startTime.toISOString()
-            : startOfToday().toISOString();
-        const et = endTime ? endTime.toISOString() : endOfToday().toISOString();
-        // Build filter object from selectedQueryables
-        const filterConditions = Object.entries(selectedQueryables)
-            .filter(([, filter]) => filter.inputValue !== undefined)
-            .map(([property, filter]) => {
-            var _a, _b;
-            // Check if this property is a datetime type
-            const queryableField = queryableFields === null || queryableFields === void 0 ? void 0 : queryableFields.find(([key]) => key === property);
-            const isDateTime = queryableField &&
-                ((_a = queryableField[1]) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
-                ((_b = queryableField[1]) === null || _b === void 0 ? void 0 : _b.format) === 'date-time';
-            // For datetime values, wrap in timestamp object; otherwise use value directly
-            const value = isDateTime
-                ? { timestamp: filter.inputValue }
-                : filter.inputValue;
-            const condition = {
-                op: filter.operator,
-                args: [{ property }, value],
-            };
-            return condition;
-        });
-        const body = {
-            bbox: currentBBox,
-            collections: [selectedCollection],
-            datetime: `${st}/${et}`,
-            limit,
-            'filter-lang': 'cql2-json',
-        };
-        // Only add filter if there are any conditions
-        if (filterConditions.length > 0) {
-            body.filter = {
-                op: filterOperator,
-                args: filterConditions,
-            };
-        }
-        return body;
-    }, [
-        startTime,
-        endTime,
-        currentBBox,
-        selectedCollection,
-        limit,
-        selectedQueryables,
-        filterOperator,
-        queryableFields,
-    ]);
-    // Register buildQuery with context
-    useEffect(() => {
-        registerBuildQuery(() => buildQuery());
-    }, [registerBuildQuery, buildQuery, baseUrl]);
-    const handleSubmit = useCallback(async () => {
-        if (!model) {
-            return;
-        }
-        // Build query body and execute query
-        const queryBody = buildQuery();
-        const searchUrl = baseUrl.endsWith('/')
-            ? `${baseUrl}search`
-            : `${baseUrl}/search`;
-        await executeQuery(queryBody, searchUrl);
-    }, [model, executeQuery, buildQuery, baseUrl]);
+    }, [model, baseUrl, selectedCollection, stateDb, getQueryablesCacheKey]);
     // Handle search when filters change
     useEffect(() => {
-        if (model && !isFirstRender && selectedCollection !== '') {
+        const hasLoadedInitialFilterState = hasLoadedInitialFilterStateRef.current &&
+            hasLoadedInitialQueryablesRef.current;
+        if (model &&
+            !isFirstRender &&
+            selectedCollection !== '' &&
+            hasLoadedInitialFilterState &&
+            hasLoadedInitialSearchState) {
             const queryBody = buildQuery();
             const searchUrl = baseUrl.endsWith('/')
                 ? `${baseUrl}search`
                 : `${baseUrl}/search`;
-            executeQuery(queryBody, searchUrl);
+            const autoQueryKey = JSON.stringify({ searchUrl, queryBody });
+            if (lastAutoQueryKeyRef.current === autoQueryKey) {
+                return;
+            }
+            lastAutoQueryKeyRef.current = autoQueryKey;
+            void executeQuery(queryBody, searchUrl);
         }
     }, [
         model,
@@ -235,18 +318,19 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
         selectedCollection,
         selectedQueryables,
         filterOperator,
+        queryableFields,
         startTime,
         endTime,
         currentBBox,
         buildQuery,
-        executeQuery,
         baseUrl,
+        hasLoadedInitialSearchState,
     ]);
     return {
         queryableFields,
         collections,
         selectedCollection,
-        setSelectedCollection,
+        setSelectedCollection: handleSelectedCollectionChange,
         handleSubmit,
         startTime,
         endTime,

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

@@ -11,6 +11,7 @@ interface IUseStacSearchReturn {
     setCurrentBBox: (bbox: [number, number, number, number]) => void;
     useWorldBBox: boolean;
     setUseWorldBBox: (val: boolean) => void;
+    hasLoadedInitialSearchState: boolean;
 }
 /**
  * Base hook for managing STAC search - handles temporal/spatial filters

package/lib/stacBrowser/hooks/useStacSearch.js

@@ -9,22 +9,29 @@ export function useStacSearch({ model, }) {
     const [endTime, setEndTime] = useState(undefined);
     const [currentBBox, setCurrentBBox] = useState([-180, -90, 180, 90]);
     const [useWorldBBox, setUseWorldBBox] = useState(false);
+    const [hasLoadedInitialSearchState, setHasLoadedInitialSearchState] = useState(false);
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
     // Load saved state from StateDB on mount
     useEffect(() => {
         async function loadStacSearchStateFromDb() {
-            const savedState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_SEARCH_STATE_KEY)));
-            if (savedState) {
-                if (savedState.startTime) {
-                    setStartTime(new Date(savedState.startTime));
-                }
-                if (savedState.endTime) {
-                    setEndTime(new Date(savedState.endTime));
-                }
-                if (savedState.useWorldBBox !== undefined) {
-                    setUseWorldBBox(savedState.useWorldBBox);
+            setHasLoadedInitialSearchState(false);
+            try {
+                const savedState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_SEARCH_STATE_KEY)));
+                if (savedState) {
+                    if (savedState.startTime) {
+                        setStartTime(new Date(savedState.startTime));
+                    }
+                    if (savedState.endTime) {
+                        setEndTime(new Date(savedState.endTime));
+                    }
+                    if (savedState.useWorldBBox !== undefined) {
+                        setUseWorldBBox(savedState.useWorldBBox);
+                    }
                 }
             }
+            finally {
+                setHasLoadedInitialSearchState(true);
+            }
         }
         loadStacSearchStateFromDb();
     }, [stateDb]);
@@ -63,5 +70,6 @@ export function useStacSearch({ model, }) {
         setCurrentBBox,
         useWorldBBox,
         setUseWorldBBox,
+        hasLoadedInitialSearchState,
     };
 }

package/lib/tools.d.ts

@@ -27,7 +27,7 @@ export declare function getLayerTileInfo(tileUrl: string, mapOptions: Pick<IJGIS
 export interface IParsedStyle {
     fillColor: string;
     strokeColor: string;
-    strokeWidth: number;
+    strokeWidth: string;
     joinStyle: string;
     capStyle: string;
     radius?: number;

package/lib/tools.js

@@ -6,6 +6,7 @@ import { compressors } from 'hyparquet-compressors';
 import Protobuf from 'pbf';
 import shp from 'shpjs';
 import LAYER_GALLERY from "../layer_gallery.json";
+import { DEFAULT_STROKE_WIDTH } from "./dialogs/symbology/colorRampUtils";
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -219,7 +220,7 @@ export function parseColor(style) {
         radius: (_a = style['circle-radius']) !== null && _a !== void 0 ? _a : 5,
         fillColor: (_c = (_b = style['circle-fill-color']) !== null && _b !== void 0 ? _b : style['fill-color']) !== null && _c !== void 0 ? _c : '#3399CC',
         strokeColor: (_e = (_d = style['circle-stroke-color']) !== null && _d !== void 0 ? _d : style['stroke-color']) !== null && _e !== void 0 ? _e : '#3399CC',
-        strokeWidth: (_g = (_f = style['circle-stroke-width']) !== null && _f !== void 0 ? _f : style['stroke-width']) !== null && _g !== void 0 ? _g : 1.25,
+        strokeWidth: String((_g = (_f = style['circle-stroke-width']) !== null && _f !== void 0 ? _f : style['stroke-width']) !== null && _g !== void 0 ? _g : DEFAULT_STROKE_WIDTH),
         joinStyle: (_j = (_h = style['circle-stroke-line-join']) !== null && _h !== void 0 ? _h : style['stroke-line-join']) !== null && _j !== void 0 ? _j : 'round',
         capStyle: (_l = (_k = style['circle-stroke-line-cap']) !== null && _k !== void 0 ? _k : style['stroke-line-cap']) !== null && _l !== void 0 ? _l : 'round',
     };
@@ -767,8 +768,7 @@ export const getNumericFeatureAttributes = (featureProperties) => {
  */
 export const getColorCodeFeatureAttributes = (featureProperties) => {
     return getFeatureAttributes(featureProperties, (_, value) => {
-        const regex = new RegExp('^#[0-9a-f]{6}$');
-        return typeof value === 'string' && regex.test(value);
+        return typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value);
     });
 };
 export function downloadFile(content, fileName, mimeType) {