@jupytergis/base 0.1.1

package/lib/formbuilder/creationform.js

@@ -0,0 +1,117 @@
+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 { deepCopy } from '../tools';
+import { PromiseDelegate, UUID } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
+import * as React from 'react';
+import { getLayerTypeForm, getSourceTypeForm } from './formselectors';
+/**
+ * Form for creating a source, a layer or both at the same time
+ */
+export class CreationForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.sourceFormChangedSignal = new Signal(this);
+        this.filePath = props.context.path;
+        this.jGISModel = props.context.model;
+    }
+    render() {
+        var _a;
+        const sourceId = UUID.uuid4();
+        let layerSchema = undefined;
+        const LayerForm = getLayerTypeForm(this.props.layerType || 'RasterLayer');
+        const layerData = deepCopy(this.props.layerData || {});
+        if (this.props.createLayer) {
+            if (!this.props.layerType) {
+                console.error('Cannot create a layer without specifying its type');
+                return;
+            }
+            layerSchema = deepCopy(this.props.formSchemaRegistry.getSchemas().get(this.props.layerType));
+            if (!layerSchema) {
+                console.error(`Cannot find schema for ${this.props.layerType}`);
+                return;
+            }
+            // If a source is created as part of this form, remove the source selection from the layer form
+            if (this.props.createSource) {
+                (_a = layerSchema.properties) === null || _a === void 0 ? true : delete _a.source;
+                layerData.source = sourceId;
+            }
+            layerSchema['required'] = ['name', ...layerSchema['required']];
+            layerSchema['properties'] = Object.assign({ name: { type: 'string', description: 'The name of the layer' } }, layerSchema['properties']);
+        }
+        let sourceSchema = undefined;
+        const SourceForm = getSourceTypeForm(this.props.sourceType || 'RasterSource');
+        if (this.props.sourceType) {
+            sourceSchema = deepCopy(this.props.formSchemaRegistry.getSchemas().get(this.props.sourceType));
+            if (!sourceSchema) {
+                console.error(`Cannot find schema for ${this.props.sourceType}`);
+                return;
+            }
+            if (!this.props.createLayer) {
+                sourceSchema['required'] = ['name', ...sourceSchema['required']];
+                sourceSchema['properties'] = Object.assign({ name: { type: 'string', description: 'The name of the source' } }, sourceSchema['properties']);
+            }
+        }
+        const creationPromises = [];
+        let layerCreationPromise;
+        let sourceCreationPromise;
+        if (this.props.createLayer) {
+            layerCreationPromise = new PromiseDelegate();
+            creationPromises.push(layerCreationPromise.promise);
+        }
+        if (this.props.createSource) {
+            sourceCreationPromise = new PromiseDelegate();
+            creationPromises.push(sourceCreationPromise.promise);
+        }
+        // Perform the layer/source creation
+        Promise.all(creationPromises).then(async () => {
+            if (this.props.createSource) {
+                let actualName = '';
+                const _a = (await (sourceCreationPromise === null || sourceCreationPromise === void 0 ? void 0 : sourceCreationPromise.promise)), { name } = _a, sourceData = __rest(_a, ["name"]);
+                actualName =
+                    name ||
+                        (await (layerCreationPromise === null || layerCreationPromise === void 0 ? void 0 : layerCreationPromise.promise)).name + ' Source';
+                const sourceModel = {
+                    type: this.props.sourceType || 'RasterSource',
+                    name: actualName,
+                    parameters: sourceData
+                };
+                this.jGISModel.sharedModel.addSource(sourceId, sourceModel);
+            }
+            if (this.props.createLayer) {
+                let actualName = '';
+                const _b = (await (layerCreationPromise === null || layerCreationPromise === void 0 ? void 0 : layerCreationPromise.promise)), { name } = _b, layerData = __rest(_b, ["name"]);
+                actualName =
+                    name ||
+                        (await (layerCreationPromise === null || layerCreationPromise === void 0 ? void 0 : layerCreationPromise.promise)).name + ' Layer';
+                const layerModel = {
+                    type: this.props.layerType || 'RasterLayer',
+                    parameters: layerData,
+                    visible: true,
+                    name: actualName
+                };
+                this.jGISModel.addLayer(UUID.uuid4(), layerModel);
+            }
+        });
+        return (React.createElement("div", null,
+            this.props.createSource && (React.createElement("div", null,
+                React.createElement("h3", null, "Source Properties"),
+                React.createElement(SourceForm, { formContext: "create", model: this.jGISModel, filePath: `${this.filePath}::panel`, schema: sourceSchema, sourceData: this.props.sourceData, syncData: (properties) => {
+                        sourceCreationPromise === null || sourceCreationPromise === void 0 ? void 0 : sourceCreationPromise.resolve(properties);
+                    }, ok: this.props.ok, cancel: this.props.cancel, formChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal }))),
+            this.props.createLayer && (React.createElement("div", null,
+                React.createElement("h3", null, "Layer Properties"),
+                React.createElement(LayerForm, { formContext: "create", sourceType: this.props.sourceType, model: this.jGISModel, filePath: `${this.filePath}::panel`, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
+                        layerCreationPromise === null || layerCreationPromise === void 0 ? void 0 : layerCreationPromise.resolve(properties);
+                    }, ok: this.props.ok, cancel: this.props.cancel, sourceFormChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal })))));
+    }
+}

