@jupytergis/base 0.10.1 → 0.12.0

package/lib/commands/BaseCommandIDs.d.ts

@@ -40,3 +40,5 @@ 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";
+export declare const toggleStoryPresentationMode = "jupytergis:toggleStoryPresentationMode";

package/lib/commands/BaseCommandIDs.js

@@ -55,3 +55,6 @@ 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';
+export const toggleStoryPresentationMode = 'jupytergis:toggleStoryPresentationMode';

package/lib/commands/index.js

@@ -28,6 +28,31 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
     var _a;
     const trans = translator.load('jupyterlab');
     const { commands } = app;
+    /**
+     * Wraps a command definition to automatically disable it in Specta mode
+     */
+    const createSpectaAwareCommand = (command) => {
+        const originalIsEnabled = command.isEnabled;
+        return Object.assign(Object.assign({}, command), { isEnabled: (args) => {
+                var _a;
+                // First check if we're in Specta mode
+                const currentModel = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
+                if (currentModel === null || currentModel === void 0 ? void 0 : currentModel.isSpectaMode()) {
+                    return false;
+                }
+                // Then check the original isEnabled if it exists
+                if (originalIsEnabled) {
+                    return originalIsEnabled(args !== null && args !== void 0 ? args : {});
+                }
+                // Default to enabled if no original check
+                return true;
+            } });
+    };
+    // Override addCommand to automatically wrap all commands
+    const originalAddCommand = commands.addCommand.bind(commands);
+    commands.addCommand = (id, options) => {
+        return originalAddCommand(id, createSpectaAwareCommand(options));
+    };
     commands.addCommand(CommandIDs.symbology, Object.assign({ label: trans.__('Edit Symbology'), isEnabled: () => {
             var _a, _b;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
@@ -356,6 +381,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             Private.removeSelectedItems(model, 'layer', selection => {
                 model === null || model === void 0 ? void 0 : model.removeLayer(selection);
             });
+            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
         },
     });
     commands.addCommand(CommandIDs.renameGroup, {
@@ -818,6 +844,46 @@ 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();
+            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
+        } }, icons.get(CommandIDs.addStorySegment)));
+    commands.addCommand(CommandIDs.toggleStoryPresentationMode, Object.assign({ label: trans.__('Toggle Story Presentation Mode'), isToggled: () => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return false;
+            }
+            const { storyMapPresentationMode } = current.model.getOptions();
+            return storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false;
+        }, isEnabled: () => {
+            var _a, _b, _c;
+            const storySegments = (_b = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model.getSelectedStory().story) === null || _b === void 0 ? void 0 : _b.storySegments;
+            if (((_c = tracker.currentWidget) === null || _c === void 0 ? void 0 : _c.model.jgisSettings.storyMapsDisabled) ||
+                !storySegments ||
+                storySegments.length < 1) {
+                return false;
+            }
+            return true;
+        }, execute: args => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const currentOptions = current.model.getOptions();
+            current.model.setOptions(Object.assign(Object.assign({}, currentOptions), { storyMapPresentationMode: !currentOptions.storyMapPresentationMode }));
+            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
+        } }, icons.get(CommandIDs.toggleStoryPresentationMode)));
     loadKeybindings(commands, keybindings);
 }
 var Private;

package/lib/constants.js

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

package/lib/dialogs/symbology/hooks/useGetBandInfo.d.ts

@@ -1,10 +1,4 @@
 import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
