@jupytergis/base 0.1.6 → 0.2.0

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

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { VectorClassifications } from '../../classificationModes';
+import ColorRamp from '../../components/color_ramp/ColorRamp';
+import ValueSelect from '../components/ValueSelect';
+import StopContainer from '../../components/color_stops/StopContainer';
+import { useGetProperties } from '../../hooks/useGetProperties';
+import { Utils, VectorUtils } from '../../symbologyUtils';
+const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const modeOptions = [
+        'quantile',
+        'equal interval',
+        'jenks',
+        'pretty',
+        'logarithmic'
+    ];
+    const selectedValueRef = useRef();
+    const selectedMethodRef = useRef();
+    const stopRowsRef = useRef();
+    const colorRampOptionsRef = useRef();
+    const [selectedValue, setSelectedValue] = useState('');
+    const [selectedMethod, setSelectedMethod] = useState('color');
+    const [stopRows, setStopRows] = useState([]);
+    const [methodOptions, setMethodOptions] = useState(['color']);
+    const [colorRampOptions, setColorRampOptions] = useState();
+    if (!layerId) {
+        return;
+    }
+    const layer = context.model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    const { featureProps } = useGetProperties({
+        layerId,
+        model: context.model
+    });
+    useEffect(() => {
+        var _a, _b;
+        let stopOutputPairs = [];
+        const layerParams = layer.parameters;
+        const method = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.method) !== null && _b !== void 0 ? _b : 'color';
+        if (method === 'color') {
+            stopOutputPairs = VectorUtils.buildColorInfo(layer);
+        }
+        if (method === 'radius') {
+            stopOutputPairs = VectorUtils.buildRadiusInfo(layer);
+        }
+        setStopRows(stopOutputPairs);
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        selectedValueRef.current = selectedValue;
+        selectedMethodRef.current = selectedMethod;
+        stopRowsRef.current = stopRows;
+        colorRampOptionsRef.current = colorRampOptions;
+    }, [selectedValue, selectedMethod, stopRows, colorRampOptions]);
+    useEffect(() => {
+        populateOptions();
+    }, [featureProps]);
+    const populateOptions = async () => {
+        var _a, _b, _c, _d, _e;
+        // Set up method options
+        if (((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.type) === 'circle') {
+            const options = ['color', 'radius'];
+            setMethodOptions(options);
+        }
+        const layerParams = layer.parameters;
+        const value = (_c = (_b = layerParams.symbologyState) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : Object.keys(featureProps)[0];
+        const method = (_e = (_d = layerParams.symbologyState) === null || _d === void 0 ? void 0 : _d.method) !== null && _e !== void 0 ? _e : 'color';
+        setSelectedValue(value);
+        setSelectedMethod(method);
+    };
+    const handleOk = () => {
+        var _a, _b, _c, _d;
+        if (!layer.parameters) {
+            return;
+        }
+        const colorExpr = [];
+        colorExpr.push('interpolate');
+        colorExpr.push(['linear']);
+        colorExpr.push(['get', selectedValueRef.current]);
+        (_a = stopRowsRef.current) === null || _a === void 0 ? void 0 : _a.map(stop => {
+            colorExpr.push(stop.stop);
+            colorExpr.push(stop.output);
+        });
+        const newStyle = Object.assign({}, layer.parameters.color);
+        if (selectedMethodRef.current === 'color') {
+            if (layer.parameters.type === 'fill') {
+                newStyle['fill-color'] = colorExpr;
+            }
+            if (layer.parameters.type === 'line') {
+                newStyle['stroke-color'] = colorExpr;
+            }
+            if (layer.parameters.type === 'circle') {
+                newStyle['circle-fill-color'] = colorExpr;
+            }
+        }
+        if (selectedMethodRef.current === 'radius') {
+            if (layer.parameters.type === 'circle') {
+                newStyle['circle-radius'] = colorExpr;
+            }
+        }
+        const symbologyState = {
+            renderType: 'Graduated',
+            value: selectedValueRef.current,
+            method: selectedMethodRef.current,
+            colorRamp: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.selectedRamp,
+            nClasses: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.numberOfShades,
+            mode: (_d = colorRampOptionsRef.current) === null || _d === void 0 ? void 0 : _d.selectedMode
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = newStyle;
+        context.model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp) => {
+        setColorRampOptions({
+            selectedRamp,
+            numberOfShades,
+            selectedMode
+        });
+        let stops;
+        const values = Array.from(featureProps[selectedValue]);
+        switch (selectedMode) {
+            case 'quantile':
+                stops = VectorClassifications.calculateQuantileBreaks(values, +numberOfShades);
+                break;
+            case 'equal interval':
+                stops = VectorClassifications.calculateEqualIntervalBreaks(values, +numberOfShades);
+                break;
+            case 'jenks':
+                stops = VectorClassifications.calculateJenksBreaks(values, +numberOfShades);
+                break;
+            case 'pretty':
+                stops = VectorClassifications.calculatePrettyBreaks(values, +numberOfShades);
+                break;
+            case 'logarithmic':
+                stops = VectorClassifications.calculateLogarithmicBreaks(values, +numberOfShades);
+                break;
+            default:
+                console.warn('No mode selected');
+                return;
+        }
+        let stopOutputPairs = [];
+        if (selectedMethod === 'radius') {
+            for (let i = 0; i < +numberOfShades; i++) {
+                stopOutputPairs.push({ stop: stops[i], output: stops[i] });
+            }
+        }
+        else {
+            stopOutputPairs = Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades);
+        }
+        setStopRows(stopOutputPairs);
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement(ValueSelect, { featureProperties: featureProps, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-method-select' }, "Method:"),
+            React.createElement("select", { name: 'vector-method-select', onChange: event => setSelectedMethod(event.target.value), className: "jp-mod-styled" }, methodOptions.map((method, index) => (React.createElement("option", { key: index, value: method, selected: method === selectedMethod, className: "jp-mod-styled" }, method))))),
+        React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true }),
+        React.createElement(StopContainer, { selectedMethod: selectedMethod, stopRows: stopRows, setStopRows: setStopRows })));
+};
+export default Graduated;

