@jupytergis/base 0.14.1 → 0.15.0

package/lib/stacBrowser/hooks/useStacFilterExtension.js

@@ -10,13 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { endOfToday, startOfToday } from 'date-fns';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import useIsFirstRender from "../../shared/hooks/useIsFirstRender";
 import { useStacResultsContext } from "../context/StacResultsContext";
 import { useStacSearch } from "./useStacSearch";
 import { GlobalStateDbManager } from "../../store";
 import { fetchWithProxies } from "../../tools";
 const STAC_FILTER_EXTENSION_STATE_KEY = 'jupytergis:stac-filter-extension-state';
+const STAC_COLLECTIONS_CACHE_STATE_KEY = 'jupytergis:stac-collections-cache';
+const STAC_QUERYABLES_CACHE_STATE_KEY = 'jupytergis:stac-queryables-cache';
 /**
  * Hook for searching STAC catalogs that support the Filter Extension (CQL2-JSON).
  * Fetches collections and queryables, and builds filter queries using the STAC Filter Extension.
@@ -25,7 +27,7 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
     const isFirstRender = useIsFirstRender();
     const { registerBuildQuery, executeQuery } = useStacResultsContext();
     // Get temporal/spatial filters from useStacSearch
-    const { startTime, endTime, setStartTime, setEndTime, currentBBox, useWorldBBox, setUseWorldBBox, } = useStacSearch({
+    const { startTime, endTime, setStartTime, setEndTime, currentBBox, useWorldBBox, setUseWorldBBox, hasLoadedInitialSearchState, } = useStacSearch({
         model,
     });
     const [queryableFields, setQueryableFields] = useState();
@@ -33,30 +35,132 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
     const [selectedCollection, setSelectedCollection] = useState('');
     const [selectedQueryables, setSelectedQueryables] = useState({});
     const [filterOperator, setFilterOperator] = useState('and');
+    const hasLoadedInitialFilterStateRef = useRef(false);
+    const hasLoadedInitialQueryablesRef = useRef(false);
+    /** Last auto-search request; skips duplicate consecutive fetches (React churn). */
+    const lastAutoQueryKeyRef = useRef(null);
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    const getCollectionsCacheKey = useCallback(() => `${STAC_COLLECTIONS_CACHE_STATE_KEY}:${baseUrl}`, [baseUrl]);
+    const getQueryablesCacheKey = useCallback(() => `${STAC_QUERYABLES_CACHE_STATE_KEY}:${baseUrl}:${selectedCollection}`, [baseUrl, selectedCollection]);
+    const updateSelectedQueryables = useCallback((qKey, filter) => {
+        setSelectedQueryables(prev => {
+            // If filter is null, remove the key entirely
+            if (filter === null) {
+                const _a = prev, _b = qKey, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                return rest;
+            }
+            // If inputValue is undefined but filter exists, keep it (user might be
+            // entering value). Only remove if explicitly set to null.
+            return Object.assign(Object.assign({}, prev), { [qKey]: filter });
+        });
+    }, []);
+    const handleSelectedCollectionChange = useCallback((nextSelectedCollection) => {
+        if (selectedCollection !== '' &&
+            nextSelectedCollection !== '' &&
+            selectedCollection !== nextSelectedCollection) {
+            setSelectedQueryables({});
+            setQueryableFields(undefined);
+            setFilterOperator('and');
+        }
+        setSelectedCollection(nextSelectedCollection);
+    }, [selectedCollection]);
+    const buildQuery = useCallback(() => {
+        const st = startTime
+            ? startTime.toISOString()
+            : startOfToday().toISOString();
+        const et = endTime ? endTime.toISOString() : endOfToday().toISOString();
+        // Build filter object from selectedQueryables
+        const filterConditions = Object.entries(selectedQueryables)
+            .filter(([, filter]) => filter.inputValue !== undefined)
+            .map(([property, filter]) => {
+            var _a, _b;
+            // Check if this property is a datetime type
+            const queryableField = queryableFields === null || queryableFields === void 0 ? void 0 : queryableFields.find(([key]) => key === property);
+            const isDateTime = queryableField &&
+                ((_a = queryableField[1]) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
+                ((_b = queryableField[1]) === null || _b === void 0 ? void 0 : _b.format) === 'date-time';
+            // For datetime values, wrap in timestamp object; otherwise use value directly
+            const value = isDateTime
+                ? { timestamp: filter.inputValue }
+                : filter.inputValue;
+            const condition = {
+                op: filter.operator,
+                args: [{ property }, value],
+            };
+            return condition;
+        });
+        const body = {
+            bbox: currentBBox,
+            collections: [selectedCollection],
+            datetime: `${st}/${et}`,
+            limit,
+            'filter-lang': 'cql2-json',
+        };
+        // Only add filter if there are any conditions
+        if (filterConditions.length > 0) {
+            body.filter = {
+                op: filterOperator,
+                args: filterConditions,
+            };
+        }
+        return body;
+    }, [
+        startTime,
+        endTime,
+        currentBBox,
+        selectedCollection,
+        limit,
+        selectedQueryables,
+        filterOperator,
+        queryableFields,
+    ]);
+    // Register buildQuery with context
+    useEffect(() => {
+        registerBuildQuery(() => buildQuery());
+    }, [registerBuildQuery, buildQuery, baseUrl]);
+    const handleSubmit = useCallback(async () => {
+        if (!model) {
+            return;
+        }
+        // Build query body and execute query
+        const queryBody = buildQuery();
+        const searchUrl = baseUrl.endsWith('/')
+            ? `${baseUrl}search`
+            : `${baseUrl}/search`;
+        lastAutoQueryKeyRef.current = JSON.stringify({
+            searchUrl,
+            queryBody,
+        });
+        await executeQuery(queryBody, searchUrl);
+    }, [model, buildQuery, baseUrl]);
     // On mount, load saved filter state from StateDB (if present)
     useEffect(() => {
         async function loadFilterExtensionStateFromDb() {
-            const savedFilterState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_FILTER_EXTENSION_STATE_KEY)));
-            if (savedFilterState) {
-                if (savedFilterState.selectedCollection) {
-                    setSelectedCollection(savedFilterState.selectedCollection);
-                }
-                if (savedFilterState.queryableFilters) {
-                    // Convert null back to undefined for inputValue
-                    const restoredFilters = {};
-                    Object.entries(savedFilterState.queryableFilters).forEach(([key, filter]) => {
-                        restoredFilters[key] = {
-                            operator: filter.operator,
-                            inputValue: filter.inputValue === null ? undefined : filter.inputValue,
-                        };
-                    });
-                    setSelectedQueryables(restoredFilters);
-                }
-                if (savedFilterState.filterOperator) {
-                    setFilterOperator(savedFilterState.filterOperator);
+            hasLoadedInitialFilterStateRef.current = false;
+            try {
+                const savedFilterState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_FILTER_EXTENSION_STATE_KEY)));
+                if (savedFilterState) {
+                    if (savedFilterState.selectedCollection) {
+                        handleSelectedCollectionChange(savedFilterState.selectedCollection);
+                    }
+                    if (savedFilterState.queryableFilters) {
+                        const restoredFilters = {};
+                        Object.entries(savedFilterState.queryableFilters).forEach(([key, filter]) => {
+                            restoredFilters[key] = {
+                                operator: filter.operator,
+                                inputValue: filter.inputValue === null ? undefined : filter.inputValue,
+                            };
+                        });
+                        setSelectedQueryables(restoredFilters);
+                    }
+                    if (savedFilterState.filterOperator) {
+                        setFilterOperator(savedFilterState.filterOperator);
+                    }
                 }
             }