package/lib/formbuilder/editform.d.ts

@@ -0,0 +1,24 @@
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { IJGISFormSchemaRegistry, IJupyterGISModel } from '@jupytergis/schema';
+import * as React from 'react';
+export interface IEditFormProps {
+    /**
+     * The layer to edit
+     */
+    layer: string | undefined;
+    /**
+     * The source to edit
+     */
+    source: string | undefined;
+    formSchemaRegistry: IJGISFormSchemaRegistry;
+    context: DocumentRegistry.IContext<IJupyterGISModel>;
+}
+/**
+ * Form for editing a source, a layer or both at the same time
+ */
+export declare class EditForm extends React.Component<IEditFormProps, any> {
+    syncObjectProperties(id: string | undefined, properties: {
+        [key: string]: any;
+    }): Promise<void>;
+    render(): React.JSX.Element | undefined;
+}

package/lib/formbuilder/editform.js

@@ -0,0 +1,60 @@
+import { deepCopy } from '../tools';
+import * as React from 'react';
+import { getLayerTypeForm, getSourceTypeForm } from './formselectors';
+/**
+ * Form for editing a source, a layer or both at the same time
+ */
+export class EditForm extends React.Component {
+    async syncObjectProperties(id, properties) {
+        if (!id) {
+            return;
+        }
+        this.props.context.model.sharedModel.updateObjectParameters(id, properties);
+    }
+    render() {
+        let layerSchema = undefined;
+        let LayerForm = undefined;
+        let layerData = undefined;
+        if (this.props.layer) {
+            const layer = this.props.context.model.getLayer(this.props.layer);
+            if (!layer) {
+                return;
+            }
+            LayerForm = getLayerTypeForm((layer === null || layer === void 0 ? void 0 : layer.type) || 'RasterLayer');
+            layerData = deepCopy((layer === null || layer === void 0 ? void 0 : layer.parameters) || {});
+            layerSchema = deepCopy(this.props.formSchemaRegistry.getSchemas().get(layer.type));
+            if (!layerSchema) {
+                console.error(`Cannot find schema for ${layer.type}`);
+                return;
+            }
+        }
+        let sourceSchema = undefined;
+        let SourceForm = undefined;
+        let sourceData = undefined;
+        let source = undefined;
+        if (this.props.source) {
+            source = this.props.context.model.getSource(this.props.source);
+            if (!source) {
+                return;
+            }
+            SourceForm = getSourceTypeForm((source === null || source === void 0 ? void 0 : source.type) || 'RasterSource');
+            sourceData = deepCopy((source === null || source === void 0 ? void 0 : source.parameters) || {});
+            sourceSchema = deepCopy(this.props.formSchemaRegistry.getSchemas().get(source.type));
+            if (!sourceSchema) {
+                console.error(`Cannot find schema for ${source.type}`);
+                return;
+            }
+        }
+        return (React.createElement("div", null,
+            this.props.layer && LayerForm && (React.createElement("div", null,
+                React.createElement("h3", null, "Layer Properties"),
+                React.createElement(LayerForm, { formContext: "create", sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource', model: this.props.context.model, filePath: `${this.props.context.path}::panel`, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
+                        this.syncObjectProperties(this.props.layer, properties);
+                    } }))),
+            this.props.source && SourceForm && (React.createElement("div", null,
+                React.createElement("h3", null, "Source Properties"),
+                React.createElement(SourceForm, { formContext: "create", model: this.props.context.model, filePath: `${this.props.context.path}::panel`, schema: sourceSchema, sourceData: sourceData, syncData: (properties) => {
+                        this.syncObjectProperties(this.props.source, properties);
+                    } })))));
+    }
+}

