@jupytergis/base 0.1.6 → 0.2.0

package/lib/mainview/mainviewmodel.d.ts

@@ -1,4 +1,4 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
+import { IAnnotation, IJupyterGISModel } from '@jupytergis/schema';
 import { ObservableMap } from '@jupyterlab/observables';
 import { JSONValue } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
@@ -10,6 +10,7 @@ export declare class MainViewModel implements IDisposable {
     get viewSettingChanged(): import("@lumino/signaling").ISignal<ObservableMap<JSONValue>, import("@jupyterlab/observables").IObservableMap.IChangedArgs<JSONValue>>;
     dispose(): void;
     initSignal(): void;
+    addAnnotation(value: IAnnotation): void;
     private _onsharedLayersChanged;
     private _jGISModel;
     private _viewSetting;

package/lib/mainview/mainviewmodel.js

@@ -1,3 +1,4 @@
+import { v4 as uuid } from 'uuid';
 export class MainViewModel {
     constructor(options) {
         this._isDisposed = false;
@@ -26,6 +27,10 @@ export class MainViewModel {
     initSignal() {
         this._jGISModel.sharedLayersChanged.connect(this._onsharedLayersChanged, this);
     }
+    addAnnotation(value) {
+        var _a;
+        (_a = this._jGISModel.annotationModel) === null || _a === void 0 ? void 0 : _a.addAnnotation(uuid(), value);
+    }
     async _onsharedLayersChanged(_, change) {
         if (change.layerChange) {
             // TODO STUFF with the new updated shared model

package/lib/panelview/annotationPanel.d.ts

@@ -0,0 +1,27 @@
+import { PanelWithToolbar } from '@jupyterlab/ui-components';
+import { Component } from 'react';
+import { IAnnotationModel } from '@jupytergis/schema';
+import { IControlPanelModel } from '../types';
+interface IAnnotationPanelProps {
+    annotationModel: IAnnotationModel;
+    rightPanelModel: IControlPanelModel;
+}
+export declare class AnnotationsPanel extends Component<IAnnotationPanelProps> {
+    constructor(props: IAnnotationPanelProps);
+    render(): JSX.Element;
+    private _annotationModel;
+    private _rightPanelModel;
+}
+export declare class Annotations extends PanelWithToolbar {
+    constructor(options: Annotations.IOptions);
+    private _widget;
+    private _annotationModel;
+    private _rightPanelModel;
+}
+export declare namespace Annotations {
+    interface IOptions {
+        annotationModel: IAnnotationModel;
+        rightPanelModel: IControlPanelModel;
+    }
+}
+export {};

package/lib/panelview/annotationPanel.js

@@ -0,0 +1,45 @@
+import { PanelWithToolbar, ReactWidget } from '@jupyterlab/ui-components';
+import React, { Component } from 'react';
+import Annotation from '../annotations/components/Annotation';
+export class AnnotationsPanel extends Component {
+    constructor(props) {
+        super(props);
+        const updateCallback = () => {
+            this.forceUpdate();
+        };
+        this._annotationModel = props.annotationModel;
+        this._rightPanelModel = props.rightPanelModel;
+        this._annotationModel.contextChanged.connect(async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            await ((_b = (_a = this._annotationModel) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.ready);
+            (_e = (_d = (_c = this._annotationModel) === null || _c === void 0 ? void 0 : _c.context) === null || _d === void 0 ? void 0 : _d.model) === null || _e === void 0 ? void 0 : _e.sharedMetadataChanged.disconnect(updateCallback);
+            this._annotationModel = props.annotationModel;
+            (_h = (_g = (_f = this._annotationModel) === null || _f === void 0 ? void 0 : _f.context) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.sharedMetadataChanged.connect(updateCallback);
+            this.forceUpdate();
+        });
+    }
+    render() {
+        var _a;
+        const annotationIds = (_a = this._annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotationIds();
+        if (!annotationIds || !this._annotationModel) {
+            return React.createElement("div", null);
+        }
+        const annotations = annotationIds.map((id) => {
+            return (React.createElement("div", null,
+                React.createElement(Annotation, { rightPanelModel: this._rightPanelModel, annotationModel: this._annotationModel, itemId: id }),
+                React.createElement("hr", { className: "jGIS-Annotations-Separator" })));
+        });
+        return React.createElement("div", null, annotations);
+    }
+}
+export class Annotations extends PanelWithToolbar {
+    constructor(options) {
+        super({});
+        this.title.label = 'Annotations';
+        this.addClass('jGIS-Annotations');
+        this._annotationModel = options.annotationModel;
+        this._rightPanelModel = options.rightPanelModel;
+        this._widget = ReactWidget.create(React.createElement(AnnotationsPanel, { rightPanelModel: this._rightPanelModel, annotationModel: this._annotationModel }));
+        this.addWidget(this._widget);
+    }
+}

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/store.d.ts

@@ -0,0 +1,9 @@
+import { IStateDB } from '@jupyterlab/statedb';
+export declare class GlobalStateDbManager {
+    private static instance;
+    private stateDb;
+    private constructor();
+    static getInstance(): GlobalStateDbManager;
+    initialize(stateDb: IStateDB): void;
+    getStateDb(): IStateDB | null;
+}

package/lib/store.js

@@ -0,0 +1,25 @@
+// Singleton class to manage Jupyter stateDb globally
+export class GlobalStateDbManager {
+    // Private constructor to prevent direct instantiation
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    constructor() {
+        this.stateDb = null;
+    }
+    static getInstance() {
+        if (!GlobalStateDbManager.instance) {
+            GlobalStateDbManager.instance = new GlobalStateDbManager();
+        }
+        return GlobalStateDbManager.instance;
+    }
+    initialize(stateDb) {
+        if (this.stateDb === null) {
+            this.stateDb = stateDb;
+        }
+        else {
+            console.warn('stateDb is already initialized.');
+        }
+    }
+    getStateDb() {
+        return this.stateDb;
+    }
+}

package/lib/toolbar/widget.js

@@ -55,10 +55,9 @@ export class ToolbarWidget extends ReactiveToolbar {
                 label: '',
                 commands: options.commands
             }));
-            this.addItem('separator2', new Separator());
             const NewButton = new ToolbarButton({
                 icon: addIcon,
-                actualOnClick: true,
+                noFocusOnClick: false,
                 onClick: () => {
                     if (!options.commands) {
                         return;
@@ -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/lib/types.d.ts

@@ -1,5 +1,6 @@
 import { IDict, IJupyterGISDoc, IJupyterGISModel, IJupyterGISTracker, IJupyterGISWidget } from '@jupytergis/schema';
 import { ISignal } from '@lumino/signaling';
+import { Map } from 'ol';
 export { IDict };
 export type ValueOf<T> = T[keyof T];
 export interface IControlPanelModel {
@@ -9,3 +10,16 @@ export interface IControlPanelModel {
     jGISModel: IJupyterGISModel | undefined;
     sharedModel: IJupyterGISDoc | undefined;
 }
+/**
+ * Add jupytergisMaps object to the global variables.
+ */
+declare global {
+    interface Window {
+        /**
+         * Access JupyterGIS map
+         */
+        jupytergisMaps: {
+            [name: string]: Map;
+        };
+    }
+}