package/lib/dialogs/{components/symbology → symbology/vector_layer/types}/SimpleSymbol.js

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { parseColor } from '../../../tools';
+import { parseColor } from '../../../../tools';
 const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const styleRef = useRef();
-    const layerStateRef = useRef();
-    const [layerState, setLayerState] = useState();
     const [useCircleStuff, setUseCircleStuff] = useState(false);
     const [style, setStyle] = useState({
         fillColor: '#3399CC',
@@ -31,16 +29,11 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
         // Read values from file if we chose them using the single symbol thing
         // but if we're switching to simple symbol, use defaults
         const initStyle = async () => {
+            var _a;
             if (!layer.parameters) {
                 return;
             }
-            const layerState = await state.fetch(`jupytergis:${layerId}`);
-            if (!layerState) {
-                return;
-            }
-            setLayerState(layerState);
-            const renderType = layerState
-                .renderType;
+            const renderType = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState.renderType;
             if (renderType === 'Single Symbol') {
                 // Read from current color or use defaults
                 const parsedStyle = parseColor(layer.parameters.type, layer.parameters.color);
@@ -61,14 +54,12 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
     }, []);
     useEffect(() => {
         styleRef.current = style;
-        layerStateRef.current = layerState;
-    }, [style, layerState]);
+    }, [style]);
     const handleOk = () => {
         var _a, _b, _c, _d, _e, _f;
         if (!layer.parameters) {
             return;
         }
-        state.save(`jupytergis:${layerId}`, Object.assign(Object.assign({}, layerStateRef.current), { renderType: 'Single Symbol' }));
         const styleExpr = {};
         const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
         if (layer.parameters.type === 'circle') {
@@ -79,6 +70,10 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
         styleExpr[`${prefix}stroke-width`] = (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.strokeWidth;
         styleExpr[`${prefix}stroke-line-join`] = (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.joinStyle;
         styleExpr[`${prefix}stroke-line-cap`] = (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.capStyle;
+        const symbologyState = {
+            renderType: 'Single Symbol'
+        };
+        layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = styleExpr;
         context.model.sharedModel.updateLayer(layerId, layer);
         cancel();

package/lib/formbuilder/formselectors.js

@@ -5,6 +5,7 @@ import { LayerPropertiesForm } from './objectform/layerform';
 import { TileSourcePropertiesForm } from './objectform/tilesourceform';
 import { VectorLayerPropertiesForm } from './objectform/vectorlayerform';
 import { WebGlLayerPropertiesForm } from './objectform/webGlLayerForm';
+import { GeoTiffSourcePropertiesForm } from './objectform/geotiffsource';
 export function getLayerTypeForm(layerType) {
     let LayerForm = LayerPropertiesForm;
     switch (layerType) {
@@ -28,6 +29,9 @@ export function getSourceTypeForm(sourceType) {
         case 'GeoJSONSource':
             SourceForm = GeoJSONSourcePropertiesForm;
             break;
+        case 'GeoTiffSource':
+            SourceForm = GeoTiffSourcePropertiesForm;
+            break;
         case 'RasterSource':
         case 'VectorTileSource':
             SourceForm = TileSourcePropertiesForm;

package/lib/formbuilder/objectform/baseform.d.ts

@@ -52,7 +52,6 @@ export interface IBaseFormProps {
      */
     formErrorSignal?: Signal<Dialog<any>, boolean>;
 }
-export declare const LuminoSchemaForm: (props: React.PropsWithChildren<any>) => JSX.Element;
 /**
  * Generate a form to edit a layer/source type. This class is meant to be sub-classed to create more refined forms for specific layers/sources.
  *
@@ -61,6 +60,7 @@ export declare const LuminoSchemaForm: (props: React.PropsWithChildren<any>) =>
 export declare class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
     constructor(props: IBaseFormProps);
     componentDidUpdate(prevProps: IBaseFormProps, prevState: IBaseFormStates): void;
+    componentDidMount(): void;
     protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
     /**
      * Remove a specific entry from the form. Can be used in subclasses if needed while under processSchema.

package/lib/formbuilder/objectform/baseform.js

@@ -1,35 +1,21 @@
-import { SchemaForm } from '@deathbeds/jupyterlab-rjsf';
-import { MessageLoop } from '@lumino/messaging';
-import { Widget } from '@lumino/widgets';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { FormComponent } from '@jupyterlab/ui-components';
+import validatorAjv8 from '@rjsf/validator-ajv8';
 import * as React from 'react';
 import { deepCopy } from '../../tools';
-// Reusing the datalayer/jupyter-react component:
-// https://github.com/datalayer/jupyter-react/blob/main/packages/react/src/jupyter/lumino/Lumino.tsx
-export const LuminoSchemaForm = (props) => {
-    const ref = React.useRef(null);
-    const { children } = props;
-    React.useEffect(() => {
-        const widget = children;
-        try {
-            MessageLoop.sendMessage(widget, Widget.Msg.BeforeAttach);
-            ref.current.insertBefore(widget.node, null);
-            MessageLoop.sendMessage(widget, Widget.Msg.AfterAttach);
-        }
-        catch (e) {
-            console.warn('Exception while attaching Lumino widget.', e);
-        }
-        return () => {
-            try {
-                if (widget.isAttached || widget.node.isConnected) {
-                    Widget.detach(widget);
-                }
-            }
-            catch (e) {
-                console.warn('Exception while detaching Lumino widget.', e);
-            }
-        };
-    }, [children]);
-    return React.createElement("div", { ref: ref });
+const WrappedFormComponent = (props) => {
+    const { fields } = props, rest = __rest(props, ["fields"]);
+    return (React.createElement(FormComponent, Object.assign({}, rest, { validator: validatorAjv8, fields: Object.assign({}, fields) })));
 };
 /**
  * Generate a form to edit a layer/source type. This class is meant to be sub-classed to create more refined forms for specific layers/sources.
@@ -52,6 +38,13 @@ export class BaseForm extends React.Component {
             this.setState(old => (Object.assign(Object.assign({}, old), { schema })));
         }
     }
+    componentDidMount() {
+        if (this.props.formErrorSignal) {
+            const extraErrors = Object.keys(Object.assign({}, this.state.extraErrors)).length > 0;
+            this.setState(old => (Object.assign(Object.assign({}, old), this.state.extraErrors)));
+            this.props.formErrorSignal.emit(extraErrors);
+        }
+    }
     processSchema(data, schema, uiSchema) {
         if (!schema['properties']) {
             return;
@@ -146,19 +139,15 @@ export class BaseForm extends React.Component {
                 var _a;
                 (_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.click();
             });
-            const formSchema = new SchemaForm(schema, {
-                liveValidate: true,
-                formData,
-                onChange: this.onFormChange.bind(this),
-                onSubmit: this.onFormSubmit.bind(this),
-                onBlur: this.onFormBlur.bind(this),
-                uiSchema,
-                children: (React.createElement("button", { ref: submitRef, type: "submit", style: { display: 'none' } })),
-                extraErrors: this.state.extraErrors
-            });
             return (React.createElement("div", { className: "jGIS-property-panel", "data-path": (_b = this.props.filePath) !== null && _b !== void 0 ? _b : '' },
-                React.createElement("div", { className: "jGIS-property-outer" },
-                    React.createElement(LuminoSchemaForm, null, formSchema)),
+                React.createElement("div", { className: "jGIS-property-outer", onKeyUp: (e) => {
+                        var _a;
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            (_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                        }
+                    } },
+                    React.createElement(WrappedFormComponent, { schema: schema, uiSchema: uiSchema, formData: formData, onSubmit: this.onFormSubmit.bind(this), onChange: this.onFormChange.bind(this), onBlur: this.onFormBlur.bind(this), liveValidate: true, children: React.createElement("button", { ref: submitRef, type: "submit", style: { display: 'none' } }), extraErrors: this.state.extraErrors })),
                 !this.props.ok && (React.createElement("div", { className: "jGIS-property-buttons" },
                     React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => { var _a; return (_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.click(); } },
                         React.createElement("div", { className: "jp-Dialog-buttonLabel" }, "Ok"))))));

package/lib/formbuilder/objectform/geojsonsource.js

@@ -1,6 +1,6 @@
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { Ajv } from 'ajv';
-import * as geojson from 'geojson-schema/GeoJSON.json';
+import * as geojson from '@jupytergis/schema/src/schema/geojson.json';
 import { BaseForm } from './baseform';
 /**
  * The form to modify a GeoJSON source.
@@ -45,36 +45,39 @@ export class GeoJSONSourcePropertiesForm extends BaseForm {
      * @param path - the path to validate.
      */
     async _validatePath(path) {
-        const extraErrors = {
-            path: {
-                __errors: []
+        var _a;
+        const extraErrors = this.state.extraErrors;
+        let error = '';
+        let valid = false;
+        if (path) {
+            try {
+                const geoJSONData = await this.props.model.readGeoJSON(path);
+                valid = this._validate(geoJSONData);
+                if (!valid) {
+                    error = `"${path}" is not a valid GeoJSON file`;
+                }
             }
-        };
-        this.props.model
-            .readGeoJSON(path)
-            .then(async (geoJSONData) => {
-            var _a;
-            const valid = this._validate(geoJSONData);
-            if (!valid) {
-                extraErrors.path.__errors = [`"${path}" is not a valid GeoJSON file`];
-                (_a = this._validate.errors) === null || _a === void 0 ? void 0 : _a.reverse().forEach(error => {
-                    extraErrors.path.__errors.push(error.message);
-                });
+            catch (e) {
+                error = `"${path}" is not a valid GeoJSON file: ${e}`;
             }
-            else {
-                delete extraErrors.path;
-            }
-            this.setState({ extraErrors });
-            if (this.props.formErrorSignal) {
-                this.props.formErrorSignal.emit(!valid);
-            }
-        })
-            .catch(e => {
-            extraErrors.path.__errors = [`Cannot read "${path}"`];
-            this.setState({ extraErrors });
-            if (this.props.formErrorSignal) {
-                this.props.formErrorSignal.emit(true);
-            }
-        });
+        }
+        else {
+            error = 'Path is required';
+        }
+        if (!valid) {
+            extraErrors.path = {
+                __errors: [error]
+            };
+            (_a = this._validate.errors) === null || _a === void 0 ? void 0 : _a.reverse().forEach(error => {
+                extraErrors.path.__errors.push(error.message);
+            });
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors })));
+        }
+        else {
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { path: { __errors: [] } }) })));
+        }
+        if (this.props.formErrorSignal) {
+            this.props.formErrorSignal.emit(!valid);
+        }
     }
 }

