@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/dialogs/symbology/symbologyUtils.js

@@ -1,180 +0,0 @@
-import colormap from 'colormap';
-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.
- */
-export function getEffectiveSymbologyParams(model, layerId, layer, isStorySegmentOverride, segmentId) {
-    var _a, _b, _c;
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-        return null;
-    }
-    if (!isStorySegmentOverride) {
-        return layer.parameters;
-    }
-    if (!segmentId) {
-        return null;
-    }
-    const segment = model.getLayer(segmentId);
-    const override = (_b = (_a = segment === null || segment === void 0 ? void 0 : segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b.find((override) => override.targetLayer === layerId);
-    if (!override.symbologyState) {
-        override.symbologyState = {};
-    }
-    return (_c = override) !== null && _c !== void 0 ? _c : null;
-}
-export function saveSymbology(options) {
-    const { model, layerId, isStorySegmentOverride, segmentId, payload, mutateLayerBeforeSave, } = options;
-    if (!isStorySegmentOverride) {
-        const layer = model.getLayer(layerId);
-        if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-            return;
-        }
-        layer.parameters.symbologyState = payload.symbologyState;
-        if (payload.color !== undefined) {
-            layer.parameters.color = payload.color;
-        }
-        mutateLayerBeforeSave === null || mutateLayerBeforeSave === void 0 ? void 0 : mutateLayerBeforeSave(layer);
-        model.sharedModel.updateLayer(layerId, layer);
-        return;
-    }
-    if (!segmentId) {
-        return;
-    }
-    const segment = model.getLayer(segmentId);
-    if (!(segment === null || segment === void 0 ? void 0 : segment.parameters)) {
-        return;
-    }
-    if (!segment.parameters.layerOverride) {
-        segment.parameters.layerOverride = [];
-    }
-    // Find the override for the target layer (from the selected layer in the dialog)
-    const targetLayerId = model.selected
-        ? Object.keys(model.selected).find(id => { var _a; return id !== segmentId && ((_a = model.getLayer(id)) === null || _a === void 0 ? void 0 : _a.type) !== 'StorySegmentLayer'; })
-        : undefined;
-    if (!targetLayerId) {
-        return;
-    }
-    const overrides = segment.parameters.layerOverride;
-    let override = overrides.find((override) => override.targetLayer === targetLayerId);
-    if (!override) {
-        // Create new override entry
-        override = {
-            targetLayer: targetLayerId,
-            visible: true,
-            opacity: 1,
-        };
-        overrides.push(override);
-    }
-    override.symbologyState = payload.symbologyState;
-    if (payload.color !== undefined) {
-        override.color = payload.color;
-    }
-    model.sharedModel.updateLayer(segmentId, segment);
-}
-export var 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;
-            }
-            switch (color[key][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 on is value:color pairs
-                    for (let i = COLOR_EXPR_STOPS_START; i < color[key].length; i += 2) {
-                        const pairKey = `${color[key][i]}-${color[key][i + 1]}`;
-                        if (!seenPairs.has(pairKey)) {
-                            valueColorPairs.push({
-                                stop: color[key][i],
-                                output: color[key][i + 1],
-                            });
-                            seenPairs.add(pairKey);
-                        }
-                    }
-                    break;
-                case 'case':
-                    for (let i = 1; i < color[key].length - 1; i += 2) {
-                        const pairKey = `${color[key][i][2]}-${color[key][i + 1]}`;
-                        if (!seenPairs.has(pairKey)) {
-                            valueColorPairs.push({
-                                stop: color[key][i][2],
-                                output: color[key][i + 1],
-                            });
-                            seenPairs.add(pairKey);
-                        }
-                    }
-                    break;
-            }
-        }
-        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 = {
-                stop: circleRadius[i],
-                output: circleRadius[i + 1],
-            };
-            stopOutputPairs.push(obj);
-        }
-        return stopOutputPairs;
-    };
-})(VectorUtils || (VectorUtils = {}));
-export var Utils;
-(function (Utils) {
-    Utils.getValueColorPairs = (stops, selectedRamp, nClasses, reverse = false) => {
-        let colorMap = colormap({
-            colormap: selectedRamp,
-            nshades: nClasses > 9 ? nClasses : 9,
-            format: 'rgba',
-        });
-        if (reverse) {
-            colorMap = [...colorMap].reverse();
-        }
-        const valueColorPairs = [];
-        // colormap requires 9 classes to generate the ramp
-        // so we do some tomfoolery to make it work with less than 9 stops
-        if (nClasses < 9) {
-            const midIndex = Math.floor(nClasses / 2);
-            // Get the first n/2 elements from the second array
-            const firstPart = colorMap.slice(0, midIndex);
-            // Get the last n/2 elements from the second array
-            const secondPart = colorMap.slice(colorMap.length - (stops.length - firstPart.length));
-            // Create the new array by combining the first and last parts
-            colorMap = firstPart.concat(secondPart);
-        }
-        for (let i = 0; i < nClasses; i++) {
-            valueColorPairs.push({ stop: stops[i], output: colorMap[i] });
-        }
-        return valueColorPairs;
-    };
-})(Utils || (Utils = {}));