package/lib/formbuilder/formselectors.d.ts

@@ -0,0 +1,5 @@
+import { LayerType, SourceType } from '@jupytergis/schema';
+import { BaseForm } from './objectform/baseform';
+import { LayerPropertiesForm } from './objectform/layerform';
+export declare function getLayerTypeForm(layerType: LayerType): typeof LayerPropertiesForm;
+export declare function getSourceTypeForm(sourceType: SourceType): typeof BaseForm;

package/lib/formbuilder/formselectors.js

@@ -0,0 +1,38 @@
+import { BaseForm } from './objectform/baseform';
+import { GeoJSONSourcePropertiesForm } from './objectform/geojsonsource';
+import { HillshadeLayerPropertiesForm } from './objectform/hillshadeLayerForm';
+import { LayerPropertiesForm } from './objectform/layerform';
+import { TileSourcePropertiesForm } from './objectform/tilesourceform';
+import { VectorLayerPropertiesForm } from './objectform/vectorlayerform';
+import { WebGlLayerPropertiesForm } from './objectform/webGlLayerForm';
+export function getLayerTypeForm(layerType) {
+    let LayerForm = LayerPropertiesForm;
+    switch (layerType) {
+        case 'VectorTileLayer':
+        case 'VectorLayer':
+            LayerForm = VectorLayerPropertiesForm;
+            break;
+        case 'HillshadeLayer':
+            LayerForm = HillshadeLayerPropertiesForm;
+            break;
+        case 'WebGlLayer':
+            LayerForm = WebGlLayerPropertiesForm;
+            break;
+        // ADD MORE FORM TYPES HERE
+    }
+    return LayerForm;
+}
+export function getSourceTypeForm(sourceType) {
+    let SourceForm = BaseForm;
+    switch (sourceType) {
+        case 'GeoJSONSource':
+            SourceForm = GeoJSONSourcePropertiesForm;
+            break;
+        case 'RasterSource':
+        case 'VectorTileSource':
+            SourceForm = TileSourcePropertiesForm;
+            break;
+        // ADD MORE FORM TYPES HERE
+    }
+    return SourceForm;
+}

package/lib/formbuilder/index.d.ts

@@ -0,0 +1,6 @@
+export * from './objectform/baseform';
+export * from './objectform/geojsonsource';
+export * from './objectform/layerform';
+export * from './objectform/tilesourceform';
+export * from './objectform/vectorlayerform';
+export * from './creationform';

package/lib/formbuilder/index.js

@@ -0,0 +1,6 @@
+export * from './objectform/baseform';
+export * from './objectform/geojsonsource';
+export * from './objectform/layerform';
+export * from './objectform/tilesourceform';
+export * from './objectform/vectorlayerform';
+export * from './creationform';

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

