@jupytergis/base 0.8.0 → 0.9.0

package/lib/commands/BaseCommandIDs.d.ts

@@ -31,3 +31,11 @@ export declare const selectCompleter = "jupytergis:selectConsoleCompleter";
 export declare const addAnnotation = "jupytergis:addAnnotation";
 export declare const zoomToLayer = "jupytergis:zoomToLayer";
 export declare const downloadGeoJSON = "jupytergis:downloadGeoJSON";
+export declare const toggleLeftPanel = "jupytergis:toggleLeftPanel";
+export declare const toggleRightPanel = "jupytergis:toggleRightPanel";
+export declare const showLayersTab = "jupytergis:showLayersTab";
+export declare const showStacBrowserTab = "jupytergis:showStacBrowserTab";
+export declare const showFiltersTab = "jupytergis:showFiltersTab";
+export declare const showObjectPropertiesTab = "jupytergis:showObjectPropertiesTab";
+export declare const showAnnotationsTab = "jupytergis:showAnnotationsTab";
+export declare const showIdentifyPanelTab = "jupytergis:showIdentifyPanelTab";

package/lib/commands/BaseCommandIDs.js

@@ -42,3 +42,14 @@ export const selectCompleter = 'jupytergis:selectConsoleCompleter';
 export const addAnnotation = 'jupytergis:addAnnotation';
 export const zoomToLayer = 'jupytergis:zoomToLayer';
 export const downloadGeoJSON = 'jupytergis:downloadGeoJSON';
+// Panel toggles
+export const toggleLeftPanel = 'jupytergis:toggleLeftPanel';
+export const toggleRightPanel = 'jupytergis:toggleRightPanel';
+// Left panel tabs
+export const showLayersTab = 'jupytergis:showLayersTab';
+export const showStacBrowserTab = 'jupytergis:showStacBrowserTab';
+export const showFiltersTab = 'jupytergis:showFiltersTab';
+// Right panel tabs
+export const showObjectPropertiesTab = 'jupytergis:showObjectPropertiesTab';
+export const showAnnotationsTab = 'jupytergis:showAnnotationsTab';
+export const showIdentifyPanelTab = 'jupytergis:showIdentifyPanelTab';

package/lib/commands/index.js

@@ -85,20 +85,29 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
                 'VectorLayer',
                 'ShapefileLayer',
                 'WebGlLayer',
+                'VectorTileLayer',
             ].includes(selectedLayer.type);
