@jupytergis/base 0.9.1 → 0.10.0

package/lib/panelview/components/layers.js

@@ -1,6 +1,5 @@
 import { DOMUtils } from '@jupyterlab/apputils';
 import { Button, LabIcon, caretDownIcon, caretRightIcon, } from '@jupyterlab/ui-components';
-import { UUID } from '@lumino/coreutils';
 import React, { useEffect, useState, } from 'react';
 import { CommandIDs, icons } from "../../constants";
 import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
@@ -16,7 +15,6 @@ const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
 const LAYER_TEXT_CLASS = 'jp-gis-layerText data-jgis-keybinding';
 export const LayersBodyComponent = props => {
     const model = props.model;
-    const id = UUID.uuid4();
     const [layerTree, setLayerTree] = useState((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
     const notifyCommands = () => {
         // Notify commands that need updating
@@ -63,62 +61,61 @@ export const LayersBodyComponent = props => {
         }
         model === null || model === void 0 ? void 0 : model.moveItemRelatedTo(draggedId, dragOverId, dragOverPosition === 'above');
     };
-    const onSelect = ({ type, item, nodeId, event, }) => {
-        var _a, _b;
-        if (!props.model || !nodeId) {
+    const onSelect = ({ type, item, event }) => {
+        if (!props.model) {
             return;
         }
-        const selectedValue = (_b = (_a = props.model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
-        const node = document.getElementById(nodeId);
-        if (!node) {
+        const selectedValue = props.model.selected;
+        // Don't want to reset selected if right clicking a selected item
+        if (selectedValue &&
+            !event.ctrlKey &&
+            event.button === 2 &&
+            item in selectedValue) {
             return;
         }
-        node.tabIndex = 0;
-        node.focus();
-        // Early return if no selection exists
+        // Calculate the new selection value
+        let newSelection;
+        // Early return if no selection exists - single selection
         if (!selectedValue) {
-            resetSelected(type, nodeId, item);
-            return;
-        }
-        // Don't want to reset selected if right clicking a selected item
-        if (!event.ctrlKey && event.button === 2 && item in selectedValue) {
-            return;
+            newSelection = {
+                [item]: {
+                    type,
+                },
+            };
         }
-        // Reset selection for normal left click
-        if (!event.ctrlKey) {
-            resetSelected(type, nodeId, item);
-            return;
+        else if (!event.ctrlKey) {
+            // Reset selection for normal left click - single selection
+            newSelection = {
+                [item]: {
+                    type,
+                },
+            };
         }
-        if (nodeId) {
+        else {
             // Check if new selection is the same type as previous selections
             const isSelectedSameType = Object.values(selectedValue).some(selection => selection.type === type);
             if (!isSelectedSameType) {
-                // Selecting a new type, so reset selected
-                resetSelected(type, nodeId, item);
-                return;
+                // Selecting a new type, so reset selected - single selection
+                newSelection = {
+                    [item]: {
+                        type,
+                    },
+                };
+            }
+            else {
+                // If types are the same add the selection - multi-selection
+                newSelection = Object.assign(Object.assign({}, selectedValue), { [item]: { type } });
             }
-            // If types are the same add the selection
-            const updatedSelectedValue = Object.assign(Object.assign({}, selectedValue), { [item]: { type, selectedNodeId: nodeId } });
-            props.model.syncSelected(updatedSelectedValue, id);
-            notifyCommands();
-        }
-    };
-    const resetSelected = (type, nodeId, item) => {
-        const selection = {};
-        if (item && nodeId) {
-            selection[item] = {
-                type,
-                selectedNodeId: nodeId,
-            };
         }
-        props.model.syncSelected(selection, id);
+        // Set the selection
+        props.model.selected = newSelection;
         notifyCommands();
     };
     /**
      * Propagate the layer selection.
      */
-    const onItemClick = ({ type, item, nodeId, event, }) => {
-        onSelect({ type, item, nodeId, event });
+    const onItemClick = ({ type, item, event }) => {
+        onSelect({ type, item, event });
     };
     /**
      * Listen to the layers and layer tree changes.
@@ -156,6 +153,8 @@ const LayerGroupComponent = props => {
     const [selected, setSelected] = useState(
     // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
     isSelected(group.name, gisModel));
+    const [isEditing, setIsEditing] = useState(false);
+    const [editValue, setEditValue] = useState('');
     useEffect(() => {
         setId(DOMUtils.createDomID());
         const getExpandedState = async () => {
@@ -177,20 +176,70 @@ const LayerGroupComponent = props => {
         return () => {
             gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.disconnect(onClientSharedStateChanged);
         };
-    }, [gisModel]);
+    }, [gisModel, group.name]);
+    /**
+     * Listen to editing state changes.
+     */
+    useEffect(() => {
+        const onEditingChanged = (sender, editing) => {
+            if ((editing === null || editing === void 0 ? void 0 : editing.type) === 'group' && editing.itemId === name) {
+                setIsEditing(true);
+                setEditValue(name);
+            }
+            else {
+                setIsEditing(false);
+            }
+        };
+        // Check initial editing state
+        const editing = gisModel === null || gisModel === void 0 ? void 0 : gisModel.editing;
+        if ((editing === null || editing === void 0 ? void 0 : editing.type) === 'group' && editing.itemId === name) {
+            setIsEditing(true);
+            setEditValue(name);
+        }
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.editingChanged.connect(onEditingChanged);
+        return () => {
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.editingChanged.disconnect(onEditingChanged);
+        };
+    }, [gisModel, name]);
     const handleRightClick = (event) => {
-        var _a;
-        const childId = (_a = event.currentTarget.children.namedItem(id)) === null || _a === void 0 ? void 0 : _a.id;
-        onClick({ type: 'group', item: name, nodeId: childId, event });
+        onClick({ type: 'group', item: name, event });
     };
     const handleExpand = async () => {
         state.save(`jupytergis:${group.name}`, { expanded: !open });
         setOpen(!open);
     };
+    const handleRenameSave = () => {
+        const newName = editValue.trim();
+        if (newName && newName !== name && gisModel) {
+            gisModel.renameLayerGroup(name, newName);
+        }
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clearEditingItem();
+    };
+    const handleRenameCancel = () => {
+        setEditValue(name);
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clearEditingItem();
+    };
+    const handleRenameKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleRenameSave();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            handleRenameCancel();
+        }
+    };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_GROUP_CLASS}`, draggable: true, onDragStart: Private.onDragStart, onDragEnd: Private.onDragEnd, "data-id": name },
         React.createElement("div", { onClick: handleExpand, onContextMenu: handleRightClick, className: `${LAYER_GROUP_HEADER_CLASS}${selected ? ' jp-mod-selected' : ''}`, onDragOver: Private.onDragOver, "data-id": name },
             React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `${LAYER_GROUP_COLLAPSER_CLASS}${open ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
-            React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name)),
+            isEditing ? (React.createElement("input", { type: "text", value: editValue, onChange: e => setEditValue(e.target.value), onKeyDown: handleRenameKeyDown, onBlur: handleRenameSave, className: LAYER_TEXT_CLASS, style: {
+                    flex: 1,
+                    border: '1px solid var(--jp-border-color1)',
+                    borderRadius: '2px',
+                    padding: '2px 4px',
+                    fontSize: 'inherit',
+                    fontFamily: 'inherit',
+                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name))),
         open && (React.createElement("div", null, layers
             .slice()
             .reverse()
@@ -216,6 +265,8 @@ const LayerComponent = props => {
     // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
     isSelected(layerId, gisModel));
     const [expanded, setExpanded] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editValue, setEditValue] = useState('');
     const { symbology } = useGetSymbology({
         layerId,
         model: gisModel,
@@ -237,7 +288,31 @@ const LayerComponent = props => {
         return () => {
             gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.disconnect(onClientSharedStateChanged);
         };
-    }, [gisModel]);
+    }, [gisModel, layerId]);
+    /**
+     * Listen to editing state changes.
+     */
+    useEffect(() => {
+        const onEditingChanged = (sender, editing) => {
+            if ((editing === null || editing === void 0 ? void 0 : editing.type) === 'layer' && editing.itemId === layerId) {
+                setIsEditing(true);
+                setEditValue(name);
+            }
+            else {
+                setIsEditing(false);
+            }
+        };
+        // Check initial editing state
+        const editing = gisModel === null || gisModel === void 0 ? void 0 : gisModel.editing;
+        if ((editing === null || editing === void 0 ? void 0 : editing.type) === 'layer' && editing.itemId === layerId) {
+            setIsEditing(true);
+            setEditValue(name);
+        }
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.editingChanged.connect(onEditingChanged);
+        return () => {
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.editingChanged.disconnect(onEditingChanged);
+        };
+    }, [gisModel, layerId, name]);
     /**
      * Toggle layer visibility.
      */
@@ -247,15 +322,34 @@ const LayerComponent = props => {
         (_a = gisModel === null || gisModel === void 0 ? void 0 : gisModel.sharedModel) === null || _a === void 0 ? void 0 : _a.updateLayer(layerId, layer);
     };
     const setSelection = (event) => {
-        var _a;
-        const childId = (_a = event.currentTarget.children.namedItem(id)) === null || _a === void 0 ? void 0 : _a.id;
         onClick({
             type: 'layer',
             item: layerId,
-            nodeId: childId,
             event,
         });
     };
+    const handleRenameSave = () => {
+        const newName = editValue.trim();
+        if (newName && newName !== name && gisModel) {
+            const updatedLayer = Object.assign(Object.assign({}, layer), { name: newName });
+            gisModel.sharedModel.updateLayer(layerId, updatedLayer);
+        }
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clearEditingItem();
+    };
+    const handleRenameCancel = () => {
+        setEditValue(name);
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clearEditingItem();
+    };
+    const handleRenameKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleRenameSave();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            handleRenameCancel();
+        }
+    };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId, style: { display: 'flex', flexDirection: 'column' } },
         React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection, style: { display: 'flex' } },
             hasSupportedSymbology && (React.createElement(Button, { minimal: true, onClick: e => {
@@ -266,7 +360,14 @@ const LayerComponent = props => {
             React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
                 React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" })),
             icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
-            React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name)),
+            isEditing ? (React.createElement("input", { type: "text", value: editValue, onChange: e => setEditValue(e.target.value), onKeyDown: handleRenameKeyDown, onBlur: handleRenameSave, className: LAYER_TEXT_CLASS, style: {
+                    flex: 1,
+                    border: '1px solid var(--jp-border-color1)',
+                    borderRadius: '2px',
+                    padding: '2px 4px',
+                    fontSize: 'inherit',
+                    fontFamily: 'inherit',
+                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name))),
         expanded && gisModel && hasSupportedSymbology && (React.createElement("div", { style: { marginTop: 6, width: '100%' } },
             React.createElement(LegendItem, { layerId: layerId, model: gisModel })))));
 };

package/lib/panelview/components/legendItem.js

@@ -42,7 +42,7 @@ export const LegendItem = ({ layerId, model }) => {
         return categories;
     };
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (isLoading) {
             setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "Loading\u2026"));
             return;
@@ -157,6 +157,41 @@ export const LegendItem = ({ layerId, model }) => {
                     React.createElement("span", { style: { fontSize: '0.75em' } }, String(c.category))))))));
             return;
         }
