@jupytergis/base 0.15.0 → 0.16.0-alpha.1

package/lib/features/story/utils/spectaPresentation.js

@@ -0,0 +1,37 @@
+import { STORY_TYPE } from "../../../types";
+/** CSS variables (+ optional text color) for specta theming */
+export function getSpectaPresentationCssVars(story) {
+    const isListMode = (story === null || story === void 0 ? void 0 : story.storyType) === STORY_TYPE.verticalScroll;
+    const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
+    const textColor = story === null || story === void 0 ? void 0 : story.presentationTextColor;
+    const style = {};
+    if (textColor) {
+        style['--jgis-specta-text-color'] = textColor;
+        style.color = textColor;
+    }
+    if (isListMode) {
+        style['--jgis-specta-panel-color'] =
+            'transparent';
+        if (bgColor) {
+            style['--jgis-specta-bg-color'] = bgColor;
+        }
+        return style;
+    }
+    if (bgColor) {
+        style['--jgis-specta-panel-color'] = bgColor;
+    }
+    return style;
+}
+/**
+ * Full inline style for solid surfaces (e.g. mobile drawer).
+ * Do not use on `.jgis-specta-story-panel-container` — it overrides the gradient.
+ */
+export function getSpectaPresentationStyle(story) {
+    const style = getSpectaPresentationCssVars(story);
+    const isListMode = (story === null || story === void 0 ? void 0 : story.storyType) === STORY_TYPE.verticalScroll;
+    const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
+    if (!isListMode && bgColor) {
+        style.backgroundColor = bgColor;
+    }
+    return style;
+}

package/lib/features/story/utils/storySegmentViewItems.d.ts

@@ -0,0 +1,5 @@
+import type { IJGISStoryMap, IJupyterGISModel } from '@jupytergis/schema';
+import type { IListStoryMarkdownSegment, IStorySegmentViewItem } from "../types/types";
+export declare function buildStorySegmentViewItems(model: IJupyterGISModel, storyData: IJGISStoryMap | null): IStorySegmentViewItem[];
+export declare function getStoryMarkdownFromSlide(activeSlide: IStorySegmentViewItem['activeSlide']): string;
+export declare function getListStoryMarkdownSegmentsFromItems(items: IStorySegmentViewItem[]): IListStoryMarkdownSegment[];

package/lib/features/story/utils/storySegmentViewItems.js

@@ -0,0 +1,30 @@
+import { getSegmentDisplayMode } from './listStoryScrollTrack';
+export function buildStorySegmentViewItems(model, storyData) {
+    var _a;
+    const segments = (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) !== null && _a !== void 0 ? _a : [];
+    const items = segments.map((segmentId, index) => {
+        var _a;
+        const layer = model.getLayer(segmentId);
+        return {
+            id: segmentId,
+            index,
+            layerName: (_a = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _a !== void 0 ? _a : `Segment ${index + 1}`,
+            activeSlide: layer === null || layer === void 0 ? void 0 : layer.parameters,
+        };
+    });
+    return items;
+}
+export function getStoryMarkdownFromSlide(activeSlide) {
+    var _a;
+    const markdown = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _a === void 0 ? void 0 : _a.markdown;
+    return typeof markdown === 'string' ? markdown : '';
+}
+export function getListStoryMarkdownSegmentsFromItems(items) {
+    return items
+        .filter(item => getSegmentDisplayMode(item.activeSlide) === 'markdown')
+        .map(item => ({
+        id: item.id,
+        index: item.index,
+        markdown: getStoryMarkdownFromSlide(item.activeSlide),
+    }));
+}

package/lib/index.d.ts

@@ -1,14 +1,16 @@
-export * from './annotations';
+export * from './features/annotations';
+export * from './features/processing/serverProcessing';
 export * from './commands/index';
 export * from './constants';
-export * from './dialogs/layerCreationFormDialog';
-export * from './icons';
+export * from './features/layers/layerCreationFormDialog';
+export * from './shared/icons';
 export * from './mainview';
-export * from './menus';
-export * from './panelview';
-export * from './store';
-export * from './stacBrowser';
-export * from './toolbar';
+export * from './workspace/menus';
+export * from './workspace/panels';
+export * from './shared/store';
+export * from './features/stac-browser';
+export * from './features/objectproperties';
+export * from './workspace/toolbar';
 export * from './tools';
 export * from './types';
-export * from './widget';
+export * from './workspace/widget';

package/lib/index.js

@@ -1,14 +1,16 @@
-export * from './annotations';
+export * from './features/annotations';
+export * from './features/processing/serverProcessing';
 export * from './commands/index';
 export * from './constants';
-export * from './dialogs/layerCreationFormDialog';
-export * from './icons';
+export * from './features/layers/layerCreationFormDialog';
+export * from './shared/icons';
 export * from './mainview';
-export * from './menus';
-export * from './panelview';
-export * from './store';
-export * from './stacBrowser';
-export * from './toolbar';
+export * from './workspace/menus';
+export * from './workspace/panels';
+export * from './shared/store';
+export * from './features/stac-browser';
+export * from './features/objectproperties';
+export * from './workspace/toolbar';
 export * from './tools';
 export * from './types';
-export * from './widget';
+export * from './workspace/widget';

package/lib/keybindings.json

@@ -39,6 +39,11 @@
         "keys": ["F2"],
         "selector": ".data-jgis-keybinding"
     },
