@jupytergis/base 0.2.1 → 0.4.0

package/lib/formbuilder/editform.js

@@ -1,22 +1,27 @@
-import { deepCopy } from '../tools';
+import { Signal } from '@lumino/signaling';
 import * as React from 'react';
+import { deepCopy } from '../tools';
 import { getLayerTypeForm, getSourceTypeForm } from './formselectors';
 /**
  * Form for editing a source, a layer or both at the same time
  */
 export class EditForm extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.sourceFormChangedSignal = new Signal(this);
+    }
     async syncObjectProperties(id, properties) {
         if (!id) {
             return;
         }
-        this.props.context.model.sharedModel.updateObjectParameters(id, properties);
+        this.props.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);
+            const layer = this.props.model.getLayer(this.props.layer);
             if (!layer) {
                 return;
             }
@@ -33,7 +38,7 @@ export class EditForm extends React.Component {
         let sourceData = undefined;
         let source = undefined;
         if (this.props.source) {
-            source = this.props.context.model.getSource(this.props.source);
+            source = this.props.model.getSource(this.props.source);
             if (!source) {
                 return;
             }
@@ -47,14 +52,14 @@ export class EditForm extends React.Component {
         }
         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) => {
+                React.createElement("h3", { style: { paddingLeft: '5px' } }, "Layer Properties"),
+                React.createElement(LayerForm, { formContext: "create", sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource', model: this.props.model, filePath: this.props.model.filePath, 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) => {
+                React.createElement("h3", { style: { paddingLeft: '5px' } }, "Source Properties"),
+                React.createElement(SourceForm, { formContext: "create", model: this.props.model, filePath: this.props.model.filePath, schema: sourceSchema, sourceData: sourceData, syncData: (properties) => {
                         this.syncObjectProperties(this.props.source, properties);
-                    } })))));
+                    }, formChangedSignal: this.sourceFormChangedSignal, sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource' })))));
     }
 }

package/lib/formbuilder/formselectors.js

@@ -1,11 +1,13 @@
 import { BaseForm } from './objectform/baseform';
 import { GeoJSONSourcePropertiesForm } from './objectform/geojsonsource';
+import { GeoTiffSourcePropertiesForm } from './objectform/geotiffsource';
+import { HeatmapLayerPropertiesForm } from './objectform/heatmapLayerForm';
 import { HillshadeLayerPropertiesForm } from './objectform/hillshadeLayerForm';
 import { LayerPropertiesForm } from './objectform/layerform';
