@jupytergis/base 0.1.7 → 0.2.0

package/lib/annotations/components/Annotation.d.ts

@@ -0,0 +1,11 @@
+import { IAnnotationModel } from '@jupytergis/schema';
+import React from 'react';
+import { IControlPanelModel } from '../../types';
+export interface IAnnotationProps {
+    itemId: string;
+    annotationModel: IAnnotationModel;
+    rightPanelModel?: IControlPanelModel;
+    children?: JSX.Element[] | JSX.Element;
+}
+declare const Annotation: ({ itemId, annotationModel, rightPanelModel, children }: IAnnotationProps) => React.JSX.Element;
+export default Annotation;

package/lib/annotations/components/Annotation.js

@@ -0,0 +1,61 @@
+import { faTrash, faPaperPlane, faArrowsToDot } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { showDialog, Dialog } from '@jupyterlab/apputils';
+import { Button } from '@jupyterlab/ui-components';
+import React, { useMemo, useState } from 'react';
+import { Message } from './Message';
+const Annotation = ({ itemId, annotationModel, rightPanelModel, children }) => {
+    const [messageContent, setMessageContent] = useState('');
+    const [jgisModel, setJgisModel] = useState(rightPanelModel === null || rightPanelModel === void 0 ? void 0 : rightPanelModel.jGISModel);
+    const annotation = annotationModel.getAnnotation(itemId);
+    const contents = useMemo(() => { var _a; return (_a = annotation === null || annotation === void 0 ? void 0 : annotation.contents) !== null && _a !== void 0 ? _a : []; }, [annotation]);
+    /**
+     * Update the model when it changes.
+     */
+    rightPanelModel === null || rightPanelModel === void 0 ? void 0 : rightPanelModel.documentChanged.connect((_, widget) => {
+        setJgisModel(widget === null || widget === void 0 ? void 0 : widget.context.model);
+    });
+    const handleSubmit = () => {
+        annotationModel.addContent(itemId, messageContent);
+        setMessageContent('');
+    };
+    const handleDelete = async () => {
+        var _a;
+        // If the annotation has no content
+        // we remove it right away without prompting
+        if (!((_a = annotationModel.getAnnotation(itemId)) === null || _a === void 0 ? void 0 : _a.contents.length)) {
+            return annotationModel.removeAnnotation(itemId);
+        }
+        const result = await showDialog({
+            title: 'Delete Annotation',
+            body: 'Are you sure you want to delete this annotation?',
+            buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Delete' })]
+        });
+        if (result.button.accept) {
+            annotationModel.removeAnnotation(itemId);
+        }
+    };
+    const centerOnAnnotation = () => {
+        jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.centerOnAnnotation(itemId);
+    };
+    return (React.createElement("div", { className: "jGIS-Annotation" },
+        children,
+        React.createElement("div", null, contents.map(content => {
+            var _a, _b;
+            return (React.createElement(Message, { user: content.user, message: content.value, self: ((_a = annotationModel.user) === null || _a === void 0 ? void 0 : _a.username) === ((_b = content.user) === null || _b === void 0 ? void 0 : _b.username) }));
+        })),
+        React.createElement("div", { className: "jGIS-Annotation-Message" },
+            React.createElement("textarea", { rows: 3, placeholder: 'Ctrl+Enter to submit', value: messageContent, onChange: e => setMessageContent(e.currentTarget.value), onKeyDown: e => {
+                    if (e.ctrlKey && e.key === 'Enter') {
+                        handleSubmit();
+                    }
+                } })),
+        React.createElement("div", { className: "jGIS-Annotation-Buttons" },
+            React.createElement(Button, { className: "jp-mod-styled jp-mod-warn", onClick: handleDelete },
+                React.createElement(FontAwesomeIcon, { icon: faTrash })),
+            rightPanelModel && (React.createElement(Button, { className: "jp-mod-styled jp-mod-accept", onClick: centerOnAnnotation },
+                React.createElement(FontAwesomeIcon, { icon: faArrowsToDot }))),
+            React.createElement(Button, { className: "jp-mod-styled jp-mod-accept", onClick: handleSubmit },
+                React.createElement(FontAwesomeIcon, { icon: faPaperPlane })))));
+};
+export default Annotation;

