@jupytergis/base 0.10.1 → 0.12.0

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

@@ -0,0 +1,179 @@
+import React, { useMemo } 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 SingleDatePicker from '../../../shared/components/SingleDatePicker';
+export function QueryableComboBox({ queryables, selectedQueryables, updateSelectedQueryables, }) {
+    // Derive selected items from selectedQueryables
+    const selectedItems = useMemo(() => {
+        return queryables.filter(([key]) => key in selectedQueryables);
+    }, [queryables, selectedQueryables]);
+    const handleSelect = (key, val) => {
+        var _a;
+        const isCurrentlySelected = key in selectedQueryables;
+        if (isCurrentlySelected) {
+            // Remove if already selected - pass null to explicitly remove
+            updateSelectedQueryables(key, null);
+        }
+        else {
+            // Add if not selected - initialize with default filter
+            const operators = getOperatorsForType(val.type, val.format);
+            let initialInputValue = undefined;
+            // For enum types, set the first option since the UI looks like there's a selection
+            if (val.enum && val.enum.length > 0) {
+                initialInputValue =
+                    typeof val.enum[0] === 'number' ? val.enum[0] : val.enum[0];
+            }
+            else if (val.type === 'string' && val.format === 'date-time') {
+                // For datetime types, set to current UTC time
+                initialInputValue = new Date().toISOString();
+            }
+            updateSelectedQueryables(key, {
+                operator: ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || '=',
+                inputValue: initialInputValue,
+            });
+        }
+    };
+    const getOperatorsForType = (type, format) => {
+        if (format === 'date-time') {
+            return [
+                { value: '<', label: '<' },
+                { value: '<=', label: '≤' },
+                { value: '>', label: '>' },
+                { value: '>=', label: '≥' },
+            ];
+        }
+        switch (type) {
+            case 'string':
+                return [
+                    { value: '=', label: '=' },
+                    { value: '!=', label: '≠' },
+                ];
+            case 'number':
+            case 'integer':
+                return [
+                    { value: '=', label: '=' },
+                    { value: '!=', label: '≠' },
+                    { value: '<', label: '<' },
+                    { value: '<=', label: '≤' },
+                    { value: '>', label: '>' },
+                    { value: '>=', label: '≥' },
+                ];
+            default:
+                return [
+                    { value: '=', label: '=' },
+                    { value: '!=', label: '≠' },
+                ];
+        }
+    };
+    const getInputBasedOnType = (val, currentValue, onChange) => {
+        switch (val.type) {
+            case 'string':
+                if (val.enum) {
+                    const selectedOption = val.enum.find(opt => String(opt) === String(currentValue));
+                    const buttonText = selectedOption
+                        ? String(selectedOption)
+                        : 'Select option...';
+                    return (React.createElement(Select, { items: val.enum.map(option => ({
+                            value: String(option),
+                            label: String(option),
+                            onSelect: () => onChange(String(option)),
+                        })), buttonText: buttonText, emptyText: "No option found.", buttonClassName: "jgis-queryable-combo-input" }));
+                }
+                if (val.format === 'date-time') {
+                    // Convert UTC ISO string to Date object for SingleDatePicker
+                    const parseDate = (isoString) => {
+                        if (!isoString) {
+                            return undefined;
+                        }
+                        try {
+                            return new Date(isoString);
+                        }
+                        catch (_a) {
+                            return undefined;
+                        }
+                    };
+                    // Convert Date object back to ISO string for storage
+                    const handleDateChange = (date) => {
+                        if (date) {
+                            onChange(date.toISOString());
+                        }
+                        else {
+                            onChange('');
+                        }
+                    };
+                    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) }));
+            case 'number':
+            case 'integer':
+                if (val.enum) {
+                    const selectedOption = val.enum.find(opt => Number(opt) === Number(currentValue));
+                    const buttonText = selectedOption
+                        ? String(selectedOption)
+                        : 'Select option...';
+                    return (React.createElement(Select, { items: val.enum.map(option => ({
+                            value: String(option),
+                            label: String(option),
+                            onSelect: () => onChange(Number(option)),
+                        })), buttonText: buttonText, emptyText: "No option found.", buttonClassName: "jgis-queryable-combo-input" }));
+                }
+                return (React.createElement(Input, { type: "number", className: "jgis-queryable-combo-input", min: val.minimum !== undefined ? val.minimum : undefined, max: val.maximum !== undefined ? val.maximum : undefined, value: currentValue || '', onChange: e => onChange(Number(e.target.value)) }));
+            default:
+                return (React.createElement(Input, { type: "text", className: "jgis-queryable-combo-input", value: currentValue || '', onChange: e => onChange(e.target.value) }));
+        }
+    };
+    const getButtonText = () => {
+        if (selectedItems.length === 0) {
+            return 'Select queryable...';
+        }
+        if (selectedItems.length === 1) {
+            return selectedItems[0][1].title || selectedItems[0][0] || 'Queryable';
+        }
+        return `${selectedItems.length} selected`;
+    };
+    const isSelected = (key) => {
+        return key in selectedQueryables;
+    };
+    const items = queryables.map(([key, val]) => ({
+        value: key,
+        label: val.title || key,
+        selected: isSelected(key),
+        showCheckIcon: true,
+        onSelect: () => handleSelect(key, val),
+    }));
+    return (React.createElement("div", { className: "jgis-queryable-combo-container" },
+        React.createElement(Combobox, { items: items, buttonText: getButtonText(), searchPlaceholder: "Search queryable...", emptyText: "No queryable found.", buttonClassName: "jgis-queryable-combo-button jgis-combobox-button--full-width" }),
+        React.createElement("div", { className: "jgis-queryable-rows-container" }, selectedItems.map(([key, val]) => {
+            var _a, _b;
+            const operators = getOperatorsForType(val.type, val.format);
+            const currentFilter = (_a = selectedQueryables[key]) !== null && _a !== void 0 ? _a : {
+                operator: ((_b = operators[0]) === null || _b === void 0 ? void 0 : _b.value) || '=',
+                inputValue: undefined,
+            };
+            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 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 }));
+        }))));
+}

