@jupytergis/base 0.2.1 → 0.3.0

package/lib/annotations/components/Annotation.js

@@ -36,7 +36,7 @@ const Annotation = ({ itemId, annotationModel, rightPanelModel, children }) => {
         }
     };
     const centerOnAnnotation = () => {
-        jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.centerOnAnnotation(itemId);
+        jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.centerOnPosition(itemId);
     };
     return (React.createElement("div", { className: "jGIS-Annotation" },
         children,

package/lib/commands.js

@@ -3,6 +3,16 @@ import { CommandIDs, icons } from './constants';
 import { CreationFormDialog } from './dialogs/formdialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
 import { SymbologyWidget } from './dialogs/symbology/symbologyDialog';
+import keybindings from './keybindings.json';
+function loadKeybindings(commands, keybindings) {
+    keybindings.forEach(binding => {
+        commands.addKeyBinding({
+            command: binding.command,
+            keys: binding.keys,
+            selector: binding.selector
+        });
+    });
+}
 /**
  * Add the commands to the application's command registry.
  */
@@ -164,7 +174,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             createSource: true,
             sourceData: {
                 name: 'Custom Image Source',
-                url: 'https://maplibre.org/maplibre-gl-js/docs/assets/radar.gif',
+                path: 'https://maplibre.org/maplibre-gl-js/docs/assets/radar.gif',
                 coordinates: [
                     [-80.425, 46.437],
                     [-71.516, 46.437],
@@ -638,6 +648,25 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             }
         }
     });
