@jupytergis/base 0.1.1

package/lib/console/consoleview.d.ts

@@ -0,0 +1,24 @@
+import { ConsolePanel } from '@jupyterlab/console';
+import { ServiceManager } from '@jupyterlab/services';
+import { BoxPanel, Widget } from '@lumino/widgets';
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
+import { CommandRegistry } from '@lumino/commands';
+export declare class ConsoleView extends BoxPanel {
+    constructor(options: ConsoleView.IOptions);
+    get consolePanel(): ConsolePanel;
+    dispose(): void;
+    execute(): void;
+    protected onResize(msg: Widget.ResizeMessage): void;
+    private _consolePanel;
+    private _resize;
+}
+export declare namespace ConsoleView {
+    interface IOptions {
+        manager: ServiceManager.IManager;
+        contentFactory: ConsolePanel.IContentFactory;
+        mimeTypeService: IEditorMimeTypeService;
+        rendermime: IRenderMimeRegistry;
+        commandRegistry: CommandRegistry;
+    }
+}

package/lib/console/consoleview.js

@@ -0,0 +1,55 @@
+import { ConsolePanel } from '@jupyterlab/console';
+import { BoxPanel } from '@lumino/widgets';
+import { debounce } from '../tools';
+import { closeIcon, CommandToolbarButton, expandIcon, Toolbar } from '@jupyterlab/ui-components';
+export class ConsoleView extends BoxPanel {
+    constructor(options) {
+        super({ direction: 'top-to-bottom' });
+        this._resize = debounce(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 200);
+        this.addClass('jpgis-console');
+        const { manager, contentFactory, mimeTypeService, rendermime } = options;
+        const clonedRendermime = rendermime.clone();
+        this._consolePanel = new ConsolePanel({
+            manager,
+            contentFactory,
+            mimeTypeService,
+            rendermime: clonedRendermime,
+            kernelPreference: { name: 'python3', shutdownOnDispose: true }
+        });
+        this._consolePanel.console.node.dataset.jpInteractionMode = 'notebook';
+        this.addWidget(this._consolePanel);
+        BoxPanel.setStretch(this._consolePanel, 1);
+        this._consolePanel.toolbar.addItem('spacer', Toolbar.createSpacerItem());
+        this._consolePanel.toolbar.addItem('toggle', new CommandToolbarButton({
+            label: '',
+            icon: expandIcon,
+            id: 'jupytergis:toggleConsole',
+            commands: options.commandRegistry
+        }));
+        this._consolePanel.toolbar.addItem('close', new CommandToolbarButton({
+            label: '',
+            icon: closeIcon,
+            id: 'jupytergis:removeConsole',
+            commands: options.commandRegistry
+        }));
+    }
+    get consolePanel() {
+        return this._consolePanel;
+    }
+    dispose() {
+        if (this.isDisposed) {
+            return;
+        }
+        this._consolePanel.dispose();
+        super.dispose();
+    }
+    execute() {
+        this._consolePanel.console.execute(false);
+    }
+    onResize(msg) {
+        super.onResize(msg);
+        this._resize();
+    }
+}

package/lib/console/index.d.ts

@@ -0,0 +1 @@
+export * from './consoleview';

package/lib/console/index.js

@@ -0,0 +1 @@
+export * from './consoleview';

package/lib/constants.d.ts

