@jupytergis/base 0.2.0 → 0.3.0

package/lib/formbuilder/editform.js

@@ -1,10 +1,15 @@
 import { deepCopy } from '../tools';
 import * as React from 'react';
 import { getLayerTypeForm, getSourceTypeForm } from './formselectors';
+import { Signal } from '@lumino/signaling';
 /**
  * Form for editing a source, a layer or both at the same time
  */
 export class EditForm extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.sourceFormChangedSignal = new Signal(this);
+    }
     async syncObjectProperties(id, properties) {
         if (!id) {
             return;
@@ -47,14 +52,14 @@ export class EditForm extends React.Component {
         }
         return (React.createElement("div", null,
             this.props.layer && LayerForm && (React.createElement("div", null,
-                React.createElement("h3", null, "Layer Properties"),
+                React.createElement("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) => {
                         this.syncObjectProperties(this.props.layer, properties);
                     } }))),
             this.props.source && SourceForm && (React.createElement("div", null,
-                React.createElement("h3", null, "Source Properties"),
+                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) => {
                         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

@@ -6,6 +6,7 @@ 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) {
@@ -29,6 +30,12 @@ export function getSourceTypeForm(sourceType) {
         case 'GeoJSONSource':
             SourceForm = GeoJSONSourcePropertiesForm;
             break;
+        case 'ImageSource':
+            SourceForm = PathBasedSourcePropertiesForm;
+            break;
+        case 'ShapefileSource':
+            SourceForm = PathBasedSourcePropertiesForm;
+            break;
         case 'GeoTiffSource':
             SourceForm = GeoTiffSourcePropertiesForm;
             break;

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

@@ -4,6 +4,7 @@ import { IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { Signal } from '@lumino/signaling';
 import { IDict } from '../../types';
+import { SourceType } from '@jupytergis/schema';
 export interface IBaseFormStates {
     schema?: IDict;
     extraErrors?: any;
@@ -51,6 +52,15 @@ export interface IBaseFormProps {
      * extra errors or not.
      */
     formErrorSignal?: Signal<Dialog<any>, boolean>;
+    /**
+     * Configuration options for the dialog, including settings for layer data, source data,
+     * and other form-related parameters.
+     */
+    dialogOptions?: any;
+    /**
+     * Source type property
+     */
+    sourceType: SourceType;
 }
 /**
  * Generate a form to edit a layer/source type. This class is meant to be sub-classed to create more refined forms for specific layers/sources.

package/lib/formbuilder/objectform/baseform.js

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

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

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

package/lib/formbuilder/objectform/fileselectorwidget.js

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

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

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

package/lib/formbuilder/objectform/geojsonsource.js

@@ -1,11 +1,11 @@
-import { showErrorMessage } from '@jupyterlab/apputils';
 import { Ajv } from 'ajv';
 import * as geojson from '@jupytergis/schema/src/schema/geojson.json';
-import { BaseForm } from './baseform';
+import { PathBasedSourcePropertiesForm } from './pathbasedsource';
+import { loadFile } from '../../tools';
 /**
  * The form to modify a GeoJSON source.
  */
-export class GeoJSONSourcePropertiesForm extends BaseForm {
+export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
     constructor(props) {
         var _a, _b;
         super(props);
@@ -18,26 +18,6 @@ export class GeoJSONSourcePropertiesForm extends BaseForm {
             this.removeFormEntry('data', data, schema, uiSchema);
         }
         super.processSchema(data, schema, uiSchema);
-        if (!schema.properties || !data) {
-            return;
-        }
-        // This is not user-editable
-        delete schema.properties.valid;
-    }
-    onFormBlur(id, value) {
-        // Is there a better way to spot the path text entry?
-        if (!id.endsWith('_path')) {
-            return;
-        }
-        this._validatePath(value);
-    }
-    onFormSubmit(e) {
-        var _a, _b, _c;
-        if (((_c = (_b = (_a = this.state.extraErrors) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.__errors) === null || _c === void 0 ? void 0 : _c.length) >= 1) {
-            showErrorMessage('Invalid JSON file', this.state.extraErrors.path.__errors[0]);
-            return;
-        }
-        super.onFormSubmit(e);
     }
     /**
      * Validate the path, to avoid invalid path or invalid GeoJSON.
@@ -51,7 +31,11 @@ export class GeoJSONSourcePropertiesForm extends BaseForm {
         let valid = false;
         if (path) {
             try {
-                const geoJSONData = await this.props.model.readGeoJSON(path);
+                const geoJSONData = await loadFile({
+                    filepath: path,
+                    type: this.props.sourceType,
+                    model: this.props.model
+                });
                 valid = this._validate(geoJSONData);
                 if (!valid) {
                     error = `"${path}" is not a valid GeoJSON file`;

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

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

package/lib/formbuilder/objectform/layerform.js

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

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

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

package/lib/formbuilder/objectform/pathbasedsource.js

@@ -0,0 +1,98 @@
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { BaseForm } from './baseform';
+import { loadFile } from '../../tools';
+import { FileSelectorWidget } from './fileselectorwidget';
+/**
+ * The form to modify a PathBasedSource source.
+ */
+export class PathBasedSourcePropertiesForm extends BaseForm {
+    constructor(props) {
+        var _a, _b;
+        super(props);
+        if (this.props.sourceType !== 'GeoJSONSource') {
+            this._validatePath((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '');
+        }
+    }
+    processSchema(data, schema, uiSchema) {
+        var _a;
+        super.processSchema(data, schema, uiSchema);
+        if (!schema.properties || !data) {
+            return;
+        }
+        // Customize the widget for path field
+        if (schema.properties && schema.properties.path) {
+            const docManager = (_a = this.props.formChangedSignal) === null || _a === void 0 ? void 0 : _a.sender.props.formSchemaRegistry.getDocManager();
+            uiSchema.path = {
+                'ui:widget': FileSelectorWidget,
+                'ui:options': {
+                    docManager,
+                    formOptions: this.props
+                }
+            };
+        }
+        // This is not user-editable
+        delete schema.properties.valid;
+    }
+    onFormBlur(id, value) {
+        // Is there a better way to spot the path text entry?
+        if (!id.endsWith('_path')) {
+            return;
+        }
+        this._validatePath(value);
+    }
+    // we need to use `onFormChange` instead of `onFormBlur` because it's no longer a text field
+    onFormChange(e) {
+        var _a;
+        super.onFormChange(e);
+        if (((_a = e.formData) === null || _a === void 0 ? void 0 : _a.path) !== undefined) {
+            this._validatePath(e.formData.path);
+        }
+    }
+    onFormSubmit(e) {
+        var _a, _b, _c;
+        if (((_c = (_b = (_a = this.state.extraErrors) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.__errors) === null || _c === void 0 ? void 0 : _c.length) >= 1) {
+            showErrorMessage('Invalid file', this.state.extraErrors.path.__errors[0]);
+            return;
+        }
+        super.onFormSubmit(e);
+    }
+    /**
+     * Validate the path, to avoid invalid path.
+     *
+     * @param path - the path to validate.
+     */
+    async _validatePath(path) {
+        const extraErrors = this.state.extraErrors;
+        let error = '';
+        let valid = true;
+        if (!path) {
+            valid = false;
+            error = 'Path is required';
+        }
+        else {
+            try {
+                await loadFile({
+                    filepath: path,
+                    type: this.props.sourceType,
+                    model: this.props.model
+                });
+            }
+            catch (e) {
+                valid = false;
+                error = `"${path}" is not a valid ${this.props.sourceType} file.`;
+            }
+        }
+        if (!valid) {
+            extraErrors.path = {
+                __errors: [error]
+            };
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors })));
+        }
+        else {
+            this.setState(old => (Object.assign(Object.assign({}, old), { extraErrors: Object.assign(Object.assign({}, extraErrors), { path: { __errors: [] } }) })));
+        }
+        if (this.props.formErrorSignal) {
+            this.props.formErrorSignal.emit(!valid);
+        }
+    }
+}

package/lib/icons.d.ts

@@ -7,3 +7,4 @@ export declare const visibilityIcon: LabIcon;
 export declare const nonVisibilityIcon: LabIcon;
 export declare const geoJSONIcon: LabIcon;
 export declare const moundIcon: LabIcon;
+export declare const logoMiniIconQGZ: LabIcon;

package/lib/icons.js

@@ -12,6 +12,7 @@ import visibilitySvgStr from '../style/icons/visibility.svg';
 import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
 import geoJsonSvgStr from '../style/icons/geojson.svg';
 import moundSvgStr from '../style/icons/mound.svg';
+import logoMiniQGZ from '../style/icons/logo_mini_qgz.svg';
 export const logoIcon = new LabIcon({
     name: 'jupytergis::logo',
     svgstr: logoSvgStr
@@ -44,3 +45,7 @@ export const moundIcon = new LabIcon({
     name: 'jupytergis::mound',
     svgstr: moundSvgStr
 });
+export const logoMiniIconQGZ = new LabIcon({
+    name: 'jupytergis::logoQGZ',
+    svgstr: logoMiniQGZ
+});

package/lib/keybindings.json

@@ -0,0 +1,62 @@
+[
+    {
+        "command": "jupytergis:undo",
+        "keys": ["Accel Z"],
+        "selector": ".data-jgis-keybinding"
+    },
+    {
+        "command": "jupytergis:redo",
+        "keys": ["Accel Shift Z"],
+        "selector": ".data-jgis-keybinding"
+    },
+    {
+        "command": "jupytergis:identify",
+        "keys": ["Escape"],
+        "selector": ".data-jgis-keybinding"
+    },
+    {
+        "command": "jupytergis:removeSource",
+        "keys": ["Delete"],
+        "selector": ".data-jgis-keybinding .jp-gis-source.jp-gis-sourceUnused"
+    },
+    {
+        "command": "jupytergis:renameSource",
+        "keys": ["F2"],
+        "selector": ".data-jgis-keybinding .jp-gis-source"
+    },
+    {
+        "command": "jupytergis:removeLayer",
+        "keys": ["Delete"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerItem"
+    },
+    {
+        "command": "jupytergis:renameLayer",
+        "keys": ["F2"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerItem"
+    },
+    {
+        "command": "jupytergis:removeGroup",
+        "keys": ["Delete"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+    },
+    {
+        "command": "jupytergis:renameGroup",
+        "keys": ["F2"],
+        "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+    },
+    {
+        "command": "jupytergis:executeConsole",
+        "keys": ["Shift Enter"],
+        "selector": ".jpgis-console .jp-CodeConsole[data-jp-interaction-mode='notebook'] .jp-CodeConsole-promptCell"
+    },
+    {
+        "command": "jupytergis:invokeConsoleCompleter",
+        "keys": ["Tab"],
+        "selector": ".jpgis-console .jp-CodeConsole-promptCell .jp-mod-completer-enabled"
+    },
+    {
+        "command": "jupytergis:selectConsoleCompleter",
+        "keys": ["Enter"],
+        "selector": ".jpgis-console .jp-ConsolePanel .jp-mod-completer-active"
+    }
+]

package/lib/mainview/mainView.d.ts

@@ -1,9 +1,9 @@
 import { IAnnotation, IDict, IJGISLayer, IJGISSource } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
-import BaseLayer from 'ol/layer/Base';
+import { Layer } from 'ol/layer';
 import * as React from 'react';
-import { MainViewModel } from './mainviewmodel';
 import { ClientPointer } from './CollaboratorPointers';
+import { MainViewModel } from './mainviewmodel';
 interface IProps {
     viewModel: MainViewModel;
 }
@@ -15,14 +15,20 @@ interface IStates {
     firstLoad: boolean;
     annotations: IDict<IAnnotation>;
     clientPointers: IDict<ClientPointer>;
+    viewProjection: {
+        code: string;
+        units: string;
+    };
+    loadingLayer: boolean;
+    scale: number;
 }
 export declare class MainView extends React.Component<IProps, IStates> {
     constructor(props: IProps);
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     generateScene(): Promise<void>;
+    createSelectInteraction: () => void;
     addContextMenu: () => void;
-    private _loadShapefileAsGeoJSON;
     private _loadGeoTIFFWithCache;
     /**
      * Add a source in the map.
@@ -66,6 +72,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @returns - the map layer.
      */
     private _buildMapLayer;
+    addProjection(newMapLayer: Layer): void;
     /**
      * Add a layer to the map.
      *
@@ -90,7 +97,16 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @param id - id of the layer.
      * @param layer - the layer object.
      */
-    updateLayer(id: string, layer: IJGISLayer, mapLayer: BaseLayer): Promise<void>;
+    updateLayer(id: string, layer: IJGISLayer, mapLayer: Layer): Promise<void>;
+    /**
+     * Wait for all layers to be loaded.
+     */
+    private _waitForReady;
+    /**
+     * Wait for a layers source state to be 'ready'
+     * @param layer The Layer to check
+     */
+    private _waitForSourceReady;
     /**
      * Remove a layer from the map.
      *
@@ -129,7 +145,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _onSharedMetadataChanged;
     private _computeAnnotationPosition;
     private _updateAnnotation;
-    private _onZoomToAnnotation;
+    private _onZoomToPosition;
     private _moveToPosition;
     private _onPointerMove;
     private _syncPointer;
@@ -149,5 +165,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _sourceToLayerMap;
     private _documentPath?;
     private _contextMenu;
+    private _loadingLayers;
 }
 export {};