@jupytergis/base 0.2.1 → 0.3.0

package/lib/mainview/mainView.js

@@ -1,37 +1,106 @@
 import { JupyterGISModel } from '@jupytergis/schema';
+import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
+import { ContextMenu } from '@lumino/widgets';
 import { Collection, Map as OlMap, View, getUid } from 'ol';
+//@ts-expect-error no types for ol-pmtiles
+import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
 import { ScaleLine } from 'ol/control';
+import { singleClick } from 'ol/events/condition';
 import { GeoJSON, MVT } from 'ol/format';
 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';
+import { fromLonLat, get as getRegisteredProjection, toLonLat, transformExtent } from 'ol/proj';
+import { get as getProjection } from 'ol/proj.js';
+import { register } from 'ol/proj/proj4.js';
 import Feature from 'ol/render/Feature';
 import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
-//@ts-expect-error no types for ol-pmtiles
-import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
-import { register } from 'ol/proj/proj4.js';
-import { get as getProjection } from 'ol/proj.js';
+import TileSource from 'ol/source/Tile';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
 import proj4 from 'proj4';
-import * as React from 'react';
-import shp from 'shpjs';
-import { isLightTheme, loadGeoTIFFWithCache, throttle } from '../tools';
-import { Spinner } from './spinner';
-//@ts-expect-error no types for proj4-list
+//@ts-expect-error no types for proj4list
 import proj4list from 'proj4-list';
-import { ContextMenu } from '@lumino/widgets';
-import { CommandRegistry } from '@lumino/commands';
+import * as React from 'react';
 import AnnotationFloater from '../annotations/components/AnnotationFloater';
 import { CommandIDs } from '../constants';
-import { FollowIndicator } from './FollowIndicator';
+import StatusBar from '../statusbar/StatusBar';
+import { isLightTheme, loadFile, loadGeoTIFFWithCache, throttle } from '../tools';
 import CollaboratorPointers from './CollaboratorPointers';