package/lib/annotations/components/AnnotationFloater.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IAnnotationProps } from './Annotation';
+interface IAnnotationFloaterProps extends IAnnotationProps {
+    open: boolean;
+}
+declare const AnnotationFloater: ({ itemId, annotationModel: model, open }: IAnnotationFloaterProps) => React.JSX.Element;
+export default AnnotationFloater;

package/lib/annotations/components/AnnotationFloater.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { faWindowMinimize } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Annotation from './Annotation';
+const AnnotationFloater = ({ itemId, annotationModel: model, open }) => {
+    const [isOpen, setIsOpen] = useState(open);
+    // Function that either
+    // - opens the annotation if `open`
+    // - removes the annotation if `!open` and the annotation is empty
+    // - closes the annotation if `!open` and the annotation is not empty
+    const setOpenOrDelete = (open) => {
+        var _a;
+        if (open) {
+            return setIsOpen(true);
+        }
+        if (!((_a = model.getAnnotation(itemId)) === null || _a === void 0 ? void 0 : _a.contents.length)) {
+            return model.removeAnnotation(itemId);
+        }
+        setIsOpen(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "jGIS-Annotation-Handler", onClick: () => setOpenOrDelete(!isOpen) }),
+        React.createElement("div", { className: "jGIS-FloatingAnnotation", style: { visibility: isOpen ? 'visible' : 'hidden' } },
+            React.createElement(Annotation, { itemId: itemId, annotationModel: model },
+                React.createElement("div", { className: "jGIS-Popup-Topbar", onClick: () => {
+                        setOpenOrDelete(false);
+                    } },
+                    React.createElement(FontAwesomeIcon, { icon: faWindowMinimize, className: "jGIS-Popup-TopBarIcon" }))))));
+};
+export default AnnotationFloater;

package/lib/annotations/components/Message.d.ts

@@ -0,0 +1,8 @@
+import { User } from '@jupyterlab/services';
+interface IProps {
+    message: string;
+    self: boolean;
+    user?: User.IIdentity;
+}
+export declare const Message: (props: IProps) => JSX.Element;
+export {};

package/lib/annotations/components/Message.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export const Message = (props) => {
+    var _a, _b, _c;
+    const { self, message, user } = props;
+    const color = (_a = user === null || user === void 0 ? void 0 : user.color) !== null && _a !== void 0 ? _a : 'black';
+    const author = (_b = user === null || user === void 0 ? void 0 : user.display_name) !== null && _b !== void 0 ? _b : '';
+    const initials = (_c = user === null || user === void 0 ? void 0 : user.initials) !== null && _c !== void 0 ? _c : '';
+    return (React.createElement("div", { className: "jGIS-Annotation-Message", style: {
+            flexFlow: self ? 'row' : 'row-reverse'
+        } },
+        React.createElement("div", { className: "jGIS-Annotation-User-Icon", style: {
+                backgroundColor: color
+            }, title: author },
+            React.createElement("span", { style: { width: 24, textAlign: 'center' } }, initials)),
+        React.createElement("div", { className: "jGIS-Annotation-Message-Content" },
+            React.createElement("p", { style: { padding: 7, margin: 0 } }, message))));
+};

package/lib/annotations/index.d.ts

@@ -0,0 +1,3 @@
+export * from './model';
+export * from './components/Annotation';
+export * from './components/AnnotationFloater';

package/lib/annotations/index.js

@@ -0,0 +1,3 @@
+export * from './model';
+export * from './components/Annotation';
+export * from './components/AnnotationFloater';

package/lib/annotations/model.d.ts

