@jupytergis/base 0.12.2 → 0.13.1

package/lib/formbuilder/objectform/components/LayerSelect.js

@@ -0,0 +1,43 @@
+import React from 'react';
+function extractlayerOverrideIndex(idSchema) {
+    var _a;
+    const id = (_a = idSchema === null || idSchema === void 0 ? void 0 : idSchema.$id) !== null && _a !== void 0 ? _a : '';
+    const match = id.match(/layerOverride_(\d+)/);
+    return match ? parseInt(match[1], 10) : undefined;
+}
+/**
+ * Simple select populated with layers (valid types only).
+ * Used as the targetLayer field inside layerOverride array items.
+ */
+export function LayerSelect(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const { idSchema, formContext, formData, onChange } = props;
+    const context = formContext;
+    const model = context === null || context === void 0 ? void 0 : context.model;
+    const fullFormData = (_a = context === null || context === void 0 ? void 0 : context.formData) !== null && _a !== void 0 ? _a : formData;
+    const arrayIndex = extractlayerOverrideIndex(idSchema !== null && idSchema !== void 0 ? idSchema : {});
+    const value = arrayIndex !== undefined && ((_b = fullFormData === null || fullFormData === void 0 ? void 0 : fullFormData.layerOverride) === null || _b === void 0 ? void 0 : _b[arrayIndex])
+        ? ((_c = fullFormData.layerOverride[arrayIndex].targetLayer) !== null && _c !== void 0 ? _c : '')
+        : '';
+    if (!model) {
+        return null;
+    }
+    const layerOverride = (_d = fullFormData === null || fullFormData === void 0 ? void 0 : fullFormData.layerOverride) !== null && _d !== void 0 ? _d : [];
+    const currentTargetLayer = arrayIndex !== undefined
+        ? (_f = (_e = fullFormData === null || fullFormData === void 0 ? void 0 : fullFormData.layerOverride) === null || _e === void 0 ? void 0 : _e[arrayIndex]) === null || _f === void 0 ? void 0 : _f.targetLayer
+        : undefined;
+    const usedTargetLayerIds = new Set(layerOverride
+        .filter((_, i) => i !== arrayIndex)
+        .map(override => override.targetLayer)
+        .filter(id => id !== undefined && id !== '')
+        .filter(id => id !== currentTargetLayer));
+    const availableLayers = model.getLayers();
+    const optionsList = Object.entries(availableLayers).filter(([layerId]) => !usedTargetLayerIds.has(layerId));
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        onChange(newValue === '' ? undefined : newValue);
+    };
+    return (React.createElement("select", { value: value !== null && value !== void 0 ? value : '', onChange: handleChange, style: { width: '100%' } },
+        React.createElement("option", { value: "" }, "Select a layer"),
+        optionsList.map(([layerId, layer]) => (React.createElement("option", { key: layerId, value: layerId }, layer.name.charAt(0).toUpperCase() + layer.name.slice(1))))));
+}

package/lib/formbuilder/objectform/components/OpacitySlider.d.ts

@@ -0,0 +1,4 @@
+import { FieldProps } from '@rjsf/utils';
+import React from 'react';
+declare function OpacitySlider({ formData, onChange }: FieldProps<number>): React.JSX.Element;
+export default OpacitySlider;

package/lib/formbuilder/objectform/components/OpacitySlider.js