+    commands.addCommand(CommandIDs.zoomToLayer, {
+        label: trans.__('Zoom to Layer'),
+        execute: () => {
+            var _a;
+            const currentWidget = tracker.currentWidget;
+            if (!currentWidget || !completionProviderManager) {
+                return;
+            }
+            console.log('zooming');
+            const model = tracker.currentWidget.context.model;
+            const selectedItems = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected.value;
+            if (!selectedItems) {
+                return;
+            }
+            const layerId = Object.keys(selectedItems)[0];
+            model.centerOnPosition(layerId);
+        }
+    });
+    loadKeybindings(commands, keybindings);
 }
 var Private;
 (function (Private) {

package/lib/constants.d.ts

@@ -45,6 +45,7 @@ export declare namespace CommandIDs {
     const executeConsole = "jupytergis:executeConsole";
     const selectCompleter = "jupytergis:selectConsoleCompleter";
     const addAnnotation = "jupytergis:addAnnotation";
+    const zoomToLayer = "jupytergis:zoomToLayer";
 }
 interface IRegisteredIcon {
     icon?: LabIcon;

package/lib/constants.js

@@ -55,6 +55,7 @@ export var CommandIDs;
     CommandIDs.selectCompleter = 'jupytergis:selectConsoleCompleter';
     // Map Commands
     CommandIDs.addAnnotation = 'jupytergis:addAnnotation';
+    CommandIDs.zoomToLayer = 'jupytergis:zoomToLayer';
 })(CommandIDs || (CommandIDs = {}));
 const iconObject = {
     RasterSource: { icon: rasterIcon },

package/lib/dialogs/formdialog.d.ts

@@ -16,6 +16,11 @@ export interface ICreationFormWrapperProps extends ICreationFormProps {
      * some extra errors or not.
      */
     formErrorSignalPromise?: PromiseDelegate<Signal<Dialog<any>, boolean>>;
+    /**
+     * Configuration options for the dialog, including settings for layer data, source data,
+     * and other form-related parameters.
+     */
+    dialogOptions?: any;
 }
 export interface ICreationFormDialogOptions extends ICreationFormProps {
     title: string;

package/lib/dialogs/formdialog.js

@@ -16,7 +16,7 @@ export const CreationFormWrapper = (props) => {
         formErrorSignal.current = formChanged;
         setReady(true);
     });
-    return (ready && (React.createElement(CreationForm, { context: props.context, formSchemaRegistry: props.formSchemaRegistry, createLayer: props.createLayer, createSource: props.createSource, layerType: props.layerType, sourceType: props.sourceType, sourceData: props.sourceData, layerData: props.layerData, ok: okSignal.current, cancel: props.cancel, formErrorSignal: formErrorSignal.current })));
+    return (ready && (React.createElement(CreationForm, { context: props.context, formSchemaRegistry: props.formSchemaRegistry, createLayer: props.createLayer, createSource: props.createSource, layerType: props.layerType, sourceType: props.sourceType, sourceData: props.sourceData, layerData: props.layerData, ok: okSignal.current, cancel: props.cancel, formErrorSignal: formErrorSignal.current, dialogOptions: props.dialogOptions })));
 };
 /**
  * Form for creating a source, a layer or both at the same time
@@ -29,7 +29,7 @@ export class CreationFormDialog extends Dialog {
         const okSignalPromise = new PromiseDelegate();
         const formErrorSignalPromise = new PromiseDelegate();
         const body = (React.createElement("div", { style: { overflow: 'auto' } },
-            React.createElement(CreationFormWrapper, { context: options.context, formSchemaRegistry: options.formSchemaRegistry, createLayer: options.createLayer, createSource: options.createSource, layerType: options.layerType, sourceType: options.sourceType, sourceData: options.sourceData, layerData: options.layerData, okSignalPromise: okSignalPromise, cancel: cancelCallback, formErrorSignalPromise: formErrorSignalPromise })));
+            React.createElement(CreationFormWrapper, { context: options.context, formSchemaRegistry: options.formSchemaRegistry, createLayer: options.createLayer, createSource: options.createSource, layerType: options.layerType, sourceType: options.sourceType, sourceData: options.sourceData, layerData: options.layerData, okSignalPromise: okSignalPromise, cancel: cancelCallback, formErrorSignalPromise: formErrorSignalPromise, dialogOptions: options })));
         super({
             title: options.title,
             body,

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

@@ -6,6 +6,7 @@ const ModeSelectRow = ({ numberOfShades, setNumberOfShades, selectedMode, setSel
             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("div", { className: "jp-gis-color-ramp-div" },
             React.createElement("label", { htmlFor: "mode-select" }, "Mode:"),
-            React.createElement("select", { name: "mode-select", onChange: event => setSelectedMode(event.target.value) }, modeOptions.map(mode => (React.createElement("option", { className: "jp-mod-styled", value: mode, selected: selectedMode === mode }, 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))))))));
 };
 export default ModeSelectRow;

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

@@ -0,0 +1,27 @@
+import { IDict, IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+export interface IBandHistogram {
+    buckets: number[];
+    count: number;
+    max: number;
+    min: number;
+}
+export interface IBandRow {
+    band: number;
+    colorInterpretation: string;
+    stats: {
+        minimum: number;
+        maximum: number;
+        mean: number;
+        stdDev: number;
+    };
+    metadata: IDict;
+    histogram: IBandHistogram;
+}
+declare const useGetBandInfo: (context: DocumentRegistry.IContext<IJupyterGISModel>, layer: IJGISLayer) => {
+    bandRows: IBandRow[];
+    setBandRows: import("react").Dispatch<import("react").SetStateAction<IBandRow[]>>;
+    loading: boolean;
+    error: string | null;
+};
+export default useGetBandInfo;

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

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react';
+import { loadGeoTIFFWithCache } from '../../../tools';
+const preloadGeoTiffFile = async (sourceInfo) => {
+    return await loadGeoTIFFWithCache(sourceInfo);
+};
+const useGetBandInfo = (context, layer) => {
+    const [bandRows, setBandRows] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const fetchBandInfo = async () => {
+        var _a, _b;
+        setLoading(true);
+        setError(null);
+        try {
+            const bandsArr = [];
+            const source = context.model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
+            const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
+            if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
+                setError('No source URL found.');
+                setLoading(false);
+                return;
+            }
+            const preloadedFile = await preloadGeoTiffFile(sourceInfo);
+            const { file, metadata, sourceUrl } = Object.assign({}, preloadedFile);
+            if (file && metadata && sourceUrl === sourceInfo.url) {
+                metadata['bands'].forEach((bandData) => {
+                    var _a, _b;
+                    bandsArr.push({
+                        band: bandData.band,
+                        colorInterpretation: bandData.colorInterpretation,
+                        stats: {
+                            minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
+                            maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
+                            mean: bandData.mean,
+                            stdDev: bandData.stdDev
+                        },
+                        metadata: bandData.metadata,
+                        histogram: bandData.histogram
+                    });
+                });
+                setBandRows(bandsArr);
+            }
+            else {
+                setError('Failed to preload the file or metadata mismatch.');
+            }
+        }
+        catch (err) {
+            setError(`Error fetching band info: ${err.message}`);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchBandInfo();
+    }, []);
+    return { bandRows, setBandRows, loading, error };
+};
+export default useGetBandInfo;

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

@@ -1,5 +1,6 @@
 // import { GeoJSONFeature } from 'geojson';
 import { useEffect, useState } from 'react';
+import { loadFile } from '../../../tools';
 export const useGetProperties = ({ layerId, model }) => {
     const [featureProps, setFeatureProps] = useState({});
     const [isLoading, setIsLoading] = useState(true);
@@ -15,7 +16,11 @@ export const useGetProperties = ({ layerId, model }) => {
             if (!source) {
                 throw new Error('Source not found');
             }
-            const data = await model.readGeoJSON((_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path);
+            const data = await loadFile({
+                filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
+                type: 'GeoJSONSource',
+                model: model
+            });
             if (!data) {
                 throw new Error('Failed to read GeoJSON data');
             }

package/lib/dialogs/symbology/tiff_layer/TiffRendering.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISymbologyDialogProps } from '../symbologyDialog';
-declare const TiffRendering: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element;
+declare const TiffRendering: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 export default TiffRendering;

package/lib/dialogs/symbology/tiff_layer/TiffRendering.js

@@ -1,10 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import SingleBandPseudoColor from './types/SingleBandPseudoColor';
+import MultibandColor from './types/MultibandColor';
 const TiffRendering = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
-    const [selectedRenderType, setSelectedRenderType] = useState('Singleband Pseudocolor');
+    const [selectedRenderType, setSelectedRenderType] = useState();
     const [componentToRender, setComponentToRender] = useState(null);
     let RenderComponent;
+    if (!layerId) {
+        return;
+    }
+    useEffect(() => {
+        var _a;
+        const layer = context.model.getLayer(layerId);
+        const renderType = (_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState.renderType;
+        setSelectedRenderType(renderType !== null && renderType !== void 0 ? renderType : 'Singleband Pseudocolor');
+    }, []);
     useEffect(() => {
         if (!selectedRenderType) {
             return;
@@ -13,6 +23,9 @@ const TiffRendering = ({ context, state, okSignalPromise, cancel, layerId }) =>
             case 'Singleband Pseudocolor':
                 RenderComponent = (React.createElement(SingleBandPseudoColor, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
                 break;
+            case 'Multiband Color':
+                RenderComponent = (React.createElement(MultibandColor, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                break;
             default:
                 RenderComponent = React.createElement("div", null, "Render Type Not Implemented (yet)");
         }

package/lib/dialogs/symbology/tiff_layer/components/BandRow.d.ts

@@ -1,10 +1,23 @@
 import React from 'react';
-import { IBandRow } from '../types/SingleBandPseudoColor';
-declare const BandRow: ({ index, bandRow, bandRows, setSelectedBand, setBandRows }: {
+import { IBandRow } from '../../hooks/useGetBandInfo';
+interface IBandRowProps {
+    label: string;
     index: number;
     bandRow: IBandRow;
     bandRows: IBandRow[];
     setSelectedBand: (band: number) => void;
     setBandRows: (bandRows: IBandRow[]) => void;
-}) => React.JSX.Element;
+    isMultibandColor?: boolean;
+}
+/**
+ *
+ * @param label Label displayed in symbology dialog
+ * @param index Index of current row in band row data
+ * @param bandRow Band from bands array, will be undefined when band is 'unset' in Multiband color
+ * @param bandRows Bands array from tiff data
+ * @param setSelectedBand Function to set selected band parent
+ * @param setBandRows Function to update band rows in parent
+ * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
+ */
+declare const BandRow: ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows, isMultibandColor }: IBandRowProps) => React.JSX.Element;
 export default BandRow;

