@jupytergis/base 0.11.1 → 0.12.0

package/lib/shared/components/Select.js

@@ -0,0 +1,28 @@
+import { ChevronsUpDownIcon } from 'lucide-react';
+import React, { useState } from 'react';
+import { Button } from "./Button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./Command";
+import { Popover, PopoverContent, PopoverTrigger, } from "./Popover";
+import { cn } from './utils';
+export function Select({ items, buttonText, emptyText = 'No option found.', className, buttonClassName, open: controlledOpen, onOpenChange: controlledOnOpenChange, showSearch = false, searchPlaceholder = 'Search...', }) {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+    const setOpen = controlledOnOpenChange || setInternalOpen;
+    const handleSelect = (item) => {
+        setOpen(false);
+        if (item.onSelect) {
+            item.onSelect();
+        }
+    };
+    return (React.createElement(Popover, { open: open, onOpenChange: setOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: cn('jgis-combobox-button', buttonClassName) },
+                React.createElement("span", { className: "jgis-combobox-button-text" }, buttonText),
+                React.createElement(ChevronsUpDownIcon, { className: "jgis-combobox-icon" }))),
+        React.createElement(PopoverContent, { className: cn('jgis-select-popover', className) },
+            React.createElement(Command, null,
+                showSearch && React.createElement(CommandInput, { placeholder: searchPlaceholder }),
+                React.createElement(CommandList, null,
+                    React.createElement(CommandEmpty, null, emptyText),
+                    React.createElement(CommandGroup, null, items.map(item => (React.createElement(CommandItem, { key: item.value, value: item.label, onSelect: () => handleSelect(item) }, item.label)))))))));
+}

package/lib/shared/components/SingleDatePicker.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ISingleDatePickerProps {
+    date: Date | undefined;
+    onDateChange: (date: Date | undefined) => void;
+    placeholder?: string;
+    className?: string;
+    dateFormat?: string;
+    showIcon?: boolean;
+}
+declare function SingleDatePicker({ date, onDateChange, placeholder, className, dateFormat, showIcon, }: ISingleDatePickerProps): React.JSX.Element;
+export default SingleDatePicker;

package/lib/shared/components/SingleDatePicker.js

@@ -0,0 +1,16 @@
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import React from 'react';
+import { Button } from "./Button";
+import { Calendar } from "./Calendar";
+import { Popover, PopoverContent, PopoverTrigger, } from "./Popover";
+function SingleDatePicker({ date, onDateChange, placeholder = 'Select date', className, dateFormat = 'PPP', showIcon = true, }) {
+    return (React.createElement(Popover, null,
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { className: className, variant: "outline" },
+                showIcon && React.createElement(CalendarIcon, { className: "jgis-stac-datepicker-icon" }),
+                date ? format(date, dateFormat) : React.createElement("span", null, placeholder))),
+        React.createElement(PopoverContent, null,
+            React.createElement(Calendar, { mode: "single", selected: date, onSelect: onDateChange, autoFocus: true }))));
+}
+export default SingleDatePicker;

package/lib/stacBrowser/components/StacPanel.d.ts

@@ -3,5 +3,13 @@ import React from 'react';
 interface IStacViewProps {
     model?: IJupyterGISModel;
 }
-declare const StacPanel: ({ model }: IStacViewProps) => React.JSX.Element | null;
+declare const StacPanel: {
+    ({ model }: IStacViewProps): React.JSX.Element;
+    ProviderSelect: typeof ProviderSelect;
+};
+/**
+ * Provider selector component for choosing STAC providers.
+ * Uses context to manage selected provider URL.
+ */
+declare function ProviderSelect(): React.JSX.Element;
 export default StacPanel;

package/lib/stacBrowser/components/StacPanel.js

@@ -1,20 +1,64 @@
 import React from 'react';
+import { Select } from "../../shared/components/Select";
 import { Tabs, TabsContent, TabsList, TabsTrigger, } from "../../shared/components/Tabs";