-export interface IBandHistogram {
-    buckets: number[];
-    count: number;
-    max: number;
-    min: number;
-}
 export interface IBandRow {
     band: number;
     colorInterpretation?: string;

package/lib/dialogs/symbology/hooks/useGetBandInfo.js

@@ -10,7 +10,6 @@ const useGetBandInfo = (model, layer) => {
         setLoading(true);
         setError(null);
         try {
-            const bandsArr = [];
             const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
             const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
             if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
@@ -40,9 +39,10 @@ const useGetBandInfo = (model, layer) => {
             }
             const image = await tiff.getImage();
             const numberOfBands = image.getSamplesPerPixel();
+            const bandsArr = [];
             for (let i = 0; i < numberOfBands; i++) {
                 bandsArr.push({
-                    band: i,
+                    band: i + 1,
                     stats: {
                         minimum: (_c = sourceInfo.min) !== null && _c !== void 0 ? _c : 0,
                         maximum: (_d = sourceInfo.max) !== null && _d !== void 0 ? _d : 100,

package/lib/dialogs/symbology/tiff_layer/types/MultibandColor.js

@@ -87,9 +87,9 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId, }) => {
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
         React.createElement("div", { className: "jp-gis-band-container" },
             React.createElement(LoadingOverlay, { loading: loading }),
-            React.createElement(BandRow, { label: "Red Band", index: selectedBands.red - 1, bandRow: bandRows[selectedBands.red - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Green Band", index: selectedBands.green - 1, bandRow: bandRows[selectedBands.green - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Blue Band", index: selectedBands.blue - 1, bandRow: bandRows[selectedBands.blue - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Alpha Band", index: selectedBands.alpha - 1, bandRow: bandRows[selectedBands.alpha - 1], bandRows: bandRows, setSelectedBand: val => updateBand('alpha', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }))));
+            React.createElement(BandRow, { label: "Red Band", index: selectedBands.red - 1, bandRow: bandRows[selectedBands.red - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Green Band", index: selectedBands.green - 1, bandRow: bandRows[selectedBands.green - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Blue Band", index: selectedBands.blue - 1, bandRow: bandRows[selectedBands.blue - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Alpha Band", index: selectedBands.alpha - 1, bandRow: bandRows[selectedBands.alpha - 1], bandRows: bandRows, setSelectedBand: val => updateBand('alpha', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }))));
 };
 export default MultibandColor;

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,9 @@
+import { IDict } from '@jupytergis/schema';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { BaseForm } from './baseform';
+/**
+ * The form to modify story map properties.
+ */
+export declare class StoryEditorPropertiesForm extends BaseForm {
+    protected processSchema(data: IDict<any> | undefined, schema: RJSFSchema, uiSchema: UiSchema): void;
+}

package/lib/formbuilder/objectform/StoryEditorForm.js

@@ -0,0 +1,16 @@
+import { BaseForm } from './baseform';
+/**
+ * The form to modify story map properties.
+ */
+export class StoryEditorPropertiesForm extends BaseForm {
+    processSchema(data, schema, uiSchema) {
+        super.processSchema(data, schema, uiSchema);
+        this.removeFormEntry('storySegments', data, schema, uiSchema);
+        uiSchema.presentaionBgColor = {
+            'ui:widget': 'color',
+        };
+        uiSchema.presentaionTextColor = {
+            'ui:widget': 'color',
+        };
+    }
+}

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.d.ts

@@ -31,10 +31,12 @@ interface IStates {
     }>;
     displayTemporalController: boolean;
     filterStates: IDict<IJGISFilterItem | undefined>;
+    isSpectaPresentation: boolean;
 }
 export declare class MainView extends React.Component<IProps, IStates> {
     constructor(props: IProps);
     componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: IProps, prevState: IStates): void;
     componentWillUnmount(): void;
     generateMap(center: number[], zoom: number): Promise<void>;
     updateCenter: () => void;
@@ -134,6 +136,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     removeLayer(id: string): void;
     private _onClientSharedStateChanged;
     private _onSharedOptionsChanged;
+    private _onSettingsChanged;
     private updateOptions;
     private _onViewChanged;
     /**
@@ -167,6 +170,15 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _onLayerTreeChange;
     private _onSourcesChange;
     private _onSharedModelStateChange;
+    /**
+     * Handler for when story maps change in the model.
+     * Updates specta state and presentation colors when story data becomes available.
+     */
+    private _setupSpectaMode;
+    private _removeAllInteractions;
+    private _setupStoryScrollListener;
+    private _cleanupStoryScrollListener;
+    private _updateSpectaPresentationColors;
     private _onSharedMetadataChanged;
     private _computeAnnotationPosition;
     private _updateAnnotation;
@@ -187,7 +199,11 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _commands;
     private _isPositionInitialized;
     private divRef;
+    private controlsToolbarRef;
+    private spectaContainerRef;
+    private storyViewerPanelRef;
     private _Map;
+    private _zoomControl?;
     private _model;
     private _mainViewModel;
     private _ready;
@@ -203,5 +219,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _formSchemaRegistry?;
     private _annotationModel?;
     private _featurePropertyCache;
+    private _isSpectaPresentationInitialized;
+    private _storyScrollHandler;
 }
 export {};