@jupytergis/base 0.13.2 → 0.14.0

package/lib/panelview/story-maps/hooks/useStoryMap.js

@@ -0,0 +1,252 @@
+import { UUID } from '@lumino/coreutils';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+/** Inline style for specta presentation (bg and text color from story). */
+export function getSpectaPresentationStyle(story) {
+    const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
+    const textColor = story === null || story === void 0 ? void 0 : story.presentationTextColor;
+    const style = {};
+    if (bgColor) {
+        style['--jgis-specta-bg-color'] = bgColor;
+        style.backgroundColor = bgColor;
+    }
+    if (textColor) {
+        style['--jgis-specta-text-color'] = textColor;
+        style.color = textColor;
+    }
+    return style;
+}
+export function useStoryMap({ model, overrideLayerEntriesRef, removeLayer, addLayer, panelRef, isSpecta, }) {
+    const [currentIndex, setCurrentIndex] = useState(() => { var _a; return (_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0; });
+    const [storyData, setStoryData] = useState(() => { var _a; return (_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null; });
+    const storySegments = useMemo(() => {
+        if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments)) {
+            return [];
+        }
+        return storyData.storySegments
+            .map(segmentId => model.getLayer(segmentId))
+            .filter((layer) => layer !== undefined);
+    }, [storyData, model]);
+    const segmentCount = storySegments.length;
+    const storySegmentIds = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments;
+    const currentStorySegment = useMemo(() => storySegments[currentIndex], [storySegments, currentIndex]);
+    const activeSlide = useMemo(() => 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 currentStorySegmentId = useMemo(() => storySegmentIds === null || storySegmentIds === void 0 ? void 0 : storySegmentIds[currentIndex], [storySegmentIds, currentIndex]);
+    const hasPrev = currentIndex > 0;
+    const hasNext = currentIndex < segmentCount - 1;
+    const clearOverrideLayers = useCallback(() => {
+        const entries = overrideLayerEntriesRef.current;
+        if (!entries) {
+            return;
+        }
+        entries.forEach(({ layerId, action }) => {
+            if (action === 'remove') {
+                removeLayer === null || removeLayer === void 0 ? void 0 : removeLayer(layerId);
+            }
+            else {
+                const layerOrSource = model.getLayerOrSource(layerId);
+                if (layerOrSource) {
+                    model.triggerLayerUpdate(layerId, layerOrSource);
+                }
+            }
+        });
+        entries.length = 0;
+    }, [model, overrideLayerEntriesRef, removeLayer]);
+    const zoomToCurrentLayer = useCallback(() => {
+        if (currentStorySegmentId) {
+            model.centerOnPosition(currentStorySegmentId);
+        }
+    }, [model, currentStorySegmentId]);
+    const setIndex = useCallback((index) => {
+        model.setCurrentSegmentIndex(index);
+    }, [model]);
+    const handlePrev = useCallback(() => {
+        if (hasPrev) {
+            model.setCurrentSegmentIndex(currentIndex - 1);
+        }
+    }, [model, currentIndex, hasPrev]);
+    const handleNext = useCallback(() => {
+        if (hasNext) {
+            model.setCurrentSegmentIndex(currentIndex + 1);
+        }
+    }, [model, currentIndex, hasNext]);
+    const setSelectedLayerByIndex = useCallback((index) => {
+        var _a;
+        const storySegmentId = (_a = storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) === null || _a === void 0 ? void 0 : _a[index];
+        if (storySegmentId) {
+            model.selected = {
+                [storySegmentId]: {
+                    type: 'layer',
+                },
+            };
+        }
+    }, [storyData, model]);
+    const overrideSymbology = useCallback((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;
+        }
+        layerOverrides.forEach(override => {
+            var _a, _b, _c, _d;
+            const { color, opacity, sourceProperties, symbologyState, targetLayer: targetLayerId, visible, } = override;
+            if (!targetLayerId) {
+                return;
+            }
+            (_a = overrideLayerEntriesRef.current) === null || _a === void 0 ? void 0 : _a.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;
+                }
+                if (sourceProperties !== undefined &&
+                    Object.keys(sourceProperties).length > 0) {
+                    const sourceId = (_b = targetLayer.parameters) === null || _b === void 0 ? void 0 : _b.source;
+                    if (sourceId) {
+                        const source = model.getSource(sourceId);
+                        if (!source) {
+                            return;
+                        }
+                        if (source === null || source === void 0 ? void 0 : source.parameters) {
+                            source.parameters = Object.assign(Object.assign({}, source.parameters), sourceProperties);
+                        }
+                        (_c = overrideLayerEntriesRef.current) === null || _c === void 0 ? void 0 : _c.push({
+                            layerId: sourceId,
+                            action: 'restore',
+                        });
+                        model.triggerLayerUpdate(sourceId, source);
+                    }
+                }
+                if ((symbologyState === null || symbologyState === void 0 ? void 0 : symbologyState.renderType) === 'Heatmap') {
+                    targetLayer.type = 'HeatmapLayer';
+                    if (addLayer) {
+                        const newId = UUID.uuid4();
+                        addLayer(newId, targetLayer, 100);
+                        (_d = overrideLayerEntriesRef.current) === null || _d === void 0 ? void 0 : _d.push({
+                            layerId: newId,
+                            action: 'remove',
+                        });
+                    }
+                }
+                else {
+                    model.triggerLayerUpdate(targetLayerId, targetLayer);
+                }
+            }
+        });
+    }, [addLayer, model, storySegments, overrideLayerEntriesRef]);
+    useEffect(() => {
+        const onIndexChanged = (_, index) => {
+            setCurrentIndex(Math.max(0, index !== null && index !== void 0 ? index : 0));
+        };
+        model.currentSegmentIndexChanged.connect(onIndexChanged);
+        return () => {
+            model.currentSegmentIndexChanged.disconnect(onIndexChanged);
+        };
+    }, [model]);
+    useEffect(() => {
+        const updateStory = () => {
+            var _a, _b;
+            clearOverrideLayers();
+            setStoryData((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
+            setCurrentIndex((_b = model.getCurrentSegmentIndex()) !== null && _b !== void 0 ? _b : 0);
+        };
+        updateStory();
+        model.sharedModel.storyMapsChanged.connect(updateStory);
+        return () => {
+            model.sharedModel.storyMapsChanged.disconnect(updateStory);
+        };
+    }, [model, clearOverrideLayers]);
+    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;
+                        if (targetLayerId) {
+                            const targetLayer = model.getLayer(targetLayerId);
+                            targetLayer &&
+                                model.triggerLayerUpdate(targetLayerId, targetLayer);
+                        }
+                    });
+                }
+            });
+        };
+    }, []);
+    useEffect(() => {
+        if (currentStorySegmentId) {
+            zoomToCurrentLayer();
+        }
+    }, [currentStorySegmentId, zoomToCurrentLayer]);
+    // 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) || currentIndex < 0) {
+            return;
+        }
+        clearOverrideLayers();
+        setSelectedLayerByIndex(currentIndex);
+        overrideSymbology(currentIndex);
+    }, [
+        storyData,
+        currentIndex,
+        setSelectedLayerByIndex,
+        clearOverrideLayers,
+        overrideSymbology,
+    ]);
+    // Set selected layer on initial render and when story data changes
+    useEffect(() => {
+        if ((storyData === null || storyData === void 0 ? void 0 : storyData.storySegments) && currentIndex >= 0) {
+            setSelectedLayerByIndex(currentIndex);
+        }
+    }, [storyData, currentIndex, setSelectedLayerByIndex]);
+    // Apply story presentation colors (specta) to panel root
+    useEffect(() => {
+        if (!isSpecta || !(panelRef === null || panelRef === void 0 ? void 0 : panelRef.current)) {
+            return;
+        }
+        const container = panelRef.current;
+        const style = getSpectaPresentationStyle(storyData);
+        Object.entries(style).forEach(([key, value]) => {
+            if (value !== null) {
+                container.style.setProperty(key, String(value));
+            }
+        });
+    }, [storyData, isSpecta, panelRef]);
+    return {
+        storyData,
+        storySegments,
+        currentIndex,
+        clearOverrideLayers,
+        setIndex,
+        handlePrev,
+        handleNext,
+        hasPrev,
+        hasNext,
+        setSelectedLayerByIndex,
+        currentStorySegment,
+        activeSlide,
+        layerName,
+        currentStorySegmentId,
+        zoomToCurrentLayer,
+    };
+}

