@jupytergis/base 0.9.1 → 0.10.0

package/lib/annotations/components/Annotation.js

@@ -38,7 +38,7 @@ const Annotation = ({ itemId, annotationModel, jgisModel, children, }) => {
             return (React.createElement(Message, { user: content.user, message: content.value, self: ((_a = annotationModel.user) === null || _a === void 0 ? void 0 : _a.username) === ((_b = content.user) === null || _b === void 0 ? void 0 : _b.username) }));
         })),
         React.createElement("div", { className: "jGIS-Annotation-Message" },
-            React.createElement("textarea", { rows: 3, placeholder: 'Ctrl+Enter to submit', value: messageContent, onChange: e => setMessageContent(e.currentTarget.value), onKeyDown: e => {
+            React.createElement("textarea", { "data-id": "annotation-textarea", rows: 3, placeholder: 'Ctrl+Enter to submit', value: messageContent, onChange: e => setMessageContent(e.currentTarget.value), onKeyDown: e => {
                     if (e.ctrlKey && e.key === 'Enter') {
                         handleSubmit();
                     }

package/lib/commands/BaseCommandIDs.d.ts

@@ -4,6 +4,7 @@ export declare const undo = "jupytergis:undo";
 export declare const symbology = "jupytergis:symbology";
 export declare const identify = "jupytergis:identify";
 export declare const temporalController = "jupytergis:temporalController";
+export declare const addMarker = "jupytergis:addMarker";
 export declare const getGeolocation = "jupytergis:getGeolocation";
 export declare const openLayerBrowser = "jupytergis:openLayerBrowser";
 export declare const newRasterEntry = "jupytergis:newRasterEntry";

package/lib/commands/BaseCommandIDs.js

@@ -2,12 +2,14 @@
  *
  * See the documentation for more details.
  */
+// Toolbar
 export const createNew = 'jupytergis:create-new-jGIS-file';
 export const redo = 'jupytergis:redo';
 export const undo = 'jupytergis:undo';
 export const symbology = 'jupytergis:symbology';
 export const identify = 'jupytergis:identify';
 export const temporalController = 'jupytergis:temporalController';
+export const addMarker = 'jupytergis:addMarker';
 // geolocation
 export const getGeolocation = 'jupytergis:getGeolocation';
 // Layers and sources creation commands

package/lib/commands/index.js

@@ -11,6 +11,7 @@ import { getSingleSelectedLayer } from '../processing/index';
 import { addProcessingCommands } from '../processing/processingCommands';
 import { getGeoJSONDataFromLayerSource, downloadFile } from '../tools';
 import { JupyterGISDocumentWidget } from '../widget';
+const POINT_SELECTION_TOOL_CLASS = 'jGIS-point-selection-tool';
 function loadKeybindings(commands, keybindings) {
     keybindings.forEach(binding => {
         commands.addKeyBinding({
@@ -89,7 +90,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             ].includes(selectedLayer.type);
             if (current.model.currentMode === 'identifying' && !canIdentify) {
                 current.model.currentMode = 'panning';
-                current.node.classList.remove('jGIS-identify-tool');
+                current.node.classList.remove(POINT_SELECTION_TOOL_CLASS);
                 return false;
             }
             return current.model.currentMode === 'identifying';
@@ -118,13 +119,13 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
                 const keysPressed = luminoEvent.keys;
                 if (keysPressed === null || keysPressed === void 0 ? void 0 : keysPressed.includes('Escape')) {
                     current.model.currentMode = 'panning';
-                    current.node.classList.remove('jGIS-identify-tool');
+                    current.node.classList.remove(POINT_SELECTION_TOOL_CLASS);
                     commands.notifyCommandChanged(CommandIDs.identify);
                     return;
                 }
             }
-            current.node.classList.toggle('jGIS-identify-tool');
-            current.model.toggleIdentify();
+            current.node.classList.toggle(POINT_SELECTION_TOOL_CLASS);
+            current.model.toggleMode('identifying');
             commands.notifyCommandChanged(CommandIDs.identify);
         } }, icons.get(CommandIDs.identify)));
     commands.addCommand(CommandIDs.temporalController, Object.assign({ label: trans.__('Temporal Controller'), isToggled: () => {
@@ -344,13 +345,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
         execute: async () => {
             var _a;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            await Private.renameSelectedItem(model, 'layer', (layerId, newName) => {
-                const layer = model === null || model === void 0 ? void 0 : model.getLayer(layerId);
-                if (layer) {
-                    layer.name = newName;
-                    model === null || model === void 0 ? void 0 : model.sharedModel.updateLayer(layerId, layer);
-                }
-            });
+            await Private.renameSelectedItem(model, 'layer');
         },
     });
     commands.addCommand(CommandIDs.removeLayer, {
@@ -368,9 +363,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
         execute: async () => {
             var _a;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            await Private.renameSelectedItem(model, 'group', (groupName, newName) => {
-                model === null || model === void 0 ? void 0 : model.renameLayerGroup(groupName, newName);
-            });
+            await Private.renameSelectedItem(model, 'group');
         },
     });
     commands.addCommand(CommandIDs.removeGroup, {
@@ -458,13 +451,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
         execute: async () => {
             var _a;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            await Private.renameSelectedItem(model, 'source', (sourceId, newName) => {
-                const source = model === null || model === void 0 ? void 0 : model.getSource(sourceId);
-                if (source) {
-                    source.name = newName;
-                    model === null || model === void 0 ? void 0 : model.sharedModel.updateSource(sourceId, source);
-                }
-            });
+            await Private.renameSelectedItem(model, 'source');
         },
     });
     commands.addCommand(CommandIDs.removeSource, {
@@ -568,7 +555,6 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             if (!currentWidget || !completionProviderManager) {
                 return;
             }
-            console.log('zooming');
             const model = tracker.currentWidget.model;
             const selectedItems = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected.value;
             if (!selectedItems) {
@@ -814,6 +800,24 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             commands.notifyCommandChanged(CommandIDs.showIdentifyPanelTab);
         },
     });
+    commands.addCommand(CommandIDs.addMarker, Object.assign({ label: trans.__('Add Marker'), isToggled: () => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return false;
+            }
+            return current.model.currentMode === 'marking';
+        }, isEnabled: () => {
+            // TODO should check if at least one layer exists?
+            return true;
+        }, execute: args => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            current.node.classList.toggle(POINT_SELECTION_TOOL_CLASS);
+            current.model.toggleMode('marking');
+            commands.notifyCommandChanged(CommandIDs.addMarker);
+        } }, icons.get(CommandIDs.addMarker)));
     loadKeybindings(commands, keybindings);
 }
 var Private;
@@ -868,39 +872,11 @@ var Private;
         };
     }
     Private.createEntry = createEntry;
-    async function getUserInputForRename(text, input, original) {
-        const parent = text.parentElement;
-        parent.replaceChild(input, text);
-        input.value = original;
-        input.select();
-        input.focus();
-        return new Promise(resolve => {
-            input.addEventListener('blur', () => {
-                parent.replaceChild(text, input);
-                resolve(input.value);
-            });
-            input.addEventListener('keydown', (event) => {
-                if (event.key === 'Enter') {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    input.blur();
-                }
-                else if (event.key === 'Escape') {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    input.value = original;
-                    input.blur();
-                    text.focus();
-                }
-            });
-        });
-    }
-    Private.getUserInputForRename = getUserInputForRename;
     function removeSelectedItems(model, itemTypeToRemove, removeFunction) {
         var _a, _b;
         const selected = (_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
         if (!selected) {
-            console.info('Nothing selected');
+            console.error('Failed to remove selected item -- nothing selected');
             return;
         }
         for (const selection in selected) {
@@ -910,10 +886,10 @@ var Private;
         }
     }
     Private.removeSelectedItems = removeSelectedItems;
-    async function renameSelectedItem(model, itemType, callback) {
+    async function renameSelectedItem(model, itemType) {
         var _a;
         const selectedItems = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected.value;
-        if (!selectedItems) {
+        if (!selectedItems || !model) {
             console.error(`No ${itemType} selected`);
             return;
         }
@@ -928,26 +904,8 @@ var Private;
         if (!itemId) {
             return;
         }
-        const nodeId = selectedItems[itemId].selectedNodeId;
-        if (!nodeId) {
-            return;
-        }
-        const node = document.getElementById(nodeId);
-        if (!node) {
-            console.warn(`Node with ID ${nodeId} not found`);
-            return;
-        }
-        const edit = document.createElement('input');
-        edit.classList.add('jp-gis-left-panel-input');
-        const originalName = node.innerText;
-        const newName = await Private.getUserInputForRename(node, edit, originalName);
-        if (!newName) {
-            console.warn('New name cannot be empty');
-            return;
-        }
-        if (newName !== originalName) {
-            callback(itemId, newName);
-        }
+        // Set editing state - component will show inline input
+        model.setEditingItem(itemType, itemId);
     }
     Private.renameSelectedItem = renameSelectedItem;
     function executeConsole(tracker) {

package/lib/constants.js

@@ -1,7 +1,7 @@
 import { ProcessingCommandIDs } from '@jupytergis/schema';
 import { redoIcon, undoIcon } from '@jupyterlab/ui-components';
 import * as BaseCommandIDs from './commands/BaseCommandIDs';
-import { bookOpenIcon, clockIcon, geoJSONIcon, infoIcon, moundIcon, rasterIcon, vectorSquareIcon, } from './icons';
+import { bookOpenIcon, clockIcon, geoJSONIcon, infoIcon, moundIcon, rasterIcon, vectorSquareIcon, markerIcon, } from './icons';
 /**
  * The command IDs.
  */
@@ -34,6 +34,7 @@ const iconObject = {
     [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
     [CommandIDs.identify]: { icon: infoIcon },
     [CommandIDs.temporalController]: { icon: clockIcon },
+    [CommandIDs.addMarker]: { icon: markerIcon },
 };
 /**
  * The registered icons

package/lib/dialogs/ProcessingFormDialog.js

@@ -14,7 +14,7 @@ const ProcessingFormWrapper = props => {
         (_a = props.formErrorSignalPromise) === null || _a === void 0 ? void 0 : _a.promise,
     ]).then(([ok, formChanged]) => {
         okSignal.current = ok;
-        formErrorSignal.current = formChanged;
+        formErrorSignal.current = formChanged || undefined;
         setReady(true);
     });
     let FormComponent;
@@ -25,7 +25,7 @@ const ProcessingFormWrapper = props => {
         default:
             FormComponent = BaseForm;
     }
-    return (ready && (React.createElement(FormComponent, { formContext: props.formContext, filePath: props.model.filePath, model: props.model, ok: okSignal.current, cancel: props.cancel, sourceData: props.sourceData, schema: props.schema, syncData: props.syncData })));
+    return (ready && (React.createElement(FormComponent, { formContext: props.formContext, filePath: props.model.filePath, model: props.model, ok: okSignal.current, sourceData: props.sourceData, schema: props.schema, syncData: props.syncData })));
 };
 /**
  * Dialog for processing operations

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

@@ -0,0 +1,20 @@
+export interface IColorMap {
+    name: ColorRampName;
+    colors: string[];
+}
+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 type ColorRampName = (typeof COLOR_RAMP_NAMES)[number];
+export declare const getColorMapList: () => IColorMap[];
+/**
+ * Hook that loads and sets color maps.
+ */
+export declare const useColorMapList: (setColorMaps: (maps: IColorMap[]) => void) => void;
+/**
+ * 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 hex to [r,g,b,a] array.
+ */
+export declare function hexToRgb(hex: string): [number, number, number, number];

package/lib/dialogs/symbology/colorRampUtils.js

@@ -0,0 +1,132 @@
+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 { useEffect } from 'react';
+import rawCmocean from "./components/color_ramp/cmocean.json";
+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 getColorMapList = () => {
+    const colorMapList = [];
+    COLOR_RAMP_NAMES.forEach(name => {
+        const colorRamp = colormap({
+            colormap: name,
+            nshades: 255,
+            format: 'rgbaString',
+        });
+        colorMapList.push({ name, colors: colorRamp });
+    });
+    return colorMapList;
+};
+/**
+ * Hook that loads and sets color maps.
+ */
+export const useColorMapList = (setColorMaps) => {
+    useEffect(() => {
+        setColorMaps(getColorMapList());
+    }, [setColorMaps]);
+};
+/**
+ * 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 hex to [r,g,b,a] array.
+ */
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) {
+        console.warn('Unable to parse hex value, defaulting to black');
+        return [0, 0, 0, 255];
+    }
+    return [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16),
+        255, // TODO: Make alpha customizable?
+    ];
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @module ColorRampControls
+ *
+ * This component provides the main UI controls for classifying raster layers
+ * using different color ramps and classification modes.
+ *
+ * Allows users to:
+ * - Select a color ramp (`ColorRampSelector`)
+ * - Choose classification mode and number of classes (`ModeSelectRow`)
+ * - Run classification via `classifyFunc`, with loading state (`LoadingIcon`)
+ *
+ * Props:
+ * - `modeOptions`: Available classification modes.
+ * - `layerParams`: Layer symbology state.
+ * - `classifyFunc`: Callback for classification.
+ * - `showModeRow`: Toggle for mode selector.
+ * - `showRampSelector`: Toggle for ramp selector.
+ */
+import { IDict } from '@jupytergis/schema';
+import React from 'react';
+import { ClassificationMode } from "../../../../types";
+import { ColorRampName } from '../../colorRampUtils';
+interface IColorRampControlsProps {
+    modeOptions: ClassificationMode[];
+    layerParams: IDict;
+    classifyFunc: (selectedMode: ClassificationMode, numberOfShades: number, selectedRamp: ColorRampName, setIsLoading: (isLoading: boolean) => void) => void;
+    showModeRow: boolean;
+    showRampSelector: boolean;
+}
+export type ColorRampControlsOptions = {
+    selectedRamp: ColorRampName;
+    numberOfShades: number;
+    selectedMode: ClassificationMode;
+};
+declare const ColorRampControls: React.FC<IColorRampControlsProps>;
+export default ColorRampControls;

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

@@ -0,0 +1,82 @@
+/**
+ * @module ColorRampControls
+ *
+ * This component provides the main UI controls for classifying raster layers
+ * using different color ramps and classification modes.
+ *
+ * Allows users to:
+ * - Select a color ramp (`ColorRampSelector`)
+ * - Choose classification mode and number of classes (`ModeSelectRow`)
+ * - Run classification via `classifyFunc`, with loading state (`LoadingIcon`)
+ *
+ * Props:
+ * - `modeOptions`: Available classification modes.
+ * - `layerParams`: Layer symbology state.
+ * - `classifyFunc`: Callback for classification.
+ * - `showModeRow`: Toggle for mode selector.
+ * - `showRampSelector`: Toggle for ramp selector.
+ */
+import { Button } from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
+import { LoadingIcon } from "../../../../shared/components/loading";
+import ColorRampSelector from './ColorRampSelector';
+import ModeSelectRow from './ModeSelectRow';
+import { COLOR_RAMP_DEFAULTS } from '../../colorRampUtils';
+const isValidNumberOfShades = (value) => !isNaN(value) && value > 0;
+const ColorRampControls = ({ layerParams, modeOptions, classifyFunc, showModeRow, showRampSelector, }) => {
+    const [selectedRamp, setSelectedRamp] = useState('viridis');
+    const [selectedMode, setSelectedMode] = useState('equal interval');
+    const [numberOfShades, setNumberOfShades] = useState(9);
+    const [isLoading, setIsLoading] = useState(false);
+    const [warning, setWarning] = useState(null);
+    useEffect(() => {
+        if (layerParams.symbologyState) {
+            populateOptions();
+        }
+    }, [
+        layerParams.symbologyState.nClasses,
+        layerParams.symbologyState.mode,
+        layerParams.symbologyState.colorRamp,
+    ]);
+    useEffect(() => {
+        var _a;
+        if (!selectedRamp) {
+            return;
+        }
+        const defaultClasses = (_a = COLOR_RAMP_DEFAULTS[selectedRamp]) !== null && _a !== void 0 ? _a : 9;
+        setNumberOfShades(defaultClasses);
+        setWarning(null);
+    }, [selectedRamp]);
+    useEffect(() => {
+        if (!selectedRamp || !numberOfShades) {
+            return;
+        }
+        const minRequired = COLOR_RAMP_DEFAULTS[selectedRamp];
+        const shades = numberOfShades;
+        const rampLabel = selectedRamp
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('-');
+        if (minRequired && shades < minRequired) {
+            setWarning(`${rampLabel} requires at least ${minRequired} classes (got ${shades})`);
+        }
+        else {
+            setWarning(null);
+        }
+    }, [selectedRamp, numberOfShades]);
+    const populateOptions = () => {
+        var _a, _b, _c;
+        const { nClasses, mode, colorRamp } = (_a = layerParams.symbologyState) !== null && _a !== void 0 ? _a : {};
+        setNumberOfShades(Number(nClasses !== null && nClasses !== void 0 ? nClasses : 9));
+        setSelectedMode((_b = mode) !== null && _b !== void 0 ? _b : 'equal interval');
+        setSelectedRamp((_c = colorRamp) !== null && _c !== void 0 ? _c : 'viridis');
+    };
+    return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
+        showRampSelector && (React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
+            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp }))),
+        showModeRow && (React.createElement(ModeSelectRow, { modeOptions: modeOptions, numberOfShades: numberOfShades, setNumberOfShades: setNumberOfShades, selectedMode: selectedMode, setSelectedMode: setSelectedMode })),
+        warning && (React.createElement("div", { className: "jp-gis-warning", style: { color: 'orange', marginTop: 4 } }, warning)),
+        isLoading ? (React.createElement(LoadingIcon, null)) : (React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !isValidNumberOfShades(numberOfShades) || !selectedMode || !!warning, onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, setIsLoading) }, "Classify"))));
+};
+export default ColorRampControls;

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

