@jupytergis/base 0.1.7 → 0.2.1

package/lib/mainview/mainView.js

@@ -1,9 +1,9 @@
 import { JupyterGISModel } from '@jupytergis/schema';
 import { UUID } from '@lumino/coreutils';
-import { Collection, Map as OlMap, View } from 'ol';
+import { Collection, Map as OlMap, View, getUid } from 'ol';
 import { ScaleLine } from 'ol/control';
 import { GeoJSON, MVT } from 'ol/format';
-import DragAndDrop from 'ol/interaction/DragAndDrop';
+import { DragAndDrop, Select } from 'ol/interaction';
 import { Image as ImageLayer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer } from 'ol/layer';
 import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, toLonLat } from 'ol/proj';
@@ -17,13 +17,47 @@ import { get as getProjection } from 'ol/proj.js';
 import proj4 from 'proj4';
 import * as React from 'react';
 import shp from 'shpjs';
-import { isLightTheme } from '../tools';
+import { isLightTheme, loadGeoTIFFWithCache, throttle } from '../tools';
 import { Spinner } from './spinner';
 //@ts-expect-error no types for proj4-list
 import proj4list from 'proj4-list';
+import { ContextMenu } from '@lumino/widgets';
+import { CommandRegistry } from '@lumino/commands';
+import AnnotationFloater from '../annotations/components/AnnotationFloater';
+import { CommandIDs } from '../constants';
+import { FollowIndicator } from './FollowIndicator';
+import CollaboratorPointers from './CollaboratorPointers';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { singleClick } from 'ol/events/condition';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
+        this.addContextMenu = () => {
+            this._commands.addCommand(CommandIDs.addAnnotation, {
+                execute: () => {
+                    var _a;
+                    if (!this._Map) {
+                        return;
+                    }
+                    this._mainViewModel.addAnnotation({
+                        position: { x: this._clickCoords[0], y: this._clickCoords[1] },
+                        zoom: (_a = this._Map.getView().getZoom()) !== null && _a !== void 0 ? _a : 0,
+                        label: 'New annotation',
+                        contents: [],
+                        parent: this._Map.getViewport().id
+                    });
+                },
+                label: 'Add annotation',
+                isEnabled: () => {
+                    return !!this._Map;
+                }
+            });
+            this._contextMenu.addItem({
+                command: CommandIDs.addAnnotation,
+                selector: '.ol-viewport',
+                rank: 1
+            });
+        };
         this.vectorLayerStyleRuleBuilder = (layer) => {
             const layerParams = layer.parameters;
             if (!layerParams) {
@@ -121,7 +155,71 @@ export class MainView extends React.Component {
             return scaled;
         };
         this._onClientSharedStateChanged = (sender, clients) => {
-            // TODO SOMETHING
+            var _a, _b, _c, _d, _e;
+            const remoteUser = (_a = this._model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
+            // If we are in following mode, we update our position and selection
+            if (remoteUser) {
+                const remoteState = clients.get(remoteUser);
+                if (!remoteState) {
+                    return;
+                }
+                if (((_b = remoteState.user) === null || _b === void 0 ? void 0 : _b.username) !== ((_c = this.state.remoteUser) === null || _c === void 0 ? void 0 : _c.username)) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: remoteState.user })));
+                }
+                const remoteViewport = remoteState.viewportState;
+                if (remoteViewport.value) {
+                    const { x, y } = remoteViewport.value.coordinates;
+                    const zoom = remoteViewport.value.zoom;
+                    this._moveToPosition({ x, y }, zoom, 0);
+                }
+            }
+            else {
+                // If we are unfollowing a remote user, we reset our center and zoom to their previous values
+                if (this.state.remoteUser !== null) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: null })));
+                    const viewportState = (_e = (_d = this._model.localState) === null || _d === void 0 ? void 0 : _d.viewportState) === null || _e === void 0 ? void 0 : _e.value;
+                    if (viewportState) {
+                        this._moveToPosition(viewportState.coordinates, viewportState.zoom);
+                    }
+                }
+            }
+            // cursors
+            clients.forEach((client, clientId) => {
+                var _a;
+                if (!(client === null || client === void 0 ? void 0 : client.user)) {
+                    return;
+                }
+                const pointer = (_a = client.pointer) === null || _a === void 0 ? void 0 : _a.value;
+                // We already display our own cursor on mouse move
+                if (this._model.getClientId() === clientId) {
+                    return;
+                }
+                const clientPointers = this.state.clientPointers;
+                let currentClientPointer = clientPointers[clientId];
+                if (pointer) {
+                    const pixel = this._Map.getPixelFromCoordinate([
+                        pointer.coordinates.x,
+                        pointer.coordinates.y
+                    ]);
+                    const lonLat = toLonLat([pointer.coordinates.x, pointer.coordinates.y]);
+                    if (!currentClientPointer) {
+                        currentClientPointer = clientPointers[clientId] = {
+                            username: client.user.username,
+                            displayName: client.user.display_name,
+                            color: client.user.color,
+                            coordinates: { x: pixel[0], y: pixel[1] },
+                            lonLat: { longitude: lonLat[0], latitude: lonLat[1] }
+                        };
+                    }
+                    currentClientPointer.coordinates.x = pixel[0];
+                    currentClientPointer.coordinates.y = pixel[1];
+                    clientPointers[clientId] = currentClientPointer;
+                }
+                else {
+                    delete clientPointers[clientId];
+                }
+                this.setState(old => (Object.assign(Object.assign({}, old), { clientPointers: clientPointers })));
+            });
         };
         this._onSharedModelStateChange = (_, change) => {
             var _a;
@@ -140,6 +238,34 @@ export class MainView extends React.Component {
                 }
             }
         };