@@ -0,0 +1,40 @@
+import { Slider } from '@jupyter/react-components';
+import React from 'react';
+function OpacitySlider({ formData, onChange }) {
+    var _a;
+    const [inputValue, setInputValue] = React.useState((_a = formData === null || formData === void 0 ? void 0 : formData.toFixed(1)) !== null && _a !== void 0 ? _a : '1');
+    React.useEffect(() => {
+        var _a;
+        const newValue = (_a = formData === null || formData === void 0 ? void 0 : formData.toFixed(1)) !== null && _a !== void 0 ? _a : '1';
+        if (newValue !== inputValue) {
+            setInputValue(newValue);
+        }
+    }, [formData]);
+    const handleSliderChange = (event) => {
+        const target = event.target;
+        if (target && '_value' in target) {
+            const sliderValue = parseFloat(target._value); // Slider value is in 0–10 range
+            const normalizedValue = sliderValue / 10; // Normalize to 0.1–1 range
+            onChange(normalizedValue);
+        }
+    };
+    const handleInputChange = (event) => {
+        const value = event.target.value;
+        setInputValue(value);
+        const parsedValue = parseFloat(value);
+        if (!isNaN(parsedValue) && parsedValue >= 0.1 && parsedValue <= 1) {
+            onChange(parsedValue);
+        }
+    };
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+        React.createElement(Slider, { min: 1, max: 10, step: 1, value: formData ? formData * 10 : 10, onChange: handleSliderChange }),
+        React.createElement("input", { type: "number", value: inputValue, step: 0.1, min: 0.1, onChange: handleInputChange, style: {
+                width: '50px',
+                textAlign: 'center',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                padding: '4px',
+                marginBottom: '5px',
+            } })));
+}
+export default OpacitySlider;

package/lib/formbuilder/objectform/components/SegmentFormSymbology.d.ts

@@ -0,0 +1,3 @@
+import { ArrayFieldTemplateProps } from '@rjsf/core';
+import React from 'react';
+export declare function ArrayFieldTemplate(props: ArrayFieldTemplateProps): React.JSX.Element;

package/lib/formbuilder/objectform/components/SegmentFormSymbology.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { SymbologyWidget } from "../../../dialogs/symbology/symbologyDialog";
+import { Button } from "../../../shared/components/Button";
+import { GlobalStateDbManager } from "../../../store";
+import { SYMBOLOGY_VALID_LAYER_TYPES } from "../../../types";
+const SELECTION_SETTLE_MS = 100;
+function LayerOverrideItem({ item, formContext }) {
+    var _a, _b;
+    const model = formContext === null || formContext === void 0 ? void 0 : formContext.model;
+    if (!model) {
+        return null;
+    }
+    const state = GlobalStateDbManager.getInstance().getStateDb();
+    const currentItem = (_b = (_a = formContext === null || formContext === void 0 ? void 0 : formContext.formData) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b[item.index];
+    const targetLayerId = currentItem === null || currentItem === void 0 ? void 0 : currentItem.targetLayer;
+    const selectedLayer = targetLayerId
+        ? model.getLayer(targetLayerId)
+        : undefined;
+    const canOpenSymbology = Boolean(targetLayerId &&
+        selectedLayer &&
+        SYMBOLOGY_VALID_LAYER_TYPES.includes(selectedLayer.type));
+    const handleOpenSymbology = async () => {
+        if (!targetLayerId || !state || !selectedLayer) {
+            return;
+        }
+        const previousSelection = model.selected;
+        const segmentId = Object.keys(previousSelection !== null && previousSelection !== void 0 ? previousSelection : {}).find(key => { var _a; return ((_a = model.getLayer(key)) === null || _a === void 0 ? void 0 : _a.type) === 'StorySegmentLayer'; });
+        // Temporarily set the selected layer to the target layer
+        model.syncSelected({ [targetLayerId]: { type: 'layer' } });
+        await new Promise(resolve => setTimeout(resolve, SELECTION_SETTLE_MS));
+        const dialog = new SymbologyWidget({
+            model,
+            state,
+            isStorySegmentOverride: true,
+            segmentId,
+        });
+        await dialog.launch();
+        model.syncSelected(previousSelection !== null && previousSelection !== void 0 ? previousSelection : {});
+    };
+    return (React.createElement("div", { className: "jGIS-symbology-override-item" },
+        React.createElement("div", { style: { flex: 1 } }, item.children),
+        React.createElement("div", { style: { display: 'flex', gap: '1rem' } },
+            React.createElement(Button, { title: "Edit layer override for the target layer", onClick: handleOpenSymbology, style: { width: '100%' }, disabled: !canOpenSymbology },
+                React.createElement("span", { className: "fa fa-brush", style: { marginRight: '4px' } }),
+                "Edit Symbology"),
+            item.hasRemove && (React.createElement(Button, { variant: "destructive", onClick: item.onDropIndexClick(item.index), title: "Remove item" }, "Remove")))));
+}
+export function ArrayFieldTemplate(props) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, props.title),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem',
+                alignItems: 'center',
+            } },
+            props.items.map(item => (React.createElement(LayerOverrideItem, { key: item.key, item: item, formContext: props.formContext }))),
+            props.canAdd && (React.createElement(Button, { onClick: props.onAddClick }, "Add Layer Override")))));
+}

