@jupytergis/base 0.13.2 → 0.14.0

package/lib/dialogs/symbology/components/color_ramp/ColorRampSelector.js

@@ -14,7 +14,7 @@ import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 import { useColorMapList, } from "../../colorRampUtils";
 import ColorRampSelectorEntry from './ColorRampSelectorEntry';
-const ColorRampSelector = ({ selectedRamp, setSelected, }) => {
+const ColorRampSelector = ({ selectedRamp, setSelected, reverse, setReverse, }) => {
     const containerRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [colorMaps, setColorMaps] = useState([]);
@@ -25,7 +25,7 @@ const ColorRampSelector = ({ selectedRamp, setSelected, }) => {
         if (colorMaps.length > 0) {
             updateCanvas(selectedRamp);
         }
-    }, [selectedRamp, colorMaps]);
+    }, [selectedRamp, colorMaps, reverse]);
     const toggleDropdown = () => {
         setIsOpen(!isOpen);
     };
@@ -53,12 +53,16 @@ const ColorRampSelector = ({ selectedRamp, setSelected, }) => {
         if (!ctx) {
             return;
         }
-        const ramp = colorMaps.filter(c => c.name === rampName);
+        const ramp = colorMaps.filter(c => c.name === rampName)[0];
+        let colors = ramp.colors;
+        if (reverse) {
+            colors = [...colors].reverse();
+        }
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
         for (let i = 0; i <= 255; i++) {
             ctx.beginPath();
-            const color = ramp[0].colors[i];
+            const color = colors[i];
             ctx.fillStyle = color;
             ctx.fillRect(i * 2, 0, 2, canvasHeight);
         }
@@ -75,6 +79,10 @@ const ColorRampSelector = ({ selectedRamp, setSelected, }) => {
             React.createElement("div", { className: "jp-gis-color-ramp-entry jp-gis-selected-entry" },
                 React.createElement("span", { className: "jp-gis-color-label" }, selectedRamp),
                 React.createElement("canvas", { id: "cv", className: "jp-gis-color-canvas-display", width: canvasWidth, height: canvasHeight }))),
-        React.createElement("div", { className: `jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}` }, colorMaps.map((item, index) => (React.createElement(ColorRampSelectorEntry, { index: index, colorMap: item, onClick: selectItem }))))));
+        React.createElement("div", { className: `jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}` }, colorMaps.map((item, index) => (React.createElement(ColorRampSelectorEntry, { index: index, colorMap: item, onClick: selectItem })))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { className: "jp-gis-inline-label" },
+                React.createElement("input", { type: "checkbox", checked: reverse, onChange: e => setReverse(e.target.checked) }),
+                "Reverse Color Ramp"))));
 };
 export default ColorRampSelector;

package/lib/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.js

@@ -114,7 +114,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
         setStopRows(valueColorPairs);
     };
     const handleOk = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const bandRow = bandRowsRef.current[selectedBand - 1];
         if (!bandRow) {
             return;
@@ -178,10 +178,11 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
                 ? String(colorRampOptionsRef.current.numberOfShades)
                 : undefined,
             mode: (_g = colorRampOptionsRef.current) === null || _g === void 0 ? void 0 : _g.selectedMode,
+            reverseRamp: (_h = colorRampOptionsRef.current) === null || _h === void 0 ? void 0 : _h.reverseRamp,
         };
         if (!isStorySegmentOverride) {
             // Update source
-            const sourceId = (_h = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _h === void 0 ? void 0 : _h.source;
+            const sourceId = (_j = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _j === void 0 ? void 0 : _j.source;
             const source = model.getSource(sourceId);
             if (!source || !source.parameters) {
                 return;
@@ -221,13 +222,14 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
         newFilters.splice(index, 1);
         setStopRows(newFilters);
     };
-    const buildColorInfoFromClassification = async (selectedMode, numberOfShades, selectedRamp, setIsLoading) => {
+    const buildColorInfoFromClassification = async (selectedMode, numberOfShades, selectedRamp, reverseRamp, setIsLoading) => {
         var _a, _b;
         // Update layer state with selected options
         setColorRampOptions({
             selectedRamp,
             numberOfShades,
             selectedMode,
+            reverseRamp,
         });
         let stops = [];
         const currentBand = bandRows[selectedBand - 1];
@@ -250,7 +252,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
                 return;
         }
         setIsLoading(false);
-        const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, nClasses);
+        const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, nClasses, reverseRamp);
         setStopRows(valueColorPairs);
     };
     const scaleValue = (bandValue, isQuantile) => {

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

@@ -17,7 +17,6 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
         radius: 5,
     });
     const manualStyleRef = useLatest(manualStyle);