@@ -0,0 +1,79 @@
+import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
+import * as React from 'react';
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { Dialog } from '@jupyterlab/apputils';
+import { Signal } from '@lumino/signaling';
+import { IDict } from '../../types';
+export interface IBaseFormStates {
+    schema?: IDict;
+    extraErrors?: any;
+}
+export interface IBaseFormProps {
+    /**
+     * The context of the form, whether it's for creating an object or updating its properties. This will have the effect of showing or not inputs for readonly properties.
+     */
+    formContext: 'update' | 'create';
+    /**
+     * The source data for filling the form
+     */
+    sourceData: IDict | undefined;
+    /**
+     * Path to the file
+     */
+    filePath?: string;
+    /**
+     * Current GIS model
+     */
+    model: IJupyterGISModel;
+    /**
+     * callback for syncing back the data into the model upon form submit
+     * @param properties
+     */
+    syncData: (properties: IDict) => void;
+    /**
+     * The schema for the rjsf formk
+     */
+    schema?: IDict;
+    /**
+     * Ok signal. This is the signal sent by the parent dialog upon "Ok" button click. No ok button will be displayed if defined.
+     */
+    ok?: Signal<Dialog<any>, number>;
+    /**
+     * Cancel callback
+     */
+    cancel?: () => void;
+    /**
+     * A signal emitting when the form changed
+     */
+    formChangedSignal?: Signal<any, IDict<any>>;
+    /**
+     * A signal emitting when the form has extra errors, with a boolean whether there are some
+     * extra errors or not.
+     */
+    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.
+ *
+ * It will be up to the user of this class to actually perform the creation/edit using syncdata.
+ */
+export declare class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
+    constructor(props: IBaseFormProps);
+    componentDidUpdate(prevProps: IBaseFormProps, prevState: IBaseFormStates): 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.
+     * @param entry The entry name
+     * @param data The form data
+     * @param schema The form schema
+     * @param uiSchema The form uiSchema
+     */
+    protected removeFormEntry(entry: string, data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected syncData(properties: IDict<any> | undefined): void;
+    protected onFormChange(e: IChangeEvent): void;
+    protected onFormBlur(id: string, value: any): void;
+    protected onFormSubmit(e: ISubmitEvent<any>): void;
+    render(): React.ReactNode;
+    protected currentFormData: IDict<any> | undefined;
+}

package/lib/formbuilder/objectform/baseform.js

@@ -0,0 +1,167 @@
+import { SchemaForm } from '@deathbeds/jupyterlab-rjsf';
+import { MessageLoop } from '@lumino/messaging';
+import { Widget } from '@lumino/widgets';
+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 });
+};
+/**
+ * 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.
+ *
+ * It will be up to the user of this class to actually perform the creation/edit using syncdata.
+ */
+export class BaseForm extends React.Component {
+    constructor(props) {
+        super(props);
+        this.currentFormData = deepCopy(this.props.sourceData);
+        this.state = {
+            schema: props.schema,
+            extraErrors: {}
+        };
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.sourceData !== this.props.sourceData) {
+            this.currentFormData = deepCopy(this.props.sourceData);
+            const schema = deepCopy(this.props.schema);
+            this.setState(old => (Object.assign(Object.assign({}, old), { schema })));
+        }
+    }
+    processSchema(data, schema, uiSchema) {
+        if (!schema['properties']) {
+            return;
+        }
+        Object.entries(schema['properties']).forEach(([k, v]) => {
+            uiSchema[k] = {};
+            if (v['type'] === 'array') {
+                // Remove array buttons
+                uiSchema[k] = Object.assign({ 'ui:options': {
+                        orderable: false,
+                        removable: false,
+                        addable: false
+                    } }, uiSchema[k]);
+                if (v['items']['type'] === 'array') {
+                    uiSchema[k] = Object.assign({ items: Object.assign({ 'ui:options': {
+                                orderable: false,
+                                removable: false,
+                                addable: false
+                            } }, uiSchema[k]['items']) }, uiSchema[k]);
+                }
+            }
+            if (v['type'] === 'object') {
+                this.processSchema(data, v, uiSchema[k]);
+            }
+            // Don't show readOnly properties when it's a form for updating an object
+            if (v['readOnly']) {
+                if (this.props.formContext === 'create') {
+                    delete v['readOnly'];
+                }
+                if (this.props.formContext === 'update') {
+                    this.removeFormEntry(k, data, schema, uiSchema);
+                }
+            }
+        });
+    }
+    /**
+     * Remove a specific entry from the form. Can be used in subclasses if needed while under processSchema.
+     * @param entry The entry name
+     * @param data The form data
+     * @param schema The form schema
+     * @param uiSchema The form uiSchema
+     */
+    removeFormEntry(entry, data, schema, uiSchema) {
+        if (data) {
+            delete data[entry];
+        }
+        delete schema.properties[entry];
+        delete uiSchema[entry];
+        if (schema.required && schema.required.includes(entry)) {
+            schema.required.splice(schema.required.indexOf(entry), 1);
+        }
+    }
+    syncData(properties) {
+        if (!properties) {
+            return;
+        }
+        this.props.syncData(properties);
+    }
+    onFormChange(e) {
+        this.currentFormData = e.formData;
+        if (this.props.formChangedSignal) {
+            this.props.formChangedSignal.emit(this.currentFormData || {});
+        }
+        if (this.props.formErrorSignal) {
+            const extraErrors = Object.keys(this.state.extraErrors).length > 0;
+            this.props.formErrorSignal.emit(extraErrors);
+        }
+    }
+    onFormBlur(id, value) {
+        // This is a no-op here
+    }
+    onFormSubmit(e) {
+        this.currentFormData = e.formData;
+        this.syncData(this.currentFormData);
+        this.props.cancel && this.props.cancel();
+    }
+    render() {
+        var _a, _b;
+        if (this.props.schema) {
+            const schema = Object.assign(Object.assign({}, this.state.schema), { additionalProperties: true });
+            const formData = this.currentFormData;
+            const uiSchema = {
+                additionalProperties: {
+                    'ui:label': false,
+                    classNames: 'jGIS-hidden-field'
+                }
+            };
+            this.processSchema(formData, schema, uiSchema);
+            const submitRef = React.createRef();
+            // When the parent "ok" button gets clicked, submit
+            (_a = this.props.ok) === null || _a === void 0 ? void 0 : _a.connect(() => {
+                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)),
+                !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.d.ts

@@ -0,0 +1,19 @@
+import { IDict } from '@jupytergis/schema';
+import { ISubmitEvent } from '@rjsf/core';
+import { BaseForm, IBaseFormProps } from './baseform';
+/**
+ * The form to modify a GeoJSON source.
+ */
+export declare class GeoJSONSourcePropertiesForm extends BaseForm {
+    constructor(props: IBaseFormProps);
+    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected onFormBlur(id: string, value: any): void;
+    protected onFormSubmit(e: ISubmitEvent<any>): void;
+    /**
+     * Validate the path, to avoid invalid path or invalid GeoJSON.
+     *
+     * @param path - the path to validate.
+     */
+    private _validatePath;
+    private _validate;
+}

package/lib/formbuilder/objectform/geojsonsource.js

@@ -0,0 +1,80 @@
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { Ajv } from 'ajv';
+import * as geojson from 'geojson-schema/GeoJSON.json';
+import { BaseForm } from './baseform';
+/**
+ * The form to modify a GeoJSON source.
+ */
+export class GeoJSONSourcePropertiesForm extends BaseForm {
+    constructor(props) {
+        var _a, _b;
+        super(props);
+        const ajv = new Ajv();
+        this._validate = ajv.compile(geojson);
+        this._validatePath((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '');
+    }
+    processSchema(data, schema, uiSchema) {
+        if ((data === null || data === void 0 ? void 0 : data.path) !== '') {
+            this.removeFormEntry('data', data, schema, uiSchema);
+        }
+        super.processSchema(data, schema, uiSchema);
+        if (!schema.properties || !data) {
+            return;
+        }
+        // This is not user-editable
+        delete schema.properties.valid;
+    }
+    onFormBlur(id, value) {
+        // Is there a better way to spot the path text entry?
+        if (!id.endsWith('_path')) {
+            return;
+        }
+        this._validatePath(value);
+    }
+    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 JSON file', this.state.extraErrors.path.__errors[0]);
+            return;
+        }
+        super.onFormSubmit(e);
+    }
+    /**
+     * Validate the path, to avoid invalid path or invalid GeoJSON.
+     *
+     * @param path - the path to validate.
+     */
+    async _validatePath(path) {
+        const extraErrors = {
+            path: {
+                __errors: []
+            }
+        };
+        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);
+                });
+            }
+            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);
+            }
+        });
+    }
+}

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