package/lib/formbuilder/objectform/layer/storySegmentLayerForm.d.ts

@@ -1,5 +1,5 @@
-import { IDict } from '@jupytergis/schema';
+import { IDict, IStorySegmentLayer } from '@jupytergis/schema';
 import { LayerPropertiesForm } from './layerform';
 export declare class StorySegmentLayerPropertiesForm extends LayerPropertiesForm {
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected processSchema(data: IStorySegmentLayer | undefined, schema: IDict, uiSchema: IDict): void;
 }

package/lib/formbuilder/objectform/layer/storySegmentLayerForm.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { LayerPropertiesForm } from './layerform';
+import { ArrayFieldTemplate } from '../components/SegmentFormSymbology';
 import StorySegmentReset from '../components/StorySegmentReset';
 export class StorySegmentLayerPropertiesForm extends LayerPropertiesForm {
     processSchema(data, schema, uiSchema) {
+        var _a, _b, _c;
         super.processSchema(data, schema, uiSchema);
         if (!this.props.model.selected) {
             return;
@@ -27,6 +29,23 @@ export class StorySegmentLayerPropertiesForm extends LayerPropertiesForm {
                     rows: 10,
                 },
             } });
+        uiSchema['layerOverride'] = Object.assign(Object.assign({}, uiSchema['layerOverride']), { items: {
+                'ui:title': '',
+                targetLayer: {
+                    'ui:field': 'layerSelect',
+                },
+                opacity: {
+                    'ui:field': 'opacity',
+                },
+            }, 'ui:options': {
+                orderable: false,
+            }, 'ui:ArrayFieldTemplate': ArrayFieldTemplate });
+        // Remove properties that should not be displayed in the form
+        const layerOverrideItems = (_c = (_b = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.properties;
+        if (layerOverrideItems) {
+            delete layerOverrideItems.color;
+            delete layerOverrideItems.symbologyState;
+        }
         this.removeFormEntry('zoom', data, schema, uiSchema);
     }
 }

package/lib/formbuilder/objectform/source/geojsonsource.js

