@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/{dialogs → features/layers}/symbology/hooks/useGetSymbology.js

@@ -54,11 +54,13 @@ export const useGetSymbology = ({ layerId, model, }) => {
         };
         // initial load
         fetchSymbology();
-        model.sharedModel.awareness.on('change', () => {
+        const handleLayersChanged = () => {
             fetchSymbology();
-        });
+        };
+        model.sharedLayersChanged.connect(handleLayersChanged);
         return () => {
             disposed = true;
+            model.sharedLayersChanged.disconnect(handleLayersChanged);
         };
     }, [layerId, model]);
     return { symbology, isLoading, error };

package/lib/features/layers/symbology/styleBuilder.d.ts

@@ -0,0 +1,21 @@
+import { IVectorLayer } from '@jupytergis/schema';
+import { FlatStyle } from 'ol/style/flat';
+import { DEFAULT_STROKE_WIDTH, RgbaColor } from './colorRampUtils';
+export { DEFAULT_STROKE_WIDTH };
+export type SymbologyState = NonNullable<IVectorLayer['symbologyState']>;
+export type GeometryType = 'fill' | 'circle' | 'line';
+/** Default OL flat style used when no Grammar rules produce output. */
+export declare const DEFAULT_FLAT_STYLE: FlatStyle;
+/** A computed stop: value → RGBA color. */
+export interface IComputedStop {
+    value: number | string | boolean;
+    color: RgbaColor;
+}
+/**
+ * Compute color stops for Graduated symbology from the config + feature values.
+ */
+export declare function computeGraduatedColorStops(state: SymbologyState, numericValues: number[]): IComputedStop[];
+/**
+ * Compute color stops for Categorized symbology from the config + feature values.
+ */
+export declare function computeCategorizedColorStops(state: SymbologyState, featureValues: unknown[]): IComputedStop[];

package/lib/features/layers/symbology/styleBuilder.js

