@jupytergis/base 0.2.1 → 0.4.0

package/lib/dialogs/layerBrowserDialog.d.ts

@@ -1,19 +1,18 @@
 import { IJGISFormSchemaRegistry, IJupyterGISModel, IRasterLayerGalleryEntry } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
-import React from 'react';
-import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Signal } from '@lumino/signaling';
+import React from 'react';
 interface ILayerBrowserDialogProps {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     registry: IRasterLayerGalleryEntry[];
     formSchemaRegistry: IJGISFormSchemaRegistry;
     okSignalPromise: PromiseDelegate<Signal<Dialog<any>, number>>;
     cancel: () => void;
 }
-export declare const LayerBrowserComponent: ({ context, registry, formSchemaRegistry, okSignalPromise, cancel }: ILayerBrowserDialogProps) => React.JSX.Element;
+export declare const LayerBrowserComponent: ({ model, registry, formSchemaRegistry, okSignalPromise, cancel }: ILayerBrowserDialogProps) => React.JSX.Element;
 export interface ILayerBrowserOptions {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     registry: IRasterLayerGalleryEntry[];
     formSchemaRegistry: IJGISFormSchemaRegistry;
 }

package/lib/dialogs/layerBrowserDialog.js

@@ -2,11 +2,11 @@ import { faCheck, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate, UUID } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
 import { CreationFormWrapper } from './formdialog';
