@jupytergis/base 0.10.1 → 0.11.1

package/lib/commands/BaseCommandIDs.d.ts

@@ -40,3 +40,4 @@ export declare const showFiltersTab = "jupytergis:showFiltersTab";
 export declare const showObjectPropertiesTab = "jupytergis:showObjectPropertiesTab";
 export declare const showAnnotationsTab = "jupytergis:showAnnotationsTab";
 export declare const showIdentifyPanelTab = "jupytergis:showIdentifyPanelTab";
+export declare const addStorySegment = "jupytergis:addStorySegment";

package/lib/commands/BaseCommandIDs.js

@@ -55,3 +55,5 @@ export const showFiltersTab = 'jupytergis:showFiltersTab';
 export const showObjectPropertiesTab = 'jupytergis:showObjectPropertiesTab';
 export const showAnnotationsTab = 'jupytergis:showAnnotationsTab';
 export const showIdentifyPanelTab = 'jupytergis:showIdentifyPanelTab';
+// Story maps
+export const addStorySegment = 'jupytergis:addStorySegment';

package/lib/commands/index.js

@@ -818,6 +818,20 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             current.model.toggleMode('marking');
             commands.notifyCommandChanged(CommandIDs.addMarker);
         } }, icons.get(CommandIDs.addMarker)));
+    commands.addCommand(CommandIDs.addStorySegment, Object.assign({ label: trans.__('Add Story Segment'), isEnabled: () => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return false;
+            }
+            return (current.model.sharedModel.editable &&
+                !current.model.jgisSettings.storyMapsDisabled);
+        }, execute: args => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            current.model.addStorySegment();
+        } }, icons.get(CommandIDs.addStorySegment)));
     loadKeybindings(commands, keybindings);
 }
 var Private;

package/lib/constants.js

@@ -35,6 +35,7 @@ const iconObject = {
     [CommandIDs.identify]: { icon: infoIcon },
     [CommandIDs.temporalController]: { icon: clockIcon },
     [CommandIDs.addMarker]: { icon: markerIcon },
+    [CommandIDs.addStorySegment]: { iconClass: 'fa fa-link' },
 };
 /**
  * The registered icons

package/lib/dialogs/symbology/vector_layer/types/Categorized.js

@@ -90,7 +90,7 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
         setStopRows(valueColorPairs);
     };
     const handleOk = () => {
-        var _a, _b, _c;
+        var _a;
         if (!layer.parameters) {
             return;
         }
@@ -122,8 +122,6 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
             renderType: 'Categorized',
             value: selectedAttributeRef.current,
             colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
-            nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades,
-            mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
             symbologyTab,
             reverse: reverseRamp,
         };
@@ -149,8 +147,6 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
             // Reset color classification options
             if (layer.parameters.symbologyState) {
                 layer.parameters.symbologyState.colorRamp = undefined;
-                layer.parameters.symbologyState.nClasses = undefined;
-                layer.parameters.symbologyState.mode = undefined;
             }
         }
         if (method === 'radius') {

package/lib/formbuilder/formselectors.js

@@ -1,4 +1,4 @@
-import { HeatmapLayerPropertiesForm, HillshadeLayerPropertiesForm, LayerPropertiesForm, VectorLayerPropertiesForm, WebGlLayerPropertiesForm, } from './objectform/layer';
+import { HeatmapLayerPropertiesForm, HillshadeLayerPropertiesForm, StorySegmentLayerPropertiesForm, LayerPropertiesForm, VectorLayerPropertiesForm, WebGlLayerPropertiesForm, } from './objectform/layer';
 import { GeoJSONSourcePropertiesForm, GeoTiffSourcePropertiesForm, PathBasedSourcePropertiesForm, TileSourcePropertiesForm, SourcePropertiesForm, } from './objectform/source';
 export function getLayerTypeForm(layerType) {
     let LayerForm = LayerPropertiesForm;
@@ -15,6 +15,10 @@ export function getLayerTypeForm(layerType) {
             break;
         case 'HeatmapLayer':
             LayerForm = HeatmapLayerPropertiesForm;
+            break;
+        case 'StorySegmentLayer':
+            LayerForm = StorySegmentLayerPropertiesForm;
+            break;
         // ADD MORE FORM TYPES HERE
     }
     return LayerForm;

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

@@ -0,0 +1,8 @@
+import { IDict } from '@jupytergis/schema';
+import { BaseForm } from './baseform';
+/**
+ * The form to modify a hillshade layer.
+ */
+export declare class StoryEditorPropertiesForm extends BaseForm {
+    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+}

