@jupytergis/base 0.15.0 → 0.16.0-alpha.1

package/style/symbologyDialog.css

@@ -14,6 +14,18 @@ select option {
   max-height: 80%;
 }
 
+@media (max-width: 960px) {
+  .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,516 @@ 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;
+  background: color-mix(in srgb, var(--jp-layout-color2) 50%, transparent);
+}
+
+.jp-gis-grammar-layer-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  background: color-mix(in srgb, var(--jp-layout-color2) 50%, transparent);
+}
+
+.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: color-mix(in srgb, var(--jp-layout-color2) 50%, transparent);
+  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;
+}
+
+.jp-gis-grammar-transform-row input,
+.jp-gis-grammar-transform-row [data-slot='native-select'],
+.jp-gis-grammar-transform-row select,
+.jp-gis-grammar-transform-row .jgis-native-select {
+  background: transparent;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.jp-gis-grammar-transform-row .jgis-button,
+.jp-gis-grammar-layer-header .jgis-button,
+.jp-gis-grammar-layer-section > .jp-gis-grammar-when-row .jgis-button {
+  background: transparent;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* ---------------------------------------------------------------------------
+ * Grammar reorder pill (drag handle + arrows above each rule)
+ * --------------------------------------------------------------------------*/
+
+/* Desktop: horizontal row with sidebar left of rule */
+.jp-gis-grammar-drag-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding-left: 5px;
+  padding-right: 8px; /* A little more on the right because of the scroll bar */
+}
+
+.jp-gis-grammar-drag-wrapper > .jp-gis-grammar-rule {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Vertical sidebar: ↑ ⠿ ↓ stacked */
+.jp-gis-grammar-reorder-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: 2px 0;
+  color: var(--jp-ui-font-color3);
+  background: color-mix(in srgb, var(--jp-layout-color2) 50%, transparent);
+  border: 1px solid var(--jp-border-color2);
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+}
+
+.jp-gis-grammar-reorder-bar + .jp-gis-grammar-rule {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.jp-gis-grammar-reorder-bar .jgis-button {
+  height: 20px;
+  width: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  color: var(--jp-ui-font-color3);
+  background: none;
+}
+
+.jp-gis-grammar-reorder-bar .jgis-button:hover:not(:disabled) {
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color3);
+}
+
+.jp-gis-grammar-reorder-bar .jgis-button:disabled {
+  opacity: 0.3;
+}
+
+.jp-gis-grammar-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 20px;
+  flex-shrink: 0;
+  cursor: grab;
+  color: var(--jp-ui-font-color3);
+}
+
+.jp-gis-grammar-drag-handle:hover {
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color3);
+}
+
+.jp-gis-grammar-drag-handle:active {
+  cursor: grabbing;
+}
+
+/* Mobile: horizontal bar on top */
+@media (max-width: 960px) {
+  .jp-gis-grammar-drag-wrapper {
+    flex-direction: column;
+  }
+
+  .jp-gis-grammar-reorder-bar {
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: 0 2px;
+    border-right: 1px solid var(--jp-border-color2);
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .jp-gis-grammar-reorder-bar + .jp-gis-grammar-rule {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 4px;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Grammar rule rows
+ * --------------------------------------------------------------------------*/
+
+.jp-gis-grammar-rule {
+  border: 1px solid var(--jp-border-color2);
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--jp-layout-color0);
+}
+
+/* Desktop: horizontal flow — input → scale+preview → output */
+.jp-gis-grammar-rule-grid {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px;
+}
+
+.jp-gis-grammar-section {
+  display: contents;
+}
+
+.jp-gis-grammar-scale-section {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.jp-gis-grammar-scale-section .jp-gis-grammar-preview-btn {
+  min-width: 0;
+}
+
+.jp-gis-grammar-output-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.jp-gis-grammar-channel-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.jp-gis-grammar-channel-select {
+  min-width: 0;
+}
+
+.jp-gis-grammar-channel-select .jgis-combobox-button,
+.jp-gis-grammar-channel-select .jgis-native-select {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.jp-gis-grammar-rule-grid [data-slot='native-select'],
+.jp-gis-grammar-transform-row [data-slot='native-select'] {
+  border-color: transparent;
+}
+
+.jp-gis-grammar-rule-grid [data-slot='native-select']:hover,
+.jp-gis-grammar-transform-row [data-slot='native-select']:hover {
+  border-color: var(--jp-border-color1);
+}
+
+/* Mobile: stacked top-to-bottom */
+@media (max-width: 960px) {
+  .jp-gis-grammar-rule-grid {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .jp-gis-grammar-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .jp-gis-grammar-input-section {
+    display: contents;
+  }
+
+  .jp-gis-grammar-scale-section {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .jp-gis-grammar-rule-grid > .jp-gis-grammar-arrow {
+    align-self: flex-start;
+    text-align: left;
+    transform: rotate(90deg);
+  }
+
+  .jp-gis-grammar-scale-section .jgis-native-select {
+    align-self: flex-start;
+  }
+}
+
+.jp-gis-grammar-rule-editor {
+  border-top: 1px solid var(--jp-border-color2);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: var(--jp-layout-color0);
+}
+
+.jp-gis-grammar-action-btn {
+  background: transparent;
+  border: 1px solid var(--jp-border-color2);
+  border-radius: var(--jp-border-radius, 0.375rem);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+  padding: 4px 12px;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.jp-gis-grammar-action-btn:hover {
+  background: var(--jp-layout-color2);
+}
+
+.jp-gis-grammar-action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Preview button spans all channel rows — stretches vertically */
+.jp-gis-grammar-preview-btn {
+  background: none;
+  border: 1px solid transparent;
+  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-grammar-preview-btn:hover {
+  border-color: var(--jp-border-color2);
+}
+
+.jp-gis-grammar-preview-chevron {
+  flex-shrink: 0;
+  color: var(--jp-ui-font-color3);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.jp-gis-grammar-preview-btn:hover {
+  background: color-mix(in srgb, var(--jp-layout-color2) 40%, transparent);
+}
+
+.jp-gis-grammar-preview-btn:hover .jp-gis-grammar-preview-chevron {
+  color: var(--jp-ui-font-color1);
+}
+
+.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-layer-section > .jp-gis-grammar-when-row {
+  background: color-mix(in srgb, var(--jp-layout-color2) 50%, transparent);
+}
+
+.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 transparent;
+  background: var(--jp-layout-color0);
+  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-color0);
+  border: 1px solid transparent;
+  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;
+}
+
+.jgis-button.jp-gis-grammar-when-add-btn {
+  background: transparent;
+  background-color: transparent;
+  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;
+}
+
+/* Make when-form selects compact to match the when-row height */
+.jp-gis-grammar-when-form [data-slot='native-select'] {
+  height: 24px;
+  font-size: var(--jp-ui-font-size0);
+  padding-top: 0;
+  padding-bottom: 0;
+  border-color: transparent;
+}
+
+/* Make when-form inputs compact too */
+.jp-gis-grammar-when-form [data-slot='input'],
+.jp-gis-grammar-when-form input {
+  height: 24px;
+  font-size: var(--jp-ui-font-size0);
+  border-color: var(--jp-border-color2);
+  box-shadow: none;
+}
+
+/* Icon buttons in the when-form should be transparent, not white */
+.jp-gis-grammar-when-form .jgis-button {
+  background: transparent;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.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: 960px) {
+  .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;