Feature/19 reviewers can switch between the cdi map and cdi raster

frontend/src/app/globals.css

@@ -10,6 +10,12 @@
   .ant-typography {
     display: block;
   }
+  .leaflet-control,
+  .leaflet-pane,
+  .leaflet-top,
+  .leaflet-bottom {
+    z-index: 0;
+  }
 }
 
 body {

frontend/src/components/Map/CDIMap.js

@@ -2,7 +2,11 @@
 
 import L from "leaflet";
 import "leaflet.pattern";
-import { DEFAULT_CENTER, DROUGHT_CATEGORY } from "@/static/config";
+import {
+  DEFAULT_CENTER,
+  DROUGHT_CATEGORY,
+  FILTER_VALUE_TYPES,
+} from "@/static/config";
 import Map from "./Map";
 import { useMap, GeoJSON } from "react-leaflet";
 import {
@@ -11,7 +15,9 @@ import {
   styleOptions,
 } from "@/static/poly-styles";
 import { useAppContext, useAppDispatch } from "@/context/AppContextProvider";
-import { Flex, Spin } from "antd";
+import { Card, Flex, Select, Spin } from "antd";
+import { useState } from "react";
+import classNames from "classnames";
 
 const CDIGeoJSON = ({ geoData, onEachFeature, style }) => {
   const map = useMap();
@@ -37,6 +43,7 @@ const CDIGeoJSON = ({ geoData, onEachFeature, style }) => {
 };
 
 const CDIMap = ({ data = [] }) => {
+  const [valueType, setValueType] = useState(FILTER_VALUE_TYPES[0]?.value);
   const appContext = useAppContext();
   const geoData = appContext?.geoData || null;
   const { selectedAdms = [], isBulkAction = false, activeAdm } = appContext;
@@ -65,10 +72,7 @@ const CDIMap = ({ data = [] }) => {
       const findAdm = data?.find(
         (d) => d?.administration_id === feature?.properties?.administration_id
       );
-      const category =
-        findAdm?.category === null
-          ? findAdm?.initial_category
-          : findAdm?.category;
+      const category = findAdm?.[valueType];
       const fillColor =
         DROUGHT_CATEGORY?.[category]?.color || DROUGHT_CATEGORY[0].color;
       const shape = new L.PatternCircle({
@@ -95,12 +99,50 @@ const CDIMap = ({ data = [] }) => {
     }
   };
 
+  const onSelectValueType = (value) => {
+    appDispatch({
+      type: "REFRESH_MAP_TRUE",
+    });
+    setValueType(value);
+    setTimeout(() => {
+      appDispatch({
+        type: "REFRESH_MAP_FALSE",
+      });
+    }, 500);
+  };
+
   return (
-    <Map center={DEFAULT_CENTER} height={160} zoom={9} minZoom={9}>
-      {() => (
-        <CDIGeoJSON {...{ geoData, onEachFeature }} style={geoJSONStyle} />
-      )}
-    </Map>
+    <div className="relative bg-neutral-100">
+      <div className="w-1/2 xl:w-1/3 absolute top-0 right-0 z-10 p-2 space-y-4">
+        <Select
+          className="w-full"
+          placeholder="Select value type"
+          options={FILTER_VALUE_TYPES}
+          value={valueType}
+          onChange={onSelectValueType}
+        />
+        <Card title="LEGEND">
+          <ul>
+            {DROUGHT_CATEGORY.map((category, index) => (
+              <li key={category.value}>
+                <span
+                  className={classNames("inline-block w-4 h-4 mr-2", {
+                    "border border-gray-400": index == 0,
+                  })}
+                  style={{ backgroundColor: category.color }}
+                ></span>
+                {category.label}
+              </li>
+            ))}
+          </ul>
+        </Card>
+      </div>
+      <Map center={DEFAULT_CENTER} height={160} zoom={9} minZoom={9}>
+        {() => (
+          <CDIGeoJSON {...{ geoData, onEachFeature }} style={geoJSONStyle} />
+        )}
+      </Map>
+    </div>
   );
 };
 

frontend/src/static/config.js

@@ -62,3 +62,14 @@ export const PUBLICATION_STATUS = [
     color: "green",
   },
 ];
+
+export const FILTER_VALUE_TYPES = [
+  {
+    value: "category",
+    label: "Reviewed Values",
+  },
+  {
+    value: "initial_category",
+    label: "Raw Values",
+  },
+];