@jupytergis/base 0.1.3 → 0.1.5

package/lib/commands.js

@@ -3,7 +3,6 @@ import { CommandIDs, icons } from './constants';
 import { CreationFormDialog } from './dialogs/formdialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
 import { SymbologyWidget } from './dialogs/symbologyDialog';
-import { TerrainDialogWidget } from './dialogs/terrainDialog';
 /**
  * Add the commands to the application's command registry.
  */
@@ -538,29 +537,6 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             });
         }
     });
-    /**
-     * Terrain commands
-     */
-    commands.addCommand(CommandIDs.newTerrain, Object.assign({ label: trans.__('New Terrain'), isEnabled: () => {
-            return tracker.currentWidget
-                ? tracker.currentWidget.context.model.sharedModel.editable
-                : false;
-        }, execute: Private.createTerrainDialog(tracker) }, icons.get(CommandIDs.newTerrain)));
-    commands.addCommand(CommandIDs.removeTerrain, {
-        label: trans.__('Remove Terrain'),
-        isEnabled: () => {
-            return tracker.currentWidget
-                ? tracker.currentWidget.context.model.sharedModel.editable
-                : false;
-        },
-        execute: () => {
-            var _a;
-            (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model.setTerrain({
-                source: '',
-                exaggeration: 0
-            });
-        }
-    });
     // Console commands
     commands.addCommand(CommandIDs.toggleConsole, {
         label: trans.__('Toggle console'),
@@ -635,19 +611,6 @@ var Private;
         };
     }
     Private.createLayerBrowser = createLayerBrowser;
-    function createTerrainDialog(tracker) {
-        return async () => {
-            const current = tracker.currentWidget;
-            if (!current) {
-                return;
-            }
-            const dialog = new TerrainDialogWidget({
-                context: current.context
-            });
-            await dialog.launch();
-        };
-    }
-    Private.createTerrainDialog = createTerrainDialog;
     function createSymbologyDialog(tracker, state) {
         return async () => {
             const current = tracker.currentWidget;

package/lib/constants.d.ts

@@ -38,8 +38,6 @@ export declare namespace CommandIDs {
     const moveLayerToNewGroup = "jupytergis:moveLayerToNewGroup";
     const renameSource = "jupytergis:renameSource";
     const removeSource = "jupytergis:removeSource";
-    const newTerrain = "jupytergis:newTerrain";
-    const removeTerrain = "jupytergis:removeTerrain";
     const toggleConsole = "jupytergis:toggleConsole";
     const invokeCompleter = "jupytergis:invokeConsoleCompleter";
     const removeConsole = "jupytergis:removeConsole";

package/lib/constants.js

@@ -46,9 +46,6 @@ export var CommandIDs;
     // Source actions
     CommandIDs.renameSource = 'jupytergis:renameSource';
     CommandIDs.removeSource = 'jupytergis:removeSource';
-    // Terrain stuff
-    CommandIDs.newTerrain = 'jupytergis:newTerrain';
-    CommandIDs.removeTerrain = 'jupytergis:removeTerrain';
     // Console commands
     CommandIDs.toggleConsole = 'jupytergis:toggleConsole';
     CommandIDs.invokeCompleter = 'jupytergis:invokeConsoleCompleter';
@@ -80,7 +77,6 @@ const iconObject = {
     [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
     [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
     [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
-    [CommandIDs.newTerrain]: { iconClass: 'fa fa-mountain' },
     [CommandIDs.symbology]: { iconClass: 'fa fa-brush' }
 };
 /**

package/lib/dialogs/components/symbology/SingleBandPseudoColor.js

@@ -2,9 +2,9 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
+import { getGdal } from '../../../gdal';
 import BandRow from './BandRow';
 import StopRow from './StopRow';
-import { getGdal } from '../../../gdal';
 const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const functions = ['discrete', 'linear', 'exact'];
     const stopRowsRef = useRef();
@@ -248,7 +248,9 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
             (currentBand.stats.maximum - currentBand.stats.minimum));
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("div", { className: "jp-gis-band-container" }, bandRows.length === 0 ? (React.createElement(FontAwesomeIcon, { icon: faSpinner })) : (React.createElement(BandRow
+        React.createElement("div", { className: "jp-gis-band-container" }, bandRows.length === 0 ? (React.createElement("div", { className: "jp-gis-band-info-loading-container" },
+            React.createElement("span", null, "Fetching band info..."),
+            React.createElement(FontAwesomeIcon, { icon: faSpinner, className: "jp-gis-loading-spinner" }))) : (React.createElement(BandRow
         // Band numbers are 1 indexed
         , { 
             // Band numbers are 1 indexed

package/lib/mainview/mainView.d.ts

@@ -47,6 +47,14 @@ export declare class MainView extends React.Component<IProps, IStates> {
      */
     updateLayers(layerIds: string[]): void;
     private _updateLayersImpl;
+    /**
+     * Build the map layer.
+     *
+     * @param id - id of the layer.
+     * @param layer - the layer object.
+     * @returns - the map layer.
+     */
+    private _buildMapLayer;
     /**
      * Add a layer to the map.
      *
@@ -65,13 +73,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @returns
      */
     private hillshadeMath;
-    /**
-     * Move a layer in the stack.
-     *
-     * @param id - id of the layer.
-     * @param index - expected index of the layer.
-     */
-    moveLayer(id: string, index: number | undefined): void;
     /**
      * Update a layer of the map.
      *

package/lib/mainview/mainView.js

@@ -1,6 +1,6 @@
 import { JupyterGISModel } from '@jupytergis/schema';
 import { UUID } from '@lumino/coreutils';
-import { Map as OlMap, View } from 'ol';
+import { Collection, Map as OlMap, View } from 'ol';
 import { ScaleLine } from 'ol/control';
 import { GeoJSON, MVT } from 'ol/format';
 import DragAndDrop from 'ol/interaction/DragAndDrop';
@@ -37,7 +37,9 @@ export class MainView extends React.Component {
                 style: defaultStyle
             };
             const layerStyle = Object.assign({}, defaultRules);
-            if (layer.filters && layer.filters.appliedFilters.length !== 0) {
+            if (layer.filters &&
+                layer.filters.logicalOp &&
+                layer.filters.appliedFilters.length !== 0) {
                 const filterExpr = [];
                 // 'Any' and 'All' operators require more than one argument
                 // So if there's only one filter, skip that part to avoid error
@@ -215,10 +217,7 @@ export class MainView extends React.Component {
                     projection: projection.getCode(),
                     zoom
                 };
-                // Update the extent only if has been initially provided.
-                if (currentOptions.extent) {
-                    updatedOptions.extent = view.calculateExtent();
-                }
+                updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
             });
             if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
@@ -306,13 +305,17 @@ 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));
-                const format = new GeoJSON();
+                const format = new GeoJSON({
+                    featureProjection: this._Map.getView().getProjection()
+                });
                 // TODO: Don't hardcode projection
+                const featureArray = format.readFeatures(data, {
+                    dataProjection: 'EPSG:4326',
+                    featureProjection: this._Map.getView().getProjection()
+                });
+                const featureCollection = new Collection(featureArray);
                 newSource = new VectorSource({
-                    features: format.readFeatures(data, {
-                        dataProjection: 'EPSG:4326',
-                        featureProjection: this._Map.getView().getProjection()
-                    })
+                    features: featureCollection
                 });
                 break;
             }
@@ -426,59 +429,30 @@ export class MainView extends React.Component {
         this._updateLayersImpl(layerIds);
     }
     async _updateLayersImpl(layerIds) {
-        const previousLayerIds = this.getLayers();
-        // We use the reverse order of the list to add the layer from the top to the
-        // bottom.
-        // This is to ensure that the beforeId (layer on top of the one we add/move)
-        // is already added/moved in the map.
-        const reversedLayerIds = layerIds.slice().reverse();
-        for (const layerId of reversedLayerIds) {
+        const mapLayers = [];
+        for (const layerId of layerIds) {
             const layer = this._model.sharedModel.getLayer(layerId);
             if (!layer) {
                 console.log(`Layer id ${layerId} does not exist`);
-                return;
-            }
-            // Get the expected index in the map.
-            const currentLayerIds = [...previousLayerIds];
-            let indexInMap = currentLayerIds.length;
-            const nextLayer = layerIds[layerIds.indexOf(layerId) + 1];
-            if (nextLayer !== undefined) {
-                indexInMap = currentLayerIds.indexOf(nextLayer);
-                if (indexInMap === -1) {
-                    indexInMap = currentLayerIds.length;
-                }
-            }
-            if (this.getLayer(layerId)) {
-                this.moveLayer(layerId, indexInMap);
+                continue;
             }
-            else {
-                await this.addLayer(layerId, layer, indexInMap);
-            }
-            // Remove the element of the previous list as treated.
-            const index = previousLayerIds.indexOf(layerId);
-            if (index > -1) {
-                previousLayerIds.splice(index, 1);
+            const newMapLayer = await this._buildMapLayer(layerId, layer);
+            if (newMapLayer !== undefined) {
+                mapLayers.push(newMapLayer);
             }
         }
-        // Remove the layers not used anymore.
-        previousLayerIds.forEach(layerId => {
-            this._Map.removeLayer(layerId);
-        });
+        this._Map.setLayers(mapLayers);
         this._ready = true;
     }
     /**
-     * Add a layer to the map.
+     * Build the map layer.
      *
      * @param id - id of the layer.
      * @param layer - the layer object.
-     * @param index - expected index of the layer.
+     * @returns - the map layer.
      */
-    async addLayer(id, layer, index) {
+    async _buildMapLayer(id, layer) {
         var _a;
-        if (this.getLayer(id)) {
-            // Layer already exists
-            return;
-        }
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
         const source = this._model.sharedModel.getSource(sourceId);
         if (!source) {
@@ -487,14 +461,14 @@ export class MainView extends React.Component {
         if (!this._sources[sourceId]) {
             await this.addSource(sourceId, source);
         }
-        let newLayer;
+        let newMapLayer;
         let layerParameters;
         // TODO: OpenLayers provides a bunch of sources for specific tile
         // providers, so maybe set up some way to use those
         switch (layer.type) {
             case 'RasterLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new TileLayer({
+                newMapLayer = new TileLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source]
@@ -503,7 +477,7 @@ export class MainView extends React.Component {
             }
             case 'VectorLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new VectorLayer({
+                newMapLayer = new VectorLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source],
@@ -513,19 +487,16 @@ export class MainView extends React.Component {
             }
             case 'VectorTileLayer': {
                 layerParameters = layer.parameters;
-                if (!layerParameters.color) {
-                    return;
-                }
-                newLayer = new VectorTileLayer({
+                newMapLayer = new VectorTileLayer({
                     opacity: layerParameters.opacity,
                     source: this._sources[layerParameters.source]
                 });
-                this.updateLayer(id, layer, newLayer);
+                this.updateLayer(id, layer, newMapLayer);
                 break;
             }
             case 'HillshadeLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new WebGlTileLayer({
+                newMapLayer = new WebGlTileLayer({
                     opacity: 0.3,
                     source: this._sources[layerParameters.source],
                     style: {
@@ -536,7 +507,7 @@ export class MainView extends React.Component {
             }
             case 'ImageLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new ImageLayer({
+                newMapLayer = new ImageLayer({
                     opacity: layerParameters.opacity,
                     source: this._sources[layerParameters.source]
                 });
@@ -552,43 +523,32 @@ export class MainView extends React.Component {
                 if (layerParameters.color) {
                     layerOptions['style'] = { color: layerParameters.color };
                 }
-                newLayer = new WebGlTileLayer(layerOptions);
+                newMapLayer = new WebGlTileLayer(layerOptions);
                 break;
             }
         }
         // OpenLayers doesn't have name/id field so add it
-        newLayer.set('id', id);
+        newMapLayer.set('id', id);
         // we need to keep track of which source has which layers
         this._sourceToLayerMap.set(layerParameters.source, id);
-        this._Map.getLayers().insertAt(index, newLayer);
+        return newMapLayer;
     }
     /**
-     * Move a layer in the stack.
+     * Add a layer to the map.
      *
      * @param id - id of the layer.
+     * @param layer - the layer object.
      * @param index - expected index of the layer.
      */
-    moveLayer(id, index) {
-        // Get the beforeId value according to the expected index.
-        const currentLayerIds = this.getLayers();
-        let beforeId = undefined;
-        if (!(index === undefined) && index < currentLayerIds.length) {
-            beforeId = currentLayerIds[index];
-        }
-        const layerArray = this._Map.getLayers().getArray();
-        const movingLayer = this.getLayer(id);
-        if (!movingLayer || !index || !beforeId) {
+    async addLayer(id, layer, index) {
+        if (this.getLayer(id)) {
+            // Layer already exists
             return;
         }
-        const indexOfMovingLayer = layerArray.indexOf(movingLayer);
-        layerArray.splice(indexOfMovingLayer, 1);
-        const beforeLayer = this.getLayer(beforeId);
-        if (!beforeLayer) {
-            return;
+        const newMapLayer = await this._buildMapLayer(id, layer);
+        if (newMapLayer !== undefined) {
+            this._Map.getLayers().insertAt(index, newMapLayer);
         }
-        const indexOfBeforeLayer = layerArray.indexOf(beforeLayer);
-        layerArray.splice(indexOfBeforeLayer, 0, movingLayer);
-        this._Map.setLayers(layerArray);
     }
     /**
      * Update a layer of the map.
@@ -662,14 +622,19 @@ export class MainView extends React.Component {
     }
     updateOptions(options) {
         const view = this._Map.getView();
-        // use the extent if provided.
-        if (options.extent) {
+        // Use the extent only if explicitly requested (QGIS files).
+        if (options.extent && options.useExtent) {
             view.fit(options.extent);
         }
         else {
             const centerCoord = fromLonLat([options.longitude || 0, options.latitude || 0], this._Map.getView().getProjection());
             this._Map.getView().setZoom(options.zoom || 0);
             this._Map.getView().setCenter(centerCoord);
+            // Save the extent if it does not exists, to allow proper export to qgis.
+            if (options.extent === undefined) {
+                options.extent = view.calculateExtent();
+                this._model.setOptions(options);
+            }
         }
         view.setRotation(options.bearing || 0);
     }
@@ -709,12 +674,14 @@ export class MainView extends React.Component {
             }
             else {
                 const mapLayer = this.getLayer(change.id);
-                if (mapLayer &&
-                    JupyterGISModel.getOrderedLayerIds(this._model).includes(change.id)) {
-                    this.updateLayer(change.id, layer, mapLayer);
-                }
-                else {
-                    this.updateLayers(JupyterGISModel.getOrderedLayerIds(this._model));
+                const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
+                if (mapLayer) {
+                    if (layerTree.includes(change.id)) {
+                        this.updateLayer(change.id, layer, mapLayer);
+                    }
+                    else {
+                        this.updateLayers(layerTree);
+                    }
                 }
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -41,7 +41,7 @@
     "@deathbeds/jupyterlab-rjsf": "^1.1.0",
     "@jupyter/docprovider": "^2.0.0",
     "@jupyter/ydoc": "^1.0.0",
-    "@jupytergis/schema": "^0.1.3",
+    "@jupytergis/schema": "^0.1.5",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
     "@jupyterlab/completer": "^4.2.4",

package/style/base.css

@@ -6,7 +6,6 @@
 @import url('./dialog.css');
 @import url('./layerBrowser.css');
 @import url('./leftPanel.css');
-@import url('./terrainDialog.css');
 @import url('./filterPanel.css');
 @import url('./symbologyDialog.css');
 @import url('ol/ol.css');

package/style/symbologyDialog.css

@@ -92,3 +92,31 @@
 .jp-gis-symbology-button-container {
   padding-top: 0.5rem;
 }
+
+.jp-gis-band-info-loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+  margin: auto;
+}
+
+.jp-gis-loading-spinner {
+  animation: spin 4s linear infinite;
+  font-size: 1.5rem;
+  padding: 1rem 0;
+  margin: auto;
+}
+
+.jp-gis-band-info-loading-container > span {
+  font-size: 1rem;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/dialogs/terrainDialog.d.ts

@@ -1,21 +0,0 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
-import { Dialog } from '@jupyterlab/apputils';
-import { DocumentRegistry } from '@jupyterlab/docregistry';
-import { PromiseDelegate } from '@lumino/coreutils';
-import { Signal } from '@lumino/signaling';
-import React from 'react';
-interface ITerrainDialogProps {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
-    okSignalPromise: PromiseDelegate<Signal<TerrainDialogWidget, null>>;
-    cancel: () => void;
-}
-declare const TerrainDialog: ({ context, okSignalPromise, cancel }: ITerrainDialogProps) => React.JSX.Element;
-export interface ITerrainDialogOptions {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
-}
-export declare class TerrainDialogWidget extends Dialog<boolean> {
-    private okSignal;
-    constructor(options: ITerrainDialogOptions);
-    resolve(index?: number): void;
-}
-export default TerrainDialog;

package/lib/dialogs/terrainDialog.js

@@ -1,60 +0,0 @@
-import { Dialog } from '@jupyterlab/apputils';
-import { PromiseDelegate } from '@lumino/coreutils';
-import { Signal } from '@lumino/signaling';
-import React, { useEffect, useRef, useState } from 'react';
-const TerrainDialog = ({ context, okSignalPromise, cancel }) => {
-    const rasterDemSources = context.model.getSourcesByType('RasterDemSource');
-    const [selectedSource, setSelectedSource] = useState(Object.keys(rasterDemSources)[0]);
-    const [exaggerationInput, setExaggerationInput] = useState(1);
-    const selectedSourceRef = useRef(selectedSource);
-    const exaggerationInputRef = useRef(exaggerationInput);
-    useEffect(() => {
-        selectedSourceRef.current = selectedSource;
-        exaggerationInputRef.current = exaggerationInput;
-    }, [selectedSource, exaggerationInput]);
-    // Handler for changing the selected option
-    const handleSourceChange = (event) => {
-        setSelectedSource(event.target.value);
-    };
-    // Handler for changing the number input
-    const handleExaggerationChange = (event) => {
-        setExaggerationInput(Number(event.target.value));
-    };
-    const handleOk = () => {
-        context.model.setTerrain({
-            source: selectedSourceRef.current,
-            exaggeration: exaggerationInputRef.current
-        });
-        cancel();
-    };
-    okSignalPromise.promise.then(okSignal => {
-        okSignal.connect(handleOk);
-    });
-    return (React.createElement("div", { className: "jp-gis-terrain-main" },
-        React.createElement("label", { className: "jp-gis-terrain-label", htmlFor: "source" }, "Source:"),
-        React.createElement("select", { id: "source", className: "jp-mod-styled", value: selectedSource, onChange: handleSourceChange, "aria-label": "Select source" }, Object.entries(rasterDemSources).map(([key, value]) => (React.createElement("option", { key: key, value: key }, value)))),
-        React.createElement("label", { className: "jp-gis-terrain-label", htmlFor: "exaggeration" }, "Exaggeration:"),
-        React.createElement("input", { id: "exaggeration", className: "jp-mod-styled", type: "number", min: 0, step: 0.1, value: exaggerationInput, onChange: handleExaggerationChange, placeholder: "Enter an exaggeration value", "aria-label": "Enter exaggeration value" })));
-};
-export class TerrainDialogWidget extends Dialog {
-    constructor(options) {
-        const cancelCallback = () => {
-            this.resolve(0);
-        };
-        const okSignalPromise = new PromiseDelegate();
-        const body = (React.createElement(TerrainDialog, { context: options.context, okSignalPromise: okSignalPromise, cancel: cancelCallback }));
-        super({ title: 'Add New Terrain', body });
-        this.id = 'jupytergis::terrain';
-        this.okSignal = new Signal(this);
-        okSignalPromise.resolve(this.okSignal);
-    }
-    resolve(index) {
-        if (index === 0) {
-            super.resolve(index);
-        }
-        if (index === 1) {
-            this.okSignal.emit(null);
-        }
-    }
-}
-export default TerrainDialog;

package/style/terrainDialog.css

@@ -1,14 +0,0 @@
-.jp-gis-terrain-main {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  overflow: hidden;
-}
-
-.jp-gis-terrain-label {
-  margin: 0;
-  padding: 0;
-  font-weight: bold;
-  display: block;
-  position: relative;
-}