package/lib/formbuilder/objectform/StoryEditorForm.js

@@ -0,0 +1,10 @@
+import { BaseForm } from './baseform';
+/**
+ * The form to modify a hillshade layer.
+ */
+export class StoryEditorPropertiesForm extends BaseForm {
+    processSchema(data, schema, uiSchema) {
+        super.processSchema(data, schema, uiSchema);
+        this.removeFormEntry('storySegments', data, schema, uiSchema);
+    }
+}

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

@@ -0,0 +1,8 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStorySegmentResetProps {
+    model?: IJupyterGISModel;
+    layerId?: string;
+}
+declare function StorySegmentReset({ model, layerId }: IStorySegmentResetProps): React.JSX.Element;
+export default StorySegmentReset;

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

@@ -0,0 +1,24 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+import React from 'react';
+import { targetWithCenterIcon } from "../../../icons";
+import { Button } from "../../../shared/components/Button";
+function StorySegmentReset({ model, layerId }) {
+    const handleSetStorySegmentToCurrentView = () => {
+        if (!model || !layerId) {
+            return;
+        }
+        const layer = model.getLayer(layerId);
+        if (!layer) {
+            return;
+        }
+        const { zoom, extent } = model.getOptions();
+        const updatedLayer = Object.assign(Object.assign({}, layer), { parameters: Object.assign(Object.assign({}, layer.parameters), { zoom,
+                extent }) });
+        model.sharedModel.updateLayer(layerId, updatedLayer);
+    };
+    return (React.createElement("div", null,
+        React.createElement(Button, { title: "Set story segment to current viewport", onClick: handleSetStorySegmentToCurrentView },
+            React.createElement(LabIcon.resolveReact, { icon: targetWithCenterIcon, className: "jp-gis-layerIcon", tag: "span" }),
+            "Set Story Segment Extent")));
+}
+export default StorySegmentReset;

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

@@ -3,3 +3,4 @@ export * from './hillshadeLayerForm';
 export * from './layerform';
 export * from './vectorlayerform';
 export * from './webGlLayerForm';
+export * from './storySegmentLayerForm';

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

@@ -3,3 +3,4 @@ export * from './hillshadeLayerForm';
 export * from './layerform';
 export * from './vectorlayerform';
 export * from './webGlLayerForm';
+export * from './storySegmentLayerForm';

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

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

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { LayerPropertiesForm } from './layerform';
+import StorySegmentReset from '../components/StorySegmentReset';
+export class StorySegmentLayerPropertiesForm extends LayerPropertiesForm {
+    processSchema(data, schema, uiSchema) {
+        super.processSchema(data, schema, uiSchema);
+        if (!this.props.model.selected) {
+            return;
+        }
+        let layerId = undefined;
+        const selectedKeys = Object.keys(this.props.model.selected);
+        // Find the first selected story segment
+        // ! TODO we still need to handle selections better, like there should at least be a getFirstSelected
+        for (const key of selectedKeys) {
+            const layer = this.props.model.getLayer(key);
+            if (layer && layer.type === 'StorySegmentLayer') {
+                layerId = key;
+                break;
+            }
+        }
+        uiSchema['extent'] = {
+            'ui:field': (props) => React.createElement(StorySegmentReset, Object.assign(Object.assign({}, props), { model: this.props.model, layerId })),
+        };
+        uiSchema['content'] = Object.assign(Object.assign({}, uiSchema['content']), { markdown: {
+                'ui:widget': 'textarea',
+                'ui:options': {
+                    rows: 10,
+                },
+            } });
+        this.removeFormEntry('zoom', data, schema, uiSchema);
+    }
+}