@@ -0,0 +1,57 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+/**
+ * The command IDs.
+ */
+export declare namespace CommandIDs {
+    const createNew = "jupytergis:create-new-jGIS-file";
+    const redo = "jupytergis:redo";
+    const undo = "jupytergis:undo";
+    const symbology = "jupytergis:symbology";
+    const openLayerBrowser = "jupytergis:openLayerBrowser";
+    const newRasterEntry = "jupytergis:newRasterEntry";
+    const newVectorTileEntry = "jupytergis:newVectorTileEntry";
+    const newGeoJSONEntry = "jupytergis:newGeoJSONEntry";
+    const newHillshadeEntry = "jupytergis:newHillshadeEntry";
+    const newImageEntry = "jupytergis:newImageEntry";
+    const newVideoEntry = "jupytergis:newVideoEntry";
+    const newGeoTiffEntry = "jupytergis:newGeoTiffEntry";
+    const newRasterSource = "jupytergis:newRasterSource";
+    const newRasterDemSource = "jupytergis:newRasterDemSource";
+    const newVectorSource = "jupytergis:newVectorSource";
+    const newGeoJSONSource = "jupytergis:newGeoJSONSource";
+    const newImageSource = "jupytergis:imageSource";
+    const newVideoSource = "jupytergis:videoSource";
+    const newShapefileSource = "jupytergis:shapefileSource";
+    const newGeoTiffSource = "jupytergis:newGeoTiffSource";
+    const newRasterLayer = "jupytergis:newRasterLayer";
+    const newVectorLayer = "jupytergis:newVectorLayer";
+    const newHillshadeLayer = "jupytergis:newHillshadeLayer";
+    const newImageLayer = "jupytergis:newImageLayer";
+    const newVideoLayer = "jupytergis:newVideoLayer";
+    const newShapefileLayer = "jupytergis:newShapefileLayer";
+    const newWebGlTileLayer = "jupytergis:newWebGlTileLayer";
+    const renameLayer = "jupytergis:renameLayer";
+    const removeLayer = "jupytergis:removeLayer";
+    const renameGroup = "jupytergis:renameGroup";
+    const removeGroup = "jupytergis:removeGroup";
+    const moveLayersToGroup = "jupytergis:moveLayersToGroup";
+    const moveLayerToNewGroup = "jupytergis:moveLayerToNewGroup";
+    const renameSource = "jupytergis:renameSource";
+    const removeSource = "jupytergis:removeSource";
+    const newTerrain = "jupytergis:newTerrain";
+    const removeTerrain = "jupytergis:removeTerrain";
+    const toggleConsole = "jupytergis:toggleConsole";
+    const invokeCompleter = "jupytergis:invokeConsoleCompleter";
+    const removeConsole = "jupytergis:removeConsole";
+    const executeConsole = "jupytergis:executeConsole";
+    const selectCompleter = "jupytergis:selectConsoleCompleter";
+}
+interface IRegisteredIcon {
+    icon?: LabIcon;
+    iconClass?: string;
+}
+/**
+ * The registered icons
+ */
+export declare const icons: Map<string, IRegisteredIcon>;
+export {};

package/lib/constants.js

