@jupytergis/base 0.15.0 → 0.16.0-alpha.1

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

@@ -0,0 +1,158 @@
+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',
+};
+/** Sentinel stop values for missing data. */
+export const STOP_NULL = '__null__';
+export const STOP_UNDEFINED = '__undefined__';
+// 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.map(v => v === null ? STOP_NULL : v === undefined ? STOP_UNDEFINED : v)),
+    ].sort((a, b) => {
+        const aIsSentinel = a === STOP_NULL || a === STOP_UNDEFINED;
+        const bIsSentinel = b === STOP_NULL || b === STOP_UNDEFINED;
+        if (aIsSentinel && !bIsSentinel) {
+            return 1;
+        }
+        if (!aIsSentinel && bIsSentinel) {
+            return -1;
+        }
+        return 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>>;

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

@@ -2,14 +2,13 @@ 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';
 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 +17,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 +31,12 @@ 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 }));
-                break;
-            case 'WebGlLayer':
-                LayerSymbology = (React.createElement(TiffRendering, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
+            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");
@@ -53,7 +49,9 @@ export class SymbologyWidget extends Dialog {
     constructor(options) {
         const okSignalPromise = new PromiseDelegate();
         const body = (React.createElement(SymbologyDialog, { model: options.model, okSignalPromise: okSignalPromise, isStorySegmentOverride: options.isStorySegmentOverride, segmentId: options.segmentId }));
-        super({ title: 'Symbology', body });
+        const layerId = Object.keys(options.model.localState.selected.value)[0];
+        const layerName = options.model.getLayer(layerId).name;
+        super({ title: `Symbology — ${layerName}`, body });
         this.id = 'jupytergis::symbologyWidget';
         this.okSignal = new Signal(this);
         okSignalPromise.resolve(this.okSignal);

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

@@ -1,10 +1,22 @@
-import { IJGISLayer, IJupyterGISModel, IVectorLayer, IWebGlLayer } from '@jupytergis/schema';
+import { IJGISLayer, IJupyterGISModel, IVectorLayer, IGeoTiffLayer } from '@jupytergis/schema';
 import { IColorMap } from './colorRampUtils';
 import { IStopRow } from './symbologyDialog';
-/** Payload when saving symbology; shape matches vector or WebGl layer params. */
+/**
+ * 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'] | IWebGlLayer['symbologyState'];
-    color?: IVectorLayer['color'] | IWebGlLayer['color'];
+    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;
@@ -15,19 +27,15 @@ export interface ISaveSymbologyOptions {
     mutateLayerBeforeSave?: (layer: any) => void;
 }
 export type VectorSymbologyParams = Pick<IVectorLayer, 'symbologyState' | 'color'>;
-export type WebGlSymbologyParams = Pick<IWebGlLayer, '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 | WebGlSymbologyParams;
+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 VectorUtils {
-    const buildColorInfo: (layerParamers: VectorSymbologyParams) => IStopRow[];
-    const buildRadiusInfo: (layer: IJGISLayer) => IStopRow[];
-}
 export declare namespace Utils {
     const getValueColorPairs: (stops: number[], colorRamp: IColorMap, nClasses: number, reverse?: boolean) => IStopRow[];
 }

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

@@ -1,7 +1,5 @@
 import { UUID } from '@lumino/coreutils';
 import colormap from 'colormap';
-import { findExprNode } from './colorRampUtils';
-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.
@@ -73,88 +71,6 @@ export function saveSymbology(options) {
     }
     model.sharedModel.updateLayer(segmentId, segment);
 }
-export var VectorUtils;
-(function (VectorUtils) {
-    VectorUtils.buildColorInfo = (layerParamers) => {
-        // This it to parse a color object on the layer
-        if (!(layerParamers === null || layerParamers === void 0 ? void 0 : layerParamers.color)) {
-            return [];
-        }
-        const color = layerParamers.color;
-        // If color is a string we don't need to parse
-        if (typeof color === 'string') {
-            return [];
-        }
-        const keys = ['fill-color', 'circle-fill-color'];
-        const valueColorPairs = [];
-        const seenPairs = new Set();
-        for (const key of keys) {
-            if (!color[key]) {
-                continue;
-            }
-            const interpolate = findExprNode(color[key], 'interpolate');
-            if (interpolate) {
-                // Graduated: value:color pairs starting at index 3
-                for (let i = COLOR_EXPR_STOPS_START; i < interpolate.length; i += 2) {
-                    const pairKey = `${interpolate[i]}-${interpolate[i + 1]}`;
-                    if (!seenPairs.has(pairKey)) {
-                        valueColorPairs.push({
-                            id: UUID.uuid4(),
-                            stop: interpolate[i],
-                            output: interpolate[i + 1],
-                        });
-                        seenPairs.add(pairKey);
-                    }
-                }
-            }
-            else {
-                const caseExpr = findExprNode(color[key], 'case');
-                if (caseExpr) {
-                    // Categorized: alternating [condition, color] pairs, last element is fallback
-                    for (let i = 1; i < caseExpr.length - 1; i += 2) {
-                        const condition = caseExpr[i];
-                        const pairKey = `${condition[2]}-${caseExpr[i + 1]}`;
-                        if (!seenPairs.has(pairKey)) {
-                            valueColorPairs.push({
-                                id: UUID.uuid4(),
-                                stop: condition[2],
-                                output: caseExpr[i + 1],
-                            });
-                            seenPairs.add(pairKey);
-                        }
-                    }
-                }
-            }
-        }
-        return valueColorPairs;
-    };
-    VectorUtils.buildRadiusInfo = (layer) => {
-        var _a;
-        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color)) {
-            return [];
-        }
-        const color = layer.parameters.color;
-        // If color is a string we don't need to parse
-        if (typeof color === 'string') {
-            return [];
-        }
-        const stopOutputPairs = [];
-        const circleRadius = color['circle-radius'];
-        if (!Array.isArray(circleRadius) ||
-            circleRadius.length <= COLOR_EXPR_STOPS_START) {
-            return [];
-        }
-        for (let i = COLOR_EXPR_STOPS_START; i < circleRadius.length; i += 2) {
-            const obj = {
-                id: UUID.uuid4(),
-                stop: circleRadius[i],
-                output: circleRadius[i + 1],
-            };
-            stopOutputPairs.push(obj);
-        }
-        return stopOutputPairs;
-    };
-})(VectorUtils || (VectorUtils = {}));
 export var Utils;
 (function (Utils) {
     Utils.getValueColorPairs = (stops, colorRamp, nClasses, reverse = false) => {

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;