package/lib/processing/index.d.ts

@@ -17,9 +17,9 @@ export type GdalFunctions = 'ogr2ogr' | 'gdal_rasterize' | 'gdalwarp' | 'gdal_tr
 /**
  * Generalized processing function for Buffer & Dissolve
  */
-export declare function processSelectedLayer(tracker: JupyterGISTracker, formSchemaRegistry: IJGISFormSchemaRegistry, processingType: ProcessingType, processingOptions: {
+export declare function processLayer(tracker: JupyterGISTracker, formSchemaRegistry: IJGISFormSchemaRegistry, processingType: ProcessingType, processingOptions: {
     sqlQueryFn: (layerName: string, param: any) => string;
     gdalFunction: GdalFunctions;
     options: (sqlQuery: string) => string[];
-}, app: JupyterFrontEnd): Promise<void>;
+}, app: JupyterFrontEnd, filePath?: string, processingInputs?: Record<string, any>): Promise<void>;
 export declare function executeSQLProcessing(model: IJupyterGISModel, geojsonString: string, gdalFunction: GdalFunctions, options: string[], layerNamePrefix: string, processingType: ProcessingType, embedOutputLayer: boolean, tracker: JupyterGISTracker, app: JupyterFrontEnd): Promise<void>;

package/lib/processing/index.js