package/lib/stacBrowser/components/filter-extension/QueryableRow.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IQueryableFilter, IStacQueryableSchema, Operator } from "../../types/types";
+interface IOperatorOption {
+    value: Operator;
+    label: string | React.ReactNode;
+}
+interface IQueryableRowProps {
+    qKey: string;
+    qVal: IStacQueryableSchema;
+    operators: IOperatorOption[];
+    currentFilter: IQueryableFilter;
+    inputComponent: React.ReactNode;
+    onOperatorChange: (operator: Operator) => void;
+}
+declare function QueryableRow({ qKey, qVal, operators, currentFilter, inputComponent, onOperatorChange, }: IQueryableRowProps): React.JSX.Element;
+export default QueryableRow;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Select } from "../../../shared/components/Select";
+function QueryableRow({ qKey, qVal, operators, currentFilter, inputComponent, onOperatorChange, }) {
+    const currentOperator = operators.find(op => op.value === currentFilter.operator);
+    const buttonText = (currentOperator === null || currentOperator === void 0 ? void 0 : currentOperator.label) || 'Select operator...';
+    const items = operators.map(operator => ({
+        value: String(operator.value),
+        label: String(operator.label),
+        onSelect: () => onOperatorChange(operator.value),
+    }));
+    return (React.createElement("div", { className: "jgis-queryable-row" },
+        React.createElement("span", null, qVal.title || qKey),
+        React.createElement(Select, { items: items, buttonText: String(buttonText), emptyText: "No operator found.", buttonClassName: "jgis-queryable-combo-operator" }),
+        inputComponent));
+}
+export default QueryableRow;

package/lib/stacBrowser/components/filter-extension/StacFilterExtensionPanel.d.ts

