@jupytergis/base 0.11.1 → 0.12.0

package/lib/stacBrowser/components/shared/StacPanelResults.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button } from "../../../shared/components/Button";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "../../../shared/components/Pagination";
+import { LoadingIcon } from "../../../shared/components/loading";
+import { useStacResultsContext } from "../../context/StacResultsContext";
+function getPageItems(currentPage, totalPages) {
+    if (totalPages <= 5) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    if (currentPage <= 3) {
+        return [1, 2, 3, 'ellipsis', totalPages];
+    }
+    if (currentPage >= totalPages - 2) {
+        return [
+            totalPages - 4,
+            totalPages - 3,
+            totalPages - 2,
+            totalPages - 1,
+            totalPages,
+        ];
+    }
+    return [
+        currentPage - 2,
+        currentPage - 1,
+        currentPage,
+        'ellipsis',
+        totalPages,
+    ];
+}
+const StacPanelResults = () => {
+    const { results, handlePaginationClick, handleResultClick, formatResult, isLoading, paginationLinks, currentPage, setCurrentPage, totalPages, executeQueryWithPage, } = useStacResultsContext();
+    const isNext = paginationLinks.some(link => link.rel === 'next');
+    const isPrev = paginationLinks.some(link => ['prev', 'previous'].includes(link.rel));
+    return (React.createElement("div", { className: "jgis-stac-browser-filters-panel" },
+        React.createElement(Pagination, null,
+            React.createElement(PaginationContent, { className: "jgis-stac-panel-results-pagination" },
+                React.createElement(PaginationItem, null,
+                    React.createElement(PaginationPrevious, { onClick: () => {
+                            setCurrentPage(Math.max(currentPage - 1, 1));
+                            handlePaginationClick('previous');
+                        }, disabled: !isPrev })),
+                totalPages === 1 ? (
+                // One page, display current page number and keep active
+                React.createElement(PaginationItem, null,
+                    React.createElement(PaginationLink, { isActive: true }, currentPage))) : results.length !== 0 ? (
+                // Multiple pages, display fancy pagination numbers
+                React.createElement(React.Fragment, null, getPageItems(currentPage, totalPages).map(pageNumber => {
+                    if (pageNumber === 'ellipsis') {
+                        return (React.createElement(PaginationItem, { key: "ellipsis" },
+                            React.createElement(PaginationEllipsis, null)));
+                    }
+                    return (React.createElement(PaginationItem, { key: pageNumber },
+                        React.createElement(PaginationLink, { isActive: pageNumber === currentPage, onClick: async () => {
+                                setCurrentPage(pageNumber);
+                                await executeQueryWithPage(pageNumber);
+                            }, disabled: totalPages === 1 }, pageNumber)));
+                }))) : (
+                // No results
+                React.createElement(PaginationItem, null,
+                    React.createElement(PaginationLink, { isActive: true, disabled: true }, "0"))),
+                React.createElement(PaginationItem, null,
+                    React.createElement(PaginationNext, { onClick: () => {
+                            setCurrentPage(currentPage + 1);
+                            handlePaginationClick('next');
+                        }, disabled: !isNext })))),
+        React.createElement("div", { className: "jgis-stac-browser-results-list" }, isLoading ? (React.createElement(LoadingIcon, { size: "3x" })) : (results.map(result => (React.createElement(Button, { key: result.id, className: "jgis-stac-browser-results-item", onClick: () => handleResultClick(result.id) }, formatResult(result))))))));
+};
+export default StacPanelResults;

package/lib/stacBrowser/components/shared/StacSpatialExtent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IStacSpatialExtentProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    label: string;
+}
+declare const StacSpatialExtent: React.FC<IStacSpatialExtentProps>;
+export default StacSpatialExtent;