-            const isIdentifying = current.model.isIdentifying;
-            if (isIdentifying && !canIdentify) {
-                current.model.isIdentifying = false;
+            if (current.model.currentMode === 'identifying' && !canIdentify) {
+                current.model.currentMode = 'panning';
                 current.node.classList.remove('jGIS-identify-tool');
                 return false;
             }
-            return isIdentifying;
+            return current.model.currentMode === 'identifying';
         }, isEnabled: () => {
+            var _a;
+            if ((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model.jgisSettings.identifyDisabled) {
+                return false;
+            }
             const selectedLayer = getSingleSelectedLayer(tracker);
             if (!selectedLayer) {
                 return false;
             }
-            return ['VectorLayer', 'ShapefileLayer', 'WebGlLayer'].includes(selectedLayer.type);
+            return [
+                'VectorLayer',
+                'ShapefileLayer',
+                'WebGlLayer',
+                'VectorTileLayer',
+            ].includes(selectedLayer.type);
         }, execute: args => {
             const current = tracker.currentWidget;
             if (!current) {
@@ -108,7 +117,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             if (luminoEvent) {
                 const keysPressed = luminoEvent.keys;
                 if (keysPressed === null || keysPressed === void 0 ? void 0 : keysPressed.includes('Escape')) {
-                    current.model.isIdentifying = false;
+                    current.model.currentMode = 'panning';
                     current.node.classList.remove('jGIS-identify-tool');
                     commands.notifyCommandChanged(CommandIDs.identify);
                     return;
@@ -646,6 +655,165 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
         },
         icon: targetWithCenterIcon,
     });
+    // Panel visibility commands
+    commands.addCommand(CommandIDs.toggleLeftPanel, {
+        label: trans.__('Toggle Left Panel'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => {
+            const current = tracker.currentWidget;
+            return current ? !current.model.jgisSettings.leftPanelDisabled : false;
+        },
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            try {
+                const settings = await current.model.getSettings();
+                const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.leftPanelDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.leftPanelDisabled) !== null && _c !== void 0 ? _c : false;
+                await (settings === null || settings === void 0 ? void 0 : settings.set('leftPanelDisabled', !currentValue));
+                commands.notifyCommandChanged(CommandIDs.toggleLeftPanel);
+            }
+            catch (err) {
+                console.error('Failed to toggle Left Panel:', err);
+            }
+        },
+    });
+    commands.addCommand(CommandIDs.toggleRightPanel, {
+        label: trans.__('Toggle Right Panel'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => {
+            const current = tracker.currentWidget;
+            return current ? !current.model.jgisSettings.rightPanelDisabled : false;
+        },
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            try {
+                const settings = await current.model.getSettings();
+                const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.rightPanelDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.rightPanelDisabled) !== null && _c !== void 0 ? _c : false;
+                await (settings === null || settings === void 0 ? void 0 : settings.set('rightPanelDisabled', !currentValue));
+                commands.notifyCommandChanged(CommandIDs.toggleRightPanel);
+            }
+            catch (err) {
+                console.error('Failed to toggle Right Panel:', err);
+            }
+        },
+    });
+    // Left panel tabs
+    commands.addCommand(CommandIDs.showLayersTab, {
+        label: trans.__('Show Layers Tab'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => tracker.currentWidget
+            ? !tracker.currentWidget.model.jgisSettings.layersDisabled
+            : false,
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const settings = await current.model.getSettings();
+            const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.layersDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.layersDisabled) !== null && _c !== void 0 ? _c : false;
+            await (settings === null || settings === void 0 ? void 0 : settings.set('layersDisabled', !currentValue));
+            commands.notifyCommandChanged(CommandIDs.showLayersTab);
+        },
+    });
+    commands.addCommand(CommandIDs.showStacBrowserTab, {
+        label: trans.__('Show STAC Browser Tab'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => tracker.currentWidget
+            ? !tracker.currentWidget.model.jgisSettings.stacBrowserDisabled
+            : false,
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const settings = await current.model.getSettings();
+            const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.stacBrowserDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.stacBrowserDisabled) !== null && _c !== void 0 ? _c : false;
+            await (settings === null || settings === void 0 ? void 0 : settings.set('stacBrowserDisabled', !currentValue));
+            commands.notifyCommandChanged(CommandIDs.showStacBrowserTab);
+        },
+    });
+    commands.addCommand(CommandIDs.showFiltersTab, {
+        label: trans.__('Show Filters Tab'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => tracker.currentWidget
+            ? !tracker.currentWidget.model.jgisSettings.filtersDisabled
+            : false,
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const settings = await current.model.getSettings();
+            const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.filtersDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.filtersDisabled) !== null && _c !== void 0 ? _c : false;
+            await (settings === null || settings === void 0 ? void 0 : settings.set('filtersDisabled', !currentValue));
+            commands.notifyCommandChanged(CommandIDs.showFiltersTab);
+        },
+    });
+    // Right panel tabs
+    commands.addCommand(CommandIDs.showObjectPropertiesTab, {
+        label: trans.__('Show Object Properties Tab'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => tracker.currentWidget
+            ? !tracker.currentWidget.model.jgisSettings.objectPropertiesDisabled
+            : false,
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const settings = await current.model.getSettings();
+            const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.objectPropertiesDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.objectPropertiesDisabled) !== null && _c !== void 0 ? _c : false;
+            await (settings === null || settings === void 0 ? void 0 : settings.set('objectPropertiesDisabled', !currentValue));
+            commands.notifyCommandChanged(CommandIDs.showObjectPropertiesTab);
+        },
+    });
+    commands.addCommand(CommandIDs.showAnnotationsTab, {
+        label: trans.__('Show Annotations Tab'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => tracker.currentWidget
+            ? !tracker.currentWidget.model.jgisSettings.annotationsDisabled
+            : false,
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const settings = await current.model.getSettings();
+            const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.annotationsDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.annotationsDisabled) !== null && _c !== void 0 ? _c : false;
+            await (settings === null || settings === void 0 ? void 0 : settings.set('annotationsDisabled', !currentValue));
+            commands.notifyCommandChanged(CommandIDs.showAnnotationsTab);
+        },
+    });
+    commands.addCommand(CommandIDs.showIdentifyPanelTab, {
+        label: trans.__('Show Identify Panel Tab'),
+        isEnabled: () => Boolean(tracker.currentWidget),
+        isToggled: () => tracker.currentWidget
+            ? !tracker.currentWidget.model.jgisSettings.identifyDisabled
+            : false,
+        execute: async () => {
+            var _a, _b, _c;
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const settings = await current.model.getSettings();
+            const currentValue = (_c = (_b = (_a = settings === null || settings === void 0 ? void 0 : settings.composite) === null || _a === void 0 ? void 0 : _a.identifyDisabled) !== null && _b !== void 0 ? _b : current.model.jgisSettings.identifyDisabled) !== null && _c !== void 0 ? _c : false;
+            await (settings === null || settings === void 0 ? void 0 : settings.set('identifyDisabled', !currentValue));
+            commands.notifyCommandChanged(CommandIDs.showIdentifyPanelTab);
+        },
+    });
     loadKeybindings(commands, keybindings);
 }
 var Private;

package/lib/dialogs/symbology/hooks/useGetSymbology.d.ts

@@ -0,0 +1,17 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+interface IUseGetSymbologyProps {
+    layerId?: string;
+    model: IJupyterGISModel;
+}
+interface IUseGetSymbologyResult {
+    symbology: Record<string, any> | null;
+    isLoading: boolean;
+    error?: Error;
+}
+/**
+ * Extracts symbology information (paint/layout + symbologyState)
+ * for a given layer from the JupyterGIS model.
+ * Keeps symbology updated when the layer changes.
+ */
+export declare const useGetSymbology: ({ layerId, model, }: IUseGetSymbologyProps) => IUseGetSymbologyResult;
+export {};

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