@@ -0,0 +1,145 @@
+import colormap from 'colormap';
+import { VectorClassifications } from './classificationModes';
+import { colorToRgba, DEFAULT_STROKE_WIDTH, getColorMapList, } from './colorRampUtils';
+export { DEFAULT_STROKE_WIDTH };
+/** Default OL flat style used when no Grammar rules produce output. */
+export const DEFAULT_FLAT_STYLE = {
+    'fill-color': 'rgba(255,255,255,0.4)',
+    'stroke-color': '#3399CC',
+    'stroke-width': 1.25,
+    'circle-radius': 5,
+    'circle-fill-color': 'rgba(255,255,255,0.4)',
+    'circle-stroke-width': 1.25,
+    'circle-stroke-color': '#3399CC',
+};
+// Stop computation helpers — used by the Grammar compiler
+/**
+ * Compute color stops for Graduated symbology from the config + feature values.
+ */
+export function computeGraduatedColorStops(state, numericValues) {
+    var _a, _b, _c, _d;
+    const nClasses = (_a = state.nClasses) !== null && _a !== void 0 ? _a : 9;
+    const nStops = nClasses + 1; // classification functions use anchor-point count
+    const mode = (_b = state.mode) !== null && _b !== void 0 ? _b : 'equal interval';
+    const rampName = (_c = state.colorRamp) !== null && _c !== void 0 ? _c : 'viridis';
+    const reverse = (_d = state.reverseRamp) !== null && _d !== void 0 ? _d : false;
+    const parsedVmin = state.vmin !== undefined ? state.vmin : undefined;
+    const parsedVmax = state.vmax !== undefined ? state.vmax : undefined;
+    const values = numericValues.filter(v => {
+        if (parsedVmin !== undefined && v < parsedVmin) {
+            return false;
+        }
+        if (parsedVmax !== undefined && v > parsedVmax) {
+            return false;
+        }
+        return true;
+    });
+    // If no feature values are in range but vmin/vmax are explicitly set (e.g.
+    // for VectorTile sources where getFeatures() is unavailable), use them as a
+    // synthetic range so stops can still be computed.
+    const effectiveValues = values.length > 0
+        ? values
+        : parsedVmin !== undefined && parsedVmax !== undefined
+            ? [parsedVmin, parsedVmax]
+            : [];
+    if (effectiveValues.length === 0) {
+        return [];
+    }
+    const dataMin = Math.min(...effectiveValues);
+    const dataMax = Math.max(...effectiveValues);
+    const rangeMin = parsedVmin !== null && parsedVmin !== void 0 ? parsedVmin : dataMin;
+    const rangeMax = parsedVmax !== null && parsedVmax !== void 0 ? parsedVmax : dataMax;
+    const rangeValues = [rangeMin, rangeMax];
+    let stops;
+    switch (mode) {
+        case 'quantile':
+            stops = VectorClassifications.calculateQuantileBreaks(effectiveValues, nStops);
+            break;
+        case 'equal interval':
+            stops = VectorClassifications.calculateEqualIntervalBreaks(rangeValues, nStops);
+            break;
+        case 'jenks':
+            stops = VectorClassifications.calculateJenksBreaks(effectiveValues, nStops);
+            break;
+        case 'pretty':
+            stops = VectorClassifications.calculatePrettyBreaks(rangeValues, nStops);
+            break;
+        case 'logarithmic':
+            stops = VectorClassifications.calculateLogarithmicBreaks(rangeValues, nStops);
+            break;
+        default:
+            stops = VectorClassifications.calculateEqualIntervalBreaks(rangeValues, nStops);
+    }
+    return mapStopsToColors(stops, rampName, stops.length, reverse);
+}
+/**
+ * Compute color stops for Categorized symbology from the config + feature values.
+ */
+export function computeCategorizedColorStops(state, featureValues) {
+    var _a, _b;
+    const rampName = (_a = state.colorRamp) !== null && _a !== void 0 ? _a : 'viridis';
+    const reverse = (_b = state.reverseRamp) !== null && _b !== void 0 ? _b : false;
+    const uniqueValues = [
+        ...new Set(featureValues.filter(v => v !== undefined && v !== null)),
+    ].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+    if (uniqueValues.length === 0) {
+        return [];
+    }
+    const colorRamp = getColorMapList().find(c => c.name === rampName);
+    if (!colorRamp) {
+        return [];
+    }
+    const colors = generateColors(colorRamp, uniqueValues.length, reverse);
+    return uniqueValues.map((v, i) => ({
+        value: v,
+        color: colors[i],
+    }));
+}
+// Color ramp helpers
+function mapStopsToColors(stops, rampName, nClasses, reverse) {
+    const colorRamp = getColorMapList().find(c => c.name === rampName);
+    if (!colorRamp) {
+        return [];
+    }
+    const colors = generateColors(colorRamp, nClasses, reverse);
+    return stops.map((v, i) => ({
+        value: v,
+        color: colors[Math.min(i, colors.length - 1)],
+    }));
+}
+function generateColors(colorRamp, nClasses, reverse) {
+    let colorMap;
+    if (colorRamp.type === 'categorical') {
+        let rawColors = [...colorRamp.colors];
+        if (rawColors.length < nClasses) {
+            rawColors = Array.from({ length: nClasses }, (_, i) => rawColors[i % rawColors.length]);
+        }
+        else {
+            rawColors = rawColors.slice(0, nClasses);
+        }
+        // Parse categorical colors to RGBA.  D3 categorical schemes produce hex
+        // strings (#rrggbb); continuous colormaps produce rgb() strings.
+        // colorToRgba handles both formats.
+        colorMap = rawColors.map(c => typeof c === 'string' ? colorToRgba(c) : c);
+    }
+    else {
+        const nShades = Math.max(nClasses, 9);
+        colorMap = colormap({
+            colormap: colorRamp.name,
+            nshades: nShades,
+            format: 'rgba',
+        });
+    }
+    if (reverse) {
+        colorMap = [...colorMap].reverse();
+    }
+    // Sample nClasses colors evenly from the map.
+    const result = [];
+    for (let i = 0; i < nClasses; i++) {
+        const idx = colorRamp.type === 'categorical'
+            ? i
+            : Math.round((i / (nClasses - 1)) * (colorMap.length - 1));
+        result.push(colorMap[idx]);
+    }
+    return result;
+}

