@jupytergis/base 0.13.2 → 0.14.0

package/lib/commands/operationCommands.d.ts

@@ -0,0 +1,22 @@
+import { IRenderMime } from '@jupyterlab/rendermime';
+import { CommandRegistry } from '@lumino/commands';
+import { JupyterGISTracker } from '../types';
+export declare namespace LayerCreationCommandIDs {
+    const newGeoJSONWithParams = "jupytergis:newGeoJSONWithParams";
+    const newRasterWithParams = "jupytergis:newRasterWithParams";
+    const newVectorTileWithParams = "jupytergis:newVectorTileWithParams";
+    const newGeoParquetWithParams = "jupytergis:newGeoParquetWithParams";
+    const newHillshadeWithParams = "jupytergis:newHillshadeWithParams";
+    const newImageWithParams = "jupytergis:newImageWithParams";
+    const newVideoWithParams = "jupytergis:newVideoWithParams";
+    const newGeoTiffWithParams = "jupytergis:newGeoTiffWithParams";
+    const newShapefileWithParams = "jupytergis:newShapefileWithParams";
+}
+/**
+ * Register all layer creation commands using declarative specs.
+ */
+export declare function addLayerCreationCommands(options: {
+    tracker: JupyterGISTracker;
+    commands: CommandRegistry;
+    trans: IRenderMime.TranslationBundle;
+}): void;

package/lib/commands/operationCommands.js

