@jupytergis/base 0.14.1 → 0.16.0-alpha.0

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

@@ -2,7 +2,8 @@
 import { Pool, fromUrl } from 'geotiff';
 export var VectorClassifications;
 (function (VectorClassifications) {
-    VectorClassifications.calculateQuantileBreaks = (values, nClasses) => {
+    VectorClassifications.calculateQuantileBreaks = (values, nStops) => {
+        // Returns nStops anchor points: vmin, (nStops-2) interior quantile boundaries, vmax.
         // 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
@@ -11,54 +12,56 @@ export var VectorClassifications;
         //   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) {
+        if (sortedValues.length === 0) {
             return [];
         }
         const n = sortedValues.length;
-        let xq = n > 0 ? sortedValues[0] : 0;
-        for (let i = 1; i < nClasses; i++) {
+        const breaks = [sortedValues[0]]; // vmin
+        for (let i = 1; i < nStops - 1; i++) {
             if (n > 1) {
-                const q = i / nClasses;
+                const q = i / (nStops - 1);
                 const a = q * (n - 1);
                 const aa = Math.floor(a);
                 const r = a - aa;
-                xq = (1 - r) * sortedValues[aa] + r * sortedValues[aa + 1];
+                const xq = (1 - r) * sortedValues[aa] +
+                    r * sortedValues[Math.min(aa + 1, n - 1)];
+                breaks.push(xq);
             }
-            breaks.push(xq);
         }
-        breaks.push(sortedValues[n - 1]);
+        breaks.push(sortedValues[n - 1]); // vmax
         return breaks;
     };
-    VectorClassifications.calculateEqualIntervalBreaks = (values, nClasses) => {
+    VectorClassifications.calculateEqualIntervalBreaks = (values, nStops) => {
+        // Returns nStops evenly-spaced anchor points from vmin to vmax (linspace contract).
         const minimum = Math.min(...values);
         const maximum = Math.max(...values);
+        if (nStops <= 1) {
+            return [minimum];
+        }
         const breaks = [];
-        const step = (maximum - minimum) / nClasses;
-        let value = minimum;
-        for (let i = 0; i < nClasses; i++) {
-            value += step;
-            breaks.push(value);
+        const step = (maximum - minimum) / (nStops - 1);
+        for (let i = 0; i < nStops; i++) {
+            breaks.push(minimum + i * step);
         }
-        breaks[nClasses - 1] = maximum;
+        breaks[nStops - 1] = maximum; // pin to avoid floating-point drift
         return breaks;
     };
-    VectorClassifications.calculateJenksBreaks = (values, nClasses) => {
+    VectorClassifications.calculateJenksBreaks = (values, nStops) => {
         const maximum = Math.max(...values);
         if (values.length === 0) {
             return [];
         }
-        if (nClasses <= 1) {
+        if (nStops <= 1) {
             return [maximum];
         }
-        if (nClasses >= values.length) {
+        if (nStops >= 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++) {
+        const matrixOne = Array.from({ length: n + 1 }, () => Array(nStops + 1).fill(0));
+        const matrixTwo = Array.from({ length: n + 1 }, () => Array(nStops + 1).fill(Number.MAX_VALUE));
+        for (let i = 1; i <= nStops; i++) {
             matrixOne[0][i] = 1;
             matrixOne[1][i] = 1;
             matrixTwo[0][i] = 0.0;
@@ -80,7 +83,7 @@ export var VectorClassifications;
                 v = s2 - (s1 * s1) / w;
                 const i4 = i3 - 1;
                 if (i4 !== 0) {
-                    for (let j = 2; j <= nClasses; j++) {
+                    for (let j = 2; j <= nStops; j++) {
                         if (matrixTwo[l][j] >= v + matrixTwo[i4][j - 1]) {
                             matrixOne[l][j] = i4;
                             matrixTwo[l][j] = v + matrixTwo[i4][j - 1];
@@ -91,28 +94,33 @@ export var VectorClassifications;
             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;
+        // Returns nStops anchor points: vmin, (nStops-2) natural-break upper bounds, vmax.
+        // Interior breaks use the upper bound of each class (last element before the next
+        // class starts) rather than the lower bound (first element of the next class).
+        const breaks = Array(nStops);
+        breaks[0] = sample[0]; // vmin
+        breaks[nStops - 1] = sample[n - 1]; // vmax
+        let k = n;
+        for (let j = nStops; j >= 3; j--) {
+            const id = matrixOne[k][j] - 1; // 0-based start index of class j
+            breaks[j - 2] = sample[id - 1]; // upper bound of class j-1
+            k = id;
         }
         return breaks;
     };
-    VectorClassifications.calculatePrettyBreaks = (values, nClasses) => {
+    VectorClassifications.calculatePrettyBreaks = (values, nStops) => {
         const minimum = Math.min(...values);
         const maximum = Math.max(...values);
         const breaks = [];
-        if (nClasses < 1) {
+        if (nStops < 1) {
             breaks.push(maximum);
             return breaks;
         }
-        const minimumCount = Math.floor(nClasses / 3);
+        const minimumCount = Math.floor(nStops / 3);
         const shrink = 0.75;
         const highBias = 1.5;
         const adjustBias = 0.5 + 1.5 * highBias;
-        const divisions = nClasses;
+        const divisions = nStops;
         const h = highBias;
         let cell;
         let small = false;
@@ -177,18 +185,14 @@ export var VectorClassifications;
         }
         const minimumBreak = start * unit;
         const count = end - start;
-        for (let i = 1; i < count + 1; i++) {
+        // Include the pretty lower bound (i=0) so all stops snap to round values,
+        // even when minimumBreak < vmin (that is the point of pretty breaks).
+        for (let i = 0; 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;
@@ -201,23 +205,19 @@ export var VectorClassifications;
         }
         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]);
+    VectorClassifications.calculateLogarithmicBreaks = (values, nStops) => {
+        const positiveValues = values.filter(v => v > 0);
+        if (positiveValues.length === 0 || nStops < 1) {
+            return [];
+        }
+        const minimum = Math.min(...positiveValues);
+        const maximum = Math.max(...positiveValues);
+        const logMin = Math.log10(minimum);
+        const logMax = Math.log10(maximum);
+        const breaks = [];
+        for (let i = 0; i < nStops; i++) {
+            const t = nStops === 1 ? 0 : i / (nStops - 1);
+            breaks.push(Math.pow(10, logMin + t * (logMax - logMin)));
         }
         return breaks;
     };

package/lib/features/layers/symbology/colorRampUtils.d.ts

@@ -0,0 +1,65 @@
+export type RgbaColor = [number, number, number, number];
+export declare const RGBA_INDEX: {
+    readonly r: 0;
+    readonly g: 1;
+    readonly b: 2;
+    readonly a: 3;
+};
+export type RgbaChannel = keyof typeof RGBA_INDEX;
+/** OpenLayers default blue, used as the fallback color throughout symbology dialogs. */
+export declare const DEFAULT_COLOR: RgbaColor;
+/** Default stroke width in pixels, used as the initial value in all symbology dialogs. */
+export declare const DEFAULT_STROKE_WIDTH = 1.25;
+/**
+ * Returns true if `val` is a usable solid color: either a hex string or a
+ * plain [r,g,b,a] number array. Returns false for OL expression arrays like
+ * ['interpolate', ...] whose first element is a string.
+ */
+export declare function isColor(val: unknown): boolean;
+/**
+ * Recursively searches an OL expression tree for the first node whose first
+ * element matches `operator` (e.g. `'interpolate'`, `'case'`).
+ * Returns the matching sub-expression, or `null` if not found.
+ */
+export declare function findExprNode(expr: unknown, operator: string): unknown[] | null;
+export interface IColorMap {
+    name: ColorRampName;
+    colors: string[];
+    type: 'continuous' | 'categorical';
+}
+export declare const COLOR_RAMP_NAMES: readonly ["jet", "hsv", "hot", "cool", "spring", "summer", "autumn", "winter", "bone", "copper", "greys", "YiGnBu", "greens", "YiOrRd", "bluered", "RdBu", "picnic", "rainbow", "portland", "blackbody", "earth", "electric", "viridis", "inferno", "magma", "plasma", "warm", "rainbow-soft", "bathymetry", "cdom", "chlorophyll", "density", "freesurface-blue", "freesurface-red", "oxygen", "par", "phase", "salinity", "temperature", "turbidity", "velocity-blue", "velocity-green", "cubehelix", "ice", "oxy", "matter", "amp", "tempo", "rain", "topo", "balance", "delta", "curl", "diff", "tarn"];
+export declare const COLOR_RAMP_DEFAULTS: Partial<Record<ColorRampName, number>>;
+export declare const D3_CATEGORICAL_SCHEMES: {
+    readonly schemeCategory10: readonly string[];
+    readonly schemeAccent: readonly string[];
+    readonly schemeDark2: readonly string[];
+    readonly schemeObservable10: readonly string[];
+    readonly schemePaired: readonly string[];
+    readonly schemePastel1: readonly string[];
+    readonly schemePastel2: readonly string[];
+    readonly schemeSet1: readonly string[];
+    readonly schemeSet2: readonly string[];
+    readonly schemeSet3: readonly string[];
+    readonly schemeTableau10: readonly string[];
+};
+export type D3SchemeName = keyof typeof D3_CATEGORICAL_SCHEMES;
+export type ColorRampName = (typeof COLOR_RAMP_NAMES)[number] | D3SchemeName;
+export declare const getColorMapList: () => IColorMap[];
+/**
+ * Hook that loads and sets color maps.
+ */
+export declare const useColorMapList: (setColorMaps: (maps: IColorMap[]) => void) => void;
+export declare const getColorMap: (name: ColorRampName) => IColorMap | undefined;
+/**
+ * Ensure we always get a valid hex string from either an RGB(A) array or string.
+ */
+export declare const ensureHexColorCode: (color: number[] | string) => string;
+/**
+ * Convert any color value (hex string or [r,g,b,a] array) to RgbaColor.
+ * Alpha must be in 0-1 range; a warning is logged if it is not.
+ */
+export declare function colorToRgba(color: unknown): RgbaColor;
+/**
+ * Draw a color ramp to a canvas.
+ */
+export declare const drawColorRamp: (canvas: HTMLCanvasElement, colorRamp: IColorMap) => void;

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

@@ -0,0 +1,242 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import colormap from 'colormap';
+import colorScale from 'colormap/colorScale.js';
+import * as d3Chromatic from 'd3-scale-chromatic';
+import { useEffect } from 'react';
+import rawCmocean from "./components/color_ramp/cmocean.json";
+import { objectEntries } from "../../../tools";
+export const RGBA_INDEX = { r: 0, g: 1, b: 2, a: 3 };
+/** OpenLayers default blue, used as the fallback color throughout symbology dialogs. */
+export const DEFAULT_COLOR = [51, 153, 204, 1];
+/** Default stroke width in pixels, used as the initial value in all symbology dialogs. */
+export const DEFAULT_STROKE_WIDTH = 1.25;
+/**
+ * Returns true if `val` is a usable solid color: either a hex string or a
+ * plain [r,g,b,a] number array. Returns false for OL expression arrays like
+ * ['interpolate', ...] whose first element is a string.
+ */
+export function isColor(val) {
+    if (typeof val === 'string') {
+        return /^#?[0-9A-Fa-f]{3,8}$/.test(val);
+    }
+    return Array.isArray(val) && val.length >= 3 && typeof val[0] === 'number';
+}
+/**
+ * Recursively searches an OL expression tree for the first node whose first
+ * element matches `operator` (e.g. `'interpolate'`, `'case'`).
+ * Returns the matching sub-expression, or `null` if not found.
+ */
+export function findExprNode(expr, operator) {
+    if (!Array.isArray(expr)) {
+        return null;
+    }
+    if (expr[0] === operator) {
+        return expr;
+    }
+    for (const child of expr) {
+        const found = findExprNode(child, operator);
+        if (found) {
+            return found;
+        }
+    }
+    return null;
+}
+const { __license__: _ } = rawCmocean, cmocean = __rest(rawCmocean, ["__license__"]);
+Object.assign(colorScale, cmocean);
+export const COLOR_RAMP_NAMES = [
+    'jet',
+    'hsv',
+    'hot',
+    'cool',
+    'spring',
+    'summer',
+    'autumn',
+    'winter',
+    'bone',
+    'copper',
+    'greys',
+    'YiGnBu',
+    'greens',
+    'YiOrRd',
+    'bluered',
+    'RdBu',
+    'picnic',
+    'rainbow',
+    'portland',
+    'blackbody',
+    'earth',
+    'electric',
+    'viridis',
+    'inferno',
+    'magma',
+    'plasma',
+    'warm',
+    'rainbow-soft',
+    'bathymetry',
+    'cdom',
+    'chlorophyll',
+    'density',
+    'freesurface-blue',
+    'freesurface-red',
+    'oxygen',
+    'par',
+    'phase',
+    'salinity',
+    'temperature',
+    'turbidity',
+    'velocity-blue',
+    'velocity-green',
+    'cubehelix',
+    'ice',
+    'oxy',
+    'matter',
+    'amp',
+    'tempo',
+    'rain',
+    'topo',
+    'balance',
+    'delta',
+    'curl',
+    'diff',
+    'tarn',
+];
+export const COLOR_RAMP_DEFAULTS = {
+    hsv: 11,
+    picnic: 11,
+    'rainbow-soft': 11,
+    cubehelix: 16,
+};
+export const D3_CATEGORICAL_SCHEMES = {
+    schemeCategory10: d3Chromatic.schemeCategory10,
+    schemeAccent: d3Chromatic.schemeAccent,
+    schemeDark2: d3Chromatic.schemeDark2,
+    schemeObservable10: d3Chromatic.schemeObservable10,
+    schemePaired: d3Chromatic.schemePaired,
+    schemePastel1: d3Chromatic.schemePastel1,
+    schemePastel2: d3Chromatic.schemePastel2,
+    schemeSet1: d3Chromatic.schemeSet1,
+    schemeSet2: d3Chromatic.schemeSet2,
+    schemeSet3: d3Chromatic.schemeSet3,
+    schemeTableau10: d3Chromatic.schemeTableau10,
+};
+export const getColorMapList = () => {
+    const colorMapList = [];
+    COLOR_RAMP_NAMES.forEach(name => {
+        const colorRamp = colormap({
+            colormap: name,
+            nshades: 255,
+            format: 'rgbaString',
+        });
+        colorMapList.push({ name, colors: colorRamp, type: 'continuous' });
+    });
+    objectEntries(D3_CATEGORICAL_SCHEMES).forEach(([name, colors]) => {
+        colorMapList.push({
+            name,
+            colors: colors.map(c => c.toString()),
+            type: 'categorical',
+        });
+    });
+    return colorMapList;
+};
+/**
+ * Hook that loads and sets color maps.
+ */
+export const useColorMapList = (setColorMaps) => {
+    useEffect(() => {
+        setColorMaps(getColorMapList());
+    }, [setColorMaps]);
+};
+/**
+ * Get a color map by name.
+ * Caches the full list on first call for efficiency, since generating color ramps is expensive.
+ */
+let colorMapCache = null;
+export const getColorMap = (name) => {
+    if (!colorMapCache) {
+        colorMapCache = getColorMapList();
+    }
+    return colorMapCache.find(c => c.name === name);
+};
+/**
+ * Ensure we always get a valid hex string from either an RGB(A) array or string.
+ */
+export const ensureHexColorCode = (color) => {
+    if (typeof color === 'string') {
+        return color;
+    }
+    // color must be an RGBA array
+    const hex = color
+        .slice(0, -1) // Color input doesn't support hex alpha values so cut that out
+        .map((val) => {
+        return val.toString(16).padStart(2, '0');
+    })
+        .join('');
+    return '#' + hex;
+};
+/**
+ * Convert any color value (hex string or [r,g,b,a] array) to RgbaColor.
+ * Alpha must be in 0-1 range; a warning is logged if it is not.
+ */
+export function colorToRgba(color) {
+    if (typeof color === 'string') {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+        if (!result) {
+            console.warn('Unable to parse hex color, using default');
+            return DEFAULT_COLOR;
+        }
+        return [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16),
+            1,
+        ];
+    }
+    if (isColor(color)) {
+        const [r, g, b, a] = color;
+        const alpha = a !== null && a !== void 0 ? a : 1;
+        if (alpha > 1) {
+            console.warn(`Color alpha ${alpha} is out of 0-1 range`);
+        }
+        return [r, g, b, alpha];
+    }
+    return DEFAULT_COLOR;
+}
+/**
+ * Draw a color ramp to a canvas.
+ */
+export const drawColorRamp = (canvas, colorRamp) => {
+    const ctx = canvas.getContext('2d');
+    const colors = colorRamp.colors;
+    if (!ctx || !colors || colors.length === 0) {
+        return;
+    }
+    const width = canvas.width;
+    const height = canvas.height;
+    if (colorRamp.type === 'categorical') {
+        const blockWidth = width / colors.length;
+        colors.forEach((color, i) => {
+            ctx.beginPath();
+            ctx.fillStyle = color;
+            ctx.fillRect(i * blockWidth, 0, blockWidth, height);
+        });
+    }
+    else {
+        const gradient = ctx.createLinearGradient(0, 0, width, 0);
+        const step = 1 / (colors.length - 1);
+        colors.forEach((color, i) => {
+            gradient.addColorStop(i * step, color);
+        });
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+};

package/lib/features/layers/symbology/components/MappingRow.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A single grammar mapping row: field → scale → channels (fan-out tree).
+ * The scale preview spans all channel rows. Additional channels branch below.
+ * "when" predicates are shown as chips below the grid.
+ */
+import { IPredicate, IScale, StyleChannel } from '@jupytergis/schema';
+import React from 'react';
+export declare function formatPredicate(pred: IPredicate): string;
+interface IWhenAddFormProps {
+    availableFields: string[];
+    onAdd: (pred: IPredicate) => void;
+    onCancel: () => void;
+}
+export declare const WhenAddForm: React.FC<IWhenAddFormProps>;
+export interface IGrammarRow {
+    id: string;
+    /** Selected input field(s). Length is governed by fieldCountForScale(scale). */
+    fields?: string[];
+    scale: IScale;
+    channels: StyleChannel[];
+    when?: IPredicate[];
+    whenOp?: 'all' | 'any';
+}
+/**
+ * How many input fields a scale accepts.
+ *   0    — constants (no field selector shown)
+ *   1    — all single-field scales
+ *  'any' — multi-field (expression scale, sub-channel assembly)
+ */
+export declare function fieldCountForScale(scheme: IScale['scheme']): 0 | 1 | 'any';
+interface IMappingRowProps {
+    row: IGrammarRow;
+    availableFields: string[];
+    featureValues: Record<string, Set<any>>;
+    isRaster?: boolean;
+    onChange: (row: IGrammarRow) => void;
+    onDelete: () => void;
+}
+declare const MappingRow: React.FC<IMappingRowProps>;
+export default MappingRow;