+import { PathBasedSourcePropertiesForm } from './objectform/pathbasedsource';
 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) {
@@ -19,6 +21,8 @@ export function getLayerTypeForm(layerType) {
         case 'WebGlLayer':
             LayerForm = WebGlLayerPropertiesForm;
             break;
+        case 'HeatmapLayer':
+            LayerForm = HeatmapLayerPropertiesForm;
         // ADD MORE FORM TYPES HERE
     }
     return LayerForm;
@@ -29,6 +33,12 @@ export function getSourceTypeForm(sourceType) {
         case 'GeoJSONSource':
             SourceForm = GeoJSONSourcePropertiesForm;
             break;
+        case 'ImageSource':
+            SourceForm = PathBasedSourcePropertiesForm;
+            break;
+        case 'ShapefileSource':
+            SourceForm = PathBasedSourcePropertiesForm;
+            break;
         case 'GeoTiffSource':
             SourceForm = GeoTiffSourcePropertiesForm;
             break;

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

@@ -1,8 +1,8 @@
-import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
-import * as React from 'react';
-import { IJupyterGISModel } from '@jupytergis/schema';
+import { IJupyterGISModel, SourceType } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { Signal } from '@lumino/signaling';
+import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
+import * as React from 'react';
 import { IDict } from '../../types';
 export interface IBaseFormStates {
     schema?: IDict;
@@ -51,6 +51,15 @@ export interface IBaseFormProps {
      * extra errors or not.
      */
     formErrorSignal?: Signal<Dialog<any>, boolean>;
+    /**
+     * Configuration options for the dialog, including settings for layer data, source data,
+     * and other form-related parameters.
+     */
+    dialogOptions?: any;
+    /**
+     * Source type property
+     */
+    sourceType: SourceType;
 }
 /**
  * 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.

package/lib/formbuilder/objectform/baseform.js

@@ -9,6 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { Slider } from '@jupyter/react-components';
 import { FormComponent } from '@jupyterlab/ui-components';
 import validatorAjv8 from '@rjsf/validator-ajv8';
 import * as React from 'react';
@@ -69,6 +70,44 @@ export class BaseForm extends React.Component {
             if (v['type'] === 'object') {
                 this.processSchema(data, v, uiSchema[k]);
             }
+            if (k === 'opacity') {
+                uiSchema[k] = {
+                    'ui:field': (props) => {
+                        const [inputValue, setInputValue] = React.useState(props.formData.toFixed(1));
+                        React.useEffect(() => {
+                            setInputValue(props.formData.toFixed(1));
+                        }, [props.formData]);
+                        const handleSliderChange = (event) => {
+                            const target = event.target;
+                            if (target && '_value' in target) {
+                                const sliderValue = parseFloat(target._value); // Slider value is in 0–10 range
+                                const normalizedValue = sliderValue / 10; // Normalize to 0.1–1 range
+                                props.onChange(normalizedValue);
+                            }
+                        };
+                        const handleInputChange = (event) => {
+                            const value = event.target.value;
+                            setInputValue(value);
+                            const parsedValue = parseFloat(value);
+                            if (!isNaN(parsedValue) &&
+                                parsedValue >= 0.1 &&
+                                parsedValue <= 1) {
+                                props.onChange(parsedValue);
+                            }
+                        };
+                        return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+                            React.createElement(Slider, { min: 1, max: 10, step: 1, valueAsNumber: props.formData * 10, onChange: handleSliderChange }),
+                            React.createElement("input", { type: "number", value: inputValue, step: 0.1, min: 0.1, max: 1, onChange: handleInputChange, style: {
+                                    width: '50px',
+                                    textAlign: 'center',
+                                    border: '1px solid #ccc',
+                                    borderRadius: '4px',
+                                    padding: '4px',
+                                    marginBottom: '5px'
+                                } })));
+                    }
+                };
+            }
             // Don't show readOnly properties when it's a form for updating an object
             if (v['readOnly']) {
                 if (this.props.formContext === 'create') {

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FileSelectorWidget: (props: any) => React.JSX.Element;

package/lib/formbuilder/objectform/fileselectorwidget.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { FileDialog } from '@jupyterlab/filebrowser';
+import { Dialog } from '@jupyterlab/apputils';
+import { CreationFormDialog } from '../../dialogs/formdialog';
+import { PathExt } from '@jupyterlab/coreutils';
+export const FileSelectorWidget = (props) => {
+    const { options } = props;
+    const { docManager, formOptions } = options;
+    const [serverFilePath, setServerFilePath] = useState('');
+    const [urlPath, setUrlPath] = useState('');
+    const isTypingURL = useRef(false); // Tracks whether the user is manually typing a URL
+    useEffect(() => {
+        if (!isTypingURL.current && props.value) {
+            if (props.value.startsWith('http://') ||
+                props.value.startsWith('https://')) {
+                setUrlPath(props.value);
+                setServerFilePath('');
+            }
+            else {
+                setServerFilePath(props.value);
+                setUrlPath('');
+            }
+        }
+    }, [props.value]);
+    const handleBrowseServerFiles = async () => {
+        try {
+            const dialogElement = document.querySelector('dialog[aria-modal="true"]');
+            if (dialogElement) {
+                const dialogInstance = Dialog.tracker.find(dialog => dialog.node === dialogElement);
+                if (dialogInstance) {
+                    dialogInstance.resolve(0);
+                }
+            }
+            else {
+                console.warn('No open dialog found.');
+            }
+            const output = await FileDialog.getOpenFiles({
+                title: `Select ${formOptions.sourceType.split('Source')[0]} File`,
+                manager: docManager
+            });
+            if (output.value && output.value.length > 0) {
+                const selectedFilePath = output.value[0].path;
+                const relativePath = PathExt.relative(PathExt.dirname(formOptions.filePath), selectedFilePath);
+                setServerFilePath(relativePath);
+                setUrlPath('');
+                props.onChange(relativePath);
+                if (dialogElement) {
+                    if (formOptions.sourceType === 'GeoTiffSource') {
+                        formOptions.dialogOptions.sourceData = Object.assign(Object.assign({}, formOptions.sourceData), { urls: formOptions.dialogOptions.sourceData.urls.map((urlObject) => {
+                                return Object.assign(Object.assign({}, urlObject), { url: relativePath });
+                            }) });
+                    }
+                    else {
+                        formOptions.dialogOptions.sourceData = Object.assign(Object.assign({}, formOptions.sourceData), { path: relativePath });
+                    }
+                    const formDialog = new CreationFormDialog(Object.assign({}, formOptions.dialogOptions));
+                    await formDialog.launch();
+                }
+            }
+            else {
+                if (dialogElement) {
+                    const formDialog = new CreationFormDialog(Object.assign({}, formOptions.dialogOptions));
+                    await formDialog.launch();
+                }
+            }
+        }
+        catch (e) {
+            console.error('Error handling file dialog:', e);
+        }
+    };
+    const handleURLChange = (event) => {
+        const url = event.target.value.trim();
+        isTypingURL.current = true;
+        setUrlPath(url);
+        setServerFilePath('');
+        props.onChange(url);
+    };
+    const handleURLBlur = () => {
+        isTypingURL.current = false;
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "file-container" },
+            React.createElement("button", { className: "jp-mod-styled", onClick: handleBrowseServerFiles }, "Browse Server Files"),
+            React.createElement("p", null, serverFilePath || '')),
+        React.createElement("div", null,
+            React.createElement("h3", { className: "jp-FormGroup-fieldLabel jp-FormGroup-contentItem" }, "Or enter external URL"),
+            React.createElement("input", { type: "text", id: "root_path", className: "jp-mod-styled", onChange: handleURLChange, onBlur: handleURLBlur, value: urlPath || '', style: { width: '100%' } }))));
+};

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

@@ -1,19 +1,17 @@
 import { IDict } from '@jupytergis/schema';
-import { ISubmitEvent } from '@rjsf/core';
-import { BaseForm, IBaseFormProps } from './baseform';
+import { IBaseFormProps } from './baseform';
+import { PathBasedSourcePropertiesForm } from './pathbasedsource';
 /**
  * The form to modify a GeoJSON source.
  */
-export declare class GeoJSONSourcePropertiesForm extends BaseForm {
+export declare class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
+    private _validate;
     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;
+    protected _validatePath(path: string): Promise<void>;
 }

package/lib/formbuilder/objectform/geojsonsource.js

@@ -1,11 +1,11 @@
-import { showErrorMessage } from '@jupyterlab/apputils';
 import { Ajv } from 'ajv';
 import * as geojson from '@jupytergis/schema/src/schema/geojson.json';
-import { BaseForm } from './baseform';
+import { PathBasedSourcePropertiesForm } from './pathbasedsource';
+import { loadFile } from '../../tools';
 /**
  * The form to modify a GeoJSON source.
  */
-export class GeoJSONSourcePropertiesForm extends BaseForm {
+export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
     constructor(props) {
         var _a, _b;
         super(props);
@@ -18,26 +18,6 @@ export class GeoJSONSourcePropertiesForm extends BaseForm {
             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.
@@ -51,7 +31,11 @@ export class GeoJSONSourcePropertiesForm extends BaseForm {
         let valid = false;
         if (path) {
             try {
-                const geoJSONData = await this.props.model.readGeoJSON(path);
+                const geoJSONData = await loadFile({
+                    filepath: path,
+                    type: this.props.sourceType,
+                    model: this.props.model
+                });
                 valid = this._validate(geoJSONData);
                 if (!valid) {
                     error = `"${path}" is not a valid GeoJSON file`;

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

@@ -1,12 +1,16 @@
+import { IDict } from '@jupytergis/schema';
 import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
 import { BaseForm, IBaseFormProps } from './baseform';
 /**
  * The form to modify a GeoTiff source.
  */
 export declare class GeoTiffSourcePropertiesForm extends BaseForm {
+    private _isSubmitted;
     constructor(props: IBaseFormProps);
+    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
     protected onFormChange(e: IChangeEvent): void;
-    protected onFormSubmit(e: ISubmitEvent<any>): void;
+    protected onFormBlur(id: string, value: any): void;
+    protected onFormSubmit(e: ISubmitEvent<any>): Promise<void>;
     /**
      * Validate the URLs, ensuring that there is at least one object with required fields.
      *

package/lib/formbuilder/objectform/geotiffsource.js

@@ -1,5 +1,7 @@
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { BaseForm } from './baseform';
+import { FileSelectorWidget } from './fileselectorwidget';
+import { getMimeType } from '../../tools';
 /**
  * The form to modify a GeoTiff source.
  */
@@ -7,8 +9,29 @@ export class GeoTiffSourcePropertiesForm extends BaseForm {
     constructor(props) {
         var _a, _b;
         super(props);
+        this._isSubmitted = false;
         this._validateUrls((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.urls) !== null && _b !== void 0 ? _b : []);
     }
+    processSchema(data, schema, uiSchema) {
+        var _a;
+        super.processSchema(data, schema, uiSchema);
+        if (!schema.properties || !data) {
+            return;
+        }
+        // Customize the widget for urls
+        if (schema.properties && schema.properties.urls) {
+            const docManager = (_a = this.props.formChangedSignal) === null || _a === void 0 ? void 0 : _a.sender.props.formSchemaRegistry.getDocManager();
+            uiSchema.urls = Object.assign(Object.assign({}, uiSchema.urls), { items: Object.assign(Object.assign({}, uiSchema.urls.items), { url: {
+                        'ui:widget': FileSelectorWidget,
+                        'ui:options': {
+                            docManager,
+                            formOptions: this.props
+                        }
+                    } }) });
+        }
+        // This is not user-editable
+        delete schema.properties.valid;
+    }
     onFormChange(e) {
         var _a;
         super.onFormChange(e);
@@ -16,10 +39,21 @@ export class GeoTiffSourcePropertiesForm extends BaseForm {
             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]);
+    onFormBlur(id, value) {
+        // Is there a better way to spot the url text entry?
+        if (!id.endsWith('_urls')) {
+            return;
+        }
+        this._validateUrls(value);
+    }
+    async onFormSubmit(e) {
+        this._isSubmitted = true;
+        // validate urls.url only when submitting for better performance
+        const { valid, errors } = await this._validateUrls(e.formData.urls);
+        if (!valid) {
+            if (errors.length > 0) {
+                showErrorMessage('Invalid URLs', errors[0]);
+            }
             return;
         }
         super.onFormSubmit(e);
@@ -36,21 +70,32 @@ export class GeoTiffSourcePropertiesForm extends BaseForm {
         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 (this._isSubmitted) {
+                    const mimeType = getMimeType(url);
+                    if (!mimeType || !mimeType.startsWith('image/tiff')) {
+                        valid = false;
+                        errors.push(`"${url}" is not a valid ${this.props.sourceType} file.`);
+                    }
                 }
-                if (typeof min === 'number' && typeof max === 'number' && max <= min) {
-                    errors.push(`Max value at index ${i} must be greater than Min.`);
-                    valid = false;
+                else {
+                    if (!url || typeof url !== 'string' || url.trim() === '') {
+                        valid = false;
+                        errors.push(`URL at index ${i} is required and must be a valid string.`);
+                    }
+                    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;
+                    }
                 }
             }
         }
@@ -67,5 +112,6 @@ export class GeoTiffSourcePropertiesForm extends BaseForm {
         if (this.props.formErrorSignal) {
             this.props.formErrorSignal.emit(!valid);
         }
+        return { valid, errors };
     }
 }

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

@@ -0,0 +1,11 @@
+import { IDict, IHeatmapLayer } from '@jupytergis/schema';
+import { IChangeEvent } from '@rjsf/core';
+import { ILayerProps, LayerPropertiesForm } from './layerform';
+export declare class HeatmapLayerPropertiesForm extends LayerPropertiesForm {
+    protected currentFormData: IHeatmapLayer;
+    private features;
+    constructor(props: ILayerProps);
+    protected onFormChange(e: IChangeEvent): void;
+    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    private fetchFeatureNames;
+}

package/lib/formbuilder/objectform/heatmapLayerForm.js

@@ -0,0 +1,60 @@
+import { loadFile } from '../../tools';
+import { LayerPropertiesForm } from './layerform';
+export class HeatmapLayerPropertiesForm extends LayerPropertiesForm {
+    constructor(props) {
+        super(props);
+        this.features = [];
+        this.fetchFeatureNames(this.props.sourceData);
+        if (this.sourceFormChangedSignal) {
+            this.sourceFormChangedSignal.connect((sender, sourceData) => {
+                if (this.props.sourceType === 'GeoJSONSource') {
+                    this.fetchFeatureNames(this.currentFormData, sourceData);
+                }
+            });
+        }
+    }
+    onFormChange(e) {
+        super.onFormChange(e);
+        const source = this.props.model.getSource(e.formData.source);
+        if (!source || source.type !== 'GeoJSONSource') {
+            return;
+        }
+        this.fetchFeatureNames(this.currentFormData, source.parameters);
+    }
+    processSchema(data, schema, uiSchema) {
+        this.removeFormEntry('color', data, schema, uiSchema);
+        this.removeFormEntry('symbologyState', data, schema, uiSchema);
+        this.removeFormEntry('blur', data, schema, uiSchema);
+        this.removeFormEntry('radius', data, schema, uiSchema);
+        super.processSchema(data, schema, uiSchema);
+        uiSchema['feature'] = { enum: this.features };
+        if (!data) {
+            return;
+        }
+    }
+    async fetchFeatureNames(data, sourceData) {
+        var _a;
+        if (data && data.source) {
+            if (!sourceData) {
+                const currentSource = this.props.model.getSource(data.source);
+                if (!currentSource || currentSource.type !== 'GeoJSONSource') {
+                    this.features = [];
+                    return;
+                }
+                sourceData = currentSource.parameters;
+            }
+        }
+        const source = this.props.model.getSource(data.source);
+        if (!((_a = source === null || source === void 0 ? void 0 : source.parameters) === null || _a === void 0 ? void 0 : _a.path)) {
+            return;
+        }
+        const jsonData = await loadFile({
+            filepath: source.parameters.path,
+            type: 'GeoJSONSource',
+            model: this.props.model
+        });
+        const featureProps = jsonData.features[0].properties;
+        this.features = Object.keys(featureProps);
+        this.forceUpdate();
+    }
+}

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

@@ -1,6 +1,7 @@
 import { IDict, SourceType } from '@jupytergis/schema';
 import { BaseForm, IBaseFormProps } from './baseform';
 import { Signal } from '@lumino/signaling';
+import { IChangeEvent } from '@rjsf/core';
 export interface ILayerProps extends IBaseFormProps {
     /**
      * The source type for the layer
@@ -16,4 +17,5 @@ export declare class LayerPropertiesForm extends BaseForm {
     protected sourceFormChangedSignal: Signal<any, IDict<any>> | undefined;
     constructor(props: ILayerProps);
     protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected onFormChange(e: IChangeEvent): void;
 }

package/lib/formbuilder/objectform/layerform.js

@@ -14,4 +14,10 @@ export class LayerPropertiesForm extends BaseForm {
         schema.properties.source.enumNames = Object.values(availableSources);
         schema.properties.source.enum = Object.keys(availableSources);
     }
+    onFormChange(e) {
+        super.onFormChange(e);
+        if (this.props.dialogOptions) {
+            this.props.dialogOptions.layerData = Object.assign({}, e.formData);
+        }
+    }
 }

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

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