@jupytergis/base 0.3.0 → 0.4.1

package/lib/dialogs/symbology/vector_layer/types/Graduated.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISymbologyDialogProps } from '../../symbologyDialog';
-declare const Graduated: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+declare const Graduated: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 export default Graduated;

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { getNumericFeatureAttributes } from '../../../../tools';
 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 }) => {
+import ValueSelect from '../components/ValueSelect';
+const Graduated = ({ model, state, okSignalPromise, cancel, layerId }) => {
     const modeOptions = [
         'quantile',
         'equal interval',
@@ -21,17 +22,18 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const [selectedMethod, setSelectedMethod] = useState('color');
     const [stopRows, setStopRows] = useState([]);
     const [methodOptions, setMethodOptions] = useState(['color']);
+    const [features, setFeatures] = useState({});
     const [colorRampOptions, setColorRampOptions] = useState();
     if (!layerId) {
         return;
     }
-    const layer = context.model.getLayer(layerId);
+    const layer = model.getLayer(layerId);
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    const { featureProps } = useGetProperties({
+    const { featureProperties } = useGetProperties({
         layerId,
-        model: context.model
+        model: model
     });
     useEffect(() => {
         var _a, _b;
@@ -61,21 +63,21 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
         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);
         }
+        // We only want number values here
+        const numericFeatures = getNumericFeatureAttributes(featureProperties);
+        setFeatures(numericFeatures);
         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 value = (_c = (_b = layerParams.symbologyState) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : Object.keys(numericFeatures)[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);
-    };
+    }, [featureProperties]);
     const handleOk = () => {
         var _a, _b, _c, _d;
         if (!layer.parameters) {
@@ -116,7 +118,8 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = newStyle;
-        context.model.sharedModel.updateLayer(layerId, layer);
+        layer.type = 'VectorLayer';
+        model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
     const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp) => {
@@ -126,7 +129,7 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
             selectedMode
         });
         let stops;
-        const values = Array.from(featureProps[selectedValue]);
+        const values = Array.from(features[selectedValue]);
         switch (selectedMode) {
             case 'quantile':
                 stops = VectorClassifications.calculateQuantileBreaks(values, +numberOfShades);
@@ -159,7 +162,7 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
         setStopRows(stopOutputPairs);
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement(ValueSelect, { featureProperties: featureProps, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
+        React.createElement(ValueSelect, { featureProperties: features, 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))))),

package/lib/dialogs/symbology/vector_layer/types/Heatmap.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISymbologyDialogProps } from '../../symbologyDialog';
+declare const Heatmap: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+export default Heatmap;

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

@@ -0,0 +1,77 @@
+import colormap from 'colormap';
+import React, { useEffect, useRef, useState } from 'react';
+import CanvasSelectComponent from '../../components/color_ramp/CanvasSelectComponent';
+const Heatmap = ({ model, state, okSignalPromise, cancel, layerId }) => {
+    if (!layerId) {
+        return;
+    }
+    const layer = model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    const [selectedRamp, setSelectedRamp] = useState('');
+    const [heatmapOptions, setHetamapOptions] = useState({
+        radius: 8,
+        blur: 15
+    });
+    const selectedRampRef = useRef('cool');
+    const heatmapOptionsRef = useRef({
+        radius: 8,
+        blur: 15
+    });
+    useEffect(() => {
+        populateOptions();
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        selectedRampRef.current = selectedRamp;
+        heatmapOptionsRef.current = heatmapOptions;
+    }, [selectedRamp, heatmapOptions]);
+    const populateOptions = async () => {
+        var _a;
+        let colorRamp;
+        if ((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) {
+            colorRamp = layer.parameters.symbologyState.colorRamp;
+        }
+        setSelectedRamp(colorRamp ? colorRamp : 'cool');
+    };
+    const handleOk = () => {
+        if (!layer.parameters) {
+            return;
+        }
+        const colorMap = colormap({
+            colormap: selectedRampRef.current,
+            nshades: 9,
+            format: 'hex'
+        });
+        const symbologyState = {
+            renderType: 'Heatmap',
+            colorRamp: selectedRampRef.current
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = colorMap;
+        layer.parameters.blur = heatmapOptionsRef.current.blur;
+        layer.parameters.radius = heatmapOptionsRef.current.radius;
+        layer.type = 'HeatmapLayer';
+        model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
+            React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
+            React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Radius:"),
+            React.createElement("input", { type: "number", value: heatmapOptions.radius, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { radius: +event.target.value }))) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Blur:"),
+            React.createElement("input", { type: "number", value: heatmapOptions.blur, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { blur: +event.target.value }))) }))));
+};
+export default Heatmap;