-import { Signal } from '@lumino/signaling';
-export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, okSignalPromise, cancel }) => {
+export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [activeLayers, setActiveLayers] = useState([]);
     const [selectedCategory, setSelectedCategory] = useState();
@@ -15,9 +15,9 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
     const providers = [...new Set(registry.map(item => item.source.provider))];
     const filteredGallery = galleryWithCategory.filter(item => item.name.toLowerCase().includes(searchTerm));
     useEffect(() => {
-        context.model.sharedModel.layersChanged.connect(handleLayerChange);
+        model.sharedModel.layersChanged.connect(handleLayerChange);
         return () => {
-            context.model.sharedModel.layersChanged.disconnect(handleLayerChange);
+            model.sharedModel.layersChanged.disconnect(handleLayerChange);
         };
     }, []);
     /**
@@ -25,7 +25,7 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
      */
     const handleLayerChange = (_, change) => {
         // The split is to get rid of the 'Layer' part of the name to match the names in the gallery
-        setActiveLayers(Object.values(context.model.sharedModel.layers).map(layer => layer.name.split(' ')[0]));
+        setActiveLayers(Object.values(model.sharedModel.layers).map(layer => layer.name.split(' ')[0]));
     };
     const handleSearchInput = (event) => {
         setSearchTerm(event.target.value.toLowerCase());
@@ -64,8 +64,8 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
             visible: true,
             name: tile.name + ' Layer'
         };
-        context.model.sharedModel.addSource(sourceId, sourceModel);
-        context.model.addLayer(UUID.uuid4(), layerModel);
+        model.sharedModel.addSource(sourceId, sourceModel);
+        model.addLayer(UUID.uuid4(), layerModel);
     };
     if (creatingCustomRaster) {
         // Disconnect any previous handler
@@ -73,7 +73,7 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
             value.disconnect(cancel, this);
         });
         return (React.createElement("div", { className: "jGIS-customlayer-form" },
-            React.createElement(CreationFormWrapper, { context: context, formSchemaRegistry: formSchemaRegistry, createLayer: true, createSource: true, layerType: 'RasterLayer', sourceType: 'RasterSource', layerData: {
+            React.createElement(CreationFormWrapper, { model: model, formSchemaRegistry: formSchemaRegistry, createLayer: true, createSource: true, layerType: 'RasterLayer', sourceType: 'RasterSource', layerData: {
                     name: 'Custom Raster'
                 }, sourceData: {
                     url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -122,7 +122,7 @@ export class LayerBrowserWidget extends Dialog {
             this.resolve(0);
         };
         const okSignalPromise = new PromiseDelegate();
-        const body = (React.createElement(LayerBrowserComponent, { context: options.context, registry: options.registry, formSchemaRegistry: options.formSchemaRegistry, okSignalPromise: okSignalPromise, cancel: cancelCallback }));
+        const body = (React.createElement(LayerBrowserComponent, { model: options.model, registry: options.registry, formSchemaRegistry: options.formSchemaRegistry, okSignalPromise: okSignalPromise, cancel: cancelCallback }));
         super({ body, buttons: [Dialog.cancelButton(), Dialog.okButton()] });
         this.id = 'jupytergis::layerBrowser';
         this.okSignal = new Signal(this);

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,26 @@
+import { IDict, IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
+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: (model: 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,64 @@
+import { useEffect, useState } from 'react';
+import { loadFile } from '../../../tools';
+const preloadGeoTiffFile = async (sourceInfo, model) => {
+    var _a;
+    return await loadFile({
+        filepath: (_a = sourceInfo.url) !== null && _a !== void 0 ? _a : '',
+        type: 'GeoTiffSource',
+        model: model
+    });
+};
+const useGetBandInfo = (model, 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 = 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, model);
+            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.d.ts

@@ -4,7 +4,7 @@ interface IUseGetPropertiesProps {
     model: IJupyterGISModel;
 }
 interface IUseGetPropertiesResult {
-    featureProps: Record<string, Set<any>>;
+    featureProperties: Record<string, Set<any>>;
     isLoading: boolean;
     error?: Error;
 }

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

@@ -1,7 +1,8 @@
 // import { GeoJSONFeature } from 'geojson';
 import { useEffect, useState } from 'react';
+import { loadFile } from '../../../tools';
 export const useGetProperties = ({ layerId, model }) => {
-    const [featureProps, setFeatureProps] = useState({});
+    const [featureProperties, setFeatureProperties] = useState({});
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(undefined);
     const getProperties = async () => {
@@ -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');
             }
@@ -23,16 +28,14 @@ export const useGetProperties = ({ layerId, model }) => {
             data.features.forEach((feature) => {
                 if (feature.properties) {
                     Object.entries(feature.properties).forEach(([key, value]) => {
-                        if (typeof value !== 'string') {
-                            if (!(key in result)) {
-                                result[key] = new Set();
-                            }
-                            result[key].add(value);
+                        if (!(key in result)) {
+                            result[key] = new Set();
                         }
+                        result[key].add(value);
                     });
                 }
             });
-            setFeatureProps(result);
+            setFeatureProperties(result);
             setIsLoading(false);
         }
         catch (err) {
@@ -43,5 +46,5 @@ export const useGetProperties = ({ layerId, model }) => {
     useEffect(() => {
         getProperties();
     }, [model, layerId]);
-    return { featureProps, isLoading, error };
+    return { featureProperties, isLoading, error };
 };

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

@@ -1,18 +1,17 @@
 import { IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
-import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IStateDB } from '@jupyterlab/statedb';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 export interface ISymbologyDialogProps {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     state: IStateDB;
     okSignalPromise: PromiseDelegate<Signal<SymbologyWidget, null>>;
     cancel: () => void;
     layerId?: string;
 }
 export interface ISymbologyWidgetOptions {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     state: IStateDB;
 }
 export interface IStopRow {

package/lib/dialogs/symbology/symbologyDialog.js

@@ -4,31 +4,31 @@ import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import TiffRendering from './tiff_layer/TiffRendering';
 import VectorRendering from './vector_layer/VectorRendering';
-const SymbologyDialog = ({ context, state, okSignalPromise, cancel }) => {
+const SymbologyDialog = ({ model, state, okSignalPromise, cancel }) => {
     const [selectedLayer, setSelectedLayer] = useState(null);
     const [componentToRender, setComponentToRender] = useState(null);
     let LayerSymbology;
     useEffect(() => {
         const handleClientStateChanged = () => {
             var _a, _b;
-            if (!((_b = (_a = context.model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
+            if (!((_b = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
                 return;
             }
-            const currentLayer = Object.keys(context.model.localState.selected.value)[0];
+            const currentLayer = Object.keys(model.localState.selected.value)[0];
             setSelectedLayer(currentLayer);
         };
         // Initial state
         handleClientStateChanged();
-        context.model.clientStateChanged.connect(handleClientStateChanged);
+        model.clientStateChanged.connect(handleClientStateChanged);
         return () => {
-            context.model.clientStateChanged.disconnect(handleClientStateChanged);
+            model.clientStateChanged.disconnect(handleClientStateChanged);
         };
     }, []);
     useEffect(() => {
         if (!selectedLayer) {
             return;
         }
-        const layer = context.model.getLayer(selectedLayer);
+        const layer = model.getLayer(selectedLayer);
         if (!layer) {
             return;
         }
@@ -36,10 +36,11 @@ const SymbologyDialog = ({ context, state, okSignalPromise, cancel }) => {
         switch (layer.type) {
             case 'VectorLayer':
             case 'VectorTileLayer':
-                LayerSymbology = (React.createElement(VectorRendering, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
+            case 'HeatmapLayer':
+                LayerSymbology = (React.createElement(VectorRendering, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
                 break;
             case 'WebGlLayer':
-                LayerSymbology = (React.createElement(TiffRendering, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
+                LayerSymbology = (React.createElement(TiffRendering, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
                 break;
             default:
                 LayerSymbology = React.createElement("div", null, "Layer Type Not Supported");
@@ -54,7 +55,7 @@ export class SymbologyWidget extends Dialog {
             this.resolve(0);
         };
         const okSignalPromise = new PromiseDelegate();
-        const body = (React.createElement(SymbologyDialog, { context: options.context, okSignalPromise: okSignalPromise, cancel: cancelCallback, state: options.state }));
+        const body = (React.createElement(SymbologyDialog, { model: options.model, okSignalPromise: okSignalPromise, cancel: cancelCallback, state: options.state }));
         super({ title: 'Symbology', body });
         this.id = 'jupytergis::symbologyWidget';
         this.okSignal = new Signal(this);

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: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 export default TiffRendering;

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

@@ -1,17 +1,30 @@
 import React, { useEffect, useState } from 'react';
 import SingleBandPseudoColor from './types/SingleBandPseudoColor';
-const TiffRendering = ({ context, state, okSignalPromise, cancel, layerId }) => {
+import MultibandColor from './types/MultibandColor';
+const TiffRendering = ({ model, 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, _b;
+        const layer = model.getLayer(layerId);
+        const renderType = (_b = (_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) === null || _b === void 0 ? void 0 : _b.renderType;
+        setSelectedRenderType(renderType !== null && renderType !== void 0 ? renderType : 'Singleband Pseudocolor');
+    }, []);
     useEffect(() => {
         if (!selectedRenderType) {
             return;
         }
         switch (selectedRenderType) {
             case 'Singleband Pseudocolor':
-                RenderComponent = (React.createElement(SingleBandPseudoColor, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                RenderComponent = (React.createElement(SingleBandPseudoColor, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                break;
+            case 'Multiband Color':
+                RenderComponent = (React.createElement(MultibandColor, { model: model, 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: ({ model, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+export default MultibandColor;

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

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Spinner } from '../../../../mainview/spinner';
+import useGetBandInfo from '../../hooks/useGetBandInfo';
+import BandRow from '../components/BandRow';
+const MultibandColor = ({ model, okSignalPromise, cancel, layerId }) => {
+    if (!layerId) {
+        return;
+    }
+    const layer = model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    const { bandRows, setBandRows, loading } = useGetBandInfo(model, 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;
+        layer.type = 'WebGlLayer';
+        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;
+declare const SingleBandPseudoColor: ({ model, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 export default SingleBandPseudoColor;