@@ -0,0 +1,28 @@
+import { IAnnotation, IAnnotationModel, IJupyterGISModel } from '@jupytergis/schema';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { User } from '@jupyterlab/services';
+import { ISignal } from '@lumino/signaling';
+export declare class AnnotationModel implements IAnnotationModel {
+    constructor(options: AnnotationModel.IOptions);
+    get updateSignal(): ISignal<this, null>;
+    get user(): User.IIdentity | undefined;
+    set context(context: DocumentRegistry.IContext<IJupyterGISModel> | undefined);
+    get context(): DocumentRegistry.IContext<IJupyterGISModel> | undefined;
+    get contextChanged(): ISignal<this, void>;
+    update(): void;
+    getAnnotation(id: string): IAnnotation | undefined;
+    getAnnotationIds(): string[];
+    addAnnotation(key: string, value: IAnnotation): void;
+    removeAnnotation(key: string): void;
+    addContent(id: string, value: string): void;
+    private _context;
+    private _contextChanged;
+    private _updateSignal;
+    private _user?;
+}
+declare namespace AnnotationModel {
+    interface IOptions {
+        context: DocumentRegistry.IContext<IJupyterGISModel> | undefined;
+    }
+}
+export {};

package/lib/annotations/model.js

@@ -0,0 +1,67 @@
+import { Signal } from '@lumino/signaling';
+export class AnnotationModel {
+    constructor(options) {
+        this._contextChanged = new Signal(this);
+        this._updateSignal = new Signal(this);
+        this.context = options.context;
+    }
+    get updateSignal() {
+        return this._updateSignal;
+    }
+    get user() {
+        return this._user;
+    }
+    set context(context) {
+        var _a;
+        this._context = context;
+        const state = (_a = this._context) === null || _a === void 0 ? void 0 : _a.model.sharedModel.awareness.getLocalState();
+        this._user = state === null || state === void 0 ? void 0 : state.user;
+        this._contextChanged.emit(void 0);
+    }
+    get context() {
+        return this._context;
+    }
+    get contextChanged() {
+        return this._contextChanged;
+    }
+    update() {
+        this._updateSignal.emit(null);
+    }
+    getAnnotation(id) {
+        var _a;
+        const rawData = (_a = this._context) === null || _a === void 0 ? void 0 : _a.model.sharedModel.getMetadata(id);
+        if (rawData) {
+            return JSON.parse(rawData);
+        }
+    }
+    getAnnotationIds() {
+        var _a;
+        const annotationIds = [];
+        for (const id in (_a = this._context) === null || _a === void 0 ? void 0 : _a.model.sharedModel.metadata) {
+            if (id.startsWith('annotation')) {
+                annotationIds.push(id);
+            }
+        }
+        return annotationIds;
+    }
+    addAnnotation(key, value) {
+        var _a;
+        (_a = this._context) === null || _a === void 0 ? void 0 : _a.model.sharedModel.setMetadata(`annotation_${key}`, JSON.stringify(value));
+    }
+    removeAnnotation(key) {
+        var _a;
+        (_a = this._context) === null || _a === void 0 ? void 0 : _a.model.removeMetadata(key);
+    }
+    addContent(id, value) {
+        var _a;
+        const newContent = {
+            value,
+            user: this._user
+        };
+        const currentAnnotation = this.getAnnotation(id);
+        if (currentAnnotation) {
+            const newAnnotation = Object.assign(Object.assign({}, currentAnnotation), { contents: [...currentAnnotation.contents, newContent] });
+            (_a = this._context) === null || _a === void 0 ? void 0 : _a.model.sharedModel.setMetadata(id, JSON.stringify(newAnnotation));
+        }
+    }
+}

package/lib/commands.js

