Adding Checkbox for reverse Color Ramp

packages/base/src/dialogs/symbology/symbologyUtils.ts

@@ -93,13 +93,18 @@ export namespace Utils {
     stops: number[],
     selectedRamp: string,
     nClasses: number,
+    reverse = false,
   ) => {
     let colorMap = colormap({
       colormap: selectedRamp,
       nshades: nClasses > 9 ? nClasses : 9,
       format: 'rgba',
     });
 
+    if (reverse) {
+      colorMap = [...colorMap].reverse();
+    }
+
     const valueColorPairs: IStopRow[] = [];
 
     // colormap requires 9 classes to generate the ramp

packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx

@@ -38,6 +38,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     radius: 5,
   });
   const manualStyleRef = useRef(manualStyle);
+  const [reverseRamp, setReverseRamp] = useState(false);
 
   if (!layerId) {
     return;
@@ -136,6 +137,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       stops,
       selectedRamp,
       stops.length,
+      reverseRamp,
     );
 
     setStopRows(valueColorPairs);
@@ -182,6 +184,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       nClasses: colorRampOptionsRef.current?.numberOfShades,
       mode: colorRampOptionsRef.current?.selectedMode,
       symbologyTab,
+      reverse: reverseRamp,
     };
 
     layer.parameters.symbologyState = symbologyState;
@@ -313,6 +316,19 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
             )}
           </div>
 
+          {symbologyTab === 'color' && (
+            <div className="jp-gis-symbology-row">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={reverseRamp}
+                  onChange={e => setReverseRamp(e.target.checked)}
+                />
+                Reverse Color Ramp
+              </label>
+            </div>
+          )}
+
           <div className="jp-gis-layer-symbology-container">
             <ColorRamp
               layerParams={layer.parameters}

packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx

@@ -51,6 +51,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   const [radiusManualStyle, setRadiusManualStyle] = useState({
     radius: 5,
   });
+  const [reverseRamp, setReverseRamp] = useState(false);
 
   const colorManualStyleRef = useRef(colorManualStyle);
   const radiusManualStyleRef = useRef(radiusManualStyle);
@@ -202,6 +203,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       colorRamp: colorRampOptionsRef.current?.selectedRamp,
       nClasses: colorRampOptionsRef.current?.numberOfShades,
       mode: colorRampOptionsRef.current?.selectedMode,
+      reverse: reverseRamp,
     };
 
     if (layer.type === 'HeatmapLayer') {
@@ -266,7 +268,12 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     const stopOutputPairs =
       symbologyTab === 'radius'
         ? stops.map(v => ({ stop: v, output: v }))
-        : Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades);
+        : Utils.getValueColorPairs(
+            stops,
+            selectedRamp,
+            +numberOfShades,
+            reverseRamp,
+          );
 
     if (symbologyTab === 'radius') {
       setRadiusStopRows(stopOutputPairs);
@@ -382,6 +389,19 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
             )}
           </div>
 
+          {symbologyTab === 'color' && (
+            <div className="jp-gis-symbology-row">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={reverseRamp}
+                  onChange={e => setReverseRamp(e.target.checked)}
+                />
+                Reverse Color Ramp
+              </label>
+            </div>
+          )}
+
           <ColorRamp
             layerParams={layer.parameters}
             modeOptions={modeOptions}

packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx

@@ -23,11 +23,14 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
     radius: 8,
     blur: 15,
   });
+  const [reverseRamp, setReverseRamp] = useState(false);
+
   const selectedRampRef = useRef('viridis');
   const heatmapOptionsRef = useRef({
     radius: 8,
     blur: 15,
   });
+  const reverseRampRef = useRef(false);
 
   useEffect(() => {
     populateOptions();
@@ -46,7 +49,8 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
   useEffect(() => {
     selectedRampRef.current = selectedRamp;
     heatmapOptionsRef.current = heatmapOptions;
-  }, [selectedRamp, heatmapOptions]);
+    reverseRampRef.current = reverseRamp;
+  }, [selectedRamp, heatmapOptions, reverseRamp]);
 
   const populateOptions = async () => {
     let colorRamp;
@@ -63,15 +67,20 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
       return;
     }
 
-    const colorMap = colormap({
+    let colorMap = colormap({
       colormap: selectedRampRef.current,
       nshades: 9,
       format: 'hex',
     });
 
+    if (reverseRampRef.current) {
+      colorMap = [...colorMap].reverse();
+    }
+
     const symbologyState = {
       renderType: 'Heatmap',
       colorRamp: selectedRampRef.current,
+      reverse: reverseRampRef.current,
     };
 
     layer.parameters.symbologyState = symbologyState;
@@ -95,6 +104,16 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
           setSelected={setSelectedRamp}
         />
       </div>
+      <div className="jp-gis-symbology-row">
+        <label>
+          <input
+            type="checkbox"
+            checked={reverseRamp}
+            onChange={e => setReverseRamp(e.target.checked)}
+          />
+          Reverse Color Ramp
+        </label>
+      </div>
       <div className="jp-gis-symbology-row">
         <label htmlFor={'vector-value-select'}>Radius:</label>
         <input