@@ -0,0 +1,8 @@
+import { IDict } from '@jupytergis/schema';
+import { LayerPropertiesForm } from './layerform';
+/**
+ * The form to modify a hillshade layer.
+ */
+export declare class HillshadeLayerPropertiesForm extends LayerPropertiesForm {
+    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+}

package/lib/formbuilder/objectform/hillshadeLayerForm.js

@@ -0,0 +1,12 @@
+import { LayerPropertiesForm } from './layerform';
+/**
+ * The form to modify a hillshade layer.
+ */
+export class HillshadeLayerPropertiesForm extends LayerPropertiesForm {
+    processSchema(data, schema, uiSchema) {
+        super.processSchema(data, schema, uiSchema);
+        uiSchema['shadowColor'] = {
+            'ui:widget': 'color'
+        };
+    }
+}

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

@@ -0,0 +1,19 @@
+import { IDict, SourceType } from '@jupytergis/schema';
+import { BaseForm, IBaseFormProps } from './baseform';
+import { Signal } from '@lumino/signaling';
+export interface ILayerProps extends IBaseFormProps {
+    /**
+     * The source type for the layer
+     */
+    sourceType: SourceType;
+    /**
+     * The signal emitted when the attached source form has changed, if it exists
+     */
+    sourceFormChangedSignal?: Signal<any, IDict<any>>;
+}
+export declare class LayerPropertiesForm extends BaseForm {
+    props: ILayerProps;
+    protected sourceFormChangedSignal: Signal<any, IDict<any>> | undefined;
+    constructor(props: ILayerProps);
+    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+}