Histo and zoom changes

src/App.tsx

@@ -201,6 +201,7 @@ function App() {
               activeBaselayer.cmapValues.min,
               activeBaselayer.cmapValues.max,
             ]}
+            cmapRange={activeBaselayer.cmapValues.recommendedRange}
             onCmapValuesChange={onCmapValuesChange}
             cmap={activeBaselayer.cmap}
             onCmapChange={onCmapChange}

src/components/ColorMapControls.tsx

@@ -20,6 +20,8 @@ import { CustomColorMapDialog } from './CustomColorMapDialog';
 export type ColorMapControlsProps = {
   /** the selected or default min and max values for the slider */
   values: number[];
+  /** used to determine increment/decrement value for keyboard controls */
+  cmapRange: number;
   /** handler to set new user-specified values for slider */
   onCmapValuesChange: (values: number[]) => void;
   /** the color map selected in the cmap selector */
@@ -44,6 +46,7 @@ export type ColorMapControlsProps = {
 export function ColorMapControls(props: ColorMapControlsProps) {
   const {
     values,
+    cmapRange,
     onCmapValuesChange,
     cmap,
     onCmapChange,
@@ -175,6 +178,7 @@ export function ColorMapControls(props: ColorMapControlsProps) {
           <ColorMapSlider
             cmapImage={cmapImage}
             values={values}
+            cmapRange={cmapRange}
             onCmapValuesChange={onCmapValuesChange}
             units={units}
             quantity={quantity}

src/components/ColorMapSlider.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Range as RangeSlider, getTrackBackground } from 'react-range';
-import { formatNumberForDisplay } from '../utils/numberUtils';
+import { formatNumber, formatNumberForDisplay } from '../utils/numberUtils';
 import { ColorMapControlsProps } from './ColorMapControls';
 import './styles/color-map-controls.css';
 
@@ -26,6 +26,7 @@ export function ColorMapSlider(props: ColorMapSlideProps) {
     sliderAttributes,
     quantity,
     values,
+    cmapRange,
   } = props;
   /**
    * Create temporary values for range slider min/max to maintain component state without setting the global state;
@@ -34,6 +35,7 @@ export function ColorMapSlider(props: ColorMapSlideProps) {
   const [tempValues, setTempValues] = useState([values[0], values[1]]);
   const prevKeyUpHandler = useRef<(e: KeyboardEvent) => void>(null);
   const prevKeyDownHandler = useRef<(e: KeyboardEvent) => void>(null);
+  const stepValue = cmapRange * 0.05;
 
   useEffect(() => {
     if (prevKeyUpHandler.current) {
@@ -67,16 +69,28 @@ export function ColorMapSlider(props: ColorMapSlideProps) {
 
       switch (e.key) {
         case 'a':
-          setTempValues((prev) => [prev[0] - 1, prev[1] - 1]);
+          setTempValues((prev) => [
+            formatNumber(prev[0] - stepValue),
+            formatNumber(prev[1] - stepValue),
+          ]);
           break;
         case 'd':
-          setTempValues((prev) => [prev[0] + 1, prev[1] + 1]);
+          setTempValues((prev) => [
+            formatNumber(prev[0] + stepValue),
+            formatNumber(prev[1] + stepValue),
+          ]);
           break;
         case 'w':
-          setTempValues((prev) => [prev[0] - 1, prev[1] + 1]);
+          setTempValues((prev) => [
+            formatNumber(prev[0] - stepValue),
+            formatNumber(prev[1] + stepValue),
+          ]);
           break;
         case 's':
-          setTempValues((prev) => [prev[0] + 1, prev[1] - 1]);
+          setTempValues((prev) => [
+            formatNumber(prev[0] + stepValue),
+            formatNumber(prev[1] - stepValue),
+          ]);
           break;
       }
     };

src/components/OpenLayersMap.tsx

@@ -187,7 +187,7 @@ export function OpenLayersMap({
             resolutions: getBaselayerResolutions(
               180,
               band.tile_size,
-              band.levels
+              band.levels - 1
             ),
           }),
           interpolate: false,

src/reducers/baselayersReducer.ts

@@ -90,6 +90,8 @@ export function baselayersReducer(state: BaselayersState, action: Action) {
           cmapValues: {
             min: action.cmapValues.min,
             max: action.cmapValues.max,
+            recommendedRange:
+              action.activeBaselayer.cmapValues.recommendedRange,
           },
         };
         return {

src/types/maps.ts

@@ -39,6 +39,7 @@ type BandCmapValues = {
   cmapValues: {
     min: number;
     max: number;
+    recommendedRange: number;
   };
 };
 

src/utils/fetchUtils.ts

@@ -64,6 +64,7 @@ export async function fetchProducts(
               cmapValues: {
                 min: recommended_cmap_min,
                 max: recommended_cmap_max,
+                recommendedRange: recommended_cmap_max - recommended_cmap_min,
               },
             };
           }),

src/utils/numberUtils.ts

@@ -73,3 +73,11 @@ export function safeLog(x: number) {
     return Math.log(x);
   }
 }
+
+export function formatNumber(number: number, toFixed: number = 2) {
+  if (Number.isInteger(number)) {
+    return number;
+  } else {
+    return Number(number.toFixed(toFixed));
+  }
+}