@@ -0,0 +1,65 @@
+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 { useEffect, useState } from 'react';
+/**
+ * Extracts symbology information (paint/layout + symbologyState)
+ * for a given layer from the JupyterGIS model.
+ * Keeps symbology updated when the layer changes.
+ */
+export const useGetSymbology = ({ layerId, model, }) => {
+    const [symbology, setSymbology] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState();
+    useEffect(() => {
+        if (!layerId) {
+            return;
+        }
+        let disposed = false;
+        const fetchSymbology = () => {
+            var _a;
+            try {
+                setIsLoading(true);
+                setError(undefined);
+                const layer = model.getLayer(layerId);
+                if (!layer) {
+                    throw new Error(`Layer not found: ${layerId}`);
+                }
+                const params = (_a = layer.parameters) !== null && _a !== void 0 ? _a : {};
+                const { symbologyState, color } = params, rest = __rest(params, ["symbologyState", "color"]);
+                const result = Object.assign(Object.assign(Object.assign({}, rest), (color ? { color } : {})), (symbologyState ? { symbologyState } : {}));
+                if (!disposed) {
+                    setSymbology(result);
+                }
+            }
+            catch (err) {
+                if (!disposed) {
+                    setError(err);
+                    setSymbology(null);
+                }
+            }
+            finally {
+                if (!disposed) {
+                    setIsLoading(false);
+                }
+            }
+        };
+        // initial load
+        fetchSymbology();
+        model.sharedModel.awareness.on('change', () => {
+            fetchSymbology();
+        });
+        return () => {
+            disposed = true;
+        };
+    }, [layerId, model]);
+    return { symbology, isLoading, error };
+};

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

@@ -5,5 +5,5 @@ export declare namespace VectorUtils {
     const buildRadiusInfo: (layer: IJGISLayer) => IStopRow[];
 }
 export declare namespace Utils {
-    const getValueColorPairs: (stops: number[], selectedRamp: string, nClasses: number) => IStopRow[];
+    const getValueColorPairs: (stops: number[], selectedRamp: string, nClasses: number, reverse?: boolean) => IStopRow[];
 }

package/lib/dialogs/symbology/symbologyUtils.js

@@ -75,12 +75,15 @@ export var VectorUtils;
 })(VectorUtils || (VectorUtils = {}));
 export var Utils;
 (function (Utils) {
-    Utils.getValueColorPairs = (stops, selectedRamp, nClasses) => {
+    Utils.getValueColorPairs = (stops, selectedRamp, nClasses, reverse = false) => {
         let colorMap = colormap({
             colormap: selectedRamp,
             nshades: nClasses > 9 ? nClasses : 9,
             format: 'rgba',
         });
+        if (reverse) {
+            colorMap = [...colorMap].reverse();
+        }
         const valueColorPairs = [];
         // colormap requires 9 classes to generate the ramp
         // so we do some tomfoolery to make it work with less than 9 stops

package/lib/dialogs/symbology/vector_layer/types/Categorized.js

@@ -17,6 +17,7 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
         radius: 5,
     });
     const manualStyleRef = useRef(manualStyle);
+    const [reverseRamp, setReverseRamp] = useState(false);
     if (!layerId) {
         return;
     }
@@ -85,7 +86,7 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
             selectedMode: '',
         });
         const stops = Array.from(selectableAttributesAndValues[selectedAttribute]).sort((a, b) => a - b);
-        const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length);
+        const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length, reverseRamp);
         setStopRows(valueColorPairs);
     };
     const handleOk = () => {
@@ -124,6 +125,7 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
             nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades,
             mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
             symbologyTab,
+            reverse: reverseRamp,
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = newStyle;
@@ -188,6 +190,10 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
                         React.createElement("input", { type: "number", className: "jp-mod-styled", value: manualStyle.radius, onChange: e => {
                                 setManualStyle(prev => (Object.assign(Object.assign({}, prev), { radius: +e.target.value })));
                             } })))),
+                symbologyTab === 'color' && (React.createElement("div", { className: "jp-gis-symbology-row" },
+                    React.createElement("label", null,
+                        React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
+                        "Reverse Color Ramp"))),
                 React.createElement("div", { className: "jp-gis-layer-symbology-container" },
                     React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false, showRampSelector: symbologyTab === 'color' }),
                     React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows }))));

package/lib/dialogs/symbology/vector_layer/types/Graduated.js

@@ -29,6 +29,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
     const [radiusManualStyle, setRadiusManualStyle] = useState({
         radius: 5,
     });
+    const [reverseRamp, setReverseRamp] = useState(false);
     const colorManualStyleRef = useRef(colorManualStyle);
     const radiusManualStyleRef = useRef(radiusManualStyle);
     if (!layerId) {
@@ -161,6 +162,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
             colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
             nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades,
             mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
+            reverse: reverseRamp,
         };
         if (layer.type === 'HeatmapLayer') {
             layer.type = 'VectorLayer';
@@ -198,7 +200,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         }
         const stopOutputPairs = symbologyTab === 'radius'
             ? stops.map(v => ({ stop: v, output: v }))