package/lib/stacBrowser/components/shared/StacSpatialExtent.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Checkbox from "../../../shared/components/Checkbox";
+const StacSpatialExtent = ({ checked, onCheckedChange, label, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { className: "jgis-stac-filter-extension-label" }, "Spatial Extent"),
+        React.createElement("span", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' } },
+            React.createElement(Checkbox, { checked: checked, onCheckedChange: onCheckedChange }),
+            label)));
+};
+export default StacSpatialExtent;

package/lib/stacBrowser/components/shared/StacTemporalExtent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IStacTemporalExtentProps {
+    startTime: Date | undefined;
+    setStartTime: (date: Date | undefined) => void;
+    endTime: Date | undefined;
+    setEndTime: (date: Date | undefined) => void;
+}
+declare function StacTemporalExtent({ startTime, endTime, setStartTime, setEndTime, }: IStacTemporalExtentProps): React.JSX.Element;
+export default StacTemporalExtent;

package/lib/stacBrowser/components/shared/StacTemporalExtent.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import SingleDatePicker from '../../../shared/components/SingleDatePicker';
+function StacTemporalExtent({ startTime, endTime, setStartTime, setEndTime, }) {
+    return (React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+        React.createElement("label", { className: "jgis-stac-filter-extension-label" }, "Temporal Extent"),
+        React.createElement(SingleDatePicker, { date: startTime, onDateChange: setStartTime, className: "jgis-stac-datepicker-full-width" }),
+        React.createElement(SingleDatePicker, { date: endTime, onDateChange: setEndTime, className: "jgis-stac-datepicker-full-width" })));
+}
+export default StacTemporalExtent;

package/lib/stacBrowser/context/StacResultsContext.d.ts

@@ -0,0 +1,33 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React, { ReactNode } from 'react';
+import { IStacItem, IStacPaginationLink, IStacQueryBodyUnion, SetResultsFunction } from "../types/types";
+interface IStacResultsContext {
+    results: IStacItem[];
+    isLoading: boolean;
+    totalResults: string;
+    totalPages: number;
+    handlePaginationClick: (dir: 'next' | 'previous') => Promise<void>;
+    handleResultClick: (id: string) => Promise<void>;
+    formatResult: (item: IStacItem) => string;
+    paginationLinks: IStacPaginationLink[];
+    selectedUrl: string;
+    setSelectedUrl: (url: string) => void;
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    currentPageRef: React.MutableRefObject<number>;
+    setResults: SetResultsFunction;
+    setIsLoading: (isLoading: boolean) => void;
+    setPaginationLinks: (links: IStacPaginationLink[]) => void;
+    registerAddToMap: (addFn: (stacData: IStacItem) => void) => void;
+    registerHandlePaginationClick: (handleFn: (dir: 'next' | 'previous') => Promise<void>) => void;
+    registerBuildQuery: (buildQueryFn: () => IStacQueryBodyUnion) => void;
+    executeQuery: (body: IStacQueryBodyUnion, apiUrl?: string, method?: string) => Promise<void>;
+    executeQueryWithPage: (pageNumber: number) => Promise<void>;
+}
+interface IStacResultsProviderProps {
+    children: ReactNode;
+    model?: IJupyterGISModel;
+}
+export declare function StacResultsProvider({ children, model, }: IStacResultsProviderProps): React.JSX.Element;
+export declare function useStacResultsContext(): IStacResultsContext;
+export {};

package/lib/stacBrowser/context/StacResultsContext.js

