@jupytergis/base 0.4.5 → 0.6.0

package/lib/shared/components/Popover.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from './utils';
+const Popover = (_a) => {
+    var props = __rest(_a, []);
+    return React.createElement(PopoverPrimitive.Root, Object.assign({ "data-slot": "popover" }, props));
+};
+const PopoverTrigger = (_a) => {
+    var props = __rest(_a, []);
+    return React.createElement(PopoverPrimitive.Trigger, Object.assign({ "data-slot": "popover-trigger" }, props));
+};
+const PopoverContent = (_a) => {
+    var { className, align = 'center', sideOffset = 4 } = _a, props = __rest(_a, ["className", "align", "sideOffset"]);
+    return (React.createElement(PopoverPrimitive.Portal, null,
+        React.createElement(PopoverPrimitive.Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('jgis-popover-content', className) }, props))));
+};
+const PopoverAnchor = (_a) => {
+    var props = __rest(_a, []);
+    return React.createElement(PopoverPrimitive.Anchor, Object.assign({ "data-slot": "popover-anchor" }, props));
+};
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

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

@@ -0,0 +1,7 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+declare const Tabs: React.FC<React.ComponentProps<typeof TabsPrimitive.Root>>;
+declare const TabsList: React.FC<React.ComponentProps<typeof TabsPrimitive.List>>;
+declare const TabsTrigger: React.FC<React.ComponentProps<typeof TabsPrimitive.Trigger>>;
+declare const TabsContent: React.FC<React.ComponentProps<typeof TabsPrimitive.Content>>;
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/lib/shared/components/Tabs.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { cn } from './utils';
+const Tabs = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(TabsPrimitive.Root, Object.assign({ "data-slot": "tabs", className: cn('TabsList', className) }, props)));
+};
+const TabsList = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(TabsPrimitive.List, Object.assign({ "data-slot": "tabs-list", className: cn('jgis-tabs-list', className) }, props)));
+};
+const TabsTrigger = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(TabsPrimitive.Trigger, Object.assign({ "data-slot": "tabs-trigger", className: cn('jgis-tabs-trigger', className) }, props)));
+};
+const TabsContent = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(TabsPrimitive.Content, Object.assign({ "data-slot": "tabs-content", className: cn('jgis-tabs-content', className) }, props)));
+};
+export { Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,12 @@
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+export { ToggleGroup, ToggleGroupItem };

package/lib/shared/components/ToggleGroup.js

@@ -0,0 +1,52 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from './utils';
+const toggleVariants = cva('jgis-toggle', {
+    variants: {
+        variant: {
+            default: 'jgis-toggle-default',
+            outline: 'jgis-toggle-outline',
+        },
+        size: {
+            default: 'jgis-toggle-default-size',
+            sm: 'jgis-toggle-small-size',
+            lg: 'jgis-toggle-large-size',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const ToggleGroupContext = React.createContext({
+    size: 'default',
+    variant: 'default',
+});
+const ToggleGroup = React.forwardRef((_a, ref) => {
+    var { className, variant, size, children } = _a, props = __rest(_a, ["className", "variant", "size", "children"]);
+    return (React.createElement(ToggleGroupPrimitive.Root, Object.assign({ ref: ref, className: cn('jgis-toggle-group-context', className) }, props),
+        React.createElement(ToggleGroupContext.Provider, { value: { variant, size } }, children)));
+});
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+const ToggleGroupItem = React.forwardRef((_a, ref) => {
+    var { className, children, variant, size } = _a, props = __rest(_a, ["className", "children", "variant", "size"]);
+    const context = React.useContext(ToggleGroupContext);
+    return (React.createElement(ToggleGroupPrimitive.Item, Object.assign({ ref: ref, className: cn(toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+        }), className) }, props), children));
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+type FontAwesomeIconSize = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
+interface ILoadingIcon {
+    size?: FontAwesomeIconSize;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const LoadingIcon: React.FC<ILoadingIcon>;
+export declare const LoadingOverlay: React.FC<{
+    loading: boolean;
+}>;
+export {};

package/lib/shared/components/loading.js

@@ -0,0 +1,6 @@
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+export const LoadingIcon = props => (React.createElement(FontAwesomeIcon, { icon: faSpinner, spin: true, size: props.size || 'xl', style: props.style || { margin: 'auto', padding: '1rem' }, className: props.className }));
+export const LoadingOverlay = props => (React.createElement("div", { className: 'jGIS-Spinner', style: { display: props.loading ? 'flex' : 'none' } },
+    React.createElement("div", { className: 'jGIS-SpinnerContent' })));

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

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/lib/shared/components/utils.js

@@ -0,0 +1,4 @@
+import { clsx } from 'clsx';
+export function cn(...inputs) {
+    return clsx(inputs);
+}

package/lib/shared/hooks/useIsFirstRender.d.ts

@@ -0,0 +1,2 @@
+declare const useIsFirstRender: () => boolean;
+export default useIsFirstRender;

package/lib/shared/hooks/useIsFirstRender.js

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+const useIsFirstRender = () => {
+    const isFirstRenderRef = useRef(true);
+    if (isFirstRenderRef.current) {
+        isFirstRenderRef.current = false;
+        return true;
+    }
+    return isFirstRenderRef.current;
+};
+export default useIsFirstRender;

package/lib/stacBrowser/StacBrowser.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IControlPanelModel } from "../types";
+interface IStacBrowserDialogProps {
+    controlPanelModel: IControlPanelModel;
+}
+declare const StacBrowser: ({ controlPanelModel }: IStacBrowserDialogProps) => React.JSX.Element;
+export default StacBrowser;

package/lib/stacBrowser/StacBrowser.js

@@ -0,0 +1,16 @@
+import React, { useEffect, useState } from 'react';
+import StacPanelView from "./components/StacPanelView";
+const StacBrowser = ({ controlPanelModel }) => {
+    const [jgisModel, setJgisModel] = useState(controlPanelModel === null || controlPanelModel === void 0 ? void 0 : controlPanelModel.jGISModel);
+    useEffect(() => {
+        const handleCurrentChanged = (_, widget) => {
+            setJgisModel(widget === null || widget === void 0 ? void 0 : widget.model);
+        };
+        controlPanelModel.documentChanged.connect(handleCurrentChanged);
+        return () => {
+            controlPanelModel.documentChanged.disconnect(handleCurrentChanged);
+        };
+    }, [controlPanelModel]);
+    return React.createElement(StacPanelView, { model: jgisModel });
+};
+export default StacBrowser;

package/lib/stacBrowser/StacPanel.d.ts

@@ -0,0 +1,14 @@
+import { IJupyterGISTracker } from '@jupytergis/schema';
+import { Panel } from '@lumino/widgets';
+import { IControlPanelModel } from "../types";
+export declare class StacPanel extends Panel {
+    constructor(options: StacPanel.IOptions);
+    private _model;
+}
+export declare namespace StacPanel {
+    interface IOptions {
+        model: IControlPanelModel;
+        tracker: IJupyterGISTracker;
+    }
+}
+export default StacPanel;

package/lib/stacBrowser/StacPanel.js

@@ -0,0 +1,16 @@
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import React from 'react';
+import StacBrowser from "./StacBrowser";
+export class StacPanel extends Panel {
+    constructor(options) {
+        super();
+        this._model = options.model;
+        this.id = 'jupytergis::stacPanel';
+        this.title.caption = 'STAC';
+        this.title.label = 'STAC';
+        this.addClass('jgis-scrollable');
+        this.addWidget(ReactWidget.create(React.createElement(StacBrowser, { controlPanelModel: this._model })));
+    }
+}
+export default StacPanel;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DatasetsType, PlatformsType, ProductsType } from "../constants";
+type StacFilterSectionProps = {
+    section: 'Collection';
+    data: DatasetsType;
+    selectedCollections: string[];
+    selectedData: string[];
+    handleCheckedChange: (dataset: string, collection: string) => void;
+} | {
+    section: 'Platform';
+    data: PlatformsType;
+    selectedCollections: string[];
+    selectedData: string[];
+    handleCheckedChange: (platform: string, _collection: string) => void;
+} | {
+    section: 'Data / Product';
+    data: ProductsType;
+    selectedCollections: string[];
+    selectedData: string[];
+    handleCheckedChange: (product: string, collection: string) => void;
+};
+declare const StacFilterSection: ({ section, data, selectedCollections, selectedData, handleCheckedChange, }: StacFilterSectionProps) => React.JSX.Element;
+export default StacFilterSection;

package/lib/stacBrowser/components/StacFilterSection.js

@@ -0,0 +1,49 @@
+import { ChevronRight } from 'lucide-react';
+import React, { useMemo } from 'react';
+import Badge from "../../shared/components/Badge";
+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') {
+            return (React.createElement(DropdownMenuGroup, null, data.map(entry => (React.createElement(DropdownMenuSub, { key: entry.collection },
+                React.createElement(DropdownMenuSubTrigger, null, entry.collection),
+                React.createElement(DropdownMenuPortal, null,
+                    React.createElement(DropdownMenuSubContent, null, entry.datasets.map(dataset => (React.createElement(DropdownMenuCheckboxItem, { key: dataset, checked: selectedData.includes(dataset), onCheckedChange: () => {
+                            handleCheckedChange(dataset, entry.collection);
+                        }, onSelect: e => {
+                            e.preventDefault();
+                        } }, dataset))))))))));
+        }
+        if (section === 'Platform') {
+            return (React.createElement(React.Fragment, null, selectedCollections.map(collection => {
+                var _a;
+                return (React.createElement(DropdownMenuGroup, { key: collection },
+                    React.createElement(DropdownMenuLabel, null, collection), (_a = data[collection]) === null || _a === void 0 ? void 0 :
+                    _a.map(platform => (React.createElement(DropdownMenuCheckboxItem, { key: platform, checked: selectedData.includes(platform), onCheckedChange: () => {
+                            handleCheckedChange(platform, '');
+                        }, onSelect: e => {
+                            e.preventDefault();
+                        } }, platform)))));
+            })));
+        }
+        if (section === 'Data / Product') {
+            return (React.createElement(React.Fragment, null, selectedCollections.map(collection => (React.createElement(DropdownMenuGroup, { key: collection },
+                React.createElement(DropdownMenuLabel, null, collection),
+                data
+                    .filter(product => product.collections.includes(collection))
+                    .map(product => (React.createElement(DropdownMenuCheckboxItem, { key: product.productCode, checked: selectedData.includes(product.productCode), onCheckedChange: () => {
+                        handleCheckedChange(product.productCode, collection);
+                    }, onSelect: e => {
+                        e.preventDefault();
+                    } }, product.productCode))))))));
+        }
+    }, [section, data, selectedCollections, selectedData, handleCheckedChange]);
+    return (React.createElement("div", { className: "jgis-stac-filter-section-container" },
+        React.createElement(DropdownMenu, { modal: false },
+            React.createElement(DropdownMenuTrigger, { className: "jgis-stac-filter-trigger" },
+                section,
+                React.createElement(ChevronRight, { className: "DropdownMenuIcon" })),
+            React.createElement(DropdownMenuContent, { side: "right" }, items)),
+        React.createElement("div", { className: "jgis-stac-filter-section-badges" }, selectedData.map(data => (React.createElement(Badge, { key: data }, data))))));
+};
+export default StacFilterSection;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StacFilterState, StacFilterSetters } from "../types/types";
+interface IStacPanelFiltersProps {
+    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;
+}
+declare const StacPanelFilters: ({ filterState, filterSetters, startTime, setStartTime, endTime, setEndTime, useWorldBBox, setUseWorldBBox, }: IStacPanelFiltersProps) => React.JSX.Element;
+export default StacPanelFilters;