+    {
+        "command": "jupytergis:toggleDrawFeatures",
+        "keys": ["Accel Shift D"],
+        "selector": ".data-jgis-keybinding"
+    },
     {
         "command": "jupytergis:executeConsole",
         "keys": ["Shift Enter"],

package/lib/mainview/OpenEOTileLayer.d.ts

@@ -0,0 +1,49 @@
+import { Connection, Process } from '@openeo/js-client';
+import TileLayer from 'ol/layer/Tile';
+import { ProjectionLike } from 'ol/proj';
+import { XYZ as XYZSource } from 'ol/source';
+import { Options as XYZOptions } from 'ol/source/XYZ';
+export interface ISigninValues {
+    serverUrl: string;
+    username: string;
+    password: string;
+}
+export declare function connect(connectionInfo: IOpenEOConnectionInfo): Promise<Connection>;
+export interface IOpenEOConnectionInfo {
+    /**
+     * The url to the open-eo server.
+     */
+    url?: string;
+    /**
+     * The session bearer.
+     */
+    authBearer?: string;
+}
+export interface IOpenEOTileLayerOptions {
+    /**
+     * The tile size
+     */
+    projection?: ProjectionLike;
+}
+export declare class OpenEOTileLayer extends TileLayer {
+}
+export interface IOpenEOTileSourceOptions extends XYZOptions {
+    /**
+     * The process graph value.
+     */
+    processGraph: Process;
+    /**
+     * The connection info.
+     */
+    connectionInfo: IOpenEOConnectionInfo;
+}
+export declare class OpenEOTileSource extends XYZSource {
+    constructor(options: IOpenEOTileSourceOptions);
+    private _connect;
+    private _updateUrl;
+    private _url;
+    private _connection;
+    private _connected;
+    processGraph: Process;
+    connectionInfo: IOpenEOConnectionInfo;
+}

package/lib/mainview/OpenEOTileLayer.js

@@ -0,0 +1,179 @@
+import { showErrorMessage, Dialog, ReactWidget, showDialog, } from '@jupyterlab/apputils';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { OpenEO } from '@openeo/js-client';
+import TileLayer from 'ol/layer/Tile';
+import { XYZ as XYZSource } from 'ol/source';
+import React from 'react';
+const CONNECTIONS = {};
+class SigninWidget extends ReactWidget {
+    constructor(initialServerUrl = '') {
+        super();
+        this._username = '';
+        this._password = '';
+        this._serverUrl = initialServerUrl;
+    }
+    getValue() {
+        return {
+            serverUrl: this._serverUrl,
+            username: this._username,
+            password: this._password,
+        };
+    }
+    render() {
+        return (React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                minWidth: '320px',
+            } },
+            React.createElement("label", null,
+                React.createElement("div", { style: { marginBottom: '4px' } }, "Server URL"),
+                React.createElement("input", { className: "jp-mod-styled", type: "text", defaultValue: this._serverUrl, onChange: e => {
+                        this._serverUrl = e.target.value;
+                    }, style: { width: '100%' } })),
+            React.createElement("label", null,
+                React.createElement("div", { style: { marginBottom: '4px' } }, "Username"),
+                React.createElement("input", { className: "jp-mod-styled", type: "text", onChange: e => {
+                        this._username = e.target.value;
+                    }, style: { width: '100%' } })),
+            React.createElement("label", null,
+                React.createElement("div", { style: { marginBottom: '4px' } }, "Password"),
+                React.createElement("input", { className: "jp-mod-styled", type: "password", onChange: e => {
+                        this._password = e.target.value;
+                    }, style: { width: '100%' } }))));
+    }
+}
+async function showSigninDialog(serverUrl) {
+    const body = new SigninWidget(serverUrl);
+    const result = await showDialog({
+        title: 'Signin to OpenEO tile server',
+        body,
+        buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Sign In' })],
+    });
+    if (!result.button.accept) {
+        return null;
+    }
+    return body.getValue();
+}
+export async function connect(connectionInfo) {
+    let { url } = connectionInfo;
+    const { authBearer } = connectionInfo;
+    let signIn = null;
+    if (!url) {
+        signIn = await showSigninDialog(url);
+        if (!signIn) {
+            throw new Error('Needs credentials to connect to OpenEO server.');
+        }
+        url = signIn.serverUrl;
+    }
+    if (!url.match(/^https?:\/\//i)) {
+        url = `https://${url}`;
+    }
+    // Already connected to that server url
+    if (CONNECTIONS[url]) {
+        return CONNECTIONS[url];
+    }
+    const errorTitle = 'Failed to connect to the OpenEO server';
+    const parsedUrl = new URL(url);
+    if (window.location.protocol === 'https:' &&
+        parsedUrl.protocol !== 'https:') {
+        showErrorMessage(errorTitle, 'You are trying to connect to a server with HTTP instead of HTTPS, which is insecure and prohibited by web browsers. Please use HTTPS instead.');
+        throw new Error(errorTitle);
+    }
+    try {
+        const connection = await OpenEO.connect(url, {
+            addNamespaceToProcess: true,
+        });
+        const providers = await connection.listAuthProviders();
+        let providerType = 'basic';
+        let token = null;
+        if (authBearer) {
+            providerType = authBearer.split('/')[0];
+            token = authBearer.split('/')[2];
+        }
+        const authProvider = providers.find(provider => provider.type === providerType);
+        if (!authProvider) {
+            throw new Error(`Failed to get "${providerType}" OpenEO provider.`);
+        }
+        if (token) {
+            authProvider.setToken(token);
+        }
+        else {
+            if (!signIn) {
+                // TODO Add support for signin dialogs for OIDC?
+                signIn = await showSigninDialog(url);
+                if (!signIn) {
+                    throw new Error('Needs credentials to connect to OpenEO server.');
+                }
+            }
+            await authProvider.login(signIn.username, signIn.password);
+            const token = authProvider.getToken();
+            if (token) {
+                connectionInfo.authBearer = token;
+            }
+        }
+        const serviceTypes = await connection.listServiceTypes();
+        // TODO Support other services?
+        if (!serviceTypes['XYZ']) {
+            throw new Error('We need the OpenEO service to support XYZ tiling.');
+        }
+        CONNECTIONS[url] = connection;
+        return connection;
+    }
+    catch (error) {
+        showErrorMessage(errorTitle, `${error}`);
+        throw error;
+    }
+}
+export class OpenEOTileLayer extends TileLayer {
+}
+export class OpenEOTileSource extends XYZSource {
+    constructor(options) {
+        super(Object.assign(Object.assign({}, options), { url: '{z},{x},{y}', tileLoadFunction: async (tile, src) => {
+                await this._connected.promise;
+                let url = this._url;
+                if (!url) {
+                    throw new Error('XYZ URL undefined');
+                }
+                const [z, x, y] = tile.tileCoord;
+                url = url.replace('%7Bz%7D', z);
+                url = url.replace('%7By%7D', y);
+                url = url.replace('%7Bx%7D', x);
+                const res = await fetch(url, {
+                    method: 'GET',
+                });
+                const blob = await res.blob();
+                tile.getImage().src = URL.createObjectURL(blob);
+            } }));
+        this._url = null;
+        this._connection = null;
+        this._connected = new PromiseDelegate();
+        this._connect(options.connectionInfo, options.processGraph);
+    }
+    async _connect(connectionInfo, graph) {
+        this._connection = await connect(connectionInfo);
+        if (!this._connection) {
+            throw new Error('Failed to get OpenEO connection');
+        }
+        this._connected.resolve();
+        this._updateUrl(graph);
+    }
+    async _updateUrl(processGraph) {
+        await this._connected.promise;
+        if (!this._connection) {
+            throw new Error('Failed to get OpenEO service connection');
+        }
+        let service = null;
+        try {
+            service = await this._connection.createService(processGraph, 'XYZ');
+        }
+        catch (e) {
+            throw new Error(`Failed to connect to XYZ service ${e}`);
+        }
+        if (!service.url) {
+            throw new Error('Failed to connect to XYZ service');
+        }
+        this._url = service.url;
+        this.refresh();
+    }
+}

package/lib/mainview/TemporalSlider.js

@@ -4,7 +4,7 @@ import { Button, Slider } from '@jupyter/react-components';
 import { format, isValid, parse } from 'date-fns';
 import { daysInYear, millisecondsInDay, millisecondsInHour, millisecondsInMinute, millisecondsInSecond, millisecondsInWeek, minutesInMonth, } from 'date-fns/constants';
 import React, { useEffect, useRef, useState } from 'react';
-import { useGetProperties } from "../dialogs/symbology/hooks/useGetProperties";
+import { useGetProperties } from "../features/layers/symbology/hooks/useGetProperties";
 // List of common date formats to try
 // TODO: Not even close to every valid format
 const commonDateFormats = [
@@ -45,7 +45,7 @@ const TemporalSlider = ({ model, filterStates, }) => {
     const { featureProperties } = useGetProperties({ layerId, model });
     useEffect(() => {
         // This is for when the selected layer changes
-        const handleClientStateChanged = () => {
+        const handleSelectedChanged = () => {
             var _a, _b;
             if (!((_b = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
                 return;
@@ -59,7 +59,7 @@ const TemporalSlider = ({ model, filterStates, }) => {
             }
         };
         // this is for when the layer itself changes
-        const handleLayerChange = (_, change) => {
+        const handleSharedLayersChanged = (_, change) => {
             var _a;
             // Get the changes for the selected layer
             const selectedLayer = (_a = change.layerChange) === null || _a === void 0 ? void 0 : _a.find(layer => layer.id === layerIdRef.current);
@@ -71,16 +71,18 @@ const TemporalSlider = ({ model, filterStates, }) => {
             // If layer was deleted (empty object) or the layer type changed, close the temporal controller
             if (Object.keys(newValue).length === 0 ||
                 newValue.type !== oldValue.type) {
-                model.toggleTemporalController();
+                if (model.isTemporalControllerActive) {
+                    model.toggleTemporalController();
+                }
             }
         };
         // Initial state
-        handleClientStateChanged();
-        model.clientStateChanged.connect(handleClientStateChanged);
-        model.sharedLayersChanged.connect(handleLayerChange);
+        handleSelectedChanged();
+        model.selectedChanged.connect(handleSelectedChanged);
+        model.sharedLayersChanged.connect(handleSharedLayersChanged);
         return () => {
-            model.clientStateChanged.disconnect(handleClientStateChanged);
-            model.sharedLayersChanged.disconnect(handleLayerChange);
+            model.selectedChanged.disconnect(handleSelectedChanged);
+            model.sharedLayersChanged.disconnect(handleSharedLayersChanged);
             removeFilter();
             if (intervalRef.current) {
                 clearInterval(intervalRef.current);

package/lib/mainview/components/MainViewMapSurface.d.ts

@@ -0,0 +1,15 @@
+import { IDict } from '@jupytergis/schema';
+import { User } from '@jupyterlab/services';
+import React, { RefObject } from 'react';
+import { ClientPointer } from "../CollaboratorPointers";
+export interface IMainViewMapSurfaceProps {
+    mainViewRef: RefObject<HTMLDivElement>;
+    loading: boolean;
+    remoteUser?: User.IIdentity | null;
+    clientPointers: IDict<ClientPointer>;
+    spectaMobileTouch: boolean;
+    onTouchStart?: (event: React.TouchEvent) => void;
+    onTouchEnd?: (event: React.TouchEvent) => void;
+    children: React.ReactNode;
+}
+export declare function MainViewMapSurface({ mainViewRef, loading, remoteUser, clientPointers, spectaMobileTouch, onTouchStart, onTouchEnd, children, }: IMainViewMapSurfaceProps): JSX.Element;

package/lib/mainview/components/MainViewMapSurface.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import CollaboratorPointers from "../CollaboratorPointers";
+import { FollowIndicator } from "../FollowIndicator";
+import { LoadingOverlay } from "../../shared/components/loading";
+export function MainViewMapSurface({ mainViewRef, loading, remoteUser, clientPointers, spectaMobileTouch, onTouchStart, onTouchEnd, children, }) {
+    return (React.createElement("div", { ref: mainViewRef, className: "jGIS-Mainview data-jgis-keybinding", tabIndex: 0, style: {
+            border: remoteUser ? `solid 3px ${remoteUser.color}` : 'unset',
+        }, onTouchStart: spectaMobileTouch ? onTouchStart : undefined, onTouchEnd: spectaMobileTouch ? onTouchEnd : undefined },
+        React.createElement(LoadingOverlay, { loading: loading }),
+        React.createElement(FollowIndicator, { remoteUser: remoteUser }),
+        React.createElement(CollaboratorPointers, { clients: clientPointers }),
+        children));
+}

package/lib/mainview/components/MainViewOverlayLayer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface IMainViewOverlayLayerProps {
+    annotationFloaters: React.ReactNode;
+    featureFloaters: React.ReactNode;
+    editingVectorLayer: boolean;
+    drawGeometryLabel: string | undefined;
+    onDrawGeometryTypeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+export declare function MainViewOverlayLayer({ annotationFloaters, featureFloaters, editingVectorLayer, drawGeometryLabel, onDrawGeometryTypeChange, }: IMainViewOverlayLayerProps): JSX.Element;

package/lib/mainview/components/MainViewOverlayLayer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+const DRAW_GEOMETRIES = ['Point', 'LineString', 'Polygon'];
+export function MainViewOverlayLayer({ annotationFloaters, featureFloaters, editingVectorLayer, drawGeometryLabel, onDrawGeometryTypeChange, }) {
+    return (React.createElement(React.Fragment, null,
+        annotationFloaters,
+        featureFloaters,
+        editingVectorLayer ? (React.createElement("div", { className: "jgis-geometry-type-selector-overlay" },
+            React.createElement("select", { className: "geometry-type-selector", id: "geometry-type-selector", value: drawGeometryLabel !== null && drawGeometryLabel !== void 0 ? drawGeometryLabel : '', onChange: onDrawGeometryTypeChange },
+                React.createElement("option", { value: "", disabled: true, hidden: true }, "Geometry type"),
+                DRAW_GEOMETRIES.map(geometryType => (React.createElement("option", { key: geometryType, value: geometryType }, geometryType)))))) : null));
+}

package/lib/mainview/components/MainViewSidePanels.d.ts

@@ -0,0 +1,17 @@
+import { IAnnotationModel, IJGISFormSchemaRegistry, IJGISLayer, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
+import { IStateDB } from '@jupyterlab/statedb';
+import { CommandRegistry } from '@lumino/commands';
+import type { PatchGeoJSONFeatureProperties } from "../geoJsonFeaturePatch";
+export interface IMainViewSidePanelsProps {
+    model: IJupyterGISModel;
+    commands: CommandRegistry;
+    settings: IJupyterGISSettings;
+    showMergedMobilePanel: boolean;
+    state?: IStateDB;
+    formSchemaRegistry?: IJGISFormSchemaRegistry;
+    annotationModel?: IAnnotationModel;
+    addLayer: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer: (id: string) => void;
+    patchGeoJSONFeatureProperties: PatchGeoJSONFeatureProperties;
+}
+export declare function MainViewSidePanels({ model, commands, settings, showMergedMobilePanel, state, formSchemaRegistry, annotationModel, addLayer, removeLayer, patchGeoJSONFeatureProperties, }: IMainViewSidePanelsProps): JSX.Element;

package/lib/mainview/components/MainViewSidePanels.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LeftPanel, MergedPanel, RightPanel } from "../../workspace/panels";
+export function MainViewSidePanels({ model, commands, settings, showMergedMobilePanel, state, formSchemaRegistry, annotationModel, addLayer, removeLayer, patchGeoJSONFeatureProperties, }) {
+    if (showMergedMobilePanel) {
+        return (React.createElement(MergedPanel, { model: model, commands: commands, state: state, settings: settings, formSchemaRegistry: formSchemaRegistry, annotationModel: annotationModel, addLayer: addLayer, removeLayer: removeLayer }));
+    }
+    return (React.createElement(React.Fragment, null,
+        state ? (React.createElement(LeftPanel, { model: model, commands: commands, state: state, settings: settings })) : null,
+        formSchemaRegistry && annotationModel ? (React.createElement(RightPanel, { model: model, commands: commands, formSchemaRegistry: formSchemaRegistry, annotationModel: annotationModel, addLayer: addLayer, removeLayer: removeLayer, settings: settings, patchGeoJSONFeatureProperties: patchGeoJSONFeatureProperties })) : null));
+}

package/lib/mainview/components/MainViewSpectaPanel.d.ts

@@ -0,0 +1,17 @@
+import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
+import { RefObject } from 'react';
+import type { IStoryViewerPanelHandle } from "../../features/story/StoryViewerPanel";
+import type { IListStorySegmentTransition } from "../../features/story/types/types";
+export interface IMainViewSpectaPanelProps {
+    model: IJupyterGISModel;
+    isSpecta: boolean;
+    isMobile: boolean;
+    initialLayersReady: boolean;
+    containerRef: RefObject<HTMLDivElement>;
+    storyViewerPanelRef: RefObject<IStoryViewerPanelHandle>;
+    addLayer: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer: (id: string) => void;
+    onSegmentTransitionEnd: () => void;
+    onSegmentTransitionChange: (payload: IListStorySegmentTransition | null) => void;
+}
+export declare function MainViewSpectaPanel({ model, isSpecta, isMobile, initialLayersReady, containerRef, storyViewerPanelRef, addLayer, removeLayer, onSegmentTransitionEnd, onSegmentTransitionChange, }: IMainViewSpectaPanelProps): JSX.Element | null;

package/lib/mainview/components/MainViewSpectaPanel.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SpectaPanel } from "../../features/story/SpectaPanel";
+export function MainViewSpectaPanel({ model, isSpecta, isMobile, initialLayersReady, containerRef, storyViewerPanelRef, addLayer, removeLayer, onSegmentTransitionEnd, onSegmentTransitionChange, }) {
+    if (!initialLayersReady) {
+        return null;
+    }
+    return (React.createElement(SpectaPanel, { model: model, isSpecta: isSpecta, isMobile: isMobile, onSegmentTransitionEnd: onSegmentTransitionEnd, containerRef: containerRef, storyViewerPanelRef: storyViewerPanelRef, addLayer: addLayer, removeLayer: removeLayer, onSegmentTransitionChange: onSegmentTransitionChange }));
+}

package/lib/mainview/components/MainViewStoryStage.d.ts

@@ -0,0 +1,13 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React, { RefObject } from 'react';
+import type { IListStorySegmentTransition } from "../../features/story/types/types";
+export interface IMainViewStoryStageProps {
+    model: IJupyterGISModel;
+    isListStory: boolean;
+    isMobile: boolean;
+    segmentTransition: IListStorySegmentTransition | null;
+    stageRef: RefObject<HTMLDivElement>;
+    controlsToolbarRef: RefObject<HTMLDivElement>;
+    panels: React.ReactNode;
+}
+export declare function MainViewStoryStage({ model, isListStory, isMobile, segmentTransition, stageRef, controlsToolbarRef, panels, }: IMainViewStoryStageProps): JSX.Element;

package/lib/mainview/components/MainViewStoryStage.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ListStoryStageOverlay } from "../../features/story/components/ListStoryStageOverlay";
+import { ListStoryTitleBar } from "../../features/story/components/ListStoryTitleBar";
+import { ListStoryScrollTrackProvider } from "../../features/story/context/ListStoryScrollTrackContext";
+export function MainViewStoryStage({ model, isListStory, isMobile, segmentTransition, stageRef, controlsToolbarRef, panels, }) {
+    return (React.createElement("div", { ref: stageRef, className: "jgis-mainview-stage", style: {
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+        } },
+        React.createElement(ListStoryScrollTrackProvider, { model: model, enabled: isListStory },
+            isListStory ? (React.createElement(React.Fragment, null,
+                React.createElement(ListStoryTitleBar, { model: model, isMobile: isMobile }),
+                React.createElement(ListStoryStageOverlay, { model: model, segmentTransition: segmentTransition }))) : null,
+            React.createElement("div", { className: "jgis-panels-wrapper" }, panels),
+            React.createElement("div", { ref: controlsToolbarRef, className: "jgis-controls-toolbar" }))));
+}

package/lib/mainview/components/PositionedFloater.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface IPositionedFloaterProps {
+    id: string;
+    className: string;
+    left: number;
+    top: number;
+    children: React.ReactNode;
+}
+export declare function PositionedFloater({ id, className, left, top, children, }: IPositionedFloaterProps): JSX.Element;
+export {};

package/lib/mainview/components/PositionedFloater.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export function PositionedFloater({ id, className, left, top, children, }) {
+    return (React.createElement("div", { id: id, className: className, style: {
+            left,
+            top,
+        } }, children));
+}

package/lib/mainview/geoJsonFeaturePatch.d.ts

@@ -0,0 +1,9 @@
+import { IDict, IJGISSource, IJupyterGISModel } from '@jupytergis/schema';
+export interface IPatchGeoJSONFeatureContext {
+    model: IJupyterGISModel;
+    persistAndRefreshSource: (sourceId: string, source: IJGISSource) => Promise<void>;
+}
+export type PatchGeoJSONFeatureProperties = (sourceId: string, target: {
+    featureId: string;
+}, propertyUpdates: IDict<any>) => Promise<boolean>;
+export declare function createGeoJSONFeaturePatcher(context: IPatchGeoJSONFeatureContext): PatchGeoJSONFeatureProperties;

package/lib/mainview/geoJsonFeaturePatch.js

@@ -0,0 +1,43 @@
+import { deepCopy } from "../tools";
+/**
+ * Only concerned with features added via draw tool for now
+ */
+async function patchGeoJSONFeatureProperties(context, sourceId, target, propertyUpdates) {
+    var _a;
+    if (!context.model.sharedModel.editable) {
+        return false;
+    }
+    const source = context.model.getSource(sourceId);
+    if (!source || source.type !== 'GeoJSONSource') {
+        return false;
+    }
+    const parameters = source.parameters;
+    const data = parameters.data;
+    if (!data || data.type !== 'FeatureCollection') {
+        return false;
+    }
+    const features = data.features;
+    const featureId = target.featureId;
+    const index = features.findIndex(feature => { var _a; return ((_a = feature.properties) === null || _a === void 0 ? void 0 : _a._id) === featureId; });
+    if (index < 0 || index >= features.length) {
+        return false;
+    }
+    const updatedSource = deepCopy(source);
+    const updatedParameters = updatedSource.parameters;
+    const updatedData = updatedParameters.data;
+    const updatedFeature = updatedData.features[index];
+    const nextProperties = Object.assign({}, ((_a = updatedFeature.properties) !== null && _a !== void 0 ? _a : {}));
+    Object.entries(propertyUpdates).forEach(([key, value]) => {
+        if (value === undefined) {
+            delete nextProperties[key];
+            return;
+        }
+        nextProperties[key] = value;
+    });
+    updatedFeature.properties = nextProperties;
+    await context.persistAndRefreshSource(sourceId, updatedSource);
+    return true;
+}
+export function createGeoJSONFeaturePatcher(context) {
+    return (sourceId, target, propertyUpdates) => patchGeoJSONFeatureProperties(context, sourceId, target, propertyUpdates);
+}