package/lib/formbuilder/objectform/geotiffsource.d.ts

@@ -0,0 +1,16 @@
+import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
+import { BaseForm, IBaseFormProps } from './baseform';
+/**
+ * The form to modify a GeoTiff source.
+ */
+export declare class GeoTiffSourcePropertiesForm extends BaseForm {
+    constructor(props: IBaseFormProps);
+    protected onFormChange(e: IChangeEvent): void;
+    protected onFormSubmit(e: ISubmitEvent<any>): void;
+    /**
+     * Validate the URLs, ensuring that there is at least one object with required fields.
+     *
+     * @param urls - the URLs array to validate.
+     */
+    private _validateUrls;
+}

package/lib/formbuilder/objectform/geotiffsource.js

@@ -0,0 +1,71 @@
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { BaseForm } from './baseform';
+/**
+ * The form to modify a GeoTiff source.
+ */
+export class GeoTiffSourcePropertiesForm extends BaseForm {
+    constructor(props) {
+        var _a, _b;
+        super(props);
+        this._validateUrls((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.urls) !== null && _b !== void 0 ? _b : []);
+    }
+    onFormChange(e) {
+        var _a;
+        super.onFormChange(e);
+        if ((_a = e.formData) === null || _a === void 0 ? void 0 : _a.urls) {
+            this._validateUrls(e.formData.urls);
+        }
+    }
+    onFormSubmit(e) {
+        var _a, _b, _c;
+        if (((_c = (_b = (_a = this.state.extraErrors) === null || _a === void 0 ? void 0 : _a.urls) === null || _b === void 0 ? void 0 : _b.__errors) === null || _c === void 0 ? void 0 : _c.length) >= 1) {
+            showErrorMessage('Invalid URLs', this.state.extraErrors.urls.__errors[0]);
+            return;
+        }
+        super.onFormSubmit(e);
+    }
+    /**
+     * Validate the URLs, ensuring that there is at least one object with required fields.
+     *
+     * @param urls - the URLs array to validate.
+     */
+    async _validateUrls(urls) {
+        const extraErrors = this.state.extraErrors;
+        const errors = [];
+        let valid = true;
+        if (urls && urls.length > 0) {
+            for (let i = 0; i < urls.length; i++) {
+                const { url, min, max } = urls[i];
+                if (!url || typeof url !== 'string' || url.trim() === '') {
+                    errors.push(`URL at index ${i} is required and must be a valid string.`);
+                    valid = false;
+                }
+                if (min === undefined || typeof min !== 'number') {
+                    errors.push(`Min value at index ${i} is required and must be a number.`);
+                    valid = false;
+                }
+                if (max === undefined || typeof max !== 'number') {
+                    errors.push(`Max value at index ${i} is required and must be a number.`);
+                    valid = false;
+                }
+                if (typeof min === 'number' && typeof max === 'number' && max <= min) {
+                    errors.push(`Max value at index ${i} must be greater than Min.`);
+                    valid = false;
+                }
+            }
+        }
+        else {
+            errors.push('At least one valid URL with min/max values is required.');
+            valid = false;
+        }
+        if (!valid) {
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { urls: { __errors: errors } }) })));
+        }
+        else {
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { urls: { __errors: [] } }) })));
+        }
+        if (this.props.formErrorSignal) {
+            this.props.formErrorSignal.emit(!valid);
+        }
+    }
+}