@@ -15,9 +15,7 @@ export class GeoJSONSourcePropertiesForm extends PathBasedSourcePropertiesForm {
         this._validatePath((_b = (_a = props.sourceData) === null || _a === void 0 ? void 0 : _a.path) !== null && _b !== void 0 ? _b : '');
     }
     processSchema(data, schema, uiSchema) {
-        if ((data === null || data === void 0 ? void 0 : data.path) !== '') {
-            this.removeFormEntry('data', data, schema, uiSchema);
-        }
+        this.removeFormEntry('data', data, schema, uiSchema);
         if (this.props.formContext === 'create') {
             schema.properties.path.description =
                 'The local path to a GeoJSON file. (If no path/url is provided, an empty GeoJSON is created.)';

package/lib/mainview/mainView.js

@@ -1209,6 +1209,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new VectorTileLayer({
                     opacity: layerParameters.opacity,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                     style: this.vectorLayerStyleRuleBuilder(layer),
                 });
@@ -1218,6 +1219,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new WebGlTileLayer({
                     opacity: 0.3,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                     style: {
                         color: ['color', this.hillshadeMath()],
@@ -1229,6 +1231,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new ImageLayer({
                     opacity: layerParameters.opacity,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                 });
                 break;
@@ -1238,6 +1241,7 @@ export class MainView extends React.Component {
                 // This is to handle python sending a None for the color
                 const layerOptions = {
                     opacity: layerParameters.opacity,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                 };
                 if (layerParameters.color) {
@@ -1252,6 +1256,7 @@ export class MainView extends React.Component {
                 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,
@@ -2087,7 +2092,7 @@ export class MainView extends React.Component {
                         } },
                         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, settings: this.state.jgisSettings })))) : this.props.isMobile ? (React.createElement(MobileSpectaPanel, { model: this._model })) : (React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
+                            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.props.isMobile ? (React.createElement(MobileSpectaPanel, { model: this._model })) : (React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
                             React.createElement("div", { ref: this.spectaContainerRef, className: "jgis-specta-story-panel-container" },
                                 React.createElement(StoryViewerPanel, { ref: this.storyViewerPanelRef, model: this._model, isSpecta: this.state.isSpectaPresentation, className: "jgis-story-viewer-panel-specta-mod" }))))),
                         React.createElement("div", { ref: this.controlsToolbarRef, className: "jgis-controls-toolbar" }))),

package/lib/panelview/rightpanel.d.ts

@@ -1,4 +1,4 @@
-import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
+import { IAnnotationModel, IJGISFormSchemaRegistry, IJGISLayer, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
 import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
 interface IRightPanelProps {
@@ -7,6 +7,8 @@ interface IRightPanelProps {
     model: IJupyterGISModel;
     commands: CommandRegistry;
     settings: IJupyterGISSettings;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer?: (id: string) => void;
 }
 export declare const RightPanel: React.FC<IRightPanelProps>;
 export {};

package/lib/panelview/rightpanel.js

@@ -10,6 +10,7 @@ export const RightPanel = props => {
     var _a;
     const [editorMode, setEditorMode] = React.useState(true);
     const [storyMapPresentationMode, setStoryMapPresentationMode] = React.useState((_a = props.model.getOptions().storyMapPresentationMode) !== null && _a !== void 0 ? _a : false);
+    const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     // Only show editor when not in presentation mode and editorMode is true
     const showEditor = !storyMapPresentationMode && editorMode;
     // Tab title: "Story Map" in presentation mode, otherwise based on editorMode
@@ -70,7 +71,6 @@ export const RightPanel = props => {
         props.settings.annotationsDisabled &&
         props.settings.identifyDisabled;
     const rightPanelVisible = !props.settings.rightPanelDisabled && !allRightTabsDisabled;
-    const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     const toggleEditor = () => {
         setEditorMode(!editorMode);
     };
@@ -88,7 +88,7 @@ export const RightPanel = props => {
                 React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
             !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
                 !storyMapPresentationMode && (React.createElement(PreviewModeSwitch, { checked: !editorMode, onCheckedChange: toggleEditor })),
-                showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : (React.createElement(StoryViewerPanel, { model: props.model, isSpecta: false })))),
+                showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : (React.createElement(StoryViewerPanel, { model: props.model, isSpecta: false, addLayer: props.addLayer, removeLayer: props.removeLayer })))),
             !props.settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
                 React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
             !props.settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },

package/lib/panelview/story-maps/StoryViewerPanel.d.ts

@@ -1,10 +1,12 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
+import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
 import React from 'react';
 interface IStoryViewerPanelProps {
     model: IJupyterGISModel;
     isSpecta: boolean;
     isMobile?: boolean;
     className?: string;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer?: (id: string) => void;
 }
 export interface IStoryViewerPanelHandle {
     handlePrev: () => void;

package/lib/panelview/story-maps/StoryViewerPanel.js

@@ -1,3 +1,4 @@
+import { UUID } from '@lumino/coreutils';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { cn } from "../../shared/components/utils";
 import StoryNavBar from './StoryNavBar';
@@ -17,7 +18,7 @@ function getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile) {
     }
     return hasImage ? 'over-image' : 'below-title';
 }