@@ -0,0 +1,89 @@
+import { redoIcon, undoIcon } from '@jupyterlab/ui-components';
+import { geoJSONIcon, moundIcon, rasterIcon } from './icons';
+/**
+ * The command IDs.
+ */
+export var CommandIDs;
+(function (CommandIDs) {
+    CommandIDs.createNew = 'jupytergis:create-new-jGIS-file';
+    CommandIDs.redo = 'jupytergis:redo';
+    CommandIDs.undo = 'jupytergis:undo';
+    CommandIDs.symbology = 'jupytergis:symbology';
+    // Layers and sources creation commands
+    CommandIDs.openLayerBrowser = 'jupytergis:openLayerBrowser';
+    // Layer and source
+    CommandIDs.newRasterEntry = 'jupytergis:newRasterEntry';
+    CommandIDs.newVectorTileEntry = 'jupytergis:newVectorTileEntry';
+    CommandIDs.newGeoJSONEntry = 'jupytergis:newGeoJSONEntry';
+    CommandIDs.newHillshadeEntry = 'jupytergis:newHillshadeEntry';
+    CommandIDs.newImageEntry = 'jupytergis:newImageEntry';
+    CommandIDs.newVideoEntry = 'jupytergis:newVideoEntry';
+    CommandIDs.newGeoTiffEntry = 'jupytergis:newGeoTiffEntry';
+    // Sources only commands
+    CommandIDs.newRasterSource = 'jupytergis:newRasterSource';
+    CommandIDs.newRasterDemSource = 'jupytergis:newRasterDemSource';
+    CommandIDs.newVectorSource = 'jupytergis:newVectorSource';
+    CommandIDs.newGeoJSONSource = 'jupytergis:newGeoJSONSource';
+    CommandIDs.newImageSource = 'jupytergis:imageSource';
+    CommandIDs.newVideoSource = 'jupytergis:videoSource';
+    CommandIDs.newShapefileSource = 'jupytergis:shapefileSource';
+    CommandIDs.newGeoTiffSource = 'jupytergis:newGeoTiffSource';
+    // Layers only commands
+    CommandIDs.newRasterLayer = 'jupytergis:newRasterLayer';
+    CommandIDs.newVectorLayer = 'jupytergis:newVectorLayer';
+    CommandIDs.newHillshadeLayer = 'jupytergis:newHillshadeLayer';
+    CommandIDs.newImageLayer = 'jupytergis:newImageLayer';
+    CommandIDs.newVideoLayer = 'jupytergis:newVideoLayer';
+    CommandIDs.newShapefileLayer = 'jupytergis:newShapefileLayer';
+    CommandIDs.newWebGlTileLayer = 'jupytergis:newWebGlTileLayer';
+    // Layer and group actions
+    CommandIDs.renameLayer = 'jupytergis:renameLayer';
+    CommandIDs.removeLayer = 'jupytergis:removeLayer';
+    CommandIDs.renameGroup = 'jupytergis:renameGroup';
+    CommandIDs.removeGroup = 'jupytergis:removeGroup';
+    CommandIDs.moveLayersToGroup = 'jupytergis:moveLayersToGroup';
+    CommandIDs.moveLayerToNewGroup = 'jupytergis:moveLayerToNewGroup';
+    // Source actions
+    CommandIDs.renameSource = 'jupytergis:renameSource';
+    CommandIDs.removeSource = 'jupytergis:removeSource';
+    // Terrain stuff
+    CommandIDs.newTerrain = 'jupytergis:newTerrain';
+    CommandIDs.removeTerrain = 'jupytergis:removeTerrain';
+    // Console commands
+    CommandIDs.toggleConsole = 'jupytergis:toggleConsole';
+    CommandIDs.invokeCompleter = 'jupytergis:invokeConsoleCompleter';
+    CommandIDs.removeConsole = 'jupytergis:removeConsole';
+    CommandIDs.executeConsole = 'jupytergis:executeConsole';
+    CommandIDs.selectCompleter = 'jupytergis:selectConsoleCompleter';
+})(CommandIDs || (CommandIDs = {}));
+const iconObject = {
+    RasterSource: { icon: rasterIcon },
+    RasterDemSource: { icon: moundIcon },
+    VectorTileSource: { iconClass: 'fa fa-vector-square' },
+    GeoJSONSource: { icon: geoJSONIcon },
+    ImageSource: { iconClass: 'fa fa-image' },
+    VideoSource: { iconClass: 'fa fa-video' },
+    ShapefileSource: { iconClass: 'fa fa-file' },
+    RasterLayer: { icon: rasterIcon },
+    VectorLayer: { iconClass: 'fa fa-vector-square' },
+    HillshadeLayer: { icon: moundIcon },
+    ImageLayer: { iconClass: 'fa fa-image' },
+    VideoLayer: { iconClass: 'fa fa-video' },
+    [CommandIDs.redo]: { icon: redoIcon },
+    [CommandIDs.undo]: { icon: undoIcon },
+    [CommandIDs.openLayerBrowser]: { iconClass: 'fa fa-book-open' },
+    [CommandIDs.newRasterEntry]: { icon: rasterIcon },
+    [CommandIDs.newVectorTileEntry]: { iconClass: 'fa fa-vector-square' },
+    [CommandIDs.newGeoJSONEntry]: { icon: geoJSONIcon },
+    [CommandIDs.newHillshadeEntry]: { icon: moundIcon },
+    [CommandIDs.newImageEntry]: { iconClass: 'fa fa-image' },
+    [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
+    [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
+    [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
+    [CommandIDs.newTerrain]: { iconClass: 'fa fa-mountain' },
+    [CommandIDs.symbology]: { iconClass: 'fa fa-brush' }
+};
+/**
+ * The registered icons
+ */
+export const icons = new Map(Object.entries(iconObject));

package/lib/dialogs/components/symbology/BandRendering.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISymbologyDialogProps } from '../../symbologyDialog';
+declare const BandRendering: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element;
+export default BandRendering;

package/lib/dialogs/components/symbology/BandRendering.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import SingleBandPseudoColor from './SingleBandPseudoColor';
+const BandRendering = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
+    const [selectedRenderType, setSelectedRenderType] = useState('Singleband Pseudocolor');
+    const [componentToRender, setComponentToRender] = useState(null);
+    let RenderComponent;
+    useEffect(() => {
+        if (!selectedRenderType) {
+            return;
+        }
+        switch (selectedRenderType) {
+            case 'Singleband Pseudocolor':
+                RenderComponent = (React.createElement(SingleBandPseudoColor, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                break;
+            default:
+                RenderComponent = React.createElement("div", null, "Render Type Not Implemented (yet)");
+        }
+        setComponentToRender(RenderComponent);
+    }, [selectedRenderType]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: "render-type-select" }, "Render Type:"),
+            React.createElement("select", { name: "render-type-select", id: "render-type-select", value: selectedRenderType, onChange: event => {
+                    setSelectedRenderType(event.target.value);
+                } }, renderTypes.map((func, funcIndex) => (React.createElement("option", { key: func, value: func }, func))))),
+        componentToRender));
+};
+export default BandRendering;