@@ -0,0 +1,20 @@
+/**
+ * @module ColorRampSelector
+ *
+ * Dropdown component for selecting a color ramp.
+ * - Displays the currently selected ramp as a preview on a canvas.
+ * - Expands to show a list of available ramps (`ColorRampSelectorEntry`).
+ * - Updates the preview and notifies parent via `setSelected` when a ramp is chosen.
+ *
+ * Props:
+ * - `selectedRamp`: Name of the currently selected color ramp.
+ * - `setSelected`: Callback fired with the new ramp when selected.
+ */
+import React from 'react';
+import { ColorRampName } from "../../colorRampUtils";
+interface IColorRampSelectorProps {
+    selectedRamp: ColorRampName;
+    setSelected: (item: any) => void;
+}
+declare const ColorRampSelector: React.FC<IColorRampSelectorProps>;
+export default ColorRampSelector;

package/lib/dialogs/symbology/components/color_ramp/{CanvasSelectComponent.js → ColorRampSelector.js}

@@ -1,69 +1,26 @@
+/**
+ * @module ColorRampSelector
+ *
+ * Dropdown component for selecting a color ramp.
+ * - Displays the currently selected ramp as a preview on a canvas.
+ * - Expands to show a list of available ramps (`ColorRampSelectorEntry`).
+ * - Updates the preview and notifies parent via `setSelected` when a ramp is chosen.
+ *
+ * Props:
+ * - `selectedRamp`: Name of the currently selected color ramp.
+ * - `setSelected`: Callback fired with the new ramp when selected.
+ */
 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