-    const [reverseRamp, setReverseRamp] = useState(false);
     const selectedAttributeRef = useLatest(selectedAttribute);
     const stopRowsRef = useLatest(stopRows);
     const colorRampOptionsRef = useLatest(colorRampOptions);
@@ -65,24 +64,26 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
         }
     }, [layerId]);
     useEffect(() => {
-        var _a, _b;
+        var _a;
         // We only want number values here
-        const attribute = (_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        const attribute = ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) ||
+            Object.keys(selectableAttributesAndValues)[0];
         setSelectedAttribute(attribute);
     }, [selectableAttributesAndValues]);
-    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, setIsLoading) => {
+    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, reverseRamp, setIsLoading) => {
         setColorRampOptions({
             selectedFunction: '',
             selectedRamp,
             numberOfShades,
             selectedMode,
+            reverseRamp,
         });
         const stops = Array.from(selectableAttributesAndValues[selectedAttribute]).sort((a, b) => a - b);
         const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length, reverseRamp);
         setStopRows(valueColorPairs);
     };
     const handleOk = () => {
-        var _a;
+        var _a, _b;
         const newStyle = Object.assign({}, params.color);
         if (stopRowsRef.current && stopRowsRef.current.length > 0) {
             // Classification applied (for color)
@@ -112,7 +113,7 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
             value: selectedAttributeRef.current,
             colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
             method: symbologyTab,
-            reverse: reverseRamp,
+            reverseRamp: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.reverseRamp,
         };
         saveSymbology({
             model,
@@ -183,12 +184,7 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
                         React.createElement("input", { type: "number", className: "jp-mod-styled", value: manualStyle.radius, onChange: e => {
                                 setManualStyle(prev => (Object.assign(Object.assign({}, prev), { radius: +e.target.value })));
                             } })))),
-                symbologyTab === 'color' && (React.createElement("div", { className: "jp-gis-symbology-row" },
-                    React.createElement("label", null,
-                        React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
-                        "Reverse Color Ramp"))),
                 React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-                    "//! only needs symbology state",
                     React.createElement(ColorRampControls, { layerParams: params, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false, showRampSelector: symbologyTab === 'color' }),
                     React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows }))));
         }

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

@@ -26,7 +26,6 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
     const [radiusManualStyle, setRadiusManualStyle] = useState({
         radius: 5,
     });
-    const [reverseRamp, setReverseRamp] = useState(false);
     const selectableAttributeRef = useLatest(selectedAttribute);
     const symbologyTabRef = useLatest(symbologyTab);
     const colorStopRowsRef = useLatest(colorStopRows);
@@ -72,8 +71,9 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
         }
     }, [layerId]);
     useEffect(() => {
-        var _a, _b;
-        const attribute = (_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        var _a;
+        const attribute = ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) ||
+            Object.keys(selectableAttributesAndValues)[0];
         setSelectedAttribute(attribute);
     }, [selectableAttributesAndValues]);
     const updateStopRowsBasedOnLayer = () => {
@@ -84,7 +84,7 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
         setRadiusStopRows(VectorUtils.buildRadiusInfo(layer));
     };
     const handleOk = () => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const newStyle = Object.assign({}, params.color);
         // Apply color symbology
         if (colorStopRowsRef.current.length > 0) {
@@ -132,7 +132,7 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
             colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
             nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades,
             mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
-            reverse: reverseRamp,
+            reverseRamp: (_d = colorRampOptionsRef.current) === null || _d === void 0 ? void 0 : _d.reverseRamp,
         };
         saveSymbology({
             model,
@@ -151,11 +151,12 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
         });
     };
     useOkSignal(okSignalPromise, handleOk);
