@jupytergis/base 0.9.2 → 0.10.1

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

@@ -2,7 +2,8 @@ export interface IColorMap {
     name: ColorRampName;
     colors: string[];
 }
-export declare const COLOR_RAMP_NAMES: readonly ["jet", "hot", "cool", "spring", "summer", "autumn", "winter", "bone", "copper", "greys", "YiGnBu", "greens", "YiOrRd", "bluered", "RdBu", "rainbow", "portland", "blackbody", "earth", "electric", "viridis", "inferno", "magma", "plasma", "warm", "bathymetry", "cdom", "chlorophyll", "density", "freesurface-blue", "freesurface-red", "oxygen", "par", "phase", "salinity", "temperature", "turbidity", "velocity-blue", "velocity-green", "ice", "oxy", "matter", "amp", "tempo", "rain", "topo", "balance", "delta", "curl", "diff", "tarn"];
+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[];
 /**

package/lib/dialogs/symbology/colorRampUtils.js

@@ -17,7 +17,7 @@ const { __license__: _ } = rawCmocean, cmocean = __rest(rawCmocean, ["__license_
 Object.assign(colorScale, cmocean);
 export const COLOR_RAMP_NAMES = [
     'jet',
-    // 'hsv', 11 steps min
+    'hsv',
     'hot',
     'cool',
     'spring',
@@ -32,7 +32,7 @@ export const COLOR_RAMP_NAMES = [
     'YiOrRd',
     'bluered',
     'RdBu',
-    // 'picnic', 11 steps min
+    'picnic',
     'rainbow',
     'portland',
     'blackbody',
@@ -43,7 +43,7 @@ export const COLOR_RAMP_NAMES = [
     'magma',
     'plasma',
     'warm',
-    // 'rainbow-soft', 11 steps min
+    'rainbow-soft',
     'bathymetry',
     'cdom',
     'chlorophyll',
@@ -58,7 +58,7 @@ export const COLOR_RAMP_NAMES = [
     'turbidity',
     'velocity-blue',
     'velocity-green',
-    // 'cubehelix' 16 steps min
+    'cubehelix',
     'ice',
     'oxy',
     'matter',
@@ -72,6 +72,12 @@ export const COLOR_RAMP_NAMES = [
     '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 => {

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,11 +1,25 @@
+/**
+ * @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 React, { useEffect, useRef, useState } from 'react';
-import { useColorMapList } from "../../colorRampUtils";
-import ColorRampEntry from './ColorRampEntry';
-const CanvasSelectComponent = ({ selectedRamp, setSelected, }) => {
+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([]);
+    const canvasWidth = 512;
+    const canvasHeight = 30;
     useColorMapList(setColorMaps);
     useEffect(() => {
         if (colorMaps.length > 0) {
@@ -40,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';
     };
@@ -56,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;

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

@@ -0,0 +1,20 @@
+/**
+ * @module ColorRampSelectorEntry
+ *
+ * Represents a single selectable color ramp option in the `ColorRampSelector`.
+ * Renders a preview ColorRamp on a canvas and triggers `onClick` when selected.
+ *
+ * Props:
+ * - `index`: Unique index for canvas ID.
+ * - `colorMap`: Ramp definition including name and colors.
+ * - `onClick`: Callback fired with the ramp name when clicked.
+ */
+import React from 'react';
+import { IColorMap } from "../../colorRampUtils";
+interface IColorRampSelectorEntryProps {
+    index: number;
+    colorMap: IColorMap;
+    onClick: (item: any) => void;
+}
+declare const ColorRampSelectorEntry: React.FC<IColorRampSelectorEntryProps>;
+export default ColorRampSelectorEntry;

package/lib/dialogs/symbology/components/color_ramp/{ColorRampEntry.js → ColorRampSelectorEntry.js}

@@ -1,11 +1,25 @@
+/**
+ * @module ColorRampSelectorEntry
+ *
+ * Represents a single selectable color ramp option in the `ColorRampSelector`.
+ * Renders a preview ColorRamp on a canvas and triggers `onClick` when selected.
+ *
+ * Props:
+ * - `index`: Unique index for canvas ID.
+ * - `colorMap`: Ramp definition including name and colors.
+ * - `onClick`: Callback fired with the ramp name when clicked.
+ */
 import React, { useEffect } from 'react';