package/lib/dialogs/symbology/tiff_layer/components/BandRow.js

@@ -1,7 +1,17 @@
 import React, { useState } from 'react';
-const BandRow = ({ index, bandRow, bandRows, setSelectedBand, setBandRows }) => {
-    const [minValue, setMinValue] = useState(bandRow.stats.minimum);
-    const [maxValue, setMaxValue] = useState(bandRow.stats.maximum);
+/**
+ *
+ * @param label Label displayed in symbology dialog
+ * @param index Index of current row in band row data
+ * @param bandRow Band from bands array, will be undefined when band is 'unset' in Multiband color
+ * @param bandRows Bands array from tiff data
+ * @param setSelectedBand Function to set selected band parent
+ * @param setBandRows Function to update band rows in parent
+ * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
+ */
+const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows, isMultibandColor }) => {
+    const [minValue, setMinValue] = useState(bandRow === null || bandRow === void 0 ? void 0 : bandRow.stats.minimum);
+    const [maxValue, setMaxValue] = useState(bandRow === null || bandRow === void 0 ? void 0 : bandRow.stats.maximum);
     const handleMinValueChange = (event) => {
         setMinValue(+event.target.value);
         setNewBands();
@@ -18,10 +28,14 @@ const BandRow = ({ index, bandRow, bandRows, setSelectedBand, setBandRows }) =>
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: `band-select-${index}` }, "Band:"),
+            React.createElement("label", { htmlFor: `band-select-${index}` },
+                label,
+                ":"),
             React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: `band-select-${index}`, onChange: event => setSelectedBand(+event.target.value), className: "jp-mod-styled" }, bandRows.map((band, bandIndex) => (React.createElement("option", { key: bandIndex, value: band.band, selected: band.band === bandRow.band, className: "jp-mod-styled" }, `Band ${band.band} (${band.colorInterpretation})`)))))),