@@ -11,15 +11,34 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
     const trans = translator.load('jupyterlab');
     const { commands } = app;
     commands.addCommand(CommandIDs.symbology, Object.assign({ label: trans.__('Edit Symbology'), isEnabled: () => {
-            return tracker.currentWidget
-                ? tracker.currentWidget.context.model.sharedModel.editable
-                : false;
+            var _a, _b;
+            const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model;
+            const localState = model === null || model === void 0 ? void 0 : model.sharedModel.awareness.getLocalState();
+            if (!model || !localState || !((_b = localState['selected']) === null || _b === void 0 ? void 0 : _b.value)) {
+                return false;
+            }
+            const selectedLayers = localState['selected'].value;
+            // Can't open more than one symbology dialog at once
+            if (Object.keys(selectedLayers).length > 1) {
+                return false;
+            }
+            const layerId = Object.keys(selectedLayers)[0];
+            const layer = model.getLayer(layerId);
+            if (!layer) {
+                return false;
+            }
+            const isValidLayer = [
+                'VectorLayer',
+                'VectorTileLayer',
+                'WebGlLayer'
+            ].includes(layer.type);
+            return isValidLayer;
         }, execute: Private.createSymbologyDialog(tracker, state) }, icons.get(CommandIDs.symbology)));
     commands.addCommand(CommandIDs.redo, Object.assign({ label: trans.__('Redo'), isEnabled: () => {
             return tracker.currentWidget
                 ? tracker.currentWidget.context.model.sharedModel.editable
                 : false;
-        }, execute: args => {
+        }, execute: () => {
             const current = tracker.currentWidget;
             if (current) {
                 return current.context.model.sharedModel.redo();
@@ -29,12 +48,38 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             return tracker.currentWidget
                 ? tracker.currentWidget.context.model.sharedModel.editable
                 : false;
-        }, execute: args => {
+        }, execute: () => {
             const current = tracker.currentWidget;
             if (current) {
                 return current.context.model.sharedModel.undo();
             }
         } }, icons.get(CommandIDs.undo)));
+    commands.addCommand(CommandIDs.identify, Object.assign({ label: trans.__('Identify'), isToggled: () => {
+            var _a;
+            return ((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model.isIdentifying) || false;
+        }, isEnabled: () => {
+            return tracker.currentWidget
+                ? tracker.currentWidget.context.model.sharedModel.editable
+                : false;
+        }, execute: args => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const luminoEvent = args['_luminoEvent'];
+            if (luminoEvent) {
+                const keysPressed = luminoEvent.keys;
+                if (keysPressed === null || keysPressed === void 0 ? void 0 : keysPressed.includes('Escape')) {
+                    current.context.model.isIdentifying = false;
+                    current.node.classList.remove('jGIS-identify-tool');
+                    commands.notifyCommandChanged(CommandIDs.identify);
+                    return;
+                }
+            }
+            current.node.classList.toggle('jGIS-identify-tool');
+            current.context.model.toggleIdentify();
+            commands.notifyCommandChanged(CommandIDs.identify);
+        } }, icons.get(CommandIDs.identify)));
     /**
      * SOURCES and LAYERS creation commands.
      */
@@ -185,7 +230,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             createSource: true,
             sourceData: {
                 name: 'Custom GeoTiff Source',
-                urls: ['']
+                urls: [{}]
             },
             layerData: { name: 'Custom GeoTiff Layer' },
             sourceType: 'GeoTiffSource',

package/lib/constants.d.ts

@@ -7,6 +7,7 @@ export declare namespace CommandIDs {
     const redo = "jupytergis:redo";
     const undo = "jupytergis:undo";
     const symbology = "jupytergis:symbology";
+    const identify = "jupytergis:identify";
     const openLayerBrowser = "jupytergis:openLayerBrowser";
     const newRasterEntry = "jupytergis:newRasterEntry";
     const newVectorTileEntry = "jupytergis:newVectorTileEntry";
@@ -43,6 +44,7 @@ export declare namespace CommandIDs {
     const removeConsole = "jupytergis:removeConsole";
     const executeConsole = "jupytergis:executeConsole";
     const selectCompleter = "jupytergis:selectConsoleCompleter";
+    const addAnnotation = "jupytergis:addAnnotation";
 }
 interface IRegisteredIcon {
     icon?: LabIcon;

package/lib/constants.js

@@ -9,6 +9,7 @@ export var CommandIDs;
     CommandIDs.redo = 'jupytergis:redo';
     CommandIDs.undo = 'jupytergis:undo';
     CommandIDs.symbology = 'jupytergis:symbology';
+    CommandIDs.identify = 'jupytergis:identify';
     // Layers and sources creation commands
     CommandIDs.openLayerBrowser = 'jupytergis:openLayerBrowser';
     // Layer and source
@@ -52,6 +53,8 @@ export var CommandIDs;
     CommandIDs.removeConsole = 'jupytergis:removeConsole';
     CommandIDs.executeConsole = 'jupytergis:executeConsole';
     CommandIDs.selectCompleter = 'jupytergis:selectConsoleCompleter';
+    // Map Commands
+    CommandIDs.addAnnotation = 'jupytergis:addAnnotation';
 })(CommandIDs || (CommandIDs = {}));
 const iconObject = {
     RasterSource: { icon: rasterIcon },
@@ -77,7 +80,8 @@ const iconObject = {
     [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
     [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
     [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
-    [CommandIDs.symbology]: { iconClass: 'fa fa-brush' }
+    [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
+    [CommandIDs.identify]: { iconClass: 'fa fa-info' }
 };
 /**
  * The registered icons

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

@@ -6,8 +6,8 @@ import BandRow from '../components/BandRow';
 import ColorRamp from '../../components/color_ramp/ColorRamp';
 import StopRow from '../../components/color_stops/StopRow';
 import { Utils } from '../../symbologyUtils';
-import { getGdal } from '../../../../gdal';
 import { Spinner } from '../../../../mainview/spinner';
+import { loadGeoTIFFWithCache } from '../../../../tools';
 const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) => {
     const functions = ['discrete', 'linear', 'exact'];
     const modeOptions = ['continuous', 'equal interval', 'quantile'];
@@ -67,46 +67,38 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         setSelectedBand(band);
         setSelectedFunction(interpolation);
     };
+    const preloadGeoTiffFile = async (sourceInfo) => {
+        return await loadGeoTIFFWithCache(sourceInfo);
+    };
     const getBandInfo = async () => {
         var _a, _b;
         const bandsArr = [];
         const source = context.model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
         const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
-        if (!sourceInfo.url) {
+        if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
             return;
         }
-        let tifData;
-        if (layerState && layerState.tifData) {
-            tifData = JSON.parse(layerState.tifData);
-        }
-        else {
-            const Gdal = await getGdal();
-            const fileData = await fetch(sourceInfo.url);
-            const file = new File([await fileData.blob()], 'loaded.tif');
-            const result = await Gdal.open(file);
-            const tifDataset = result.datasets[0];
-            tifData = await Gdal.gdalinfo(tifDataset, ['-stats']);
-            Gdal.close(tifDataset);
-            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(`jupytergis:${layerId}`, {
-                tifData: JSON.stringify(tifData)
-            }));
-        }
-        tifData['bands'].forEach((bandData) => {
-            var _a, _b;
-            bandsArr.push({
-                band: bandData.band,
-                colorInterpretation: bandData.colorInterpretation,
-                stats: {
-                    minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
-                    maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
-                    mean: bandData.mean,
-                    stdDev: bandData.stdDev
-                },
-                metadata: bandData.metadata,
-                histogram: bandData.histogram
+        // Preload the file only once
+        const preloadedFile = await preloadGeoTiffFile(sourceInfo);
+        const { file, metadata, sourceUrl } = Object.assign({}, preloadedFile);
+        if (file && metadata && sourceUrl === sourceInfo.url) {
+            metadata['bands'].forEach((bandData) => {
+                var _a, _b;
+                bandsArr.push({
+                    band: bandData.band,
+                    colorInterpretation: bandData.colorInterpretation,
+                    stats: {
+                        minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
+                        maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
+                        mean: bandData.mean,
+                        stdDev: bandData.stdDev
+                    },
+                    metadata: bandData.metadata,
+                    histogram: bandData.histogram
+                });
             });
-        });
-        setBandRows(bandsArr);
+            setBandRows(bandsArr);
+        }
     };
     const buildColorInfo = () => {
         var _a;

package/lib/formbuilder/formselectors.js

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

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

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

package/lib/formbuilder/objectform/baseform.js

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