-import useStacSearch from "../hooks/useStacSearch";
-import StacPanelFilters from './StacPanelFilters';
-import StacPanelResults from './StacPanelResults';
-const StacPanel = ({ model }) => {
-    const { filterState, filterSetters, results, startTime, setStartTime, endTime, setEndTime, totalPages, currentPage, totalResults, handlePaginationClick, handleResultClick, formatResult, isLoading, useWorldBBox, setUseWorldBBox, } = useStacSearch({ model });
+import StacFilterExtensionPanel from "./filter-extension/StacFilterExtensionPanel";
+import StacGeodesFilterPanel from "./geodes/StacGeodesFilterPanel";
+import StacPanelResults from "./shared/StacPanelResults";
+import { StacResultsProvider, useStacResultsContext, } from "../context/StacResultsContext";
+const GEODES_URL = 'https://geodes-portal.cnes.fr/api/stac/';
+const COPERNICUS_URL = 'https://stac.dataspace.copernicus.eu/v1/';
+const WORLDPOP_URL = 'https://api.stac.worldpop.org/';
+const PROVIDERS = [
+    { url: COPERNICUS_URL, name: 'Copernicus' },
+    { url: GEODES_URL, name: 'GEODES' },
+    { url: WORLDPOP_URL, name: 'WorldPop' },
+];
+// URL to panel component mapping for extensibility
+// Add new entries here to support additional STAC providers
+const URL_TO_PANEL_MAP = {
+    [GEODES_URL]: StacGeodesFilterPanel,
+};
+// Inner component that uses the context
+const StacPanelContent = ({ model }) => {
+    var _a;
+    const { totalResults, selectedUrl } = useStacResultsContext();
     if (!model) {
         return null;
     }
-    return (React.createElement(Tabs, { defaultValue: "filters", className: "jgis-panel-tabs" },
-        React.createElement(TabsList, { style: { borderRadius: 0 } },
+    const ProviderPanel = (_a = URL_TO_PANEL_MAP[selectedUrl]) !== null && _a !== void 0 ? _a : StacFilterExtensionPanel;
+    return (React.createElement(Tabs, { defaultValue: "filters", className: "jgis-panel-tabs", style: { boxShadow: 'none' } },
+        React.createElement(TabsList, { className: "jgis-stac-panel-tabs-list" },
             React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: "filters" }, "Filters"),
             React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: "results" }, `Results (${totalResults})`)),
         React.createElement(TabsContent, { value: "filters" },
-            React.createElement(StacPanelFilters, { filterState: filterState, filterSetters: filterSetters, startTime: startTime, setStartTime: setStartTime, endTime: endTime, setEndTime: setEndTime, useWorldBBox: useWorldBBox, setUseWorldBBox: setUseWorldBBox })),
+            React.createElement("div", { className: "jgis-stac-filter-extension-panel" },
+                React.createElement(StacPanel.ProviderSelect, null),
+                selectedUrl ? (React.createElement(ProviderPanel, { model: model })) : (React.createElement("div", { className: "jgis-stac-panel-placeholder" }, "Please select a provider above")))),
         React.createElement(TabsContent, { value: "results" },
-            React.createElement(StacPanelResults, { results: results, currentPage: currentPage, totalPages: totalPages, handlePaginationClick: handlePaginationClick, handleResultClick: handleResultClick, formatResult: formatResult, isLoading: isLoading }))));
+            React.createElement(StacPanelResults, null))));
+};
+// Outer component that provides the context
+const StacPanel = ({ model }) => {
+    return (React.createElement(StacResultsProvider, { model: model },
+        React.createElement(StacPanelContent, { model: model })));
 };
+/**
+ * Provider selector component for choosing STAC providers.
+ * Uses context to manage selected provider URL.
+ */
+function ProviderSelect() {
+    const { selectedUrl, setSelectedUrl } = useStacResultsContext();
+    const selectedProvider = PROVIDERS.find(provider => provider.url === selectedUrl);
+    const buttonText = (selectedProvider === null || selectedProvider === void 0 ? void 0 : selectedProvider.name) || 'Select a provider...';
+    const items = PROVIDERS.map(provider => ({
+        value: provider.url,
+        label: provider.name,
+        onSelect: () => setSelectedUrl(provider.url),
+    }));
+    return (React.createElement("div", { className: "jgis-stac-filter-extension-section" },
+        React.createElement("label", { className: "jgis-stac-filter-extension-label" }, "Provider"),
+        React.createElement(Select, { items: items, buttonText: buttonText, emptyText: "No provider found.", buttonClassName: "jgis-stac-filter-extension-select" })));
+}
+// Attach ProviderSelect as a composable sub-component
+StacPanel.ProviderSelect = ProviderSelect;
 export default StacPanel;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IQueryableFilter, IStacQueryables, UpdateSelectedQueryables } from "../../types/types";
+interface IQueryableComboProps {
+    queryables: IStacQueryables;
+    selectedQueryables: Record<string, IQueryableFilter>;
+    updateSelectedQueryables: UpdateSelectedQueryables;
+}
+export declare function QueryableComboBox({ queryables, selectedQueryables, updateSelectedQueryables, }: IQueryableComboProps): React.JSX.Element;
+export {};

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;