-        React.createElement("div", { className: "jp-gis-symbology-row", style: { gap: '0.5rem' } },
+                React.createElement("select", { name: `band-select-${index}`, onChange: event => setSelectedBand(+event.target.value), className: "jp-mod-styled" },
+                    bandRows.map((band, bandIndex) => (React.createElement("option", { key: bandIndex, value: band.band, selected: band.band === (bandRow === null || bandRow === void 0 ? void 0 : bandRow.band), className: "jp-mod-styled" }, `Band ${band.band} (${band.colorInterpretation})`))),
+                    isMultibandColor ? (React.createElement("option", { key: 'unset', value: 0, selected: !bandRow, className: "jp-mod-styled" }, "Unset")) : null))),
+        isMultibandColor ? null : (React.createElement("div", { className: "jp-gis-symbology-row", style: { gap: '0.5rem' } },
             React.createElement("div", { style: {
                     display: 'flex',
                     justifyContent: 'space-between',
@@ -38,6 +52,6 @@ const BandRow = ({ index, bandRow, bandRows, setSelectedBand, setBandRows }) =>
                 React.createElement("label", { htmlFor: "band-max", style: { alignSelf: 'center' } }, "Max"),
                 React.createElement("input", { type: "number", className: "jp-mod-styled", 
                     // defaultValue={bandRow.stats.maximum}
-                    value: maxValue, onChange: handleMaxValueChange, onBlur: setNewBands })))));
+                    value: maxValue, onChange: handleMaxValueChange, onBlur: setNewBands }))))));
 };
 export default BandRow;

