@jupytergis/base 0.5.0 → 0.6.0

package/lib/toolbar/widget.js

@@ -1,11 +1,11 @@
+import { UsersItem } from '@jupyter/collaboration';
 import { CommandToolbarButton } from '@jupyterlab/apputils';
-import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, undoIcon } from '@jupyterlab/ui-components';
+import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, undoIcon, } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 import * as React from 'react';
-import { CommandIDs } from '../constants';
-import { terminalToolbarIcon } from '../icons';
-import { rasterSubMenu, vectorSubMenu } from '../menus';
-import { UsersItem } from './usertoolbaritem';
+import { CommandIDs } from "../constants";
+import { terminalToolbarIcon } from "../icons";
+import { rasterSubMenu, vectorSubMenu } from "../menus";
 export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
 export const TOOLBAR_GROUPNAME_CLASS = 'jGIS-Toolbar-GroupName';
 export class Separator extends Widget {
@@ -26,7 +26,7 @@ export class ToolbarWidget extends ReactiveToolbar {
                 id: CommandIDs.undo,
                 label: '',
                 icon: undoIcon,
-                commands: options.commands
+                commands: options.commands,
             });
             this.addItem('undo', undoButton);
             undoButton.node.dataset.testid = 'undo-button';
@@ -34,7 +34,7 @@ export class ToolbarWidget extends ReactiveToolbar {
                 id: CommandIDs.redo,
                 label: '',
                 icon: redoIcon,
-                commands: options.commands
+                commands: options.commands,
             });
             this.addItem('redo', redoButton);
             this.addItem('separator0', new Separator());
@@ -42,7 +42,7 @@ export class ToolbarWidget extends ReactiveToolbar {
                 id: CommandIDs.toggleConsole,
                 commands: options.commands,
                 label: '',
-                icon: terminalToolbarIcon
+                icon: terminalToolbarIcon,
             });
             this.addItem('Toggle console', toggleConsoleButton);
             toggleConsoleButton.node.dataset.testid = 'toggle-console-button';
@@ -50,7 +50,7 @@ export class ToolbarWidget extends ReactiveToolbar {
             const openLayersBrowserButton = new CommandToolbarButton({
                 id: CommandIDs.openLayerBrowser,
                 label: '',
-                commands: options.commands
+                commands: options.commands,
             });
             this.addItem('openLayerBrowser', openLayersBrowserButton);
             openLayersBrowserButton.node.dataset.testid = 'open-layers-browser';
@@ -58,11 +58,11 @@ export class ToolbarWidget extends ReactiveToolbar {
             NewSubMenu.title.label = 'Add Layer';
             NewSubMenu.addItem({
                 type: 'submenu',
-                submenu: rasterSubMenu(options.commands)
+                submenu: rasterSubMenu(options.commands),
             });
             NewSubMenu.addItem({
                 type: 'submenu',
-                submenu: vectorSubMenu(options.commands)
+                submenu: vectorSubMenu(options.commands),
             });
             const NewEntryButton = new ToolbarButton({
                 icon: addIcon,
@@ -73,7 +73,7 @@ export class ToolbarWidget extends ReactiveToolbar {
                     }
                     const bbox = NewEntryButton.node.getBoundingClientRect();
                     NewSubMenu.open(bbox.x, bbox.bottom);
-                }
+                },
             });
             NewEntryButton.node.dataset.testid = 'new-entry-button';
             this.addItem('New', NewEntryButton);
