From 40649df5f4a60f62d1d75fd0b8933318c032a63e Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Thu, 5 Sep 2024 16:41:35 -0400
Subject: [PATCH] Clean up colormap finding function

---
 .../components/common/map/layer-legend.tsx    | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/scripts/components/common/map/layer-legend.tsx b/app/scripts/components/common/map/layer-legend.tsx
index 903082650..8c5b61d58 100644
--- a/app/scripts/components/common/map/layer-legend.tsx
+++ b/app/scripts/components/common/map/layer-legend.tsx
@@ -272,7 +272,6 @@ export function LayerLegendContainer(props: LayerLegendContainerProps) {
 
 export function LayerCategoricalGraphic(props: LayerLegendCategorical) {
   const { stops } = props;
-
   return (
     <LegendList>
       {stops.map((stop) => (
@@ -349,24 +348,23 @@ export const LayerGradientGraphic = (props: LayerLegendGradient) => {
 
 export const LayerGradientColormapGraphic = (props: Omit<LayerLegendGradient, 'stops' | 'type'>) => {
   const { colorMap, ...otherProps } = props;
-
-  const colormap = findColormapByName(colorMap ?? 'viridis');
-  if (!colormap) {
+  
+  const colormapResult = findColormapByName(colorMap ?? 'viridis');
+  if (!colormapResult) {
     return null;
   }
+  const { foundColorMap, isReversed } = colormapResult;
 
-  const stops = Object.values(colormap).map((value) => {
-    if (Array.isArray(value) && value.length === 4) {
-      return `rgba(${value.join(',')})`;
-    } else {
-      return `rgba(0, 0, 0, 1)`;
-    }
+  const stops = Object.values(foundColorMap)
+  .filter(value => Array.isArray(value) && value.length === 4)
+  .map((value) => {
+    return `rgba(${(value as Array<number>).join(',')})`;
   });
-
-  const processedStops = colormap.isReversed
+  
+  const processedStops = isReversed
   ? stops.reduceRight((acc, stop) => [...acc, stop], [])
   : stops;
-
+  
   return <LayerGradientGraphic type='gradient' stops={processedStops} {...otherProps} />;
 };
 
@@ -380,5 +378,5 @@ export const findColormapByName = (name: string) => {
     return null;
   }
 
-  return { ...colormap, isReversed };
+  return { foundColorMap: {...colormap}, isReversed };
 };
\ No newline at end of file