-const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, className }, ref) => {
+const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, className, addLayer, removeLayer }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(() => model.getCurrentSegmentIndex());
     const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
@@ -27,6 +28,25 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
         model.setCurrentSegmentIndex(index);
         setCurrentIndexDisplayed(index);
     }, [model]);
+    /** Layers affected by layer override
+     * We want to remove added layers (ie Heatmap)
+     * and Restore the original symbology for modified layers
+     */
+    const overrideLayerEntriesRef = useRef([]);
+    const clearOverrideLayers = useCallback(() => {
+        overrideLayerEntriesRef.current.forEach(({ layerId, action }) => {
+            if (action === 'remove') {
+                removeLayer === null || removeLayer === void 0 ? void 0 : removeLayer(layerId);
+            }
+            else {
+                const layer = model.getLayer(layerId);
+                if (layer) {
+                    model.triggerLayerUpdate(layerId, layer);
+                }
+            }
+        });
+        overrideLayerEntriesRef.current = [];
+    }, [model]);
     // Derive story segments from story data
     const storySegments = useMemo(() => {
         if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments)) {
@@ -44,15 +64,14 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
     const activeSlide = useMemo(() => {
         return currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.parameters;
     }, [currentStorySegment]);
-    const layerName = useMemo(() => {
-        var _a;
-        return (_a = currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.name) !== null && _a !== void 0 ? _a : '';
-    }, [currentStorySegment]);
+    const layerName = useMemo(() => { var _a; return (_a = currentStorySegment === null || currentStorySegment === void 0 ? void 0 : currentStorySegment.name) !== null && _a !== void 0 ? _a : ''; }, [currentStorySegment]);
     // Derive story segment ID for zooming
     const currentStorySegmentId = useMemo(() => {
         var _a;
         return (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a[currentIndexDisplayed];
     }, [storyData, currentIndexDisplayed]);
+    const hasPrev = currentIndexDisplayed > 0;
+    const hasNext = currentIndexDisplayed < storySegments.length - 1;
     const zoomToCurrentLayer = () => {
         if (currentStorySegmentId) {
             model.centerOnPosition(currentStorySegmentId);
@@ -69,12 +88,32 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
             };
         }
     }, [storyData, model]);
+    // On unmount: remove override layers and restore layer symbology
+    useEffect(() => {
+        return () => {
+            var _a;
+            clearOverrideLayers();
+            (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a.forEach(segmentId => {
+                var _a;
+                const segment = model.getLayer(segmentId);
+                const overrides = (_a = segment === null || segment === void 0 ? void 0 : segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride;
+                if (Array.isArray(overrides)) {
+                    overrides.forEach((override) => {
+                        const targetLayerId = override.targetLayer;
+                        const targetLayer = model.getLayer(targetLayerId);
+                        targetLayer &&
+                            model.triggerLayerUpdate(targetLayerId, targetLayer);
+                    });
+                }
+            });
+        };
+    }, [storyData, model, clearOverrideLayers]);
     useEffect(() => {
         const updateStory = () => {
             var _a;
+            clearOverrideLayers();
             const { story } = model.getSelectedStory();
             setStoryData(story !== null && story !== void 0 ? story : null);
-            // Reset to first slide when story changes
             setIndex((_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0);
         };
         updateStory();
@@ -82,7 +121,7 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
         return () => {
             model.sharedModel.storyMapsChanged.disconnect(updateStory);
         };
-    }, [model, setIndex]);
+    }, [model, setIndex, clearOverrideLayers]);
     // Prefetch image when slide changes
     useEffect(() => {
         var _a;
@@ -114,6 +153,20 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
             zoomToCurrentLayer();
         }
     }, [currentStorySegmentId, model]);