-            : Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades);
+            : Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades, reverseRamp);
         if (symbologyTab === 'radius') {
             setRadiusStopRows(stopOutputPairs);
         }
@@ -257,6 +259,10 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
                                 handleReset('radius');
                                 setRadiusManualStyle(Object.assign(Object.assign({}, radiusManualStyle), { radius: +e.target.value }));
                             } })))),
+                symbologyTab === 'color' && (React.createElement("div", { className: "jp-gis-symbology-row" },
+                    React.createElement("label", null,
+                        React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
+                        "Reverse Color Ramp"))),
                 React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: symbologyTab === 'color' }),
                 React.createElement(StopContainer, { selectedMethod: symbologyTab || 'color', stopRows: symbologyTab === 'color' ? colorStopRows : radiusStopRows, setStopRows: symbologyTab === 'color' ? setColorStopRows : setRadiusStopRows })));
         }

package/lib/dialogs/symbology/vector_layer/types/Heatmap.js

@@ -14,11 +14,13 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         radius: 8,
         blur: 15,
     });
+    const [reverseRamp, setReverseRamp] = useState(false);
     const selectedRampRef = useRef('viridis');
     const heatmapOptionsRef = useRef({
         radius: 8,
         blur: 15,
     });
+    const reverseRampRef = useRef(false);
     useEffect(() => {
         populateOptions();
         okSignalPromise.promise.then(okSignal => {
@@ -33,7 +35,8 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
     useEffect(() => {
         selectedRampRef.current = selectedRamp;
         heatmapOptionsRef.current = heatmapOptions;
-    }, [selectedRamp, heatmapOptions]);
+        reverseRampRef.current = reverseRamp;
+    }, [selectedRamp, heatmapOptions, reverseRamp]);
     const populateOptions = async () => {
         var _a;
         let colorRamp;
@@ -46,14 +49,18 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         if (!layer.parameters) {
             return;
         }
-        const colorMap = colormap({
+        let colorMap = colormap({
             colormap: selectedRampRef.current,
             nshades: 9,
             format: 'hex',
         });
+        if (reverseRampRef.current) {
+            colorMap = [...colorMap].reverse();
+        }
         const symbologyState = {
             renderType: 'Heatmap',
             colorRamp: selectedRampRef.current,
+            reverse: reverseRampRef.current,
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = colorMap;
@@ -68,6 +75,10 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
             React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
             React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null,
+                React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
+                "Reverse Color Ramp")),
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-value-select' }, "Radius:"),
             React.createElement("input", { type: "number", value: heatmapOptions.radius, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { radius: +event.target.value }))) })),

package/lib/gdal.js

@@ -11,5 +11,3 @@ export async function getGdal() {
         useWorker: false,
     });
 }
-// Early load gdal
-getGdal();

package/lib/mainview/mainView.js

@@ -14,7 +14,7 @@ import { Heatmap as HeatmapLayer, Image as ImageLayer, Layer, Vector as VectorLa
 import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, get as getProjection, toLonLat, transformExtent, } from 'ol/proj';
 import { register } from 'ol/proj/proj4.js';
-import RenderFeature from 'ol/render/Feature';
+import RenderFeature, { toGeometry } from 'ol/render/Feature';
 import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource, Tile as TileSource, } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
 import { Circle, Fill, Stroke, Style } from 'ol/style';
@@ -103,7 +103,7 @@ export class MainView extends React.Component {
                     return layer === this.getLayer(selectedLayerId);
                 },
                 condition: (event) => {
-                    return singleClick(event) && this._model.isIdentifying;
+                    return singleClick(event) && this._model.currentMode === 'identifying';
                 },
                 style: styleFunction,
             });