package/lib/dialogs/symbology/vector_layer/types/SimpleSymbol.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISymbologyDialogProps } from '../../symbologyDialog';
-declare const SimpleSymbol: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+declare const SimpleSymbol: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 export default SimpleSymbol;

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { parseColor } from '../../../../tools';
-const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
+const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId }) => {
     const styleRef = useRef();
     const [useCircleStuff, setUseCircleStuff] = useState(false);
     const [style, setStyle] = useState({
@@ -16,7 +16,7 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
     if (!layerId) {
         return;
     }
-    const layer = context.model.getLayer(layerId);
+    const layer = model.getLayer(layerId);
     if (!layer) {
         return;
     }
@@ -75,7 +75,8 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = styleExpr;
-        context.model.sharedModel.updateLayer(layerId, layer);
+        layer.type = 'VectorLayer';
+        model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },

package/lib/formbuilder/creationform.d.ts

@@ -1,4 +1,3 @@
-import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IDict, IJGISFormSchemaRegistry, IJupyterGISModel, LayerType, SourceType } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { Signal } from '@lumino/signaling';
@@ -37,7 +36,7 @@ export interface ICreationFormProps {
      */
     cancel?: () => void;
     formSchemaRegistry: IJGISFormSchemaRegistry;
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     /**
      * A signal emitting when the form changed, with a boolean whether there are some
      * extra errors or not.

package/lib/formbuilder/creationform.js

@@ -21,8 +21,8 @@ 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;
+        this.filePath = props.model.filePath;
+        this.jGISModel = props.model;
     }
     render() {
         var _a;
@@ -105,12 +105,12 @@ export class CreationForm extends React.Component {
         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) => {
+                React.createElement(SourceForm, { formContext: "create", model: this.jGISModel, filePath: this.filePath, 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, dialogOptions: this.props.dialogOptions, sourceType: this.props.sourceType }))),
             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) => {
+                React.createElement(LayerForm, { formContext: "create", sourceType: this.props.sourceType, model: this.jGISModel, filePath: this.filePath, 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, dialogOptions: this.props.dialogOptions })))));
     }

package/lib/formbuilder/editform.d.ts

@@ -1,4 +1,3 @@
-import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IJGISFormSchemaRegistry, IJupyterGISModel } from '@jupytergis/schema';
 import * as React from 'react';
 export interface IEditFormProps {
@@ -11,7 +10,7 @@ export interface IEditFormProps {
      */
     source: string | undefined;
     formSchemaRegistry: IJGISFormSchemaRegistry;
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
 }
 /**
  * Form for editing a source, a layer or both at the same time

package/lib/formbuilder/editform.js

@@ -1,7 +1,7 @@
-import { deepCopy } from '../tools';
+import { Signal } from '@lumino/signaling';
 import * as React from 'react';
+import { deepCopy } from '../tools';
 import { getLayerTypeForm, getSourceTypeForm } from './formselectors';
-import { Signal } from '@lumino/signaling';
 /**
  * Form for editing a source, a layer or both at the same time
  */
@@ -14,14 +14,14 @@ export class EditForm extends React.Component {
         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;
             }
@@ -38,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;
             }