@@ -0,0 +1,269 @@
+import { UUID } from '@lumino/coreutils';
+import React, { createContext, useContext, useState, useCallback, useRef, useEffect, } from 'react';
+import { GlobalStateDbManager } from "../../store";
+import { fetchWithProxies } from "../../tools";
+const StacResultsContext = createContext(undefined);
+const STAC_SELECTED_URL_STATE_KEY = 'jupytergis:stac-selected-url';
+export function StacResultsProvider({ children, model, }) {
+    const [results, setResultsState] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [totalResults, setTotalResults] = useState('0');
+    const [totalPages, setTotalPages] = useState(0);
+    const [paginationLinks, setPaginationLinksState] = useState([]);
+    const [selectedUrl, setSelectedUrlState] = useState('');
+    const [currentPage, setCurrentPageState] = useState(1);
+    const currentPageRef = useRef(1);
+    // Store hook-specific functions in refs (these are set by the hooks)
+    const addToMapRef = useRef();
+    const handlePaginationClickRef = useRef();
+    const buildQueryRef = useRef();
+    const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    // Load saved selected URL from StateDB on mount
+    useEffect(() => {
+        async function loadStacSelectedUrlFromDb() {
+            const savedState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_SELECTED_URL_STATE_KEY)));
+            if (savedState === null || savedState === void 0 ? void 0 : savedState.selectedUrl) {
+                setSelectedUrlState(savedState.selectedUrl);
+            }
+        }
+        loadStacSelectedUrlFromDb();
+    }, [stateDb]);
+    // Save selected URL to StateDB on change
+    useEffect(() => {
+        async function saveStacSelectedUrlToDb() {
+            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(STAC_SELECTED_URL_STATE_KEY, {
+                selectedUrl,
+            }));
+        }
+        saveStacSelectedUrlToDb();
+    }, [selectedUrl, stateDb]);
+    // Keep ref in sync with state
+    useEffect(() => {
+        currentPageRef.current = currentPage;
+    }, [currentPage]);
+    const setResults = useCallback((newResults, newTotalResults, newTotalPages) => {
+        setResultsState(newResults);
+        setTotalResults(newTotalResults);
+        setTotalPages(newTotalPages);
+    }, []);
+    const setPaginationLinks = useCallback((links) => {
+        setPaginationLinksState(links);
+    }, []);
+    const setSelectedUrl = useCallback((url) => {
+        setSelectedUrlState(url);
+        // Clear all registered handlers when provider changes to prevent stale handlers
+        handlePaginationClickRef.current = undefined;
+        addToMapRef.current = undefined;
+        buildQueryRef.current = undefined;
+        // Reset all state
+        setIsLoading(false);
+        setCurrentPageState(1);
+        currentPageRef.current = 1;
+        setResultsState([]);
+        setPaginationLinksState([]);
+        setTotalResults('0');
+        setTotalPages(0);
+    }, []);
+    const setCurrentPage = useCallback((page) => {
+        setCurrentPageState(page);
+    }, []);
+    const registerAddToMap = useCallback((addFn) => {
+        addToMapRef.current = addFn;
+    }, []);
+    const registerHandlePaginationClick = useCallback((handleFn) => {
+        handlePaginationClickRef.current = handleFn;
+    }, []);
+    const registerBuildQuery = useCallback((buildQueryFn) => {
+        buildQueryRef.current = buildQueryFn;
+    }, []);
+    // Helper to get search URL from base URL
+    const getSearchUrl = (baseUrl) => {
+        return baseUrl.endsWith('/') ? `${baseUrl}search` : `${baseUrl}/search`;
+    };
+    // Execute query using provided body
+    const executeQuery = useCallback(async (body, apiUrl, method) => {
+        var _a, _b, _c;
+        if (!model) {
+            return;
+        }
+        const XSRF_TOKEN = (_a = document.cookie.match(/_xsrf=([^;]+)/)) === null || _a === void 0 ? void 0 : _a[1];
+        const queryBody = body;
+        const urlToUse = apiUrl || getSearchUrl(selectedUrl);
+        const httpMethod = (method || 'POST').toUpperCase();
+        const options = {
+            method: httpMethod,
+            headers: {
+                'Content-Type': 'application/json',
+                'X-XSRFToken': XSRF_TOKEN,
+                credentials: 'include',
+            },
+            body: JSON.stringify(queryBody),
+        };
+        try {
+            // Update context with loading state
+            setIsLoading(true);
+            const data = (await fetchWithProxies(urlToUse, model, async (response) => await response.json(), 
+            //@ts-expect-error Jupyter requires X-XSRFToken header
+            options));
+            if (!data) {
+                setResults([], '0', 0);
+                setIsLoading(false);
+                return;
+            }
+            // Filter assets to only include items with 'overview' or 'thumbnail' roles
+            if (data.features && data.features.length > 0) {
+                data.features.forEach((feature) => {
+                    if (feature.assets) {
+                        const originalAssets = feature.assets;
+                        const filteredAssets = {};
+                        for (const [key, asset] of Object.entries(originalAssets)) {
+                            if (asset &&
+                                typeof asset === 'object' &&
+                                'roles' in asset &&
+                                Array.isArray(asset.roles)) {
+                                const roles = asset.roles;
+                                if (roles.includes('thumbnail') ||
+                                    roles.includes('overview')) {
+                                    filteredAssets[key] = asset;
+                                }
+                            }
+                        }
+                        feature.assets = filteredAssets;
+                    }
+                });
+            }
+            // Sort features by id before setting results
+            const sortedFeatures = [...data.features].sort((a, b) => a.id.localeCompare(b.id));
+            // Calculate total results from context if available
+            let totalResultsFromQuery;
+            let totalPagesFromQuery = 0;
+            if (data.context) {
+                totalResultsFromQuery = String(data.context.matched);
+                totalPagesFromQuery = Math.ceil(data.context.matched / data.context.limit);
+            }
+            else {
+                // If no context, check pagination links to determine if there are more results
+                const hasNext = (_c = (_b = data.links) === null || _b === void 0 ? void 0 : _b.some(link => link.rel === 'next')) !== null && _c !== void 0 ? _c : false;
+                const featuresCount = data.features.length;
+                // If there are more results, show the number of results and a +
+                totalResultsFromQuery = hasNext
+                    ? `${featuresCount}+`
+                    : String(featuresCount);
+                if (sortedFeatures.length > 0) {
+                    // If results found but no context, use single page
+                    totalPagesFromQuery = 1;
+                }
+            }
+            // Update context with results
+            setResults(sortedFeatures, totalResultsFromQuery, totalPagesFromQuery);
+            // Store pagination links
+            if (data.links) {
+                setPaginationLinks(data.links);
+            }
+            setIsLoading(false);
+        }
+        catch (error) {
+            setResults([], '0', 0);
+            setIsLoading(false);
+        }
+    }, [model, selectedUrl, setResults, setPaginationLinks]);
+    // Wrapper function that takes a page number, builds query, and executes it
+    const executeQueryWithPage = useCallback(async (pageNumber) => {
+        if (!model || !buildQueryRef.current) {
+            return;
+        }
+        // Build query body
+        let queryBody = buildQueryRef.current();
+        // Inject page number into the query
+        queryBody = Object.assign(Object.assign({}, queryBody), { page: pageNumber });
+        // Execute query with the modified body
+        await executeQuery(queryBody);
+    }, [model, executeQuery]);
+    // Use registered handler if provided, otherwise use context-created one
+    const handlePaginationClick = useCallback(async (dir) => {
+        if (handlePaginationClickRef.current) {
+            await handlePaginationClickRef.current(dir);
+            return;
+        }
+        const currentLinks = paginationLinks;
+        // Find the pagination link by rel
+        const link = currentLinks.find(l => {
+            if (dir === 'next') {
+                return l.rel === 'next';
+            }
+            // For 'previous', accept both 'previous' and 'prev'
+            return ['prev', 'previous'].includes(l.rel);
+        });
+        // ! this is nice, if no body then link href should have search params - update eventually
+        // ! this actually doesny make sense
+        if (link && link.body) {
+            // Use executeQuery with the link's body, href, and method
+            await executeQuery(link.body, link.href, link.method);
+        }
+    }, [model, paginationLinks, executeQuery]);
+    const defaultAddToMap = useCallback((stacData) => {
+        var _a, _b;
+        if (!model) {
+            return;
+        }
+        const layerId = UUID.uuid4();
+        const layerModel = {
+            type: 'StacLayer',
+            parameters: { data: stacData },
+            visible: true,
+            name: (_b = (_a = stacData.properties) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : stacData.id,
+        };
+        model.addLayer(layerId, layerModel);
+        model.centerOnPosition(layerId);
+    }, [model]);
+    const handleResultClick = useCallback(async (id) => {
+        if (!model) {
+            return;
+        }
+        const currentResults = results;
+        const result = currentResults.find((r) => r.id === id);
+        if (result) {
+            // Use registered override if available, otherwise use default
+            if (addToMapRef.current) {
+                addToMapRef.current(result);
+            }
+            else {
+                defaultAddToMap(result);
+            }
+        }
+    }, [model, results, defaultAddToMap]);
+    const formatResult = useCallback((item) => {
+        var _a, _b;
+        return (_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : item.id;
+    }, []);
+    return (React.createElement(StacResultsContext.Provider, { value: {
+            results,
+            isLoading,
+            totalResults,
+            totalPages,
+            handlePaginationClick,
+            handleResultClick,
+            formatResult,
+            paginationLinks,
+            selectedUrl,
+            setSelectedUrl,
+            currentPage,
+            setCurrentPage,
+            currentPageRef,
+            setResults,
+            setIsLoading,
+            setPaginationLinks,
+            registerAddToMap,
+            registerHandlePaginationClick,
+            registerBuildQuery,
+            executeQuery,
+            executeQueryWithPage,
+        } }, children));
+}
+export function useStacResultsContext() {
+    const context = useContext(StacResultsContext);
+    if (context === undefined) {
+        throw new Error('useStacResultsContext must be used within a StacResultsProvider');
+    }
+    return context;
+}

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

@@ -0,0 +1,24 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { StacFilterState, StacFilterSetters } from "../types/types";
+interface IUseGeodesSearchProps {
+    model: IJupyterGISModel | undefined;
+}
+interface IUseGeodesSearchReturn {
+    filterState: StacFilterState;
+    filterSetters: StacFilterSetters;
+    startTime: Date | undefined;
+    setStartTime: (date: Date | undefined) => void;
+    endTime: Date | undefined;
+    setEndTime: (date: Date | undefined) => void;
+    useWorldBBox: boolean;
+    setUseWorldBBox: (val: boolean) => void;
+    handleSubmit: () => Promise<void>;
+}
+/**
+ * Custom hook for managing GEODES-specific STAC search functionality
+ * Focuses on query building with GEODES-specific filters
+ * @param props - Configuration object containing model and context setters
+ * @returns Object containing filter state and temporal/spatial filters
+ */
+declare function useGeodesSearch({ model, }: IUseGeodesSearchProps): IUseGeodesSearchReturn;
+export default useGeodesSearch;

package/lib/stacBrowser/hooks/useGeodesSearch.js

@@ -0,0 +1,178 @@
+import { startOfYesterday } from 'date-fns';
+import { useCallback, useEffect, useState } from 'react';
+import useIsFirstRender from "../../shared/hooks/useIsFirstRender";
+import { products } from "../constants";
+import { useStacResultsContext } from "../context/StacResultsContext";
+import { useStacSearch } from "./useStacSearch";
+import { GlobalStateDbManager } from "../../store";
+const GEODES_STAC_FILTERS_KEY = 'jupytergis:geodes-stac-filters';
+/**
+ * Custom hook for managing GEODES-specific STAC search functionality
+ * Focuses on query building with GEODES-specific filters
+ * @param props - Configuration object containing model and context setters
+ * @returns Object containing filter state and temporal/spatial filters
+ */
+function useGeodesSearch({ model, }) {
+    const isFirstRender = useIsFirstRender();
+    const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    const { currentPageRef, setCurrentPage, registerHandlePaginationClick, registerBuildQuery, executeQuery, selectedUrl, } = useStacResultsContext();
+    // Get temporal/spatial filters and fetch functions from useStacSearch
+    const { startTime, setStartTime, endTime, setEndTime, currentBBox, useWorldBBox, setUseWorldBBox, } = useStacSearch({
+        model,
+    });
+    const [filterState, setFilterState] = useState({
+        collections: new Set(),
+        datasets: new Set(),
+        platforms: new Set(),
+        products: new Set(),
+    });
+    const filterSetters = {
+        collections: val => setFilterState(s => (Object.assign(Object.assign({}, s), { collections: new Set(val) }))),
+        datasets: val => setFilterState(s => (Object.assign(Object.assign({}, s), { datasets: new Set(val) }))),
+        platforms: val => setFilterState(s => (Object.assign(Object.assign({}, s), { platforms: new Set(val) }))),
+        products: val => setFilterState(s => (Object.assign(Object.assign({}, s), { products: new Set(val) }))),
+    };
+    // On mount, fetch filterState and times from StateDB (if present)
+    useEffect(() => {
+        async function loadStacStateFromDb() {
+            var _a, _b, _c, _d;
+            const savedFilterState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(GEODES_STAC_FILTERS_KEY)));
+            setFilterState({
+                collections: new Set((_a = savedFilterState === null || savedFilterState === void 0 ? void 0 : savedFilterState.collections) !== null && _a !== void 0 ? _a : []),
+                datasets: new Set((_b = savedFilterState === null || savedFilterState === void 0 ? void 0 : savedFilterState.datasets) !== null && _b !== void 0 ? _b : []),
+                platforms: new Set((_c = savedFilterState === null || savedFilterState === void 0 ? void 0 : savedFilterState.platforms) !== null && _c !== void 0 ? _c : []),
+                products: new Set((_d = savedFilterState === null || savedFilterState === void 0 ? void 0 : savedFilterState.products) !== null && _d !== void 0 ? _d : []),
+            });
+        }
+        loadStacStateFromDb();
+    }, [stateDb]);
+    // Save filterState to StateDB on change
+    useEffect(() => {
+        async function saveStacFilterStateToDb() {
+            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(GEODES_STAC_FILTERS_KEY, {
+                collections: Array.from(filterState.collections),
+                datasets: Array.from(filterState.datasets),
+                platforms: Array.from(filterState.platforms),
+                products: Array.from(filterState.products),
+            }));
+        }
+        saveStacFilterStateToDb();
+    }, [filterState, stateDb]);
+    /**
+     * Builds GEODES-specific query
+     * @param page - Page number for pagination (defaults to currentPageRef.current)
+     */
+    const buildGeodesQuery = useCallback((page) => {
+        const pageToUse = page !== null && page !== void 0 ? page : currentPageRef.current;
+        const processingLevel = new Set();
+        const productType = new Set();
+        filterState.products.forEach(productCode => {
+            products
+                .filter(product => product.productCode === productCode)
+                .forEach(product => {
+                if (product.processingLevel) {
+                    processingLevel.add(product.processingLevel);
+                }
+                if (product.productType) {
+                    product.productType.forEach(type => productType.add(type));
+                }
+            });
+        });
+        return {
+            bbox: currentBBox,
+            limit: 12,
+            page: pageToUse,
+            query: Object.assign(Object.assign(Object.assign(Object.assign({ latest: { eq: true }, dataset: { in: Array.from(filterState.datasets) }, end_datetime: {
+                    gte: startTime
+                        ? startTime.toISOString()
+                        : startOfYesterday().toISOString(),
+                } }, (endTime && {
+                start_datetime: { lte: endTime.toISOString() },
+            })), (filterState.platforms.size > 0 && {
+                platform: { in: Array.from(filterState.platforms) },
+            })), (processingLevel.size > 0 && {
+                'processing:level': { in: Array.from(processingLevel) },
+            })), (productType.size > 0 && {
+                'product:type': { in: Array.from(productType) },
+            })),
+            sortBy: [{ direction: 'desc', field: 'start_datetime' }],
+        };
+    }, [filterState, currentBBox, startTime, endTime, currentPageRef]);
+    // Register buildQuery with context - always use currentPageRef for latest page
+    useEffect(() => {
+        registerBuildQuery(() => buildGeodesQuery(currentPageRef.current));
+    }, [registerBuildQuery, buildGeodesQuery, currentPageRef]);
+    /**
+     * Handles form submission - builds query and fetches results
+     */
+    const handleSubmit = useCallback(async () => {
+        if (!model) {
+            return;
+        }
+        const searchUrl = selectedUrl.endsWith('/')
+            ? `${selectedUrl}search`
+            : `${selectedUrl}/search`;
+        // Build query body and execute query
+        const queryBody = buildGeodesQuery();
+        await executeQuery(queryBody, searchUrl);
+    }, [model, executeQuery, buildGeodesQuery, selectedUrl]);
+    // Handle search when filters change
+    useEffect(() => {
+        if (model && !isFirstRender && filterState.datasets.size > 0) {
+            handleSubmit();
+        }
+    }, [
+        model,
+        isFirstRender,
+        filterState,
+        startTime,
+        endTime,
+        currentBBox,
+        handleSubmit,
+    ]);
+    /**
+     * Handles pagination clicks for GEODES
+     * Updates currentPage and executes query with new page number
+     * @param dir - Direction ('next' | 'previous')
+     */
+    const handlePaginationClick = useCallback(async (dir) => {
+        if (!model) {
+            return;
+        }
+        // Calculate new page number
+        const newPage = dir === 'next'
+            ? currentPageRef.current + 1
+            : currentPageRef.current - 1;
+        // Update currentPage in context
+        setCurrentPage(newPage);
+        const searchUrl = selectedUrl.endsWith('/')
+            ? `${selectedUrl}search`
+            : `${selectedUrl}/search`;
+        // Build query body with new page and execute query
+        const queryBody = buildGeodesQuery(newPage);
+        await executeQuery(queryBody, searchUrl);
+    }, [
+        model,
+        executeQuery,
+        setCurrentPage,
+        currentPageRef,
+        buildGeodesQuery,
+        selectedUrl,
+    ]);
+    // Register handlePaginationClick with context
+    useEffect(() => {
+        registerHandlePaginationClick(handlePaginationClick);
+    }, [handlePaginationClick, registerHandlePaginationClick]);
+    return {
+        filterState,
+        filterSetters,
+        startTime,
+        setStartTime,
+        endTime,
+        setEndTime,
+        useWorldBBox,
+        setUseWorldBBox,
+        handleSubmit,
+    };
+}
+export default useGeodesSearch;

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