@@ -81,21 +81,21 @@ export class ToolbarWidget extends ReactiveToolbar {
             const geolocationButton = new CommandToolbarButton({
                 id: CommandIDs.getGeolocation,
                 commands: options.commands,
-                label: ''
+                label: '',
             });
             this.addItem('Geolocation', geolocationButton);
             geolocationButton.node.dataset.testid = 'geolocation-button';
             const identifyButton = new CommandToolbarButton({
                 id: CommandIDs.identify,
                 label: '',
-                commands: options.commands
+                commands: options.commands,
             });
             this.addItem('identify', identifyButton);
             identifyButton.node.dataset.testid = 'identify-button';
             const temporalControllerButton = new CommandToolbarButton({
                 id: CommandIDs.temporalController,
                 label: '',
-                commands: options.commands
+                commands: options.commands,
             });
             this.addItem('temporalController', temporalControllerButton);
             temporalControllerButton.node.dataset.testid =

package/lib/tools.d.ts

@@ -1,6 +1,6 @@
-import { VectorTile } from '@mapbox/vector-tile';
-import { Contents } from '@jupyterlab/services';
 import { IDict, IJGISLayerBrowserRegistry, IJGISOptions, IJGISSource, IJupyterGISModel } from '@jupytergis/schema';
+import { Contents } from '@jupyterlab/services';
+import { VectorTile } from '@mapbox/vector-tile';
 export declare const debounce: (func: CallableFunction, timeout?: number) => CallableFunction;
 export declare function throttle<T extends (...args: any[]) => void>(callback: T, delay?: number): T;
 export declare function getElementFromProperty(filePath?: string | null, prop?: string | null): HTMLElement | undefined | null;
@@ -31,7 +31,7 @@ export interface IParsedStyle {
     capStyle: string;
     radius?: number;
 }
-export declare function parseColor(type: string, style: any): IParsedStyle | undefined;
+export declare function parseColor(style: any): IParsedStyle | undefined;
 /**
  * Open or create an IndexedDB database for caching GeoTIFF files.
  *
@@ -57,6 +57,9 @@ export declare const getFromIndexedDB: (key: string) => Promise<{
     file: any;
     metadata?: any | undefined;
 } | undefined>;
+export declare const isJupyterLite: () => boolean;
+type ProxyStrategy = 'direct' | 'internal' | 'external';
+export declare const fetchWithProxies: <T>(url: string, model: IJupyterGISModel, parseResponse: (response: Response) => Promise<T>, options?: RequestInit, strategy?: ProxyStrategy) => Promise<T | null>;
 /**
  * Load a GeoTIFF file from IndexedDB database cache or fetch it .
  *
@@ -69,7 +72,7 @@ export declare const loadGeoTiff: (sourceInfo: {
     file: any;
     metadata: any;
     sourceUrl: string;
-} | null>;
+} | null | undefined>;
 /**
  * Generalized file reader for different source types.
  *
@@ -109,6 +112,28 @@ export declare const getMimeType: (filename: string) => string;
  * @returns An ArrayBuffer.
  */
 export declare const stringToArrayBuffer: (content: string) => Promise<ArrayBuffer>;
+/**
+ * Get attributes of the feature which are numeric.
+ *
+ * @param featureProperties - Attributes of a feature.
+ * @returns - Attributes which are numeric.
+ */
 export declare const getNumericFeatureAttributes: (featureProperties: Record<string, Set<any>>) => Record<string, Set<number>>;
+/**
+ * Get attributes of the feature which look like hex color codes.
+ *
+ * @param featureProperties - Attributes of a feature.
+ * @returns - Attributes which look like hex color codes.
+ */
+export declare const getColorCodeFeatureAttributes: (featureProperties: Record<string, Set<any>>) => Record<string, Set<string>>;
 export declare function downloadFile(content: BlobPart, fileName: string, mimeType: string): void;
 export declare function getGeoJSONDataFromLayerSource(source: IJGISSource, model: IJupyterGISModel): Promise<string | null>;
+/**
+ * `Object.entries`, but strongly-typed.
+ *
+ * `Object.entries` return value is always typed as `[string, any]` for type
+ * safety reasons, which means we need to use type assertions to have typed
+ * code when using it.
+ */
+export declare const objectEntries: <T extends Record<PropertyKey, unknown>>(obj: T) => Array<{ [K in keyof T]: [K, T[K]]; }[keyof T]>;
+export {};

package/lib/tools.js

@@ -1,12 +1,11 @@
-import Protobuf from 'pbf';
-import { VectorTile } from '@mapbox/vector-tile';
+import { showErrorMessage } from '@jupyterlab/apputils';
 import { PathExt, URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
-import { showErrorMessage } from '@jupyterlab/apputils';
+import { VectorTile } from '@mapbox/vector-tile';
 import * as d3Color from 'd3-color';
+import Protobuf from 'pbf';
 import shp from 'shpjs';
-import { getGdal } from './gdal';
-import RASTER_LAYER_GALLERY from '../rasterlayer_gallery/raster_layer_gallery.json';
+import RASTER_LAYER_GALLERY from "../rasterlayer_gallery/raster_layer_gallery.json";
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -161,8 +160,8 @@ export function createDefaultLayerRegistry(layerBrowserRegistry) {
                 maxZoom: xyzprovider['max_zoom'] || 24,
                 attribution: xyzprovider['attribution'] || '',
                 provider: provider !== null && provider !== void 0 ? provider : entry,
-                urlParameters
-            }
+                urlParameters,
+            },
         };
     }
 }