+        // Heatmap
+        if (renderType === 'Heatmap') {
+            const colors = Array.isArray(symbology.color) ? symbology.color : [];
+            if (!colors.length) {
+                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No heatmap colors"));
+                return;
+            }
+            const gradient = `linear-gradient(to right, ${colors.join(', ')})`;
+            const reversed = (_j = symbology.symbologyState) === null || _j === void 0 ? void 0 : _j.reverse;
+            setContent(React.createElement("div", { style: { padding: 6, width: '90%' } },
+                React.createElement("div", { style: { fontSize: '1em', marginBottom: 10 } },
+                    React.createElement("strong", null, "Heatmap")),
+                React.createElement("div", { style: {
+                        height: 12,
+                        background: gradient,
+                        border: '1px solid #ccc',
+                        borderRadius: 3,
+                        marginBottom: 4,
+                    } }),
+                React.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: '0.75em',
+                        marginBottom: 8,
+                    } },
+                    React.createElement("span", { style: { fontWeight: 'bold' } }, "Low"),
+                    React.createElement("span", { style: { fontWeight: 'bold' } }, "High")),
+                React.createElement("div", { style: {
+                        fontSize: '0.75em',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 2,
+                    } }, reversed && (React.createElement("span", { style: { fontWeight: 'bold' } }, "Reversed ramp")))));
+            return;
+        }
         setContent(React.createElement("p", null,
             "Unsupported symbology: ",
             String(renderType)));