@@ -0,0 +1,30 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { FilterOperator, IQueryableFilter, IStacCollection, IStacQueryables } from "../types/types";
+type FilteredCollection = Pick<IStacCollection, 'id' | 'title'>;
+interface IUseStacFilterExtensionProps {
+    model?: IJupyterGISModel;
+    baseUrl: string;
+    limit?: number;
+}
+/**
+ * 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.
+ */
+export declare function useStacFilterExtension({ model, baseUrl, limit, }: IUseStacFilterExtensionProps): {
+    queryableFields: IStacQueryables | undefined;
+    collections: FilteredCollection[];
+    selectedCollection: string;
+    setSelectedCollection: import("react").Dispatch<import("react").SetStateAction<string>>;
+    handleSubmit: () => Promise<void>;
+    startTime: Date | undefined;
+    endTime: Date | undefined;
+    setStartTime: (date: Date | undefined) => void;
+    setEndTime: (date: Date | undefined) => void;
+    useWorldBBox: boolean;
+    setUseWorldBBox: (val: boolean) => void;
+    selectedQueryables: Record<string, IQueryableFilter>;
+    updateSelectedQueryables: (qKey: string, filter: IQueryableFilter | null) => void;
+    filterOperator: FilterOperator;
+    setFilterOperator: import("react").Dispatch<import("react").SetStateAction<FilterOperator>>;
+};
+export {};