@jupytergis/base 0.1.6 → 0.2.0

package/lib/commands.js

@@ -2,7 +2,7 @@ import { showErrorMessage } from '@jupyterlab/apputils';
 import { CommandIDs, icons } from './constants';
 import { CreationFormDialog } from './dialogs/formdialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
-import { SymbologyWidget } from './dialogs/symbologyDialog';
+import { SymbologyWidget } from './dialogs/symbology/symbologyDialog';
 /**
  * Add the commands to the application's command registry.
  */
@@ -11,15 +11,34 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
     const trans = translator.load('jupyterlab');
     const { commands } = app;
     commands.addCommand(CommandIDs.symbology, Object.assign({ label: trans.__('Edit Symbology'), isEnabled: () => {
-            return tracker.currentWidget
-                ? tracker.currentWidget.context.model.sharedModel.editable
-                : false;
+            var _a, _b;
+            const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model;
+            const localState = model === null || model === void 0 ? void 0 : model.sharedModel.awareness.getLocalState();
+            if (!model || !localState || !((_b = localState['selected']) === null || _b === void 0 ? void 0 : _b.value)) {
+                return false;
+            }
+            const selectedLayers = localState['selected'].value;
+            // Can't open more than one symbology dialog at once
+            if (Object.keys(selectedLayers).length > 1) {
+                return false;
+            }
+            const layerId = Object.keys(selectedLayers)[0];
+            const layer = model.getLayer(layerId);
+            if (!layer) {
+                return false;
+            }
+            const isValidLayer = [
+                'VectorLayer',
+                'VectorTileLayer',
+                'WebGlLayer'
+            ].includes(layer.type);
+            return isValidLayer;
         }, execute: Private.createSymbologyDialog(tracker, state) }, icons.get(CommandIDs.symbology)));
     commands.addCommand(CommandIDs.redo, Object.assign({ label: trans.__('Redo'), isEnabled: () => {
             return tracker.currentWidget
                 ? tracker.currentWidget.context.model.sharedModel.editable
                 : false;
-        }, execute: args => {
+        }, execute: () => {
             const current = tracker.currentWidget;
             if (current) {
                 return current.context.model.sharedModel.redo();
@@ -29,12 +48,38 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             return tracker.currentWidget
                 ? tracker.currentWidget.context.model.sharedModel.editable
                 : false;
-        }, execute: args => {
+        }, execute: () => {
             const current = tracker.currentWidget;
             if (current) {
                 return current.context.model.sharedModel.undo();
             }
         } }, icons.get(CommandIDs.undo)));
+    commands.addCommand(CommandIDs.identify, Object.assign({ label: trans.__('Identify'), isToggled: () => {
+            var _a;
+            return ((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model.isIdentifying) || false;
+        }, isEnabled: () => {
+            return tracker.currentWidget
+                ? tracker.currentWidget.context.model.sharedModel.editable
+                : false;
+        }, execute: args => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const luminoEvent = args['_luminoEvent'];
+            if (luminoEvent) {
+                const keysPressed = luminoEvent.keys;
+                if (keysPressed === null || keysPressed === void 0 ? void 0 : keysPressed.includes('Escape')) {
+                    current.context.model.isIdentifying = false;
+                    current.node.classList.remove('jGIS-identify-tool');
+                    commands.notifyCommandChanged(CommandIDs.identify);
+                    return;
+                }
+            }
+            current.node.classList.toggle('jGIS-identify-tool');
+            current.context.model.toggleIdentify();
+            commands.notifyCommandChanged(CommandIDs.identify);
+        } }, icons.get(CommandIDs.identify)));
     /**
      * SOURCES and LAYERS creation commands.
      */
@@ -185,7 +230,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             createSource: true,
             sourceData: {
                 name: 'Custom GeoTiff Source',
-                urls: ['']
+                urls: [{}]
             },
             layerData: { name: 'Custom GeoTiff Layer' },
             sourceType: 'GeoTiffSource',

package/lib/constants.d.ts

@@ -7,6 +7,7 @@ export declare namespace CommandIDs {
     const redo = "jupytergis:redo";
     const undo = "jupytergis:undo";
     const symbology = "jupytergis:symbology";
+    const identify = "jupytergis:identify";
     const openLayerBrowser = "jupytergis:openLayerBrowser";
     const newRasterEntry = "jupytergis:newRasterEntry";
     const newVectorTileEntry = "jupytergis:newVectorTileEntry";
@@ -43,6 +44,7 @@ export declare namespace CommandIDs {
     const removeConsole = "jupytergis:removeConsole";
     const executeConsole = "jupytergis:executeConsole";
     const selectCompleter = "jupytergis:selectConsoleCompleter";
+    const addAnnotation = "jupytergis:addAnnotation";
 }
 interface IRegisteredIcon {
     icon?: LabIcon;

package/lib/constants.js

@@ -9,6 +9,7 @@ export var CommandIDs;
     CommandIDs.redo = 'jupytergis:redo';
     CommandIDs.undo = 'jupytergis:undo';
     CommandIDs.symbology = 'jupytergis:symbology';
+    CommandIDs.identify = 'jupytergis:identify';
     // Layers and sources creation commands
     CommandIDs.openLayerBrowser = 'jupytergis:openLayerBrowser';
     // Layer and source
@@ -52,6 +53,8 @@ export var CommandIDs;
     CommandIDs.removeConsole = 'jupytergis:removeConsole';
     CommandIDs.executeConsole = 'jupytergis:executeConsole';
     CommandIDs.selectCompleter = 'jupytergis:selectConsoleCompleter';
+    // Map Commands
+    CommandIDs.addAnnotation = 'jupytergis:addAnnotation';
 })(CommandIDs || (CommandIDs = {}));
 const iconObject = {
     RasterSource: { icon: rasterIcon },
@@ -77,7 +80,8 @@ const iconObject = {
     [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
     [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
     [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
-    [CommandIDs.symbology]: { iconClass: 'fa fa-brush' }
+    [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
+    [CommandIDs.identify]: { iconClass: 'fa fa-info' }
 };
 /**
  * The registered icons

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

@@ -0,0 +1,13 @@
+import { InterpolationType } from './tiff_layer/types/SingleBandPseudoColor';
+export declare namespace VectorClassifications {
+    const calculateQuantileBreaks: (values: number[], nClasses: number) => number[];
+    const calculateEqualIntervalBreaks: (values: number[], nClasses: number) => number[];
+    const calculateJenksBreaks: (values: number[], nClasses: number) => any[];
+    const calculatePrettyBreaks: (values: number[], nClasses: number) => number[];
+    const calculateLogarithmicBreaks: (values: number[], nClasses: number) => number[];
+}
+export declare namespace GeoTiffClassifications {
+    const classifyQuantileBreaks: (nClasses: number, bandNumber: number, url: string, colorRampType: string) => Promise<number[]>;
+    const classifyContinuousBreaks: (nClasses: number, minimumValue: number, maximumValue: number, colorRampType: InterpolationType) => number[];
+    const classifyEqualIntervalBreaks: (nClasses: number, minimumValue: number, maximumValue: number, colorRampType: InterpolationType) => number[];
+}

package/lib/dialogs/symbology/classificationModes.js

@@ -0,0 +1,326 @@
+// Adapted from https://github.com/qgis/QGIS/blob/master/src/core/classification/
+import { Pool, fromUrl } from 'geotiff';
+export var VectorClassifications;
+(function (VectorClassifications) {
+    VectorClassifications.calculateQuantileBreaks = (values, nClasses) => {
+        // q-th quantile of a data set:
+        // value where q fraction of data is below and (1-q) fraction is above this value
+        // Xq = (1 - r) * X_NI1 + r * X_NI2
+        //   NI1 = (int) (q * (n+1))
+        //   NI2 = NI1 + 1
+        //   r = q * (n+1) - (int) (q * (n+1))
+        // (indices of X: 1...n)
+        const sortedValues = [...values].sort((a, b) => a - b);
+        const breaks = [];
+        if (!sortedValues) {
+            return [];
+        }
+        const n = sortedValues.length;
+        let xq = n > 0 ? sortedValues[0] : 0;
+        for (let i = 1; i < nClasses; i++) {
+            if (n > 1) {
+                const q = i / nClasses;
+                const a = q * (n - 1);
+                const aa = Math.floor(a);
+                const r = a - aa;
+                xq = (1 - r) * sortedValues[aa] + r * sortedValues[aa + 1];
+            }
+            breaks.push(xq);
+        }
+        breaks.push(sortedValues[n - 1]);
+        return breaks;
+    };
+    VectorClassifications.calculateEqualIntervalBreaks = (values, nClasses) => {
+        const minimum = Math.min(...values);
+        const maximum = Math.max(...values);
+        const breaks = [];
+        const step = (maximum - minimum) / nClasses;
+        let value = minimum;
+        for (let i = 0; i < nClasses; i++) {
+            value += step;
+            breaks.push(value);
+        }
+        breaks[nClasses - 1] = maximum;
+        return breaks;
+    };
+    VectorClassifications.calculateJenksBreaks = (values, nClasses) => {
+        const maximum = Math.max(...values);
+        if (values.length === 0) {
+            return [];
+        }
+        if (nClasses <= 1) {
+            return [maximum];
+        }
+        if (nClasses >= values.length) {
+            return values;
+        }
+        const sample = [...values].sort((a, b) => a - b);
+        const n = sample.length;
+        const matrixOne = Array.from({ length: n + 1 }, () => Array(nClasses + 1).fill(0));
+        const matrixTwo = Array.from({ length: n + 1 }, () => Array(nClasses + 1).fill(Number.MAX_VALUE));
+        for (let i = 1; i <= nClasses; i++) {
+            matrixOne[0][i] = 1;
+            matrixOne[1][i] = 1;
+            matrixTwo[0][i] = 0.0;
+            for (let j = 2; j <= n; j++) {
+                matrixTwo[j][i] = Number.MAX_VALUE;
+            }
+        }
+        for (let l = 2; l <= n; l++) {
+            let s1 = 0.0;
+            let s2 = 0.0;
+            let w = 0;
+            let v = 0.0;
+            for (let m = 1; m <= l; m++) {
+                const i3 = l - m + 1;
+                const val = sample[i3 - 1];
+                s2 += val * val;
+                s1 += val;
+                w++;
+                v = s2 - (s1 * s1) / w;
+                const i4 = i3 - 1;
+                if (i4 !== 0) {
+                    for (let j = 2; j <= nClasses; j++) {
+                        if (matrixTwo[l][j] >= v + matrixTwo[i4][j - 1]) {
+                            matrixOne[l][j] = i4;
+                            matrixTwo[l][j] = v + matrixTwo[i4][j - 1];
+                        }
+                    }
+                }
+            }
+            matrixOne[l][1] = 1;
+            matrixTwo[l][1] = v;
+        }
+        const breaks = Array(nClasses);
+        breaks[nClasses - 1] = sample[n - 1];
+        for (let j = nClasses, k = n; j >= 2; j--) {
+            const id = matrixOne[k][j] - 1;
+            breaks[j - 2] = sample[id];
+            k = matrixOne[k][j] - 1;
+        }
+        return breaks;
+    };
+    VectorClassifications.calculatePrettyBreaks = (values, nClasses) => {
+        const minimum = Math.min(...values);
+        const maximum = Math.max(...values);
+        const breaks = [];
+        if (nClasses < 1) {
+            breaks.push(maximum);
+            return breaks;
+        }
+        const minimumCount = Math.floor(nClasses / 3);
+        const shrink = 0.75;
+        const highBias = 1.5;
+        const adjustBias = 0.5 + 1.5 * highBias;
+        const divisions = nClasses;
+        const h = highBias;
+        let cell;
+        let small = false;
+        const dx = maximum - minimum;
+        let U;
+        cell = Math.max(Math.abs(minimum), Math.abs(maximum));
+        if (adjustBias >= 1.5 * h + 0.5) {
+            U = 1 + 1.0 / (1 + h);
+        }
+        else {
+            U = 1 + 1.5 / (1 + adjustBias);
+        }
+        small = dx < cell * U * Math.max(1, divisions) * 1e-7 * 3.0;
+        if (small) {
+            if (cell > 10) {
+                cell = 9 + cell / 10;
+                cell = cell * shrink;
+            }
+            if (minimumCount > 1) {
+                cell = cell / minimumCount;
+            }
+        }
+        else {
+            cell = dx;
+            if (divisions > 1) {
+                cell = cell / divisions;
+            }
+        }
+        if (cell < 20 * 1e-7) {
+            cell = 20 * 1e-7;
+        }
+        const base = Math.pow(10.0, Math.floor(Math.log10(cell)));
+        let unit = base;
+        if (2 * base - cell < h * (cell - unit)) {
+            unit = 2.0 * base;
+            if (5 * base - cell < adjustBias * (cell - unit)) {
+                unit = 5.0 * base;
+                if (10.0 * base - cell < h * (cell - unit)) {
+                    unit = 10.0 * base;
+                }
+            }
+        }
+        let start = Math.floor(minimum / unit + 1e-7);
+        let end = Math.ceil(maximum / unit - 1e-7);
+        while (start * unit > minimum + 1e-7 * unit) {
+            start = start - 1;
+        }
+        while (end * unit < maximum - 1e-7 * unit) {
+            end = end + 1;
+        }
+        let k = Math.floor(0.5 + end - start);
+        if (k < minimumCount) {
+            k = minimumCount - k;
+            if (start >= 0) {
+                end = end + k / 2;
+                start = start - k / 2 + (k % 2);
+            }
+            else {
+                start = start - k / 2;
+                end = end + k / 2 + (k % 2);
+            }
+        }
+        const minimumBreak = start * unit;
+        const count = end - start;
+        for (let i = 1; i < count + 1; i++) {
+            breaks.push(minimumBreak + i * unit);
+        }
+        if (breaks.length === 0) {
+            return breaks;
+        }
+        if (breaks[0] < minimum) {
+            breaks[0] = minimum;
+        }
+        if (breaks[breaks.length - 1] > maximum) {
+            breaks[breaks.length - 1] = maximum;
+        }
+        if (minimum < 0.0 && maximum > 0.0) {
+            const breaksMinusZero = breaks.map(b => b - 0.0);
+            let posOfMin = 0;
+            for (let i = 1; i < breaks.length; i++) {
+                if (Math.abs(breaksMinusZero[i]) < Math.abs(breaksMinusZero[posOfMin])) {
+                    posOfMin = i;
+                }
+            }
+            breaks[posOfMin] = 0.0; // Set the closest break to zero
+        }
+        return breaks;
+    };
+    VectorClassifications.calculateLogarithmicBreaks = (values, nClasses) => {
+        const minimum = Math.min(...values);
+        const maximum = Math.max(...values);
+        let positiveMinimum = Number.MAX_VALUE;
+        let breaks = [];
+        positiveMinimum = minimum;
+        const actualLogMin = Math.log10(positiveMinimum);
+        let logMin = Math.floor(actualLogMin);
+        const logMax = Math.ceil(Math.log10(maximum));
+        let prettyBreaks = VectorClassifications.calculatePrettyBreaks([logMin, logMax], nClasses);
+        while (prettyBreaks.length > 0 && prettyBreaks[0] < actualLogMin) {
+            logMin += 1.0;
+            prettyBreaks = VectorClassifications.calculatePrettyBreaks([logMin, logMax], nClasses);
+        }
+        breaks = prettyBreaks;
+        for (let i = 0; i < breaks.length; i++) {
+            breaks[i] = Math.pow(10, breaks[i]);
+        }
+        return breaks;
+    };
+})(VectorClassifications || (VectorClassifications = {}));
+export var GeoTiffClassifications;
+(function (GeoTiffClassifications) {
+    GeoTiffClassifications.classifyQuantileBreaks = async (nClasses, bandNumber, url, colorRampType) => {
+        const breaks = [];
+        const isDiscrete = colorRampType === 'discrete';
+        const pool = new Pool();
+        const tiff = await fromUrl(url);
+        const image = await tiff.getImage();
+        const values = await image.readRasters({ pool });
+        // Band numbers are 1 indexed
+        const bandValues = values[bandNumber - 1];
+        const bandSortedValues = bandValues
+            .filter(value => value !== 0)
+            .sort((a, b) => a - b);
+        pool.destroy();
+        if (!bandSortedValues) {
+            return [];
+        }
+        // Adapted from https://github.com/GeoTIFF/geoblaze/blob/master/src/histogram/histogram.core.js#L64
+        // iterate through values and use a counter to
+        // decide when to set up the next bin.
+        let numValuesInCurrentBin;
+        let valuesPerBin;
+        let startIndex;
+        if (isDiscrete) {
+            valuesPerBin = bandSortedValues.length / nClasses;
+            numValuesInCurrentBin = 0;
+            startIndex = 0;
+        }
+        else {
+            valuesPerBin = bandSortedValues.length / (nClasses - 1);
+            breaks.push(1);
+            numValuesInCurrentBin = 1;
+            startIndex = 1;
+        }
+        for (let i = startIndex; i < bandSortedValues.length; i++) {
+            if (numValuesInCurrentBin + 1 < valuesPerBin) {
+                numValuesInCurrentBin++;
+            }
+            else {
+                breaks.push(bandSortedValues[i]);
+                numValuesInCurrentBin = 0;
+            }
+        }
+        if (breaks.length !== nClasses) {
+            //TODO: This should be set based on the type of bandSortedValues I think
+            breaks.push(65535);
+        }
+        return breaks;
+    };
+    GeoTiffClassifications.classifyContinuousBreaks = (nClasses, minimumValue, maximumValue, colorRampType) => {
+        const min = minimumValue;
+        const max = maximumValue;
+        if (min > max) {
+            return [];
+        }
+        const isDiscrete = colorRampType === 'discrete';
+        const breaks = [];
+        const numberOfEntries = nClasses;
+        if (isDiscrete) {
+            const intervalDiff = ((max - min) * (numberOfEntries - 1)) / numberOfEntries;
+            for (let i = 1; i < numberOfEntries; i++) {
+                const val = i / numberOfEntries;
+                breaks.push(min + val * intervalDiff);
+            }
+            breaks.push(max);
+        }
+        else {
+            for (let i = 0; i <= numberOfEntries; i++) {
+                if (i === 26) {
+                    continue;
+                }
+                const val = i / numberOfEntries;
+                breaks.push(min + val * (max - min));
+            }
+        }
+        return breaks;
+    };
+    GeoTiffClassifications.classifyEqualIntervalBreaks = (nClasses, minimumValue, maximumValue, colorRampType) => {
+        const min = minimumValue;
+        const max = maximumValue;
+        if (min > max) {
+            return [];
+        }
+        const isDiscrete = colorRampType === 'discrete';
+        const breaks = [];
+        if (isDiscrete) {
+            const intervalDiff = (max - min) / nClasses;
+            for (let i = 1; i < nClasses; i++) {
+                breaks.push(min + i * intervalDiff);
+            }
+            breaks.push(max);
+        }
+        else {
+            const intervalDiff = (max - min) / (nClasses - 1);
+            for (let i = 0; i < nClasses; i++) {
+                breaks.push(min + i * intervalDiff);
+            }
+        }
+        return breaks;
+    };
+})(GeoTiffClassifications || (GeoTiffClassifications = {}));

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface IColorMap {
+    name: string;
+    colors: string[];
+}
+interface ICanvasSelectComponentProps {
+    selectedRamp: string;
+    setSelected: (item: any) => void;
+}
+declare const CanvasSelectComponent: ({ selectedRamp, setSelected }: ICanvasSelectComponentProps) => React.JSX.Element;
+export default CanvasSelectComponent;

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

@@ -0,0 +1,119 @@
+import { Button } from '@jupyterlab/ui-components';
+import colormap from 'colormap';
+import React, { useEffect, useRef, useState } from 'react';
+import ColorRampEntry from './ColorRampEntry';
+const CanvasSelectComponent = ({ selectedRamp, setSelected }) => {
+    const colorRampNames = [
+        'jet',
+        // 'hsv', 11 steps min
+        'hot',
+        'cool',
+        'spring',
+        'summer',
+        'autumn',
+        'winter',
+        'bone',
+        'copper',
+        'greys',
+        'YiGnBu',
+        'greens',
+        'YiOrRd',
+        'bluered',
+        'RdBu',
+        // 'picnic', 11 steps min
+        'rainbow',
+        'portland',
+        'blackbody',
+        'earth',
+        'electric',
+        'viridis',
+        'inferno',
+        'magma',
+        'plasma',
+        'warm',
+        // 'rainbow-soft', 11 steps min
+        'bathymetry',
+        'cdom',
+        'chlorophyll',
+        'density',
+        'freesurface-blue',
+        'freesurface-red',
+        'oxygen',
+        'par',
+        'phase',
+        'salinity',
+        'temperature',
+        'turbidity',
+        'velocity-blue',
+        'velocity-green'
+        // 'cubehelix' 16 steps min
+    ];
+    const containerRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [colorMaps, setColorMaps] = useState([]);
+    useEffect(() => {
+        const colorMapList = [];
+        colorRampNames.forEach(name => {
+            const colorRamp = colormap({
+                colormap: name,
+                nshades: 255,
+                format: 'rgbaString'
+            });
+            const colorMap = { name: name, colors: colorRamp };
+            colorMapList.push(colorMap);
+            setColorMaps(colorMapList);
+        });
+    }, []);
+    useEffect(() => {
+        if (colorMaps.length > 0) {
+            updateCanvas(selectedRamp);
+        }
+    }, [selectedRamp]);
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+    const selectItem = (item) => {
+        setSelected(item);
+        setIsOpen(false);
+        updateCanvas(item);
+    };
+    const handleOutsideClick = (event) => {
+        if (!containerRef.current) {
+            return;
+        }
+        if (!containerRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    const updateCanvas = (rampName) => {
+        // update canvas for displayed color ramp
+        const canvas = document.getElementById('cv');
+        if (!canvas) {
+            return;
+        }
+        canvas.style.visibility = 'hidden';
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        const ramp = colorMaps.filter(c => c.name === rampName);
+        for (let i = 0; i <= 255; i++) {
+            ctx.beginPath();
+            const color = ramp[0].colors[i];
+            ctx.fillStyle = color;
+            ctx.fillRect(i * 2, 0, 2, 50);
+        }
+        canvas.style.visibility = 'initial';
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => {
+            document.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, []);
+    return (React.createElement("div", { ref: containerRef, className: "jp-gis-canvas-button-wrapper" },
+        React.createElement(Button, { id: "jp-gis-canvas-button", onClick: toggleDropdown, className: "jp-Dialog-button jp-gis-canvas-button" },
+            React.createElement("canvas", { id: "cv", className: "jp-gis-color-canvas-display", height: "30" })),
+        React.createElement("div", { className: `jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}` }, colorMaps.map((item, index) => (React.createElement(ColorRampEntry, { index: index, colorMap: item, onClick: selectItem }))))));
+};
+export default CanvasSelectComponent;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IDict } from '@jupytergis/schema';
+interface IColorRampProps {
+    modeOptions: string[];
+    layerParams: IDict;
+    classifyFunc: (selectedMode: string, numberOfShades: string, selectedRamp: string, setIsLoading: (isLoading: boolean) => void) => void;
+    showModeRow: boolean;
+}
+export type ColorRampOptions = {
+    selectedRamp: string;
+    numberOfShades: string;
+    selectedMode: string;
+};
+declare const ColorRamp: ({ layerParams, modeOptions, classifyFunc, showModeRow }: IColorRampProps) => React.JSX.Element;
+export default ColorRamp;

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

@@ -0,0 +1,33 @@
+import { Button } from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
+import CanvasSelectComponent from './CanvasSelectComponent';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ModeSelectRow from './ModeSelectRow';
+const ColorRamp = ({ layerParams, modeOptions, classifyFunc, showModeRow }) => {
+    const [selectedRamp, setSelectedRamp] = useState('');
+    const [selectedMode, setSelectedMode] = useState('');
+    const [numberOfShades, setNumberOfShades] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        populateOptions();
+    }, []);
+    const populateOptions = async () => {
+        let nClasses, singleBandMode, colorRamp;
+        if (layerParams.symbologyState) {
+            nClasses = layerParams.symbologyState.nClasses;
+            singleBandMode = layerParams.symbologyState.mode;
+            colorRamp = layerParams.symbologyState.colorRamp;
+        }
+        setNumberOfShades(nClasses ? nClasses : '9');
+        setSelectedMode(singleBandMode ? singleBandMode : 'equal interval');
+        setSelectedRamp(colorRamp ? colorRamp : 'cool');
+    };
+    return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
+            React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
+        showModeRow && (React.createElement(ModeSelectRow, { modeOptions: modeOptions, numberOfShades: numberOfShades, setNumberOfShades: setNumberOfShades, selectedMode: selectedMode, setSelectedMode: setSelectedMode })),
+        isLoading ? (React.createElement(FontAwesomeIcon, { icon: faSpinner, className: "jp-gis-loading-spinner" })) : (React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, setIsLoading) }, "Classify"))));
+};
+export default ColorRamp;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IColorMap } from './CanvasSelectComponent';
+interface IColorRampEntryProps {
+    index: number;
+    colorMap: IColorMap;
+    onClick: (item: any) => void;
+}
+declare const ColorRampEntry: ({ index, colorMap, onClick }: IColorRampEntryProps) => React.JSX.Element;
+export default ColorRampEntry;