+            finally {
+                hasLoadedInitialFilterStateRef.current = true;
+            }
         }
         loadFilterExtensionStateFromDb();
     }, [stateDb]);
@@ -84,6 +188,8 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
     }, [selectedCollection, selectedQueryables, filterOperator, stateDb]);
     // Reset all state when URL changes
     useEffect(() => {
+        lastAutoQueryKeyRef.current = null;
+        hasLoadedInitialQueryablesRef.current = false;
         setQueryableFields(undefined);
         setCollections([]);
         setSelectedCollection('');
@@ -96,14 +202,37 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
             return;
         }
         const fetchCollections = async () => {
+            var _a;
             if (!baseUrl) {
                 return;
             }
+            const cachedCollections = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(getCollectionsCacheKey())));
+            if (cachedCollections && cachedCollections.length > 0) {
+                setCollections(cachedCollections);
+                if (hasLoadedInitialQueryablesRef.current &&
+                    selectedCollection === '') {
+                    handleSelectedCollectionChange(cachedCollections[0].id);
+                }
+                return;
+            }
             const collectionsUrl = baseUrl.endsWith('/')
                 ? `${baseUrl}collections`
                 : `${baseUrl}/collections`;
-            const data = await fetchWithProxies(collectionsUrl, model, async (response) => await response.json(), undefined);
-            const collections = data.collections
+            const allCollections = [];
+            let nextUrl = collectionsUrl;
+            while (nextUrl) {
+                const page = await fetchWithProxies(nextUrl, model, async (response) => await response.json(), undefined);
+                if (!page) {
+                    break;
+                }
+                allCollections.push(...page.collections);
+                const currentPageUrl = nextUrl;
+                const nextLinkHref = (_a = page.links.find(link => link.rel === 'next')) === null || _a === void 0 ? void 0 : _a.href;
+                nextUrl = nextLinkHref
+                    ? new URL(nextLinkHref, currentPageUrl).toString()
+                    : null;
+            }
+            const collections = allCollections
                 .map((collection) => {
                 var _a;
                 return ({
@@ -118,13 +247,23 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
                 return titleA.localeCompare(titleB);
             });
             setCollections(collections);
+            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(getCollectionsCacheKey(), collections));
             // Set first collection as default if one isn't loaded
-            if (collections.length > 0 && !(selectedCollection === '')) {
-                setSelectedCollection(collections[0].id);
+            if (hasLoadedInitialQueryablesRef.current &&
+                collections.length > 0 &&
+                !(selectedCollection === '')) {
+                handleSelectedCollectionChange(collections[0].id);
             }
         };
         fetchCollections();
-    }, [model, baseUrl]);
+    }, [
+        model,
+        baseUrl,
+        stateDb,
+        selectedCollection,
+        getCollectionsCacheKey,
+        handleSelectedCollectionChange,
+    ]);
     // for queryables
     // ! TODO - support multiple collection selections
     useEffect(() => {
@@ -132,102 +271,46 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
             return;
         }
         const fetchQueryables = async () => {
-            if (!baseUrl) {
+            if (!baseUrl || selectedCollection === '') {
+                return;
+            }
+            hasLoadedInitialQueryablesRef.current = false;
+            const cachedQueryables = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(getQueryablesCacheKey())));
+            if (cachedQueryables !== undefined) {
+                setQueryableFields(Object.entries(cachedQueryables));
+                hasLoadedInitialQueryablesRef.current = true;
                 return;
             }
             const queryablesUrl = baseUrl.endsWith('/')
-                ? `${baseUrl}queryables`
-                : `${baseUrl}/queryables`;
+                ? `${baseUrl}collections/${encodeURIComponent(selectedCollection)}/queryables`
+                : `${baseUrl}/collections/${encodeURIComponent(selectedCollection)}/queryables`;
             const data = await fetchWithProxies(queryablesUrl, model, async (response) => await response.json(), undefined);
-            setQueryableFields(Object.entries(data.properties));
+            const queryableProperties = data.properties;
+            setQueryableFields(Object.entries(queryableProperties));
+            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(getQueryablesCacheKey(), queryableProperties));
+            hasLoadedInitialQueryablesRef.current = true;
         };
         fetchQueryables();