-    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp) => {
+    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, reverseRamp) => {
         setColorRampOptions({
             selectedRamp,
             numberOfShades,
             selectedMode,
+            reverseRamp,
         });
         let stops;
         const values = Array.from(selectableAttributesAndValues[selectedAttribute]);
@@ -238,10 +239,6 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
                                 handleReset('radius');
                                 setRadiusManualStyle(Object.assign(Object.assign({}, radiusManualStyle), { radius: +e.target.value }));
                             } })))),
-                symbologyTab === 'color' && (React.createElement("div", { className: "jp-gis-symbology-row" },
-                    React.createElement("label", null,
-                        React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
-                        "Reverse Color Ramp"))),
                 React.createElement(ColorRampControls, { layerParams: params, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: symbologyTab === 'color' }),
                 React.createElement(StopContainer, { selectedMethod: symbologyTab || 'color', stopRows: symbologyTab === 'color' ? colorStopRows : radiusStopRows, setStopRows: symbologyTab === 'color' ? setColorStopRows : setRadiusStopRows })));
         }

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

@@ -33,12 +33,15 @@ const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
         populateOptions();
     }, []);
     const populateOptions = async () => {
-        var _a;
-        let colorRamp;
+        var _a, _b;
+        let colorRamp = 'viridis';
         if ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.colorRamp) {
             colorRamp = params.symbologyState.colorRamp;
         }
-        setSelectedRamp(colorRamp ? colorRamp : 'viridis');
+        if (typeof ((_b = params.symbologyState) === null || _b === void 0 ? void 0 : _b.reverse) === 'boolean') {
+            setReverseRamp(params.symbologyState.reverse);
+        }
+        setSelectedRamp(colorRamp);
     };
     const handleOk = () => {
         let colorMap = colormap({
@@ -75,11 +78,7 @@ const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
         React.createElement("p", null, "Represent features based on their density using a heatmap."),
         React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
             React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
-            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", null,
-                React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
-                "Reverse Color Ramp")),
+            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp, reverse: reverseRamp, setReverse: setReverseRamp })),
         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 }))) })),

package/lib/formbuilder/creationform.d.ts

@@ -1,7 +1,7 @@
 import { IDict, IJGISFormSchemaRegistry, IJupyterGISModel, LayerType, SourceType } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { Signal } from '@lumino/signaling';
-import * as React from 'react';
+import React from 'react';
 export interface ICreationFormProps {
     /**
      * Whether or not to create a layer
@@ -47,14 +47,14 @@ export interface ICreationFormProps {
      * and other form-related parameters.
      */
     dialogOptions?: any;
+    /**
+     * When provided (e.g. by LayerCreationFormDialog), the form registers a handler
+     * that the dialog invokes on OK; the handler reads stored form data and runs
+     * addSource/addLayer. No ok signal is passed to the inner forms when using this path.
+     */
+    registerConfirmHandler?: (fn: () => void) => void;
 }
 /**
  * Form for creating a source, a layer or both at the same time
  */
-export declare class CreationForm extends React.Component<ICreationFormProps, any> {
-    constructor(props: ICreationFormProps);
-    render(): React.JSX.Element | undefined;
-    private jGISModel;
-    private filePath;
-    private sourceFormChangedSignal;
-}
+export declare function CreationForm(props: ICreationFormProps): React.JSX.Element | null;

package/lib/formbuilder/creationform.js

@@ -9,109 +9,154 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { PromiseDelegate, UUID } from '@lumino/coreutils';
+import { UUID } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import * as React from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { deepCopy } from "../tools";
 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.model.filePath;