@@ -53,12 +53,12 @@ export class EditForm extends React.Component {
         return (React.createElement("div", null,
             this.props.layer && LayerForm && (React.createElement("div", null,
                 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.context.model, filePath: `${this.props.context.path}::panel`, schema: layerSchema, sourceData: layerData, syncData: (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", { style: { paddingLeft: '5px' } }, "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(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,12 +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';
-import { PathBasedSourcePropertiesForm } from './objectform/pathbasedsource';
 export function getLayerTypeForm(layerType) {
     let LayerForm = LayerPropertiesForm;
     switch (layerType) {
@@ -20,6 +21,8 @@ export function getLayerTypeForm(layerType) {
         case 'WebGlLayer':
             LayerForm = WebGlLayerPropertiesForm;
             break;
+        case 'HeatmapLayer':
+            LayerForm = HeatmapLayerPropertiesForm;
         // ADD MORE FORM TYPES HERE
     }
     return LayerForm;

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

@@ -1,10 +1,9 @@
-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';
-import { SourceType } from '@jupytergis/schema';
 export interface IBaseFormStates {
     schema?: IDict;
     extraErrors?: any;

package/lib/formbuilder/objectform/baseform.js

@@ -9,11 +9,11 @@ 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';
 import { deepCopy } from '../../tools';
-import { Slider } from '@jupyter/react-components';
 const WrappedFormComponent = (props) => {
     const { fields } = props, rest = __rest(props, ["fields"]);
     return (React.createElement(FormComponent, Object.assign({}, rest, { validator: validatorAjv8, fields: Object.assign({}, fields) })));
@@ -96,7 +96,7 @@ export class BaseForm extends React.Component {
                             }
                         };
                         return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-                            React.createElement(Slider, { min: 1, max: 10, step: 1, value: props.formData * 10, onChange: handleSliderChange }),
+                            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',

package/lib/formbuilder/objectform/fileselectorwidget.js

@@ -35,17 +35,24 @@ export const FileSelectorWidget = (props) => {
                 console.warn('No open dialog found.');
             }
             const output = await FileDialog.getOpenFiles({
-                title: 'Select a File',
+                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(formOptions.filePath, selectedFilePath);
+                const relativePath = PathExt.relative(PathExt.dirname(formOptions.filePath), selectedFilePath);
                 setServerFilePath(relativePath);
                 setUrlPath('');
                 props.onChange(relativePath);
                 if (dialogElement) {
-                    formOptions.dialogOptions.sourceData = Object.assign(Object.assign({}, formOptions.sourceData), { path: relativePath });
+                    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();
                 }
@@ -72,9 +79,9 @@ export const FileSelectorWidget = (props) => {
         isTypingURL.current = false;
     };
     return (React.createElement("div", null,
-        React.createElement("div", null,
-            React.createElement("input", { type: "text", className: "jp-mod-styled", value: serverFilePath || '', readOnly: true, style: { width: '70%', marginRight: '10px' } }),
-            React.createElement("button", { className: "jp-mod-styled", onClick: handleBrowseServerFiles }, "Browse Server Files")),
+        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/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,6 @@
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { BaseForm } from './baseform';
+import { getMimeType } from '../../tools';
 /**
  * The form to modify a GeoTiff source.
  */
@@ -7,8 +8,17 @@ 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) {
+        super.processSchema(data, schema, uiSchema);
+        if (!schema.properties || !data) {
+            return;
+        }
+        // This is not user-editable
+        delete schema.properties.valid;
+    }
     onFormChange(e) {
         var _a;
         super.onFormChange(e);
@@ -16,10 +26,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 +57,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 +99,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/vectorlayerform.d.ts

@@ -6,10 +6,8 @@ import { ILayerProps, LayerPropertiesForm } from './layerform';
  */
 export declare class VectorLayerPropertiesForm extends LayerPropertiesForm {
     protected currentFormData: IVectorLayer;
-    private sourceLayers;
     private currentSourceId;
     constructor(props: ILayerProps);
     protected onFormChange(e: IChangeEvent): void;
     protected processSchema(data: IVectorLayer | undefined, schema: IDict, uiSchema: IDict): void;
-    private fetchSourceLayers;
 }