@jupytergis/base 0.15.0 → 0.16.0-alpha.0

package/style/storySpectaArticleOverlay.css

@@ -0,0 +1,129 @@
+/* Specta article typography for list story stage overlay markdown (subset of specta/style/article.css). */
+
+.jgis-story-stage-overlay-content .specta-article-host-widget {
+  --jp-content-font-family: 'Source Serif 4', Georgia, serif;
+  --jp-code-font-family:
+    'Source Code Pro', Menlo, Monaco, 'Courier New', Courier, monospace;
+  --jp-code-font-size: 14px;
+  font-family: var(--jp-content-font-family);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h1 {
+  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  letter-spacing: -0.014em;
+  line-height: 38px;
+  margin-bottom: 24px;
+  margin-top: 1.5em !important;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h2 {
+  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  margin-top: 1em !important;
+  font-size: 1.6em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h3 {
+  margin-top: 1em !important;
+  font-size: 1.3em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h4 {
+  margin-top: 1em;
+  font-size: 1.2em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h5 {
+  margin-top: 1em;
+  font-size: 1.1em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h6 {
+  margin-top: 1em;
+  font-size: 1em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 1.2em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget a:hover {
+  text-decoration: underline;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget pre {
+  background-color: var(--jp-cell-editor-background) !important;
+  padding: 32px !important;
+  border-radius: 4px !important;
+  border: 1px solid var(--jp-cell-editor-border-color) !important;
+  overflow-x: auto;
+  margin-top: 56px !important;
+  font-size: 0.85em !important;
+  line-height: 1.4 !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget pre code {
+  color: #222;
+  background-color: transparent !important;
+  padding: 0;
+  font-size: 14px !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget code {
+  background-color: #e9ecef;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 14px !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1.5em auto;
+  border-radius: 4px;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget blockquote {
+  border-left: 3px solid transparent;
+  padding-left: 16px;
+  margin: 1.2em 0;
+  font-style: italic;
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget ul,
+.jgis-story-stage-overlay-content .specta-article-host-widget ol {
+  margin-bottom: 1.2em;
+  padding-left: 1.5em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget li {
+  margin-bottom: 0.4em;
+}
+
+.jgis-story-stage-overlay-content
+  .specta-article-host-widget
+  .jp-MarkdownOutput {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.jgis-story-overlay-markdown-plain {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--jp-content-font-family, var(--jp-ui-font-family1));
+  font-size: 1rem;
+  line-height: 1.6;
+}

package/style/symbologyDialog.css

@@ -14,6 +14,18 @@ select option {
   max-height: 80%;
 }
 
+@media (max-width: 768px) {
+  .jp-gis-symbology-dialog .jp-Dialog-content {
+    width: 100%;
+    max-width: 100%;
+    max-height: 90%;
+    margin: 0;
+    border-radius: 0;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
 .jp-gis-symbology-row {
   display: flex;
   justify-content: space-between;
@@ -53,12 +65,6 @@ select option {
   max-width: 25%;
 }
 
-.jp-gis-band-container {
-  display: flex;
-  flex-direction: column;
-  gap: 13px;
-}
-
 .jp-gis-layer-symbology-container {
   display: flex;
   flex-direction: column;
@@ -121,27 +127,6 @@ select option {
   padding-top: 0.5rem;
 }
 
-.jp-gis-band-info-loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem;
-  margin: auto;
-}
-
-.jp-gis-band-info-loading-container > span {
-  font-size: 1rem;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .jp-gis-color-ramp-dropdown {
   display: flex;
   flex-direction: column;
@@ -263,6 +248,279 @@ select option {
   -webkit-appearance: none;
 }
 
+/* ---------------------------------------------------------------------------
+ * Grammar layer sections
+ * --------------------------------------------------------------------------*/
+
+.jp-gis-grammar-layer-section {
+  border: 1px solid var(--jp-border-color1);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.jp-gis-grammar-layer-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  background: var(--jp-layout-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.jp-gis-grammar-layer-label {
+  font-size: var(--jp-ui-font-size1);
+  font-weight: 600;
+  color: var(--jp-ui-font-color1);
+  flex: 1 0 auto;
+}
+
+.jp-gis-grammar-transform-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  background: var(--jp-layout-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.jp-gis-grammar-transform-row label {
+  color: var(--jp-ui-font-color2);
+  white-space: nowrap;
+}
+
+/* ---------------------------------------------------------------------------
+ * Grammar rule rows
+ * --------------------------------------------------------------------------*/
+
+.jp-gis-grammar-rule {
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* 6-column grid: field | scheme | preview | arrow | channel | × */
+.jp-gis-grammar-rule-grid {
+  display: grid;
+  grid-template-columns: max-content max-content 1fr auto max-content auto;
+  align-items: center;
+  column-gap: 4px;
+  row-gap: 3px;
+  padding: 4px 6px;
+  position: relative;
+}
+
+.jp-gis-grammar-rule-grid .jp-gis-grammar-channel-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.jp-gis-grammar-rule-grid .jp-gis-grammar-channel-select .jgis-combobox-button,
+.jp-gis-grammar-rule-grid .jp-gis-grammar-channel-select .jgis-native-select {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+  .jp-gis-grammar-rule-grid {
+    grid-template-columns: 1fr 1fr auto;
+  }
+}
+
+.jp-gis-grammar-rule-editor {
+  border-top: 1px solid var(--jp-border-color2);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Preview button spans all channel rows — stretches vertically */
+.jp-gis-grammar-preview-btn {
+  background: none;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  justify-content: flex-start;
+  gap: 6px;
+  min-width: 0;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.jp-gis-scale-preview {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--jp-ui-font-size1);
+  min-height: 16px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.jp-gis-scale-meta {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jp-gis-scale-swatch {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  border: 1px solid var(--jp-border-color1);
+  display: inline-block;
+}
+
+.jp-gis-scale-dot {
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.jp-gis-grammar-arrow {
+  color: var(--jp-ui-font-color2);
+  text-align: center;
+  padding: 0 2px;
+}
+
+.jp-gis-grammar-delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--jp-ui-font-color2);
+  padding: 0 4px;
+  font-size: 16px;
+  line-height: 1;
+}
+
+/* When clause */
+
+.jp-gis-grammar-when-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 3px 6px 4px;
+  border-top: 1px solid var(--jp-border-color3);
+  background: var(--jp-layout-color1);
+}
+
+.jp-gis-grammar-when-label {
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+  font-style: italic;
+  flex-shrink: 0;
+}
+
+.jp-gis-grammar-when-op {
+  height: 20px;
+  padding: 0 4px;
+  font-size: var(--jp-ui-font-size0);
+  border-radius: 10px;
+  border: 1px solid var(--jp-border-color2);
+  background: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color1);
+  cursor: pointer;
+}
+
+.jp-gis-grammar-when-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 1px 6px;
+  background: var(--jp-layout-color2);
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 10px;
+  font-size: var(--jp-ui-font-size0);
+  white-space: nowrap;
+}
+
+.jp-gis-grammar-when-chip button {
+  background: none;
+  border: none;
+  padding: 0 0 0 2px;
+  cursor: pointer;
+  line-height: 1;
+  color: var(--jp-ui-font-color2);
+  font-size: 11px;
+}
+
+.jp-gis-grammar-when-add-btn {
+  background: none;
+  border: 1px dashed var(--jp-border-color2);
+  border-radius: 10px;
+  padding: 1px 8px;
+  cursor: pointer;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color2);
+}
+
+.jp-gis-grammar-when-add-btn:hover {
+  border-color: var(--jp-brand-color1);
+  color: var(--jp-brand-color1);
+}
+
+.jp-gis-grammar-when-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+}
+
+.jp-gis-grammar-when-form .jgis-native-select {
+  flex: 0 0 auto;
+}
+
+.jp-gis-grammar-when-cancel {
+  background: none;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 3px;
+  padding: 1px 5px;
+  cursor: pointer;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color1);
+  line-height: 1.4;
+}
+
+.jgis-button.jp-gis-grammar-when-form-cancel {
+  color: var(--jp-error-color0);
+}
+
+/* Domain min/max pair inside a symbology row */
+.jp-gis-domain-inputs {
+  display: flex;
+  gap: 4px;
+  flex: 1 0 50%;
+  max-width: 50%;
+}
+
+@media (max-width: 768px) {
+  .jp-gis-symbology-row {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .jp-gis-symbology-row > .jp-select-wrapper,
+  .jp-gis-symbology-row > .jp-mod-styled,
+  .jp-gis-symbology-row > .jp-gis-rgba-picker,
+  .jp-gis-canvas-button-wrapper,
+  .jp-gis-domain-inputs {
+    flex: 1 0 100%;
+    max-width: 100%;
+  }
+}
+
 .jp-gis-transparent-label {
   display: flex;
   align-items: center;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from "../symbologyDialog";
-declare const TiffRendering: React.FC<ISymbologyDialogProps>;
-export default TiffRendering;

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

@@ -1,42 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import MultibandColor from './types/MultibandColor';
-import SingleBandPseudoColor from './types/SingleBandPseudoColor';
-const TiffRendering = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
-    const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
-    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, { model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
-                break;
-            case 'Multiband Color':
-                RenderComponent = (React.createElement(MultibandColor, { model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
-                break;
-            default:
-                RenderComponent = React.createElement("div", null, "Render Type Not Implemented (yet)");
-        }
-        setComponentToRender(RenderComponent);
-    }, [selectedRenderType]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: "render-type-select" }, "Render Type:"),
-            React.createElement("select", { name: "render-type-select", id: "render-type-select", value: selectedRenderType, onChange: event => {
-                    setSelectedRenderType(event.target.value);
-                } }, renderTypes.map((func, funcIndex) => (React.createElement("option", { key: func, value: func }, func))))),
-        componentToRender));
-};
-export default TiffRendering;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IBandRow } from "../../hooks/useGetBandInfo";
-interface IBandRowProps {
-    label: string;
-    index: number;
-    bandRow: IBandRow;
-    bandRows: IBandRow[];
-    setSelectedBand: (band: number) => void;
-    setBandRows: (bandRows: IBandRow[]) => void;
-    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: React.FC<IBandRowProps>;
-export default BandRow;

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

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-/**
- *
- * @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();
-    };
-    const handleMaxValueChange = (event) => {
-        setMaxValue(+event.target.value);
-        setNewBands();
-    };
-    const setNewBands = () => {
-        const newBandRows = [...bandRows];
-        newBandRows[index].stats.minimum = minValue;
-        newBandRows[index].stats.maximum = maxValue;
-        setBandRows(newBandRows);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            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 === null || bandRow === void 0 ? void 0 : bandRow.band), className: "jp-mod-styled" }, band.colorInterpretation
-                        ? `Band ${band.band} (${band.colorInterpretation})`
-                        : `Band ${band.band}`))),
-                    isMultibandColor ? (React.createElement("option", { key: 'unset', value: -1, 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',
-                    width: '50%',
-                } },
-                React.createElement("label", { htmlFor: "band-min", style: { alignSelf: 'center' } }, "Min"),
-                React.createElement("input", { type: "number", className: "jp-mod-styled", style: { marginRight: 15 }, value: minValue, onChange: handleMinValueChange })),
-            React.createElement("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    width: '50%',
-                    paddingRight: '2px',
-                } },
-                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 }))))));
-};
-export default BandRow;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from "../../symbologyDialog";
-declare const MultibandColor: React.FC<ISymbologyDialogProps>;
-export default MultibandColor;

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

@@ -1,92 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import useGetBandInfo from "../../hooks/useGetBandInfo";
-import { useOkSignal } from "../../hooks/useOkSignal";
-import { saveSymbology, } from "../../symbologyUtils";
-import BandRow from "../components/BandRow";
-import { LoadingOverlay } from "../../../../shared/components/loading";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
-const MultibandColor = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    const params = useEffectiveSymbologyParams({
-        model,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    if (!params || !layer) {
-        return;
-    }
-    const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
-    const [selectedBands, setSelectedBands] = useState({
-        red: 1,
-        green: 2,
-        blue: 3,
-        alpha: 4,
-    });
-    const numOfBandsRef = useLatest(bandRows.length);
-    const selectedBandsRef = useLatest(selectedBands);
-    useEffect(() => {
-        populateOptions();
-    }, []);
-    const populateOptions = async () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const layerParams = params;
-        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;
-        const alpha = (_h = (_g = layerParams.symbologyState) === null || _g === void 0 ? void 0 : _g.alphaBand) !== null && _h !== void 0 ? _h : 4;
-        setSelectedBands({ red, green, blue, alpha });
-    };
-    const updateBand = (color, value) => {
-        setSelectedBands(prevBands => (Object.assign(Object.assign({}, prevBands), { [color]: value })));
-    };
-    const handleOk = () => {
-        const colorExpr = ['array'];
-        const colors = ['red', 'green', 'blue'];
-        colors.forEach(color => {
-            const bandValue = selectedBandsRef.current[color];
-            colorExpr.push(bandValue !== 0 ? ['band', bandValue] : 0);
-        });
-        // Push alpha if selected, else default to 0
-        if (selectedBandsRef.current.alpha) {
-            colorExpr.push(['band', selectedBandsRef.current.alpha]);
-        }
-        else {
-            colorExpr.push(['band', numOfBandsRef.current + 1]);
-        }
-        const symbologyState = {
-            renderType: 'Multiband Color',
-            redBand: selectedBandsRef.current.red,
-            greenBand: selectedBandsRef.current.green,
-            blueBand: selectedBandsRef.current.blue,
-            alphaBand: selectedBandsRef.current.alpha,
-        };
-        saveSymbology({
-            model,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: colorExpr,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                targetLayer.type = 'WebGlLayer';
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("div", { className: "jp-gis-band-container" },
-            React.createElement(LoadingOverlay, { loading: loading }),
-            React.createElement(BandRow, { label: "Red Band", index: selectedBands.red - 1, bandRow: bandRows[selectedBands.red - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val >= 0 ? val : 0), 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 >= 0 ? val : 0), 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 >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Alpha Band", index: selectedBands.alpha - 1, bandRow: bandRows[selectedBands.alpha - 1], bandRows: bandRows, setSelectedBand: val => updateBand('alpha', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }))));
-};
-export default MultibandColor;