package/lib/stacBrowser/components/StacPanelFilters.js

@@ -0,0 +1,65 @@
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import React from 'react';
+import { Button } from "../../shared/components/Button";
+import { Calendar } from "../../shared/components/Calendar";
+import Checkbox from "../../shared/components/Checkbox";
+import { Popover, PopoverContent, PopoverTrigger, } from "../../shared/components/Popover";
+import StacFilterSection from "./StacFilterSection";
+import { datasets as datasetsList, platforms, products, } from "../constants";
+const StacPanelFilters = ({ filterState, filterSetters, startTime, setStartTime, endTime, setEndTime, useWorldBBox, setUseWorldBBox, }) => {
+    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);
+            }
+        }
+        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("div", { className: "jgis-stac-browser-filters-panel" },
+        React.createElement("div", null,
+            React.createElement("span", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' } },
+                React.createElement(Checkbox, { checked: useWorldBBox, onCheckedChange: setUseWorldBBox }),
+                "Use whole world as bounding box")),
+        React.createElement("div", { className: "jgis-stac-browser-date-picker" },
+            React.createElement(Popover, null,
+                React.createElement(PopoverTrigger, { asChild: true },
+                    React.createElement(Button, { style: { padding: '0 0.5rem' }, variant: 'outline' },
+                        React.createElement(CalendarIcon, { className: "jgis-stac-datepicker-icon" }),
+                        startTime ? format(startTime, 'PPP') : React.createElement("span", null, "Start Date"))),
+                React.createElement(PopoverContent, null,
+                    React.createElement(Calendar, { mode: "single", selected: startTime, onSelect: setStartTime, autoFocus: true }))),
+            React.createElement(Popover, null,
+                React.createElement(PopoverTrigger, { asChild: true },
+                    React.createElement(Button, { style: { padding: '0 0.5rem' }, variant: 'outline' },
+                        React.createElement(CalendarIcon, { className: "jgis-stac-datepicker-icon" }),
+                        endTime ? format(endTime, 'PPP') : React.createElement("span", null, "End Date"))),
+                React.createElement(PopoverContent, null,
+                    React.createElement(Calendar, { mode: "single", selected: endTime, onSelect: setEndTime, autoFocus: true })))),
+        React.createElement(StacFilterSection, { section: "Collection", data: datasetsList, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.datasets), handleCheckedChange: handleDatasetSelection }),
+        React.createElement(StacFilterSection, { section: "Platform", data: platforms, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.platforms), handleCheckedChange: platform => handleToggle('platforms', platform) }),
+        React.createElement(StacFilterSection, { section: "Data / Product", data: products, selectedCollections: Array.from(filterState.collections), selectedData: Array.from(filterState.products), handleCheckedChange: product => handleToggle('products', product) })));
+};
+export default StacPanelFilters;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IStacItem } from "../types/types";
+interface IStacPanelResultsProps {
+    results: IStacItem[];
+    currentPage: number;
+    totalPages: number;
+    handlePaginationClick: (page: number) => void;
+    handleResultClick: (id: string) => void;
+    formatResult: (item: IStacItem) => string;
+    isLoading: boolean;
+}
+declare const StacPanelResults: ({ results, currentPage, totalPages, handlePaginationClick, handleResultClick, formatResult, isLoading, }: IStacPanelResultsProps) => React.JSX.Element;
+export default StacPanelResults;

