@jupytergis/base 0.1.7 → 0.2.1

package/lib/panelview/components/filter-panel/Filter.d.ts

@@ -2,15 +2,20 @@ import { IJupyterGISTracker } from '@jupytergis/schema';
 import { Panel } from '@lumino/widgets';
 import React from 'react';
 import { IControlPanelModel } from '../../../types';
-import { RightPanelWidget } from '../../rightpanel';
 /**
  * The filters panel widget.
  */
 export declare class FilterPanel extends Panel {
-    constructor(options: RightPanelWidget.IOptions);
+    constructor(options: FilterPanel.IOptions);
     private _model;
     private _tracker;
 }
+export declare namespace FilterPanel {
+    interface IOptions {
+        model: IControlPanelModel;
+        tracker: IJupyterGISTracker;
+    }
+}
 interface IFilterComponentProps {
     model: IControlPanelModel;
     tracker: IJupyterGISTracker;

package/lib/panelview/components/filter-panel/Filter.js

@@ -210,7 +210,7 @@ const FilterComponent = (props) => {
     };
     return (React.createElement(React.Fragment, null, shouldDisplay && (React.createElement("div", { className: "jp-gis-filter-main" },
         React.createElement("div", { id: "filter-container", className: "jp-gis-filter-select-container" },
-            React.createElement("select", { className: "jp-mod-styled jp-SchemaForm jp-gis-logical-select", onChange: handleLogicalOpChange },
+            React.createElement("select", { className: "jp-mod-styled rjsf jp-gis-logical-select", onChange: handleLogicalOpChange },
                 React.createElement("option", { key: "all", value: "all", selected: logicalOp === 'all' }, "All"),
                 React.createElement("option", { key: "any", value: "any", selected: logicalOp === 'any' }, "Any")),
             filterRows.map((row, index) => (React.createElement(FilterRow, { key: index, index: index, features: featuresInLayer, filterRows: filterRows, setFilterRows: setFilterRows, deleteRow: () => deleteRow(index) })))),

package/lib/panelview/components/filter-panel/FilterRow.js

@@ -51,9 +51,9 @@ const FilterRow = ({ index, features, filterRows, setFilterRows, deleteRow }) =>
         onValueChange(event.target.value);
     };
     return (React.createElement("div", { className: "jp-gis-filter-row" },
-        React.createElement("select", { id: `jp-gis-feature-select-${index}`, className: "jp-mod-styled jp-SchemaForm", onChange: handleKeyChange }, Object.keys(sortedFeatures).map((feature, featureIndex) => (React.createElement("option", { key: featureIndex, value: feature, selected: feature === filterRows[index].feature }, feature)))),
-        React.createElement("select", { id: `jp-gis-operator-select-${index}`, className: "jp-mod-styled jp-SchemaForm", onChange: handleOperatorChange }, operators.map((operator, operatorIndex) => (React.createElement("option", { key: operatorIndex, value: operator, selected: operator === filterRows[index].operator }, operator)))),
-        React.createElement("select", { id: `jp-gis-value-select-${index}`, className: "jp-mod-styled jp-SchemaForm", onChange: handleValueChange }, sortedFeatures[selectedFeature] &&
+        React.createElement("select", { id: `jp-gis-feature-select-${index}`, className: "jp-mod-styled rjsf", onChange: handleKeyChange }, Object.keys(sortedFeatures).map((feature, featureIndex) => (React.createElement("option", { key: featureIndex, value: feature, selected: feature === filterRows[index].feature }, feature)))),
+        React.createElement("select", { id: `jp-gis-operator-select-${index}`, className: "jp-mod-styled rjsf", onChange: handleOperatorChange }, operators.map((operator, operatorIndex) => (React.createElement("option", { key: operatorIndex, value: operator, selected: operator === filterRows[index].operator }, operator)))),
+        React.createElement("select", { id: `jp-gis-value-select-${index}`, className: "jp-mod-styled rjsf", onChange: handleValueChange }, sortedFeatures[selectedFeature] &&
             [...sortedFeatures[selectedFeature]].map((value, valueIndex) => (React.createElement("option", { key: valueIndex, value: value, selected: value === filterRows[index].value }, value)))),
         React.createElement(Button, { id: `jp-gis-remove-filter-${index}`, className: "jp-Button jp-gis-filter-icon" },
             React.createElement(FontAwesomeIcon, { icon: faTrash, onClick: deleteRow }))));

package/lib/panelview/components/identify-panel/IdentifyPanel.d.ts

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

package/lib/panelview/components/identify-panel/IdentifyPanel.js

@@ -0,0 +1,108 @@
+import { LabIcon, ReactWidget, caretDownIcon } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import React, { useEffect, useRef, useState } from 'react';
+export class IdentifyPanel extends Panel {
+    constructor(options) {
+        super();
+        this._model = options.model;
+        this._tracker = options.tracker;
+        this.id = 'jupytergis::identifyPanel';
+        this.title.caption = 'Identify';
+        this.title.label = 'Identify';
+        this.addWidget(ReactWidget.create(React.createElement(IdentifyPanelComponent, { controlPanelModel: this._model, tracker: this._tracker })));
+    }
+}
+const IdentifyPanelComponent = ({ controlPanelModel, tracker }) => {
+    var _a;
+    const [widgetId, setWidgetId] = useState('');
+    const [features, setFeatures] = useState();
+    const [visibleFeatures, setVisibleFeatures] = useState({
+        0: true
+    });
+    const [remoteUser, setRemoteUser] = useState(null);
+    const [jgisModel, setJgisModel] = useState(controlPanelModel === null || controlPanelModel === void 0 ? void 0 : controlPanelModel.jGISModel);
+    const featuresRef = useRef(features);
+    /**
+     * Update the model when it changes.
+     */
+    controlPanelModel === null || controlPanelModel === void 0 ? void 0 : controlPanelModel.documentChanged.connect((_, widget) => {
+        setJgisModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+    });
+    // Reset state values when current widget changes
+    useEffect(() => {
+        const handleCurrentChanged = () => {
+            var _a;
+            if (((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.id) === widgetId) {
+                return;
+            }
+            if (tracker.currentWidget) {
+                setWidgetId(tracker.currentWidget.id);
+            }
+            setFeatures({});
+            setVisibleFeatures({ 0: true });
+        };
+        tracker.currentChanged.connect(handleCurrentChanged);
+        return () => {
+            tracker.currentChanged.disconnect(handleCurrentChanged);
+        };
+    }, []);
+    useEffect(() => {
+        featuresRef.current = features;
+    }, [features]);
+    useEffect(() => {
+        const handleClientStateChanged = (sender, clients) => {
+            var _a, _b, _c, _d, _e, _f;
+            const remoteUserId = (_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
+            // If following a collaborator
+            if (remoteUserId) {
+                const remoteState = clients.get(remoteUserId);
+                if (remoteState) {
+                    if (((_b = remoteState.user) === null || _b === void 0 ? void 0 : _b.username) !== (remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.username)) {
+                        setRemoteUser(remoteState.user);
+                    }
+                    setFeatures((_d = (_c = remoteState.identifiedFeatures) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : {});
+                }
+                return;
+            }
+            // If not following a collaborator
+            const identifiedFeatures = (_f = (_e = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _e === void 0 ? void 0 : _e.identifiedFeatures) === null || _f === void 0 ? void 0 : _f.value;
+            if (!identifiedFeatures) {
+                setFeatures({});
+                return;
+            }
+            if (jgisModel.isIdentifying &&
+                featuresRef.current !== identifiedFeatures) {
+                setFeatures(identifiedFeatures);
+            }
+        };
+        jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.clientStateChanged.connect(handleClientStateChanged);
+        return () => {
+            jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
+        };
+    }, [jgisModel]);
+    const toggleFeatureVisibility = (index) => {
+        console.log('visibleFeatures', visibleFeatures);
+        setVisibleFeatures(prev => (Object.assign(Object.assign({}, prev), { [index]: !prev[index] })));
+    };
+    return (React.createElement("div", { className: "jgis-identify-wrapper", style: {
+            border: ((_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _a === void 0 ? void 0 : _a.remoteUser)
+                ? `solid 3px ${remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.color}`
+                : 'unset'
+        } }, features &&
+        Object.values(features).map((feature, featureIndex) => (React.createElement("div", { key: featureIndex, className: "jgis-identify-grid-item" },
+            React.createElement("div", { className: "jgis-identify-grid-item-header", onClick: () => toggleFeatureVisibility(featureIndex) },
+                React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `jp-gis-layerGroupCollapser${visibleFeatures[featureIndex] ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
+                React.createElement("span", null,
+                    "Feature ",
+                    featureIndex + 1,
+                    ":")),
+            visibleFeatures[featureIndex] && (React.createElement(React.Fragment, null, Object.entries(feature)
+                .filter(([key, value]) => typeof value !== 'object' || value === null)
+                .map(([key, value]) => (React.createElement("div", { key: key, className: "jgis-identify-grid-body" },
+                React.createElement("strong", null,
+                    key,
+                    ":"),
+                typeof value === 'string' &&
+                    /<\/?[a-z][\s\S]*>/i.test(value) ? (React.createElement("span", { dangerouslySetInnerHTML: { __html: `${value}` } })) : (React.createElement("span", null, String(value)))))))))))));
+};
+export default IdentifyPanel;

package/lib/panelview/components/layers.js

@@ -133,7 +133,7 @@ function LayerGroupComponent(props) {
         const getExpandedState = async () => {
             var _a;
             const groupState = await state.fetch(`jupytergis:${group.name}`);
-            setOpen((_a = groupState.expanded) !== null && _a !== void 0 ? _a : false);
+            setOpen((_a = groupState === null || groupState === void 0 ? void 0 : groupState.expanded) !== null && _a !== void 0 ? _a : false);
         };
         getExpandedState();
     }, []);
@@ -160,8 +160,8 @@ function LayerGroupComponent(props) {
         setOpen(!open);
     };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_GROUP_CLASS}`, draggable: true, onDragStart: Private.onDragStart, onDragEnd: Private.onDragEnd, "data-id": name },
-        React.createElement("div", { onClick: handleExpand, onContextMenu: handleRightClick, className: `${LAYER_GROUP_HEADER_CLASS} ${selected ? ' jp-mod-selected' : ''}`, onDragOver: Private.onDragOver, "data-id": name },
-            React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: LAYER_GROUP_COLLAPSER_CLASS + (open ? ' jp-mod-expanded' : ''), tag: 'span' }),
+        React.createElement("div", { onClick: handleExpand, onContextMenu: handleRightClick, className: `${LAYER_GROUP_HEADER_CLASS}${selected ? ' jp-mod-selected' : ''}`, onDragOver: Private.onDragOver, "data-id": name },
+            React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `${LAYER_GROUP_COLLAPSER_CLASS}${open ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
             React.createElement("span", { id: id, className: LAYER_TEXT_CLASS }, name)),
         open && (React.createElement("div", null, layers
             .slice()
@@ -222,7 +222,7 @@ function LayerComponent(props) {
             icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
             React.createElement("span", { id: id, className: LAYER_TEXT_CLASS }, name)),
         React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
-            React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: LAYER_ICON_CLASS, tag: "span" }))));
+            React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" }))));
 }
 var Private;
 (function (Private) {

package/lib/panelview/leftpanel.js

@@ -2,6 +2,7 @@ import { SidePanel } from '@jupyterlab/ui-components';
 import { LayersPanel } from './components/layers';
 import { SourcesPanel } from './components/sources';
 import { ControlPanelHeader } from './header';
+import { FilterPanel } from './components/filter-panel/Filter';
 export class LeftPanelWidget extends SidePanel {
     constructor(options) {
         super();
@@ -71,6 +72,13 @@ export class LeftPanelWidget extends SidePanel {
         layerTree.title.caption = 'Layer tree';
         layerTree.title.label = 'Layers';
         this.addWidget(layerTree);
+        const filterPanel = new FilterPanel({
+            model: this._model,
+            tracker: options.tracker
+        });
+        filterPanel.title.caption = 'Filters';
+        filterPanel.title.label = 'Filters';
+        this.addWidget(filterPanel);
         options.tracker.currentChanged.connect((_, changed) => {
             if (changed) {
                 header.title.label = changed.context.localPath;

package/lib/panelview/rightpanel.d.ts

@@ -1,16 +1,19 @@
-import { IJGISFormSchemaRegistry, IJupyterGISTracker, JupyterGISDoc } from '@jupytergis/schema';
+import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISTracker, JupyterGISDoc } from '@jupytergis/schema';
 import { SidePanel } from '@jupyterlab/ui-components';
 import { IControlPanelModel } from '../types';
 export declare class RightPanelWidget extends SidePanel {
     constructor(options: RightPanelWidget.IOptions);
     dispose(): void;
+    private _currentContext;
     private _model;
+    private _annotationModel;
 }
 export declare namespace RightPanelWidget {
     interface IOptions {
         model: IControlPanelModel;
         tracker: IJupyterGISTracker;
         formSchemaRegistry: IJGISFormSchemaRegistry;
+        annotationModel: IAnnotationModel;
     }
     interface IProps {
         filePath?: string;

package/lib/panelview/rightpanel.js

@@ -1,12 +1,14 @@
 import { SidePanel } from '@jupyterlab/ui-components';
-import { FilterPanel } from './components/filter-panel/Filter';
 import { ControlPanelHeader } from './header';
 import { ObjectProperties } from './objectproperties';
+import { Annotations } from './annotationPanel';
+import IdentifyPanel from './components/identify-panel/IdentifyPanel';
 export class RightPanelWidget extends SidePanel {
     constructor(options) {
         super();
         this.addClass('jGIS-sidepanel-widget');
         this._model = options.model;
+        this._annotationModel = options.annotationModel;
         const header = new ControlPanelHeader();
         this.header.addWidget(header);
         const properties = new ObjectProperties({
@@ -15,14 +17,18 @@ export class RightPanelWidget extends SidePanel {
             tracker: options.tracker
         });
         this.addWidget(properties);
-        const filterPanel = new FilterPanel({
+        const annotations = new Annotations({
+            rightPanelModel: this._model,
+            annotationModel: this._annotationModel
+        });
+        this.addWidget(annotations);
+        const identifyPanel = new IdentifyPanel({
             model: this._model,
-            tracker: options.tracker,
-            formSchemaRegistry: options.formSchemaRegistry
+            tracker: options.tracker
         });
-        filterPanel.title.caption = 'Filters';
-        filterPanel.title.label = 'Filters';
-        this.addWidget(filterPanel);
+        identifyPanel.title.caption = 'Identify';
+        identifyPanel.title.label = 'Identify';
+        this.addWidget(identifyPanel);
         this._model.documentChanged.connect((_, changed) => {
             if (changed) {
                 if (changed.context.model.sharedModel.editable) {
@@ -38,6 +44,21 @@ export class RightPanelWidget extends SidePanel {
                 header.title.label = '-';
             }
         });
+        options.tracker.currentChanged.connect(async (_, changed) => {
+            var _a;
+            if (changed) {
+                this._currentContext = changed.context;
+                header.title.label = this._currentContext.localPath;
+                this._annotationModel.context =
+                    ((_a = options.tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context) || undefined;
+                await changed.context.ready;
+            }
+            else {
+                header.title.label = '-';
+                this._currentContext = null;
+                this._annotationModel.context = undefined;
+            }
+        });
     }
     dispose() {
         super.dispose();

package/lib/toolbar/widget.js

@@ -55,7 +55,6 @@ export class ToolbarWidget extends ReactiveToolbar {
                 label: '',
                 commands: options.commands
             }));
-            this.addItem('separator2', new Separator());
             const NewButton = new ToolbarButton({
                 icon: addIcon,
                 noFocusOnClick: false,
@@ -96,6 +95,17 @@ export class ToolbarWidget extends ReactiveToolbar {
                 }
             });
             this.addItem('New', NewButton);
+            this.addItem('separator2', new Separator());
+            this.addItem('identify', new CommandToolbarButton({
+                id: CommandIDs.identify,
+                label: '',
+                commands: options.commands
+            }));
+            options.commands.addKeyBinding({
+                command: CommandIDs.identify,
+                keys: ['Escape'],
+                selector: '#main'
+            });
             this.addItem('spacer', ReactiveToolbar.createSpacerItem());
             // Users
             this.addItem('users', ReactWidget.create(React.createElement(UsersItem, { model: options.model })));

package/lib/tools.d.ts

@@ -32,3 +32,38 @@ export interface IParsedStyle {
     radius?: number;
 }
 export declare function parseColor(type: string, style: any): IParsedStyle | undefined;
+/**
+ * Open or create an IndexedDB database for caching GeoTIFF files.
+ *
+ * @returns A promise that resolves to the opened IndexedDB database instance.
+ */
+export declare const openDatabase: () => Promise<IDBDatabase>;
+/**
+ * Save a file and its metadata to the IndexedDB database.
+ *
+ * @param key file ID (sourceUrl).
+ * @param file Blob object representing the file content.
+ * @param metadata metadata of file.
+ * @returns A promise that resolves once the data is successfully saved.
+ */
+export declare const saveToIndexedDB: (key: string, file: Blob, metadata: any) => Promise<void>;
+/**
+ * Retrieve a file and its metadata from the IndexedDB database.
+ *
+ * @param key fileID (sourceUrl).
+ * @returns A promise that resolves to the stored data object or undefined.
+ */
+export declare const getFromIndexedDB: (key: string) => Promise<any>;
+/**
+ * Load a GeoTIFF file from IndexedDB database cache or fetch it .
+ *
+ * @param sourceInfo object containing the URL of the GeoTIFF file.
+ * @returns A promise that resolves to the file as a Blob, or undefined .
+ */
+export declare const loadGeoTIFFWithCache: (sourceInfo: {
+    url?: string | undefined;
+}) => Promise<{
+    file: Blob;
+    metadata: any;
+    sourceUrl: string;
+} | null>;

package/lib/tools.js

@@ -4,6 +4,7 @@ import { URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
 import * as d3Color from 'd3-color';
 import RASTER_LAYER_GALLERY from '../rasterlayer_gallery/raster_layer_gallery.json';
+import { getGdal } from './gdal';
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -251,3 +252,88 @@ export function parseColor(type, style) {
     });
     return parsedStyle;
 }
+/**
+ * Open or create an IndexedDB database for caching GeoTIFF files.
+ *
+ * @returns A promise that resolves to the opened IndexedDB database instance.
+ */
+export const openDatabase = () => {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open('GeoTIFFCache', 1);
+        request.onupgradeneeded = event => {
+            const db = request.result;
+            if (!db.objectStoreNames.contains('files')) {
+                db.createObjectStore('files', { keyPath: 'url' });
+            }
+        };
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+};
+/**
+ * Save a file and its metadata to the IndexedDB database.
+ *
+ * @param key file ID (sourceUrl).
+ * @param file Blob object representing the file content.
+ * @param metadata metadata of file.
+ * @returns A promise that resolves once the data is successfully saved.
+ */
+export const saveToIndexedDB = async (key, file, metadata) => {
+    const db = await openDatabase();
+    return new Promise((resolve, reject) => {
+        const transaction = db.transaction('files', 'readwrite');
+        const store = transaction.objectStore('files');
+        store.put({ url: key, file, metadata });
+        transaction.oncomplete = () => resolve();
+        transaction.onerror = () => reject(transaction.error);
+    });
+};
+/**
+ * Retrieve a file and its metadata from the IndexedDB database.
+ *
+ * @param key fileID (sourceUrl).
+ * @returns A promise that resolves to the stored data object or undefined.
+ */
+export const getFromIndexedDB = async (key) => {
+    const db = await openDatabase();
+    return new Promise((resolve, reject) => {
+        const transaction = db.transaction('files', 'readonly');
+        const store = transaction.objectStore('files');
+        const request = store.get(key);
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+};
+/**
+ * Load a GeoTIFF file from IndexedDB database cache or fetch it .
+ *
+ * @param sourceInfo object containing the URL of the GeoTIFF file.
+ * @returns A promise that resolves to the file as a Blob, or undefined .
+ */
+export const loadGeoTIFFWithCache = async (sourceInfo) => {
+    if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
+        return null;
+    }
+    const cachedData = await getFromIndexedDB(sourceInfo.url);
+    if (cachedData) {
+        return {
+            file: new Blob([cachedData.file]),
+            metadata: cachedData.metadata,
+            sourceUrl: sourceInfo.url
+        };
+    }
+    const response = await fetch(sourceInfo.url);
+    const fileBlob = await response.blob();
+    const file = new File([fileBlob], 'loaded.tif');
+    const Gdal = await getGdal();
+    const result = await Gdal.open(file);
+    const tifDataset = result.datasets[0];
+    const metadata = await Gdal.gdalinfo(tifDataset, ['-stats']);
+    Gdal.close(tifDataset);
+    await saveToIndexedDB(sourceInfo.url, fileBlob, metadata);
+    return {
+        file: fileBlob,
+        metadata,
+        sourceUrl: sourceInfo.url
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -38,9 +38,8 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@deathbeds/jupyterlab-rjsf": "^1.1.0",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.1.7",
+    "@jupytergis/schema": "^0.2.1",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -52,7 +51,7 @@
     "@jupyterlab/observables": "^5.3.0",
     "@jupyterlab/services": "^7.3.0",
     "@jupyterlab/translation": "^4.3.0",
-    "@jupyterlab/ui-components": "^4.3.0",
+    "@jupyterlab/ui-components": "^4.3.1",
     "@lumino/commands": "^2.0.0",
     "@lumino/coreutils": "^2.0.0",
     "@lumino/messaging": "^2.0.0",
@@ -61,12 +60,12 @@
     "@mapbox/vector-tile": "^2.0.3",
     "@naisutech/react-tree": "^3.0.1",
     "@rjsf/core": "^4.2.0",
+    "@rjsf/validator-ajv8": "^5.23.1",
     "@types/d3-color": "^3.1.0",
     "@types/three": "^0.134.0",
     "ajv": "^8.14.0",
     "d3-color": "^3.1.0",
     "gdal3.js": "^2.8.1",
-    "geojson-schema": "^1.0.5",
     "ol-pmtiles": "^0.5.0",
     "pbf": "^4.0.1",
     "react": "^18.0.1",
@@ -74,7 +73,7 @@
     "styled-components": "^5.3.6",
     "three": "^0.135.0",
     "three-mesh-bvh": "^0.5.17",
-    "uuid": "^8.3.2"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",

package/style/base.css

@@ -21,27 +21,23 @@
   gap: 1rem;
 }
 
-.jGIS-property-panel .jp-SchemaForm .array-item:not(:last-child) {
+.jGIS-property-panel .rjsf .array-item:not(:last-child) {
   border-bottom: none;
   margin-bottom: unset;
   padding-bottom: unset;
 }
 
-.jGIS-property-panel .jp-SchemaForm .array-item {
+.jGIS-property-panel .rjsf .array-item {
   flex: 1 0 0%;
   align-items: center;
 }
 
-.jGIS-property-panel .jp-SchemaForm .field-description {
-  display: none;
-}
-
-.jGIS-property-panel .jp-SchemaForm fieldset fieldset {
+.jGIS-property-panel .rjsf fieldset fieldset {
   padding-left: unset;
   border-left: none;
 }
 
-.jGIS-property-panel .jp-SchemaForm .array-item-list:has(.field-array) {
+.jGIS-property-panel .rjsf .array-item-list:has(.field-array) {
   flex-direction: column;
 }
 

package/style/dialog.css

@@ -3,6 +3,6 @@
 | Distributed under the terms of the Modified BSD License.
 |---------------------------------------------------------------------------- */
 
-.jp-SchemaForm .jp-select-wrapper select {
+.jGIS-property-panel .rjsf .jp-select-wrapper select {
   background-image: unset;
 }