package/lib/{dialogs → features/layers}/symbology/symbologyDialog.d.ts

@@ -3,7 +3,7 @@ import { Dialog } from '@jupyterlab/apputils';
 import { IStateDB } from '@jupyterlab/statedb';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import { SymbologyTab, SymbologyValue } from "../../types";
+import { SymbologyTab, SymbologyValue } from "../../../types";
 export interface ISymbologyDialogProps {
     model: IJupyterGISModel;
     okSignalPromise: PromiseDelegate<Signal<SymbologyWidget, null>>;
@@ -25,7 +25,8 @@ export interface ISymbologyWidgetOptions {
     segmentId?: string;
 }
 export interface IStopRow {
-    stop: number;
+    id: string;
+    stop: number | string;
     output: SymbologyValue;
 }
 export declare class SymbologyWidget extends Dialog<boolean> {

package/lib/{dialogs → features/layers}/symbology/symbologyDialog.js

@@ -2,14 +2,14 @@ import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
-import TiffRendering from './tiff_layer/TiffRendering';
-import VectorRendering from './vector_layer/VectorRendering';
+import Grammar from './Grammar';
+import Heatmap from './Heatmap';
 const SymbologyDialog = ({ model, okSignalPromise, isStorySegmentOverride, segmentId, }) => {
     const [selectedLayer, setSelectedLayer] = useState(null);
     const [componentToRender, setComponentToRender] = useState(null);
     let LayerSymbology;
     useEffect(() => {
-        const handleClientStateChanged = () => {
+        const handleSelectedChanged = () => {
             var _a, _b;
             if (!((_b = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
                 return;
@@ -18,10 +18,10 @@ const SymbologyDialog = ({ model, okSignalPromise, isStorySegmentOverride, segme
             setSelectedLayer(currentLayer);
         };
         // Initial state
-        handleClientStateChanged();
-        model.clientStateChanged.connect(handleClientStateChanged);
+        handleSelectedChanged();
+        model.selectedChanged.connect(handleSelectedChanged);
         return () => {
-            model.clientStateChanged.disconnect(handleClientStateChanged);
+            model.selectedChanged.disconnect(handleSelectedChanged);
         };
     }, []);
     useEffect(() => {
@@ -32,15 +32,15 @@ const SymbologyDialog = ({ model, okSignalPromise, isStorySegmentOverride, segme
         if (!layer) {
             return;
         }
-        // TODO WebGlLayers can also be used for other layers, need a better way to determine source + layer combo
+        // TODO GeoTiffLayers can also be used for other layers, need a better way to determine source + layer combo
         switch (layer.type) {
-            case 'VectorLayer':
-            case 'VectorTileLayer':
             case 'HeatmapLayer':
-                LayerSymbology = (React.createElement(VectorRendering, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
+                LayerSymbology = (React.createElement(Heatmap, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
                 break;
-            case 'WebGlLayer':
-                LayerSymbology = (React.createElement(TiffRendering, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
+            case 'VectorLayer':
+            case 'VectorTileLayer':
+            case 'GeoTiffLayer':
+                LayerSymbology = (React.createElement(Grammar, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
                 break;
             default:
                 LayerSymbology = React.createElement("div", null, "Layer Type Not Supported");

package/lib/features/layers/symbology/symbologyUtils.d.ts

@@ -0,0 +1,41 @@
+import { IJGISLayer, IJupyterGISModel, IVectorLayer, IGeoTiffLayer } from '@jupytergis/schema';
+import { IColorMap } from './colorRampUtils';
+import { IStopRow } from './symbologyDialog';
+/**
+ * Payload when saving symbology. As of #698, only `symbologyState` is persisted
+ * for vector layers — the OpenLayers FlatStyle is derived at render time from
+ * `symbologyState` via `styleBuilder.buildVectorFlatStyle`. GeoTiff layers still
+ * accept an optional `color` because their `color` field is used for band-math
+ * expressions, not symbology duplication.
+ */
+export interface ISymbologyPayload {
+    symbologyState: IVectorLayer['symbologyState'] | IGeoTiffLayer['symbologyState'];
+    /**
+     * Only used by GeoTiff band-math (`IGeoTiffLayer['color']`); never set for
+     * vector layers. Typed as `unknown` because the GeoTiff schema's color type
+     * is a nested numeric-array expression that doesn't round-trip cleanly
+     * through the JSON-schema generator.
+     */
+    color?: unknown;
+}
+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 GeoTiffSymbologyParams = Pick<IGeoTiffLayer, 'symbologyState' | 'color'>;
+/** Params-shaped object used for reading symbology (layer.parameters or segment override). */
+export type IEffectiveSymbologyParams = VectorSymbologyParams | GeoTiffSymbologyParams;
+/**
+ * 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 Utils {
+    const getValueColorPairs: (stops: number[], colorRamp: IColorMap, nClasses: number, reverse?: boolean) => IStopRow[];
+}

package/lib/features/layers/symbology/symbologyUtils.js

@@ -0,0 +1,114 @@
+import { UUID } from '@lumino/coreutils';
+import colormap from 'colormap';
+/**
+ * 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 Utils;
+(function (Utils) {
+    Utils.getValueColorPairs = (stops, colorRamp, nClasses, reverse = false) => {
+        const isCategorical = colorRamp.type === 'categorical';
+        let colorMap;
+        if (isCategorical) {
+            colorMap = [...colorRamp.colors];
+            if (colorMap.length < nClasses) {
+                colorMap = Array.from({ length: nClasses }, (_, i) => {
+                    return colorMap[i % colorMap.length];
+                });
+            }
+            else {
+                colorMap = colorMap.slice(0, nClasses);
+            }
+        }
+        else {
+            const nShades = Math.max(nClasses, 9);
+            colorMap = colormap({
+                colormap: colorRamp.name,
+                nshades: nShades,
+                format: 'rgba',
+            });
+        }
+        if (reverse) {
+            colorMap = [...colorMap].reverse();
+        }
+        const valueColorPairs = [];
+        for (let i = 0; i < nClasses; i++) {
+            const colorIndex = isCategorical
+                ? i
+                : Math.round((i / (nClasses - 1)) * (colorMap.length - 1));
+            valueColorPairs.push({
+                id: UUID.uuid4(),
+                stop: stops[i],
+                output: colorMap[colorIndex],
+            });
+        }
+        return valueColorPairs;
+    };
+})(Utils || (Utils = {}));

package/lib/{panelview/objectproperties.d.ts → features/objectproperties/index.d.ts}

@@ -16,7 +16,7 @@ interface IProps {
 export declare class ObjectPropertiesReact extends React.Component<IProps, IStates> {
     constructor(props: IProps);
     private _sharedJGISModelChanged;
-    private _onClientSharedStateChanged;
+    private _onSelectedChanged;
     render(): React.ReactNode;
 }
 export {};

package/lib/{panelview/objectproperties.js → features/objectproperties/index.js}

@@ -1,6 +1,6 @@
 import { UUID } from '@lumino/coreutils';
 import * as React from 'react';
-import { EditForm } from "../formbuilder/editform";
+import { EditForm } from "../../shared/formbuilder/editform";
 export class ObjectPropertiesReact extends React.Component {
     constructor(props) {
         var _a, _b;
@@ -8,19 +8,14 @@ export class ObjectPropertiesReact extends React.Component {
         this._sharedJGISModelChanged = () => {
             this.forceUpdate();
         };
-        this._onClientSharedStateChanged = (sender, clients) => {
+        this._onSelectedChanged = () => {
             var _a, _b;
-            let newState;
-            const clientId = this.state.clientId;
-            const localState = clientId ? clients.get(clientId) : null;
+            const localState = this.props.model.localState;
             if (localState &&
                 ((_a = localState.selected) === null || _a === void 0 ? void 0 : _a.emitter) &&
                 localState.selected.emitter !== this.state.id &&
                 ((_b = localState.selected) === null || _b === void 0 ? void 0 : _b.value)) {
-                newState = localState;
-            }
-            if (newState) {
-                const selection = newState.selected.value;
+                const selection = localState.selected.value;
                 const selectedObjectIds = Object.keys(selection || {});
                 // Only show object properties if ONE object is selected
                 if (selection === undefined || selectedObjectIds.length !== 1) {
@@ -42,7 +37,7 @@ export class ObjectPropertiesReact extends React.Component {
             selectedObject: props.selectedObject,
             setSelectedObject: props.setSelectedObject,
         };
-        this.props.model.clientStateChanged.connect(this._onClientSharedStateChanged);
+        this.props.model.selectedChanged.connect(this._onSelectedChanged);
         (_a = this.props.model) === null || _a === void 0 ? void 0 : _a.sharedLayersChanged.connect(this._sharedJGISModelChanged);
         (_b = this.props.model) === null || _b === void 0 ? void 0 : _b.sharedSourcesChanged.connect(this._sharedJGISModelChanged);
     }

package/lib/{dialogs → features/processing}/ProcessingFormDialog.d.ts

@@ -2,7 +2,7 @@ import { ProcessingType, IDict, IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import type { IBaseFormProps } from "../types";
+import type { IBaseFormProps } from "../../types";
 export interface IProcessingFormDialogOptions extends IBaseFormProps {
     formContext: 'update' | 'create';
     schema: IDict;

package/lib/{dialogs → features/processing}/ProcessingFormDialog.js

@@ -2,8 +2,10 @@ import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import * as React from 'react';
-import { DissolveForm } from "../formbuilder/objectform/process";
-import { DefaultProcessingForm } from "../formbuilder/objectform/processingForm";
+import { ClipRasterByExtentForm } from './forms/clipRasterByExtentForm';
+import { DissolveForm } from './forms/dissolveProcessForm';
+import { DefaultProcessingForm } from './forms/processingForm';
+import { RasterizeForm } from './forms/rasterizeForm';
 const ProcessingFormWrapper = props => {
     var _a;
     const [ready, setReady] = React.useState(false);
@@ -22,6 +24,12 @@ const ProcessingFormWrapper = props => {
         case 'Dissolve':
             FormComponent = DissolveForm;
             break;
+        case 'Rasterize':
+            FormComponent = RasterizeForm;
+            break;
+        case 'ClipRasterByExtent':
+            FormComponent = ClipRasterByExtentForm;
+            break;
         default:
             FormComponent = DefaultProcessingForm;
     }
@@ -32,25 +40,37 @@ const ProcessingFormWrapper = props => {
  */
 export class ProcessingFormDialog extends Dialog {
     constructor(options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         // Extract layers from the shared model
         const layers = (_a = options.model.sharedModel.layers) !== null && _a !== void 0 ? _a : {};
         const layerOptions = Object.keys(layers).map(layerId => ({
             value: layerId,
             label: layers[layerId].name,
         }));
+        const vectorLayerOptions = Object.keys(layers)
+            .filter(layerId => layers[layerId].type === 'VectorLayer')
+            .map(layerId => ({ value: layerId, label: layers[layerId].name }));
         // Modify schema to include layer options and layer name field
         if (options.schema) {
             if ((_b = options.schema.properties) === null || _b === void 0 ? void 0 : _b.inputLayer) {
                 options.schema.properties.inputLayer.enum = layerOptions.map(option => option.value);
                 options.schema.properties.inputLayer.enumNames = layerOptions.map(option => option.label);
             }
-            // Ensure outputLayerName field exists in schema
-            if (!((_c = options.schema.properties) === null || _c === void 0 ? void 0 : _c.outputLayerName)) {
+            if ((_c = options.schema.properties) === null || _c === void 0 ? void 0 : _c.clipLayer) {
+                const selectedInputLayer = (_d = options.sourceData) === null || _d === void 0 ? void 0 : _d.inputLayer;
+                const clipLayerOptions = selectedInputLayer
+                    ? vectorLayerOptions.filter(o => o.value !== selectedInputLayer)
+                    : vectorLayerOptions;
+                options.schema.properties.clipLayer.enum = clipLayerOptions.map(option => option.value);
+                options.schema.properties.clipLayer.enumNames = clipLayerOptions.map(option => option.label);
+            }
+            // Ensure outputLayerName field exists in schema. Skip if the schema
+            // already produces a file output (e.g. raster outputs use outputFileName).
+            if (!((_e = options.schema.properties) === null || _e === void 0 ? void 0 : _e.outputLayerName) &&
+                !((_f = options.schema.properties) === null || _f === void 0 ? void 0 : _f.outputFileName)) {
                 options.schema.properties.outputLayerName = {
                     type: 'string',
-                    title: 'outputLayerName',
-                    // default: ''
+                    title: 'Output Layer Name',
                 };
             }
         }
@@ -58,16 +78,10 @@ export class ProcessingFormDialog extends Dialog {
         const jgisModel = options.model;
         const okSignalPromise = new PromiseDelegate();
         const formErrorSignalPromise = new PromiseDelegate();
-        // Custom syncData function to update layer name in the model
         const syncData = (props) => {
-            if (props.outputLayerName &&
-                props.inputLayer &&
-                layers[props.inputLayer]) {
-                layers[props.inputLayer].name = props.outputLayerName;
-            }
             options.syncData(props);
         };
-        const body = (React.createElement("div", { style: { overflow: 'hidden' } },
+        const body = (React.createElement("div", { style: { overflowX: 'hidden', overflowY: 'auto' } },
             React.createElement(ProcessingFormWrapper, Object.assign({}, options, { filePath: filePath, model: jgisModel, okSignalPromise: okSignalPromise, formErrorSignalPromise: formErrorSignalPromise, syncData: syncData }))));
         super({
             title: options.title,

package/lib/features/processing/forms/MapExtentToggle.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IMapExtentToggleProps {
+    isActive: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    children: React.ReactNode;
+}
+/**
+ * Checkbox that locks the extent fields to the current map viewport.
+ * When active, the children (extent fields) are visually dimmed and
+ * pointer-events are disabled so the user cannot edit them.
+ */
+export declare function MapExtentToggle({ isActive, onChange, children, }: IMapExtentToggleProps): React.ReactElement;
+export {};

package/lib/features/processing/forms/MapExtentToggle.js

@@ -0,0 +1,20 @@
+import React from 'react';
+/**
+ * Checkbox that locks the extent fields to the current map viewport.
+ * When active, the children (extent fields) are visually dimmed and
+ * pointer-events are disabled so the user cannot edit them.
+ */
+export function MapExtentToggle({ isActive, onChange, children, }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px',
+                margin: '4px 0 8px',
+                cursor: 'pointer',
+                fontSize: 'var(--jp-ui-font-size1)',
+            } },
+            React.createElement("input", { type: "checkbox", checked: isActive, onChange: onChange }),
+            "Use current map extent"),
+        React.createElement("div", { style: isActive ? { pointerEvents: 'none', opacity: 0.4 } : undefined }, children)));
+}

package/lib/features/processing/forms/clipRasterByExtentForm.d.ts

@@ -0,0 +1,10 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { Dialog } from '@jupyterlab/apputils';
+import { Signal } from '@lumino/signaling';
+import React from 'react';
+import type { IBaseFormProps } from "../../../types";
+export interface IClipRasterByExtentFormProps extends IBaseFormProps {
+    ok?: Signal<Dialog<any>, number>;
+    model: IJupyterGISModel;
+}
+export declare function ClipRasterByExtentForm(props: IClipRasterByExtentFormProps): React.ReactElement | null;