From 54e3fbe33738222d5e414e716d8b027216293dfc Mon Sep 17 00:00:00 2001
From: mluena <maluenarod@gmail.com>
Date: Wed, 10 Apr 2024 15:10:47 +0200
Subject: [PATCH] projects layer width

---
 client/src/containers/charts/single-bar.tsx   |   6 +-
 .../datasets/layers/projects/hooks.tsx        |   9 +-
 client/src/containers/map/index.tsx           | 136 ++++++++++++------
 3 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/client/src/containers/charts/single-bar.tsx b/client/src/containers/charts/single-bar.tsx
index d7ba9565..42febfa6 100644
--- a/client/src/containers/charts/single-bar.tsx
+++ b/client/src/containers/charts/single-bar.tsx
@@ -21,11 +21,11 @@ export default function SingleBar({
           {formatCompactNumber(data['value'].total_funding || 0)}
         </p>
 
-        <div className="flex h-10 w-full rounded-[4px]">
+        <div className="flex h-10 w-full">
           <Tooltip>
             <TooltipTrigger asChild>
               <div
-                className="h-full cursor-pointer bg-[#70CCB0]"
+                className="h-full cursor-pointer rounded-bl-[4px] rounded-tl-[4px] bg-[#70CCB0] hover:border-2 hover:border-[#D48D00]"
                 style={{
                   width: `${(data['value'].afoco_funding * 100) / data['value'].total_funding}%`,
                 }}
@@ -45,7 +45,7 @@ export default function SingleBar({
           <Tooltip>
             <TooltipTrigger asChild>
               <div
-                className="h-full cursor-pointer bg-[#FFCC73]"
+                className="h-full cursor-pointer rounded-br-[4px] rounded-tr-[4px] bg-[#FFCC73] hover:border-2 hover:border-[#D48D00]"
                 style={{
                   width: `${(data['value'].national_funding * 100) / data['value'].total_funding}%`,
                 }}
diff --git a/client/src/containers/datasets/layers/projects/hooks.tsx b/client/src/containers/datasets/layers/projects/hooks.tsx
index d2782167..525788ed 100644
--- a/client/src/containers/datasets/layers/projects/hooks.tsx
+++ b/client/src/containers/datasets/layers/projects/hooks.tsx
@@ -12,7 +12,6 @@ export function useLayers({
   settings: { opacity: LayerSettings['opacity']; visibility: LayerSettings['visibility'] };
 }): LayerProps[] {
   const hoveredProject = useAtomValue(hoveredProjectMapAtom);
-
   // The layer is designed to react both to hover events directly on the map and to hover events over a specific project listed in a sidebar.
 
   // Reactivity to Hover Events on the Map:
@@ -58,10 +57,10 @@ export function useLayers({
           'case',
           ['boolean', ['feature-state', 'hover'], false],
           13,
-          ['all', ['to-boolean', hoveredProject], ['!=', ['get', 'project_code'], hoveredProject]],
-          10,
-          ['all', ['to-boolean', hoveredProject], ['==', ['get', 'project_code'], hoveredProject]],
-          13,
+          // ['all', ['to-boolean', hoveredProject], ['!=', ['get', 'project_code'], hoveredProject]],
+          // 10,
+          // ['all', ['to-boolean', hoveredProject], ['==', ['get', 'project_code'], hoveredProject]],
+          // 10,
           10,
         ],
         'circle-color': '#176252',
diff --git a/client/src/containers/map/index.tsx b/client/src/containers/map/index.tsx
index a1bb113c..037fc4ad 100644
--- a/client/src/containers/map/index.tsx
+++ b/client/src/containers/map/index.tsx
@@ -9,7 +9,6 @@ import { useParams, useRouter } from 'next/navigation';
 
 import bbox from '@turf/bbox';
 import { useAtomValue, useSetAtom, useAtom } from 'jotai';
-import { MapboxGeoJSONFeature } from 'mapbox-gl';
 
 import { bboxAtom, hoveredProjectMapAtom, layersInteractiveIdsAtom, tmpBboxAtom } from '@/store';
 
@@ -49,6 +48,12 @@ const DEFAULT_PROPS: CustomMapProps = {
   maxZoom: 20,
 };
 
+const INITIAL_PROJECTS_POPUP = {
+  position: null,
+  popup: null,
+  info: null,
+};
+
 export default function MapContainer() {
   const { id, initialViewState, minZoom, maxZoom } = DEFAULT_PROPS;
   const queryParams = useSyncQueryParams();
@@ -56,11 +61,7 @@ export default function MapContainer() {
     position: { x: number; y: number } | null;
     popup: number[] | null;
     info: string | null;
-  }>({
-    position: null,
-    popup: null,
-    info: null,
-  });
+  }>(INITIAL_PROJECTS_POPUP);
 
   const { [id]: map } = useMap();
   const { push } = useRouter();
@@ -149,54 +150,92 @@ export default function MapContainer() {
 
   const handleMouseMove = useCallback(
     (e: MapLayerMouseEvent) => {
-      const findLayer = (layerId: string) => e?.features?.find(({ layer }) => layer.id === layerId);
-      const ProjectsLayer = findLayer('projects_circle');
-      const ProjectsFillLayer = findLayer('projects_fill');
-
-      const handleLayerInteraction = (
-        layer: MapboxGeoJSONFeature | undefined,
-        sourceLayer: string,
-        stateIdVar: any | null
-      ) => {
-        if (layer && map) {
-          setCursor('pointer');
-
-          const projectCode = layer.properties?.project_code;
-          setHoveredProjectMap(projectCode);
-          setLocationPopUp({
-            popup: [e?.lngLat.lat, e?.lngLat.lng],
-            position: { x: e.point.x, y: e.point.y },
-            info: projectCode,
-          });
-
-          if (stateIdVar !== null) {
-            map.setFeatureState(
-              { sourceLayer, source: 'projects', id: stateIdVar },
-              { hover: false }
-            );
-          }
-
-          stateIdVar = projectCode;
-          map.setFeatureState({ sourceLayer, source: 'projects', id: stateIdVar }, { hover: true });
+      const ProjectsLayer =
+        e?.features && e?.features.find(({ layer }) => layer.id === 'projects_circle');
+      const ProjectsFillLayer =
+        e?.features && e?.features.find(({ layer }) => layer.id === 'projects_fill');
+      // *ON MOUSE ENTER
+      if (e.features && map && ProjectsLayer) {
+        setCursor('pointer');
+        setHoveredProjectMap(ProjectsLayer.properties?.project_code);
+        setLocationPopUp({
+          popup: [e?.lngLat.lat, e?.lngLat.lng],
+          position: {
+            x: e.point.x,
+            y: e.point.y,
+          },
+          info: ProjectsLayer.properties?.project_code,
+        });
+      }
+
+      if (e.features && map && ProjectsFillLayer) {
+        setCursor('pointer');
+        setHoveredProjectMap(ProjectsFillLayer.properties?.project_code);
+        setLocationPopUp({
+          popup: [e?.lngLat.lat, e?.lngLat.lng],
+          position: {
+            x: e.point.x,
+            y: e.point.y,
+          },
+          info: ProjectsFillLayer.properties?.project_code,
+        });
+      }
+
+      if (ProjectsLayer && map) {
+        if (hoveredStateIdProjectsCircle !== null) {
+          map?.setFeatureState(
+            {
+              sourceLayer: 'areas_centroids_c',
+              source: 'projects',
+              id: hoveredStateIdProjectsCircle,
+            },
+            { hover: false }
+          );
+        }
+
+        hoveredStateIdProjectsCircle = ProjectsLayer?.properties?.project_code as string;
+        map?.setFeatureState(
+          {
+            sourceLayer: 'areas_centroids_c',
+            source: 'projects',
+            id: hoveredStateIdProjectsCircle,
+          },
+          { hover: true }
+        );
+      }
+      if (ProjectsFillLayer && map) {
+        if (hoveredStateIdProjectsFill !== null) {
+          map?.setFeatureState(
+            {
+              sourceLayer: 'areas_centroids_l',
+              source: 'projects',
+              id: hoveredStateIdProjectsFill,
+            },
+            { hover: false }
+          );
         }
-      };
 
-      handleLayerInteraction(ProjectsLayer, 'areas_centroids_c', hoveredStateIdProjectsCircle);
-      handleLayerInteraction(ProjectsFillLayer, 'areas_centroids_l', hoveredStateIdProjectsFill);
+        hoveredStateIdProjectsFill = ProjectsFillLayer?.properties?.project_code as string;
+        map?.setFeatureState(
+          {
+            sourceLayer: 'areas_centroids_l',
+            source: 'projects',
+            id: hoveredStateIdProjectsFill,
+          },
+          { hover: true }
+        );
+      }
 
       // *ON MOUSE LEAVE
+
       if (e.features?.length === 0) {
         setCursor('grab');
         setHoveredProjectMap(null);
-        setLocationPopUp({
-          popup: null,
-          position: null,
-          info: null,
-        });
+        setLocationPopUp(INITIAL_PROJECTS_POPUP);
       }
 
       if (!ProjectsLayer && map && hoveredStateIdProjectsCircle) {
-        map.setFeatureState(
+        map?.setFeatureState(
           {
             sourceLayer: 'areas_centroids_c',
             source: 'projects',
@@ -206,10 +245,13 @@ export default function MapContainer() {
         );
         hoveredStateIdProjectsCircle = null;
       }
-
       if (!ProjectsFillLayer && map && hoveredStateIdProjectsFill) {
-        map.setFeatureState(
-          { sourceLayer: 'areas_centroids_l', source: 'projects', id: hoveredStateIdProjectsFill },
+        map?.setFeatureState(
+          {
+            sourceLayer: 'areas_centroids_l',
+            source: 'projects',
+            id: hoveredStateIdProjectsFill,
+          },
           { hover: false }
         );
         hoveredStateIdProjectsFill = null;