package/lib/dialogs/components/symbology/BandRow.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IBandRow } from './SingleBandPseudoColor';
+declare const BandRow: ({ index, bandRow, bandRows, setSelectedBand, setBandRows }: {
+    index: number;
+    bandRow: IBandRow;
+    bandRows: IBandRow[];
+    setSelectedBand: (band: number) => void;
+    setBandRows: (bandRows: IBandRow[]) => void;
+}) => React.JSX.Element;
+export default BandRow;

package/lib/dialogs/components/symbology/BandRow.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+const BandRow = ({ index, bandRow, bandRows, setSelectedBand, setBandRows }) => {
+    const [minValue, setMinValue] = useState(bandRow.stats.minimum);
+    const [maxValue, setMaxValue] = useState(bandRow.stats.maximum);
+    const handleMinValueChange = (event) => {
+        setMinValue(+event.target.value);
+        setNewBands();
+    };
+    const handleMaxValueChange = (event) => {
+        setMaxValue(+event.target.value);
+        setNewBands();
+    };
+    const setNewBands = () => {
+        const newBandRows = [...bandRows];
+        newBandRows[index].stats.minimum = minValue;
+        newBandRows[index].stats.maximum = maxValue;
+        setBandRows(newBandRows);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: `band-select-${index}` }, "Band:"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                React.createElement("select", { name: `band-select-${index}`, onChange: event => setSelectedBand(+event.target.value), className: "jp-mod-styled" }, bandRows.map((band, bandIndex) => (React.createElement("option", { key: bandIndex, value: band.band, selected: band.band === bandRow.band, className: "jp-mod-styled" }, `Band ${band.band} (${band.colorInterpretation})`)))))),
+        React.createElement("div", { className: "jp-gis-symbology-row", style: { gap: '0.5rem' } },
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '50%'
+                } },
+                React.createElement("label", { htmlFor: "band-min", style: { alignSelf: 'center' } }, "Min"),
+                React.createElement("input", { type: "number", className: "jp-mod-styled", style: { marginRight: 15 }, value: minValue, onChange: handleMinValueChange })),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '50%',
+                    paddingRight: '2px'
+                } },
+                React.createElement("label", { htmlFor: "band-max", style: { alignSelf: 'center' } }, "Max"),
+                React.createElement("input", { type: "number", className: "jp-mod-styled", 
+                    // defaultValue={bandRow.stats.maximum}
+                    value: maxValue, onChange: handleMaxValueChange, onBlur: setNewBands })))));
+};
+export default BandRow;