-        this.jGISModel = props.model;
+export function CreationForm(props) {
+    const { createLayer, createSource, layerType, sourceType, layerData: initialLayerData, sourceData: initialSourceData, formSchemaRegistry, model, cancel, formErrorSignal, dialogOptions, registerConfirmHandler, } = props;
+    const filePath = model.filePath;
+    const sourceFormChangedSignalRef = useRef(null);
+    if (!sourceFormChangedSignalRef.current) {
+        sourceFormChangedSignalRef.current = new Signal({});
     }
-    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);
+    const sourceFormChangedSignal = sourceFormChangedSignalRef.current;
+    const sourceIdRef = useRef(UUID.uuid4());
+    const sourceId = sourceIdRef.current;
+    const sourceFormDataRef = useRef(null);
+    const layerFormDataRef = useRef(null);
+    const initialSourceForRef = useMemo(() => deepCopy(initialSourceData !== null && initialSourceData !== void 0 ? initialSourceData : {}), [initialSourceData]);
+    const initialLayerForRef = useMemo(() => {
+        const data = deepCopy(initialLayerData || {});
+        if (createSource) {
+            data.source = sourceId;
         }
-        if (this.props.createSource) {
-            sourceCreationPromise = new PromiseDelegate();
-            creationPromises.push(sourceCreationPromise.promise);
+        return data;
+    }, [initialLayerData, createSource, sourceId]);
+    if (sourceFormDataRef.current === null && createSource) {
+        sourceFormDataRef.current = initialSourceForRef;
+    }
+    if (layerFormDataRef.current === null && createLayer) {
+        layerFormDataRef.current = initialLayerForRef;
+    }
+    const modelRef = useRef(model);
+    const createLayerRef = useRef(createLayer);
+    const createSourceRef = useRef(createSource);
+    const sourceTypeRef = useRef(sourceType);
+    const layerTypeRef = useRef(layerType);
+    modelRef.current = model;
+    createLayerRef.current = createLayer;
+    createSourceRef.current = createSource;
+    sourceTypeRef.current = sourceType;
+    layerTypeRef.current = layerType;
+    useEffect(() => {
+        if (!registerConfirmHandler) {
+            return;
         }
-        // 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';
+        registerConfirmHandler(() => {
+            var _a, _b, _c;
+            const currentModel = modelRef.current;
+            const currentCreateSource = createSourceRef.current;
+            const currentCreateLayer = createLayerRef.current;
+            const currentSourceType = sourceTypeRef.current;
+            const currentLayerType = layerTypeRef.current;
+            const currentSourceId = sourceIdRef.current;
+            if (currentCreateSource) {
+                const sourceData = (_a = sourceFormDataRef.current) !== null && _a !== void 0 ? _a : {};
+                const { name } = sourceData, sourceParams = __rest(sourceData, ["name"]);
+                const layerData = layerFormDataRef.current;
+                const actualName = name ||
+                    (currentCreateLayer && (layerData === null || layerData === void 0 ? void 0 : layerData.name)
+                        ? `${layerData.name} Source`
+                        : '');
                 const sourceModel = {
-                    type: this.props.sourceType || 'RasterSource',
+                    type: currentSourceType || 'RasterSource',
                     name: actualName,
-                    parameters: sourceData,
+                    parameters: sourceParams,
                 };
-                this.jGISModel.sharedModel.addSource(sourceId, sourceModel);
+                currentModel.sharedModel.addSource(currentSourceId, 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';
+            if (currentCreateLayer) {
+                const layerData = (_b = layerFormDataRef.current) !== null && _b !== void 0 ? _b : {};
+                const { name } = layerData, layerParams = __rest(layerData, ["name"]);
+                const actualName = name || `${(_c = layerData.name) !== null && _c !== void 0 ? _c : 'Layer'} Layer`;
                 const layerModel = {
-                    type: this.props.layerType || 'RasterLayer',
-                    parameters: layerData,
+                    type: currentLayerType || 'RasterLayer',
+                    parameters: layerParams,
                     visible: true,
                     name: actualName,
                 };
-                this.jGISModel.addLayer(UUID.uuid4(), layerModel);
+                currentModel.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, 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, 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 })))));
+    }, [registerConfirmHandler]);
+    const LayerForm = useMemo(() => getLayerTypeForm(layerType || 'RasterLayer'), [layerType]);
+    const SourceForm = useMemo(() => getSourceTypeForm(sourceType || 'RasterSource'), [sourceType]);
+    const layerSchema = useMemo(() => {
+        var _a, _b;
+        if (!createLayer || !layerType) {
+            return undefined;
+        }
+        const raw = formSchemaRegistry.getSchemas().get(layerType);
+        if (!raw) {
+            return undefined;
+        }
+        const schema = deepCopy(raw);
+        if (createSource) {
+            (_a = schema.properties) === null || _a === void 0 ? true : delete _a.source;
+        }
+        schema['required'] = ['name', ...((_b = schema['required']) !== null && _b !== void 0 ? _b : [])];
+        schema['properties'] = Object.assign({ name: { type: 'string', description: 'The name of the layer' } }, schema['properties']);
+        return schema;
+    }, [createLayer, layerType, createSource, formSchemaRegistry]);
+    const layerData = useMemo(() => {
+        const data = deepCopy(initialLayerData || {});
+        if (createSource) {
+            data.source = sourceId;
+        }
+        return data;
+    }, [initialLayerData, createSource, sourceId]);
+    const sourceSchema = useMemo(() => {
+        var _a;
+        if (!sourceType) {
+            return undefined;
+        }
+        const raw = formSchemaRegistry.getSchemas().get(sourceType);
+        if (!raw) {
+            return undefined;
+        }
+        const schema = deepCopy(raw);
+        if (!createLayer) {
+            schema['required'] = ['name', ...((_a = schema['required']) !== null && _a !== void 0 ? _a : [])];
+            schema['properties'] = Object.assign({ name: { type: 'string', description: 'The name of the source' } }, schema['properties']);
+        }
+        return schema;
+    }, [sourceType, createLayer, formSchemaRegistry]);
+    if (createLayer && !layerType) {
+        console.error('Cannot create a layer without specifying its type');
+        return null;
+    }
+    if (createLayer && !layerSchema) {
+        console.error(`Cannot find schema for ${layerType}`);
+        return null;
+    }
+    if (sourceType && !sourceSchema) {
+        console.error(`Cannot find schema for ${sourceType}`);
+        return null;
     }
