Enable min/max values for tif layers

examples/geotiff-2.jGIS

@@ -26,39 +26,45 @@
           ],
           0.0,
           [
-            222.0,
-            221.0,
-            218.0
+            0.0,
+            0.0,
+            0.0,
+            0.0
           ],
-          1.0,
+          0.1,
           [
             246.0,
             97.0,
-            81.0
+            81.0,
+            1.0
           ],
-          500.0,
+          0.25,
           [
             248.0,
             228.0,
-            92.0
+            92.0,
+            1.0
           ],
-          600.0,
+          0.5,
           [
             255.0,
             190.0,
-            111.0
+            111.0,
+            1.0
           ],
-          700.0,
+          0.75,
           [
             143.0,
             240.0,
-            164.0
+            164.0,
+            1.0
           ],
-          900.0,
+          1.0,
           [
             153.0,
             193.0,
-            241.0
+            241.0,
+            1.0
           ]
         ],
         "opacity": 1.0,
@@ -70,19 +76,21 @@
   },
   "options": {
     "bearing": 0.0,
-    "latitude": 1.4772178422003748,
-    "longitude": -74.82407427644603,
+    "latitude": 0.0,
+    "longitude": -88.43952200927704,
     "pitch": 0.0,
     "projection": "EPSG:3857",
-    "zoom": 5.918863237274595
+    "zoom": 2.2118882945460037
   },
   "sources": {
     "8b1d4258-5d46-48da-b466-496d376b593d": {
       "name": "Custom GeoTiff Source",
       "parameters": {
-        "normalize": false,
+        "normalize": true,
         "urls": [
           {
+            "max": 3000.0,
+            "min": 1000.0,
             "url": "https://s2downloads.eox.at/demo/EOxCloudless/2020/rgbnir/s2cloudless2020-16bits_sinlge-file_z0-4.tif"
           }
         ],

packages/base/src/dialogs/components/symbology/BandRow.tsx

@@ -1,40 +1,107 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { IBandRow } from './SingleBandPseudoColor';
 
 const BandRow = ({
   index,
   bandRow,
   bandRows,
-  setSelectedBand
+  setSelectedBand,
+  setBandRows
 }: {
   index: number;
   bandRow: IBandRow;
   bandRows: IBandRow[];
-  setSelectedBand: any;
+  setSelectedBand: (band: number) => void;
+  setBandRows: (bandRows: IBandRow[]) => void;
 }) => {
-  return (
-    <div className="jp-gis-symbology-row">
-      <label htmlFor={`band-select-${index}`}>Band:</label>
+  const [minValue, setMinValue] = useState(bandRow.stats.minimum);
+  const [maxValue, setMaxValue] = useState(bandRow.stats.maximum);
+
+  const handleMinValueChange = (event: {
+    target: { value: string | number };
+  }) => {
+    setMinValue(+event.target.value);
+    setNewBands();
+  };
+
+  const handleMaxValueChange = (event: {
+    target: { value: string | number };
+  }) => {
+    setMaxValue(+event.target.value);
+    setNewBands();
+  };
+
+  const setNewBands = () => {
+    const newBandRows = [...bandRows];
+    newBandRows[index].stats.minimum = minValue;
+    newBandRows[index].stats.maximum = maxValue;
+    setBandRows(newBandRows);
+  };
 
-      <div className="jp-select-wrapper">
-        <select
-          name={`band-select-${index}`}
-          onChange={event => setSelectedBand(event.target.value)}
-          className="jp-mod-styled"
+  return (
+    <>
+      <div className="jp-gis-symbology-row">
+        <label htmlFor={`band-select-${index}`}>Band:</label>
+        <div className="jp-select-wrapper">
+          <select
+            name={`band-select-${index}`}
+            onChange={event => setSelectedBand(+event.target.value)}
+            className="jp-mod-styled"
+          >
+            {bandRows.map((band, bandIndex) => (
+              <option
+                key={bandIndex}
+                value={band.band}
+                selected={band.band === bandRow.band}
+                className="jp-mod-styled"
+              >
+                {`Band ${band.band} (${band.colorInterpretation})`}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="jp-gis-symbology-row" style={{ gap: '0.5rem' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '50%'
+          }}
+        >
+          <label htmlFor="band-min" style={{ alignSelf: 'center' }}>
+            Min
+          </label>
+          <input
+            type="number"
+            className="jp-mod-styled"
+            style={{ marginRight: 15 }}
+            value={minValue}
+            onChange={handleMinValueChange}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '50%',
+            paddingRight: '2px'
+          }}
         >
-          {bandRows.map((band, bandIndex) => (
-            <option
-              key={bandIndex}
-              value={band.band}
-              selected={band.band === bandRow.band}
-              className="jp-mod-styled"
-            >
-              {`Band ${band.band} (${band.colorInterpretation})`}
-            </option>
-          ))}
-        </select>
+          <label htmlFor="band-max" style={{ alignSelf: 'center' }}>
+            Max
+          </label>
+          <input
+            type="number"
+            className="jp-mod-styled"
+            // defaultValue={bandRow.stats.maximum}
+            value={maxValue}
+            onChange={handleMaxValueChange}
+            onBlur={setNewBands}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 };