package/lib/dialogs/symbology/tiff_layer/TiffRendering.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from "../symbologyDialog";
-declare const TiffRendering: React.FC<ISymbologyDialogProps>;
-export default TiffRendering;

package/lib/dialogs/symbology/tiff_layer/TiffRendering.js

@@ -1,42 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import MultibandColor from './types/MultibandColor';
-import SingleBandPseudoColor from './types/SingleBandPseudoColor';
-const TiffRendering = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
-    const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
-    const [selectedRenderType, setSelectedRenderType] = useState();
-    const [componentToRender, setComponentToRender] = useState(null);
-    let RenderComponent;
-    if (!layerId) {
-        return;
-    }
-    useEffect(() => {
-        var _a, _b;
-        const layer = model.getLayer(layerId);
-        const renderType = (_b = (_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) === null || _b === void 0 ? void 0 : _b.renderType;
-        setSelectedRenderType(renderType !== null && renderType !== void 0 ? renderType : 'Singleband Pseudocolor');
-    }, []);
-    useEffect(() => {
-        if (!selectedRenderType) {
-            return;
-        }
-        switch (selectedRenderType) {
-            case 'Singleband Pseudocolor':
-                RenderComponent = (React.createElement(SingleBandPseudoColor, { model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
-                break;
-            case 'Multiband Color':
-                RenderComponent = (React.createElement(MultibandColor, { model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
-                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 TiffRendering;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IBandRow } from "../../hooks/useGetBandInfo";
-interface IBandRowProps {
-    label: string;
-    index: number;
-    bandRow: IBandRow;
-    bandRows: IBandRow[];
-    setSelectedBand: (band: number) => void;
-    setBandRows: (bandRows: IBandRow[]) => void;
-    isMultibandColor?: boolean;
-}
-/**
- *
- * @param label Label displayed in symbology dialog
- * @param index Index of current row in band row data
- * @param bandRow Band from bands array, will be undefined when band is 'unset' in Multiband color
- * @param bandRows Bands array from tiff data
- * @param setSelectedBand Function to set selected band parent
- * @param setBandRows Function to update band rows in parent
- * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
- */
-declare const BandRow: React.FC<IBandRowProps>;
-export default BandRow;

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

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-/**
- *
- * @param label Label displayed in symbology dialog
- * @param index Index of current row in band row data
- * @param bandRow Band from bands array, will be undefined when band is 'unset' in Multiband color
- * @param bandRows Bands array from tiff data
- * @param setSelectedBand Function to set selected band parent
- * @param setBandRows Function to update band rows in parent
- * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
- */
-const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows, isMultibandColor, }) => {
-    const [minValue, setMinValue] = useState(bandRow === null || bandRow === void 0 ? void 0 : bandRow.stats.minimum);
-    const [maxValue, setMaxValue] = useState(bandRow === null || bandRow === void 0 ? void 0 : 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}` },
-                label,
-                ":"),
-            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 === null || bandRow === void 0 ? void 0 : bandRow.band), className: "jp-mod-styled" }, band.colorInterpretation
-                        ? `Band ${band.band} (${band.colorInterpretation})`
-                        : `Band ${band.band}`))),
-                    isMultibandColor ? (React.createElement("option", { key: 'unset', value: -1, selected: !bandRow, className: "jp-mod-styled" }, "Unset")) : null))),
-        isMultibandColor ? null : (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/symbology/tiff_layer/types/MultibandColor.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from "../../symbologyDialog";
-declare const MultibandColor: React.FC<ISymbologyDialogProps>;
-export default MultibandColor;

package/lib/dialogs/symbology/tiff_layer/types/MultibandColor.js

@@ -1,92 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import useGetBandInfo from "../../hooks/useGetBandInfo";
-import { useOkSignal } from "../../hooks/useOkSignal";
-import { saveSymbology, } from "../../symbologyUtils";
-import BandRow from "../components/BandRow";
-import { LoadingOverlay } from "../../../../shared/components/loading";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
-const MultibandColor = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    const params = useEffectiveSymbologyParams({
-        model,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    if (!params || !layer) {
-        return;
-    }
-    const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
-    const [selectedBands, setSelectedBands] = useState({
-        red: 1,
-        green: 2,
-        blue: 3,
-        alpha: 4,
-    });
-    const numOfBandsRef = useLatest(bandRows.length);
-    const selectedBandsRef = useLatest(selectedBands);
-    useEffect(() => {
-        populateOptions();
-    }, []);
-    const populateOptions = async () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const layerParams = params;
-        const red = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.redBand) !== null && _b !== void 0 ? _b : 1;
-        const green = (_d = (_c = layerParams.symbologyState) === null || _c === void 0 ? void 0 : _c.greenBand) !== null && _d !== void 0 ? _d : 2;
-        const blue = (_f = (_e = layerParams.symbologyState) === null || _e === void 0 ? void 0 : _e.blueBand) !== null && _f !== void 0 ? _f : 3;
-        const alpha = (_h = (_g = layerParams.symbologyState) === null || _g === void 0 ? void 0 : _g.alphaBand) !== null && _h !== void 0 ? _h : 4;
-        setSelectedBands({ red, green, blue, alpha });
-    };
-    const updateBand = (color, value) => {
-        setSelectedBands(prevBands => (Object.assign(Object.assign({}, prevBands), { [color]: value })));
-    };
-    const handleOk = () => {
-        const colorExpr = ['array'];
-        const colors = ['red', 'green', 'blue'];
-        colors.forEach(color => {
-            const bandValue = selectedBandsRef.current[color];
-            colorExpr.push(bandValue !== 0 ? ['band', bandValue] : 0);
-        });
-        // Push alpha if selected, else default to 0
-        if (selectedBandsRef.current.alpha) {
-            colorExpr.push(['band', selectedBandsRef.current.alpha]);
-        }
-        else {
-            colorExpr.push(['band', numOfBandsRef.current + 1]);
-        }
-        const symbologyState = {
-            renderType: 'Multiband Color',
-            redBand: selectedBandsRef.current.red,
-            greenBand: selectedBandsRef.current.green,
-            blueBand: selectedBandsRef.current.blue,
-            alphaBand: selectedBandsRef.current.alpha,
-        };
-        saveSymbology({
-            model,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: colorExpr,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                targetLayer.type = 'WebGlLayer';
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("div", { className: "jp-gis-band-container" },
-            React.createElement(LoadingOverlay, { loading: loading }),
-            React.createElement(BandRow, { label: "Red Band", index: selectedBands.red - 1, bandRow: bandRows[selectedBands.red - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Green Band", index: selectedBands.green - 1, bandRow: bandRows[selectedBands.green - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Blue Band", index: selectedBands.blue - 1, bandRow: bandRows[selectedBands.blue - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Alpha Band", index: selectedBands.alpha - 1, bandRow: bandRows[selectedBands.alpha - 1], bandRows: bandRows, setSelectedBand: val => updateBand('alpha', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }))));
-};
-export default MultibandColor;

package/lib/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from "../../symbologyDialog";
-export type InterpolationType = 'discrete' | 'linear' | 'exact';
-declare const SingleBandPseudoColor: React.FC<ISymbologyDialogProps>;
-export default SingleBandPseudoColor;