package/lib/mainview/mainView.js

@@ -18,6 +18,7 @@ import { Collection, Map as OlMap, View, getUid, } from 'ol';
 import Feature from 'ol/Feature';
 import { FullScreen, ScaleLine } from 'ol/control';
 import { singleClick } from 'ol/events/condition';
+import { getCenter } from 'ol/extent';
 import { GeoJSON, MVT } from 'ol/format';
 import { Point } from 'ol/geom';
 import { DragAndDrop, Select } from 'ol/interaction';
@@ -997,7 +998,8 @@ export class MainView extends React.Component {
         let layerParameters;
         let sourceId;
         let source;
-        if (layer.type !== 'StacLayer') {
+        // Sourceless layers
+        if (!['StacLayer', 'StorySegmentLayer'].includes(layer.type)) {
             sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
             if (!sourceId) {
                 return;
@@ -1099,6 +1101,10 @@ export class MainView extends React.Component {
                 this.setState(old => (Object.assign(Object.assign({}, old), { metadata: layerParameters.data.properties })));
                 break;
             }
+            case 'StorySegmentLayer': {
+                // Special layer not for this
+                return;
+            }
         }
         // OpenLayers doesn't have name/id field so add it
         newMapLayer.set('id', id);
@@ -1164,7 +1170,6 @@ export class MainView extends React.Component {
         }
         catch (error) {
             if (this.state.loadingErrors.find(item => item.id === id && item.error === error.message)) {
-                this._loadingLayers.delete(id);
                 return;
             }
             await showErrorMessage(`Error Adding ${layer.name}`, `Failed to add ${layer.name}: ${error.message || 'invalid file path'}`);
@@ -1174,7 +1179,10 @@ export class MainView extends React.Component {
                 error: error.message || 'invalid file path',
                 index,
             });
+        }
+        finally {
             this._loadingLayers.delete(id);
+            this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: false })));
         }
     }
     /**
@@ -1185,7 +1193,7 @@ export class MainView extends React.Component {
      */
     async updateLayer(id, layer, mapLayer, oldLayer) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        mapLayer.setVisible(layer.visible);
+        layer.type !== 'StorySegmentLayer' && mapLayer.setVisible(layer.visible);
         switch (layer.type) {
             case 'RasterLayer': {
                 mapLayer.setOpacity(((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.opacity) || 1);
@@ -1545,8 +1553,9 @@ export class MainView extends React.Component {
             }
         });
     }
+    // TODO this and flyToPosition need a rework
     _onZoomToPosition(_, id) {
-        var _a;
+        var _a, _b;
         // Check if the id is an annotation
         const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(id);
         if (annotation) {
@@ -1557,6 +1566,18 @@ export class MainView extends React.Component {
         let extent;
         const layer = this.getLayer(id);
         const source = layer === null || layer === void 0 ? void 0 : layer.getSource();
+        // TODO: Story segment layers don't have an associated OL layer
+        // This could be better
+        if (!layer) {
+            const jgisLayer = this._model.getLayer(id);
+            const layerParams = jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.parameters;
+            const coords = getCenter(layerParams.extent);
+            // TODO: Should pass args through signal??
+            // const { story } = this._model.getSelectedStory();
+            this._flyToPosition({ x: coords[0], y: coords[1] }, layerParams.zoom, ((_b = layerParams.transition.time) !== null && _b !== void 0 ? _b : 1) * 1000, // seconds -> ms
+            layerParams.transition.type);
+            return;
+        }
         if (source instanceof VectorSource) {
             extent = source.getExtent();
         }
@@ -1596,10 +1617,43 @@ export class MainView extends React.Component {
             });
         }
     }