-const ColorRampEntry = ({ index, colorMap, onClick, }) => {
+const ColorRampSelectorEntry = ({ index, colorMap, onClick, }) => {
+    const canvasWidth = 512;
     const canvasHeight = 30;
     useEffect(() => {
         const canvas = document.getElementById(`cv-${index}`);
         if (!canvas) {
             return;
         }
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
             return;
@@ -19,6 +33,6 @@ const ColorRampEntry = ({ index, colorMap, onClick, }) => {
     }, []);
     return (React.createElement("div", { key: colorMap.name, onClick: () => onClick(colorMap.name), className: "jp-gis-color-ramp-entry" },
         React.createElement("span", { className: "jp-gis-color-label" }, colorMap.name),
-        React.createElement("canvas", { id: `cv-${index}`, height: canvasHeight, className: "jp-gis-color-canvas" })));
+        React.createElement("canvas", { id: `cv-${index}`, width: canvasWidth, height: canvasHeight, className: "jp-gis-color-canvas" })));
 };
-export default ColorRampEntry;
+export default ColorRampSelectorEntry;

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

@@ -1,10 +1,11 @@
 import React from 'react';
+import { ClassificationMode } from "../../../../types";
 interface IModeSelectRowProps {
-    numberOfShades: string;
-    setNumberOfShades: (value: string) => void;
-    selectedMode: string;
-    setSelectedMode: (value: string) => void;
-    modeOptions: string[];
+    numberOfShades: number;
+    setNumberOfShades: React.Dispatch<React.SetStateAction<number>>;
+    selectedMode: ClassificationMode;
+    setSelectedMode: React.Dispatch<React.SetStateAction<ClassificationMode>>;
+    modeOptions: ClassificationMode[];
 }
 declare const ModeSelectRow: React.FC<IModeSelectRowProps>;
 export default ModeSelectRow;

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

@@ -3,10 +3,15 @@ const ModeSelectRow = ({ numberOfShades, setNumberOfShades, selectedMode, setSel
     return (React.createElement("div", { className: "jp-gis-symbology-row" },
         React.createElement("div", { className: "jp-gis-color-ramp-div" },
             React.createElement("label", { htmlFor: "class-number-input" }, "Classes:"),
-            React.createElement("input", { className: "jp-mod-styled", name: "class-number-input", type: "number", value: selectedMode === 'continuous' ? 52 : numberOfShades, onChange: event => setNumberOfShades(event.target.value), disabled: selectedMode === 'continuous' })),
+            React.createElement("input", { className: "jp-mod-styled", name: "class-number-input", type: "number", value: selectedMode === 'continuous' ? 52 : numberOfShades, onChange: event => {
+                    const value = Number(event.target.value);
+                    if (!isNaN(value) && value > 0) {
+                        setNumberOfShades(value);
+                    }
+                }, disabled: selectedMode === 'continuous' })),
         React.createElement("div", { className: "jp-gis-color-ramp-div" },
             React.createElement("label", { htmlFor: "mode-select" }, "Mode:"),
             React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: "mode-select", id: "mode-select", className: "jp-mod-styled", value: selectedMode, onChange: event => setSelectedMode(event.target.value) }, modeOptions.map(mode => (React.createElement("option", { key: mode, value: mode, selected: selectedMode === mode }, mode))))))));
+                React.createElement("select", { name: "mode-select", id: "mode-select", className: "jp-mod-styled", value: selectedMode, onChange: event => setSelectedMode(event.target.value) }, modeOptions.map(mode => (React.createElement("option", { key: mode, value: mode }, mode))))))));
 };
 export default ModeSelectRow;

package/lib/dialogs/symbology/hooks/useGetProperties.js

@@ -2,13 +2,19 @@
 import { useEffect, useState } from 'react';
 import { loadFile } from "../../../tools";
 async function getGeoJsonProperties({ source, model, }) {
-    var _a;
     const result = {};
-    const data = await loadFile({
-        filepath: (_a = source.parameters) === null || _a === void 0 ? void 0 : _a.path,
-        type: 'GeoJSONSource',
-        model,
-    });
+    const data = await (async () => {
+        if (source.parameters.path) {
+            return await loadFile({
+                filepath: source.parameters.path,
+                type: 'GeoJSONSource',
+                model,
+            });
+        }
+        else if (source.parameters.data) {
+            return source.parameters.data;
+        }
+    })();
     if (!data) {
         throw new Error('Failed to read GeoJSON data');
     }