-    }, [model, baseUrl]);
-    const updateSelectedQueryables = useCallback((qKey, filter) => {
-        setSelectedQueryables(prev => {
-            // If filter is null, remove the key entirely
-            if (filter === null) {
-                const _a = prev, _b = qKey, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-                return rest;
-            }
-            // If inputValue is undefined but filter exists, keep it (user might be entering value)
-            // Only remove if explicitly set to null
-            return Object.assign(Object.assign({}, prev), { [qKey]: filter });
-        });
-    }, []);
-    const buildQuery = useCallback(() => {
-        const st = startTime
-            ? startTime.toISOString()
-            : startOfToday().toISOString();
-        const et = endTime ? endTime.toISOString() : endOfToday().toISOString();
-        // Build filter object from selectedQueryables
-        const filterConditions = Object.entries(selectedQueryables)
-            .filter(([, filter]) => filter.inputValue !== undefined)
-            .map(([property, filter]) => {
-            var _a, _b;
-            // Check if this property is a datetime type
-            const queryableField = queryableFields === null || queryableFields === void 0 ? void 0 : queryableFields.find(([key]) => key === property);
-            const isDateTime = queryableField &&
-                ((_a = queryableField[1]) === null || _a === void 0 ? void 0 : _a.type) === 'string' &&
-                ((_b = queryableField[1]) === null || _b === void 0 ? void 0 : _b.format) === 'date-time';
-            // For datetime values, wrap in timestamp object; otherwise use value directly
-            const value = isDateTime
-                ? { timestamp: filter.inputValue }
-                : filter.inputValue;
-            const condition = {
-                op: filter.operator,
-                args: [{ property }, value],
-            };
-            return condition;
-        });
-        const body = {
-            bbox: currentBBox,
-            collections: [selectedCollection],
-            datetime: `${st}/${et}`,
-            limit,
-            'filter-lang': 'cql2-json',
-        };
-        // Only add filter if there are any conditions
-        if (filterConditions.length > 0) {
-            body.filter = {
-                op: filterOperator,
-                args: filterConditions,
-            };
-        }
-        return body;
-    }, [
-        startTime,
-        endTime,
-        currentBBox,
-        selectedCollection,
-        limit,
-        selectedQueryables,
-        filterOperator,
-        queryableFields,
-    ]);
-    // Register buildQuery with context
-    useEffect(() => {
-        registerBuildQuery(() => buildQuery());
-    }, [registerBuildQuery, buildQuery, baseUrl]);
-    const handleSubmit = useCallback(async () => {
-        if (!model) {
-            return;
-        }
-        // Build query body and execute query
-        const queryBody = buildQuery();
-        const searchUrl = baseUrl.endsWith('/')
-            ? `${baseUrl}search`
-            : `${baseUrl}/search`;
-        await executeQuery(queryBody, searchUrl);
-    }, [model, executeQuery, buildQuery, baseUrl]);
+    }, [model, baseUrl, selectedCollection, stateDb, getQueryablesCacheKey]);
     // Handle search when filters change
     useEffect(() => {
-        if (model && !isFirstRender && selectedCollection !== '') {
+        const hasLoadedInitialFilterState = hasLoadedInitialFilterStateRef.current &&
+            hasLoadedInitialQueryablesRef.current;
+        if (model &&
+            !isFirstRender &&
+            selectedCollection !== '' &&
+            hasLoadedInitialFilterState &&
+            hasLoadedInitialSearchState) {
             const queryBody = buildQuery();
             const searchUrl = baseUrl.endsWith('/')
                 ? `${baseUrl}search`
                 : `${baseUrl}/search`;
-            executeQuery(queryBody, searchUrl);
+            const autoQueryKey = JSON.stringify({ searchUrl, queryBody });
+            if (lastAutoQueryKeyRef.current === autoQueryKey) {
+                return;
+            }
+            lastAutoQueryKeyRef.current = autoQueryKey;
+            void executeQuery(queryBody, searchUrl);
         }
     }, [
         model,
@@ -235,18 +318,19 @@ export function useStacFilterExtension({ model, baseUrl, limit = 12, }) {
         selectedCollection,
         selectedQueryables,
         filterOperator,
+        queryableFields,
         startTime,
         endTime,
         currentBBox,
         buildQuery,
-        executeQuery,
         baseUrl,
+        hasLoadedInitialSearchState,
     ]);
     return {
         queryableFields,
         collections,
         selectedCollection,
-        setSelectedCollection,
+        setSelectedCollection: handleSelectedCollectionChange,
         handleSubmit,
         startTime,
         endTime,

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

@@ -11,6 +11,7 @@ interface IUseStacSearchReturn {
     setCurrentBBox: (bbox: [number, number, number, number]) => void;
     useWorldBBox: boolean;
     setUseWorldBBox: (val: boolean) => void;
+    hasLoadedInitialSearchState: boolean;
 }
 /**
  * Base hook for managing STAC search - handles temporal/spatial filters

package/lib/stacBrowser/hooks/useStacSearch.js

@@ -9,22 +9,29 @@ export function useStacSearch({ model, }) {
     const [endTime, setEndTime] = useState(undefined);
     const [currentBBox, setCurrentBBox] = useState([-180, -90, 180, 90]);
     const [useWorldBBox, setUseWorldBBox] = useState(false);
+    const [hasLoadedInitialSearchState, setHasLoadedInitialSearchState] = useState(false);
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
     // Load saved state from StateDB on mount
     useEffect(() => {
         async function loadStacSearchStateFromDb() {
-            const savedState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_SEARCH_STATE_KEY)));
-            if (savedState) {
-                if (savedState.startTime) {
-                    setStartTime(new Date(savedState.startTime));
-                }
-                if (savedState.endTime) {
-                    setEndTime(new Date(savedState.endTime));
-                }
-                if (savedState.useWorldBBox !== undefined) {
-                    setUseWorldBBox(savedState.useWorldBBox);
+            setHasLoadedInitialSearchState(false);
+            try {
+                const savedState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(STAC_SEARCH_STATE_KEY)));
+                if (savedState) {
+                    if (savedState.startTime) {
+                        setStartTime(new Date(savedState.startTime));
+                    }
+                    if (savedState.endTime) {
+                        setEndTime(new Date(savedState.endTime));
+                    }
+                    if (savedState.useWorldBBox !== undefined) {
+                        setUseWorldBBox(savedState.useWorldBBox);
+                    }
                 }
             }
+            finally {
+                setHasLoadedInitialSearchState(true);
+            }
         }
         loadStacSearchStateFromDb();
     }, [stateDb]);
@@ -63,5 +70,6 @@ export function useStacSearch({ model, }) {
         setCurrentBBox,
         useWorldBBox,
         setUseWorldBBox,
+        hasLoadedInitialSearchState,
     };
 }

package/lib/tools.d.ts

@@ -27,7 +27,7 @@ export declare function getLayerTileInfo(tileUrl: string, mapOptions: Pick<IJGIS
 export interface IParsedStyle {
     fillColor: string;
     strokeColor: string;
-    strokeWidth: number;
+    strokeWidth: string;
     joinStyle: string;
     capStyle: string;
     radius?: number;

package/lib/tools.js

@@ -6,6 +6,7 @@ import { compressors } from 'hyparquet-compressors';
 import Protobuf from 'pbf';
 import shp from 'shpjs';
 import LAYER_GALLERY from "../layer_gallery.json";
+import { DEFAULT_STROKE_WIDTH } from "./dialogs/symbology/colorRampUtils";
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -219,7 +220,7 @@ export function parseColor(style) {
         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,
+        strokeWidth: String((_g = (_f = style['circle-stroke-width']) !== null && _f !== void 0 ? _f : style['stroke-width']) !== null && _g !== void 0 ? _g : DEFAULT_STROKE_WIDTH),
         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',
     };
@@ -767,8 +768,7 @@ export const getNumericFeatureAttributes = (featureProperties) => {
  */
 export const getColorCodeFeatureAttributes = (featureProperties) => {
     return getFeatureAttributes(featureProperties, (_, value) => {
-        const regex = new RegExp('^#[0-9a-f]{6}$');
-        return typeof value === 'string' && regex.test(value);
+        return typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value);
     });
 };
 export function downloadFile(content, fileName, mimeType) {

package/lib/types.d.ts

@@ -30,10 +30,16 @@ declare global {
 declare const classificationModes: readonly ["quantile", "equal interval", "jenks", "pretty", "logarithmic", "continuous"];
 export type ClassificationMode = (typeof classificationModes)[number];
 export declare const SYMBOLOGY_VALID_LAYER_TYPES: string[];
+export interface IWmsLayerInfo {
+    name: string;
+    title: string;
+}
 /** Form context passed to SchemaForm and custom fields. */
 export interface IJupyterGISFormContext<TFormData = IDict | undefined> {
     model: IJupyterGISModel;
     formData: TFormData;
+    wmsAvailableLayers?: IWmsLayerInfo[];
+    setWmsAvailableLayers?: (layers: IWmsLayerInfo[]) => void;
     formSchemaRegistry?: IJGISFormSchemaRegistry;
 }
 /** Optional form state (schema, extraErrors). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -37,6 +37,7 @@
     "clean:all": "jlpm run clean:lib",
     "watch": "tspc -w"
   },
+  "packageManager": "yarn@3.5.0",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -44,7 +45,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.14.1",
+    "@jupytergis/schema": "^0.15.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -71,6 +72,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colormap": "^2.3.2",
+    "d3-scale-chromatic": "^3.0.0",
     "date-fns": "^4.1.0",
     "gdal3.js": "^2.8.1",
     "geojson-vt": "^4.0.2",
@@ -87,6 +89,7 @@
     "proj4-list": "1.0.4",
     "radix-ui": "^1.4.3",
     "react": "^18.0.1",
+    "react-colorful": "^5.6.1",
     "react-day-picker": "^9.7.0",
     "react-markdown": "^10.1.0",
     "shpjs": "^6.1.0",

package/style/shared/tabs.css

@@ -17,7 +17,7 @@
   gap: 1rem;
   width: 100%;
   font-size: 9px;
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .jgis-tabs-list:active {
@@ -60,7 +60,7 @@
 .jgis-tabs-content {
   outline: none;
   width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   /* max-height: 480px; */
   padding-top: 1rem;
 }

package/style/storyPanel.css

@@ -159,6 +159,8 @@
   top: unset;
   box-shadow: unset;
   max-height: unset;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .jgis-specta-story-panel-container {

package/style/symbologyDialog.css

@@ -27,7 +27,8 @@ select option {
 }
 
 .jp-gis-symbology-row > .jp-select-wrapper,
-.jp-gis-symbology-row > .jp-mod-styled {
+.jp-gis-symbology-row > .jp-mod-styled,
+.jp-gis-symbology-row > .jp-gis-rgba-picker {
   flex: 1 0 50%;
   max-width: 50%;
 }
@@ -228,3 +229,46 @@ select option {
 .jp-gis-selected-entry {
   width: 100%;
 }
+
+.jp-gis-rgba-inputs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.jp-gis-rgba-field {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 2px;
+}
+
+.jp-gis-rgba-field label {
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+  line-height: 1;
+}
+
+.jp-gis-rgba-field input {
+  width: 4ch;
+  text-align: center;
+  padding: 1px 2px;
+  -moz-appearance: textfield;
+}
+
+.jp-gis-rgba-field input::-webkit-outer-spin-button,
+.jp-gis-rgba-field input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+.jp-gis-transparent-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+  font-size: var(--jp-ui-font-size1);
+  cursor: pointer;
+  user-select: none;
+}