@jupytergis/base 0.15.0 → 0.16.0-alpha.1

package/lib/mainview/mainView.js

@@ -16,38 +16,70 @@ import { UUID } from '@lumino/coreutils';
 import { ContextMenu, Menu } from '@lumino/widgets';
 import { Collection, Map as OlMap, View, getUid, } from 'ol';
 import Feature from 'ol/Feature';
+import TileState from 'ol/TileState';
 import { FullScreen, ScaleLine, Zoom } from 'ol/control';
 import { singleClick } from 'ol/events/condition';
-import { getCenter } from 'ol/extent';
+import { getCenter, getSize } from 'ol/extent';
 import { GeoJSON, MVT } from 'ol/format';
 import { Point } from 'ol/geom';
 import { DragAndDrop, DragPan, DragRotate, DragZoom, KeyboardPan, KeyboardZoom, MouseWheelZoom, PinchRotate, PinchZoom, DoubleClickZoom, Select, } from 'ol/interaction';
-import { Heatmap as HeatmapLayer, Image as ImageLayer, Layer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer, } from 'ol/layer';
+import Draw from 'ol/interaction/Draw';
+import Modify from 'ol/interaction/Modify';
+import Snap from 'ol/interaction/Snap';
+import { Image as ImageLayer, Layer, VectorImage as VectorImageLayer, VectorTile as VectorTileLayer, WebGLTile as GeoTiffLayer, } from 'ol/layer';
+import LayerGroup from 'ol/layer/Group';
 import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, get as getProjection, toLonLat, transformExtent, } from 'ol/proj';
 import { register } from 'ol/proj/proj4.js';
 import RenderFeature, { toGeometry } from 'ol/render/Feature';
 import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, TileWMS as TileWMSSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
-import { Circle, Fill, Icon, Stroke, Style } from 'ol/style';
+import { Fill, Icon, Stroke, Style } from 'ol/style';
+import CircleStyle from 'ol/style/Circle';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
 import StacLayer from 'ol-stac';
 import proj4 from 'proj4';
 import proj4list from 'proj4-list';
 import * as React from 'react';
-import AnnotationFloater from "../annotations/components/AnnotationFloater";
 import { CommandIDs } from "../constants";
-import { LoadingOverlay } from "../shared/components/loading";
+import AnnotationFloater from "../features/annotations/components/AnnotationFloater";
+import FeatureFloater from "../features/identify/components/FeatureFloater";
+import { getFeatureIdentifier } from "../features/identify/utils/getFeatureIdentifier";
 import useMediaQuery from "../shared/hooks/useMediaQuery";
-import StatusBar from "../statusbar/StatusBar";
-import { debounce, isLightTheme, loadFile, throttle } from "../tools";
-import CollaboratorPointers from './CollaboratorPointers';
-import { FollowIndicator } from './FollowIndicator';
+import { markerIcon } from "../shared/icons";
+import { debounce, INTERNAL_PROXY_BASE, isJupyterLite, isLightTheme, loadFile, throttle, } from "../tools";
+import StatusBar from "../workspace/statusbar/StatusBar";
+import { OpenEOTileLayer, OpenEOTileSource } from './OpenEOTileLayer';
 import TemporalSlider from './TemporalSlider';
-import { markerIcon } from '../icons';
-import { LeftPanel, RightPanel } from '../panelview';
-import { SpectaPanel } from '../panelview/story-maps/SpectaPanel';
+import { MainViewMapSurface } from './components/MainViewMapSurface';
+import { MainViewOverlayLayer } from './components/MainViewOverlayLayer';
+import { MainViewSidePanels } from './components/MainViewSidePanels';
+import { MainViewSpectaPanel } from './components/MainViewSpectaPanel';
+import { MainViewStoryStage } from './components/MainViewStoryStage';
+import { PositionedFloater } from './components/PositionedFloater';
+import { createGeoJSONFeaturePatcher, } from './geoJsonFeaturePatch';
+import { ensureHighlightLayer } from '../features/identify/utils/highlightLayer';
+import { buildHighlightStyle } from '../features/identify/utils/highlightStyle';
+import { grammarToOLLayer } from '../features/layers/symbology/grammarToOLLayer';
+import { extractEncodingFieldValues, grammarToOLStyle, } from '../features/layers/symbology/grammarToOLStyle';
+import { DEFAULT_FLAT_STYLE } from '../features/layers/symbology/styleBuilder';
+import { STORY_TYPE } from '../types';
+const drawInteractionStyle = new Style({
+    fill: new Fill({
+        color: 'rgba(255, 255, 255, 0.2)',
+    }),
+    stroke: new Stroke({
+        color: '#ffcc33',
+        width: 2,
+    }),
+    image: new CircleStyle({
+        radius: 7,
+        fill: new Fill({
+            color: '#ffcc33',
+        }),
+    }),
+});
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
@@ -64,48 +96,8 @@ export class MainView extends React.Component {
             return transformExtent(extent, view.getProjection(), targetProjection);
         };
         this.createSelectInteraction = () => {
-            const pointStyle = new Style({
-                image: new Circle({
-                    radius: 5,
-                    fill: new Fill({
-                        color: '#C52707',
-                    }),
-                    stroke: new Stroke({
-                        color: '#171717',
-                        width: 2,
-                    }),
-                }),
-            });
-            const lineStyle = new Style({
-                stroke: new Stroke({
-                    color: '#171717',
-                    width: 2,
-                }),
-            });
-            const polygonStyle = new Style({
-                fill: new Fill({ color: '#C5270780' }),
-                stroke: new Stroke({
-                    color: '#171717',
-                    width: 2,
-                }),
-            });
-            const styleFunction = (feature) => {
-                var _a;
-                const geometryType = (_a = feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType();
-                switch (geometryType) {
-                    case 'Point':
-                    case 'MultiPoint':
-                        return pointStyle;
-                    case 'LineString':
-                    case 'MultiLineString':
-                        return lineStyle;
-                    case 'Polygon':
-                    case 'MultiPolygon':
-                        return polygonStyle;
-                }
-            };
             const selectInteraction = new Select({
-                hitTolerance: 5,
+                hitTolerance: 3,
                 multi: true,
                 layers: layer => {
                     var _a, _b;
@@ -115,19 +107,84 @@ export class MainView extends React.Component {
                         return false;
                     }
                     const selectedLayerId = Object.keys(selectedLayers)[0];
-                    return layer === this.getLayer(selectedLayerId);
+                    const expected = this.getLayer(selectedLayerId);
+                    if (layer === expected) {
+                        return true;
+                    }
+                    // Grammar multi-layer symbology wraps sub-layers in a LayerGroup.
+                    // OL Select flattens groups, so we receive leaf layers, not the group.
+                    if (expected instanceof LayerGroup) {
+                        return expected.getLayers().getArray().includes(layer);
+                    }
+                    return false;
                 },
                 condition: (event) => {
                     return singleClick(event) && this._model.currentMode === 'identifying';
                 },
-                style: styleFunction,
+                // Use the layer's own style so selected features keep their original
+                // appearance.  Visual highlight feedback comes from _highlightLayer.
+                style: null,
             });
             selectInteraction.on('select', event => {
+                var _a, _b, _c;
                 const identifiedFeatures = [];
+                const highlightFeatures = [];
+                // Look up the selected layer's style function for adaptive highlights.
+                const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
+                const selectedLayers = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
+                const selectedLayerId = selectedLayers
+                    ? Object.keys(selectedLayers)[0]
+                    : undefined;
+                const mapLayer = selectedLayerId
+                    ? this.getLayer(selectedLayerId)
+                    : undefined;
+                // For LayerGroup (multi-layer grammar), collect style functions from
+                // all sub-layers so we can match the right one per feature.
+                const styleFnCandidates = [];
+                if (mapLayer instanceof LayerGroup) {
+                    for (const sub of mapLayer.getLayers().getArray()) {
+                        if ('getStyleFunction' in sub) {
+                            styleFnCandidates.push(sub.getStyleFunction());
+                        }
+                    }
+                }
+                else if (mapLayer && 'getStyleFunction' in mapLayer) {
+                    styleFnCandidates.push(mapLayer.getStyleFunction());
+                }
+                const resolution = (_c = this._Map.getView().getResolution()) !== null && _c !== void 0 ? _c : 1;
                 selectInteraction.getFeatures().forEach(feature => {
-                    identifiedFeatures.push(feature.getProperties());
+                    identifiedFeatures.push({
+                        feature: feature.getProperties(),
+                        floaterOpen: false,
+                    });
+                    const geom = feature.getGeometry();
+                    if (geom) {
+                        const hlFeature = new Feature({ geometry: geom });
+                        // Try each style function candidate; use the first that resolves
+                        // a non-empty style array (important for LayerGroup sub-layers
+                        // where only one sub-layer's style applies to this feature).
+                        for (const fn of styleFnCandidates) {
+                            if (!fn) {
+                                continue;
+                            }
+                            const resolved = fn(feature, resolution);
+                            const styles = Array.isArray(resolved)
+                                ? resolved
+                                : resolved
+                                    ? [resolved]
+                                    : [];
+                            if (styles.length > 0) {
+                                const gType = geom.getType();
+                                hlFeature.setStyle(styles.map(s => this._buildHighlightStyle(s, gType)));
+                                break;
+                            }
+                        }
+                        highlightFeatures.push(hlFeature);
+                    }
                 });
                 this._model.syncIdentifiedFeatures(identifiedFeatures, this._mainViewModel.id);
+                // Sync _highlightLayer with the current selection (clears on deselect).
+                this._setHighlightFeatures(highlightFeatures);
             });
             this._Map.addInteraction(selectInteraction);
         };
@@ -210,25 +267,16 @@ export class MainView extends React.Component {
                 rank: 2,
             });
         };