package/lib/dialogs/symbology/tiff_layer/types/MultibandColor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISymbologyDialogProps } from '../../symbologyDialog';
+declare const MultibandColor: ({ context, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+export default MultibandColor;

package/lib/dialogs/symbology/tiff_layer/types/MultibandColor.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Spinner } from '../../../../mainview/spinner';
+import useGetBandInfo from '../../hooks/useGetBandInfo';
+import BandRow from '../components/BandRow';
+const MultibandColor = ({ context, okSignalPromise, cancel, layerId }) => {
+    if (!layerId) {
+        return;
+    }
+    const layer = context.model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    const { bandRows, setBandRows, loading } = useGetBandInfo(context, layer);
+    const [selectedBands, setSelectedBands] = useState({
+        red: 1,
+        green: 2,
+        blue: 3
+    });
+    const numOfBandsRef = useRef(0);
+    const selectedBandsRef = useRef({
+        red: selectedBands.red,
+        green: selectedBands.green,
+        blue: selectedBands.blue
+    });
+    useEffect(() => {
+        populateOptions();
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        numOfBandsRef.current = bandRows.length;
+    }, [bandRows]);
+    useEffect(() => {
+        selectedBandsRef.current = selectedBands;
+    }, [selectedBands]);
+    const populateOptions = async () => {
+        var _a, _b, _c, _d, _e, _f;
+        const layerParams = layer.parameters;
+        const red = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.redBand) !== null && _b !== void 0 ? _b : 1;
+        const green = (_d = (_c = layerParams.symbologyState) === null || _c === void 0 ? void 0 : _c.greenBand) !== null && _d !== void 0 ? _d : 2;
+        const blue = (_f = (_e = layerParams.symbologyState) === null || _e === void 0 ? void 0 : _e.blueBand) !== null && _f !== void 0 ? _f : 3;
+        setSelectedBands({ red, green, blue });
+    };
+    const updateBand = (color, value) => {
+        setSelectedBands(prevBands => (Object.assign(Object.assign({}, prevBands), { [color]: value })));
+    };
+    const handleOk = () => {
+        // Update layer
+        if (!layer.parameters) {
+            return;
+        }
+        const colorExpr = ['array'];
+        const rgb = ['red', 'green', 'blue'];
+        rgb.forEach(color => {
+            const bandValue = selectedBandsRef.current[color];
+            colorExpr.push(bandValue !== 0 ? ['band', bandValue] : 0);
+        });
+        // Array expression expects 4 values
+        // Last band should be alpha band added by OpenLayers
+        colorExpr.push(['band', numOfBandsRef.current + 1]);
+        const symbologyState = {
+            renderType: 'Multiband Color',
+            redBand: selectedBandsRef.current['red'],
+            greenBand: selectedBandsRef.current['green'],
+            blueBand: selectedBandsRef.current['blue']
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = colorExpr;
+        context.model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("div", { className: "jp-gis-band-container" }, loading ? (React.createElement(Spinner, { loading: loading })) : (React.createElement(React.Fragment, null,
+            React.createElement(BandRow, { label: "Red Band", index: selectedBands['red'] - 1, bandRow: bandRows[selectedBands['red'] - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Green Band", index: selectedBands['green'] - 1, bandRow: bandRows[selectedBands['green'] - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Blue Band", index: selectedBands['blue'] - 1, bandRow: bandRows[selectedBands['blue'] - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val), setBandRows: setBandRows, isMultibandColor: true }))))));
+};
+export default MultibandColor;

package/lib/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.d.ts

@@ -1,24 +1,5 @@
-import { IDict } from '@jupytergis/schema';
 import React from 'react';
 import { ISymbologyDialogProps } from '../../symbologyDialog';
-export interface IBandRow {
-    band: number;
-    colorInterpretation: string;
-    stats: {
-        minimum: number;
-        maximum: number;
-        mean: number;
-        stdDev: number;
-    };
-    metadata: IDict;
-    histogram: IBandHistogram;
-}
-export interface IBandHistogram {
-    buckets: number[];
-    count: number;
-    max: number;
-    min: number;
-}
 export type InterpolationType = 'discrete' | 'linear' | 'exact';
 declare const SingleBandPseudoColor: ({ context, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 export default SingleBandPseudoColor;

package/lib/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.js

@@ -1,28 +1,14 @@
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
-import { GeoTiffClassifications } from '../../classificationModes';
+import { Spinner } from '../../../../mainview/spinner';
 import { GlobalStateDbManager } from '../../../../store';
-import BandRow from '../components/BandRow';
+import { GeoTiffClassifications } from '../../classificationModes';
 import ColorRamp from '../../components/color_ramp/ColorRamp';
 import StopRow from '../../components/color_stops/StopRow';
+import useGetBandInfo from '../../hooks/useGetBandInfo';
 import { Utils } from '../../symbologyUtils';
-import { Spinner } from '../../../../mainview/spinner';
-import { loadGeoTIFFWithCache } from '../../../../tools';
+import BandRow from '../components/BandRow';
 const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) => {
-    const functions = ['discrete', 'linear', 'exact'];
-    const modeOptions = ['continuous', 'equal interval', 'quantile'];
-    const stopRowsRef = useRef();
-    const bandRowsRef = useRef([]);
-    const selectedFunctionRef = useRef();
-    const colorRampOptionsRef = useRef();
-    const layerStateRef = useRef();
-    const selectedBandRef = useRef();
-    const [layerState, setLayerState] = useState();
-    const [selectedBand, setSelectedBand] = useState(1);
-    const [stopRows, setStopRows] = useState([]);
-    const [bandRows, setBandRows] = useState([]);
-    const [selectedFunction, setSelectedFunction] = useState('linear');
-    const [colorRampOptions, setColorRampOptions] = useState();
     if (!layerId) {
         return;
     }
@@ -30,7 +16,20 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
+    const functions = ['discrete', 'linear', 'exact'];
+    const modeOptions = ['continuous', 'equal interval', 'quantile'];
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    const { bandRows, setBandRows, loading } = useGetBandInfo(context, layer);
+    const [layerState, setLayerState] = useState();
+    const [selectedBand, setSelectedBand] = useState(1);
+    const [stopRows, setStopRows] = useState([]);
+    const [selectedFunction, setSelectedFunction] = useState('linear');
+    const [colorRampOptions, setColorRampOptions] = useState();
+    const stopRowsRef = useRef();
+    const bandRowsRef = useRef([]);
+    const selectedFunctionRef = useRef();
+    const colorRampOptionsRef = useRef();
+    const selectedBandRef = useRef();
     useEffect(() => {
         populateOptions();
         okSignalPromise.promise.then(okSignal => {
@@ -42,10 +41,6 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
             });
         };
     }, []);
-    useEffect(() => {
-        layerStateRef.current = layerState;
-        getBandInfo();
-    }, [layerState]);
     useEffect(() => {
         bandRowsRef.current = bandRows;
         buildColorInfo();
@@ -55,7 +50,6 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         selectedFunctionRef.current = selectedFunction;
         colorRampOptionsRef.current = colorRampOptions;
         selectedBandRef.current = selectedBand;
-        layerStateRef.current = layerState;
     }, [stopRows, selectedFunction, colorRampOptions, selectedBand, layerState]);
     const populateOptions = async () => {
         var _a, _b, _c, _d;
@@ -67,39 +61,6 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         setSelectedBand(band);
         setSelectedFunction(interpolation);
     };
-    const preloadGeoTiffFile = async (sourceInfo) => {
-        return await loadGeoTIFFWithCache(sourceInfo);
-    };
-    const getBandInfo = async () => {
-        var _a, _b;
-        const bandsArr = [];
-        const source = context.model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
-        const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
-        if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
-            return;
-        }
-        // Preload the file only once
-        const preloadedFile = await preloadGeoTiffFile(sourceInfo);
-        const { file, metadata, sourceUrl } = Object.assign({}, preloadedFile);
-        if (file && metadata && sourceUrl === sourceInfo.url) {
-            metadata['bands'].forEach((bandData) => {
-                var _a, _b;
-                bandsArr.push({
-                    band: bandData.band,
-                    colorInterpretation: bandData.colorInterpretation,
-                    stats: {
-                        minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
-                        maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
-                        mean: bandData.mean,
-                        stdDev: bandData.stdDev
-                    },
-                    metadata: bandData.metadata,
-                    histogram: bandData.histogram
-                });
-            });
-            setBandRows(bandsArr);
-        }
-    };
     const buildColorInfo = () => {
         var _a;
         // This it to parse a color object on the layer
@@ -297,9 +258,7 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         return (value * (1 - 0) - min * (1 - 0)) / (max - min);
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("div", { className: "jp-gis-band-container" }, bandRows.length === 0 ? (React.createElement(Spinner, { loading: bandRows.length === 0 })) : (React.createElement(BandRow
-        // Band numbers are 1 indexed
-        , { 
+        React.createElement("div", { className: "jp-gis-band-container" }, loading ? (React.createElement(Spinner, { loading: loading })) : (React.createElement(BandRow, { label: "Band", 
             // Band numbers are 1 indexed
             index: selectedBand - 1, bandRow: bandRows[selectedBand - 1], bandRows: bandRows, setSelectedBand: setSelectedBand, setBandRows: setBandRows }))),
         React.createElement("div", { className: "jp-gis-symbology-row" },

package/lib/formbuilder/creationform.d.ts

@@ -43,6 +43,11 @@ export interface ICreationFormProps {
      * extra errors or not.
      */
     formErrorSignal?: Signal<Dialog<any>, boolean>;
+    /**
+     * Configuration options for the dialog, including settings for layer data, source data,
+     * and other form-related parameters.
+     */
+    dialogOptions?: any;
 }
 /**
  * Form for creating a source, a layer or both at the same time

package/lib/formbuilder/creationform.js

@@ -107,11 +107,11 @@ export class CreationForm extends React.Component {
                 React.createElement("h3", null, "Source Properties"),
                 React.createElement(SourceForm, { formContext: "create", model: this.jGISModel, filePath: `${this.filePath}::panel`, schema: sourceSchema, sourceData: this.props.sourceData, syncData: (properties) => {
                         sourceCreationPromise === null || sourceCreationPromise === void 0 ? void 0 : sourceCreationPromise.resolve(properties);
-                    }, ok: this.props.ok, cancel: this.props.cancel, formChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal }))),
+                    }, ok: this.props.ok, cancel: this.props.cancel, formChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal, dialogOptions: this.props.dialogOptions, sourceType: this.props.sourceType }))),
             this.props.createLayer && (React.createElement("div", null,
                 React.createElement("h3", null, "Layer Properties"),
                 React.createElement(LayerForm, { formContext: "create", sourceType: this.props.sourceType, model: this.jGISModel, filePath: `${this.filePath}::panel`, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
                         layerCreationPromise === null || layerCreationPromise === void 0 ? void 0 : layerCreationPromise.resolve(properties);
-                    }, ok: this.props.ok, cancel: this.props.cancel, sourceFormChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal })))));
+                    }, ok: this.props.ok, cancel: this.props.cancel, sourceFormChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal, dialogOptions: this.props.dialogOptions })))));
     }
 }

package/lib/formbuilder/editform.d.ts

@@ -21,4 +21,5 @@ export declare class EditForm extends React.Component<IEditFormProps, any> {
         [key: string]: any;
     }): Promise<void>;
     render(): React.JSX.Element | undefined;
+    private sourceFormChangedSignal;
 }