+        this._onSharedMetadataChanged = (_, changes) => {
+            const newState = Object.assign({}, this.state.annotations);
+            changes.forEach((val, key) => {
+                if (!key.startsWith('annotation')) {
+                    return;
+                }
+                const data = this._model.sharedModel.getMetadata(key);
+                let open = true;
+                if (this.state.firstLoad) {
+                    open = false;
+                }
+                if (data && (val.action === 'add' || val.action === 'update')) {
+                    const jsonData = JSON.parse(data);
+                    jsonData['open'] = open;
+                    newState[key] = jsonData;
+                }
+                else if (val.action === 'delete') {
+                    delete newState[key];
+                }
+            });
+            this.setState(old => (Object.assign(Object.assign({}, old), { annotations: newState, firstLoad: false })));
+        };
+        this._syncPointer = throttle((coordinates) => {
+            const pointer = {
+                coordinates: { x: coordinates[0], y: coordinates[1] }
+            };
+            this._model.syncPointer(pointer);
+        });
         this._handleThemeChange = () => {
             const lightTheme = isLightTheme();
             // TODO SOMETHING
@@ -163,18 +289,25 @@ export class MainView extends React.Component {
         this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
         this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
         this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
+        this._model.sharedModel.changed.connect(this._onSharedModelStateChange);
+        this._mainViewModel.jGISModel.sharedMetadataChanged.connect(this._onSharedMetadataChanged, this);
+        this._model.zoomToAnnotationSignal.connect(this._onZoomToAnnotation, this);
         this.state = {
             id: this._mainViewModel.id,
             lightTheme: isLightTheme(),
             loading: true,
-            firstLoad: true
+            firstLoad: true,
+            annotations: {},
+            clientPointers: {}
         };
         this._sources = [];
-        this._model.sharedModel.changed.connect(this._onSharedModelStateChange);
+        this._commands = new CommandRegistry();
+        this._contextMenu = new ContextMenu({ commands: this._commands });
     }
     async componentDidMount() {
         window.addEventListener('resize', this._handleWindowResize);
         await this.generateScene();
+        this.addContextMenu();
         this._mainViewModel.initSignal();
         if (window.jupytergisMaps !== undefined && this._documentPath) {
             window.jupytergisMaps[this._documentPath] = this._Map;
@@ -202,6 +335,7 @@ export class MainView extends React.Component {
                 }),
                 controls: [new ScaleLine()]
             });
+            // Add map interactions
             const dragAndDropInteraction = new DragAndDrop({
                 formatConstructors: [GeoJSON]
             });
@@ -226,10 +360,68 @@ export class MainView extends React.Component {
                         source: sourceId
                     }
                 };
-                this.addLayer(layerId, layerModel, this.getLayers().length);
+                this.addLayer(layerId, layerModel, this.getLayerIDs().length);
                 this._model.addLayer(layerId, layerModel);
             });
             this._Map.addInteraction(dragAndDropInteraction);