package/lib/dialogs/components/symbology/SingleBandPseudoColor.d.ts

@@ -0,0 +1,20 @@
+import { IDict } from '@jupytergis/schema';
+import React from 'react';
+import { ISymbologyDialogProps } from '../../symbologyDialog';
+export interface IStopRow {
+    value: number;
+    color: number[];
+}
+export interface IBandRow {
+    band: number;
+    colorInterpretation: string;
+    stats: {
+        minimum: number;
+        maximum: number;
+        mean: number;
+        stdDev: number;
+    };
+    metadata: IDict;
+}
+declare const SingleBandPseudoColor: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+export default SingleBandPseudoColor;

package/lib/dialogs/components/symbology/SingleBandPseudoColor.js

@@ -0,0 +1,281 @@
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from '@jupyterlab/ui-components';
+import initGdalJs from 'gdal3.js';
+import React, { useEffect, useRef, useState } from 'react';
+import BandRow from './BandRow';
+import StopRow from './StopRow';
+const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const functions = ['discrete', 'linear', 'exact'];
+    const stopRowsRef = useRef();
+    const bandRowsRef = useRef([]);
+    const selectedFunctionRef = useRef();
+    const [selectedFunction, setSelectedFunction] = useState();
+    const [selectedBand, setSelectedBand] = useState(1);
+    const [stopRows, setStopRows] = useState([]);
+    const [bandRows, setBandRows] = useState([]);
+    if (!layerId) {
+        return;
+    }
+    const layer = context.model.getLayer(layerId);
+    if (!layer) {
+        return;
+    }
+    useEffect(() => {
+        getBandInfo();
+        setInitialFunction();
+    }, []);
+    useEffect(() => {
+        bandRowsRef.current = bandRows;
+        buildColorInfo();
+    }, [bandRows]);
+    useEffect(() => {
+        stopRowsRef.current = stopRows;
+    }, [stopRows]);
+    useEffect(() => {
+        selectedFunctionRef.current = selectedFunction;
+    }, [selectedFunction]);
+    const setInitialFunction = () => {
+        var _a;
+        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color)) {
+            return;
+        }
+        const color = layer.parameters.color;
+        if (color[0] === 'interpolate') {
+            setSelectedFunction('linear');
+            return;
+        }
+        // If expression is using 'case' we look at the comparison operator to set selected function
+        // Looking at fourth element because second is for nodata
+        const operator = color[3][0];
+        operator === '<='
+            ? setSelectedFunction('discrete')
+            : setSelectedFunction('exact');
+    };
+    const getBandInfo = async () => {
+        var _a, _b;
+        const bandsArr = [];
+        const source = context.model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
+        const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
+        if (!sourceInfo.url) {
+            return;
+        }
+        let tifData;
+        const tifDataState = (await state.fetch(layerId));
+        if (tifDataState) {
+            tifData = JSON.parse(tifDataState);
+        }
+        else {
+            //! This takes so long, maybe do when adding source instead
+            const Gdal = await initGdalJs({
+                path: 'lab/extensions/@jupytergis/jupytergis-core/static',
+                useWorker: false
+            });
+            const fileData = await fetch(sourceInfo.url);
+            const file = new File([await fileData.blob()], 'loaded.tif');
+            const result = await Gdal.open(file);
+            const tifDataset = result.datasets[0];
+            tifData = await Gdal.gdalinfo(tifDataset, ['-stats']);
+            Gdal.close(tifDataset);
+        }
+        tifData['bands'].forEach((bandData) => {
+            var _a, _b;
+            bandsArr.push({
+                band: bandData.band,
+                colorInterpretation: bandData.colorInterpretation,
+                stats: {
+                    minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
+                    maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
+                    mean: bandData.mean,
+                    stdDev: bandData.stdDev
+                },
+                metadata: bandData.metadata
+            });
+        });
+        setBandRows(bandsArr);
+        console.log('tifData', tifData);
+        console.log('bandsArr', bandsArr);
+    };
+    const buildColorInfo = () => {
+        var _a;
+        // This it to parse a color object on the layer
+        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 valueColorPairs = [];
+        // So if it's not a string then it's an array and we parse
+        // Color[0] is the operator used for the color expression
+        switch (color[0]) {
+            case 'interpolate': {
+                // First element is interpolate for linear selection
+                // Second element is type of interpolation (ie linear)
+                // Third is input value that stop values are compared with
+                // Fourth and Fifth are the transparent value for NoData values
+                // Sixth and on is value:color pairs
+                for (let i = 5; i < color.length; i += 2) {
+                    const obj = {
+                        value: scaleValue(color[i]),
+                        color: color[i + 1]
+                    };
+                    valueColorPairs.push(obj);
+                }
+                break;
+            }
+            case 'case': {
+                // First element is case for discrete and exact selections
+                // Second element is the condition for NoData values
+                // Third element is transparent
+                // Fourth is the condition for actual values
+                // Within that, first is logical operator, second is band, third is value
+                // Fifth is color
+                // Last element is fallback value
+                for (let i = 3; i < color.length - 1; i += 2) {
+                    const obj = {
+                        value: scaleValue(color[i][2]),
+                        color: color[i + 1]
+                    };
+                    valueColorPairs.push(obj);
+                }
+                break;
+            }
+        }
+        setStopRows(valueColorPairs);
+    };
+    const handleOk = () => {
+        var _a, _b, _c, _d;
+        // Update source
+        const bandRow = bandRowsRef.current[selectedBand - 1];
+        if (!bandRow) {
+            return;
+        }
+        const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
+        const source = context.model.getSource(sourceId);
+        if (!source || !source.parameters) {
+            return;
+        }
+        const sourceInfo = source.parameters.urls[0];
+        sourceInfo.min = bandRow.stats.minimum;
+        sourceInfo.max = bandRow.stats.maximum;
+        source.parameters.urls[0] = sourceInfo;
+        context.model.sharedModel.updateSource(sourceId, source);
+        // Update layer
+        if (!layer.parameters) {
+            return;
+        }
+        // TODO: Different viewers will have different types
+        let colorExpr = [];
+        switch (selectedFunctionRef.current) {
+            case 'linear': {
+                colorExpr = ['interpolate', ['linear']];
+                colorExpr.push(['band', selectedBand]);
+                // Set NoData values to transparent
+                colorExpr.push(0.0, [0.0, 0.0, 0.0, 0.0]);
+                (_b = stopRowsRef.current) === null || _b === void 0 ? void 0 : _b.map(stop => {
+                    colorExpr.push(unscaleValue(stop.value));
+                    colorExpr.push(stop.color);
+                });
+                break;
+            }
+            case 'discrete': {
+                colorExpr = ['case'];
+                // Set NoData values to transparent
+                colorExpr.push(['==', ['band', selectedBand], 0]);
+                colorExpr.push([0.0, 0.0, 0.0, 0.0]);
+                (_c = stopRowsRef.current) === null || _c === void 0 ? void 0 : _c.map(stop => {
+                    colorExpr.push([
+                        '<=',
+                        ['band', selectedBand],
+                        unscaleValue(stop.value)
+                    ]);
+                    colorExpr.push(stop.color);
+                });
+                // fallback value
+                colorExpr.push([0, 0, 0]);
+                break;
+            }
+            case 'exact': {
+                colorExpr = ['case'];
+                // Set NoData values to transparent
+                colorExpr.push(['==', ['band', selectedBand], 0]);
+                colorExpr.push([0.0, 0.0, 0.0, 0.0]);
+                (_d = stopRowsRef.current) === null || _d === void 0 ? void 0 : _d.map(stop => {
+                    colorExpr.push([
+                        '==',
+                        ['band', selectedBand],
+                        unscaleValue(stop.value)
+                    ]);
+                    colorExpr.push(stop.color);
+                });
+                // fallback value
+                colorExpr.push([0, 0, 0]);
+                break;
+            }
+        }
+        layer.parameters.color = colorExpr;
+        context.model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    okSignalPromise.promise.then(okSignal => {
+        okSignal.connect(handleOk);
+    });
+    const addStopRow = () => {
+        setStopRows([
+            {
+                value: 0,
+                color: [0, 0, 0, 1]
+            },
+            ...stopRows
+        ]);
+    };
+    const deleteStopRow = (index) => {
+        const newFilters = [...stopRows];
+        newFilters.splice(index, 1);
+        setStopRows(newFilters);
+    };
+    const scaleValue = (bandValue) => {
+        const currentBand = bandRows[selectedBand - 1];
+        if (!currentBand) {
+            return bandValue;
+        }
+        return ((bandValue * (currentBand.stats.maximum - currentBand.stats.minimum)) /
+            (1 - 0) +
+            currentBand.stats.minimum);
+    };
+    const unscaleValue = (value) => {
+        const currentBand = bandRowsRef.current[selectedBand - 1];
+        return ((value * (1 - 0) - currentBand.stats.minimum * (1 - 0)) /
+            (currentBand.stats.maximum - currentBand.stats.minimum));
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("div", { className: "jp-gis-band-container" }, bandRows.length === 0 ? (React.createElement(FontAwesomeIcon, { icon: faSpinner })) : (React.createElement(BandRow
+        // Band numbers are 1 indexed
+        , { 
+            // Band numbers are 1 indexed
+            index: selectedBand - 1, bandRow: bandRows[selectedBand - 1], bandRows: bandRows, setSelectedBand: setSelectedBand, setBandRows: setBandRows }))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: "function-select" }, "Interpolation:"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                React.createElement("select", { name: "function-select", id: "function-select", className: "jp-mod-styled", value: selectedFunction, style: { textTransform: 'capitalize' }, onChange: event => {
+                        setSelectedFunction(event.target.value);
+                    } }, functions.map((func, funcIndex) => (React.createElement("option", { key: func, value: func, style: { textTransform: 'capitalize' } }, func)))))),
+        React.createElement("div", { className: "jp-gis-stop-container" },
+            React.createElement("div", { className: "jp-gis-stop-labels", style: { display: 'flex', gap: 6 } },
+                React.createElement("span", { style: { flex: '0 0 18%' } },
+                    "Value",
+                    ' ',
+                    selectedFunction === 'discrete'
+                        ? '<='
+                        : selectedFunction === 'exact'
+                            ? '='
+                            : ''),
+                React.createElement("span", null, "Output Value")),
+            stopRows.map((stop, index) => (React.createElement(StopRow, { key: `${index}-${stop.color}`, index: index, value: stop.value, outputValue: stop.color, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index) })))),
+        React.createElement("div", { className: "jp-gis-symbology-button-container" },
+            React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addStopRow }, "Add Stop"))));
+};
+export default SingleBandPseudoColor;

package/lib/dialogs/components/symbology/StopRow.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IStopRow } from './SingleBandPseudoColor';
+declare const StopRow: ({ index, value, outputValue, stopRows, setStopRows, deleteRow }: {
+    index: number;
+    value: number;
+    outputValue: number[];
+    stopRows: IStopRow[];
+    setStopRows: (stopRows: IStopRow[]) => void;
+    deleteRow: () => void;
+}) => React.JSX.Element;
+export default StopRow;