@@ -52,48 +52,75 @@ export async function getLayerGeoJSON(layer, sources, model) {
 /**
  * Generalized processing function for Buffer & Dissolve
  */
-export async function processSelectedLayer(tracker, formSchemaRegistry, processingType, processingOptions, app) {
-    var _a, _b, _c;
-    const selected = getSingleSelectedLayer(tracker);
-    if (!selected || !tracker.currentWidget) {
+export async function processLayer(tracker, formSchemaRegistry, processingType, processingOptions, app, filePath, processingInputs) {
+    var _a, _b, _c, _d;
+    // Resolve widget
+    const widget = filePath
+        ? tracker.find(w => w.model.filePath === filePath)
+        : tracker.currentWidget;
+    if (!widget) {
+        return;
+    }
+    const model = widget.model;
+    const sources = (_a = model.sharedModel.sources) !== null && _a !== void 0 ? _a : {};
+    const layers = (_b = model.sharedModel.layers) !== null && _b !== void 0 ? _b : {};
+    // Resolve layer
+    let selected = null;
+    if (processingInputs === null || processingInputs === void 0 ? void 0 : processingInputs.inputLayer) {
+        selected = layers[processingInputs.inputLayer];
+    }
+    else {
+        selected = getSingleSelectedLayer(tracker);
+    }
+    if (!selected) {
         return;
     }
-    const model = tracker.currentWidget.model;
-    const sources = (_a = model === null || model === void 0 ? void 0 : model.sharedModel.sources) !== null && _a !== void 0 ? _a : {};
     const geojsonString = await getLayerGeoJSON(selected, sources, model);
     if (!geojsonString) {
         return;
     }
-    const schema = Object.assign({}, formSchemaRegistry.getSchemas().get(processingType));
-    const selectedLayerId = Object.keys(((_c = (_b = model === null || model === void 0 ? void 0 : model.sharedModel.awareness.getLocalState()) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value) || {})[0];
-    // Open ProcessingFormDialog
-    const formValues = await new Promise(resolve => {
-        const dialog = new ProcessingFormDialog({
-            title: processingType.charAt(0).toUpperCase() + processingType.slice(1),
-            schema,
-            model,
-            sourceData: {
-                inputLayer: selectedLayerId,
-                outputLayerName: selected.name,
-            },
-            formContext: 'create',
-            processingType,
-            syncData: (props) => {
-                resolve(props);
-                dialog.dispose();
-            },
-        });
-        dialog.launch();
-    });
-    if (!formValues) {
-        return;
+    // Resolve params
+    let processParam;
+    let embedOutputLayer = true;
+    let outputLayerName = selected.name;
+    if (processingInputs) {
+        processParam = processingInputs;
+        outputLayerName = `${processingType} Layer`;
     }
-    if (!processingList.includes(processingType)) {
-        console.error(`Unsupported processing type: ${processingType}`);
-        return;
+    else {
+        const schema = Object.assign({}, formSchemaRegistry.getSchemas().get(processingType));
+        const selectedLayerId = Object.keys(((_d = (_c = model.sharedModel.awareness.getLocalState()) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.value) || {})[0];
+        // Open ProcessingFormDialog
+        const formValues = await new Promise(resolve => {
+            const dialog = new ProcessingFormDialog({
+                title: processingType.charAt(0).toUpperCase() + processingType.slice(1),
+                schema,
+                model,
+                sourceData: {
+                    inputLayer: selectedLayerId,
+                    outputLayerName: selected.name,
+                },
+                formContext: 'create',
+                processingType,
+                syncData: (props) => {
+                    resolve(props);
+                    dialog.dispose();
+                },
+            });
+            dialog.launch();
+        });
+        if (!formValues) {
+            return;
+        }
+        if (!processingList.includes(processingType)) {
+            console.error(`Unsupported processing type: ${processingType}`);
+            return;
+        }
+        processParam = processingFormToParam(formValues, processingType);
+        embedOutputLayer = formValues.embedOutputLayer;
+        outputLayerName = formValues.outputLayerName;
     }
-    const processParam = processingFormToParam(formValues, processingType);
-    const embedOutputLayer = formValues.embedOutputLayer;
+    // GDAL pre-processing
     const fileBlob = new Blob([geojsonString], {
         type: 'application/geo+json',
     });
@@ -106,7 +133,7 @@ export async function processSelectedLayer(tracker, formSchemaRegistry, processi
     const layerName = dataset.info.layers[0].name;
     const sqlQuery = processingOptions.sqlQueryFn(layerName, processParam);
     const fullOptions = processingOptions.options(sqlQuery);
-    await executeSQLProcessing(model, geojsonString, processingOptions.gdalFunction, fullOptions, formValues.outputLayerName, processingType, embedOutputLayer, tracker, app);
+    await executeSQLProcessing(model, geojsonString, processingOptions.gdalFunction, fullOptions, outputLayerName, processingType, embedOutputLayer, tracker, app);
 }
 export async function executeSQLProcessing(model, geojsonString, gdalFunction, options, layerNamePrefix, processingType, embedOutputLayer, tracker, app) {
     var _a;

package/lib/processing/processingCommands.d.ts

@@ -3,4 +3,4 @@ import { JupyterFrontEnd } from '@jupyterlab/application';
 import { CommandRegistry } from '@lumino/commands';
 import { JupyterGISTracker } from '../types';
 export declare function replaceInSql(sql: string, keyToVal: IDict<string>, layerName: string): string;
-export declare function addProcessingCommands(app: JupyterFrontEnd, commands: CommandRegistry, tracker: JupyterGISTracker, trans: any, formSchemaRegistry: IJGISFormSchemaRegistry): void;
+export declare function addProcessingCommands(app: JupyterFrontEnd, commands: CommandRegistry, tracker: JupyterGISTracker, trans: any, formSchemaRegistry: IJGISFormSchemaRegistry, processingSchemas: Record<string, any>): void;

package/lib/processing/processingCommands.js

@@ -1,5 +1,5 @@
 import { ProcessingMerge, ProcessingLogicType, } from '@jupytergis/schema';
-import { selectedLayerIsOfType, processSelectedLayer } from './index';
+import { selectedLayerIsOfType, processLayer } from './index';
 export function replaceInSql(sql, keyToVal, layerName) {
     const replaceTemplateString = (args) => args.template.replace(RegExp(`{${args.variableName}}`, 'g'), args.value);
     let out = replaceTemplateString({
@@ -16,14 +16,34 @@ export function replaceInSql(sql, keyToVal, layerName) {
     }
     return out;
 }
-export function addProcessingCommands(app, commands, tracker, trans, formSchemaRegistry) {
+export function addProcessingCommands(app, commands, tracker, trans, formSchemaRegistry, processingSchemas) {
     for (const processingElement of ProcessingMerge) {
+        const schemaKey = Object.keys(processingSchemas).find(k => k.toLowerCase() === processingElement.name.toLowerCase());
+        if (!schemaKey) {
+            continue;
+        }
         if (processingElement.type === ProcessingLogicType.vector) {
-            commands.addCommand(processingElement.name, {
+            commands.addCommand(`jupytergis:${processingElement.name}`, {
                 label: trans.__(processingElement.label),
+                describedBy: {
+                    args: {
+                        type: 'object',
+                        properties: {
+                            filePath: {
+                                type: 'string',
+                                description: 'Path to the .jGIS file',
+                            },
+                            layerId: {
+                                type: 'string',
+                                description: 'Layer ID to process',
+                            },
+                            params: processingSchemas[schemaKey],
+                        },
+                    },
+                },
                 isEnabled: () => selectedLayerIsOfType(['VectorLayer'], tracker),
-                execute: async () => {
-                    await processSelectedLayer(tracker, formSchemaRegistry, processingElement.description, {
+                execute: async (args) => {
+                    await processLayer(tracker, formSchemaRegistry, processingElement.description, {
                         sqlQueryFn: (layerName, keyToVal) => replaceInSql(processingElement.operations.sql, keyToVal, layerName),
                         gdalFunction: processingElement.operations.gdalFunction,
                         options: (sqlQuery) => [
@@ -35,7 +55,7 @@ export function addProcessingCommands(app, commands, tracker, trans, formSchemaR
                             sqlQuery,
                             'output.geojson',
                         ],
-                    }, app);
+                    }, app, args === null || args === void 0 ? void 0 : args.filePath, args === null || args === void 0 ? void 0 : args.processingInputs);
                 },
             });
         }

package/lib/shared/components/Collapsible.d.ts

@@ -0,0 +1,6 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): React.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): React.JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): React.JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/lib/shared/components/Collapsible.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+import * as React from 'react';
+function Collapsible(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(CollapsiblePrimitive.Root, Object.assign({ "data-slot": "collapsible" }, props));
+}
+function CollapsibleTrigger(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(CollapsiblePrimitive.CollapsibleTrigger, Object.assign({ "data-slot": "collapsible-trigger" }, props)));
+}
+function CollapsibleContent(_a) {
+    var props = __rest(_a, []);
+    return (React.createElement(CollapsiblePrimitive.CollapsibleContent, Object.assign({ "data-slot": "collapsible-content" }, props)));
+}
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/lib/statusbar/SpectaPresentationProgressBar.d.ts

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

package/lib/statusbar/SpectaPresentationProgressBar.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef, useState } from 'react';
+function SpectaPresentationProgressBar({ model, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const segmentCount = (_c = (_b = (_a = model.getSelectedStory().story) === null || _a === void 0 ? void 0 : _a.storySegments) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+    const [currentIndex, setCurrentIndex] = useState(() => { var _a; return Math.max(0, (_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0); });
+    useEffect(() => {
+        const onIndexChanged = (_, index) => {
+            setCurrentIndex(Math.max(0, index !== null && index !== void 0 ? index : 0));
+        };
+        model.currentSegmentIndexChanged.connect(onIndexChanged);
+        return () => {
+            model.currentSegmentIndexChanged.disconnect(onIndexChanged);
+        };
+    }, [model]);
+    const safeCount = Math.max(0, segmentCount);
+    const clampedIndex = safeCount > 0 ? Math.min(currentIndex, safeCount - 1) : 0;
+    const prevIndexRef = useRef(clampedIndex);
+    const [direction, setDirection] = useState(null);
+    useEffect(() => {
+        const prev = prevIndexRef.current;
+        if (clampedIndex !== prev) {
+            setDirection(clampedIndex > prev ? 'next' : 'prev');
+            prevIndexRef.current = clampedIndex;
+        }
+    }, [clampedIndex]);
+    const { story } = model.getSelectedStory();
+    const segmentIds = (_d = story === null || story === void 0 ? void 0 : story.storySegments) !== null && _d !== void 0 ? _d : [];
+    const currentSegmentId = segmentIds[clampedIndex];
+    const currentSegment = currentSegmentId
+        ? model.getLayer(currentSegmentId)
+        : undefined;
+    const segmentParams = currentSegment === null || currentSegment === void 0 ? void 0 : currentSegment.parameters;
+    const transitionTime = (_f = (_e = segmentParams === null || segmentParams === void 0 ? void 0 : segmentParams.transition) === null || _e === void 0 ? void 0 : _e.time) !== null && _f !== void 0 ? _f : 0.3;
+    return (React.createElement("div", { className: "jgis-specta-progress", "data-direction": direction !== null && direction !== void 0 ? direction : undefined, style: {
+            '--jgis-specta-transition-duration': `${transitionTime}s`,
+        } },
+        React.createElement("div", { className: "jgis-specta-progress-bar" }, Array.from({ length: safeCount }, (_, i) => safeCount - 1 - i).map(segmentIndex => (React.createElement("div", { key: segmentIndex, className: "jgis-specta-bar-segment", "data-filled": segmentIndex <= clampedIndex ? '' : undefined, style: { '--segment-index': segmentIndex } },
+            React.createElement("button", { type: "button", className: "jgis-specta-progress-input", onClick: () => model.setCurrentSegmentIndex(segmentIndex), "aria-label": `Segment ${segmentIndex + 1} of ${safeCount}`, "aria-pressed": segmentIndex === clampedIndex })))))));
+}
+export default SpectaPresentationProgressBar;

package/lib/toolbar/widget.js

@@ -59,7 +59,7 @@ export class ToolbarWidget extends ReactiveToolbar {
             }
         };
         this._model = options.model;
-        this.addClass('jGIS-toolbar-widget');
+        this.node.classList.add('jGIS-toolbar-widget', 'data-jgis-keybinding');
         // Listen for settings changes
         this._model.settingsChanged.connect(this._onSettingsChanged, this);
         // Listen for options change because it's the dependable signal
@@ -144,7 +144,9 @@ export class ToolbarWidget extends ReactiveToolbar {
             });
             this.addItem('Toggle console', toggleConsoleButton);
             toggleConsoleButton.node.dataset.testid = 'toggle-console-button';
-            this.addItem('spacer', ReactiveToolbar.createSpacerItem());
+            const spacer = ReactiveToolbar.createSpacerItem();
+            spacer.node.tabIndex = -1;
+            this.addItem('spacer', spacer);
             // Users
             const iconRenderer = createUserIconRenderer(this._model);
             this.addItem('users', ReactWidget.create(React.createElement(UsersItem, { model: this._model, iconRenderer: iconRenderer })));

package/lib/tools.d.ts

@@ -135,4 +135,10 @@ export declare function getGeoJSONDataFromLayerSource(source: IJGISSource, model
  * code when using it.
  */
 export declare const objectEntries: <T extends Record<PropertyKey, unknown>>(obj: T) => Array<{ [K in keyof T]: [K, T[K]]; }[keyof T]>;
+/**
+ * Extract the layerOverride array index from an RJSF idSchema (e.g. from $id like "root_layerOverride_0_sourceProperties").
+ */
+export declare function extractLayerOverrideIndex(idSchema: {
+    $id?: string;
+}): number | undefined;
 export {};

package/lib/tools.js

@@ -815,3 +815,12 @@ export async function getGeoJSONDataFromLayerSource(source, model) {
  * code when using it.
  */
 export const objectEntries = Object.entries;
+/**
+ * Extract the layerOverride array index from an RJSF idSchema (e.g. from $id like "root_layerOverride_0_sourceProperties").
+ */
+export 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;
+}

package/lib/types.d.ts

@@ -1,5 +1,7 @@
-import { IDict, IJupyterGISWidget } from '@jupytergis/schema';
-import { WidgetTracker } from '@jupyterlab/apputils';
+import { IDict, IJGISFormSchemaRegistry, IJupyterGISModel, IJupyterGISWidget } from '@jupytergis/schema';
+import { Dialog, WidgetTracker } from '@jupyterlab/apputils';
+import { Signal } from '@lumino/signaling';
+import { RJSFSchema } from '@rjsf/utils';
 import { Map } from 'ol';
 export { IDict };
 export type ValueOf<T> = T[keyof T];
@@ -28,3 +30,28 @@ 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[];
+/** Form context passed to SchemaForm and custom fields. */
+export interface IJupyterGISFormContext<TFormData = IDict | undefined> {
+    model: IJupyterGISModel;
+    formData: TFormData;
+    formSchemaRegistry?: IJGISFormSchemaRegistry;
+}
+/** Optional form state (schema, extraErrors). */
+export interface IBaseFormStates {
+    schema?: RJSFSchema;
+    extraErrors?: any;
+}
+/** Base props for object forms (layer, source, processing, story editor). */
+export interface IBaseFormProps {
+    formContext: 'update' | 'create';
+    sourceData: IDict | undefined;
+    filePath?: string;
+    model: IJupyterGISModel;
+    syncData: (properties: IDict) => void;
+    schema?: IDict;
+    ok?: Signal<Dialog<any>, number>;
+    cancel?: () => void;
+    formChangedSignal?: Signal<any, IDict<any>>;
+    formErrorSignal?: Signal<Dialog<any>, boolean>;
+    formSchemaRegistry?: IJGISFormSchemaRegistry;
+}

package/lib/widget.js

@@ -70,10 +70,13 @@ export class JupyterGISPanel extends SplitPanel {
         super({ orientation: 'vertical', spacing: 0 });
         this._consoleOpened = false;
         this._state = state;
-        this._initModel({ model, commandRegistry });
-        this._initView(formSchemaRegistry, annotationModel);
         this._consoleOption = Object.assign({ commandRegistry }, consoleOption);
         this._consoleTracker = consoleTracker;
+        const readyPromise = model.sharedModel.initialSyncReady;
+        readyPromise.then(() => {
+            this._initModel({ model, commandRegistry });
+            this._initView(formSchemaRegistry, annotationModel);
+        });
     }
     _initModel(options) {
         this._view = new ObservableMap();
@@ -94,9 +97,15 @@ export class JupyterGISPanel extends SplitPanel {
         SplitPanel.setStretch(this._jupyterGISMainViewPanel, 1);
     }
     get jupyterGISMainViewPanel() {
+        if (!this._jupyterGISMainViewPanel) {
+            console.warn('JupyterGISPanel not ready (initialSyncReady not resolved)');
+        }
         return this._jupyterGISMainViewPanel;
     }
     get viewChanged() {
+        if (!this._view) {
+            console.warn('JupyterGISPanel not ready (initialSyncReady not resolved)');
+        }
         return this._view.changed;
     }
     /**
@@ -114,6 +123,9 @@ export class JupyterGISPanel extends SplitPanel {
         super.dispose();
     }
     get currentViewModel() {
+        if (!this._mainViewModel) {
+            console.warn('JupyterGISPanel not ready (initialSyncReady not resolved)');
+        }
         return this._mainViewModel;
     }
     get consolePanel() {