+            const selectInteraction = new Select({
+                hitTolerance: 5,
+                multi: true,
+                layers: layer => {
+                    var _a, _b;
+                    const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
+                    const selectedLayers = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
+                    if (!selectedLayers) {
+                        return false;
+                    }
+                    const selectedLayerId = Object.keys(selectedLayers)[0];
+                    return layer === this.getLayer(selectedLayerId);
+                },
+                condition: (event) => {
+                    return singleClick(event) && this._model.isIdentifying;
+                },
+                style: new Style({
+                    image: new Circle({
+                        radius: 5,
+                        fill: new Fill({
+                            color: '#C52707'
+                        }),
+                        stroke: new Stroke({
+                            color: '#171717',
+                            width: 2
+                        })
+                    })
+                })
+            });
+            selectInteraction.on('select', event => {
+                const identifiedFeatures = [];
+                selectInteraction.getFeatures().forEach(feature => {
+                    identifiedFeatures.push(feature.getProperties());
+                });
+                this._model.syncIdentifiedFeatures(identifiedFeatures, this._mainViewModel.id);
+            });
+            this._Map.addInteraction(selectInteraction);
+            const view = this._Map.getView();
+            // TODO: Note for the future, will need to update listeners if view changes
+            view.on('change:center', throttle(() => {
+                var _a;
+                // Not syncing center if following someone else
+                if ((_a = this._model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser) {
+                    return;
+                }
+                const view = this._Map.getView();
+                const center = view.getCenter();
+                const zoom = view.getZoom();
+                if (!center || !zoom) {
+                    return;
+                }
+                this._model.syncViewport({ coordinates: { x: center[0], y: center[1] }, zoom }, this._mainViewModel.id);
+            }));
+            this._Map.on('postrender', () => {
+                if (this.state.annotations) {
+                    this._updateAnnotation();
+                }
+            });
             this._Map.on('moveend', () => {
                 if (!this._initializedPosition) {
                     return;
@@ -251,12 +443,23 @@ export class MainView extends React.Component {
                 updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
             });
+            this._Map.on('click', this._identifyFeature.bind(this));
+            this._Map
+                .getViewport()
+                .addEventListener('pointermove', this._onPointerMove.bind(this));
             if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
                 await this._updateLayersImpl(JupyterGISModel.getOrderedLayerIds(this._model));
                 const options = this._model.getOptions();
                 this.updateOptions(options);
                 this._initializedPosition = true;
             }
+            this._Map.getViewport().addEventListener('contextmenu', event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const coordinate = this._Map.getEventCoordinate(event);
+                this._clickCoords = coordinate;
+                this._contextMenu.open(event);
+            });
             this.setState(old => (Object.assign(Object.assign({}, old), { loading: false })));
         }
     }
@@ -272,6 +475,10 @@ export class MainView extends React.Component {
             throw error;
         }
     }