@@ -0,0 +1,7 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStacFilterExtensionPanelProps {
+    model?: IJupyterGISModel;
+}
+declare function StacFilterExtensionPanel({ model }: IStacFilterExtensionPanelProps): React.JSX.Element | undefined;
+export default StacFilterExtensionPanel;

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

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Input } from "../../../shared/components/Input";
+import { Select } from "../../../shared/components/Select";
+import StacQueryableFilters from "./StacQueryableFilters";
+import StacSpatialExtent from "../shared/StacSpatialExtent";
+import StacTemporalExtent from "../shared/StacTemporalExtent";
+import { useStacResultsContext } from "../../context/StacResultsContext";
+import { useStacFilterExtension } from "../../hooks/useStacFilterExtension";
+function StacFilterExtensionPanel({ model }) {
+    var _a;
+    const { selectedUrl } = useStacResultsContext();
+    const [limit, setLimit] = useState(12);
+    const { queryableFields, collections, selectedCollection, setSelectedCollection, startTime, endTime, setStartTime, setEndTime, useWorldBBox, setUseWorldBBox, selectedQueryables, updateSelectedQueryables, filterOperator, setFilterOperator, } = useStacFilterExtension({
+        model,
+        baseUrl: selectedUrl,
+        limit,
+    });
+    if (!model) {
+        console.warn('JupyterGIS model not found');
+        return;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement(StacTemporalExtent, { startTime: startTime, endTime: endTime, setStartTime: setStartTime, setEndTime: setEndTime })),
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement(StacSpatialExtent, { checked: useWorldBBox, onCheckedChange: setUseWorldBBox, label: "Use entire world" })),
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement("label", { className: "jgis-stac-filter-extension-label" }, "Collection"),
+            React.createElement(Select, { items: collections.map((option) => ({
+                    value: option.id,
+                    label: option.title || option.id,
+                    onSelect: () => setSelectedCollection(option.id),
+                })), buttonText: selectedCollection
+                    ? ((_a = collections.find(c => c.id === selectedCollection)) === null || _a === void 0 ? void 0 : _a.title) ||
+                        'Select a collection...'
+                    : 'Select a collection...', emptyText: "No collection found.", buttonClassName: "jgis-stac-filter-extension-select", showSearch: true, searchPlaceholder: "Search collections..." })),
+        queryableFields && (React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement("label", { className: "jgis-stac-filter-extension-label" }, "Additional Filters"),
+            React.createElement(StacQueryableFilters, { queryableFields: queryableFields, selectedQueryables: selectedQueryables, updateSelectedQueryables: updateSelectedQueryables, filterOperator: filterOperator, setFilterOperator: setFilterOperator }))),
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement("label", { className: "jgis-stac-filter-extension-label" }, "Items per page"),
+            React.createElement(Input, { type: "number", min: "1", max: "1000", value: limit, onChange: e => {
+                    const value = parseInt(e.target.value, 10);
+                    if (!isNaN(value) && value > 0) {
+                        setLimit(value);
+                    }
+                }, className: "jgis-stac-filter-extension-input" }))));
+}
+export default StacFilterExtensionPanel;

package/lib/stacBrowser/components/filter-extension/StacQueryableFilters.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FilterOperator, IQueryableFilter, IStacQueryables, UpdateSelectedQueryables } from "../../types/types";
+interface IStacQueryableFilterListProps {
+    queryableFields: IStacQueryables;
+    selectedQueryables: Record<string, IQueryableFilter>;
+    updateSelectedQueryables: UpdateSelectedQueryables;
+    filterOperator: FilterOperator;
+    setFilterOperator: (operator: FilterOperator) => void;
+}
+declare const StacQueryableFilters: React.FC<IStacQueryableFilterListProps>;
+export default StacQueryableFilters;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { RadioGroup, RadioGroupItem } from "../../../shared/components/RadioGroup";
+import { QueryableComboBox } from "./QueryableComboBox";
+const StacQueryableFilters = ({ queryableFields, selectedQueryables, updateSelectedQueryables, filterOperator, setFilterOperator, }) => {
+    return (React.createElement("div", { className: "jgis-stac-queryable-filters" },
+        React.createElement(RadioGroup, { className: "jgis-stac-queryable-filters-radio-group", value: filterOperator, onValueChange: (value) => {
+                if (value === 'and' || value === 'or') {
+                    setFilterOperator(value);
+                }
+            } },
+            React.createElement("div", { className: "jgis-stac-queryable-filters-radio-item" },
+                React.createElement(RadioGroupItem, { value: "and", id: "filter-operator-and" }),
+                React.createElement("label", { htmlFor: "filter-operator-and" }, "Match all filters (and)")),
+            React.createElement("div", { className: "jgis-stac-queryable-filters-radio-item" },
+                React.createElement(RadioGroupItem, { value: "or", id: "filter-operator-or" }),
+                React.createElement("label", { htmlFor: "filter-operator-or" }, "Match any filters (or)"))),
+        React.createElement(QueryableComboBox, { queryables: queryableFields, selectedQueryables: selectedQueryables, updateSelectedQueryables: updateSelectedQueryables })));
+};
+export default StacQueryableFilters;