-    ];
+import { useColorMapList, } from "../../colorRampUtils";
+import ColorRampSelectorEntry from './ColorRampSelectorEntry';
+const ColorRampSelector = ({ selectedRamp, setSelected, }) => {
     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);
-        });
-    }, []);
+    const canvasWidth = 512;
+    const canvasHeight = 30;
+    useColorMapList(setColorMaps);
     useEffect(() => {
         if (colorMaps.length > 0) {
             updateCanvas(selectedRamp);
@@ -97,11 +54,13 @@ const CanvasSelectComponent = ({ selectedRamp, setSelected, }) => {
             return;
         }
         const ramp = colorMaps.filter(c => c.name === rampName);
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
         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);
+            ctx.fillRect(i * 2, 0, 2, canvasHeight);
         }
         canvas.style.visibility = 'initial';
     };
@@ -113,7 +72,9 @@ const CanvasSelectComponent = ({ selectedRamp, setSelected, }) => {
     }, []);
     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 }))))));
+            React.createElement("div", { className: "jp-gis-color-ramp-entry jp-gis-selected-entry" },
+                React.createElement("span", { className: "jp-gis-color-label" }, selectedRamp),
+                React.createElement("canvas", { id: "cv", className: "jp-gis-color-canvas-display", width: canvasWidth, height: canvasHeight }))),
+        React.createElement("div", { className: `jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}` }, colorMaps.map((item, index) => (React.createElement(ColorRampSelectorEntry, { index: index, colorMap: item, onClick: selectItem }))))));
 };
-export default CanvasSelectComponent;
+export default ColorRampSelector;