From 609d4f377fb314a5d470769f8edef34ed046e100 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Tue, 21 Nov 2023 13:47:44 +0100
Subject: [PATCH] represents cost surfaces with flat ranges with basic colors

---
 app/hooks/map/constants.tsx | 65 +++++++++++++++++++++++++------------
 app/hooks/map/index.ts      |  2 +-
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
index 8dd9e8a357..90a7c09dea 100644
--- a/app/hooks/map/constants.tsx
+++ b/app/hooks/map/constants.tsx
@@ -354,28 +354,53 @@ export const LEGEND_LAYERS = {
   }) => {
     const { items, onChangeVisibility } = options;
 
-    return items?.map(({ id, name, min = 1, max = 100 }) => ({
-      id,
-      name,
-      type: 'gradient' as LegendItemType,
-      settingsManager: {
-        opacity: true,
-        visibility: true,
-      },
-      items: [
-        {
-          color: COLORS.cost[0],
-          value: `${min === max ? 0 : min}`,
+    return items?.map(({ id, name, min = 1, max = 100 }) => {
+      // ? if the cost surface has a flat range, a gradient makes no sense
+      if (min === max) {
+        return {
+          id,
+          name,
+          type: 'basic' as LegendItemType,
+          icon: (
+            <FaSquare
+              className="h-3 w-3"
+              style={{ color: COLORS.cost[1], minWidth: 12, minHeight: 12 }}
+            />
+          ),
+          items: [],
+          settingsManager: {
+            opacity: true,
+            visibility: true,
+          },
+          onChangeVisibility: () => {
+            onChangeVisibility?.(id);
+          },
+        };
+      }
+
+      return {
+        id,
+        name,
+        type: 'gradient' as LegendItemType,
+        settingsManager: {
+          opacity: true,
+          visibility: true,
         },
-        {
-          color: COLORS.cost[1],
-          value: `${max}`,
+        items: [
+          {
+            color: COLORS.cost[0],
+            value: min,
+          },
+          {
+            color: COLORS.cost[1],
+            value: `${max}`,
+          },
+        ],
+        onChangeVisibility: () => {
+          onChangeVisibility?.(id);
         },
-      ],
-      onChangeVisibility: () => {
-        onChangeVisibility?.(id);
-      },
-    }));
+      };
+    });
   },
   'lock-available': (options) => {
     const { puAvailableValue, onChangeVisibility } = options;
diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
index cebf39a139..104e10dfe7 100644
--- a/app/hooks/map/index.ts
+++ b/app/hooks/map/index.ts
@@ -217,7 +217,7 @@ export function useCostSurfaceLayer({
                 layerSettings.max,
                 COLORS.cost[1],
               ],
-              'fill-opacity': 0.75 * (layerSettings.opacity || 1),
+              'fill-opacity': 0.75 * (layerSettings.opacity ?? 1),
             },
           },
         ],