@@ -483,8 +483,7 @@ export class MainView extends React.Component {
         // Watch isIdentifying and clear the highlight when Identify Tool is turned off
         this._model.sharedModel.awareness.on('change', () => {
             var _a;
-            const isIdentifying = this._model.isIdentifying;
-            if (!isIdentifying && this._highlightLayer) {
+            if (this._model.currentMode !== 'identifying' && this._highlightLayer) {
                 (_a = this._highlightLayer.getSource()) === null || _a === void 0 ? void 0 : _a.clear();
             }
         });
@@ -664,7 +663,8 @@ export class MainView extends React.Component {
         switch (source.type) {
             case 'RasterSource': {
                 const sourceParameters = source.parameters;
-                const pmTiles = sourceParameters.url.endsWith('.pmtiles');
+                const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
+                    sourceParameters.url.endsWith('pmtiles.gz');
                 const url = this.computeSourceUrl(source);
                 if (!pmTiles) {
                     newSource = new XYZSource({
@@ -697,7 +697,8 @@ export class MainView extends React.Component {
             }
             case 'VectorTileSource': {
                 const sourceParameters = source.parameters;
-                const pmTiles = sourceParameters.url.endsWith('.pmtiles');
+                const pmTiles = sourceParameters.url.endsWith('.pmtiles') ||
+                    sourceParameters.url.endsWith('pmtiles.gz');
                 const url = this.computeSourceUrl(source);
                 if (!pmTiles) {
                     newSource = new VectorTileSource({
@@ -720,7 +721,10 @@ export class MainView extends React.Component {
                     const tile = event.tile;
                     const features = tile.getFeatures();
                     if (features && features.length > 0) {
-                        this._model.syncTileFeatures({ sourceId: id, features });
+                        this._model.syncTileFeatures({
+                            sourceId: id,
+                            features,
+                        });
                     }
                 });
                 break;
@@ -735,9 +739,7 @@ export class MainView extends React.Component {
                 const format = new GeoJSON({
                     featureProjection: this._Map.getView().getProjection(),
                 });
-                // TODO: Don't hardcode projection
                 const featureArray = format.readFeatures(data, {
-                    dataProjection: 'EPSG:4326',
                     featureProjection: this._Map.getView().getProjection(),
                 });
                 const featureCollection = new Collection(featureArray);
@@ -1575,7 +1577,7 @@ export class MainView extends React.Component {
     }
     _identifyFeature(e) {
         var _a, _b;
-        if (!this._model.isIdentifying) {
+        if (this._model.currentMode !== 'identifying') {
             return;
         }
         const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
@@ -1587,6 +1589,39 @@ export class MainView extends React.Component {
         const layerId = Object.keys(selectedLayer)[0];
         const jgisLayer = this._model.getLayer(layerId);
         switch (jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) {
+            case 'VectorTileLayer': {
+                const geometries = [];
+                const features = [];
+                this._Map.forEachFeatureAtPixel(e.pixel, (feature) => {
+                    let geom;
+                    if (feature instanceof RenderFeature) {
+                        geom = toGeometry(feature);
+                    }
+                    else if ('getGeometry' in feature) {
+                        geom = feature.getGeometry();
+                    }
+                    const props = feature.getProperties();
+                    if (geom) {
+                        geometries.push(geom);
+                    }
+                    features.push(Object.assign({}, props));
+                    return true;
+                });
+                if (features.length > 0) {
+                    this._model.syncIdentifiedFeatures(features, this._mainViewModel.id);
+                }
+                if (geometries.length > 0) {
+                    for (const geom of geometries) {
+                        this._model.highlightFeatureSignal.emit(geom);
+                    }
+                }
+                else {
+                    const coordinate = this._Map.getCoordinateFromPixel(e.pixel);
+                    const point = new Point(coordinate);
+                    this._model.highlightFeatureSignal.emit(point);
+                }
+                break;
+            }
             case 'WebGlLayer': {
                 const layer = this.getLayer(layerId);
                 const data = layer.getData(e.pixel);
@@ -1670,7 +1705,8 @@ export class MainView extends React.Component {
                             height: '100%',
                         } })),
                 React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })),
-            this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state })),
-            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel }))));
+            React.createElement("div", { className: "jgis-panels-wrapper" },
+                this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state })),
+                this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel })))));
     }
 }

package/lib/panelview/components/identify-panel/IdentifyPanel.js

@@ -35,7 +35,8 @@ export const IdentifyPanelComponent = ({ model, }) => {
                 setFeatures({});
                 return;
             }
-            if (model.isIdentifying && featuresRef.current !== identifiedFeatures) {
+            if (model.currentMode === 'identifying' &&
+                featuresRef.current !== identifiedFeatures) {
                 setFeatures(identifiedFeatures);
             }
         };