@@ -0,0 +1,305 @@
+import { UUID } from '@lumino/coreutils';
+export var LayerCreationCommandIDs;
+(function (LayerCreationCommandIDs) {
+    LayerCreationCommandIDs.newGeoJSONWithParams = 'jupytergis:newGeoJSONWithParams';
+    LayerCreationCommandIDs.newRasterWithParams = 'jupytergis:newRasterWithParams';
+    LayerCreationCommandIDs.newVectorTileWithParams = 'jupytergis:newVectorTileWithParams';
+    LayerCreationCommandIDs.newGeoParquetWithParams = 'jupytergis:newGeoParquetWithParams';
+    LayerCreationCommandIDs.newHillshadeWithParams = 'jupytergis:newHillshadeWithParams';
+    LayerCreationCommandIDs.newImageWithParams = 'jupytergis:newImageWithParams';
+    LayerCreationCommandIDs.newVideoWithParams = 'jupytergis:newVideoWithParams';
+    LayerCreationCommandIDs.newGeoTiffWithParams = 'jupytergis:newGeoTiffWithParams';
+    LayerCreationCommandIDs.newShapefileWithParams = 'jupytergis:newShapefileWithParams';
+})(LayerCreationCommandIDs || (LayerCreationCommandIDs = {}));
+/**
+ * Generic command factory for layer creation.
+ */
+function createLayerCommand(commands, tracker, trans, spec) {
+    commands.addCommand(spec.id, {
+        label: trans.__(spec.label),
+        caption: trans.__(spec.caption),
+        isEnabled: () => true,
+        describedBy: {
+            args: {
+                type: 'object',
+                required: ['filePath', 'name', 'parameters'],
+                properties: {
+                    filePath: { type: 'string', description: 'Path to the .jGIS file' },
+                    name: { type: 'string', description: 'Layer name' },
+                    parameters: {
+                        type: 'object',
+                        properties: Object.assign({ source: spec.sourceSchema }, spec.layerParamsSchema),
+                    },
+                },
+            },
+        },
+        execute: (async (args) => {
+            const { filePath, name, parameters } = args;
+            const current = tracker.find(w => w.model.filePath === filePath);
+            if (!current || !current.model.sharedModel.editable) {
+                console.warn('Invalid or non-editable document for', filePath);
+                return;
+            }
+            const model = current.model;
+            const sharedModel = model.sharedModel;
+            const sourceId = UUID.uuid4();
+            const layerId = UUID.uuid4();
+            const sourceModel = {
+                type: spec.sourceType,
+                name: `${name} Source`,
+                parameters: parameters.source,
+            };
+            sharedModel.addSource(sourceId, sourceModel);
+            const layerModel = {
+                type: spec.layerType,
+                name: name,
+                visible: true,
+                parameters: spec.buildParameters(parameters, sourceId),
+            };
+            model.addLayer(layerId, layerModel);
+        }),
+    });
+}
+/**
+ * Register all layer creation commands using declarative specs.
+ */
+export function addLayerCreationCommands(options) {
+    const { tracker, commands, trans } = options;
+    const specs = [
+        {
+            id: LayerCreationCommandIDs.newGeoJSONWithParams,
+            label: 'New GeoJSON Layer From Parameters',
+            caption: 'Add a new GeoJSON vector layer (by file path or URL) and add it to the given JupyterGIS file',
+            sourceType: 'GeoJSONSource',
+            layerType: 'VectorLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['path'],
+                properties: { path: { type: 'string' } },
+            },
+            layerParamsSchema: {
+                color: { type: 'object' },
+                opacity: { type: 'number', default: 1 },
+                symbologyState: { type: 'object' },
+            },
+            buildParameters: (p, id) => {
+                var _a, _b;
+                return ({
+                    source: id,
+                    color: (_a = p.color) !== null && _a !== void 0 ? _a : {},
+                    opacity: (_b = p.opacity) !== null && _b !== void 0 ? _b : 1,
+                    symbologyState: p.symbologyState,
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newRasterWithParams,
+            label: 'New Raster Layer From Parameters',
+            caption: 'Add a new raster layer (by file path or URL) and add it to the given JupyterGIS file',
+            sourceType: 'RasterSource',
+            layerType: 'RasterLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['url'],
+                properties: { url: { type: 'string' } },
+            },
+            layerParamsSchema: { opacity: { type: 'number', default: 1 } },
+            buildParameters: (p, id) => {
+                var _a;
+                return ({
+                    source: id,
+                    opacity: (_a = p.opacity) !== null && _a !== void 0 ? _a : 1,
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newVectorTileWithParams,
+            label: 'New Vector Tile Layer From Parameters',
+            caption: 'Add a new vector tile layer (by URL) and add it to the given JupyterGIS file',
+            sourceType: 'VectorTileSource',
+            layerType: 'VectorTileLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['url'],
+                properties: { url: { type: 'string' } },
+            },
+            layerParamsSchema: {
+                color: { type: 'object' },
+                opacity: { type: 'number', default: 1 },
+            },
+            buildParameters: (p, id) => {
+                var _a, _b;
+                return ({
+                    source: id,
+                    color: (_a = p.color) !== null && _a !== void 0 ? _a : {},
+                    opacity: (_b = p.opacity) !== null && _b !== void 0 ? _b : 1,
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newGeoParquetWithParams,
+            label: 'New GeoParquet Layer From Parameters',
+            caption: 'Add a new GeoParquet vector layer (by file path or URL) and add it to the given JupyterGIS file',
+            sourceType: 'GeoParquetSource',
+            layerType: 'VectorLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['path'],
+                properties: { path: { type: 'string' } },
+            },
+            layerParamsSchema: {
+                color: { type: 'object' },
+                opacity: { type: 'number', default: 1 },
+                symbologyState: { type: 'object' },
+            },
+            buildParameters: (p, id) => {
+                var _a, _b;
+                return ({
+                    source: id,
+                    color: (_a = p.color) !== null && _a !== void 0 ? _a : {},
+                    opacity: (_b = p.opacity) !== null && _b !== void 0 ? _b : 1,
+                    symbologyState: p.symbologyState,
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newHillshadeWithParams,
+            label: 'New Hillshade Layer From Parameters',
+            caption: 'Add a new hillshade layer (by DEM raster source) and add it to the given JupyterGIS file',
+            sourceType: 'RasterDemSource',
+            layerType: 'HillshadeLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['url'],
+                properties: { url: { type: 'string' } },
+            },
+            layerParamsSchema: {
+                shadowColor: { type: 'string', default: '#473B24' },
+            },
+            buildParameters: (p, id) => {
+                var _a;
+                return ({
+                    source: id,
+                    shadowColor: (_a = p.shadowColor) !== null && _a !== void 0 ? _a : '#473B24',
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newImageWithParams,
+            label: 'New Image Layer From Parameters',
+            caption: 'Add a new image layer (by file path or URL) and add it to the given JupyterGIS file',
+            sourceType: 'ImageSource',
+            layerType: 'ImageLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['path', 'coordinates'],
+                properties: {
+                    path: { type: 'string' },
+                    coordinates: {
+                        type: 'array',
+                        items: { type: 'array', items: { type: 'number' } },
+                    },
+                },
+            },
+            layerParamsSchema: { opacity: { type: 'number', default: 1 } },
+            buildParameters: (p, id) => {
+                var _a;
+                return ({
+                    source: id,
+                    opacity: (_a = p.opacity) !== null && _a !== void 0 ? _a : 1,
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newVideoWithParams,
+            label: 'New Video Layer From Parameters',
+            caption: 'Add a new video layer (by file path or URL) and add it to the given JupyterGIS file',
+            sourceType: 'VideoSource',
+            layerType: 'RasterLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['urls', 'coordinates'],
+                properties: {
+                    urls: { type: 'array', items: { type: 'string' } },
+                    coordinates: {
+                        type: 'array',
+                        items: { type: 'array', items: { type: 'number' } },
+                    },
+                },
+            },
+            layerParamsSchema: { opacity: { type: 'number', default: 1 } },
+            buildParameters: (p, id) => {
+                var _a;
+                return ({
+                    source: id,
+                    opacity: (_a = p.opacity) !== null && _a !== void 0 ? _a : 1,
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newGeoTiffWithParams,
+            label: 'New GeoTIFF Layer From Parameters',
+            caption: 'Add a new GeoTIFF layer (by file path or URL) and add it to the given JupyterGIS file',
+            sourceType: 'GeoTiffSource',
+            layerType: 'WebGlLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['urls'],
+                properties: {
+                    urls: {
+                        type: 'array',
+                        items: {
+                            type: 'object',
+                            properties: {
+                                url: { type: 'string' },
+                                min: { type: 'number' },
+                                max: { type: 'number' },
+                            },
+                        },
+                    },
+                },
+            },
+            layerParamsSchema: {
+                opacity: { type: 'number', default: 1 },
+                color: { type: 'any' },
+                symbologyState: { type: 'object' },
+            },
+            buildParameters: (p, id) => {
+                var _a, _b;
+                return ({
+                    source: id,
+                    opacity: (_a = p.opacity) !== null && _a !== void 0 ? _a : 1,
+                    color: p.color,
+                    symbologyState: (_b = p.symbologyState) !== null && _b !== void 0 ? _b : { renderType: 'continuous' },
+                });
+            },
+        },
+        {
+            id: LayerCreationCommandIDs.newShapefileWithParams,
+            label: 'New Shapefile Layer From Parameters',
+            caption: 'Add a new Shapefile vector layer (by file path or URL) and add it to the given JupyterGIS file',
+            sourceType: 'ShapefileSource',
+            layerType: 'VectorLayer',
+            sourceSchema: {
+                type: 'object',
+                required: ['path'],
+                properties: { path: { type: 'string' } },
+            },
+            layerParamsSchema: {
+                color: { type: 'object' },
+                opacity: { type: 'number', default: 1 },
+                symbologyState: { type: 'object' },
+            },
+            buildParameters: (p, id) => {
+                var _a, _b, _c;
+                return ({
+                    source: id,
+                    color: (_a = p.color) !== null && _a !== void 0 ? _a : {},
+                    opacity: (_b = p.opacity) !== null && _b !== void 0 ? _b : 1,
+                    symbologyState: (_c = p.symbologyState) !== null && _c !== void 0 ? _c : { renderType: 'Single Symbol' },
+                });
+            },
+        },
+    ];
+    specs.forEach(spec => createLayerCommand(commands, tracker, trans, spec));
+}

package/lib/constants.js

@@ -22,15 +22,15 @@ const iconObject = {
     [CommandIDs.redo]: { icon: redoIcon },
     [CommandIDs.undo]: { icon: undoIcon },
     [CommandIDs.openLayerBrowser]: { icon: bookOpenIcon },
-    [CommandIDs.newRasterEntry]: { icon: rasterIcon },
-    [CommandIDs.newVectorTileEntry]: { icon: vectorSquareIcon },
-    [CommandIDs.newGeoJSONEntry]: { icon: geoJSONIcon },
-    [CommandIDs.newHillshadeEntry]: { icon: moundIcon },
-    [CommandIDs.newImageEntry]: { iconClass: 'fa fa-image' },
-    [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
-    [CommandIDs.newShapefileEntry]: { iconClass: 'fa fa-file' },
-    [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
-    [CommandIDs.newGeoParquetEntry]: { iconClass: 'fa fa-file' },
+    [CommandIDs.openNewRasterDialog]: { icon: rasterIcon },
+    [CommandIDs.openNewVectorTileDialog]: { icon: vectorSquareIcon },
+    [CommandIDs.openNewGeoJSONDialog]: { icon: geoJSONIcon },
+    [CommandIDs.openNewHillshadeDialog]: { icon: moundIcon },
+    [CommandIDs.openNewImageDialog]: { iconClass: 'fa fa-image' },
+    [CommandIDs.openNewVideoDialog]: { iconClass: 'fa fa-video' },
+    [CommandIDs.openNewShapefileDialog]: { iconClass: 'fa fa-file' },
+    [CommandIDs.openNewGeoTiffDialog]: { iconClass: 'fa fa-image' },
+    [CommandIDs.openNewGeoParquetDialog]: { iconClass: 'fa fa-file' },
     [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
     [CommandIDs.identify]: { icon: infoIcon },
     [CommandIDs.temporalController]: { icon: clockIcon },
@@ -39,6 +39,8 @@ const iconObject = {
     [CommandIDs.toggleStoryPresentationMode]: {
         iconClass: 'fa fa-book jgis-icon-adjust',
     },
+    [CommandIDs.renameSelected]: { iconClass: 'fa fa-pen' },
+    [CommandIDs.removeSelected]: { iconClass: 'fa fa-trash' },
 };
 /**
  * The registered icons

package/lib/dialogs/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 { IBaseFormProps } from "../formbuilder/objectform/baseform";
+import type { IBaseFormProps } from "../types";
 export interface IProcessingFormDialogOptions extends IBaseFormProps {
     formContext: 'update' | 'create';
     schema: IDict;

package/lib/dialogs/ProcessingFormDialog.js

@@ -2,8 +2,8 @@ import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import * as React from 'react';
-import { BaseForm, } from "../formbuilder/objectform/baseform";
 import { DissolveForm } from "../formbuilder/objectform/process";
+import { DefaultProcessingForm } from "../formbuilder/objectform/processingForm";
 const ProcessingFormWrapper = props => {
     var _a;
     const [ready, setReady] = React.useState(false);
@@ -23,7 +23,7 @@ const ProcessingFormWrapper = props => {
             FormComponent = DissolveForm;
             break;
         default:
-            FormComponent = BaseForm;
+            FormComponent = DefaultProcessingForm;
     }
     return (ready && (React.createElement(FormComponent, { formContext: props.formContext, filePath: props.model.filePath, model: props.model, ok: okSignal.current, sourceData: props.sourceData, schema: props.schema, syncData: props.syncData })));
 };

package/lib/dialogs/layerBrowserDialog.d.ts

@@ -9,6 +9,7 @@ interface ILayerBrowserDialogProps {
     formSchemaRegistry: IJGISFormSchemaRegistry;
     okSignalPromise: PromiseDelegate<Signal<Dialog<any>, number>>;
     cancel: () => void;
+    registerConfirmHandler?: (fn: () => void) => void;
 }
 export declare const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps>;
 export interface ILayerBrowserOptions {
@@ -19,6 +20,7 @@ export interface ILayerBrowserOptions {
 export declare class LayerBrowserWidget extends Dialog<boolean> {
     constructor(options: ILayerBrowserOptions);
     resolve(index?: number): void;
+    private _getConfirmHandler;
     private okSignal;
 }
 export {};

package/lib/dialogs/layerBrowserDialog.js

@@ -6,7 +6,7 @@ import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import { CreationFormWrapper } from './layerCreationFormDialog';
 import CUSTOM_RASTER_IMAGE from '../../layer_gallery/custom_raster.png';
-export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel, }) => {
+export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel, registerConfirmHandler, }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [activeLayers, setActiveLayers] = useState([]);
     const [selectedCategory, setSelectedCategory] = useState();
@@ -78,7 +78,7 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
                     maxZoom: 24,
                     minZoom: 0,
                     attribution: '(C) OpenStreetMap contributors',
-                }, okSignalPromise: okSignalPromise, cancel: cancel })));
+                }, okSignalPromise: okSignalPromise, cancel: cancel, registerConfirmHandler: registerConfirmHandler })));
     }
     // Ok is like cancel in the case of gallery item selections
     okSignalPromise.promise.then(value => {
@@ -116,25 +116,32 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
 };
 export class LayerBrowserWidget extends Dialog {
     constructor(options) {
-        let cancelCallback = undefined;
-        cancelCallback = () => {
+        const cancelCallback = () => {
             this.resolve(0);
         };
+        let confirmHandler = null;
+        const registerConfirmHandler = (fn) => {
+            confirmHandler = fn;
+        };
         const okSignalPromise = new PromiseDelegate();
-        const body = (React.createElement(LayerBrowserComponent, { model: options.model, registry: options.registry, formSchemaRegistry: options.formSchemaRegistry, okSignalPromise: okSignalPromise, cancel: cancelCallback }));
+        const body = (React.createElement(LayerBrowserComponent, { model: options.model, registry: options.registry, formSchemaRegistry: options.formSchemaRegistry, okSignalPromise: okSignalPromise, cancel: cancelCallback, registerConfirmHandler: registerConfirmHandler }));
         super({ body, buttons: [Dialog.cancelButton(), Dialog.okButton()] });
         this.id = 'jupytergis::layerBrowser';
+        this._getConfirmHandler = () => confirmHandler;
         this.okSignal = new Signal(this);
         okSignalPromise.resolve(this.okSignal);
         // Override default dialog style
         this.addClass('jGIS-layerbrowser-FormDialog');
     }
     resolve(index) {
+        var _a;
         if (index === 0) {
             super.resolve(index);
         }
         if (index === 1) {
+            (_a = this._getConfirmHandler()) === null || _a === void 0 ? void 0 : _a();
             this.okSignal.emit(1);
+            super.resolve(index);
         }
     }
 }

package/lib/dialogs/layerCreationFormDialog.d.ts

@@ -21,6 +21,12 @@ export interface ICreationFormWrapperProps extends ICreationFormProps {
      * and other form-related parameters.
      */
     dialogOptions?: any;
+    /**
+     * Optional. When provided, the form body can register a handler that the dialog
+     * will invoke when the user clicks OK. If no handler is
+     * registered, only the ok signal is emitted.
+     */
+    registerConfirmHandler?: (fn: () => void) => void;
 }
 export interface ICreationFormDialogOptions extends ICreationFormProps {
     title: string;
@@ -32,5 +38,6 @@ export declare const CreationFormWrapper: React.FC<ICreationFormWrapperProps>;
 export declare class LayerCreationFormDialog extends Dialog<IDict> {
     constructor(options: ICreationFormDialogOptions);
     resolve(index?: number): void;
+    private _getConfirmHandler;
     private okSignal;
 }

package/lib/dialogs/layerCreationFormDialog.js

@@ -16,7 +16,7 @@ export const CreationFormWrapper = props => {
         formErrorSignal.current = formChanged;
         setReady(true);
     });
-    return (ready && (React.createElement(CreationForm, { model: props.model, formSchemaRegistry: props.formSchemaRegistry, createLayer: props.createLayer, createSource: props.createSource, layerType: props.layerType, sourceType: props.sourceType, sourceData: props.sourceData, layerData: props.layerData, ok: okSignal.current, cancel: props.cancel, formErrorSignal: formErrorSignal.current, dialogOptions: props.dialogOptions })));
+    return (ready && (React.createElement(CreationForm, { model: props.model, formSchemaRegistry: props.formSchemaRegistry, createLayer: props.createLayer, createSource: props.createSource, layerType: props.layerType, sourceType: props.sourceType, sourceData: props.sourceData, layerData: props.layerData, cancel: props.cancel, formErrorSignal: formErrorSignal.current, dialogOptions: props.dialogOptions, registerConfirmHandler: props.registerConfirmHandler })));
 };
 /**
  * Form for creating a source, a layer or both at the same time
@@ -26,15 +26,20 @@ export class LayerCreationFormDialog extends Dialog {
         const cancelCallback = () => {
             this.resolve(0);
         };
+        let confirmHandler = null;
+        const registerConfirmHandler = (fn) => {
+            confirmHandler = fn;
+        };
         const okSignalPromise = new PromiseDelegate();
         const formErrorSignalPromise = new PromiseDelegate();
         const body = (React.createElement("div", { style: { overflow: 'auto' } },
-            React.createElement(CreationFormWrapper, { model: options.model, formSchemaRegistry: options.formSchemaRegistry, createLayer: options.createLayer, createSource: options.createSource, layerType: options.layerType, sourceType: options.sourceType, sourceData: options.sourceData, layerData: options.layerData, okSignalPromise: okSignalPromise, cancel: cancelCallback, formErrorSignalPromise: formErrorSignalPromise, dialogOptions: options })));
+            React.createElement(CreationFormWrapper, { model: options.model, formSchemaRegistry: options.formSchemaRegistry, createLayer: options.createLayer, createSource: options.createSource, layerType: options.layerType, sourceType: options.sourceType, sourceData: options.sourceData, layerData: options.layerData, okSignalPromise: okSignalPromise, cancel: cancelCallback, formErrorSignalPromise: formErrorSignalPromise, dialogOptions: options, registerConfirmHandler: registerConfirmHandler })));
         super({
             title: options.title,
             body,
             buttons: [Dialog.cancelButton(), Dialog.okButton()],
         });
+        this._getConfirmHandler = () => confirmHandler;
         this.okSignal = new Signal(this);
         const formErrorSignal = new Signal(this);
         /**
@@ -58,11 +63,14 @@ export class LayerCreationFormDialog extends Dialog {
         this.addClass('jGIS-layer-CreationFormDialog');
     }
     resolve(index) {
+        var _a;
         if (index === 0) {
             super.resolve(index);
         }
         if (index === 1) {
+            (_a = this._getConfirmHandler()) === null || _a === void 0 ? void 0 : _a();
             this.okSignal.emit(1);
+            super.resolve(index);
         }
     }
 }

package/lib/dialogs/symbology/components/color_ramp/ColorRampControls.d.ts

@@ -23,7 +23,7 @@ import { ColorRampName } from '../../colorRampUtils';
 interface IColorRampControlsProps {
     modeOptions: ClassificationMode[];
     layerParams: IDict;
-    classifyFunc: (selectedMode: ClassificationMode, numberOfShades: number, selectedRamp: ColorRampName, setIsLoading: (isLoading: boolean) => void) => void;
+    classifyFunc: (selectedMode: ClassificationMode, numberOfShades: number, selectedRamp: ColorRampName, reverseRamp: boolean, setIsLoading: (isLoading: boolean) => void) => void;
     showModeRow: boolean;
     showRampSelector: boolean;
 }
@@ -31,6 +31,7 @@ export type ColorRampControlsOptions = {
     selectedRamp: ColorRampName;
     numberOfShades: number;
     selectedMode: ClassificationMode;
+    reverseRamp: boolean;
 };
 declare const ColorRampControls: React.FC<IColorRampControlsProps>;
 export default ColorRampControls;

package/lib/dialogs/symbology/components/color_ramp/ColorRampControls.js

@@ -28,25 +28,19 @@ const ColorRampControls = ({ layerParams, modeOptions, classifyFunc, showModeRow
     const [selectedMode, setSelectedMode] = useState('equal interval');
     const [numberOfShades, setNumberOfShades] = useState(9);
     const [isLoading, setIsLoading] = useState(false);
+    const [reverseRamp, setReverseRamp] = useState(false);
     const [warning, setWarning] = useState(null);
+    const symbologyState = layerParams.symbologyState;
     useEffect(() => {
-        if (layerParams.symbologyState) {
+        if (symbologyState) {
             populateOptions();
         }
     }, [
-        layerParams.symbologyState.nClasses,
-        layerParams.symbologyState.mode,
-        layerParams.symbologyState.colorRamp,
+        symbologyState.colorRamp,
+        symbologyState.nClasses,
+        symbologyState.mode,
+        symbologyState.reverseRamp,
     ]);
-    useEffect(() => {
-        var _a;
-        if (!selectedRamp) {
-            return;
-        }
-        const defaultClasses = (_a = COLOR_RAMP_DEFAULTS[selectedRamp]) !== null && _a !== void 0 ? _a : 9;
-        setNumberOfShades(defaultClasses);
-        setWarning(null);
-    }, [selectedRamp]);
     useEffect(() => {
         if (!selectedRamp || !numberOfShades) {
             return;
@@ -65,18 +59,26 @@ const ColorRampControls = ({ layerParams, modeOptions, classifyFunc, showModeRow
         }
     }, [selectedRamp, numberOfShades]);
     const populateOptions = () => {
-        var _a, _b, _c;
-        const { nClasses, mode, colorRamp } = (_a = layerParams.symbologyState) !== null && _a !== void 0 ? _a : {};
+        var _a, _b;
+        const { nClasses, mode, colorRamp, reverseRamp } = symbologyState !== null && symbologyState !== void 0 ? symbologyState : {};
         setNumberOfShades(Number(nClasses !== null && nClasses !== void 0 ? nClasses : 9));
-        setSelectedMode((_b = mode) !== null && _b !== void 0 ? _b : 'equal interval');
-        setSelectedRamp((_c = colorRamp) !== null && _c !== void 0 ? _c : 'viridis');
+        setSelectedMode((_a = mode) !== null && _a !== void 0 ? _a : 'equal interval');
+        setSelectedRamp((_b = colorRamp) !== null && _b !== void 0 ? _b : 'viridis');
+        setReverseRamp(Boolean(reverseRamp !== null && reverseRamp !== void 0 ? reverseRamp : false));
+    };
+    const handleRampChange = (selectedRamp) => {
+        var _a;
+        setSelectedRamp(selectedRamp);
+        const defaultClasses = (_a = COLOR_RAMP_DEFAULTS[selectedRamp]) !== null && _a !== void 0 ? _a : 9;
+        setNumberOfShades(defaultClasses);
+        setWarning(null);
     };
     return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
         showRampSelector && (React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
-            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp }))),
+            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: handleRampChange, reverse: reverseRamp, setReverse: setReverseRamp }))),
         showModeRow && (React.createElement(ModeSelectRow, { modeOptions: modeOptions, numberOfShades: numberOfShades, setNumberOfShades: setNumberOfShades, selectedMode: selectedMode, setSelectedMode: setSelectedMode })),
         warning && (React.createElement("div", { className: "jp-gis-warning", style: { color: 'orange', marginTop: 4 } }, warning)),
-        isLoading ? (React.createElement(LoadingIcon, null)) : (React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !isValidNumberOfShades(numberOfShades) || !selectedMode || !!warning, onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, setIsLoading) }, "Classify"))));
+        isLoading ? (React.createElement(LoadingIcon, null)) : (React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !isValidNumberOfShades(numberOfShades) || !selectedMode || !!warning, onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, reverseRamp, setIsLoading) }, "Classify"))));
 };
 export default ColorRampControls;

package/lib/dialogs/symbology/components/color_ramp/ColorRampSelector.d.ts

@@ -14,7 +14,9 @@ import React from 'react';
 import { ColorRampName } from "../../colorRampUtils";
 interface IColorRampSelectorProps {
     selectedRamp: ColorRampName;
-    setSelected: (item: any) => void;
+    setSelected: (value: ColorRampName) => void;
+    reverse: boolean;
+    setReverse: React.Dispatch<React.SetStateAction<boolean>>;
 }
 declare const ColorRampSelector: React.FC<IColorRampSelectorProps>;
 export default ColorRampSelector;