package/lib/formbuilder/objectform/vectorlayerform.js

@@ -44,6 +44,7 @@ export class VectorLayerPropertiesForm extends LayerPropertiesForm {
     }
     processSchema(data, schema, uiSchema) {
         this.removeFormEntry('color', data, schema, uiSchema);
+        this.removeFormEntry('symbologyState', data, schema, uiSchema);
         super.processSchema(data, schema, uiSchema);
         if (!data) {
             return;

package/lib/formbuilder/objectform/webGlLayerForm.js

@@ -5,6 +5,7 @@ import { LayerPropertiesForm } from './layerform';
 export class WebGlLayerPropertiesForm extends LayerPropertiesForm {
     processSchema(data, schema, uiSchema) {
         this.removeFormEntry('color', data, schema, uiSchema);
+        this.removeFormEntry('symbologyState', data, schema, uiSchema);
         super.processSchema(data, schema, uiSchema);
     }
 }

package/lib/index.d.ts

@@ -1,11 +1,14 @@
+export * from './classificationModes';
 export * from './commands';
 export * from './constants';
 export * from './dialogs/formdialog';
+export * from './formbuilder/objectform/baseform';
+export * from './icons';
 export * from './mainview';
+export * from './panelview';
+export * from './store';
+export * from './toolbar';
 export * from './tools';
-export * from './icons';
 export * from './types';
 export * from './widget';
-export * from './formbuilder/objectform/baseform';
-export * from './panelview';
-export * from './toolbar';
+export * from './annotations';

package/lib/index.js

@@ -1,11 +1,14 @@
+export * from './classificationModes';
 export * from './commands';
 export * from './constants';
 export * from './dialogs/formdialog';
+export * from './formbuilder/objectform/baseform';
+export * from './icons';
 export * from './mainview';
+export * from './panelview';
+export * from './store';
+export * from './toolbar';
 export * from './tools';
-export * from './icons';
 export * from './types';
 export * from './widget';
-export * from './formbuilder/objectform/baseform';
-export * from './panelview';
-export * from './toolbar';
+export * from './annotations';

package/lib/mainview/CollaboratorPointers.d.ts

@@ -0,0 +1,17 @@
+import { IDict, JgisCoordinates } from '@jupytergis/schema';
+import React from 'react';
+interface ICollaboratorPointersProps {
+    clients: IDict<ClientPointer>;
+}
+export type ClientPointer = {
+    username: string;
+    displayName: string;
+    color: string;
+    coordinates: JgisCoordinates;
+    lonLat: {
+        latitude: number;
+        longitude: number;
+    };
+};
+declare const CollaboratorPointers: ({ clients }: ICollaboratorPointersProps) => React.JSX.Element;
+export default CollaboratorPointers;

package/lib/mainview/CollaboratorPointers.js

@@ -0,0 +1,37 @@
+import { faArrowPointer, faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useState } from 'react';
+const CollaboratorPointers = ({ clients }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (React.createElement(React.Fragment, null, clients &&
+        Object.values(clients).map(client => (React.createElement("div", { className: "jGIS-Popup-Wrapper", style: {
+                left: `${client.coordinates.x}px`,
+                top: `${client.coordinates.y}px`
+            } },
+            React.createElement("div", { key: client.username, className: "jGIS-Remote-Pointer", style: {
+                    color: client.color,
+                    cursor: 'pointer'
+                }, onClick: () => {
+                    setIsOpen(!isOpen);
+                } },
+                React.createElement(FontAwesomeIcon, { icon: faArrowPointer, className: "jGIS-Remote-Pointer-Icon" })),
+            React.createElement("div", { style: {
+                    visibility: isOpen ? 'visible' : 'hidden',
+                    background: client.color
+                }, className: "jGIS-Remote-Pointer-Popup jGIS-Floating-Pointer-Popup" },
+                React.createElement("div", { className: "jGIS-Popup-Topbar", onClick: () => {
+                        setIsOpen(false);
+                    } },
+                    React.createElement(FontAwesomeIcon, { icon: faWindowMinimize, className: "jGIS-Popup-TopBarIcon" })),
+                React.createElement("div", { className: "jGIS-Remote-Pointer-Popup-Name" }, client.displayName),
+                React.createElement("div", { className: "jGIS-Remote-Pointer-Popup-Coordinates" },
+                    React.createElement("br", null),
+                    "Pointer Location:",
+                    React.createElement("br", null),
+                    "Longitude: ",
+                    client.lonLat.longitude.toFixed(2),
+                    React.createElement("br", null),
+                    "Latitude: ",
+                    client.lonLat.latitude.toFixed(2))))))));
+};
+export default CollaboratorPointers;

package/lib/mainview/FollowIndicator.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { User } from '@jupyterlab/services';
+interface IFollowIndicatorProps {
+    remoteUser: User.IIdentity | null | undefined;
+}
+export declare function FollowIndicator({ remoteUser }: IFollowIndicatorProps): React.JSX.Element | null;
+export {};

package/lib/mainview/FollowIndicator.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export function FollowIndicator({ remoteUser }) {
+    return (remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.display_name) ? (React.createElement("div", { style: {
+            position: 'absolute',
+            top: 1,
+            right: 3,
+            background: remoteUser.color
+        } }, `Following ${remoteUser.display_name}`)) : null;
+}