@@ -53,6 +54,15 @@ export const IdentifyPanelComponent = ({ model, }) => {
     const toggleFeatureVisibility = (index) => {
         setVisibleFeatures(prev => (Object.assign(Object.assign({}, prev), { [index]: !prev[index] })));
     };
+    const getFeatureNameOrId = (feature, featureIndex) => {
+        for (const key of Object.keys(feature)) {
+            const lowerCase = key.toLowerCase();
+            if ((lowerCase.includes('name') || lowerCase === 'id') && feature[key]) {
+                return feature[key];
+            }
+        }
+        return `Feature ${featureIndex + 1}`;
+    };
     return (React.createElement("div", { className: "jgis-identify-wrapper", style: {
             border: ((_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser)
                 ? `solid 3px ${remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.color}`
@@ -62,9 +72,7 @@ export const IdentifyPanelComponent = ({ model, }) => {
             React.createElement("div", { className: "jgis-identify-grid-item-header" },
                 React.createElement("span", { onClick: () => toggleFeatureVisibility(featureIndex) },
                     React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `jp-gis-layerGroupCollapser${visibleFeatures[featureIndex] ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
-                    React.createElement("span", null,
-                        "Feature ",
-                        featureIndex + 1)),
+                    React.createElement("span", null, getFeatureNameOrId(feature, featureIndex))),
                 (() => {
                     const isRasterFeature = !feature.geometry &&
                         !feature._geometry &&

package/lib/panelview/components/layers.js

@@ -1,9 +1,11 @@
 import { DOMUtils } from '@jupyterlab/apputils';
-import { Button, LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
+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";
 import { nonVisibilityIcon, visibilityIcon } from "../../icons";
+import { LegendItem } from './legendItem';
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
 const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
 const LAYER_GROUP_COLLAPSER_CLASS = 'jp-gis-layerGroupCollapser';
@@ -213,6 +215,12 @@ const LayerComponent = props => {
     const [selected, setSelected] = useState(
     // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
     isSelected(layerId, gisModel));
+    const [expanded, setExpanded] = useState(false);
+    const { symbology } = useGetSymbology({
+        layerId,
+        model: gisModel,
+    });
+    const hasSupportedSymbology = (symbology === null || symbology === void 0 ? void 0 : symbology.symbologyState) !== undefined;
     const name = layer.name;
     useEffect(() => {
         setId(DOMUtils.createDomID());
@@ -248,12 +256,19 @@ const LayerComponent = props => {
             event,
         });
     };
-    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 },
-        React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection },
+    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 => {
+                    e.stopPropagation();
+                    setExpanded(v => !v);
+                }, title: expanded ? 'Hide legend' : 'Show legend' },
+                React.createElement(LabIcon.resolveReact, { icon: expanded ? caretDownIcon : caretRightIcon, tag: "span" }))),
             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))));
+            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 })))));
 };
 var Private;
 (function (Private) {

package/lib/panelview/components/legendItem.d.ts

@@ -0,0 +1,6 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+export declare const LegendItem: React.FC<{
+    layerId: string;
+    model: IJupyterGISModel;
+}>;

package/lib/panelview/components/legendItem.js

@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from 'react';
+import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
+export const LegendItem = ({ layerId, model }) => {
+    const { symbology, isLoading, error } = useGetSymbology({ layerId, model });
+    const [content, setContent] = useState(null);
+    const parseColorStops = (expr) => {
+        if (!Array.isArray(expr) || expr[0] !== 'interpolate') {
+            return [];
+        }
+        const stops = [];
+        for (let i = 3; i < expr.length; i += 2) {
+            const value = expr[i];
+            const rgba = expr[i + 1];
+            const color = Array.isArray(rgba)
+                ? `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`
+                : String(rgba);
+            stops.push({ value, color });
+        }
+        return stops;
+    };
+    const parseCaseCategories = (expr) => {
+        if (!Array.isArray(expr) || expr[0] !== 'case') {
+            return [];
+        }
+        const categories = [];
+        for (let i = 1; i < expr.length - 1; i += 2) {
+            const condition = expr[i];
+            const colorExpr = expr[i + 1];
+            let category = '';
+            if (Array.isArray(condition) && condition[0] === '==') {
+                category = condition[2];
+            }
+            let color = '';
+            if (Array.isArray(colorExpr)) {
+                color = `rgba(${colorExpr[0]},${colorExpr[1]},${colorExpr[2]},${colorExpr[3]})`;
+            }
+            else if (typeof colorExpr === 'string') {
+                color = colorExpr;
+            }
+            categories.push({ category, color });
+        }
+        return categories;
+    };
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (isLoading) {
+            setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "Loading\u2026"));
+            return;
+        }
+        if (error) {
+            setContent(React.createElement("p", { style: { color: 'red', fontSize: '0.8em' } }, error.message));
+            return;
+        }
+        if (!symbology) {
+            setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No symbology"));
+            return;
+        }
+        const renderType = (_a = symbology.symbologyState) === null || _a === void 0 ? void 0 : _a.renderType;
+        const property = (_b = symbology.symbologyState) === null || _b === void 0 ? void 0 : _b.value;
+        const fill = (_d = (_c = symbology.color) === null || _c === void 0 ? void 0 : _c['fill-color']) !== null && _d !== void 0 ? _d : (_e = symbology.color) === null || _e === void 0 ? void 0 : _e['circle-fill-color'];
+        const stroke = (_g = (_f = symbology.color) === null || _f === void 0 ? void 0 : _f['stroke-color']) !== null && _g !== void 0 ? _g : (_h = symbology.color) === null || _h === void 0 ? void 0 : _h['circle-stroke-color'];
+        // Single Symbol
+        if (renderType === 'Single Symbol') {
+            setContent(React.createElement("div", { style: { display: 'flex', gap: 12, flexWrap: 'wrap', padding: 6 } },
+                fill && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                    React.createElement("span", { style: {
+                            width: 16,
+                            height: 16,
+                            border: '1px solid #000',
+                            background: fill,
+                        } }),
+                    React.createElement("span", { style: { fontSize: '0.8em' } }, "Fill"))),
+                stroke && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
+                    React.createElement("span", { style: {
+                            width: 24,
+                            height: 2,
+                            background: stroke,
+                            border: '1px solid #000',
+                        } }),
+                    React.createElement("span", { style: { fontSize: '0.8em' } }, "Stroke"))),
+                !fill && !stroke && (React.createElement("span", { style: { fontSize: '0.8em' } }, "No symbol colors"))));
+            return;
+        }
+        // Graduated
+        if (renderType === 'Graduated') {
+            const stops = parseColorStops(fill || stroke);
+            if (!stops.length) {
+                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No graduated symbology"));
+                return;
+            }
+            const segments = stops
+                .map((s, i) => {
+                const pct = (i / (stops.length - 1)) * 100;
+                return `${s.color} ${pct}%`;
+            })
+                .join(', ');
+            const gradient = `linear-gradient(to right, ${segments})`;
+            setContent(React.createElement("div", { style: { padding: 6, width: '90%' } },
+                property && (React.createElement("div", { style: { fontSize: '1em', marginBottom: 20 } },
+                    React.createElement("strong", null, property))),
+                React.createElement("div", { style: {
+                        position: 'relative',
+                        height: 12,
+                        background: gradient,
+                        border: '1px solid #ccc',
+                        borderRadius: 3,
+                        marginBottom: 20,
+                        marginTop: 10,
+                    } }, stops.map((s, i) => {
+                    const left = (i / (stops.length - 1)) * 100;
+                    const up = i % 2 === 0;
+                    return (React.createElement("div", { key: i, style: {
+                            position: 'absolute',
+                            left: `${left}%`,
+                            transform: 'translateX(-50%)',
+                        } },
+                        React.createElement("div", { style: {
+                                width: 1,
+                                height: 8,
+                                background: '#333',
+                                margin: '0 auto',
+                            } }),
+                        React.createElement("div", { style: {
+                                position: 'absolute',
+                                top: up ? -18 : 12,
+                                fontSize: '0.7em',
+                                whiteSpace: 'nowrap',
+                                marginTop: up ? 0 : 4,
+                            } }, s.value.toFixed(2))));
+                }))));
+            return;
+        }
+        // Categorized
+        if (renderType === 'Categorized') {
+            const cats = parseCaseCategories(fill || stroke);
+            if (!cats.length) {
+                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No categorized symbology"));
+                return;
+            }
+            setContent(React.createElement("div", { style: { padding: 6 } },
+                property && (React.createElement("div", { style: { fontSize: '1em', marginBottom: 6 } },
+                    React.createElement("strong", null, property))),
+                React.createElement("div", { style: {
+                        display: 'grid',
+                        gap: 6,
+                        maxHeight: 200,
+                        overflowY: 'auto',
+                        paddingRight: 4,
+                    } }, cats.map((c, i) => (React.createElement("div", { key: i, style: { display: 'flex', alignItems: 'center', gap: 8 } },
+                    React.createElement("span", { style: {
+                            width: 16,
+                            height: 16,
+                            background: c.color || '#ccc',
+                            border: '1px solid #000',
+                            borderRadius: 2,
+                        } }),
+                    React.createElement("span", { style: { fontSize: '0.75em' } }, String(c.category))))))));
+            return;
+        }
+        setContent(React.createElement("p", null,
+            "Unsupported symbology: ",
+            String(renderType)));
+    }, [symbology, isLoading, error]);
+    return React.createElement("div", null, content);
+};

package/lib/panelview/leftpanel.js

@@ -4,29 +4,42 @@ import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/compon
 import StacPanel from '../stacBrowser/components/StacPanel';
 import FilterComponent from './components/filter-panel/Filter';
 export const LeftPanel = (props) => {
+    const [settings, setSettings] = React.useState(props.model.jgisSettings);
+    React.useEffect(() => {
+        const onSettingsChanged = () => {
+            setSettings(Object.assign({}, props.model.jgisSettings));
+        };
+        props.model.settingsChanged.connect(onSettingsChanged);
+        return () => {
+            props.model.settingsChanged.disconnect(onSettingsChanged);
+        };
+    }, [props.model]);
+    const allLeftTabsDisabled = settings.layersDisabled &&
+        settings.stacBrowserDisabled &&
+        settings.filtersDisabled;
+    const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
     const tabInfo = [
-        { name: 'layers', title: 'Layers' },
-        { name: 'stac', title: 'Stac Browser' },
-        { name: 'filters', title: 'Filters' },
-    ];
-    const [curTab, setCurTab] = React.useState(tabInfo[0].name);
-    return (React.createElement("div", { className: "jgis-left-panel-container" },
+        !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
+        !settings.stacBrowserDisabled
+            ? { name: 'stac', title: 'Stac Browser' }
+            : false,
+        !settings.filtersDisabled ? { name: 'filters', title: 'Filters' } : false,
+    ].filter(Boolean);
+    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 => {
-                return (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: e.name, onClick: () => {
-                        if (curTab !== e.name) {
-                            setCurTab(e.name);
-                        }
-                        else {
-                            setCurTab('');
-                        }
-                    } }, e.title));
-            })),
-            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 })),
-            React.createElement(TabsContent, { value: "stac" },
-                React.createElement(StacPanel, { model: props.model })),
-            React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
-                React.createElement(FilterComponent, { model: props.model }),
-                ","))));
+            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);
+                    }
+                    else {
+                        setCurTab('');
+                    }
+                } }, e.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" },
+                React.createElement(StacPanel, { model: props.model }))),
+            !settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
+                React.createElement(FilterComponent, { model: props.model }))))));
 };

package/lib/panelview/rightpanel.js

@@ -4,29 +4,61 @@ import { IdentifyPanelComponent } from './components/identify-panel/IdentifyPane
 import { ObjectPropertiesReact } from './objectproperties';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 export const RightPanel = props => {
-    const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
+    const [settings, setSettings] = React.useState(props.model.jgisSettings);
     const tabInfo = [
-        { name: 'objectProperties', title: 'Object Properties' },
-        { name: 'annotations', title: 'Annotations' },
-        { name: 'identifyPanel', title: 'Identify Features' },
-    ];
-    const [curTab, setCurTab] = React.useState(tabInfo[0].name);
-    return (React.createElement("div", { className: "jgis-right-panel-container" },
+        !settings.objectPropertiesDisabled
+            ? { name: 'objectProperties', title: 'Object Properties' }
+            : false,
+        !settings.annotationsDisabled
+            ? { name: 'annotations', title: 'Annotations' }
+            : false,
+        !settings.identifyDisabled
+            ? { name: 'identifyPanel', title: 'Identified Features' }
+            : false,
+    ].filter(Boolean);
+    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
+    React.useEffect(() => {
+        const onSettingsChanged = () => {
+            setSettings(Object.assign({}, props.model.jgisSettings));
+        };
+        let currentlyIdentifiedFeatures = undefined;
+        const onAwerenessChanged = (_, clients) => {
+            var _a;
+            const clientId = props.model.getClientId();
+            const localState = clientId ? clients.get(clientId) : null;
+            if (localState &&
+                ((_a = localState.identifiedFeatures) === null || _a === void 0 ? void 0 : _a.value) &&
+                localState.identifiedFeatures.value !== currentlyIdentifiedFeatures) {
+                currentlyIdentifiedFeatures = localState.identifiedFeatures.value;
+                setCurTab('identifyPanel');
+            }
+        };
+        props.model.settingsChanged.connect(onSettingsChanged);
+        props.model.clientStateChanged.connect(onAwerenessChanged);
+        return () => {
+            props.model.settingsChanged.disconnect(onSettingsChanged);
+            props.model.clientStateChanged.disconnect(onAwerenessChanged);
+        };
+    }, [props.model]);
+    const allRightTabsDisabled = settings.objectPropertiesDisabled &&
+        settings.annotationsDisabled &&
+        settings.identifyDisabled;
+    const rightPanelVisible = !settings.rightPanelDisabled && !allRightTabsDisabled;
+    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 => {
-                return (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", value: e.name, onClick: () => {
-                        if (curTab !== e.name) {
-                            setCurTab(e.name);
-                        }
-                        else {
-                            setCurTab('');
-                        }
-                    } }, e.title));
-            })),
-            React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
-                React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model })),
-            React.createElement(TabsContent, { value: "annotations" },
-                React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model })),
-            React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
-                React.createElement(IdentifyPanelComponent, { model: props.model })))));
+            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);
+                    }
+                    else {
+                        setCurTab('');
+                    }
+                } }, e.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" },
+                React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
+            !settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
+                React.createElement(IdentifyPanelComponent, { model: props.model }))))));
 };

package/lib/tools.d.ts

@@ -72,7 +72,11 @@ export declare const loadGeoTiff: (sourceInfo: {
     file: any;
     metadata: any;
     sourceUrl: string;
-} | null | undefined>;
+} | {
+    file: Blob;
+    sourceUrl: string;
+    metadata?: undefined;
+} | null>;
 /**
  * Generalized file reader for different source types.
  *

package/lib/tools.js

@@ -353,6 +353,10 @@ export const loadGeoTiff = async (sourceInfo, model, file) => {
     else {
         fileBlob = await base64ToBlob(file.content, mimeType);
     }
+    return {
+        file: fileBlob,
+        sourceUrl: url,
+    };
 };
 /**
  * Generalized file reader for different source types.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -40,11 +40,11 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@fortawesome/react-fontawesome": "latest",
+    "@fortawesome/react-fontawesome": ">=0.2.6 <3.0.0",
     "@jupyter/collaboration": "^3.1.0",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.8.0",
+    "@jupytergis/schema": "^0.9.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",

package/style/base.css

@@ -101,3 +101,23 @@ button.jp-mod-styled.jp-mod-reject {
   left: 0px;
   margin: 5px;
 }
+
+@media (max-width: 768px) {
+  .jgis-panels-wrapper {
+    position: fixed;
+    top: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    margin: 0 5px;
+    z-index: 1000;
+    width: 60%;
+  }
+
+  .jgis-left-panel-container,
+  .jgis-right-panel-container {
+    position: relative;
+    margin: 0;
+  }
+}

package/style/leftPanel.css

@@ -41,7 +41,7 @@
 .jp-gis-source {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  /* align-items: center; */
   color: var(--jp-ui-font-color1);
 }