jst-seminar-rostlab-tum · marinovl7 · Dec 18, 2024 · Dec 13, 2024 · Dec 17, 2024 · Dec 17, 2024
diff --git a/src/components/Legend/GradientLegend.tsx b/src/components/Legend/GradientLegend.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 
+import { NutritionData } from '@/domain/enums/NutritionData';
 import { ColorsData } from '@/domain/props/ColorsData';
 import GradientLegendProps from '@/domain/props/GradientLegendProps';
 
@@ -19,11 +20,8 @@ export default function GradientLegend({ colorsData, startLabel, endLabel, hasNo
     <div className="relative flex flex-col items-end w-full md:w-96 px-4 py-3">
       {hasNotAnalyzedPoint && (
         <div className="flex items-center gap-x-2 mb-4">
-          <span
-            className="w-3 h-3 rounded-full"
-            style={{ backgroundColor: `hsl(var(--nextui-nutritionNotAnalyzed))` }}
-          />
-          <span className="text-xs font-medium">Not Analyzed</span>
+          <span className="w-3 h-3 rounded-full" style={{ backgroundColor: `hsl(var(--nextui-notAnalyzed))` }} />
+          <span className="text-xs font-medium">{NutritionData.NOT_ANALYZED_DATA}</span>
         </div>
       )}
 

diff --git a/src/components/Map/IpcMap/IpcGlobalChoropleth.tsx b/src/components/Map/IpcMap/IpcGlobalChoropleth.tsx
@@ -19,13 +19,8 @@ function IpcGlobalChoropleth({
     GeoJsonProperties
   >;
 
-  const filteredIpcColorData = {
-    ...ipcColorData,
-    features: ipcColorData.features.filter((feature) => feature?.properties?.adm0_id !== selectedCountryId),
-  };
-
   const handleCountryFeature = (feature: Feature<Geometry, GeoJsonProperties>, layer: L.Layer) => {
-    IpcChoroplethOperations.initializeCountryLayer(feature, layer, ipcData, setSelectedCountryId);
+    IpcChoroplethOperations.initializeCountryLayer(feature, layer, ipcData, setSelectedCountryId, selectedCountryId!);
   };
 
   return (
@@ -35,9 +30,18 @@ function IpcGlobalChoropleth({
         if (!feature) {
           return {};
         }
+
+        if (feature.properties.adm0_id === selectedCountryId) {
+          return {
+            color: 'hsl(var(--nextui-countryBorders))',
+            weight: 1,
+            fillOpacity: 1,
+            fillColor: IpcChoroplethOperations.fillCountryIpc(feature?.properties?.ipcPhase),
+          };
+        }
         return IpcChoroplethOperations.ipcGlobalStyle(feature, feature?.properties.adm0_id, ipcData, theme === 'dark');
       }}
-      data={filteredIpcColorData}
+      data={ipcColorData}
       onEachFeature={handleCountryFeature}
     />
   );

diff --git a/src/domain/constant/legend/mapLegendData.tsx b/src/domain/constant/legend/mapLegendData.tsx
@@ -106,6 +106,7 @@ export function mapLegendData(
     case GlobalInsight.FOOD:
       legendData.push({
         title: 'Prevalence of insufficient food consumption',
+        hasNotAnalyzedPoint: true,
         colorsData: [
           { color: 'fcsGradient1', title: 'Very Low', value: '0-5%' },
           { color: 'fcsGradient2', title: 'Low', value: '5-10%' },
@@ -307,6 +308,7 @@ export function mapLegendData(
             { label: IpcPhases.PHASE_3, color: 'ipcPhase3' },
             { label: IpcPhases.PHASE_4, color: 'ipcPhase4' },
             { label: IpcPhases.PHASE_5, color: 'ipcPhase5' },
+            { label: NutritionData.NOT_ANALYZED_DATA, color: 'notAnalyzed' },
           ],
         });
       }
@@ -360,12 +362,13 @@ export function mapLegendData(
           records: [
             { label: NutritionData.ACTUAL_DATA, color: 'nutritionActual' },
             { label: NutritionData.PREDICTED_DATA, color: 'nutritionPredicted' },
-            { label: NutritionData.NOT_ANALYZED_DATA, color: 'nutritionNotAnalyzed' },
+            { label: NutritionData.NOT_ANALYZED_DATA, color: 'notAnalyzed' },
           ],
         });
       } else {
         legendData.push({
           title: 'Risk of Inadequate Micronutrient Intake',
+          hasNotAnalyzedPoint: true,
           colorsData: [
             { color: 'ipcGradient1', title: 'Lowest', value: '0-19%' },
             { color: 'ipcGradient2', title: 'Low', value: '20-39%' },

diff --git a/src/domain/enums/NutritionData.ts b/src/domain/enums/NutritionData.ts
@@ -1,5 +1,5 @@
 export enum NutritionData {
   ACTUAL_DATA = 'Actual Data',
   PREDICTED_DATA = 'Predicted Data',
-  NOT_ANALYZED_DATA = 'Not analyzed Data',
+  NOT_ANALYZED_DATA = 'Not Analyzed Data',
 }
diff --git a/src/operations/map/FcsCountryChoroplethOperations.tsx b/src/operations/map/FcsCountryChoroplethOperations.tsx
@@ -7,7 +7,7 @@ import FcsRegionTooltip from '@/components/Map/FcsRegionTooltip';
 
 export class FcsCountryChoroplethOperations {
   static fcsFill(fcs?: number): string {
-    if (fcs === undefined) return 'hsl(var(--nextui-countriesBase))';
+    if (fcs === undefined) return 'hsl(var(--nextui-notAnalyzed))';
     if (fcs <= 0.05) return '#29563A';
     if (fcs <= 0.1) return '#73B358';
     if (fcs <= 0.2) return '#CBCC58';
@@ -21,7 +21,7 @@ export class FcsCountryChoroplethOperations {
       fillColor: FcsCountryChoroplethOperations.fcsFill(feature?.properties?.fcs?.score),
       color: 'hsl(var(--nextui-countryBorders))',
       weight: 1,
-      fillOpacity: 0.6,
+      fillOpacity: 1,
     };
   }
 
@@ -40,7 +40,7 @@ export class FcsCountryChoroplethOperations {
       if (hoveredRegionFeature) {
         const pathLayer = layer as L.Path;
         pathLayer.setStyle({
-          fillOpacity: 0.8,
+          fillOpacity: 0.6,
         });
 
         const tooltipContainer = document.createElement('div');
@@ -58,7 +58,7 @@ export class FcsCountryChoroplethOperations {
       const pathLayer = layer as L.Path;
 
       pathLayer.setStyle({
-        fillOpacity: 0.6,
+        fillOpacity: 1,
       });
       pathLayer.closeTooltip();
     });

diff --git a/src/operations/map/IpcChoroplethOperations.tsx b/src/operations/map/IpcChoroplethOperations.tsx
@@ -44,14 +44,14 @@ export class IpcChoroplethOperations {
   });
 
   static fillCountryIpc = (phase: number) => {
-    if (phase === null) return 'RGBA(58, 66, 68, 0.7)';
+    if (phase === null) return 'hsl(var(--nextui-notAnalyzed))';
     if (phase === 1) return '#D1FAD1';
     if (phase === 2) return '#FAE834';
     if (phase === 3) return '#E88519';
     if (phase === 4) return '#CD1919';
     if (phase === 5) return '#731919';
     if (phase === 6) return '#353F42';
-    return 'RGBA(58, 66, 68, 0.7)';
+    return 'hsl(var(--nextui-notAnalyzed))';
   };
 
   static generateColorMap = (ipcData: CountryIpcData[], mapData: CountryMapDataWrapper) => {
@@ -76,18 +76,22 @@ export class IpcChoroplethOperations {
     feature: Feature<Geometry, GeoJsonProperties>,
     layer: L.Layer,
     ipcData: CountryIpcData[],
-    setSelectedCountryId: (id: number | null) => void
+    setSelectedCountryId: (id: number | null) => void,
+    selectedCountryId: number
   ) {
     if (this.checkIfActive(feature as CountryMapData, ipcData)) {
-      this.createTooltip(feature, layer, ipcData);
-      this.attachEvents(feature, layer, setSelectedCountryId);
+      if (feature.properties?.adm0_id !== selectedCountryId) {
+        this.createTooltip(feature, layer, ipcData);
+      }
+      this.attachEvents(feature, layer, setSelectedCountryId, selectedCountryId);
     }
   }
 
   static attachEvents(
     feature: Feature<Geometry, GeoJsonProperties>,
     layer: L.Layer,
-    setSelectedCountryId: (id: number | null) => void
+    setSelectedCountryId: (id: number | null) => void,
+    selectedCountryId: number
   ) {
     const pathLayer = layer as L.Path;
     const originalStyle = { ...pathLayer.options };
@@ -98,11 +102,19 @@ export class IpcChoroplethOperations {
         document.getElementsByClassName('leaflet-container').item(0)?.classList.remove('interactive');
       },
       mouseover: () => {
-        pathLayer.setStyle({ ...originalStyle, fillOpacity: 0.7 });
-        document.getElementsByClassName('leaflet-container').item(0)?.classList.add('interactive');
+        if (feature.properties?.adm0_id !== selectedCountryId) {
+          pathLayer.setStyle({ ...originalStyle, fillOpacity: 0.6 });
+        } else {
+          pathLayer.setStyle({
+            ...originalStyle,
+            fillColor: 'hsl(var(--nextui-ipcHoverRegion))',
+          });
+        }
 
+        document.getElementsByClassName('leaflet-container').item(0)?.classList.add('interactive');
         pathLayer.openTooltip();
       },
+
       mouseout: () => {
         pathLayer.setStyle(originalStyle);
         document.getElementsByClassName('leaflet-container').item(0)?.classList.remove('interactive');
@@ -159,7 +171,14 @@ export class IpcChoroplethOperations {
     const originalStyle = { ...pathLayer.options };
     layer.on({
       mouseover: () => {
-        pathLayer.setStyle({ ...originalStyle, fillOpacity: 0.7 });
+        if (feature?.properties?.ipcPhase) {
+          pathLayer.setStyle({ ...originalStyle, fillOpacity: 0.6 });
+        } else {
+          pathLayer.setStyle({
+            ...originalStyle,
+            fillColor: 'hsl(var(--nextui-ipcHoverRegion))',
+          });
+        }
       },
       mouseout: () => {
         pathLayer.setStyle(originalStyle);

diff --git a/src/operations/map/NutritionStateChoroplethOperations.tsx b/src/operations/map/NutritionStateChoroplethOperations.tsx
@@ -19,7 +19,7 @@ export default class NutritionStateChoroplethOperations {
   };
 
   public static nutritionFillColor(value: number | null): string {
-    if (!value) return 'none';
+    if (!value) return 'hsl(var(--nextui-notAnalyzed))';
     if (value <= 19) return '#fff3f3';
     if (value <= 39) return '#fcd0ce';
     if (value <= 59) return '#f88884';
@@ -34,20 +34,20 @@ export default class NutritionStateChoroplethOperations {
 
     return {
       fillColor: this.nutritionFillColor(value),
-      color: '#000',
+      color: 'hsl(var(--nextui-countryBorders))',
       weight: 1,
-      fillOpacity: 0.6,
+      fillOpacity: 1,
     };
   }
 
   public static addHoverEffect(layer: LayerWithFeature): void {
     const pathLayer = layer as L.Path;
     pathLayer.on({
       mouseover: () => {
-        pathLayer.setStyle({ fillOpacity: 1 });
+        pathLayer.setStyle({ fillOpacity: 0.6 });
       },
       mouseout: () => {
-        pathLayer.setStyle({ fillOpacity: 0.6 });
+        pathLayer.setStyle({ fillOpacity: 1 });
       },
     });
   }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -216,7 +216,6 @@ const config = {
             //nutrition points
             nutritionActual: '#FFB74D',
             nutritionPredicted: '#E3F2FD',
-            nutritionNotAnalyzed: '#D2D1D1',
 
             //animation
             nutritionAnimation: '#F7B750',
@@ -235,6 +234,8 @@ const config = {
             ipcPhase3: '#e88519',
             ipcPhase4: '#cd1919',
             ipcPhase5: '#731919',
+            notAnalyzed: '#CFCFCF',
+            ipcHoverRegion: '#A5B1B3',
           },
         },
         dark: {
@@ -276,14 +277,15 @@ const config = {
             fatalityAlert: '#742280',
             climateWetAlert: '#4295D3',
             climateDryAlert: '#B95926',
-            nutritionNotAnalyzed: '#A69F9F',
             fcsAnimation: '#014a5e',
 
             // charts
             chartsLegendBackground: '#2a2a2a',
             chartsXAxisLine: '#757575',
             chartsGridLine: '#424242',
             chartForecast: '#0e6983',
+            notAnalyzed: '#A6A6A6',
+            ipcHoverRegion: '#757E80',
           },
         },
       },