@jupytergis/base 0.7.0 → 0.8.1

package/lib/commands/index.js

@@ -85,6 +85,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
                 'VectorLayer',
                 'ShapefileLayer',
                 'WebGlLayer',
+                'VectorTileLayer',
             ].includes(selectedLayer.type);
             const isIdentifying = current.model.isIdentifying;
             if (isIdentifying && !canIdentify) {
@@ -98,7 +99,12 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             if (!selectedLayer) {
                 return false;
             }
-            return ['VectorLayer', 'ShapefileLayer', 'WebGlLayer'].includes(selectedLayer.type);
+            return [
+                'VectorLayer',
+                'ShapefileLayer',
+                'WebGlLayer',
+                'VectorTileLayer',
+            ].includes(selectedLayer.type);
         }, execute: args => {
             const current = tracker.currentWidget;
             if (!current) {

package/lib/dialogs/symbology/hooks/useGetProperties.js

@@ -1,6 +1,46 @@
 // import { GeoJSONFeature } from 'geojson';
 import { useEffect, useState } from 'react';
 import { loadFile } from "../../../tools";
+async function getGeoJsonProperties({ source, model, }) {
+    var _a;
+    const result = {};
+    const data = await loadFile({
+        filepath: (_a = source.parameters) === null || _a === void 0 ? void 0 : _a.path,
+        type: 'GeoJSONSource',
+        model,
+    });
+    if (!data) {
+        throw new Error('Failed to read GeoJSON data');
+    }
+    data.features.forEach((feature) => {
+        if (feature.properties) {
+            for (const [key, value] of Object.entries(feature.properties)) {
+                if (!result[key]) {
+                    result[key] = new Set();
+                }
+                result[key].add(value);
+            }
+        }
+    });
+    return result;
+}
+function getVectorTileProperties({ model, sourceId, }) {
+    const result = {};
+    const features = model.getFeaturesForCurrentTile({ sourceId });
+    features.forEach(feature => {
+        var _a;
+        const props = (_a = feature.getProperties) === null || _a === void 0 ? void 0 : _a.call(feature);
+        if (props) {
+            for (const [key, value] of Object.entries(props)) {
+                if (!result[key]) {
+                    result[key] = new Set();
+                }
+                result[key].add(value);
+            }
+        }
+    });
+    return result;
+}
 export const useGetProperties = ({ layerId, model, }) => {
     const [featureProperties, setFeatureProperties] = useState({});
     const [isLoading, setIsLoading] = useState(true);
@@ -16,30 +56,24 @@ export const useGetProperties = ({ layerId, model, }) => {
             if (!source) {
                 throw new Error('Source not found');
             }
-            const data = await loadFile({
-                filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
-                type: 'GeoJSONSource',
-                model: model,
-            });
-            if (!data) {
-                throw new Error('Failed to read GeoJSON data');
+            const sourceType = source === null || source === void 0 ? void 0 : source.type;
+            let result = {};
+            if (sourceType === 'GeoJSONSource') {
+                result = await getGeoJsonProperties({ source, model });
+            }
+            else if (sourceType === 'VectorTileSource') {
+                const sourceId = (_b = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _b === void 0 ? void 0 : _b.source;
+                result = getVectorTileProperties({ model, sourceId });
+            }
+            else {
+                throw new Error(`Unsupported source type: ${sourceType}`);
             }
-            const result = {};
-            data.features.forEach((feature) => {
-                if (feature.properties) {
-                    Object.entries(feature.properties).forEach(([key, value]) => {
-                        if (!(key in result)) {
-                            result[key] = new Set();
-                        }
-                        result[key].add(value);
-                    });
-                }
-            });
             setFeatureProperties(result);
-            setIsLoading(false);
         }
         catch (err) {
             setError(err);
+        }
+        finally {
             setIsLoading(false);
         }
     };

package/lib/dialogs/symbology/vector_layer/VectorRendering.js

@@ -15,19 +15,19 @@ const RENDER_TYPE_OPTIONS = {
     Canonical: {
         component: Canonical,
         attributeChecker: getColorCodeFeatureAttributes,
-        supportedLayerTypes: ['VectorLayer', 'HeatmapLayer'],
+        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
         isTabbed: false,
     },
     Graduated: {
         component: Graduated,
         attributeChecker: getNumericFeatureAttributes,
-        supportedLayerTypes: ['VectorLayer', 'HeatmapLayer'],
+        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
         isTabbed: true,
     },
     Categorized: {
         component: Categorized,
         attributeChecker: getNumericFeatureAttributes,
-        supportedLayerTypes: ['VectorLayer', 'HeatmapLayer'],
+        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
         isTabbed: true,
     },
     Heatmap: {

package/lib/dialogs/symbology/vector_layer/types/Graduated.js

@@ -126,13 +126,15 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
             });
             newStyle['fill-color'] = colorExpr;
             newStyle['circle-fill-color'] = colorExpr;
+            newStyle['stroke-color'] = colorExpr;
+            newStyle['circle-stroke-color'] = colorExpr;
         }
         else {
             newStyle['fill-color'] = undefined;
             newStyle['circle-fill-color'] = undefined;
+            newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
+            newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
         }
-        newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
-        newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
         newStyle['stroke-width'] = colorManualStyleRef.current.strokeWidth;
         newStyle['circle-stroke-width'] = colorManualStyleRef.current.strokeWidth;
         // Apply radius symbology

package/lib/formbuilder/objectform/source/geojsonsource.d.ts

@@ -1,4 +1,5 @@
 import { IDict } from '@jupytergis/schema';
+import { ISubmitEvent } from '@rjsf/core';
 import { PathBasedSourcePropertiesForm } from './pathbasedsource';
 import { ISourceFormProps } from './sourceform';
 /**
@@ -13,5 +14,6 @@ export declare class GeoJSONSourcePropertiesForm extends PathBasedSourceProperti
      *
      * @param path - the path to validate.
      */
-    protected _validatePath(path: string): Promise<void>;
+    protected _validatePath(path: string | undefined): Promise<void>;
+    protected onFormSubmit(e: ISubmitEvent<any>): void;
 }

package/lib/formbuilder/objectform/source/geojsonsource.js

@@ -1,4 +1,5 @@
 import * as geojson from '@jupytergis/schema/src/schema/geojson.json';
+import { showErrorMessage } from '@jupyterlab/apputils';
 import { Ajv } from 'ajv';
 import { loadFile } from "../../../tools";
 import { PathBasedSourcePropertiesForm } from './pathbasedsource';
@@ -17,6 +18,10 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
         if ((data === null || data === void 0 ? void 0 : data.path) !== '') {
             this.removeFormEntry('data', data, schema, uiSchema);
         }
+        if (this.props.formContext === 'create') {
+            schema.properties.path.description =
+                'The local path to a GeoJSON file. (If no path/url is provided, an empty GeoJSON is created.)';
+        }
         super.processSchema(data, schema, uiSchema);
     }
     /**
@@ -28,7 +33,7 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
         var _a;
         const extraErrors = this.state.extraErrors;
         let error = '';
-        let valid = false;
+        let valid = true;
         if (path) {
             try {
                 const geoJSONData = await loadFile({
@@ -45,9 +50,6 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
                 error = `"${path}" is not a valid GeoJSON file: ${e}`;
             }
         }
-        else {
-            error = 'Path is required';
-        }
         if (!valid) {
             extraErrors.path = {
                 __errors: [error],
@@ -64,4 +66,18 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
             this.props.formErrorSignal.emit(!valid);
         }
     }
+    onFormSubmit(e) {
+        var _a, _b, _c;
+        if (((_c = (_b = (_a = this.state.extraErrors) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.__errors) === null || _c === void 0 ? void 0 : _c.length) >= 1) {
+            showErrorMessage('Invalid file', this.state.extraErrors.path.__errors[0]);
+            return;
+        }
+        if (!e.formData.path) {
+            e.formData.data = {
+                type: 'FeatureCollection',
+                features: [],
+            };
+        }
+        super.onFormSubmit(e);
+    }
 }

package/lib/mainview/mainView.js

@@ -3,7 +3,7 @@ import { showErrorMessage } from '@jupyterlab/apputils';
 import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
 import { ContextMenu } from '@lumino/widgets';
-import { Collection, Map as OlMap, View, getUid } from 'ol';
+import { Collection, Map as OlMap, View, getUid, } from 'ol';
 import Feature from 'ol/Feature';
 import { FullScreen, ScaleLine } from 'ol/control';
 import { singleClick } from 'ol/events/condition';
@@ -14,10 +14,9 @@ import { Heatmap as HeatmapLayer, Image as ImageLayer, Layer, Vector as VectorLa
 import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, get as getProjection, toLonLat, transformExtent, } from 'ol/proj';
 import { register } from 'ol/proj/proj4.js';
-import RenderFeature from 'ol/render/Feature';
-import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, } from 'ol/source';
+import RenderFeature, { toGeometry } from 'ol/render/Feature';
+import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
-import TileSource from 'ol/source/Tile';
 import { Circle, Fill, Stroke, Style } from 'ol/style';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
@@ -665,7 +664,8 @@ export class MainView extends React.Component {
         switch (source.type) {
             case 'RasterSource': {
                 const sourceParameters = source.parameters;
-                const pmTiles = sourceParameters.url.endsWith('.pmtiles');
+                const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
+                    sourceParameters.url.endsWith('pmtiles.gz');
                 const url = this.computeSourceUrl(source);
                 if (!pmTiles) {
                     newSource = new XYZSource({
@@ -698,7 +698,8 @@ export class MainView extends React.Component {
             }
             case 'VectorTileSource': {
                 const sourceParameters = source.parameters;
-                const pmTiles = sourceParameters.url.endsWith('.pmtiles');
+                const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
+                    sourceParameters.url.endsWith('pmtiles.gz');
                 const url = this.computeSourceUrl(source);
                 if (!pmTiles) {
                     newSource = new VectorTileSource({
@@ -717,6 +718,16 @@ export class MainView extends React.Component {
                         url: url,
                     });
                 }
+                newSource.on('tileloadend', (event) => {
+                    const tile = event.tile;
+                    const features = tile.getFeatures();
+                    if (features && features.length > 0) {
+                        this._model.syncTileFeatures({
+                            sourceId: id,
+                            features,
+                        });
+                    }
+                });
                 break;
             }
             case 'GeoJSONSource': {
@@ -1581,6 +1592,39 @@ export class MainView extends React.Component {
         const layerId = Object.keys(selectedLayer)[0];
         const jgisLayer = this._model.getLayer(layerId);
         switch (jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) {
+            case 'VectorTileLayer': {
+                const geometries = [];
+                const features = [];
+                this._Map.forEachFeatureAtPixel(e.pixel, (feature) => {
+                    let geom;
+                    if (feature instanceof RenderFeature) {
+                        geom = toGeometry(feature);
+                    }
+                    else if ('getGeometry' in feature) {
+                        geom = feature.getGeometry();
+                    }
+                    const props = feature.getProperties();
+                    if (geom) {
+                        geometries.push(geom);
+                    }
+                    features.push(Object.assign({}, props));
+                    return true;
+                });
+                if (features.length > 0) {
+                    this._model.syncIdentifiedFeatures(features, this._mainViewModel.id);
+                }
+                if (geometries.length > 0) {
+                    for (const geom of geometries) {
+                        this._model.highlightFeatureSignal.emit(geom);
+                    }
+                }
+                else {
+                    const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
+                    const point = new Point(coordinate);
+                    this._model.highlightFeatureSignal.emit(point);
+                }
+                break;
+            }
             case 'WebGlLayer': {
                 const layer = this.getLayer(layerId);
                 const data = layer.getData(e.pixel);

package/lib/panelview/leftpanel.js

@@ -1,12 +1,14 @@
+import { PageConfig } from '@jupyterlab/coreutils';
 import * as React from 'react';
 import { LayersBodyComponent } from './components/layers';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 import StacPanel from '../stacBrowser/components/StacPanel';
 import FilterComponent from './components/filter-panel/Filter';
 export const LeftPanel = (props) => {
+    const hideStacPanel = PageConfig.getOption('HIDE_STAC_PANEL') === 'true';
     const tabInfo = [
         { name: 'layers', title: 'Layers' },
-        { name: 'stac', title: 'Stac Browser' },
+        ...(hideStacPanel ? [] : [{ name: 'stac', title: 'Stac Browser' }]),
         { name: 'filters', title: 'Filters' },
     ];
     const [curTab, setCurTab] = React.useState(tabInfo[0].name);
@@ -24,8 +26,8 @@ export const LeftPanel = (props) => {
             })),
             React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
                 React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state })),
-            React.createElement(TabsContent, { value: "stac" },
-                React.createElement(StacPanel, { model: props.model })),
+            !hideStacPanel && (React.createElement(TabsContent, { value: "stac" },
+                React.createElement(StacPanel, { model: props.model }))),
             React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
                 React.createElement(FilterComponent, { model: props.model }),
                 ","))));

package/lib/panelview/rightpanel.js

@@ -1,13 +1,17 @@
+import { PageConfig } from '@jupyterlab/coreutils';
 import * as React from 'react';
 import { AnnotationsPanel } from './annotationPanel';
 import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPanel';
 import { ObjectPropertiesReact } from './objectproperties';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 export const RightPanel = props => {
+    const hideAnnotationPanel = PageConfig.getOption('HIDE_ANNOTATION_PANEL') === 'true';
     const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     const tabInfo = [
         { name: 'objectProperties', title: 'Object Properties' },
-        { name: 'annotations', title: 'Annotations' },
+        ...(hideAnnotationPanel
+            ? []
+            : [{ name: 'annotations', title: 'Annotations' }]),
         { name: 'identifyPanel', title: 'Identify Features' },
     ];
     const [curTab, setCurTab] = React.useState(tabInfo[0].name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^3.1.0",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.7.0",
+    "@jupytergis/schema": "^0.8.1",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",