-    _flyToPosition(center, zoom, duration = 1000) {
+    _flyToPosition(center, zoom, duration = 1000, transitionType) {
         const view = this._Map.getView();
-        view.animate({ zoom, duration });
-        view.animate({ center: [center.x, center.y], duration });
+        // Cancel any in-progress animations before starting new ones
+        view.cancelAnimations();
+        const targetCenter = [center.x, center.y];
+        if (transitionType === 'linear') {
+            // Linear: direct zoom
+            view.animate({
+                center: targetCenter,
+                zoom: zoom,
+                duration,
+            });
+            return;
+        }
+        if (transitionType === 'smooth') {
+            // Smooth: zoom out, center, and zoom in
+            // Centering takes full duration, zoom out completes halfway, zoom in starts halfway
+            // 3 shows most of the map
+            const zoomOutLevel = 3;
+            // Start centering (full duration) and zoom out (50% duration) simultaneously
+            view.animate({
+                center: targetCenter,
+                duration: duration,
+            });
+            // Chain zoom out -> zoom in (zoom in starts when zoom out completes)
+            view.animate({
+                zoom: zoomOutLevel,
+                duration: duration * 0.5,
+            }, {
+                zoom: zoom,
+                duration: duration * 0.5,
+            });
+            return;
+        }
+        // Immediate move
+        view.setCenter(targetCenter);
+        view.setZoom(zoom);
     }
     _onPointerMove(e) {
         const pixel = this._Map.getEventPixel(e);

package/lib/panelview/components/layers.d.ts

@@ -1,4 +1,4 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
+import { IJGISLayerTree, IJupyterGISModel } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import React from 'react';
@@ -6,6 +6,7 @@ interface IBodyProps {
     model: IJupyterGISModel;
     commands: CommandRegistry;
     state: IStateDB;
+    layerTree: IJGISLayerTree;
 }
 export declare const LayersBodyComponent: React.FC<IBodyProps>;
 export {};

package/lib/panelview/components/layers.js

@@ -3,7 +3,7 @@ import { Button, LabIcon, caretDownIcon, caretRightIcon, } from '@jupyterlab/ui-
 import React, { useEffect, useState, } from 'react';
 import { CommandIDs, icons } from "../../constants";
 import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
-import { nonVisibilityIcon, visibilityIcon } from "../../icons";
+import { nonVisibilityIcon, targetWithCenterIcon, visibilityIcon, } from "../../icons";
 import { LegendItem } from './legendItem';
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
 const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
@@ -13,9 +13,10 @@ const LAYER_CLASS = 'jp-gis-layer';
 const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
 const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
 const LAYER_TEXT_CLASS = 'jp-gis-layerText data-jgis-keybinding';
+const LAYER_SLIDE_NUMBER_CLASS = 'jp-gis-layerSlideNumber';
 export const LayersBodyComponent = props => {
     const model = props.model;
-    const [layerTree, setLayerTree] = useState((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
+    const [layerTree, setLayerTree] = useState(props.layerTree || []);
     const notifyCommands = () => {
         // Notify commands that need updating
         props.commands.notifyCommandChanged(CommandIDs.identify);
@@ -117,25 +118,13 @@ export const LayersBodyComponent = props => {
     const onItemClick = ({ type, item, event }) => {
         onSelect({ type, item, event });
     };
-    /**
-     * Listen to the layers and layer tree changes.
-     */
+    // Update layerTree when prop changes
     useEffect(() => {
-        const updateLayers = () => {
-            setLayerTree((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
-        };
-        model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.connect(updateLayers);
-        model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.connect(updateLayers);
-        updateLayers();
-        return () => {
-            model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.disconnect(updateLayers);
-            model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.disconnect(updateLayers);
-        };
-    }, [model]);
-    return (React.createElement("div", { id: "jp-gis-layer-tree", onDrop: _onDrop, onDragOver: _onDragOver }, layerTree
-        .slice()
-        .reverse()
-        .map(layer => typeof layer === 'string' ? (React.createElement(LayerComponent, { key: layer, gisModel: model, layerId: layer, onClick: onItemClick })) : (React.createElement(LayerGroupComponent, { key: layer.name, gisModel: model, group: layer, onClick: onItemClick, state: props.state })))));
+        if (props.layerTree) {
+            setLayerTree(props.layerTree);
+        }
+    }, [props.layerTree]);
+    return (React.createElement("div", { id: "jp-gis-layer-tree", onDrop: _onDrop, onDragOver: _onDragOver }, layerTree.map(layer => typeof layer === 'string' ? (React.createElement(LayerComponent, { key: layer, gisModel: model, layerId: layer, onClick: onItemClick })) : (React.createElement(LayerGroupComponent, { key: layer.name, gisModel: model, group: layer, onClick: onItemClick, state: props.state })))));
 };
 /**
  * The component to handle group of layers.
@@ -350,6 +339,23 @@ const LayerComponent = props => {
             handleRenameCancel();
         }
     };
+    /**
+     * Set layer to current map view.
+     */
+    const moveToExtent = () => {
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.centerOnPosition(layerId);
+    };
+    const getSlideNumber = () => {
+        if (!gisModel) {
+            return;
+        }
+        const { story } = gisModel.getSelectedStory();
+        if (!(story === null || story === void 0 ? void 0 : story.storySegments)) {
+            return;
+        }
+        const slideNum = story.storySegments.indexOf(layerId) + 1;
+        return slideNum;
+    };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId, style: { display: 'flex', flexDirection: 'column' } },
         React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection, style: { display: 'flex' } },
             hasSupportedSymbology && (React.createElement(Button, { minimal: true, onClick: e => {
@@ -357,8 +363,8 @@ const LayerComponent = props => {
                     setExpanded(v => !v);
                 }, title: expanded ? 'Hide legend' : 'Show legend' },
                 React.createElement(LabIcon.resolveReact, { icon: expanded ? caretDownIcon : caretRightIcon, tag: "span" }))),
-            React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
-                React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" })),
+            layer.type === 'StorySegmentLayer' ? (React.createElement("span", { className: LAYER_SLIDE_NUMBER_CLASS, title: "Slide number" }, getSlideNumber())) : (React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
+                React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" }))),
             icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
             isEditing ? (React.createElement("input", { type: "text", value: editValue, onChange: e => setEditValue(e.target.value), onKeyDown: handleRenameKeyDown, onBlur: handleRenameSave, className: LAYER_TEXT_CLASS, style: {
                     flex: 1,
@@ -367,7 +373,9 @@ const LayerComponent = props => {
                     padding: '2px 4px',
                     fontSize: 'inherit',
                     fontFamily: 'inherit',
-                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name))),
+                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name)),
+            React.createElement(Button, { title: 'Move map to the extent of the layer', onClick: moveToExtent, minimal: true },
+                React.createElement(LabIcon.resolveReact, { icon: targetWithCenterIcon, className: LAYER_ICON_CLASS, tag: "span" }))),
         expanded && gisModel && hasSupportedSymbology && (React.createElement("div", { style: { marginTop: 6, width: '100%' } },
             React.createElement(LegendItem, { layerId: layerId, model: gisModel })))));
 };

package/lib/panelview/components/story-maps/PreviewModeSwitch.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface IPreviewModeSwitchProps {
+    checked: boolean;
+    onCheckedChange: () => void;
+}
+export declare function PreviewModeSwitch({ checked, onCheckedChange, }: IPreviewModeSwitchProps): React.JSX.Element;
+export {};

package/lib/panelview/components/story-maps/PreviewModeSwitch.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Switch } from "../../../shared/components/Switch";
+export function PreviewModeSwitch({ checked, onCheckedChange, }) {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            padding: '1rem 1rem 1rem 0',
+        } },
+        React.createElement("label", { htmlFor: "preview-mode-switch", style: { fontSize: '0.875rem' } }, "Preview Mode"),
+        React.createElement(Switch, { id: "preview-mode-switch", checked: checked, onCheckedChange: onCheckedChange })));
+}