+    return (React.createElement("div", null,
+        createSource && sourceSchema && (React.createElement("div", null,
+            React.createElement("h3", null, "Source Properties"),
+            React.createElement(SourceForm, { formContext: "create", model: model, filePath: filePath, schema: sourceSchema, sourceData: initialSourceData, syncData: (properties) => {
+                    sourceFormDataRef.current = properties;
+                }, cancel: cancel, formChangedSignal: sourceFormChangedSignal, formErrorSignal: formErrorSignal, dialogOptions: dialogOptions, sourceType: sourceType, formSchemaRegistry: formSchemaRegistry }))),
+        createLayer && layerSchema && (React.createElement("div", null,
+            React.createElement("h3", null, "Layer Properties"),
+            React.createElement(LayerForm, { formContext: "create", sourceType: sourceType, model: model, filePath: filePath, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
+                    layerFormDataRef.current = properties;
+                }, cancel: cancel, sourceFormChangedSignal: sourceFormChangedSignal, formErrorSignal: formErrorSignal, dialogOptions: dialogOptions, formSchemaRegistry: formSchemaRegistry })))));
 }

package/lib/formbuilder/editform.d.ts

@@ -15,10 +15,4 @@ export interface IEditFormProps {
 /**
  * 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;
-    private sourceFormChangedSignal;
-}
+export declare function EditForm(props: IEditFormProps): React.ReactElement | null;