+    // Set selected layer and apply symbology when segment changes; remove previous segment's override layers first.
+    useEffect(() => {
+        if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) || currentIndexDisplayed < 0) {
+            return;
+        }
+        clearOverrideLayers();
+        setSelectedLayerByIndex(currentIndexDisplayed);
+        overrideSymbology(currentIndexDisplayed);
+    }, [
+        storyData,
+        currentIndexDisplayed,
+        setSelectedLayerByIndex,
+        clearOverrideLayers,
+    ]);
     // Set selected layer on initial render and when story data changes
     useEffect(() => {
         if ((storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) && currentIndexDisplayed >= 0) {
@@ -150,41 +203,96 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
             }
             setIndex(index);
         };
+        // ! TODO really only want to connect this un unguided mode
         model.sharedModel.awareness.on('change', handleSelectedStorySegmentChange);
         return () => {
             model.sharedModel.awareness.off('change', handleSelectedStorySegmentChange);
         };
     }, [model, storyData, setIndex]);
+    // Apply layer overrides for the segment at the given index
+    const overrideSymbology = (index) => {
+        var _a;
+        if (index < 0 || !storySegments[index]) {
+            return;
+        }
+        const segment = storySegments[index];
+        const layerOverrides = (_a = segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride;
+        if (!Array.isArray(layerOverrides)) {
+            return;
+        }
+        // Apply all layer overrides for this segment
+        layerOverrides.forEach(override => {
+            const { color, opacity, symbologyState, targetLayer: targetLayerId, visible, } = override;
+            if (!targetLayerId) {
+                return;
+            }
+            overrideLayerEntriesRef.current.push({
+                layerId: targetLayerId,
+                action: 'restore',
+            });
+            const targetLayer = model.getLayer(targetLayerId);
+            if (targetLayer === null || targetLayer === void 0 ? void 0 : targetLayer.parameters) {
+                if (symbologyState !== undefined) {
+                    targetLayer.parameters.symbologyState = symbologyState;
+                }
+                if (color !== undefined) {
+                    targetLayer.parameters.color = color;
+                }
+                if (opacity !== undefined) {
+                    targetLayer.parameters.opacity = opacity;
+                }
+                if (visible !== undefined) {
+                    targetLayer.visible = visible;
+                }
+                // Heatmaps are actually a different layer, not just symbology
+                // so they need special handling
+                if ((symbologyState === null || symbologyState === void 0 ? void 0 : symbologyState.renderType) === 'Heatmap') {
+                    targetLayer.type = 'HeatmapLayer';
+                    if (addLayer) {
+                        const newId = UUID.uuid4();
+                        addLayer(newId, targetLayer, 100);
+                        overrideLayerEntriesRef.current.push({
+                            layerId: newId,
+                            action: 'remove',
+                        });
+                    }
+                }
+                else {
+                    model.triggerLayerUpdate(targetLayerId, targetLayer);
+                }
+            }
+        });
+    };
     const handlePrev = useCallback(() => {
-        if (currentIndexDisplayed > 0) {
+        if (hasPrev) {
             setIndex(currentIndexDisplayed - 1);
         }
     }, [currentIndexDisplayed, setIndex]);
     const handleNext = useCallback(() => {
-        if (currentIndexDisplayed < storySegments.length - 1) {
+        if (hasNext) {
             setIndex(currentIndexDisplayed + 1);
         }
     }, [currentIndexDisplayed, storySegments.length, setIndex]);
-    // Expose methods via ref for parent component to use
-    useImperativeHandle(ref, () => ({
-        handlePrev,
-        handleNext,
-        canNavigate: isSpecta,
-    }), [handlePrev, handleNext, storyData, isSpecta]);
     if (!storyData || ((_c = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _c === void 0 ? void 0 : _c.length) === 0) {
         return (React.createElement("div", { style: { padding: '1rem' } },
             React.createElement("p", null, "No Segments available. Add one using the Add Layer menu.")));
     }
-    const navProps = {
+    const storyNavBarProps = {
         onPrev: handlePrev,
         onNext: handleNext,
-        hasPrev: currentIndexDisplayed > 0,
-        hasNext: currentIndexDisplayed < storySegments.length - 1,
+        hasPrev,
+        hasNext,
     };
+    // Expose methods via ref for parent component to use
+    useImperativeHandle(ref, () => ({
+        handlePrev,
+        handleNext,
+        canNavigate: isSpecta,
+    }), [handlePrev, handleNext, storyData, isSpecta]);
     const hasImage = !!(((_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _d === void 0 ? void 0 : _d.image) && imageLoaded);
     const storyType = (_e = storyData.storyType) !== null && _e !== void 0 ? _e : 'guided';
     const navPlacement = getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile);
-    const navSlot = navPlacement !== null ? (React.createElement(StoryNavBar, Object.assign({ placement: navPlacement }, navProps))) : null;
+    const navSlot = navPlacement !== null ? (React.createElement(StoryNavBar, Object.assign({ placement: navPlacement }, storyNavBarProps))) : null;
     // Get transition time from current segment, default to 0.3s
     const transitionTime = (_g = (_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _f === void 0 ? void 0 : _f.time) !== null && _g !== void 0 ? _g : 0.3;
     return (React.createElement("div", { ref: panelRef, className: cn('jgis-story-viewer-panel', className), id: "jgis-story-segment-panel" },

package/lib/shared/hooks/useLatest.d.ts

@@ -0,0 +1 @@
+export declare function useLatest<T>(value: T): React.MutableRefObject<T>;

package/lib/shared/hooks/useLatest.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function useLatest(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}

package/lib/types.d.ts

@@ -27,3 +27,4 @@ declare global {
 }
 declare const classificationModes: readonly ["quantile", "equal interval", "jenks", "pretty", "logarithmic", "continuous"];
 export type ClassificationMode = (typeof classificationModes)[number];
+export declare const SYMBOLOGY_VALID_LAYER_TYPES: string[];

package/lib/types.js

@@ -6,4 +6,9 @@ const classificationModes = [
     'logarithmic',
     'continuous',
 ];
-export {};
+export const SYMBOLOGY_VALID_LAYER_TYPES = [
+    'VectorLayer',
+    'VectorTileLayer',
+    'WebGlLayer',
+    'HeatmapLayer',
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.12.2",
+  "version": "0.13.1",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.12.2",
+    "@jupytergis/schema": "^0.13.1",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",

package/style/base.css

@@ -68,6 +68,14 @@
   flex-direction: column;
 }
 
+.jGIS-symbology-override-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 1rem;
+  border-bottom: solid 1px var(--jp-border-color0);
+}
+
 .jp-gis-text-label {
   margin: 0;
   padding: 0;

package/style/storyPanel.css

@@ -169,16 +169,16 @@
   overflow: auto;
   background: linear-gradient(
     to left,
-    var(--jgis-specta-bg-color, --jp-layout-color0) 49%,
+    var(--jgis-specta-bg-color, var(--jp-layout-color0)) 49%,
     color-mix(
         in srgb,
-        var(--jgis-specta-bg-color, --jp-layout-color0) 60%,
+        var(--jgis-specta-bg-color, var(--jp-layout-color0)) 60%,
         transparent
       )
       65%,
     color-mix(
         in srgb,
-        var(--jgis-specta-bg-color, --jp-layout-color0) 50%,
+        var(--jgis-specta-bg-color, var(--jp-layout-color0)) 50%,
         transparent
       )
       70%,
@@ -190,7 +190,7 @@
   width: 45%;
   font-size: var(--jp-ui-font-size3);
   padding-right: 1.7rem;
-  color: var(--jgis-specta-text-color, var(--jp-ui-inverse-font-color1));
+  color: var(--jgis-specta-text-color, var(--jp-ui-font-color1));
   overflow-y: auto;
   max-height: 100%;
 }