+        // Used by VectorTileLayer (which shares a flat-style API with Grammar output).
         this.vectorLayerStyleRuleBuilder = (layer) => {
             var _a, _b;
             const layerParams = layer.parameters;
-            if (!layerParams) {
-                return;
+            const ss = layerParams === null || layerParams === void 0 ? void 0 : layerParams.symbologyState;
+            if (!ss || Object.keys(ss).length === 0) {
+                return [{ style: DEFAULT_FLAT_STYLE }];
             }
-            const defaultStyle = {
-                'fill-color': 'rgba(255,255,255,0.4)',
-                'stroke-color': '#3399CC',
-                'stroke-width': 1.25,
-                'circle-radius': 5,
-                'circle-fill-color': 'rgba(255,255,255,0.4)',
-                'circle-stroke-width': 1.25,
-                'circle-stroke-color': '#3399CC',
-            };
-            const defaultRules = {
-                style: defaultStyle,
-            };
-            const layerStyle = Object.assign({}, defaultRules);
+            const flatStyle = grammarToOLStyle(layerParams.symbologyState, []);
+            const layerStyle = { style: flatStyle };
             if (((_a = layer.filters) === null || _a === void 0 ? void 0 : _a.logicalOp) && ((_b = layer.filters.appliedFilters) === null || _b === void 0 ? void 0 : _b.length) > 0) {
                 const buildCondition = (filter) => {
                     const base = [filter.operator, ['get', filter.feature]];
@@ -236,89 +284,13 @@ export class MainView extends React.Component {
                         ? [...base, filter.betweenMin, filter.betweenMax]
                         : [...base, filter.value];
                 };
-                let filterExpr;
-                // 'Any' and 'All' operators require more than one argument
-                // So if there's only one filter, skip that part to avoid error
-                if (layer.filters.appliedFilters.length === 1) {
-                    filterExpr = buildCondition(layer.filters.appliedFilters[0]);
-                }
-                else {
-                    // Arguments for "Any" and 'All' need to be wrapped in brackets
-                    filterExpr = [
-                        layer.filters.logicalOp,
-                        ...layer.filters.appliedFilters.map(buildCondition),
-                    ];
-                }
-                layerStyle.filter = filterExpr;
-            }
-            if (!layerParams.color) {
-                return [layerStyle];
-            }
-            const newStyle = Object.assign(Object.assign({}, defaultStyle), layerParams.color);
-            layerStyle.style = newStyle;
-            // When fallbackColor[3] === 0, add an OL filter so features that would be
-            // drawn with a transparent color are excluded from rendering entirely.
-            // alpha === 0 is the contract: the default TRANSPARENT [0,0,0,0] triggers
-            // this automatically, and a future dedicated picker option can set it.
-            const symbologyState = layerParams.symbologyState;
-            if (Array.isArray(symbologyState === null || symbologyState === void 0 ? void 0 : symbologyState.fallbackColor) &&
-                symbologyState.fallbackColor[3] === 0) {
-                let matchFilter;
-                if (symbologyState.renderType === 'Categorized') {
-                    const fillExpr = layerParams.color['fill-color'];
-                    if (Array.isArray(fillExpr) &&
-                        fillExpr[0] === 'case' &&
-                        fillExpr.length >= 4) {
-                        // Extract conditions from ['case', cond, val, cond, val, ..., fallback],
-                        // skipping any whose matched output color is also fully transparent.
-                        const conditions = [];
-                        for (let i = 1; i < fillExpr.length - 1; i += 2) {
-                            const output = fillExpr[i + 1];
-                            if (Array.isArray(output) && output[3] === 0) {
-                                continue;
-                            }
-                            conditions.push(fillExpr[i]);
-                        }
-                        // If every stop is transparent, use a never-true filter to hide all.
-                        matchFilter =
-                            conditions.length === 0
-                                ? ['==', 0, 1]
-                                : conditions.length === 1
-                                    ? conditions[0]
-                                    : ['any', ...conditions];
-                    }
-                }
-                else if (symbologyState.renderType === 'Graduated') {
-                    const fillExpr = layerParams.color['fill-color'];
-                    // Graduated fill is ['case', ['has', field], interpolateExpr, fallback].
-                    // Features missing the attribute fall through to the fallback, so filter
-                    // them out with the same ['has', field] condition.
-                    if (Array.isArray(fillExpr) &&
-                        fillExpr[0] === 'case' &&
-                        Array.isArray(fillExpr[1]) &&
-                        fillExpr[1][0] === 'has') {
-                        matchFilter = fillExpr[1];
-                    }
-                }
-                else if (symbologyState.renderType === 'Canonical') {
-                    const fillExpr = layerParams.color['fill-color'];
-                    // Canonical fill is ['coalesce', ['get', field], fallback].
-                    // Features missing the attribute fall through to the fallback, so filter
-                    // them out with ['has', field]. Note: features that have the field but
-                    // with a non-color value also get the fallback — that gap is accepted.
-                    if (Array.isArray(fillExpr) &&
-                        fillExpr[0] === 'coalesce' &&
-                        Array.isArray(fillExpr[1]) &&
-                        fillExpr[1][0] === 'get') {
-                        matchFilter = ['has', fillExpr[1][1]];
-                    }
-                }
-                if (matchFilter) {
-                    // Combine with any existing user-applied filter.
-                    layerStyle.filter = layerStyle.filter
-                        ? ['all', layerStyle.filter, matchFilter]
-                        : matchFilter;
-                }
+                layerStyle.filter =
+                    layer.filters.appliedFilters.length === 1
+                        ? buildCondition(layer.filters.appliedFilters[0])
+                        : [
+                            layer.filters.logicalOp,
+                            ...layer.filters.appliedFilters.map(buildCondition),
+                        ];
             }
             return [layerStyle];
         };
@@ -369,140 +341,36 @@ export class MainView extends React.Component {
             const scaled = ['*', 255, cosIncidence];
             return scaled;
         };
-        /**
-         * Heatmap layers don't work with style based filtering.
-         * This modifies the features in the underlying source
-         * to work with the temporal controller
-         */
-        this.handleTemporalController = (id, layer) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const selectedLayer = (_c = (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
-            // Temporal Controller shouldn't be active if more than one layer is selected
-            if (!selectedLayer || Object.keys(selectedLayer).length !== 1) {
+        this._handleSelectedChanged = () => {
+            var _a;
+            const localState = this._model.localState;
+            if (!localState) {
                 return;
             }
-            const selectedLayerId = Object.keys(selectedLayer)[0];
-            // Don't do anything to unselected layers
-            if (selectedLayerId !== id) {
+            const selectedLayers = (_a = localState.selected) === null || _a === void 0 ? void 0 : _a.value;
+            if (!selectedLayers) {
                 return;
             }
-            const layerParams = layer.parameters;
-            const source = this._sources[layerParams.source];
-            if ((_d = layer.filters) === null || _d === void 0 ? void 0 : _d.appliedFilters.length) {
-                // Heatmaps don't work with existing filter system so this should be fine
-                const activeFilter = layer.filters.appliedFilters[0];
-                // Save original features on first filter application
-                if (!Object.keys(this._originalFeatures).includes(id)) {
-                    this._originalFeatures[id] = (_e = source.getFeatures()) !== null && _e !== void 0 ? _e : [];
-                }
-                // clear current features
-                source.clear();
-                const startTime = (_f = activeFilter.betweenMin) !== null && _f !== void 0 ? _f : 0;
-                const endTime = (_g = activeFilter.betweenMax) !== null && _g !== void 0 ? _g : 1000;
-                const filteredFeatures = ((_h = this._originalFeatures[id]) !== null && _h !== void 0 ? _h : []).filter(feature => {
-                    const featureTime = feature.get(activeFilter.feature);
-                    return featureTime >= startTime && featureTime <= endTime;
-                });
-                // set state for restoration
-                this.setState(old => (Object.assign(Object.assign({}, old), { filterStates: Object.assign(Object.assign({}, this.state.filterStates), { [selectedLayerId]: activeFilter }) })));
-                source.addFeatures(filteredFeatures);
-            }
-            else {
-                // Restore original features when no filters are applied
-                source.addFeatures((_j = this._originalFeatures[id]) !== null && _j !== void 0 ? _j : []);
-                delete this._originalFeatures[id];
+            const selectedLayerId = Object.keys(selectedLayers)[0];
+            const JGISLayer = this._model.getLayer(selectedLayerId);
+            if (!JGISLayer) {
+                return;
             }
+            this._syncVectorDrawingFromSelection(JGISLayer, selectedLayerId);
         };
-        this._onClientSharedStateChanged = (sender, clients) => {
-            var _a, _b, _c;
-            const localState = this._model.localState;
-            if (!localState) {
+        this._syncVectorDrawingFromSelection = (layer, selectedLayerId) => {
+            const decision = this._getVectorDrawingSelectionDecision(layer, selectedLayerId);
+            if (decision.disableEditing) {
+                this._model.editingVectorLayer = false;
+                this._updateEditingVectorLayer();
                 return;
             }
-            const remoteUser = localState.remoteUser;
-            // If we are in following mode, we update our position and selection
-            if (remoteUser) {
-                const remoteState = clients.get(remoteUser);
-                if (!remoteState) {
-                    return;
-                }
-                if (((_a = remoteState.user) === null || _a === void 0 ? void 0 : _a.username) !== ((_b = this.state.remoteUser) === null || _b === void 0 ? void 0 : _b.username)) {
-                    this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: remoteState.user })));
-                }
-                const remoteViewport = remoteState.viewportState;
-                if (remoteViewport.value) {
-                    const { x, y } = remoteViewport.value.coordinates;
-                    const zoom = remoteViewport.value.zoom;
-                    this._moveToPosition({ x, y }, zoom, 0);
-                }
-            }
-            else {
-                // If we are unfollowing a remote user, we reset our center and zoom to their previous values
-                if (this.state.remoteUser !== null) {
-                    this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: null })));
-                    const viewportState = (_c = localState.viewportState) === null || _c === void 0 ? void 0 : _c.value;
-                    if (viewportState) {
-                        this._moveToPosition(viewportState.coordinates, viewportState.zoom);
-                    }
-                }
-            }
-            // cursors
-            clients.forEach((client, clientId) => {
-                var _a;
-                if (!(client === null || client === void 0 ? void 0 : client.user)) {
-                    return;
-                }
-                const pointer = (_a = client.pointer) === null || _a === void 0 ? void 0 : _a.value;
-                // We already display our own cursor on mouse move
-                if (this._model.getClientId() === clientId) {
-                    return;
-                }
-                const clientPointers = Object.assign({}, this.state.clientPointers);
-                let currentClientPointer = clientPointers[clientId];
-                if (pointer) {
-                    const pixel = this._Map.getPixelFromCoordinate([
-                        pointer.coordinates.x,
-                        pointer.coordinates.y,
-                    ]);
-                    const lonLat = toLonLat([pointer.coordinates.x, pointer.coordinates.y]);
-                    if (!currentClientPointer) {
-                        currentClientPointer = {
-                            username: client.user.username,
-                            displayName: client.user.display_name,
-                            color: client.user.color,
-                            coordinates: {
-                                x: pixel[0],
-                                y: pixel[1],
-                            },
-                            lonLat: {
-                                longitude: lonLat[0],
-                                latitude: lonLat[1],
-                            },
-                        };
-                    }
-                    else {
-                        currentClientPointer = Object.assign(Object.assign({}, currentClientPointer), { coordinates: {
-                                x: pixel[0],
-                                y: pixel[1],
-                            }, lonLat: {
-                                longitude: lonLat[0],
-                                latitude: lonLat[1],
-                            } });
-                    }
-                    clientPointers[clientId] = currentClientPointer;
-                }
-                else {
-                    delete clientPointers[clientId];
-                }
-                this.setState(old => (Object.assign(Object.assign({}, old), { clientPointers })));
-            });
-            // Temporal controller bit
-            // ? There's probably a better way to get changes in the model to trigger react rerenders
-            const isTemporalControllerActive = localState.isTemporalControllerActive;
-            if (isTemporalControllerActive !== this.state.displayTemporalController) {
-                this.setState(old => (Object.assign(Object.assign({}, old), { displayTemporalController: isTemporalControllerActive })));
-                this._mainViewModel.commands.notifyCommandChanged(CommandIDs.temporalController);
+            if (!decision.shouldRebind) {
+                return;
             }
+            this._previousDrawLayerID = selectedLayerId;
+            this._currentDrawLayerID = selectedLayerId;
+            this._editVectorLayer();
         };
         this._onSharedModelStateChange = (_, change) => {
             var _a;
@@ -521,6 +389,10 @@ export class MainView extends React.Component {
                 }
             }
         };
+        this._handleIdentifiedFeaturesChanged = () => {
+            this.setState(old => (Object.assign(Object.assign({}, old), { identifyFeatureFloatersVersion: old.identifyFeatureFloatersVersion + 1 })));
+            this._clearHighlightWhenIdentifyDisabled();
+        };
         /**
          * Handler for when story maps change in the model.
          * Updates specta state and presentation colors when story data becomes available.
@@ -561,7 +433,6 @@ export class MainView extends React.Component {
             });
         };
         this._setupStoryScrollListener = () => {
-            var _a, _b;
             // Guard: block wheel-driven segment change until transition has ended
             let segmentChangeInProgress = false;
             const clearGuard = () => {
@@ -569,16 +440,42 @@ export class MainView extends React.Component {
             };
             this._clearStoryScrollGuard = clearGuard;
             let accumulatedDeltaY = 0;
-            let scrollContainer = (_b = (_a = this.storyViewerPanelRef.current) === null || _a === void 0 ? void 0 : _a.getScrollContainer()) !== null && _b !== void 0 ? _b : null;
+            let scrollContainer = null;
+            const resolveStoryScrollContainer = () => {
+                var _a, _b;
+                const fromPanel = (_b = (_a = this.storyViewerPanelRef.current) === null || _a === void 0 ? void 0 : _a.getScrollContainer()) !== null && _b !== void 0 ? _b : null;
+                if (fromPanel && document.contains(fromPanel)) {
+                    return fromPanel;
+                }
+                const mobileScroll = document.querySelector('.jgis-story-mobile-list-scroll');
+                if (mobileScroll instanceof HTMLDivElement) {
+                    return mobileScroll;
+                }
+                return null;
+            };
+            scrollContainer = resolveStoryScrollContainer();
             const processStoryScrollFrame = () => {
+                var _a;
                 this._pendingStoryScrollRafId = null;
+                if (!scrollContainer || !document.contains(scrollContainer)) {
+                    scrollContainer = resolveStoryScrollContainer();
+                }
                 const currentPanelHandle = this.storyViewerPanelRef.current;
-                if (!currentPanelHandle || !scrollContainer) {
+                const storyType = (_a = this._model.getSelectedStory().story) === null || _a === void 0 ? void 0 : _a.storyType;
+                if (!scrollContainer) {
                     accumulatedDeltaY = 0;
                     return;
                 }
                 const deltaY = accumulatedDeltaY;
                 accumulatedDeltaY = 0;
+                // Don't want to handle next/prev logic in list mode
+                if (storyType === STORY_TYPE.verticalScroll) {
+                    scrollContainer.scrollBy({ top: deltaY });
+                    return;
+                }
+                if (!currentPanelHandle) {
+                    return;
+                }
                 const isScrollingUp = deltaY < 0;
                 const isScrollingDown = deltaY > 0;
                 const isAtTop = currentPanelHandle.getAtTop();
@@ -601,11 +498,10 @@ export class MainView extends React.Component {
                 scrollContainer.scrollBy({ top: deltaY });
             };
             const handleScroll = (event) => {
-                var _a, _b;
+                const wheelEvent = event;
                 event.preventDefault();
                 if (!scrollContainer || !document.contains(scrollContainer)) {
-                    scrollContainer =
-                        (_b = (_a = this.storyViewerPanelRef.current) === null || _a === void 0 ? void 0 : _a.getScrollContainer()) !== null && _b !== void 0 ? _b : null;
+                    scrollContainer = resolveStoryScrollContainer();
                 }
                 if (!scrollContainer) {
                     return;
@@ -614,7 +510,7 @@ export class MainView extends React.Component {
                 // frames on slow hardware). We accumulate deltaY and run flush once per
                 // frame via rAF—the frame boundary batches events without adding delay.
                 // So one scroll means one segment/scroll decision.
-                accumulatedDeltaY += event.deltaY;
+                accumulatedDeltaY += wheelEvent.deltaY;
                 if (this._pendingStoryScrollRafId === null) {
                     this._pendingStoryScrollRafId = requestAnimationFrame(processStoryScrollFrame);
                 }
@@ -652,7 +548,7 @@ export class MainView extends React.Component {
                             jsonData = JSON.parse(data);
                         }
                         catch (e) {
-                            console.warn(`Failed to parse annotation data for ${key}:`, e);
+                            this._log('warning', `Failed to parse annotation data for ${key}: ${e}`);
                             return;
                         }
                     }
@@ -682,6 +578,9 @@ export class MainView extends React.Component {
         this._handleWindowResize = () => {
             // TODO SOMETHING
         };
+        this._handleSegmentTransitionChange = (payload) => {
+            this.setState({ segmentTransition: payload });
+        };
         this._handleSpectaTouchStart = (e) => {
             if (e.touches.length > 0) {
                 this._spectaTouchStartX = e.touches[0].clientX;
@@ -708,6 +607,148 @@ export class MainView extends React.Component {
                 this._model.setCurrentSegmentIndex(current + 1);
             }
         };
+        this._handleDrawGeometryTypeChange = (
+        /* handle with the change of geometry and instantiate new draw interaction and other ones accordingly*/
+        event) => {
+            const drawGeometryLabel = event.target.value;
+            this._currentDrawGeometry = drawGeometryLabel;
+            this._updateInteractions();
+            this._updateDrawSource();
+            this.setState(old => (Object.assign(Object.assign({}, old), { drawGeometryLabel })));
+        };
+        this._getVectorSourceFromLayerID = (layerID) => {
+            /* get the OpenLayers VectorSource corresponding to the JGIS currentDrawLayerID */
+            const layers = this._Map.getLayers();
+            const layerArray = layers.getArray();
+            const matchingLayer = layerArray.find(layer => layer.get('id') === layerID);
+            const source = matchingLayer === null || matchingLayer === void 0 ? void 0 : matchingLayer.get('source');
+            this._currentVectorSource = source;
+            return this._currentVectorSource;
+        };
+        this._getDrawSourceFromSelectedLayer = () => {
+            var _a, _b, _c, _d;
+            const selectedLayers = (_c = (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState()) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
+            if (!selectedLayers) {
+                return;
+            }
+            const selectedLayerID = Object.keys(selectedLayers)[0];
+            this._currentDrawLayerID = selectedLayerID;
+            const JGISLayer = this._model.getLayer(selectedLayerID);
+            this._currentDrawSourceID = (_d = JGISLayer === null || JGISLayer === void 0 ? void 0 : JGISLayer.parameters) === null || _d === void 0 ? void 0 : _d.source;
+            if (this._currentDrawSourceID) {
+                this._currentDrawSource = this._model.getSource(this._currentDrawSourceID);
+            }
+        };
+        this._onVectorSourceChange = () => {
+            if (!this._currentVectorSource ||
+                !this._currentDrawSource ||
+                !this._currentDrawSourceID) {
+                return;
+            }
+            const geojsonWriter = new GeoJSON({
+                featureProjection: this._Map.getView().getProjection(),
+            });
+            const features = this._currentVectorSource
+                .getFeatures()
+                .map(feature => geojsonWriter.writeFeatureObject(feature));
+            const updatedData = {
+                type: 'FeatureCollection',
+                features: features,
+            };
+            const updatedJGISLayerSource = {
+                name: this._currentDrawSource.name,
+                type: this._currentDrawSource.type,
+                parameters: {
+                    data: updatedData,
+                },
+            };
+            this._currentDrawSource = updatedJGISLayerSource;
+            this._model.sharedModel.updateSource(this._currentDrawSourceID, updatedJGISLayerSource);
+        };
+        this._updateDrawSource = () => {
+            if (this._currentVectorSource) {
+                this._currentVectorSource.on('change', this._onVectorSourceChange);
+            }
+        };
+        this._updateInteractions = () => {
+            if (this._draw) {
+                this._removeDrawInteraction();
+            }
+            if (this._select) {
+                this._removeSelectInteraction();
+            }
+            if (this._modify) {
+                this._removeModifyInteraction();
+            }
+            if (this._snap) {
+                this._removeSnapInteraction();
+            }
+            this._draw = new Draw({
+                style: drawInteractionStyle,
+                type: this._currentDrawGeometry,
+                source: this._currentVectorSource,
+            });
+            this._draw.on('drawend', this._handleDrawEnd);
+            this._select = new Select();
+            this._modify = new Modify({
+                features: this._select.getFeatures(),
+            });
+            this._snap = new Snap({
+                source: this._currentVectorSource,
+            });
+            this._Map.addInteraction(this._draw);
+            this._Map.addInteraction(this._select);
+            this._Map.addInteraction(this._modify);
+            this._Map.addInteraction(this._snap);
+            this._draw.setActive(true);
+            this._select.setActive(false);
+            this._modify.setActive(false);
+            this._snap.setActive(true);
+        };
+        this._handleDrawEnd = (event) => {
+            const feature = event.feature;
+            feature.set('_id', UUID.uuid4());
+            feature.set('_createdAt', new Date().toISOString());
+            feature.set('_creatorClientId', this._model.getClientId().toString());
+            feature.set('_fromDrawTool', true);
+            feature.set('Label', 'New Label');
+        };
+        this._editVectorLayer = () => {
+            this._getDrawSourceFromSelectedLayer();
+            if (!this._currentDrawLayerID) {
+                return;
+            }
+            this._currentVectorSource = this._getVectorSourceFromLayerID(this._currentDrawLayerID);
+            if (!this._currentVectorSource || !this._currentDrawGeometry) {
+                return;
+            }
+            this._updateInteractions(); /* remove previous interactions and instantiate new ones */
+            this._updateDrawSource(); /*add new features, update source and get changes reported to the JGIS Document in geoJSON format */
+        };
+        this._removeDrawInteraction = () => {
+            this._draw.setActive(false);
+            this._Map.removeInteraction(this._draw);
+        };
+        this._removeSelectInteraction = () => {
+            this._select.setActive(false);
+            this._Map.removeInteraction(this._select);
+        };
+        this._removeSnapInteraction = () => {
+            this._snap.setActive(false);
+            this._Map.removeInteraction(this._snap);
+        };
+        this._removeModifyInteraction = () => {
+            this._modify.setActive(false);
+            this._Map.removeInteraction(this._modify);
+        };
+        /**
+         * Shared source update wrapper for child components that need to mutate a
+         * source and refresh corresponding map layers.
+         */
+        this.persistAndRefreshSource = async (id, source) => {
+            this._model.sharedModel.updateSource(id, source);
+            await this.updateSource(id, source);
+        };
         this._isPositionInitialized = false;
         this.divRef = React.createRef(); // Reference of render div
         this.mainViewRef = React.createRef();
@@ -717,6 +758,9 @@ export class MainView extends React.Component {
         this._ready = false;
         this._sourceToLayerMap = new Map();
         this._originalFeatures = {};
+        this._highlightLayerRef = { current: null };
+        this._addLayerForPanels = (id, layer, index) => this.addLayer(id, layer, index);
+        this._removeLayerForPanels = (id) => this.removeLayer(id);
         this._featurePropertyCache = new Map();
         this._isSpectaPresentationInitialized = false;
         this._storyScrollHandler = null;
@@ -725,6 +769,7 @@ export class MainView extends React.Component {
         this._state = props.state;
         this._formSchemaRegistry = props.formSchemaRegistry;
         this._annotationModel = props.annotationModel;
+        this._loggerRegistry = props.loggerRegistry;
         // Enforce the map to take the full available width in the case of Jupyter Notebook viewer
         const el = document.getElementById('main-panel');
         if (el) {
@@ -747,31 +792,39 @@ export class MainView extends React.Component {
         this._mainViewModel = this.props.viewModel;
         this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
         this._model = this._mainViewModel.jGISModel;
+        this._patchGeoJSONFeatureProperties = createGeoJSONFeaturePatcher({
+            model: this._model,
+            persistAndRefreshSource: this.persistAndRefreshSource,
+        });
         this._model.themeChanged.connect(this._handleThemeChange, this);
         this._model.sharedOptionsChanged.connect(this._onSharedOptionsChanged, this);
-        this._model.clientStateChanged.connect(this._onClientSharedStateChanged, this);
+        this._model.temporalControllerActiveChanged.connect(this._handleTemporalControllerActiveChanged, this);
+        const remoteUserSignals = [
+            this._model.remoteUserChanged,
+            this._model.viewportStateChanged,
+        ];
+        remoteUserSignals.forEach(signal => signal.connect(this._handleRemoteUserChanged, this));
+        this._model.pointerChanged.connect(this._handlePointerChanged, this);
+        this._model.selectedChanged.connect(this._handleTemporalControllerActiveChanged, this);
+        this._model.selectedChanged.connect(this._handleSelectedChanged, this);
         this._model.sharedLayersChanged.connect(this._onLayersChanged, this);
         this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
         this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
         this._model.sharedModel.changed.connect(this._onSharedModelStateChange);
         this._model.sharedMetadataChanged.connect(this._onSharedMetadataChanged, this);
+        this._model.identifiedFeaturesChanged.connect(this._handleIdentifiedFeaturesChanged, this);
         this._model.zoomToPositionSignal.connect(this._onZoomToPosition, this);
         this._model.settingsChanged.connect(this._onSettingsChanged, this);
         this._model.updateLayerSignal.connect(this._triggerLayerUpdate, this);
         this._model.addFeatureAsMsSignal.connect(this._convertFeatureToMs, this);
         this._model.geolocationChanged.connect(this._handleGeolocationChanged, this);
+        // Keep draw editing UI/interactions in sync with the shared editing mode.
+        this._model.editingVectorLayerChanged.connect(this._updateEditingVectorLayer, this);
         this._model.flyToGeometrySignal.connect(this.flyToGeometry, this);
         this._model.highlightFeatureSignal.connect(this.highlightFeatureOnMap, this);
         Promise.resolve().then(() => {
             this._syncSettingsFromRegistry();
         });
-        // Watch isIdentifying and clear the highlight when Identify Tool is turned off
-        this._model.sharedModel.awareness.on('change', () => {
-            var _a;
-            if (this._model.currentMode !== 'identifying' && this._highlightLayer) {
-                (_a = this._highlightLayer.getSource()) === null || _a === void 0 ? void 0 : _a.clear();
-            }
-        });
         this.state = {
             id: this._mainViewModel.id,
             lightTheme: isLightTheme(),
@@ -784,9 +837,13 @@ export class MainView extends React.Component {
             loadingErrors: [],
             displayTemporalController: false,
             filterStates: {},
+            editingVectorLayer: false,
+            drawGeometryLabel: '',
             jgisSettings: this._model.jgisSettings,
             isSpectaPresentation: this._model.isSpectaMode(),
             initialLayersReady: false,
+            identifyFeatureFloatersVersion: 0,
+            segmentTransition: null,
         };
         this._sources = [];
         this._loadingLayers = new Set();
@@ -798,6 +855,10 @@ export class MainView extends React.Component {
     }
     async componentDidMount() {
         var _a;
+        if (this._loggerRegistry) {
+            const logger = this._loggerRegistry.getLogger(this._model.filePath);
+            logger.level = 'debug';
+        }
         window.addEventListener('resize', this._handleWindowResize);
         const options = this._model.getOptions();
         const projection = (_a = options.projection) !== null && _a !== void 0 ? _a : DEFAULT_PROJECTION;
@@ -806,6 +867,10 @@ export class MainView extends React.Component {
             : [0, 0];
         const zoom = options.zoom !== undefined ? options.zoom : 1;
         await this.generateMap(center, zoom, projection);
+        this._handleRemoteUserChanged();
+        this._handlePointerChanged();
+        this._handleTemporalControllerActiveChanged();
+        this._handleSelectedChanged();
         this._mainViewModel.initSignal();
         if (window.jupytergisMaps !== undefined && this._documentPath) {
             window.jupytergisMaps[this._documentPath] = this._Map;
@@ -828,7 +893,16 @@ export class MainView extends React.Component {
         this._model.themeChanged.disconnect(this._handleThemeChange, this);
         this._model.settingsChanged.disconnect(this._onSettingsChanged, this);
         this._model.sharedOptionsChanged.disconnect(this._onSharedOptionsChanged, this);
-        this._model.clientStateChanged.disconnect(this._onClientSharedStateChanged, this);
+        this._model.temporalControllerActiveChanged.disconnect(this._handleTemporalControllerActiveChanged, this);
+        const remoteUserSignals = [
+            this._model.remoteUserChanged,
+            this._model.viewportStateChanged,
+        ];
+        remoteUserSignals.forEach(signal => signal.disconnect(this._handleRemoteUserChanged, this));
+        this._model.pointerChanged.disconnect(this._handlePointerChanged, this);
+        this._model.selectedChanged.disconnect(this._handleTemporalControllerActiveChanged, this);
+        this._model.selectedChanged.disconnect(this._handleSelectedChanged, this);
+        this._model.identifiedFeaturesChanged.disconnect(this._handleIdentifiedFeaturesChanged, this);
         // Clean up story scroll listener
         this._cleanupStoryScrollListener();
         this._mainViewModel.dispose();
@@ -836,17 +910,13 @@ export class MainView extends React.Component {
     async generateMap(center, zoom, projection = DEFAULT_PROJECTION) {
         const layers = this._model.getLayers();
         this._initialLayersCount = Object.values(layers).filter(layer => layer.type !== 'StorySegmentLayer').length;
-        const scaleLine = new ScaleLine({
-            target: this.controlsToolbarRef.current || undefined,
-        });
-        const fullScreen = new FullScreen({
-            target: this.controlsToolbarRef.current || undefined,
-        });
-        const controls = [scaleLine, fullScreen];
+        const controlsToolbar = this.controlsToolbarRef.current || undefined;
+        const controls = [new ScaleLine({ target: controlsToolbar })];
+        if (!this._model.isSpectaMode()) {
+            controls.push(new FullScreen({ target: controlsToolbar }));
+        }
         if (this._model.jgisSettings.zoomButtonsEnabled) {
-            this._zoomControl = new Zoom({
-                target: this.controlsToolbarRef.current || undefined,
-            });
+            this._zoomControl = new Zoom({ target: controlsToolbar });
             controls.push(this._zoomControl);
         }
         if (this.divRef.current) {
@@ -892,9 +962,7 @@ export class MainView extends React.Component {
             this._Map.addInteraction(dragAndDropInteraction);
             this.createSelectInteraction();
             const view = this._Map.getView();
-            view.on('change:center', () => this._updateCenter());
-            // TODO: Note for the future, will need to update listeners if view changes
-            view.on('change:center', throttle(() => {
+            const syncViewportThrottled = throttle(() => {
                 var _a;
                 // Not syncing center if following someone else
                 if ((_a = this._model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser) {
@@ -906,18 +974,30 @@ export class MainView extends React.Component {
                 if (!center || !zoom) {
                     return;
                 }
+                const currentExtent = view.calculateExtent(this._Map.getSize());
                 this._model.syncViewport({
                     coordinates: {
                         x: center[0],
                         y: center[1],
                     },
                     zoom,
+                    extent: [
+                        currentExtent[0],
+                        currentExtent[1],
+                        currentExtent[2],
+                        currentExtent[3],
+                    ],
                 }, this._mainViewModel.id);
-            }));
+            }, 200);
+            view.on('change:center', () => {
+                this._updateCenter();
+                syncViewportThrottled();
+            });
             this._Map.on('postrender', () => {
                 if (this.state.annotations) {
                     this._updateAnnotation();
                 }
+                this._updateFeatureFloaters();
             });
             this._Map.on('moveend', () => {
                 var _a;
@@ -981,241 +1061,359 @@ export class MainView extends React.Component {
      * @param source - the source object.
      */
     async addSource(id, source) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        this._log('info', `Loading source "${(_a = source.name) !== null && _a !== void 0 ? _a : id}" (${source.type})`);
         let newSource;
-        switch (source.type) {
-            case 'RasterSource': {
-                const sourceParameters = source.parameters;
-                const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
-                    sourceParameters.url.endsWith('pmtiles.gz');
-                const url = this.computeSourceUrl(source);
-                if (!pmTiles) {
-                    newSource = new XYZSource({
+        try {
+            switch (source.type) {
+                case 'RasterSource': {
+                    const sourceParameters = source.parameters;
+                    const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
+                        sourceParameters.url.endsWith('pmtiles.gz');
+                    const url = this.computeSourceUrl(source);
+                    if (!pmTiles) {
+                        newSource = new XYZSource({
+                            interpolate: sourceParameters.interpolate,
+                            attributions: sourceParameters.attribution,
+                            minZoom: sourceParameters.minZoom,
+                            maxZoom: sourceParameters.maxZoom,
+                            tileSize: 256,
+                            url: url,
+                        });
+                    }
+                    else {
+                        newSource = new PMTilesRasterSource({
+                            interpolate: sourceParameters.interpolate,
+                            attributions: sourceParameters.attribution,
+                            tileSize: 256,
+                            url: url,
+                        });
+                    }
+                    break;
+                }
+                case 'RasterDemSource': {
+                    const sourceParameters = source.parameters;
+                    newSource = new ImageTileSource({
                         interpolate: sourceParameters.interpolate,
+                        url: this.computeSourceUrl(source),
                         attributions: sourceParameters.attribution,
-                        minZoom: sourceParameters.minZoom,
-                        maxZoom: sourceParameters.maxZoom,
-                        tileSize: 256,
-                        url: url,
                     });
+                    break;
                 }
-                else {
-                    newSource = new PMTilesRasterSource({
-                        interpolate: sourceParameters.interpolate,
-                        attributions: sourceParameters.attribution,
-                        tileSize: 256,
-                        url: url,
+                case 'VectorTileSource': {
+                    const sourceParameters = source.parameters;
+                    const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
+                        sourceParameters.url.endsWith('pmtiles.gz');
+                    const url = this.computeSourceUrl(source);
+                    if (!pmTiles) {
+                        const vtSourceOptions = {
+                            attributions: sourceParameters.attribution,
+                            minZoom: sourceParameters.minZoom,
+                            maxZoom: sourceParameters.maxZoom,
+                            url: url,
+                            format: new MVT({
+                                featureClass: RenderFeature,
+                            }),
+                        };
+                        if (sourceParameters.useProxy) {
+                            const extraHeaders = (_b = sourceParameters.httpHeaders) !== null && _b !== void 0 ? _b : {};
+                            const headersParam = Object.keys(extraHeaders).length > 0
+                                ? `&headers=${encodeURIComponent(JSON.stringify(extraHeaders))}`
+                                : '';
+                            const proxyBase = isJupyterLite()
+                                ? `${this._model.jgisSettings.proxyUrl}/`
+                                : `${INTERNAL_PROXY_BASE}`;
+                            vtSourceOptions.tileLoadFunction = (tile, tileUrl) => {
+                                const vtTile = tile;
+                                const proxyUrl = `${proxyBase}?url=${encodeURIComponent(tileUrl)}${headersParam}`;
+                                vtTile.setLoader((extent, _resolution, projection) => {
+                                    return fetch(proxyUrl)
+                                        .then(response => {
+                                        if (!response.ok) {
+                                            throw new Error(`Tile proxy request failed: ${response.status} ${response.statusText}`);
+                                        }
+                                        return response.arrayBuffer();
+                                    })
+                                        .then(data => {
+                                        const features = vtTile.getFormat().readFeatures(data, {
+                                            extent,
+                                            featureProjection: projection,
+                                        });
+                                        vtTile.setFeatures(features);
+                                        this._log('debug', `Proxy tile loaded: ${tileUrl}`);
+                                        return features;
+                                    })
+                                        .catch((err) => {
+                                        this._log('error', `Proxy tile error for ${tileUrl}: ${err.message}`);
+                                        tile.setState(TileState.ERROR);
+                                        return [];
+                                    });
+                                });
+                            };
+                        }
+                        newSource = new VectorTileSource(vtSourceOptions);
+                    }
+                    else {
+                        newSource = new PMTilesVectorSource({
+                            attributions: sourceParameters.attribution,
+                            url: url,
+                        });
+                    }
+                    newSource.on('tileloadend', (event) => {
+                        const tile = event.tile;
+                        const features = tile.getFeatures();
+                        if (features && features.length > 0) {
+                            this._model.syncTileFeatures({
+                                sourceId: id,
+                                features,
+                            });
+                        }
                     });
+                    break;
                 }
-                break;
-            }
-            case 'RasterDemSource': {
-                const sourceParameters = source.parameters;
-                newSource = new ImageTileSource({
-                    interpolate: sourceParameters.interpolate,
-                    url: this.computeSourceUrl(source),
-                    attributions: sourceParameters.attribution,
-                });
-                break;
-            }
-            case 'VectorTileSource': {
-                const sourceParameters = source.parameters;
-                const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
-                    sourceParameters.url.endsWith('pmtiles.gz');
-                const url = this.computeSourceUrl(source);
-                if (!pmTiles) {
-                    newSource = new VectorTileSource({
-                        attributions: sourceParameters.attribution,
-                        minZoom: sourceParameters.minZoom,
-                        maxZoom: sourceParameters.maxZoom,
-                        url: url,
-                        format: new MVT({
-                            featureClass: RenderFeature,
-                        }),
+                case 'OpenEOTileSource': {
+                    const sourceParameters = source.parameters;
+                    newSource = new OpenEOTileSource({
+                        connectionInfo: {
+                            url: sourceParameters.serverUrl,
+                            authBearer: sourceParameters.authBearer,
+                        },
+                        processGraph: sourceParameters.processGraph,
                     });
+                    break;
                 }
-                else {
-                    newSource = new PMTilesVectorSource({
-                        attributions: sourceParameters.attribution,
-                        url: url,
+                case 'GeoJSONSource': {
+                    const data = ((_c = source.parameters) === null || _c === void 0 ? void 0 : _c.data) ||
+                        (await loadFile({
+                            filepath: (_d = source.parameters) === null || _d === void 0 ? void 0 : _d.path,
+                            type: 'GeoJSONSource',
+                            model: this._model,
+                        }));
+                    const format = new GeoJSON({
+                        featureProjection: this._Map.getView().getProjection(),
+                    });
+                    const featureArray = format.readFeatures(data, {
+                        featureProjection: this._Map.getView().getProjection(),
+                    });
+                    const featureCollection = new Collection(featureArray);
+                    featureCollection.forEach(feature => {
+                        feature.setId(getUid(feature));
                     });
+                    newSource = new VectorSource({
+                        features: featureCollection,
+                    });
+                    break;
                 }
-                newSource.on('tileloadend', (event) => {
-                    const tile = event.tile;
-                    const features = tile.getFeatures();
-                    if (features && features.length > 0) {
-                        this._model.syncTileFeatures({
-                            sourceId: id,
-                            features,
-                        });
-                    }
-                });
-                break;
-            }
-            case 'GeoJSONSource': {
-                const data = ((_a = source.parameters) === null || _a === void 0 ? void 0 : _a.data) ||
-                    (await loadFile({
-                        filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
-                        type: 'GeoJSONSource',
+                case 'ShapefileSource': {
+                    const parameters = source.parameters;
+                    const geojson = await loadFile({
+                        filepath: parameters.path,
+                        type: 'ShapefileSource',
                         model: this._model,
+                    });
+                    const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
+                    const format = new GeoJSON();
+                    newSource = new VectorSource({
+                        features: format.readFeatures(geojsonData, {
+                            dataProjection: 'EPSG:4326',
+                            featureProjection: this._Map.getView().getProjection(),
+                        }),
+                    });
+                    break;
+                }
+                case 'ImageSource': {
+                    const sourceParameters = source.parameters;
+                    // Convert lon/lat array to extent
+                    // Get lon/lat from source coordinates
+                    const leftSide = Math.min(...sourceParameters.coordinates.map(corner => corner[0]));
+                    const bottomSide = Math.min(...sourceParameters.coordinates.map(corner => corner[1]));
+                    const rightSide = Math.max(...sourceParameters.coordinates.map(corner => corner[0]));
+                    const topSide = Math.max(...sourceParameters.coordinates.map(corner => corner[1]));
+                    // Convert lon/lat to OpenLayer coordinates
+                    const topLeft = fromLonLat([leftSide, topSide]);
+                    const bottomRight = fromLonLat([rightSide, bottomSide]);
+                    // Get extent from coordinates
+                    const minX = topLeft[0];
+                    const maxY = topLeft[1];
+                    const maxX = bottomRight[0];
+                    const minY = bottomRight[1];
+                    const extent = [minX, minY, maxX, maxY];
+                    const imageUrl = await loadFile({
+                        filepath: sourceParameters.path,
+                        type: 'ImageSource',
+                        model: this._model,
+                    });
+                    newSource = new Static({
+                        interpolate: sourceParameters.interpolate,
+                        imageExtent: extent,
+                        url: imageUrl,
+                        crossOrigin: '',
+                    });
+                    break;
+                }
+                case 'VideoSource': {
+                    this._log('warning', 'Video Tiles not supported with Open Layers');
+                    break;
+                }
+                case 'GeoTiffSource': {
+                    const sourceParameters = source.parameters;
+                    const addNoData = (url) => {
+                        return Object.assign(Object.assign({}, url), { nodata: 0 });
+                    };
+                    const sources = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
+                        var _a, _b, _c, _d;
+                        const isRemote = ((_a = sourceInfo.url) === null || _a === void 0 ? void 0 : _a.startsWith('http://')) ||
+                            ((_b = sourceInfo.url) === null || _b === void 0 ? void 0 : _b.startsWith('https://'));
+                        const isDataUrl = (_c = sourceInfo.url) === null || _c === void 0 ? void 0 : _c.startsWith('data:');
+                        if (isRemote) {
+                            return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, url: sourceInfo.url });
+                        }
+                        else if (isDataUrl) {
+                            // Inline base64 GeoTIFF embedded in the .jGIS doc.
+                            const blob = await (await fetch(sourceInfo.url)).blob();
+                            return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, url: URL.createObjectURL(blob) });
+                        }
+                        else {
+                            const geotiff = await loadFile({
+                                filepath: (_d = sourceInfo.url) !== null && _d !== void 0 ? _d : '',
+                                type: 'GeoTiffSource',
+                                model: this._model,
+                            });
+                            return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, geotiff, url: URL.createObjectURL(geotiff.file) });
+                        }
                     }));
-                const format = new GeoJSON({
-                    featureProjection: this._Map.getView().getProjection(),
-                });
-                const featureArray = format.readFeatures(data, {
-                    featureProjection: this._Map.getView().getProjection(),
-                });
-                const featureCollection = new Collection(featureArray);
-                featureCollection.forEach(feature => {
-                    feature.setId(getUid(feature));
-                });
-                newSource = new VectorSource({
-                    features: featureCollection,
-                });
-                break;
-            }
-            case 'ShapefileSource': {
-                const parameters = source.parameters;
-                const geojson = await loadFile({
-                    filepath: parameters.path,
-                    type: 'ShapefileSource',
-                    model: this._model,
-                });
-                const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
-                const format = new GeoJSON();
-                newSource = new VectorSource({
-                    features: format.readFeatures(geojsonData, {
-                        dataProjection: 'EPSG:4326',
-                        featureProjection: this._Map.getView().getProjection(),
-                    }),
-                });
-                break;
-            }
-            case 'ImageSource': {
-                const sourceParameters = source.parameters;
-                // Convert lon/lat array to extent
-                // Get lon/lat from source coordinates
-                const leftSide = Math.min(...sourceParameters.coordinates.map(corner => corner[0]));
-                const bottomSide = Math.min(...sourceParameters.coordinates.map(corner => corner[1]));
-                const rightSide = Math.max(...sourceParameters.coordinates.map(corner => corner[0]));
-                const topSide = Math.max(...sourceParameters.coordinates.map(corner => corner[1]));
-                // Convert lon/lat to OpenLayer coordinates
-                const topLeft = fromLonLat([leftSide, topSide]);
-                const bottomRight = fromLonLat([rightSide, bottomSide]);
-                // Get extent from coordinates
-                const minX = topLeft[0];
-                const maxY = topLeft[1];
-                const maxX = bottomRight[0];
-                const minY = bottomRight[1];
-                const extent = [minX, minY, maxX, maxY];
-                const imageUrl = await loadFile({
-                    filepath: sourceParameters.path,
-                    type: 'ImageSource',
-                    model: this._model,
-                });
-                newSource = new Static({
-                    interpolate: sourceParameters.interpolate,
-                    imageExtent: extent,
-                    url: imageUrl,
-                    crossOrigin: '',
-                });
-                break;
-            }
-            case 'VideoSource': {
-                console.warn('Video Tiles not supported with Open Layers');
-                break;
-            }
-            case 'GeoTiffSource': {
-                const sourceParameters = source.parameters;
-                const addNoData = (url) => {
-                    return Object.assign(Object.assign({}, url), { nodata: 0 });
-                };
-                const sources = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
-                    var _a, _b, _c;
-                    const isRemote = ((_a = sourceInfo.url) === null || _a === void 0 ? void 0 : _a.startsWith('http://')) ||
-                        ((_b = sourceInfo.url) === null || _b === void 0 ? void 0 : _b.startsWith('https://'));
-                    if (isRemote) {
-                        return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, url: sourceInfo.url });
+                    newSource = new GeoTIFFSource({
+                        interpolate: sourceParameters.interpolate,
+                        sources,
+                        normalize: sourceParameters.normalize,
+                        wrapX: sourceParameters.wrapX,
+                    });
+                    break;
+                }
+                case 'GeoPackageVectorSource': {
+                    const sourceParameters = source.parameters;
+                    if (!sourceParameters) {
+                        throw new Error('GeoPackageSource has no parameters');
                     }
-                    else {
-                        const geotiff = await loadFile({
-                            filepath: (_c = sourceInfo.url) !== null && _c !== void 0 ? _c : '',
-                            type: 'GeoTiffSource',
-                            model: this._model,
-                        });
-                        return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, geotiff, url: URL.createObjectURL(geotiff.file) });
+                    const tableMap = await loadFile({
+                        filepath: sourceParameters.path,
+                        type: 'GeoPackageVectorSource',
+                        model: this._model,
+                    });
+                    const table = tableMap[sourceParameters.tables];
+                    const vectorSource = table.source;
+                    vectorSource['projection'] = getProjection(sourceParameters.projection);
+                    newSource = vectorSource;
+                    break;
+                }
+                case 'GeoPackageRasterSource': {
+                    const sourceParameters = source.parameters;
+                    if (!sourceParameters) {
+                        throw new Error('GeoPackageSource has no parameters');
                     }
-                }));
-                newSource = new GeoTIFFSource({
-                    interpolate: sourceParameters.interpolate,
-                    sources,
-                    normalize: sourceParameters.normalize,
-                    wrapX: sourceParameters.wrapX,
-                });
-                break;
-            }
-            case 'GeoParquetSource': {
-                const parameters = source.parameters;
-                const geojson = await loadFile({
-                    filepath: parameters.path,
-                    type: 'GeoParquetSource',
-                    model: this._model,
-                });
-                const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
-                const format = new GeoJSON();
-                newSource = new VectorSource({
-                    features: format.readFeatures(geojsonData, {
-                        dataProjection: parameters.projection,
-                        featureProjection: this._Map.getView().getProjection(),
-                    }),
-                });
-                break;
-            }
-            case 'MarkerSource': {
-                const parameters = source.parameters;
-                const point = new Point(parameters.feature.coords);
-                const marker = new Feature({
-                    type: 'icon',
-                    geometry: point,
-                });
-                // Replace color placeholder in SVG with the parameter color
-                const markerColor = parameters.color || '#3463a0';
-                const svgString = markerIcon.svgstr
-                    .replace('{{COLOR}}', markerColor)
-                    .replace('<svg', '<svg width="128" height="128"');
-                const iconStyle = new Style({
-                    image: new Icon({
-                        src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`,
-                        scale: 0.25,
-                        anchor: [0.5, 1],
-                        anchorXUnits: 'fraction',
-                        anchorYUnits: 'fraction',
-                    }),
-                });
-                marker.setStyle(iconStyle);
-                newSource = new VectorSource({
-                    features: [marker],
-                });
-                break;
-            }
-            case 'WmsTileSource': {
-                const sourceParameters = source.parameters;
-                const url = sourceParameters.url;
-                const selectedLayer = (_c = sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.params) === null || _c === void 0 ? void 0 : _c.layers;
-                newSource = new TileWMSSource({
-                    attributions: sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.attribution,
-                    url,
-                    params: {
-                        LAYERS: selectedLayer,
-                        TILED: true,
-                    },
-                });
-                break;
+                    const tableMap = await loadFile({
+                        filepath: sourceParameters.path,
+                        type: 'GeoPackageRasterSource',
+                        model: this._model,
+                    });
+                    const { gpr, tileDao } = tableMap[sourceParameters.tables];
+                    const rasterSource = new XYZSource({
+                        minZoom: (_e = sourceParameters.minZoom) !== null && _e !== void 0 ? _e : tileDao.minWebMapZoom,
+                        maxZoom: (_f = sourceParameters.maxZoom) !== null && _f !== void 0 ? _f : tileDao.maxWebMapZoom,
+                        interpolate: sourceParameters.interpolate,
+                        url: '{z},{x},{y}',
+                        tileLoadFunction(tile, src) {
+                            const [z, x, y] = src.split(',').map(Number);
+                            gpr
+                                .getTile(x, y, z)
+                                .then((dataUri) => (tile.getImage().src = dataUri));
+                        },
+                        attributions: sourceParameters.attribution,
+                    });
+                    newSource = rasterSource;
+                    break;
+                }
+                case 'GeoParquetSource': {
+                    const parameters = source.parameters;
+                    const geojson = await loadFile({
+                        filepath: parameters.path,
+                        type: 'GeoParquetSource',
+                        model: this._model,
+                    });
+                    const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
+                    const format = new GeoJSON();
+                    newSource = new VectorSource({
+                        features: format.readFeatures(geojsonData, {
+                            dataProjection: parameters.projection,
+                            featureProjection: this._Map.getView().getProjection(),
+                        }),
+                    });
+                    break;
+                }
+                case 'MarkerSource': {
+                    const parameters = source.parameters;
+                    const point = new Point(parameters.feature.coords);
+                    const marker = new Feature({
+                        type: 'icon',
+                        geometry: point,
+                    });
+                    // Replace color placeholder in SVG with the parameter color
+                    const markerColor = parameters.color || '#3463a0';
+                    const svgString = markerIcon.svgstr
+                        .replace('{{COLOR}}', markerColor)
+                        .replace('<svg', '<svg width="128" height="128"');
+                    const iconStyle = new Style({
+                        image: new Icon({
+                            src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`,
+                            scale: 0.25,
+                            anchor: [0.5, 1],
+                            anchorXUnits: 'fraction',
+                            anchorYUnits: 'fraction',
+                        }),
+                    });
+                    marker.setStyle(iconStyle);
+                    newSource = new VectorSource({
+                        features: [marker],
+                    });
+                    break;
+                }
+                case 'WmsTileSource': {
+                    const sourceParameters = source.parameters;
+                    const url = sourceParameters.url;
+                    const selectedLayer = (_g = sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.params) === null || _g === void 0 ? void 0 : _g.layers;
+                    newSource = new TileWMSSource({
+                        attributions: sourceParameters === null || sourceParameters === void 0 ? void 0 : sourceParameters.attribution,
+                        url,
+                        params: {
+                            LAYERS: selectedLayer,
+                            TILED: true,
+                        },
+                    });
+                    break;
+                }
             }
         }
+        catch (err) {
+            this._log('error', `Failed to load source "${(_h = source.name) !== null && _h !== void 0 ? _h : id}" (${source.type}): ${err.message}`);
+            return;
+        }
+        this._log('info', `Source "${(_j = source.name) !== null && _j !== void 0 ? _j : id}" (${source.type}) loaded successfully`);
         newSource.set('id', id);
+        // Forward OL tile/feature load errors to the JupyterLab log console.
+        // These errors (CORS failures, network errors, etc.) are written directly
+        // by the browser to DevTools and cannot be captured by console patching —
+        // OL's own events are the only reliable interception point.
+        newSource.on('tileloaderror', (evt) => {
+            var _a, _b, _c;
+            const url = (_c = (_b = (_a = evt === null || evt === void 0 ? void 0 : evt.tile) === null || _a === void 0 ? void 0 : _a.getKey) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : '';
+            this._log('error', `Tile load error for source "${id}"${url ? ': ' + url : ''}`);
+        });
+        newSource.on('featuresloaderror', () => {
+            this._log('error', `Features load error for source "${id}"`);
+        });
         // _sources is a list of OpenLayers sources
         this._sources[id] = newSource;
+        this._trackSourceExtZoom(id, newSource);
     }
     computeSourceUrl(source) {
         const parameters = source.parameters;
@@ -1286,8 +1484,11 @@ export class MainView extends React.Component {
         for (let targetLayerPosition = 0; targetLayerPosition < layerIds.length; targetLayerPosition++) {
             const layerId = layerIds[targetLayerPosition];
             const layer = this._model.sharedModel.getLayer(layerId);
+            if (this._loadingLayers.has(layerId)) {
+                continue;
+            }
             if (!layer) {
-                console.warn(`Layer with ID ${layerId} does not exist in the shared model.`);
+                this._log('warning', `Layer with ID ${layerId} does not exist in the shared model.`);
                 continue;
             }
             const mapLayer = this.getLayer(layerId);
@@ -1319,7 +1520,7 @@ export class MainView extends React.Component {
      * @returns - the map layer.
      */
     async _buildMapLayer(id, layer) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: true })));
         this._loadingLayers.add(id);
         let newMapLayer;
@@ -1354,12 +1555,23 @@ export class MainView extends React.Component {
             }
             case 'VectorLayer': {
                 layerParameters = layer.parameters;
-                newMapLayer = new VectorLayer({
-                    opacity: layerParameters.opacity,
-                    visible: layer.visible,
-                    source: this._sources[layerParameters.source],
-                    style: this.vectorLayerStyleRuleBuilder(layer),
-                });
+                if (Array.isArray((_b = layerParameters.symbologyState) === null || _b === void 0 ? void 0 : _b.layers)) {
+                    const olSource = this._sources[layerParameters.source];
+                    const grammarState = layerParameters.symbologyState;
+                    const rows = olSource instanceof VectorSource
+                        ? olSource.getFeatures().map(f => f.getProperties())
+                        : [];
+                    const featureValues = extractEncodingFieldValues(grammarState, rows);
+                    newMapLayer = grammarToOLLayer(layerParameters.symbologyState, olSource, layerParameters.opacity, layer.visible, featureValues);
+                }
+                else {
+                    newMapLayer = new VectorImageLayer({
+                        opacity: layerParameters.opacity,
+                        visible: layer.visible,
+                        source: this._sources[layerParameters.source],
+                        style: this.vectorLayerStyleRuleBuilder(layer),
+                    });
+                }
                 break;
             }
             case 'VectorTileLayer': {
@@ -1374,7 +1586,7 @@ export class MainView extends React.Component {
             }
             case 'HillshadeLayer': {
                 layerParameters = layer.parameters;
-                newMapLayer = new WebGlTileLayer({
+                newMapLayer = new GeoTiffLayer({
                     opacity: 0.3,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source],
@@ -1393,32 +1605,35 @@ export class MainView extends React.Component {
                 });
                 break;
             }
-            case 'WebGlLayer': {
+            case 'OpenEOTileLayer': {
                 layerParameters = layer.parameters;
-                // This is to handle python sending a None for the color
-                const layerOptions = {
+                newMapLayer = new OpenEOTileLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source],
-                };
-                if (layerParameters.color) {
-                    layerOptions['style'] = {
-                        color: layerParameters.color,
-                    };
-                }
-                newMapLayer = new WebGlTileLayer(layerOptions);
+                });
                 break;
             }
-            case 'HeatmapLayer': {
+            case 'GeoTiffLayer': {
                 layerParameters = layer.parameters;
-                newMapLayer = new HeatmapLayer({
-                    opacity: layerParameters.opacity,
-                    visible: layer.visible,
-                    source: this._sources[layerParameters.source],
-                    blur: (_b = layerParameters.blur) !== null && _b !== void 0 ? _b : 15,
-                    radius: (_c = layerParameters.radius) !== null && _c !== void 0 ? _c : 8,
-                    gradient: layerParameters.color,
-                });
+                const geoTiffSource = this._sources[layerParameters.source];
+                if (Array.isArray((_c = layerParameters.symbologyState) === null || _c === void 0 ? void 0 : _c.layers)) {
+                    newMapLayer = grammarToOLLayer(layerParameters.symbologyState, geoTiffSource, (_d = layerParameters.opacity) !== null && _d !== void 0 ? _d : 1, (_e = layer.visible) !== null && _e !== void 0 ? _e : true, [], true);
+                }
+                else {
+                    // This is to handle python sending a None for the color
+                    const layerOptions = {
+                        opacity: layerParameters.opacity,
+                        visible: layer.visible,
+                        source: geoTiffSource,
+                    };
+                    if (layerParameters.color) {
+                        layerOptions['style'] = {
+                            color: layerParameters.color,
+                        };
+                    }
+                    newMapLayer = new GeoTiffLayer(layerOptions);
+                }
                 break;
             }
             case 'StacLayer': {
@@ -1458,7 +1673,7 @@ export class MainView extends React.Component {
         var _a;
         const sourceProjection = (_a = newMapLayer.getSource()) === null || _a === void 0 ? void 0 : _a.getProjection();
         if (!sourceProjection) {
-            console.warn('Layer source projection is undefined or invalid');
+            this._log('warning', 'Layer source projection is undefined or invalid');
             return;
         }
         const projectionCode = sourceProjection.getCode();
@@ -1466,7 +1681,7 @@ export class MainView extends React.Component {
         if (!isProjectionRegistered) {
             // Check if the projection exists in proj4list
             if (!proj4list[projectionCode]) {
-                console.warn(`Projection code '${projectionCode}' not found in proj4list`);
+                this._log('warning', `Projection code '${projectionCode}' not found in proj4list`);
                 return;
             }
             try {
@@ -1474,7 +1689,7 @@ export class MainView extends React.Component {
                 register(proj4);
             }
             catch (error) {
-                console.warn(`Failed to register projection '${projectionCode}'. Error: ${error.message}`);
+                this._log('warning', `Failed to register projection '${projectionCode}'. Error: ${error.message}`);
                 return;
             }
         }
@@ -1499,12 +1714,14 @@ export class MainView extends React.Component {
                 const numLayers = this._Map.getLayers().getLength();
                 const safeIndex = Math.min(index, numLayers);
                 this._Map.getLayers().insertAt(safeIndex, newMapLayer);
+                this._trackLayerViewState(id, newMapLayer);
                 // doing +1 instead of calling method again
                 if (!this.state.initialLayersReady &&
                     numLayers + 1 === this._initialLayersCount) {
                     this.setState(old => (Object.assign(Object.assign({}, old), { initialLayersReady: true })));
                 }
             }
+            this._model.syncSelected({ [id]: { type: 'layer' } }, this._model.getClientId().toString());
         }
         catch (error) {
             if (this.state.loadingErrors.find(item => item.id === id && item.error === error.message)) {
@@ -1539,6 +1756,11 @@ export class MainView extends React.Component {
             }
             case 'VectorLayer': {
                 const layerParams = layer.parameters;
+                if (Array.isArray((_b = layerParams.symbologyState) === null || _b === void 0 ? void 0 : _b.layers)) {
+                    // Grammar layers may change structure (e.g. KDE added/removed) — rebuild.
+                    this.replaceLayer(id, layer);
+                    break;
+                }
                 mapLayer.setOpacity(layerParams.opacity || 1);
                 mapLayer.setStyle(this.vectorLayerStyleRuleBuilder(layer));
                 break;
@@ -1556,23 +1778,24 @@ export class MainView extends React.Component {
             case 'ImageLayer': {
                 break;
             }
-            case 'WebGlLayer': {
-                mapLayer.setOpacity((_b = layer.parameters) === null || _b === void 0 ? void 0 : _b.opacity);
-                if ((_c = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _c === void 0 ? void 0 : _c.color) {
-                    mapLayer.setStyle({
-                        color: layer.parameters.color,
-                    });
+            case 'GeoTiffLayer': {
+                if (Array.isArray((_d = (_c = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _c === void 0 ? void 0 : _c.symbologyState) === null || _d === void 0 ? void 0 : _d.layers)) {
+                    this.replaceLayer(id, layer);
+                }
+                else {
+                    mapLayer.setOpacity((_e = layer.parameters) === null || _e === void 0 ? void 0 : _e.opacity);
+                    if ((_f = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _f === void 0 ? void 0 : _f.color) {
+                        mapLayer.setStyle({
+                            color: layer.parameters.color,
+                        });
+                    }
                 }
                 break;
             }
-            case 'HeatmapLayer': {
+            case 'OpenEOTileLayer': {
                 const layerParams = layer.parameters;
-                const heatmap = mapLayer;
-                heatmap.setOpacity((_d = layerParams.opacity) !== null && _d !== void 0 ? _d : 1);
-                heatmap.setBlur((_e = layerParams.blur) !== null && _e !== void 0 ? _e : 15);
-                heatmap.setRadius((_f = layerParams.radius) !== null && _f !== void 0 ? _f : 8);
-                heatmap.setGradient((_g = layerParams.color) !== null && _g !== void 0 ? _g : ['#00f', '#0ff', '#0f0', '#ff0', '#f00']);
-                this.handleTemporalController(id, layer);
+                const openeoLayer = mapLayer;
+                openeoLayer.setOpacity((_g = layerParams.opacity) !== null && _g !== void 0 ? _g : 1);
                 break;
             }
             case 'StacLayer':
@@ -1582,7 +1805,7 @@ export class MainView extends React.Component {
     }
     flyToGeometry(sender, geometry) {
         if (!geometry || typeof geometry.getExtent !== 'function') {
-            console.warn('Invalid geometry for flyToGeometry:', geometry);
+            this._log('warning', `Invalid geometry for flyToGeometry: ${geometry}`);
             return;
         }
         const view = this._Map.getView();
@@ -1594,11 +1817,12 @@ export class MainView extends React.Component {
         });
     }
     highlightFeatureOnMap(sender, featureOrGeometry) {
+        var _a;
         const geometry = (featureOrGeometry === null || featureOrGeometry === void 0 ? void 0 : featureOrGeometry.geometry) ||
             (featureOrGeometry === null || featureOrGeometry === void 0 ? void 0 : featureOrGeometry._geometry) ||
             featureOrGeometry;
         if (!geometry) {
-            console.warn('No geometry found in feature:', featureOrGeometry);
+            this._log('warning', `No geometry found in feature: ${featureOrGeometry}`);
             return;
         }
         const isOlGeometry = typeof geometry.getCoordinates === 'function';
@@ -1608,63 +1832,128 @@ export class MainView extends React.Component {
                 featureProjection: this._Map.getView().getProjection(),
             });
         const olFeature = new Feature(Object.assign({ geometry: parsedGeometry }, (geometry !== featureOrGeometry ? featureOrGeometry : {})));
-        if (!this._highlightLayer) {
-            this._highlightLayer = new VectorLayer({
-                source: new VectorSource(),
-                style: feature => {
-                    var _a;
-                    const geomType = (_a = feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType();
-                    switch (geomType) {
-                        case 'Point':
-                        case 'MultiPoint':
-                            return new Style({
-                                image: new Circle({
-                                    radius: 6,
-                                    fill: new Fill({
-                                        color: 'rgba(255, 255, 0, 0.8)',
-                                    }),
-                                    stroke: new Stroke({
-                                        color: '#ff0',
-                                        width: 2,
-                                    }),
-                                }),
-                            });
-                        case 'LineString':
-                        case 'MultiLineString':
-                            return new Style({
-                                stroke: new Stroke({
-                                    color: 'rgba(255, 255, 0, 0.8)',
-                                    width: 3,
-                                }),
-                            });
-                        case 'Polygon':
-                        case 'MultiPolygon':
-                            return new Style({
-                                stroke: new Stroke({
-                                    color: '#f00',
-                                    width: 2,
-                                }),
-                                fill: new Fill({
-                                    color: 'rgba(255, 255, 0, 0.8)',
-                                }),
-                            });
-                        default:
-                            return new Style({
-                                stroke: new Stroke({
-                                    color: '#000',
-                                    width: 2,
-                                }),
-                            });
-                    }
-                },
-                zIndex: 999,
-            });
-            this._Map.addLayer(this._highlightLayer);
-        }
-        const source = this._highlightLayer.getSource();
+        this._ensureHighlightLayer();
+        const source = (_a = this._highlightLayerRef.current) === null || _a === void 0 ? void 0 : _a.getSource();
         source === null || source === void 0 ? void 0 : source.clear();
         source === null || source === void 0 ? void 0 : source.addFeature(olFeature);
     }
+    _ensureHighlightLayer() {
+        ensureHighlightLayer(this._Map, this._highlightLayerRef);
+    }
+    /**
+     * Replace the highlight layer contents with the given geometries.
+     * Clears the source first so that stale highlights are always removed,
+     * including when the selection becomes empty (geometries = []).
+     */
+    _setHighlightGeometries(geometries) {
+        var _a;
+        this._ensureHighlightLayer();
+        const source = (_a = this._highlightLayerRef.current) === null || _a === void 0 ? void 0 : _a.getSource();
+        source === null || source === void 0 ? void 0 : source.clear();
+        for (const geom of geometries) {
+            source === null || source === void 0 ? void 0 : source.addFeature(new Feature({ geometry: geom }));
+        }
+    }
+    /**
+     * Replace the highlight layer contents with pre-styled features.
+     * Each feature carries its own highlight style via feature.setStyle().
+     */
+    _setHighlightFeatures(features) {
+        var _a;
+        this._ensureHighlightLayer();
+        const source = (_a = this._highlightLayerRef.current) === null || _a === void 0 ? void 0 : _a.getSource();
+        source === null || source === void 0 ? void 0 : source.clear();
+        for (const f of features) {
+            source === null || source === void 0 ? void 0 : source.addFeature(f);
+        }
+    }
+    _buildHighlightStyle(original, geomType) {
+        return buildHighlightStyle(original, geomType);
+    }
+    /**
+     * Compute extent for layer or source
+     */
+    _computeExtent(layer, source) {
+        try {
+            if (source instanceof VectorSource) {
+                const extent = source.getExtent();
+                if (extent) {
+                    return extent;
+                }
+            }
+            if (source instanceof TileSource || source instanceof VectorTileSource) {
+                const tileGrid = source.getTileGrid();
+                const extent = tileGrid === null || tileGrid === void 0 ? void 0 : tileGrid.getExtent();
+                if (extent) {
+                    return extent;
+                }
+            }
+            if (layer instanceof StacLayer) {
+                const extent = layer.getExtent();
+                if (extent) {
+                    return extent;
+                }
+            }
+        }
+        catch (error) {
+            this._log('warning', `Failed to compute extent: ${error}`);
+        }
+        return undefined;
+    }
+    _computeZoomFromExtent(extent) {
+        var _a, _b;
+        if (!this._Map) {
+            return null;
+        }
+        const view = this._Map.getView();
+        const size = (_a = this._Map.getSize()) !== null && _a !== void 0 ? _a : getSize(extent);
+        const resolution = view.getResolutionForExtent(extent, size);
+        const zoom = view.getZoomForResolution(resolution);
+        return (_b = zoom !== null && zoom !== void 0 ? zoom : view.getZoom()) !== null && _b !== void 0 ? _b : 0;
+    }
+    /**
+     * Track layer's extent and zoom in model's view state
+     */
+    _trackLayerViewState(layerId, olLayer) {
+        var _a;
+        const effectiveLayer = olLayer instanceof LayerGroup
+            ? olLayer.getLayers().getArray()[0]
+            : olLayer;
+        if (!effectiveLayer) {
+            return;
+        }
+        const source = effectiveLayer.getSource();
+        const sourceId = (_a = source === null || source === void 0 ? void 0 : source.get) === null || _a === void 0 ? void 0 : _a.call(source, 'id');
+        let extent = sourceId ? this._model.getExtent(sourceId) : undefined;
+        if (!extent) {
+            extent = this._computeExtent(effectiveLayer, source);
+        }
+        if (extent) {
+            const zoom = this._computeZoomFromExtent(extent);
+            if (zoom === null) {
+                return;
+            }
+            const view = { extent, zoom };
+            this._model.updateLayerViewState(layerId, view);
+        }
+    }
+    /**
+     * Track source's extent and zoom in model's view state
+     */
+    _trackSourceExtZoom(sourceId, olSource) {
+        var _a, _b, _c;
+        const extent = this._computeExtent(undefined, olSource);
+        if (extent) {
+            const projection = (_c = (_b = (_a = olSource === null || olSource === void 0 ? void 0 : olSource.getProjection) === null || _a === void 0 ? void 0 : _a.call(olSource)) === null || _b === void 0 ? void 0 : _b.getCode) === null || _c === void 0 ? void 0 : _c.call(_b);
+            const zoom = this._computeZoomFromExtent(extent);
+            if (zoom === null) {
+                return;
+            }
+            const view = Object.assign({ extent,
+                zoom }, (projection && { projection }));
+            this._model.updateLayerViewState(sourceId, view);
+        }
+    }
     /**
      * Wait for all layers to be loaded.
      */
@@ -1716,6 +2005,133 @@ export class MainView extends React.Component {
             this._Map.removeLayer(mapLayer);
         }
     }
+    /**
+     * Decide how selection changes should affect vector drawing state.
+     *
+     * This helper only computes whether
+     * draw mode must be disabled (non-draw layer selected) and whether draw
+     * interactions should be rebound (draw mode enabled and selected draw layer
+     * changed).
+     */
+    _getVectorDrawingSelectionDecision(layer, selectedLayerId) {
+        const isDrawVectorLayer = this._model.checkIfIsADrawVectorLayer(layer);
+        if (!isDrawVectorLayer) {
+            return { disableEditing: true, shouldRebind: false };
+        }
+        if (!this._model.editingVectorLayer) {
+            return { disableEditing: false, shouldRebind: false };
+        }
+        if (selectedLayerId === this._previousDrawLayerID) {
+            return { disableEditing: false, shouldRebind: false };
+        }
+        return { disableEditing: false, shouldRebind: true };
+    }
+    _handleTemporalControllerActiveChanged() {
+        var _a, _b, _c;
+        const localState = this._model.localState;
+        if (!localState) {
+            return;
+        }
+        const isTemporalControllerActive = localState.isTemporalControllerActive === true;
+        const selectedLayers = (_a = localState.selected) === null || _a === void 0 ? void 0 : _a.value;
+        const selectedLayerId = selectedLayers
+            ? ((_b = Object.keys(selectedLayers)[0]) !== null && _b !== void 0 ? _b : null)
+            : null;
+        const layerType = selectedLayerId
+            ? (_c = this._model.getLayer(selectedLayerId)) === null || _c === void 0 ? void 0 : _c.type
+            : null;
+        const isSelectionValid = !!selectedLayers &&
+            Object.keys(selectedLayers).length === 1 &&
+            !this._model.getSource(selectedLayerId) &&
+            layerType === 'VectorLayer';
+        const displayTemporalController = isTemporalControllerActive && isSelectionValid;
+        if (displayTemporalController !== this.state.displayTemporalController) {
+            this.setState(old => (Object.assign(Object.assign({}, old), { displayTemporalController })));
+            this._mainViewModel.commands.notifyCommandChanged(CommandIDs.temporalController);
+        }
+    }
+    _handleRemoteUserChanged() {
+        var _a, _b, _c;
+        const localState = this._model.localState;
+        if (!localState) {
+            return;
+        }
+        const remoteUser = localState.remoteUser;
+        const clients = this._model.sharedModel.awareness.getStates();
+        // If we are in following mode, update UI and viewport from the remote user.
+        if (remoteUser) {
+            const remoteState = clients.get(remoteUser);
+            if (!remoteState) {
+                return;
+            }
+            if (((_a = remoteState.user) === null || _a === void 0 ? void 0 : _a.username) !== ((_b = this.state.remoteUser) === null || _b === void 0 ? void 0 : _b.username)) {
+                this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: remoteState.user })));
+            }
+            const remoteViewport = remoteState.viewportState;
+            if (remoteViewport.value) {
+                const { x, y } = remoteViewport.value.coordinates;
+                const zoom = remoteViewport.value.zoom;
+                this._moveToPosition({ x, y }, zoom, 0);
+            }
+            return;
+        }
+        // If we are unfollowing, reset to local viewport and clear follow UI.
+        if (this.state.remoteUser !== null) {
+            this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: null })));
+            const viewportState = (_c = localState.viewportState) === null || _c === void 0 ? void 0 : _c.value;
+            if (viewportState) {
+                this._moveToPosition(viewportState.coordinates, viewportState.zoom);
+            }
+        }
+    }
+    _handlePointerChanged() {
+        const clients = this._model.sharedModel.awareness.getStates();
+        const clientPointers = Object.assign({}, this.state.clientPointers);
+        clients.forEach((client, clientId) => {
+            var _a;
+            if (!(client === null || client === void 0 ? void 0 : client.user) || this._model.getClientId() === clientId) {
+                return;
+            }
+            const pointer = (_a = client.pointer) === null || _a === void 0 ? void 0 : _a.value;
+            let currentClientPointer = clientPointers[clientId];
+            if (pointer) {
+                const pixel = this._Map.getPixelFromCoordinate([
+                    pointer.coordinates.x,
+                    pointer.coordinates.y,
+                ]);
+                const lonLat = toLonLat([pointer.coordinates.x, pointer.coordinates.y]);
+                if (!currentClientPointer) {
+                    currentClientPointer = {
+                        username: client.user.username,
+                        displayName: client.user.display_name,
+                        color: client.user.color,
+                        coordinates: {
+                            x: pixel[0],
+                            y: pixel[1],
+                        },
+                        lonLat: {
+                            longitude: lonLat[0],
+                            latitude: lonLat[1],
+                        },
+                    };
+                }
+                else {
+                    currentClientPointer = Object.assign(Object.assign({}, currentClientPointer), { coordinates: {
+                            x: pixel[0],
+                            y: pixel[1],
+                        }, lonLat: {
+                            longitude: lonLat[0],
+                            latitude: lonLat[1],
+                        } });
+                }
+                clientPointers[clientId] = currentClientPointer;
+            }
+            else {
+                delete clientPointers[clientId];
+            }
+        });
+        this.setState(old => (Object.assign(Object.assign({}, old), { clientPointers })));
+    }
     _onSharedOptionsChanged() {
         if (!this._Map) {
             return;
@@ -1781,7 +2197,7 @@ export class MainView extends React.Component {
                 view = new View({ projection: newProjection });
             }
             else {
-                console.warn(`Invalid projection: ${projection}`);
+                this._log('warning', `Invalid projection: ${projection}`);
                 return;
             }
         }
@@ -1876,6 +2292,11 @@ export class MainView extends React.Component {
             const { id, oldValue: oldLayer, newValue: newLayer } = change;
             if (!newLayer || Object.keys(newLayer).length === 0) {
                 this.removeLayer(id);
+                if (this._model.checkIfIsADrawVectorLayer(oldLayer)) {
+                    this._model.editingVectorLayer = false;
+                    this._updateEditingVectorLayer();
+                    this._mainViewModel.commands.notifyCommandChanged(CommandIDs.toggleDrawFeatures);
+                }
                 return;
             }
             if (oldLayer && oldLayer.type !== newLayer.type) {
@@ -1886,6 +2307,9 @@ export class MainView extends React.Component {
             const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
             if (layerTree.includes(id)) {
                 this.updateLayer(id, newLayer, mapLayer, oldLayer);
+                if (mapLayer) {
+                    this._trackLayerViewState(id, mapLayer);
+                }
             }
             else {
                 this.updateLayers(layerTree);
@@ -1914,6 +2338,14 @@ export class MainView extends React.Component {
                 }
             }
         });
+        this.setState(old => (Object.assign(Object.assign({}, old), { identifyFeatureFloatersVersion: old.identifyFeatureFloatersVersion + 1 })));
+    }
+    _clearHighlightWhenIdentifyDisabled() {
+        var _a, _b;
+        if (this._model.currentMode !== 'identifying' &&
+            this._highlightLayerRef.current) {
+            (_b = (_a = this._highlightLayerRef.current) === null || _a === void 0 ? void 0 : _a.getSource()) === null || _b === void 0 ? void 0 : _b.clear();
+        }
     }
     _computeAnnotationPosition(annotation) {
         const { x, y } = annotation.position;
@@ -1938,6 +2370,58 @@ export class MainView extends React.Component {
             }
         });
     }
+    _computeFeatureFloaterPosition(feature) {
+        var _a;
+        const geometry = (_a = feature === null || feature === void 0 ? void 0 : feature.geometry) !== null && _a !== void 0 ? _a : feature === null || feature === void 0 ? void 0 : feature._geometry;
+        if (!geometry) {
+            return undefined;
+        }
+        if (typeof geometry.getExtent === 'function') {
+            const extent = geometry.getExtent();
+            const center = getCenter(extent);
+            const pixels = this._Map.getPixelFromCoordinate(center);
+            if (pixels) {
+                return { x: pixels[0], y: pixels[1] };
+            }
+            return undefined;
+        }
+        if (geometry.type === 'Point' && Array.isArray(geometry.coordinates)) {
+            const pixels = this._Map.getPixelFromCoordinate(geometry.coordinates);
+            if (pixels) {
+                return { x: pixels[0], y: pixels[1] };
+            }
+        }
+        return undefined;
+    }
+    _getVisibleDrawIdentifiedFeatures() {
+        var _a, _b, _c;
+        const identifiedFeatures = (_c = (_b = (_a = this._model.localState) === null || _a === void 0 ? void 0 : _a.identifiedFeatures) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : [];
+        const drawEntries = identifiedFeatures.filter(entry => entry.floaterOpen === true);
+        const visibleFeatures = drawEntries
+            .map(entry => {
+            const featureId = getFeatureIdentifier(entry.feature);
+            if (!featureId) {
+                return undefined;
+            }
+            return [featureId, entry.feature];
+        })
+            .filter((entry) => !!entry);
+        return visibleFeatures;
+    }
+    _updateFeatureFloaters() {
+        this._getVisibleDrawIdentifiedFeatures().forEach(([floaterKey, feature]) => {
+            const el = document.getElementById(`feature-floater-${floaterKey}`);
+            if (!el) {
+                return;
+            }
+            const screenPosition = this._computeFeatureFloaterPosition(feature);
+            if (!screenPosition) {
+                return;
+            }
+            el.style.left = `${Math.round(screenPosition.x)}px`;
+            el.style.top = `${Math.round(screenPosition.y)}px`;
+        });
+    }
     // TODO this and flyToPosition need a rework
     _onZoomToPosition(_, id) {
         var _a, _b, _c;
@@ -1948,7 +2432,6 @@ export class MainView extends React.Component {
             return;
         }
         // The id is a layer
-        let extent;
         const layer = this.getLayer(id);
         const source = layer === null || layer === void 0 ? void 0 : layer.getSource();
         const jgisLayer = this._model.getLayer(id);
@@ -1998,19 +2481,13 @@ export class MainView extends React.Component {
                 return;
             }
         }
-        if (source instanceof VectorSource) {
-            extent = source.getExtent();
-        }
-        if (source instanceof TileSource) {
-            // Tiled sources don't have getExtent() so we get it from the grid
-            const tileGrid = source.getTileGrid();
-            extent = tileGrid === null || tileGrid === void 0 ? void 0 : tileGrid.getExtent();
-        }
-        if (layer instanceof StacLayer) {
-            extent = layer.getExtent();
-        }
+        const extent = this._computeExtent(layer, source);
         if (!extent) {
-            console.warn('Layer has no extent.');
+            this._log('warning', 'Layer ${id} has no extent.');
+            return;
+        }
+        if (!extent.every(value => Number.isFinite(value))) {
+            this._log('warning', `Layer ${id} has an invalid extent: ${extent.join(', ')}`);
             return;
         }
         // Convert layer extent value to view projection if needed
@@ -2019,6 +2496,10 @@ export class MainView extends React.Component {
         const transformedExtent = sourceProjection && sourceProjection !== viewProjection
             ? transformExtent(extent, sourceProjection, viewProjection)
             : extent;
+        if (!transformedExtent.every(value => Number.isFinite(value))) {
+            this._log('warning', `Layer ${id} has an invalid transformed extent: ${transformedExtent.join(', ')}`);
+            return;
+        }
         this._Map.getView().fit(transformedExtent, {
             size: this._Map.getSize(),
             duration: 500,
@@ -2082,7 +2563,8 @@ export class MainView extends React.Component {
         this._syncPointer(coordinates);
     }
     async _addMarker(e) {
-        if (this._model.currentMode !== 'marking') {
+        if (this.state.editingVectorLayer ||
+            this._model.currentMode !== 'marking') {
             return;
         }
         const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
@@ -2094,7 +2576,7 @@ export class MainView extends React.Component {
         const layerParams = {
             opacity: 1.0,
             source: sourceId,
-            symbologyState: { renderType: 'Single Symbol' },
+            symbologyState: { layers: [] },
         };
         const sourceModel = {
             type: 'MarkerSource',
@@ -2114,25 +2596,29 @@ export class MainView extends React.Component {
     }
     _identifyFeature(e) {
         var _a, _b;
-        if (this._model.currentMode !== 'identifying') {
+        if (this.state.editingVectorLayer ||
+            this._model.currentMode !== 'identifying') {
             return;
         }
         const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
         const selectedLayer = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
         if (!selectedLayer) {
-            console.warn('Layer must be selected to use identify tool');
+            this._log('warning', 'Layer must be selected to use identify tool');
             return;
         }
         const layerId = Object.keys(selectedLayer)[0];
         const jgisLayer = this._model.getLayer(layerId);
         switch (jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) {
+            case 'VectorLayer':
+                // Handled by selectInteraction (createSelectInteraction).
+                break;
             case 'VectorTileLayer': {
                 const geometries = [];
                 const features = [];
-                let foundAny = false;
+                let foundAnyFeatures = false;
                 this._Map.forEachFeatureAtPixel(e.pixel, (feature) => {
                     var _a, _b;
-                    foundAny = true;
+                    foundAnyFeatures = true;
                     let geom;
                     let props = {};
                     if (feature instanceof RenderFeature) {
@@ -2158,15 +2644,18 @@ export class MainView extends React.Component {
                         geometries.push(geom);
                     }
                     if (props && Object.keys(props).length > 0) {
-                        features.push(props);
+                        features.push({
+                            feature: props,
+                            floaterOpen: false,
+                        });
                     }
                     return true;
                 });
                 if (features.length > 0) {
-                    this._model.syncIdentifiedFeatures(features, this._mainViewModel.id);
+                    this._model.syncIdentifiedFeatures(features, this._model.getClientId().toString());
                 }
-                else if (!foundAny) {
-                    this._model.syncIdentifiedFeatures([], this._mainViewModel.id);
+                else if (!foundAnyFeatures) {
+                    this._model.syncIdentifiedFeatures([], this._model.getClientId().toString());
                 }
                 if (geometries.length > 0) {
                     for (const geom of geometries) {
@@ -2180,7 +2669,7 @@ export class MainView extends React.Component {
                 }
                 break;
             }
-            case 'WebGlLayer': {
+            case 'GeoTiffLayer': {
                 const layer = this.getLayer(layerId);
                 const data = layer.getData(e.pixel);
                 // TODO: Handle dataviews?
@@ -2194,7 +2683,7 @@ export class MainView extends React.Component {
                 }
                 // last element is alpha
                 bandValues['Alpha'] = data[data.length - 1];
-                this._model.syncIdentifiedFeatures([bandValues], this._mainViewModel.id);
+                this._model.syncIdentifiedFeatures([{ feature: bandValues, floaterOpen: false }], this._mainViewModel.id);
                 const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
                 const point = new Point(coordinate);
                 // trigger highlight via signal
@@ -2213,7 +2702,7 @@ export class MainView extends React.Component {
             this.updateSource(layerId, jgisLayer);
         }
         if (!jgisLayer || !olLayer) {
-            console.error('Failed to update layer -- layer not found');
+            this._log('error', 'Failed to update layer -- layer not found');
             return;
         }
         this.updateLayer(layerId, jgisLayer, olLayer);
@@ -2223,6 +2712,9 @@ export class MainView extends React.Component {
         const { id: layerId, selectedFeature } = json;
         const olLayer = this.getLayer(layerId);
         const source = olLayer.getSource();
+        if (typeof source.forEachFeature !== 'function') {
+            return;
+        }
         source.forEachFeature(feature => {
             const time = feature.get(selectedFeature);
             const parsedTime = typeof time === 'string' ? Date.parse(time) : time;
@@ -2239,48 +2731,86 @@ export class MainView extends React.Component {
             throw new Error('Could not move to geolocation, because current zoom is not defined.');
         }
     }
+    _updateEditingVectorLayer() {
+        const editingVectorLayer = this._model.editingVectorLayer;
+        this.setState(old => (Object.assign(Object.assign({}, old), { editingVectorLayer })));
+        if (editingVectorLayer === true) {
+            this._editVectorLayer();
+        }
+        if (editingVectorLayer === false && this._draw) {
+            this._removeDrawInteraction();
+            this._currentDrawLayerID = undefined;
+        }
+    }
+    _renderAnnotationFloaters() {
+        const annotationModel = this._model.annotationModel;
+        if (!annotationModel) {
+            return null;
+        }
+        return Object.entries(this.state.annotations).map(([key, annotation]) => {
+            const screenPosition = this._computeAnnotationPosition(annotation);
+            if (!screenPosition) {
+                return null;
+            }
+            return (React.createElement(PositionedFloater, { key: key, id: key, className: "jGIS-Popup-Wrapper", left: screenPosition.x, top: screenPosition.y },
+                React.createElement(AnnotationFloater, { itemId: key, annotationModel: annotationModel })));
+        });
+    }
+    _renderFeatureFloaters() {
+        return this._getVisibleDrawIdentifiedFeatures().map(([floaterKey, feature]) => {
+            const screenPosition = this._computeFeatureFloaterPosition(feature);
+            if (!screenPosition) {
+                return null;
+            }
+            const id = `feature-floater-${floaterKey}`;
+            return (React.createElement(PositionedFloater, { key: id, id: id, className: "jGIS-Popup-Wrapper jGIS-FeatureFloater-Wrapper", left: screenPosition.x, top: screenPosition.y },
+                React.createElement(FeatureFloater, { feature: feature })));
+        });
+    }
     render() {
+        const { clientPointers, displayTemporalController, drawGeometryLabel, editingVectorLayer, filterStates, initialLayersReady, isSpectaPresentation, jgisSettings, loading, loadingLayer, remoteUser, scale, segmentTransition, viewProjection, } = this.state;
+        const { isMobile } = this.props;
+        const selectedStory = this._model.getSelectedStory().story;
+        const isListStory = isSpectaPresentation &&
+            (selectedStory === null || selectedStory === void 0 ? void 0 : selectedStory.storyType) === STORY_TYPE.verticalScroll;
+        const showSidePanels = !isSpectaPresentation;
+        const showMergedMobilePanel = isMobile &&
+            Boolean(this._state) &&
+            Boolean(this._formSchemaRegistry) &&
+            Boolean(this._annotationModel);
+        const spectaMobileTouch = isSpectaPresentation && isMobile;
         return (React.createElement(React.Fragment, null,
-            Object.entries(this.state.annotations).map(([key, annotation]) => {
-                if (!this._model.annotationModel) {
-                    return null;
-                }
-                const screenPosition = this._computeAnnotationPosition(annotation);
-                return (screenPosition && (React.createElement("div", { key: key, id: key, style: {
-                        left: screenPosition.x,
-                        top: screenPosition.y,
-                    }, className: 'jGIS-Popup-Wrapper' },
-                    React.createElement(AnnotationFloater, { itemId: key, annotationModel: this._model.annotationModel }))));
-            }),
+            React.createElement(MainViewOverlayLayer, { annotationFloaters: this._renderAnnotationFloaters(), featureFloaters: this._renderFeatureFloaters(), editingVectorLayer: editingVectorLayer, drawGeometryLabel: drawGeometryLabel, onDrawGeometryTypeChange: this._handleDrawGeometryTypeChange }),
             React.createElement("div", { className: "jGIS-Mainview-Container" },
-                this.state.displayTemporalController && (React.createElement(TemporalSlider, { model: this._model, filterStates: this.state.filterStates })),
-                React.createElement("div", { ref: this.mainViewRef, className: "jGIS-Mainview data-jgis-keybinding", tabIndex: 0, style: {
-                        border: this.state.remoteUser
-                            ? `solid 3px ${this.state.remoteUser.color}`
-                            : 'unset',
-                    }, onTouchStart: this.state.isSpectaPresentation && this.props.isMobile
-                        ? this._handleSpectaTouchStart
-                        : undefined, onTouchEnd: this.state.isSpectaPresentation && this.props.isMobile
-                        ? this._handleSpectaTouchEnd
-                        : undefined },
-                    React.createElement(LoadingOverlay, { loading: this.state.loading }),
-                    React.createElement(FollowIndicator, { remoteUser: this.state.remoteUser }),
-                    React.createElement(CollaboratorPointers, { clients: this.state.clientPointers }),
-                    React.createElement("div", { ref: this.divRef, style: {
-                            width: '100%',
-                            height: '100%',
-                        } },
-                        React.createElement("div", { className: "jgis-panels-wrapper" }, !this.state.isSpectaPresentation ? (React.createElement(React.Fragment, null,
-                            this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state, settings: this.state.jgisSettings })),
-                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel, addLayer: this.addLayer.bind(this), removeLayer: this.removeLayer.bind(this), settings: this.state.jgisSettings })))) : (this.state.initialLayersReady && (React.createElement(SpectaPanel, { model: this._model, isSpecta: this.state.isSpectaPresentation, isMobile: this.props.isMobile, onSegmentTransitionEnd: () => this._clearStoryScrollGuard(), containerRef: this.spectaContainerRef, storyViewerPanelRef: this.storyViewerPanelRef, addLayer: this.addLayer.bind(this), removeLayer: this.removeLayer.bind(this) })))),
-                        React.createElement("div", { ref: this.controlsToolbarRef, className: "jgis-controls-toolbar" }))),
-                !this.state.isSpectaPresentation && (React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })))));
+                displayTemporalController ? (React.createElement(TemporalSlider, { model: this._model, filterStates: filterStates })) : null,
+                React.createElement(MainViewMapSurface, { mainViewRef: this.mainViewRef, loading: loading, remoteUser: remoteUser, clientPointers: clientPointers, spectaMobileTouch: spectaMobileTouch, onTouchStart: this._handleSpectaTouchStart, onTouchEnd: this._handleSpectaTouchEnd },
+                    React.createElement(MainViewStoryStage, { model: this._model, isListStory: isListStory, isMobile: isMobile, segmentTransition: segmentTransition, stageRef: this.divRef, controlsToolbarRef: this.controlsToolbarRef, panels: showSidePanels ? (React.createElement(MainViewSidePanels, { model: this._model, commands: this._mainViewModel.commands, settings: jgisSettings, showMergedMobilePanel: showMergedMobilePanel, state: this._state, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel, addLayer: this.addLayer.bind(this), removeLayer: this.removeLayer.bind(this), patchGeoJSONFeatureProperties: this._patchGeoJSONFeatureProperties })) : (React.createElement(MainViewSpectaPanel, { model: this._model, isSpecta: isSpectaPresentation, isMobile: isMobile, initialLayersReady: initialLayersReady, containerRef: this.spectaContainerRef, storyViewerPanelRef: this.storyViewerPanelRef, addLayer: this._addLayerForPanels, removeLayer: this._removeLayerForPanels, onSegmentTransitionEnd: this._clearStoryScrollGuard, onSegmentTransitionChange: this._handleSegmentTransitionChange })) })),
+                !isSpectaPresentation ? (React.createElement(StatusBar, { jgisModel: this._model, loading: loadingLayer, projection: viewProjection, scale: scale })) : null)));
+    }
+    _log(level, message) {
+        var _a;
+        // Always mirror to the browser console regardless of whether the JupyterLab
+        // logger is available.
+        if (level === 'error' || level === 'critical') {
+            // eslint-disable-next-line no-console
+            console.error(message);
+        }
+        else if (level === 'warning') {
+            // eslint-disable-next-line no-console
+            console.warn(message);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.log(message);
+        }
+        // Forward to JupyterLab log console when available.
+        (_a = this._loggerRegistry) === null || _a === void 0 ? void 0 : _a.getLogger(this._model.filePath).log({ type: 'text', level, data: message });
     }
 }
 // ! TODO make mainview a modern react component instead of a class
 /** Thin wrapper that injects isMobile from useMediaQuery so MainView can use it in JSX. */
 function MainViewWithMediaQuery(props) {
-    const isMobile = useMediaQuery('(max-width: 768px)');
+    const isMobile = useMediaQuery('(max-width: 960px)');
     return React.createElement(MainView, Object.assign({}, props, { isMobile: isMobile }));
 }
 export { MainViewWithMediaQuery };