package/lib/panelview/components/story-maps/StoryEditorPanel.d.ts

@@ -0,0 +1,7 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStoryPanelProps {
+    model: IJupyterGISModel;
+}
+export declare function StoryEditorPanel({ model }: IStoryPanelProps): React.JSX.Element;
+export default StoryEditorPanel;

package/lib/panelview/components/story-maps/StoryEditorPanel.js

@@ -0,0 +1,29 @@
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import jgisSchema from '@jupytergis/schema/lib/schema/project/jgis.json';
+import React, { useMemo } from 'react';
+import { StoryEditorPropertiesForm } from "../../../formbuilder/objectform/StoryEditorForm";
+import { Button } from "../../../shared/components/Button";
+import { deepCopy } from "../../../tools";
+const storyMapSchema = deepCopy(jgisSchema.definitions.jGISStoryMap);
+const AddStorySegmentButton = ({ model }) => (React.createElement(Button, { onClick: () => model.addStorySegment() },
+    React.createElement(FontAwesomeIcon, { icon: faLink }),
+    " Add Story Segment"));
+export function StoryEditorPanel({ model }) {
+    const { storySegmentId, story } = useMemo(() => {
+        return model.getSelectedStory();
+    }, [model, model.sharedModel.stories]);
+    const syncStoryData = (properties) => {
+        model.sharedModel.updateStoryMap(storySegmentId, properties);
+    };
+    if (!story) {
+        return (React.createElement("div", null,
+            React.createElement("p", null, "No Story Map available."),
+            React.createElement("p", null, "Add a Story Segment from the Add Layer menu. A segment captures the current map view. You can add markdown text and an image to each segment to tell your story."),
+            React.createElement(AddStorySegmentButton, { model: model })));
+    }
+    return (React.createElement("div", { style: { padding: '0 0.5rem 0.5rem 0.5rem' } },
+        React.createElement(StoryEditorPropertiesForm, { formContext: "update", sourceData: story, model: model, schema: storyMapSchema, syncData: syncStoryData, filePath: model.filePath }),
+        React.createElement(AddStorySegmentButton, { model: model })));
+}
+export default StoryEditorPanel;