-import { Circle, Fill, Stroke, Style } from 'ol/style';
-import { singleClick } from 'ol/events/condition';
+import { FollowIndicator } from './FollowIndicator';
+import { Spinner } from './spinner';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
+        this.createSelectInteraction = () => {
+            const pointStyle = new Style({
+                image: new Circle({
+                    radius: 5,
+                    fill: new Fill({
+                        color: '#C52707'
+                    }),
+                    stroke: new Stroke({
+                        color: '#171717',
+                        width: 2
+                    })
+                })
+            });
+            const lineStyle = new Style({
+                stroke: new Stroke({
+                    color: '#171717',
+                    width: 2
+                })
+            });
+            const polygonStyle = new Style({
+                fill: new Fill({ color: '#C5270780' }),
+                stroke: new Stroke({
+                    color: '#171717',
+                    width: 2
+                })
+            });
+            const styleFunction = (feature) => {
+                var _a;
+                const geometryType = (_a = feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType();
+                switch (geometryType) {
+                    case 'Point':
+                    case 'MultiPoint':
+                        return pointStyle;
+                    case 'LineString':
+                    case 'MultiLineString':
+                        return lineStyle;
+                    case 'Polygon':
+                    case 'MultiPolygon':
+                        return polygonStyle;
+                }
+            };
+            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: styleFunction
+            });
+            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);
+        };
         this.addContextMenu = () => {
             this._commands.addCommand(CommandIDs.addAnnotation, {
                 execute: () => {
@@ -278,8 +347,6 @@ export class MainView extends React.Component {
         this.divRef = React.createRef(); // Reference of render div
         this._ready = false;
         this._sourceToLayerMap = new Map();
-        proj4.defs(Array.from(proj4list));
-        register(proj4);
         this._mainViewModel = this.props.viewModel;
         this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
         this._model = this._mainViewModel.jGISModel;
@@ -291,16 +358,20 @@ export class MainView extends React.Component {
         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._model.zoomToPositionSignal.connect(this._onZoomToPosition, this);
         this.state = {
             id: this._mainViewModel.id,
             lightTheme: isLightTheme(),
             loading: true,
             firstLoad: true,
             annotations: {},
-            clientPointers: {}
+            clientPointers: {},
+            viewProjection: { code: '', units: '' },
+            loadingLayer: false,
+            scale: 0
         };
         this._sources = [];
+        this._loadingLayers = new Set();
         this._commands = new CommandRegistry();
         this._contextMenu = new ContextMenu({ commands: this._commands });
     }
@@ -364,43 +435,7 @@ export class MainView extends React.Component {
                 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);
+            this.createSelectInteraction();
             const view = this._Map.getView();
             // TODO: Note for the future, will need to update listeners if view changes
             view.on('change:center', throttle(() => {
@@ -433,6 +468,7 @@ export class MainView extends React.Component {
                 const projection = view.getProjection();
                 const latLng = toLonLat(center, projection);
                 const bearing = view.getRotation();
+                const resolution = view.getResolution();
                 const updatedOptions = {
                     latitude: latLng[1],
                     longitude: latLng[0],
@@ -442,6 +478,14 @@ export class MainView extends React.Component {
                 };
                 updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
+                // Calculate scale
+                if (resolution) {
+                    // DPI and inches per meter values taken from OpenLayers
+                    const dpi = 25.4 / 0.28;
+                    const inchesPerMeter = 1000 / 25.4;
+                    const scale = resolution * inchesPerMeter * dpi;
+                    this.setState(old => (Object.assign(Object.assign({}, old), { scale })));
+                }
             });
             this._Map.on('click', this._identifyFeature.bind(this));
             this._Map
@@ -460,19 +504,10 @@ export class MainView extends React.Component {
                 this._clickCoords = coordinate;
                 this._contextMenu.open(event);
             });
-            this.setState(old => (Object.assign(Object.assign({}, old), { loading: false })));
-        }
-    }
-    async _loadShapefileAsGeoJSON(url) {
-        try {
-            const response = await fetch(`/jupytergis_core/proxy?url=${url}`);
-            const arrayBuffer = await response.arrayBuffer();
-            const geojson = await shp(arrayBuffer);
-            return geojson;
-        }
-        catch (error) {
-            console.error('Error loading shapefile:', error);
-            throw error;
+            this.setState(old => (Object.assign(Object.assign({}, old), { loading: false, viewProjection: {
+                    code: view.getProjection().getCode(),
+                    units: view.getProjection().getUnits()
+                } })));
         }
     }
     async _loadGeoTIFFWithCache(sourceInfo) {
@@ -542,7 +577,11 @@ export class MainView extends React.Component {
             }
             case 'GeoJSONSource': {
                 const data = ((_a = source.parameters) === null || _a === void 0 ? void 0 : _a.data) ||
-                    (await this._model.readGeoJSON((_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path));
+                    (await loadFile({
+                        filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
+                        type: 'GeoJSONSource',
+                        model: this._model
+                    }));
                 const format = new GeoJSON({
                     featureProjection: this._Map.getView().getProjection()
                 });
@@ -562,7 +601,11 @@ export class MainView extends React.Component {
             }
             case 'ShapefileSource': {
                 const parameters = source.parameters;
-                const geojson = await this._loadShapefileAsGeoJSON(parameters.path);
+                const geojson = await loadFile({
+                    filepath: parameters.path,
+                    type: 'ShapefileSource',
+                    model: this._model
+                });
                 const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
                 const format = new GeoJSON();
                 newSource = new VectorSource({
@@ -590,10 +633,15 @@ export class MainView extends React.Component {
                 const maxX = bottomRight[0];
                 const minY = bottomRight[1];
                 const extent = [minX, minY, maxX, maxY];
+                const imageUrl = await loadFile({
+                    filepath: sourceParameters.path,
+                    type: 'ImageSource',
+                    model: this._model
+                });
                 newSource = new Static({
                     imageExtent: extent,
-                    url: sourceParameters.url,
-                    interpolate: true,
+                    url: imageUrl,
+                    interpolate: false,
                     crossOrigin: ''
                 });
                 break;
@@ -731,9 +779,12 @@ export class MainView extends React.Component {
         if (!source) {
             return;
         }
+        this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: true })));
+        this._loadingLayers.add(id);
         if (!this._sources[sourceId]) {
             await this.addSource(sourceId, source, id);
         }
+        this._loadingLayers.add(id);
         let newMapLayer;
         let layerParameters;
         // TODO: OpenLayers provides a bunch of sources for specific tile
@@ -800,12 +851,40 @@ export class MainView extends React.Component {
                 break;
             }
         }
+        await this._waitForSourceReady(newMapLayer);
         // OpenLayers doesn't have name/id field so add it
         newMapLayer.set('id', id);
         // we need to keep track of which source has which layers
         this._sourceToLayerMap.set(layerParameters.source, id);
+        this.addProjection(newMapLayer);
+        this._loadingLayers.delete(id);
         return newMapLayer;
     }
+    addProjection(newMapLayer) {
+        var _a;
+        const sourceProjection = (_a = newMapLayer.getSource()) === null || _a === void 0 ? void 0 : _a.getProjection();
+        if (!sourceProjection) {
+            console.warn('Layer source projection is undefined or invalid');
+            return;
+        }
+        const projectionCode = sourceProjection.getCode();
+        const isProjectionRegistered = getRegisteredProjection(projectionCode);
+        if (!isProjectionRegistered) {
+            // Check if the projection exists in proj4list
+            if (!proj4list[projectionCode]) {
+                console.warn(`Projection code '${projectionCode}' not found in proj4list`);
+                return;
+            }
+            try {
+                proj4.defs([proj4list[projectionCode]]);
+                register(proj4);
+            }
+            catch (error) {
+                console.warn(`Failed to register projection '${projectionCode}'. Error: ${error.message}`);
+                return;
+            }
+        }
+    }
     /**
      * Add a layer to the map.
      *
@@ -820,6 +899,7 @@ export class MainView extends React.Component {
         }
         const newMapLayer = await this._buildMapLayer(id, layer);
         if (newMapLayer !== undefined) {
+            await this._waitForReady();
             this._Map.getLayers().insertAt(index, newMapLayer);
         }
     }
@@ -875,6 +955,46 @@ export class MainView extends React.Component {
             }
         }
     }
+    /**
+     * Wait for all layers to be loaded.
+     */
+    _waitForReady() {
+        return new Promise(resolve => {
+            const checkReady = () => {
+                if (this._loadingLayers.size === 0) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: false })));
+                    resolve();
+                }
+                else {
+                    setTimeout(checkReady, 50);
+                }
+            };
+            checkReady();
+        });
+    }
+    /**
+     * Wait for a layers source state to be 'ready'
+     * @param layer The Layer to check
+     */
+    _waitForSourceReady(layer) {
+        return new Promise((resolve, reject) => {
+            const checkState = () => {
+                const state = layer.getSourceState();
+                if (state === 'ready') {
+                    layer.un('change', checkState);
+                    resolve();
+                }
+                else if (state === 'error') {
+                    layer.un('change', checkState);
+                    reject(new Error('Source failed to load.'));
+                }
+            };
+            // Listen for state changes
+            layer.on('change', checkState);
+            // Check the state immediately in case it's already 'ready'
+            checkState();
+        });
+    }
     /**
      * Remove a layer from the map.
      *
@@ -1051,12 +1171,40 @@ export class MainView extends React.Component {
             }
         });
     }
-    _onZoomToAnnotation(_, id) {
+    _onZoomToPosition(_, id) {
         var _a;
+        // Check if the id is an annotation
         const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(id);
         if (annotation) {
             this._moveToPosition(annotation.position, annotation.zoom);
+            return;
+        }
+        // The id is a layer
+        let extent;
+        const layer = this.getLayer(id);
+        const source = layer === null || layer === void 0 ? void 0 : layer.getSource();
+        if (source instanceof VectorSource) {
+            extent = source.getExtent();
+        }
+        if (source instanceof TileSource) {
+            // Tiled sources don't have getExtent() so we get it from the grid
+            const tileGrid = source.getTileGrid();
+            extent = tileGrid === null || tileGrid === void 0 ? void 0 : tileGrid.getExtent();
         }
+        if (!extent) {
+            console.warn('Layer has no extent.');
+            return;
+        }
+        // Convert layer extent value to view projection if needed
+        const sourceProjection = source === null || source === void 0 ? void 0 : source.getProjection();
+        const viewProjection = this._Map.getView().getProjection();
+        const transformedExtent = sourceProjection && sourceProjection !== viewProjection
+            ? transformExtent(extent, sourceProjection, viewProjection)
+            : extent;
+        this._Map.getView().fit(transformedExtent, {
+            size: this._Map.getSize(),
+            duration: 500
+        });
     }
     _moveToPosition(center, zoom, duration = 1000) {
         const view = this._Map.getView();
@@ -1132,6 +1280,7 @@ export class MainView extends React.Component {
                 React.createElement("div", { ref: this.divRef, style: {
                         width: '100%',
                         height: 'calc(100%)'
-                    } }))));
+                    } })),
+            React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })));
     }
 }

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

@@ -4,6 +4,7 @@ import { cloneDeep } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { debounce, getLayerTileInfo } from '../../../tools';
 import FilterRow from './FilterRow';
+import { loadFile } from '../../../tools';
 /**
  * The filters panel widget.
  */
@@ -150,7 +151,11 @@ const FilterComponent = (props) => {
                 break;
             }
             case 'GeoJSONSource': {
-                const data = await (model === null || model === void 0 ? void 0 : model.readGeoJSON((_d = source.parameters) === null || _d === void 0 ? void 0 : _d.path));
+                const data = await loadFile({
+                    filepath: (_d = source.parameters) === null || _d === void 0 ? void 0 : _d.path,
+                    type: 'GeoJSONSource',
+                    model: model
+                });
                 data === null || data === void 0 ? void 0 : data.features.forEach((feature) => {
                     feature.properties &&
                         addFeatureValue(feature.properties, aggregatedProperties);

package/lib/statusbar/StatusBar.d.ts

@@ -0,0 +1,13 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStatusBarProps {
+    jgisModel: IJupyterGISModel;
+    loading?: boolean;
+    projection?: {
+        code: string;
+        units: string;
+    };
+    scale: number;
+}
+declare const StatusBar: ({ jgisModel, loading, projection, scale }: IStatusBarProps) => React.JSX.Element;
+export default StatusBar;

package/lib/statusbar/StatusBar.js

@@ -0,0 +1,52 @@
+import { faGlobe, faLocationDot, faRuler } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Progress } from '@jupyter/react-components';
+import React, { useEffect, useState } from 'react';
+import { version } from '../../package.json'; // Adjust the path as necessary
+const StatusBar = ({ jgisModel, loading, projection, scale }) => {
+    var _a;
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
+    useEffect(() => {
+        const handleClientStateChanged = () => {
+            var _a, _b;
+            const pointer = (_b = (_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _a === void 0 ? void 0 : _a.pointer) === null || _b === void 0 ? void 0 : _b.value;
+            if (!pointer) {
+                return;
+            }
+            setCoords({ x: pointer === null || pointer === void 0 ? void 0 : pointer.coordinates.x, y: pointer === null || pointer === void 0 ? void 0 : pointer.coordinates.y });
+        };
+        jgisModel.clientStateChanged.connect(handleClientStateChanged);
+        return () => {
+            jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
+        };
+    }, [jgisModel]);
+    return (React.createElement("div", { className: "jgis-status-bar" },
+        loading && (React.createElement("div", { style: { width: '16%', padding: '0 6px' } },
+            React.createElement(Progress, { height: 14 }))),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            React.createElement("span", null,
+                "jgis: ",
+                version)),
+        React.createElement("div", { className: "jgis-status-bar-item jgis-status-bar-coords" },
+            React.createElement(FontAwesomeIcon, { icon: faLocationDot }),
+            React.createElement("span", null,
+                ' ',
+                "x: ",
+                Math.trunc(coords.x),
+                " y: ",
+                Math.trunc(coords.y))),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            React.createElement(FontAwesomeIcon, { icon: faRuler }),
+            ' ',
+            React.createElement("span", null,
+                "Scale: 1: ",
+                Math.trunc(scale))),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            React.createElement(FontAwesomeIcon, { icon: faGlobe }),
+            ' ',
+            React.createElement("span", null, (_a = projection === null || projection === void 0 ? void 0 : projection.code) !== null && _a !== void 0 ? _a : null)),
+        React.createElement("div", { className: "jgis-status-bar-item" },
+            "Units: ", projection === null || projection === void 0 ? void 0 :
+            projection.units)));
+};
+export default StatusBar;

package/lib/toolbar/widget.js

@@ -101,11 +101,6 @@ export class ToolbarWidget extends ReactiveToolbar {
                 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

@@ -1,5 +1,5 @@
 import { VectorTile } from '@mapbox/vector-tile';
-import { IDict, IJGISLayerBrowserRegistry, IJGISOptions } from '@jupytergis/schema';
+import { IDict, IJGISLayerBrowserRegistry, IJGISOptions, IJGISSource, IJupyterGISModel } from '@jupytergis/schema';
 export declare const debounce: (func: CallableFunction, timeout?: number) => CallableFunction;
 export declare function throttle<T extends (...args: any[]) => void>(callback: T, delay?: number): T;
 export declare function getElementFromProperty(filePath?: string | null, prop?: string | null): HTMLElement | undefined | null;
@@ -67,3 +67,42 @@ export declare const loadGeoTIFFWithCache: (sourceInfo: {
     metadata: any;
     sourceUrl: string;
 } | null>;
+/**
+ * Generalized file reader for different source types.
+ *
+ * @param fileInfo - Object containing the file path and source type.
+ * @returns A promise that resolves to the file content.
+ */
+export declare const loadFile: (fileInfo: {
+    filepath: string;
+    type: IJGISSource["type"];
+    model: IJupyterGISModel;
+}) => Promise<any>;
+/**
+ * Converts a base64-encoded string to a Blob.
+ *
+ * @param base64 - The base64-encoded string representing the file data.
+ * @param mimeType - The MIME type of the data.
+ * @returns A promise that resolves to a Blob representing the decoded data.
+ */
+export declare const base64ToBlob: (base64: string, mimeType: string) => Promise<Blob>;
+/**
+ * A mapping of file extensions to their corresponding MIME types.
+ */
+export declare const MIME_TYPES: {
+    [ext: string]: string;
+};
+/**
+ * Determine the MIME type based on the file extension.
+ *
+ * @param filename - The name of the file.
+ * @returns A string representing the MIME type.
+ */
+export declare const getMimeType: (filename: string) => string;
+/**
+ * Helper to convert a string (base64) to ArrayBuffer.
+ *
+ * @param content - File content as a base64 string.
+ * @returns An ArrayBuffer.
+ */
+export declare const stringToArrayBuffer: (content: string) => Promise<ArrayBuffer>;