@jupytergis/base 0.12.2 → 0.13.1

package/lib/commands/index.js

@@ -10,6 +10,7 @@ import keybindings from '../keybindings.json';
 import { getSingleSelectedLayer } from '../processing/index';
 import { addProcessingCommands } from '../processing/processingCommands';
 import { getGeoJSONDataFromLayerSource, downloadFile } from '../tools';
+import { SYMBOLOGY_VALID_LAYER_TYPES } from '../types';
 import { JupyterGISDocumentWidget } from '../widget';
 const POINT_SELECTION_TOOL_CLASS = 'jGIS-point-selection-tool';
 function loadKeybindings(commands, keybindings) {
@@ -70,12 +71,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             if (!layer) {
                 return false;
             }
-            const isValidLayer = [
-                'VectorLayer',
-                'VectorTileLayer',
-                'WebGlLayer',
-                'HeatmapLayer',
-            ].includes(layer.type);
+            const isValidLayer = SYMBOLOGY_VALID_LAYER_TYPES.includes(layer.type);
             return isValidLayer;
         }, execute: Private.createSymbologyDialog(tracker, state) }, icons.get(CommandIDs.symbology)));
     commands.addCommand(CommandIDs.redo, Object.assign({ label: trans.__('Redo'), isEnabled: () => {

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

@@ -0,0 +1,16 @@
+import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
+import { type IEffectiveSymbologyParams } from '../symbologyUtils';
+export interface IUseEffectiveSymbologyParamsArgs {
+    model: IJupyterGISModel;
+    layerId: string | undefined;
+    layer: IJGISLayer | null | undefined;
+    isStorySegmentOverride?: boolean;
+    segmentId?: string;
+}
+/**
+ * Resolve the effective symbology params (layer.parameters or segment override)
+ * for the current dialog context. Pass a type parameter to narrow the return
+ * type for the layer kind this component uses (e.g. VectorSymbologyParams for
+ * vector symbology components).
+ */
+export declare function useEffectiveSymbologyParams<T extends IEffectiveSymbologyParams = IEffectiveSymbologyParams>({ model, layerId, layer, isStorySegmentOverride, segmentId, }: IUseEffectiveSymbologyParamsArgs): T | null;

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

@@ -0,0 +1,24 @@
+import { useMemo, useRef } from 'react';
+import { getEffectiveSymbologyParams, } from '../symbologyUtils';
+/**
+ * Resolve the effective symbology params (layer.parameters or segment override)
+ * for the current dialog context. Pass a type parameter to narrow the return
+ * type for the layer kind this component uses (e.g. VectorSymbologyParams for
+ * vector symbology components).
+ */
+export function useEffectiveSymbologyParams({ model, layerId, layer, isStorySegmentOverride, segmentId, }) {
+    const result = useMemo(() => {
+        if (!layerId || !layer) {
+            return null;
+        }
+        return getEffectiveSymbologyParams(model, layerId, layer, isStorySegmentOverride, segmentId);
+    }, [model, layerId, layer, isStorySegmentOverride, segmentId]);
+    // Stabilize reference
+    const prevRef = useRef({ value: null, serialized: '' });
+    const serialized = result === null ? '' : JSON.stringify(result);
+    if (serialized === prevRef.current.serialized) {
+        return prevRef.current.value;
+    }
+    prevRef.current = { value: result, serialized };
+    return result;
+}

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

@@ -0,0 +1,6 @@
+import { Signal } from '@lumino/signaling';
+type OkSignalPromise = {
+    promise: Promise<Signal<any, null>>;
+};
+export declare function useOkSignal(okSignalPromise: OkSignalPromise, handleOk: () => void): void;
+export {};

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

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useRef } from 'react';
+export function useOkSignal(okSignalPromise, handleOk) {
+    const handleOkRef = useRef(handleOk);
+    useEffect(() => {
+        handleOkRef.current = handleOk;
+    }, [handleOk]);
+    const slot = useCallback(() => {
+        handleOkRef.current();
+    }, []);
+    useEffect(() => {
+        let disposed = false;
+        okSignalPromise.promise.then(okSignal => {
+            if (disposed) {
+                return;
+            }
+            okSignal.connect(slot);
+        });
+        return () => {
+            disposed = true;
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(slot);
+            });
+        };
+    }, [okSignalPromise, slot]);
+}

package/lib/dialogs/symbology/symbologyDialog.d.ts

@@ -6,10 +6,10 @@ import { Signal } from '@lumino/signaling';
 import { SymbologyTab, SymbologyValue } from "../../types";
 export interface ISymbologyDialogProps {
     model: IJupyterGISModel;
-    state: IStateDB;
     okSignalPromise: PromiseDelegate<Signal<SymbologyWidget, null>>;
-    cancel: () => void;
     layerId?: string;
+    isStorySegmentOverride?: boolean;
+    segmentId?: string;
 }
 export interface ISymbologyDialogWithAttributesProps extends ISymbologyDialogProps {
     selectableAttributesAndValues: Record<string, Set<any>>;
@@ -21,6 +21,8 @@ export type ISymbologyTabbedDialogWithAttributesProps = ISymbologyDialogWithAttr
 export interface ISymbologyWidgetOptions {
     model: IJupyterGISModel;
     state: IStateDB;
+    isStorySegmentOverride?: boolean;
+    segmentId?: string;
 }
 export interface IStopRow {
     stop: number;

package/lib/dialogs/symbology/symbologyDialog.js

@@ -4,7 +4,7 @@ import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import TiffRendering from './tiff_layer/TiffRendering';
 import VectorRendering from './vector_layer/VectorRendering';
-const SymbologyDialog = ({ model, state, okSignalPromise, cancel, }) => {
+const SymbologyDialog = ({ model, okSignalPromise, isStorySegmentOverride, segmentId, }) => {
     const [selectedLayer, setSelectedLayer] = useState(null);
     const [componentToRender, setComponentToRender] = useState(null);
     let LayerSymbology;
@@ -37,10 +37,10 @@ const SymbologyDialog = ({ model, state, okSignalPromise, cancel, }) => {
             case 'VectorLayer':
             case 'VectorTileLayer':
             case 'HeatmapLayer':
-                LayerSymbology = (React.createElement(VectorRendering, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
+                LayerSymbology = (React.createElement(VectorRendering, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
                 break;
             case 'WebGlLayer':
-                LayerSymbology = (React.createElement(TiffRendering, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
+                LayerSymbology = (React.createElement(TiffRendering, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
                 break;
             default:
                 LayerSymbology = React.createElement("div", null, "Layer Type Not Supported");
@@ -51,11 +51,8 @@ const SymbologyDialog = ({ model, state, okSignalPromise, cancel, }) => {
 };
 export class SymbologyWidget extends Dialog {
     constructor(options) {
-        const cancelCallback = () => {
-            this.resolve(0);
-        };
         const okSignalPromise = new PromiseDelegate();
-        const body = (React.createElement(SymbologyDialog, { model: options.model, okSignalPromise: okSignalPromise, cancel: cancelCallback, state: options.state }));
+        const body = (React.createElement(SymbologyDialog, { model: options.model, okSignalPromise: okSignalPromise, isStorySegmentOverride: options.isStorySegmentOverride, segmentId: options.segmentId }));
         super({ title: 'Symbology', body });
         this.id = 'jupytergis::symbologyWidget';
         this.okSignal = new Signal(this);
@@ -63,12 +60,11 @@ export class SymbologyWidget extends Dialog {
         this.addClass('jp-gis-symbology-dialog');
     }
     resolve(index) {
-        if (index === 0) {
-            super.resolve(index);
-        }
         if (index === 1) {
+            // Emit signal to let symbology components save
             this.okSignal.emit(null);
         }
+        super.resolve(index);
     }
 }
 export default SymbologyWidget;

package/lib/dialogs/symbology/symbologyUtils.d.ts

@@ -1,8 +1,31 @@
-import { IJGISLayer } from '@jupytergis/schema';
+import { IJGISLayer, IJupyterGISModel, IVectorLayer, IWebGlLayer } from '@jupytergis/schema';
 import { ColorRampName } from './colorRampUtils';
 import { IStopRow } from './symbologyDialog';
+/** Payload when saving symbology; shape matches vector or WebGl layer params. */
+export interface ISymbologyPayload {
+    symbologyState: IVectorLayer['symbologyState'] | IWebGlLayer['symbologyState'];
+    color?: IVectorLayer['color'] | IWebGlLayer['color'];
+}
+export interface ISaveSymbologyOptions {
+    model: IJupyterGISModel;
+    layerId: string;
+    isStorySegmentOverride?: boolean;
+    segmentId?: string;
+    payload: ISymbologyPayload;
+    mutateLayerBeforeSave?: (layer: any) => void;
+}
+export type VectorSymbologyParams = Pick<IVectorLayer, 'symbologyState' | 'color'>;
+export type WebGlSymbologyParams = Pick<IWebGlLayer, 'symbologyState' | 'color'>;
+/** Params-shaped object used for reading symbology (layer.parameters or segment override). */
+export type IEffectiveSymbologyParams = VectorSymbologyParams | WebGlSymbologyParams;
+/**
+ * Resolve the effective symbology params for this dialog: either the layer's
+ * parameters or the matching segment override when editing a story-segment override.
+ */
+export declare function getEffectiveSymbologyParams(model: IJupyterGISModel, layerId: string, layer: IJGISLayer | null | undefined, isStorySegmentOverride?: boolean, segmentId?: string): IEffectiveSymbologyParams | null;
+export declare function saveSymbology(options: ISaveSymbologyOptions): void;
 export declare namespace VectorUtils {
-    const buildColorInfo: (layer: IJGISLayer) => IStopRow[];
+    const buildColorInfo: (layerParamers: VectorSymbologyParams) => IStopRow[];
     const buildRadiusInfo: (layer: IJGISLayer) => IStopRow[];
 }
 export declare namespace Utils {

package/lib/dialogs/symbology/symbologyUtils.js

@@ -1,14 +1,84 @@
 import colormap from 'colormap';
 const COLOR_EXPR_STOPS_START = 3;
+/**
+ * Resolve the effective symbology params for this dialog: either the layer's
+ * parameters or the matching segment override when editing a story-segment override.
+ */
+export function getEffectiveSymbologyParams(model, layerId, layer, isStorySegmentOverride, segmentId) {
+    var _a, _b, _c;
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return null;
+    }
+    if (!isStorySegmentOverride) {
+        return layer.parameters;
+    }
+    if (!segmentId) {
+        return null;
+    }
+    const segment = model.getLayer(segmentId);
+    const override = (_b = (_a = segment === null || segment === void 0 ? void 0 : segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b.find((override) => override.targetLayer === layerId);
+    if (!override.symbologyState) {
+        override.symbologyState = {};
+    }
+    return (_c = override) !== null && _c !== void 0 ? _c : null;
+}
+export function saveSymbology(options) {
+    const { model, layerId, isStorySegmentOverride, segmentId, payload, mutateLayerBeforeSave, } = options;
+    if (!isStorySegmentOverride) {
+        const layer = model.getLayer(layerId);
+        if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+            return;
+        }
+        layer.parameters.symbologyState = payload.symbologyState;
+        if (payload.color !== undefined) {
+            layer.parameters.color = payload.color;
+        }
+        mutateLayerBeforeSave === null || mutateLayerBeforeSave === void 0 ? void 0 : mutateLayerBeforeSave(layer);
+        model.sharedModel.updateLayer(layerId, layer);
+        return;
+    }
+    if (!segmentId) {
+        return;
+    }
+    const segment = model.getLayer(segmentId);
+    if (!(segment === null || segment === void 0 ? void 0 : segment.parameters)) {
+        return;
+    }
+    if (!segment.parameters.layerOverride) {
+        segment.parameters.layerOverride = [];
+    }
+    // Find the override for the target layer (from the selected layer in the dialog)
+    const targetLayerId = model.selected
+        ? Object.keys(model.selected).find(id => { var _a; return id !== segmentId && ((_a = model.getLayer(id)) === null || _a === void 0 ? void 0 : _a.type) !== 'StorySegmentLayer'; })
+        : undefined;
+    if (!targetLayerId) {
+        return;
+    }
+    const overrides = segment.parameters.layerOverride;
+    let override = overrides.find((override) => override.targetLayer === targetLayerId);
+    if (!override) {
+        // Create new override entry
+        override = {
+            targetLayer: targetLayerId,
+            visible: true,
+            opacity: 1,
+        };
+        overrides.push(override);
+    }
+    override.symbologyState = payload.symbologyState;
+    if (payload.color !== undefined) {
+        override.color = payload.color;
+    }
+    model.sharedModel.updateLayer(segmentId, segment);
+}
 export var VectorUtils;
 (function (VectorUtils) {
-    VectorUtils.buildColorInfo = (layer) => {
-        var _a;
+    VectorUtils.buildColorInfo = (layerParamers) => {
         // This it to parse a color object on the layer
-        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color)) {
+        if (!(layerParamers === null || layerParamers === void 0 ? void 0 : layerParamers.color)) {
             return [];
         }
-        const color = layer.parameters.color;
+        const color = layerParamers.color;
         // If color is a string we don't need to parse
         if (typeof color === 'string') {
             return [];

package/lib/dialogs/symbology/tiff_layer/TiffRendering.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import MultibandColor from './types/MultibandColor';
 import SingleBandPseudoColor from './types/SingleBandPseudoColor';
-const TiffRendering = ({ model, state, okSignalPromise, cancel, layerId, }) => {
+const TiffRendering = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
     const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
     const [selectedRenderType, setSelectedRenderType] = useState();
     const [componentToRender, setComponentToRender] = useState(null);
@@ -21,10 +21,10 @@ const TiffRendering = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         }
         switch (selectedRenderType) {
             case 'Singleband Pseudocolor':
-                RenderComponent = (React.createElement(SingleBandPseudoColor, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                RenderComponent = (React.createElement(SingleBandPseudoColor, { model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
                 break;
             case 'Multiband Color':
-                RenderComponent = (React.createElement(MultibandColor, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                RenderComponent = (React.createElement(MultibandColor, { model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
                 break;
             default:
                 RenderComponent = React.createElement("div", null, "Render Type Not Implemented (yet)");

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

@@ -1,13 +1,24 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import useGetBandInfo from "../../hooks/useGetBandInfo";
+import { useOkSignal } from "../../hooks/useOkSignal";
+import { saveSymbology, } from "../../symbologyUtils";
 import BandRow from "../components/BandRow";
 import { LoadingOverlay } from "../../../../shared/components/loading";
-const MultibandColor = ({ model, okSignalPromise, cancel, layerId, }) => {
+import { useLatest } from "../../../../shared/hooks/useLatest";
+import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
+const MultibandColor = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
     if (!layerId) {
         return;
     }
     const layer = model.getLayer(layerId);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+    const params = useEffectiveSymbologyParams({
+        model,
+        layerId: layerId,
+        layer,
+        isStorySegmentOverride,
+        segmentId,
+    });
+    if (!params || !layer) {
         return;
     }
     const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
@@ -17,33 +28,14 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId, }) => {
         blue: 3,
         alpha: 4,
     });
-    const numOfBandsRef = useRef(0);
-    const selectedBandsRef = useRef({
-        red: selectedBands.red,
-        green: selectedBands.green,
-        blue: selectedBands.blue,
-        alpha: selectedBands.alpha,
-    });
+    const numOfBandsRef = useLatest(bandRows.length);
+    const selectedBandsRef = useLatest(selectedBands);
     useEffect(() => {
         populateOptions();
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
     }, []);
-    useEffect(() => {
-        numOfBandsRef.current = bandRows.length;
-    }, [bandRows]);
-    useEffect(() => {
-        selectedBandsRef.current = selectedBands;
-    }, [selectedBands]);
     const populateOptions = async () => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const layerParams = layer.parameters;
+        const layerParams = params;
         const red = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.redBand) !== null && _b !== void 0 ? _b : 1;
         const green = (_d = (_c = layerParams.symbologyState) === null || _c === void 0 ? void 0 : _c.greenBand) !== null && _d !== void 0 ? _d : 2;
         const blue = (_f = (_e = layerParams.symbologyState) === null || _e === void 0 ? void 0 : _e.blueBand) !== null && _f !== void 0 ? _f : 3;
@@ -54,10 +46,6 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId, }) => {
         setSelectedBands(prevBands => (Object.assign(Object.assign({}, prevBands), { [color]: value })));
     };
     const handleOk = () => {
-        // Update layer
-        if (!layer.parameters) {
-            return;
-        }
         const colorExpr = ['array'];
         const colors = ['red', 'green', 'blue'];
         colors.forEach(color => {
@@ -78,12 +66,21 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId, }) => {
             blueBand: selectedBandsRef.current.blue,
             alphaBand: selectedBandsRef.current.alpha,
         };
-        layer.parameters.symbologyState = symbologyState;
-        layer.parameters.color = colorExpr;
-        layer.type = 'WebGlLayer';
-        model.sharedModel.updateLayer(layerId, layer);
-        cancel();
+        saveSymbology({
+            model,
+            layerId,
+            isStorySegmentOverride,
+            segmentId,
+            payload: {
+                symbologyState,
+                color: colorExpr,
+            },
+            mutateLayerBeforeSave: targetLayer => {
+                targetLayer.type = 'WebGlLayer';
+            },
+        });
     };
+    useOkSignal(okSignalPromise, handleOk);
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
         React.createElement("div", { className: "jp-gis-band-container" },
             React.createElement(LoadingOverlay, { loading: loading }),