+    async _loadGeoTIFFWithCache(sourceInfo) {
+        const result = await loadGeoTIFFWithCache(sourceInfo);
+        return result === null || result === void 0 ? void 0 : result.file;
+    }
     /**
      * Add a source in the map.
      *
@@ -345,6 +552,9 @@ export class MainView extends React.Component {
                     featureProjection: this._Map.getView().getProjection()
                 });
                 const featureCollection = new Collection(featureArray);
+                featureCollection.forEach(feature => {
+                    feature.setId(getUid(feature));
+                });
                 newSource = new VectorSource({
                     features: featureCollection
                 });
@@ -397,8 +607,12 @@ export class MainView extends React.Component {
                 const addNoData = (url) => {
                     return Object.assign(Object.assign({}, url), { nodata: 0 });
                 };
+                const sourcesWithBlobs = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
+                    const blob = await this._loadGeoTIFFWithCache(sourceInfo);
+                    return Object.assign(Object.assign({}, addNoData(sourceInfo)), { blob });
+                }));
                 newSource = new GeoTIFFSource({
-                    sources: sourceParameters.urls.map(addNoData),
+                    sources: sourcesWithBlobs,
                     normalize: sourceParameters.normalize,
                     wrapX: sourceParameters.wrapX
                 });
@@ -462,20 +676,45 @@ export class MainView extends React.Component {
     updateLayers(layerIds) {
         this._updateLayersImpl(layerIds);
     }
+    /**
+     * Updates the position and existence of layers in the OL map based on the layer IDs.
+     *
+     * @param layerIds - An array of layer IDs that should be present on the map.
+     * @returns {} Nothing is returned.
+     */
     async _updateLayersImpl(layerIds) {
-        const mapLayers = [];
-        for (const layerId of layerIds) {
+        // get layers that are currently on the OL map
+        const previousLayerIds = this.getLayerIDs();
+        // Iterate over the new layer IDs:
+        //   * Add layers to the map that are present in the list but not the map.
+        //   * Remove layers from the map that are present in the map but not the list.
+        //   * Update layer positions to match the list.
+        for (let targetLayerPosition = 0; targetLayerPosition < layerIds.length; targetLayerPosition++) {
+            const layerId = layerIds[targetLayerPosition];
             const layer = this._model.sharedModel.getLayer(layerId);
             if (!layer) {
-                console.log(`Layer id ${layerId} does not exist`);
+                console.warn(`Layer with ID ${layerId} does not exist in the shared model.`);
                 continue;
             }
-            const newMapLayer = await this._buildMapLayer(layerId, layer);
-            if (newMapLayer !== undefined) {
-                mapLayers.push(newMapLayer);
+            const mapLayer = this.getLayer(layerId);
+            if (mapLayer !== undefined) {
+                this.moveLayer(layerId, targetLayerPosition);
+            }
+            else {
+                await this.addLayer(layerId, layer, targetLayerPosition);
+            }
+            const previousIndex = previousLayerIds.indexOf(layerId);
+            if (previousIndex > -1) {
+                previousLayerIds.splice(previousIndex, 1);
             }
         }
-        this._Map.setLayers(mapLayers);
+        // Remove layers that are no longer in the `layerIds` list.
+        previousLayerIds.forEach(layerId => {
+            const layer = this.getLayer(layerId);
+            if (layer !== undefined) {
+                this._Map.removeLayer(layer);
+            }
+        });
         this._ready = true;
     }
     /**
@@ -675,8 +914,7 @@ export class MainView extends React.Component {
         }
         else {
             const centerCoord = fromLonLat([longitude || 0, latitude || 0], view.getProjection());
-            view.setCenter(centerCoord);
-            view.setZoom(zoom || 0);
+            this._moveToPosition({ x: centerCoord[0], y: centerCoord[1] }, zoom || 0);
             // Save the extent if it does not exists, to allow proper export to qgis.
             if (!options.extent) {
                 options.extent = view.calculateExtent();
@@ -699,15 +937,48 @@ export class MainView extends React.Component {
             .getArray()
             .find(layer => layer.get('id') === id);
     }
+    /**
+     * Convenience method to get a specific layer index from OpenLayers Map
+     * @param id Layer to retrieve
+     */
+    getLayerIndex(id) {
+        return this._Map
+            .getLayers()
+            .getArray()
+            .findIndex(layer => layer.get('id') === id);
+    }
     /**
      * Convenience method to get list layer IDs from the OpenLayers Map
      */
-    getLayers() {
+    getLayerIDs() {
         return this._Map
             .getLayers()
             .getArray()
             .map(layer => layer.get('id'));
     }
+    /**
+     * Move layer `id` in the stack to `index`.
+     *
+     * @param id - id of the layer.
+     * @param index - expected index of the layer.
+     */
+    moveLayer(id, index) {
+        const currentIndex = this.getLayerIndex(id);
+        if (currentIndex === index || currentIndex === -1) {
+            return;
+        }
+        const layer = this.getLayer(id);
+        let nextIndex = index;
+        // should not be undefined since the id exists above
+        if (layer === undefined) {
+            return;
+        }
+        this._Map.getLayers().removeAt(currentIndex);
+        if (currentIndex < index) {
+            nextIndex -= 1;
+        }
+        this._Map.getLayers().insertAt(nextIndex, layer);
+    }
     _onLayersChanged(_, change) {
         var _a;
         // Avoid concurrency update on layers on first load, if layersTreeChanged and
@@ -757,16 +1028,110 @@ export class MainView extends React.Component {
             }
         });
     }
+    _computeAnnotationPosition(annotation) {
+        const { x, y } = annotation.position;
+        const pixels = this._Map.getPixelFromCoordinate([x, y]);
+        if (pixels) {
+            return { x: pixels[0], y: pixels[1] };
+        }
+    }
+    _updateAnnotation() {
+        Object.keys(this.state.annotations).forEach(key => {
+            var _a;
+            const el = document.getElementById(key);
+            if (el) {
+                const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(key);
+                if (annotation) {
+                    const screenPosition = this._computeAnnotationPosition(annotation);
+                    if (screenPosition) {
+                        el.style.left = `${Math.round(screenPosition.x)}px`;
+                        el.style.top = `${Math.round(screenPosition.y)}px`;
+                    }
+                }
+            }
+        });
+    }
+    _onZoomToAnnotation(_, id) {
+        var _a;
+        const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(id);
+        if (annotation) {
+            this._moveToPosition(annotation.position, annotation.zoom);
+        }
+    }
+    _moveToPosition(center, zoom, duration = 1000) {
+        const view = this._Map.getView();
+        // Zoom needs to be set before changing center
+        if (!view.animate === undefined) {
+            view.animate({ zoom, duration });
+            view.animate({ center: [center.x, center.y], duration });
+        }
+        else {
+            view.setZoom(zoom);
+            view.setCenter([center.x, center.y]);
+        }
+    }
+    _onPointerMove(e) {
+        const pixel = this._Map.getEventPixel(e);
+        const coordinates = this._Map.getCoordinateFromPixel(pixel);
+        this._syncPointer(coordinates);
+    }
+    _identifyFeature(e) {
+        var _a, _b;
+        if (!this._model.isIdentifying) {
+            return;
+        }
+        const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
+        const selectedLayer = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
+        if (!selectedLayer) {
+            console.warn('Layer must be selected to use identify tool');
+            return;
+        }
+        const layerId = Object.keys(selectedLayer)[0];
+        const jgisLayer = this._model.getLayer(layerId);
+        switch (jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) {
+            case 'WebGlLayer': {
+                const layer = this.getLayer(layerId);
+                const data = layer.getData(e.pixel);
+                // TODO: Handle dataviews?
+                if (!data || data instanceof DataView) {
+                    return;
+                }
+                const bandValues = {};
+                // Data is an array of band values
+                for (let i = 0; i < data.length - 1; i++) {
+                    bandValues[`Band ${i + 1}`] = data[i];
+                }
+                // last element is alpha
+                bandValues['Alpha'] = data[data.length - 1];
+                this._model.syncIdentifiedFeatures([bandValues], this._mainViewModel.id);
+                break;
+            }
+        }
+    }
     render() {
-        return (React.createElement("div", { className: "jGIS-Mainview", style: {
-                border: this.state.remoteUser
-                    ? `solid 3px ${this.state.remoteUser.color}`
-                    : 'unset'
-            } },
-            React.createElement(Spinner, { loading: this.state.loading }),
-            React.createElement("div", { ref: this.divRef, style: {
-                    width: '100%',
-                    height: 'calc(100%)'
-                } })));
+        return (React.createElement(React.Fragment, null,
+            Object.entries(this.state.annotations).map(([key, annotation]) => {
+                if (!this._model.annotationModel) {
+                    return null;
+                }
+                const screenPosition = this._computeAnnotationPosition(annotation);
+                return (screenPosition && (React.createElement("div", { key: key, id: key, style: {
+                        left: screenPosition.x,
+                        top: screenPosition.y
+                    }, className: 'jGIS-Popup-Wrapper' },
+                    React.createElement(AnnotationFloater, { itemId: key, annotationModel: this._model.annotationModel, open: false }))));
+            }),
+            React.createElement("div", { className: "jGIS-Mainview", style: {
+                    border: this.state.remoteUser
+                        ? `solid 3px ${this.state.remoteUser.color}`
+                        : 'unset'
+                } },
+                React.createElement(Spinner, { loading: this.state.loading }),
+                React.createElement(FollowIndicator, { remoteUser: this.state.remoteUser }),
+                React.createElement(CollaboratorPointers, { clients: this.state.clientPointers }),
+                React.createElement("div", { ref: this.divRef, style: {
+                        width: '100%',
+                        height: 'calc(100%)'
+                    } }))));
     }
 }

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);
+    }
+}