package/lib/panelview/components/story-maps/StoryNavBar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IStoryNavBarProps {
+    onPrev: () => void;
+    onNext: () => void;
+    hasPrev: boolean;
+    hasNext: boolean;
+}
+declare function StoryNavBar({ onPrev, onNext, hasPrev, hasNext }: IStoryNavBarProps): React.JSX.Element;
+export default StoryNavBar;

package/lib/panelview/components/story-maps/StoryNavBar.js

@@ -0,0 +1,11 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import React from 'react';
+import { Button } from "../../../shared/components/Button";
+function StoryNavBar({ onPrev, onNext, hasPrev, hasNext }) {
+    return (React.createElement("div", { style: { display: 'flex', gap: '8px', justifyContent: 'center' } },
+        React.createElement(Button, { onClick: onPrev, disabled: !hasPrev, "aria-label": "Previous slide" },
+            React.createElement(ChevronLeft, null)),
+        React.createElement(Button, { onClick: onNext, disabled: !hasNext, "aria-label": "Next slide" },
+            React.createElement(ChevronRight, null))));
+}
+export default StoryNavBar;

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

@@ -0,0 +1,7 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IStoryViewerPanelProps {
+    model: IJupyterGISModel;
+}
+declare function StoryViewerPanel({ model }: IStoryViewerPanelProps): React.JSX.Element;
+export default StoryViewerPanel;