package/lib/stacBrowser/components/StacPanelResults.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button } from "../../shared/components/Button";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "../../shared/components/Pagination";
+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 = ({ results, currentPage, totalPages, handlePaginationClick, handleResultClick, formatResult, isLoading, }) => {
+    return (React.createElement("div", { className: "jgis-stac-browser-filters-panel" },
+        React.createElement(Pagination, null,
+            React.createElement(PaginationContent, { style: { marginTop: 0 } },
+                React.createElement(PaginationItem, null,
+                    React.createElement(PaginationPrevious, { onClick: () => handlePaginationClick(Math.max(1, currentPage - 1)), disabled: currentPage === 1 })),
+                totalPages <= 0 ? (React.createElement("div", null, "No Matches Found")) : (getPageItems(currentPage, totalPages).map(item => {
+                    if (item === 'ellipsis') {
+                        return (React.createElement(PaginationItem, { key: "ellipsis" },
+                            React.createElement(PaginationEllipsis, null)));
+                    }
+                    return (React.createElement(PaginationItem, { key: item },
+                        React.createElement(PaginationLink, { isActive: item === currentPage, onClick: () => handlePaginationClick(item) }, item)));
+                })),
+                React.createElement(PaginationItem, null,
+                    React.createElement(PaginationNext, { onClick: () => handlePaginationClick(Math.min(totalPages, currentPage + 1)), disabled: currentPage === totalPages })))),
+        React.createElement("div", { className: "jgis-stac-browser-results-list" }, isLoading ? (
+        // TODO: Fancy spinner
+        React.createElement("div", null, "Loading results...")) : (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/StacPanelView.d.ts

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

package/lib/stacBrowser/components/StacPanelView.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from "../../shared/components/Tabs";
+import useStacSearch from "../hooks/useStacSearch";
+import StacPanelFilters from './StacPanelFilters';
+import StacPanelResults from './StacPanelResults';
+const StacPanelView = ({ model }) => {
+    const { filterState, filterSetters, results, startTime, setStartTime, endTime, setEndTime, totalPages, currentPage, totalResults, handlePaginationClick, handleResultClick, formatResult, isLoading, useWorldBBox, setUseWorldBBox, } = useStacSearch({ model });
+    if (!model) {
+        return null;
+    }
+    return (React.createElement(Tabs, { defaultValue: "filters", className: "jgis-stac-browser-main" },
+        React.createElement(TabsList, { style: { borderRadius: 0 } },
+            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(TabsContent, { value: "results" },
+            React.createElement(StacPanelResults, { results: results, currentPage: currentPage, totalPages: totalPages, handlePaginationClick: handlePaginationClick, handleResultClick: handleResultClick, formatResult: formatResult, isLoading: isLoading }))));
+};
+export default StacPanelView;

package/lib/stacBrowser/constants.d.ts

@@ -0,0 +1,25 @@
+export declare const datasets: {
+    collection: string;
+    datasets: string[];
+}[];
+export declare const platforms: {
+    'Sentinel 1': string[];
+    'Sentinel 2': string[];
+    Venus: string[];
+    Spot: string[];
+    Landsat: string[];
+};
+export declare const products: ({
+    productCode: string;
+    productType: string[];
+    processingLevel: string;
+    collections: string[];
+} | {
+    productCode: string;
+    productType: string[];
+    collections: string[];
+    processingLevel?: undefined;
+})[];
+export type DatasetsType = typeof datasets;
+export type PlatformsType = typeof platforms;
+export type ProductsType = typeof products;