package/lib/stacBrowser/components/{StacFilterSection.d.ts → geodes/StacFilterSection.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DatasetsType, PlatformsType, ProductsType } from "../constants";
+import { DatasetsType, PlatformsType, ProductsType } from "../../constants";
 type StacFilterSectionProps = {
     section: 'Collection';
     data: DatasetsType;

package/lib/stacBrowser/components/{StacFilterSection.js → geodes/StacFilterSection.js}

@@ -2,9 +2,9 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ChevronRight } from 'lucide-react';
 import React, { useMemo } from 'react';
-import Badge from "../../shared/components/Badge";
-import { Button } from "../../shared/components/Button";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "../../shared/components/DropdownMenu";
+import Badge from "../../../shared/components/Badge";
+import { Button } from "../../../shared/components/Button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "../../../shared/components/DropdownMenu";
 const StacFilterSection = ({ section, data, selectedCollections, selectedData, handleCheckedChange, }) => {
     const items = useMemo(() => {
         if (section === 'Collection') {

package/lib/stacBrowser/components/geodes/StacGeodesFilterPanel.d.ts

@@ -0,0 +1,7 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStacGeodesFilterPanelProps {
+    model?: IJupyterGISModel;
+}
+declare const StacGeodesFilterPanel: ({ model }: IStacGeodesFilterPanelProps) => React.JSX.Element;
+export default StacGeodesFilterPanel;

package/lib/stacBrowser/components/geodes/StacGeodesFilterPanel.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import StacFilterSection from "./StacFilterSection";
+import StacSpatialExtent from "../shared/StacSpatialExtent";
+import StacTemporalExtent from "../shared/StacTemporalExtent";
+import { datasets as datasetsList, platforms as platformsList, products as productsList, } from "../../constants";
+import useGeodesSearch from "../../hooks/useGeodesSearch";
+const StacGeodesFilterPanel = ({ model }) => {
+    const { filterState, filterSetters, startTime, setStartTime, endTime, setEndTime, useWorldBBox, setUseWorldBBox, } = useGeodesSearch({
+        model,
+    });
+    const handleDatasetSelection = (dataset, collection) => {
+        const collections = new Set(filterState.collections);
+        const datasets = new Set(filterState.datasets);
+        if (datasets.has(dataset)) {
+            datasets.delete(dataset);
+            // Remove the collection if no datasets remain for it
+            const datasetsForCollection = Array.from(datasets).filter(d => {
+                return datasetsList.some(entry => entry.collection === collection && entry.datasets.includes(d));
+            });
+            if (datasetsForCollection.length === 0) {
+                collections.delete(collection);
+                const platforms = new Set(filterState.platforms);
+                const products = new Set(filterState.products);
+                // Remove platforms belonging to this collection
+                if (platformsList[collection]) {
+                    platformsList[collection].forEach(platform => {
+                        platforms.delete(platform);
+                    });
+                }
+                // Remove products belonging to this collection
+                productsList
+                    .filter(product => product.collections.includes(collection))
+                    .forEach(product => {
+                    products.delete(product.productCode);
+                });
+                filterSetters.platforms(platforms);
+                filterSetters.products(products);
+            }
+        }
+        else {
+            datasets.add(dataset);
+            collections.add(collection);
+        }
+        filterSetters.collections(collections);
+        filterSetters.datasets(datasets);
+    };
+    const handleToggle = (key, value) => {
+        const updated = new Set(filterState[key]);
+        if (updated.has(value)) {
+            updated.delete(value);
+        }
+        else {
+            updated.add(value);
+        }
+        filterSetters[key](updated);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement(StacSpatialExtent, { checked: useWorldBBox, onCheckedChange: setUseWorldBBox, label: "Use whole world as bounding box" })),
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement(StacTemporalExtent, { startTime: startTime, setStartTime: setStartTime, endTime: endTime, setEndTime: setEndTime })),
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement(StacFilterSection, { section: "Collection", data: datasetsList, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.datasets), handleCheckedChange: handleDatasetSelection })),
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement(StacFilterSection, { section: "Platform", data: platformsList, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.platforms), handleCheckedChange: platform => handleToggle('platforms', platform) })),
+        React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+            React.createElement(StacFilterSection, { section: "Data / Product", data: productsList, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.products), handleCheckedChange: product => handleToggle('products', product) }))));
+};
+export default StacGeodesFilterPanel;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const StacPanelResults: () => React.JSX.Element;
+export default StacPanelResults;

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 {};