package/lib/panelview/leftpanel.d.ts

@@ -6,7 +6,6 @@ import * as React from 'react';
 export interface ILeftPanelClickHandlerParams {
     type: SelectionType;
     item: string;
-    nodeId?: string;
     event: ReactMouseEvent;
 }
 interface ILeftPanelProps {

package/lib/panelview/leftpanel.js

@@ -28,14 +28,14 @@ export const LeftPanel = (props) => {
     const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
     return (React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
         React.createElement(PanelTabs, { curTab: curTab, className: "jgis-panel-tabs" },
-            React.createElement(TabsList, null, tabInfo.map(e => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: e.name, onClick: () => {
-                    if (curTab !== e.name) {
-                        setCurTab(e.name);
+            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
+                    if (curTab !== tab.name) {
+                        setCurTab(tab.name);
                     }
                     else {
                         setCurTab('');
                     }
-                } }, e.title)))),
+                } }, tab.title)))),
             !settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
                 React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state }))),
             !settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content" },

package/lib/panelview/rightpanel.js

@@ -47,14 +47,14 @@ export const RightPanel = props => {
     const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     return (React.createElement("div", { className: "jgis-right-panel-container", style: { display: rightPanelVisible ? 'block' : 'none' } },
         React.createElement(PanelTabs, { className: "jgis-panel-tabs", curTab: curTab },
-            React.createElement(TabsList, null, tabInfo.map(e => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: e.name, onClick: () => {
-                    if (curTab !== e.name) {
-                        setCurTab(e.name);
+            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
+                    if (curTab !== tab.name) {
+                        setCurTab(tab.name);
                     }
                     else {
                         setCurTab('');
                     }
-                } }, e.title)))),
+                } }, tab.title)))),
             !settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
                 React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
             !settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },

package/lib/processing/processingFormToParam.js

@@ -5,6 +5,9 @@ export function processingFormToParam(formValues, processingType) {
         return;
     }
     const processingElement = ProcessingMerge.find(e => e.description === processingType);
+    if (!processingElement) {
+        return;
+    }
     const params = processingElement.operationParams;
     const out = {};
     for (let i = 0; i < params.length; i++) {

package/lib/shared/components/ToggleGroup.d.ts

@@ -3,10 +3,10 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleGroup, ToggleGroupItem };

package/lib/stacBrowser/hooks/useStacSearch.js

@@ -138,7 +138,7 @@ function useStacSearch({ model }) {
             //@ts-expect-error Jupyter requires X-XSRFToken header
             options, 'internal'));
             if (!data) {
-                console.log('No Results found');
+                console.debug('STAC search failed -- no results found');
                 setResults([]);
                 setTotalPages(1);
                 setTotalResults(0);
@@ -150,7 +150,7 @@ function useStacSearch({ model }) {
             setTotalResults(data.context.matched);
         }
         catch (error) {
-            console.error('Error fetching data:', error);
+            console.error('STAC search failed -- error fetching data:', error);
             setResults([]);
             setTotalPages(1);
             setTotalResults(0);

package/lib/toolbar/widget.js

@@ -1,6 +1,6 @@
 import { UsersItem, DefaultIconRenderer } from '@jupyter/collaboration';
 import { CommandToolbarButton } from '@jupyterlab/apputils';
-import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, redoIcon, undoIcon, } from '@jupyterlab/ui-components';
+import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 import * as React from 'react';
 import { CommandIDs } from "../constants";
@@ -42,31 +42,6 @@ export class ToolbarWidget extends ReactiveToolbar {
         this._model = options.model;
         this.addClass('jGIS-toolbar-widget');
         if (options.commands) {
-            const undoButton = new CommandToolbarButton({
-                id: CommandIDs.undo,
-                label: '',
-                icon: undoIcon,
-                commands: options.commands,
-            });
-            this.addItem('undo', undoButton);
-            undoButton.node.dataset.testid = 'undo-button';
-            const redoButton = new CommandToolbarButton({
-                id: CommandIDs.redo,
-                label: '',
-                icon: redoIcon,
-                commands: options.commands,
-            });
-            this.addItem('redo', redoButton);
-            this.addItem('separator0', new Separator());
-            const toggleConsoleButton = new CommandToolbarButton({
-                id: CommandIDs.toggleConsole,
-                commands: options.commands,
-                label: '',
-                icon: terminalToolbarIcon,
-            });
-            this.addItem('Toggle console', toggleConsoleButton);
-            toggleConsoleButton.node.dataset.testid = 'toggle-console-button';
-            this.addItem('separator1', new Separator());
             const openLayersBrowserButton = new CommandToolbarButton({
                 id: CommandIDs.openLayerBrowser,
                 label: '',
@@ -95,9 +70,9 @@ export class ToolbarWidget extends ReactiveToolbar {
                     NewSubMenu.open(bbox.x, bbox.bottom);
                 },
             });
-            NewEntryButton.node.dataset.testid = 'new-entry-button';
             this.addItem('New', NewEntryButton);
-            this.addItem('separator2', new Separator());
+            NewEntryButton.node.dataset.testid = 'new-entry-button';
+            this.addItem('separator1', new Separator());
             const geolocationButton = new CommandToolbarButton({
                 id: CommandIDs.getGeolocation,
                 commands: options.commands,
@@ -120,6 +95,22 @@ export class ToolbarWidget extends ReactiveToolbar {
             this.addItem('temporalController', temporalControllerButton);
             temporalControllerButton.node.dataset.testid =
                 'temporal-controller-button';
+            const addMarkerButton = new CommandToolbarButton({
+                id: CommandIDs.addMarker,
+                label: '',
+                commands: options.commands,
+            });
+            this.addItem('addMarker', addMarkerButton);
+            addMarkerButton.node.dataset.testid = 'add-marker-controller-button';
+            this.addItem('separator2', new Separator());
+            const toggleConsoleButton = new CommandToolbarButton({
+                id: CommandIDs.toggleConsole,
+                commands: options.commands,
+                label: '',
+                icon: terminalToolbarIcon,
+            });
+            this.addItem('Toggle console', toggleConsoleButton);
+            toggleConsoleButton.node.dataset.testid = 'toggle-console-button';
             this.addItem('spacer', ReactiveToolbar.createSpacerItem());
             // Users
             const iconRenderer = createUserIconRenderer(this._model);

package/lib/tools.d.ts

@@ -116,6 +116,7 @@ export declare const getMimeType: (filename: string) => string;
  * @returns An ArrayBuffer.
  */
 export declare const stringToArrayBuffer: (content: string) => Promise<ArrayBuffer>;
+export declare const getFeatureAttributes: <T>(featureProperties: Record<string, Set<any>>, predicate?: (key: string, value: any) => boolean) => Record<string, Set<T>>;
 /**
  * Get attributes of the feature which are numeric.
  *

package/lib/tools.js

@@ -81,7 +81,7 @@ export async function requestAPI(endPoint = '', init = {}) {
             data = JSON.parse(data);
         }
         catch (error) {
-            console.log('Not a JSON response body.', response);
+            console.error('Jupyter API request failed -- not a JSON response body:', response);
         }
     }
     if (!response.ok) {
@@ -701,7 +701,7 @@ export const stringToArrayBuffer = async (content) => {
     const base64Response = await fetch(`data:application/octet-stream;base64,${content}`);
     return await base64Response.arrayBuffer();
 };
-const getFeatureAttributes = (featureProperties, predicate = (key, value) => true) => {
+export const getFeatureAttributes = (featureProperties, predicate = (key, value) => true) => {
     const filteredRecord = {};
     for (const [key, set] of Object.entries(featureProperties)) {
         const firstValue = set.values().next().value;

package/lib/types.d.ts

@@ -5,6 +5,12 @@ export { IDict };
 export type ValueOf<T> = T[keyof T];
 export type JupyterGISTracker = WidgetTracker<IJupyterGISWidget>;
 export type SymbologyTab = 'color' | 'radius';
+type RgbColorValue = [number, number, number] | [number, number, number, number];
+type HexColorValue = string;
+type InternalRgbArray = number[];
+export type ColorValue = RgbColorValue | HexColorValue;
+export type SizeValue = number;
+export type SymbologyValue = SizeValue | ColorValue | InternalRgbArray;
 export type VectorRenderType = 'Single Symbol' | 'Canonical' | 'Graduated' | 'Categorized' | 'Heatmap';
 /**
  * Add jupytergisMaps object to the global variables.
@@ -19,3 +25,5 @@ declare global {
         };
     }
 }
+declare const classificationModes: readonly ["quantile", "equal interval", "jenks", "pretty", "logarithmic", "continuous"];
+export type ClassificationMode = (typeof classificationModes)[number];

package/lib/types.js

@@ -1 +1,9 @@
+const classificationModes = [
+    'quantile',
+    'equal interval',
+    'jenks',
+    'pretty',
+    'logarithmic',
+    'continuous',
+];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^3.1.0",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.9.1",
+    "@jupytergis/schema": "^0.10.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",

package/style/base.css

@@ -92,6 +92,7 @@ button.jp-mod-styled.jp-mod-reject {
   right: 0px;
   position: absolute;
   margin: 5px;
+  z-index: 40;
 }
 
 .jgis-left-panel-container {
@@ -100,6 +101,7 @@ button.jp-mod-styled.jp-mod-reject {
   top: 30px;
   left: 0px;
   margin: 5px;
+  z-index: 40;
 }
 
 @media (max-width: 768px) {

package/style/icons/book_open.svg

@@ -4,7 +4,7 @@
    version="1.1"
    id="svg1"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
+>
    <defs
       id="defs1" />
    <!--!Font

package/style/icons/clock-solid.svg

@@ -4,7 +4,7 @@
    version="1.1"
    id="svg1"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
+>
   <defs
      id="defs1" />
   <!--!FontAwesome Free 6.7.2 by @fontawesome - https://fontawesome.com License -https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->

package/style/icons/geolocation.svg

@@ -4,7 +4,7 @@
    version="1.1"
    id="svg1"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
+>
   <defs
      id="defs1" />
   <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->

package/style/icons/info-solid.svg

@@ -4,7 +4,7 @@
     version="1.1"
     id="svg1"
     xmlns="http://www.w3.org/2000/svg"
-    xmlns:svg="http://www.w3.org/2000/svg">
+>
     <defs
         id="defs1" />
     <!--!Font