@@ -215,38 +214,19 @@ export async function getLayerTileInfo(tileUrl, mapOptions, urlParameters) {
     const tile = new VectorTile(new Protobuf(arrayBuffer));
     return tile;
 }
-export function parseColor(type, style) {
+export function parseColor(style) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    if (!type || !style) {
+    if (!style) {
         return;
     }
-    const type2 = type === 'circle' ? 'circle' : 'default';
-    const shapeStyles = {
-        circle: {
-            radius: (_a = style['circle-radius']) !== null && _a !== void 0 ? _a : 5,
-            fillColor: (_b = style['circle-fill-color']) !== null && _b !== void 0 ? _b : '#3399CC',
-            strokeColor: (_c = style['circle-stroke-color']) !== null && _c !== void 0 ? _c : '#3399CC',
-            strokeWidth: (_d = style['circle-stroke-width']) !== null && _d !== void 0 ? _d : 1.25,
-            joinStyle: (_e = style['circle-stroke-line-join']) !== null && _e !== void 0 ? _e : 'round',
-            capStyle: (_f = style['circle-stroke-line-cap']) !== null && _f !== void 0 ? _f : 'round'
-        },
-        default: {
-            fillColor: (_g = style['fill-color']) !== null && _g !== void 0 ? _g : '[255, 255, 255, 0.4]',
-            strokeColor: (_h = style['stroke-color']) !== null && _h !== void 0 ? _h : '#3399CC',
-            strokeWidth: (_j = style['stroke-width']) !== null && _j !== void 0 ? _j : 1.25,
-            capStyle: (_k = style['stroke-line-cap']) !== null && _k !== void 0 ? _k : 'round',
-            joinStyle: (_l = style['stroke-line-join']) !== null && _l !== void 0 ? _l : 'round'
-        }
+    const parsedStyle = {
+        radius: (_a = style['circle-radius']) !== null && _a !== void 0 ? _a : 5,
+        fillColor: (_c = (_b = style['circle-fill-color']) !== null && _b !== void 0 ? _b : style['fill-color']) !== null && _c !== void 0 ? _c : '#3399CC',
+        strokeColor: (_e = (_d = style['circle-stroke-color']) !== null && _d !== void 0 ? _d : style['stroke-color']) !== null && _e !== void 0 ? _e : '#3399CC',
+        strokeWidth: (_g = (_f = style['circle-stroke-width']) !== null && _f !== void 0 ? _f : style['stroke-width']) !== null && _g !== void 0 ? _g : 1.25,
+        joinStyle: (_j = (_h = style['circle-stroke-line-join']) !== null && _h !== void 0 ? _h : style['stroke-line-join']) !== null && _j !== void 0 ? _j : 'round',
+        capStyle: (_l = (_k = style['circle-stroke-line-cap']) !== null && _k !== void 0 ? _k : style['stroke-line-cap']) !== null && _l !== void 0 ? _l : 'round',
     };
-    const parsedStyle = shapeStyles[type2];
-    Object.assign(parsedStyle, {
-        radius: parsedStyle.radius,
-        fillColor: parsedStyle.fillColor,
-        strokeColor: parsedStyle.strokeColor,
-        strokeWidth: parsedStyle.strokeWidth,
-        joinStyle: parsedStyle.joinStyle,
-        capStyle: parsedStyle.capStyle
-    });
     return parsedStyle;
 }
 /**
@@ -301,23 +281,31 @@ export const getFromIndexedDB = async (key) => {
         request.onerror = () => reject(request.error);
     });
 };
-const fetchWithProxies = async (url, model, parseResponse) => {
+export const isJupyterLite = () => {
+    return document.querySelectorAll('[data-jupyter-lite-root]')[0] !== undefined;
+};
+export const fetchWithProxies = async (url, model, parseResponse, options, strategy) => {
     let settings = null;
-    try {
-        settings = await model.getSettings();
-    }
-    catch (e) {
-        console.warn('Failed to get settings from model. Falling back.', e);
+    if (model) {
+        try {
+            settings = model.getSettings();
+        }
+        catch (e) {
+            console.warn('Failed to get settings from model. Falling back.', e);
+        }
     }
     const proxyUrl = settings && settings.proxyUrl ? settings.proxyUrl : 'https://corsproxy.io';
-    const proxyUrls = [
-        url, // Direct fetch
-        `/jupytergis_core/proxy?url=${encodeURIComponent(url)}`, // Internal proxy
-        `${proxyUrl}/?url=${encodeURIComponent(url)}` // External proxy
-    ];
-    for (const proxyUrl of proxyUrls) {
+    const strategies = {
+        direct: url => url,
+        internal: url => `/jupytergis_core/proxy?url=${encodeURIComponent(url)}`,
+        external: url => `${proxyUrl}/?url=${encodeURIComponent(url)}`,
+    };
+    const defaultOrder = ['direct', 'internal', 'external'];
+    const strategyOrder = strategy ? [strategy] : defaultOrder;
+    for (const strat of strategyOrder) {
+        const proxyUrl = strategies[strat](url);
         try {
-            const response = await fetch(proxyUrl);
+            const response = await fetch(proxyUrl, options);
             if (!response.ok) {
                 console.warn(`Failed to fetch from ${proxyUrl}: ${response.statusText}`);
                 continue;
@@ -350,7 +338,7 @@ export const loadGeoTiff = async (sourceInfo, model, file) => {
         return {
             file: cachedData.file,
             metadata: cachedData.metadata,
-            sourceUrl: url
+            sourceUrl: url,
         };
     }
     let fileBlob = null;
@@ -364,18 +352,6 @@ export const loadGeoTiff = async (sourceInfo, model, file) => {
     else {
         fileBlob = await base64ToBlob(file.content, mimeType);
     }
-    const geotiff = new File([fileBlob], 'loaded.tif');
-    const Gdal = await getGdal();
-    const result = await Gdal.open(geotiff);
-    const tifDataset = result.datasets[0];
-    const metadata = await Gdal.gdalinfo(tifDataset, ['-stats']);
-    Gdal.close(tifDataset);
-    await saveToIndexedDB(url, fileBlob, metadata);
-    return {
-        file: fileBlob,
-        metadata,
-        sourceUrl: url
-    };
 };
 /**
  * Generalized file reader for different source types.
@@ -446,7 +422,7 @@ export const loadFile = async (fileInfo) => {
     const absolutePath = PathExt.resolve(PathExt.dirname(model.filePath), filepath);
     try {
         const file = await model.contentsManager.get(absolutePath, {
-            content: true
+            content: true,
         });
         if (!file.content) {
             throw new Error(`File at ${absolutePath} is empty or inaccessible.`);
@@ -668,7 +644,7 @@ export const MIME_TYPES = {
     '.xul': 'text/xul',
     '.xwd': 'image/x-xwindowdump',
     '.zip': 'application/zip',
-    '.ipynb': 'application/json'
+    '.ipynb': 'application/json',
 };
 /**
  * Determine the MIME type based on the file extension.
@@ -695,19 +671,40 @@ export const stringToArrayBuffer = async (content) => {
     const base64Response = await fetch(`data:application/octet-stream;base64,${content}`);
     return await base64Response.arrayBuffer();
 };
-export const getNumericFeatureAttributes = (featureProperties) => {
-    // We only want number values here
+const getFeatureAttributes = (featureProperties, predicate = (key, value) => true) => {
     const filteredRecord = {};
     for (const [key, set] of Object.entries(featureProperties)) {
         const firstValue = set.values().next().value;
-        // Check if the first value is a string that cannot be parsed as a number
-        const isInvalidString = typeof firstValue === 'string' && isNaN(Number(firstValue));
-        if (!isInvalidString) {
+        const isValid = predicate(key, firstValue);
+        if (isValid) {
             filteredRecord[key] = set;
         }
     }
     return filteredRecord;
 };
+/**
+ * Get attributes of the feature which are numeric.
+ *
+ * @param featureProperties - Attributes of a feature.
+ * @returns - Attributes which are numeric.
+ */
+export const getNumericFeatureAttributes = (featureProperties) => {
+    return getFeatureAttributes(featureProperties, (_, value) => {
+        return !(typeof value === 'string' && isNaN(Number(value)));
+    });
+};
+/**
+ * Get attributes of the feature which look like hex color codes.
+ *
+ * @param featureProperties - Attributes of a feature.
+ * @returns - Attributes which look like hex color codes.
+ */
+export const getColorCodeFeatureAttributes = (featureProperties) => {
+    return getFeatureAttributes(featureProperties, (_, value) => {
+        const regex = new RegExp('^#[0-9a-f]{6}$');
+        return typeof value === 'string' && regex.test(value);
+    });
+};
 export function downloadFile(content, fileName, mimeType) {
     const blob = new Blob([content], { type: mimeType });
     const url = URL.createObjectURL(blob);
@@ -732,7 +729,7 @@ export async function getGeoJSONDataFromLayerSource(source, model) {
         const fileContent = await loadFile({
             filepath: source.parameters.path,
             type: source.type,
-            model
+            model,
         });
         return typeof fileContent === 'object'
             ? JSON.stringify(fileContent)
@@ -744,3 +741,11 @@ export async function getGeoJSONDataFromLayerSource(source, model) {
     console.error("Source is missing both 'path' and 'data' parameters.");
     return null;
 }
+/**
+ * `Object.entries`, but strongly-typed.
+ *
+ * `Object.entries` return value is always typed as `[string, any]` for type
+ * safety reasons, which means we need to use type assertions to have typed
+ * code when using it.
+ */
+export const objectEntries = Object.entries;

package/lib/types.d.ts

@@ -12,6 +12,8 @@ export interface IControlPanelModel {
     jGISModel: IJupyterGISModel | undefined;
     sharedModel: IJupyterGISDoc | undefined;
 }
+export type SymbologyTab = 'color' | 'radius';
+export type VectorRenderType = 'Single Symbol' | 'Canonical' | 'Graduated' | 'Categorized' | 'Heatmap';
 /**
  * Add jupytergisMaps object to the global variables.
  */

package/lib/widget.d.ts

@@ -3,10 +3,10 @@ import { MainAreaWidget } from '@jupyterlab/apputils';
 import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
+import { CommandRegistry } from '@lumino/commands';
 import { JSONValue } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { SplitPanel } from '@lumino/widgets';
-import { CommandRegistry } from '@lumino/commands';
 import { ConsoleView } from './console';
 import { JupyterGISMainViewPanel } from './mainview';
 import { MainViewModel } from './mainview/mainviewmodel';

package/lib/widget.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { MainAreaWidget } from '@jupyterlab/apputils';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { ObservableMap } from '@jupyterlab/observables';
+import { MessageLoop } from '@lumino/messaging';
 import { Signal } from '@lumino/signaling';
 import { SplitPanel, Widget } from '@lumino/widgets';
-import { MessageLoop } from '@lumino/messaging';
 import { ConsoleView } from './console';
 import { JupyterGISMainViewPanel } from './mainview';
 import { MainViewModel } from './mainview/mainviewmodel';
@@ -79,12 +79,12 @@ export class JupyterGISPanel extends SplitPanel {
         this._mainViewModel = new MainViewModel({
             jGISModel: options.model,
             viewSetting: this._view,
-            commands: options.commandRegistry
+            commands: options.commandRegistry,
         });
     }
     _initView() {
         this._jupyterGISMainViewPanel = new JupyterGISMainViewPanel({
-            mainViewModel: this._mainViewModel
+            mainViewModel: this._mainViewModel,
         });
         this.addWidget(this._jupyterGISMainViewPanel);
         SplitPanel.setStretch(this._jupyterGISMainViewPanel, 1);
@@ -136,7 +136,7 @@ export class JupyterGISPanel extends SplitPanel {
     }
     async toggleConsole(jgisPath) {
         if (!this._consoleView) {
-            const { contentFactory, manager, mimeTypeService, rendermime, commandRegistry } = this._consoleOption;
+            const { contentFactory, manager, mimeTypeService, rendermime, commandRegistry, } = this._consoleOption;
             if (contentFactory &&
                 manager &&
                 mimeTypeService &&
@@ -148,7 +148,7 @@ export class JupyterGISPanel extends SplitPanel {
                     manager,
                     mimeTypeService,
                     rendermime,
-                    commandRegistry
+                    commandRegistry,
                 });
                 const { consolePanel } = this._consoleView;
                 this._consoleTracker.widgetAdded.emit(consolePanel);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -27,23 +27,24 @@
     "url": "https://github.com/geojupyter/jupytergis.git"
   },
   "scripts": {
-    "build": "tsc -b && jlpm run cp:gdal",
+    "build": "tspc -b && jlpm run cp:gdal",
     "build:gallery": "python rasterlayer_gallery_generator.py",
     "cp:gdal": "cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.data lib && cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.wasm lib",
     "build:prod": "jlpm run clean && jlpm run build",
-    "build:dev": "tsc -b && jlpm run cp:gdal",
+    "build:dev": "tspc -b && jlpm run cp:gdal",
     "clean": "rimraf tsconfig.tsbuildinfo",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:all": "jlpm run clean:lib",
-    "watch": "tsc -w"
+    "watch": "tspc -w"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "latest",
+    "@jupyter/collaboration": "^3.1.0",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.5.0",
+    "@jupytergis/schema": "^0.6.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -63,22 +64,33 @@
     "@lumino/widgets": "^2.0.0",
     "@mapbox/vector-tile": "^2.0.3",
     "@naisutech/react-tree": "^3.0.1",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",
     "@rjsf/validator-ajv8": "^5.23.1",
     "ajv": "^8.14.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "colormap": "^2.3.2",
     "d3-color": "^3.1.0",
     "date-fns": "^4.1.0",
     "gdal3.js": "^2.8.1",
     "geojson-vt": "^4.0.2",
     "geotiff": "^2.1.3",
+    "lucide-react": "^0.513.0",
     "ol": "^10.1.0",
     "ol-pmtiles": "^0.5.0",
+    "ol-stac": "^1.0.0-rc.10",
     "pbf": "^4.0.1",
     "pmtiles": "^3.0.7",
-    "proj4": "^2.14.0",
+    "proj4": "^2.19.3",
     "proj4-list": "^1.0.4",
     "react": "^18.0.1",
+    "react-day-picker": "^9.7.0",
     "shpjs": "^6.1.0",
     "styled-components": "^5.3.6",
     "three": "^0.135.0",
@@ -90,11 +102,13 @@
     "@types/colormap": "^2.3.4",
     "@types/d3-color": "^3.1.0",
     "@types/node": "^18.15.11",
-    "@types/proj4": "^2.5.5",
+    "@types/proj4": "^2.5.6",
     "@types/shpjs": "^3.4.7",
     "@types/uuid": "^10.0.0",
     "rimraf": "^3.0.2",
-    "typescript": "^5"
+    "ts-patch": "^3.3.0",
+    "typescript": "^5",
+    "typescript-transform-paths": "^3.5.5"
   },
   "sideEffects": [
     "style/*.css",

package/style/base.css

@@ -10,7 +10,21 @@
 @import url('./symbologyDialog.css');
 @import url('./statusBar.css');
 @import url('./temporalSlider.css');
+@import url('./stacBrowser.css');
 @import url('ol/ol.css');
+@import url('./shared/button.css');
+@import url('./shared/toggle.css');
+@import url('./shared/tabs.css');
+@import url('./shared/pagination.css');
+@import url('./shared/calendar.css');
+@import url('./shared/dropdownMenu.css');
+@import url('./shared/badge.css');
+@import url('./shared/checkbox.css');
+
+.errors {
+  color: var(--jp-warn-color0);
+  font-weight: bold;
+}
 
 .jGIS-Toolbar-GroupName {
   font-size: var(--jp-ui-font-size0);
@@ -59,3 +73,15 @@ button.jp-mod-styled.jp-mod-accept {
 button.jp-mod-styled.jp-mod-reject {
   background-color: var(--jp-layout-color4) !important;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/style/layerBrowser.css

@@ -126,6 +126,16 @@
   font-weight: bold;
 }
 
+.jGIS-layer-browser-category.jGIS-layer-browser-category[data-state='active']::after {
+  width: 100%;
+  background-color: var(--jp-inverse-layout-color2);
+}
+
+.jGIS-layer-browser-category.jGIS-layer-browser-category[data-state='active'] {
+  opacity: 1;
+  font-weight: bold;
+}
+
 .jGIS-layer-browser-tile {
   display: flex;
   flex-direction: column;

package/style/shared/badge.css

@@ -0,0 +1,61 @@
+.jgis-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  padding: 2px 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  outline: none;
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-brand-color0);
+  width: max-content;
+  word-break: break-word;
+  max-width: 200px;
+  text-align: center;
+}
+
+.jgis-badge:hover {
+  background-color: color-mix(in srgb, var(--jp-brand-color0) 80%, transparent);
+}
+
+.jgis-badge[data-variant='secondary'] {
+  border: 1px solid transparent;
+  background-color: var(--jp-brand-color1);
+  color: var(--jp-ui-inverse-font-color1);
+  transition: background-color 0.3s ease;
+}
+
+.jgis-badge[data-variant='secondary']:focus {
+  border-width: 2px;
+  border-color: var(--jp-border-color0);
+  box-shadow: 0 0 0 3px var(--jp-border-color0);
+}
+
+.jgis-badge[data-variant='destructive'] {
+  border: 1px solid transparent;
+  background-color: color-mix(in srgb, var(--jp-error-color1) 90%, transparent);
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+.jgis-badge[data-variant='destructive']:hover {
+  background-color: color-mix(in srgb, var(--jp-error-color1) 80%, transparent);
+}
+
+.jgis-badge[data-variant='destructive']:focus {
+  background-color: var(--jp-error-color1);
+}
+
+.jgis-badge[data-variant='outline'] {
+  color: var(--jp-ui-font-color1);
+  background-color: transparent;
+  border: 1px solid color-mix(in srgb, var(--jp-border-color1) 80%, transparent);
+}
+
+.jgis-badge[data-variant='outline']:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--jp-ui-font-color1) 10%,
+    transparent
+  );
+}