datastake-daf 0.6.147 → 0.6.148

package/src/@daf/core/components/Dashboard/Globe/hook.js

@@ -312,11 +312,6 @@ export const useGlobe = ({
         }
       });
       setMapMarkers(newMarkers);
-      
-      // Resize the Mapbox GL JS map to ensure proper rendering after data changes
-      if (mapRef && mapRef.resize) {
-        mapRef.resize();
-      }
     }
   }, []);
 
@@ -465,50 +460,6 @@ export const useGlobe = ({
       const instance = createInstance();
       if (instance) {
         setMapRef(instance);
-        
-        // Add comprehensive resize detection for Mapbox GL JS responsiveness
-        const handleResize = () => {
-          if (instance && instance.resize) {
-            // Add a small delay to ensure DOM has updated
-            setTimeout(() => {
-              instance.resize();
-            }, 100);
-          }
-        };
-        
-        // Listen to window resize
-        window.addEventListener('resize', handleResize);
-        
-        // Listen to container size changes using ResizeObserver
-        const resizeObserver = new ResizeObserver(() => {
-          handleResize();
-        });
-        
-        if (container.current) {
-          resizeObserver.observe(container.current);
-        }
-        
-        // Store handlers for cleanup
-        instance._resizeHandler = handleResize;
-        instance._resizeObserver = resizeObserver;
-        
-        // Add IntersectionObserver to detect when globe becomes visible (handles sidenav scenarios)
-        const intersectionObserver = new IntersectionObserver((entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting && instance && instance.resize) {
-              // Globe container is visible, force resize after a delay
-              setTimeout(() => {
-                instance.resize();
-              }, 200);
-            }
-          });
-        });
-
-        if (container.current) {
-          intersectionObserver.observe(container.current);
-        }
-        
-        instance._intersectionObserver = intersectionObserver;
       } else {
         console.log('❌ [GLOBE HOOK] Failed to create map instance');
       }
@@ -597,34 +548,6 @@ export const useGlobe = ({
     }
   }, [data, mapRef, initialMarkerSetIsDone]);
 
-  // Add effect to handle layout changes (like sidenav opening/closing)
-  useEffect(() => {
-    if (mapRef) {
-      // Force resize when component becomes visible or layout changes
-      const handleLayoutChange = () => {
-        if (mapRef && mapRef.resize) {
-          setTimeout(() => {
-            mapRef.resize();
-          }, 150);
-        }
-      };
-
-      // Listen for visibility changes
-      document.addEventListener('visibilitychange', handleLayoutChange);
-      
-      // Listen for focus events (when user returns to tab)
-      window.addEventListener('focus', handleLayoutChange);
-      
-      // Store handlers for cleanup
-      mapRef._layoutChangeHandler = handleLayoutChange;
-      
-      return () => {
-        document.removeEventListener('visibilitychange', handleLayoutChange);
-        window.removeEventListener('focus', handleLayoutChange);
-      };
-    }
-  }, [mapRef]);
-
   useEffect(() => {
     if (activeMarker && mapRef) {
       const marker = mapMarkers.find((m) => m.data === activeMarker);
@@ -640,24 +563,6 @@ export const useGlobe = ({
     return () => {
       isMounted.current = false;
       
-      // Cleanup window resize listener and ResizeObserver for Mapbox GL JS
-      if (mapRef && mapRef._resizeHandler) {
-        window.removeEventListener('resize', mapRef._resizeHandler);
-      }
-      
-      if (mapRef && mapRef._resizeObserver) {
-        mapRef._resizeObserver.disconnect();
-      }
-      
-      if (mapRef && mapRef._layoutChangeHandler) {
-        document.removeEventListener('visibilitychange', mapRef._layoutChangeHandler);
-        window.removeEventListener('focus', mapRef._layoutChangeHandler);
-      }
-      
-      if (mapRef && mapRef._intersectionObserver) {
-        mapRef._intersectionObserver.disconnect();
-      }
-      
       // Defer unmounting to avoid race conditions
       const rootsToUnmount = [...roots.current];
       roots.current = [];
@@ -673,7 +578,7 @@ export const useGlobe = ({
         });
       });
     };
-  }, [mapRef]);
+  }, []);
 
   // Map control handlers
   const zoomHandler = useCallback(() => mapRef?.zoomIn(), [mapRef]);
@@ -742,21 +647,11 @@ export const useGlobe = ({
     [zoomHandler, zoomOutHandler, recenterMap, moveUpHandler, moveDownHandler],
   );
 
-  // Expose a manual resize method for external triggers
-  const forceResize = useCallback(() => {
-    if (mapRef && mapRef.resize) {
-      setTimeout(() => {
-        mapRef.resize();
-      }, 100);
-    }
-  }, [mapRef]);
-
   return {
     container,
     activeMarker,
     mapOptionsButtonsConfig,
     emptyStateIsVisible,
     setEmptyStateIsVisible,
-    forceResize,
   };
 };

package/src/@daf/core/components/Dashboard/Globe/index.jsx

@@ -130,7 +130,7 @@ function Globe({
 	);
 
 	// Use custom hook to configure globe functionality
-	const { container, activeMarker, mapOptionsButtonsConfig, forceResize } = useGlobe({
+	const { container, activeMarker, mapOptionsButtonsConfig } = useGlobe({
 		data: mappedData,
 		user,
 		polygon,
@@ -159,18 +159,6 @@ function Globe({
 		onRender?.();
 	}, [onRender]);
 
-	// Force resize when component becomes visible (handles sidenav open/close scenarios)
-	useEffect(() => {
-		if (forceResize) {
-			// Trigger resize after component mounts
-			const timer = setTimeout(() => {
-				forceResize();
-			}, 300);
-
-			return () => clearTimeout(timer);
-		}
-	}, [forceResize]);
-
 	return (
 		<ComponentWithFocus>
 			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>

package/src/@daf/core/components/Dashboard/Globe/style.js

@@ -6,17 +6,6 @@ const Style = styled.div`
   position: relative;
   width: 100%;
   height: 472px;
-  min-height: 300px;
-  
-  @media (max-width: 768px) {
-    height: 350px;
-    min-height: 250px;
-  }
-  
-  @media (max-width: 480px) {
-    height: 300px;
-    min-height: 200px;
-  }
 
   .filter-cont {
     position: absolute; 

package/src/@daf/core/components/Dashboard/Widget/KeyIndicators/index.jsx

@@ -11,15 +11,16 @@ export default function KeyIndicatorsWidget({
 	widgetClassName,
 	withTooltip = false,
 	title = "Key Indicators",
-	noMinWidth = false,	
+	noMinWidth = false,
 	children,
+	noTitle = false,
 }) {
-	
 	const component = (
 		<Widget
 			loading={loading}
 			className={formatClassname(["flex-1 with-border-header", widgetClassName])}
-			title={t(title)}
+			title={noTitle ? undefined : t(title)}
+			noTitle={noTitle}
 		>
 			{children}
 			<Style className={formatClassname(["flex", className])}>

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/ProjectWidget.stories.jsx

@@ -0,0 +1,72 @@
+import ProjectWidget from "./index.jsx";
+import ThemeLayout from "../../../ThemeLayout/index.jsx";
+import Widget from "../index.jsx";
+
+import DashboardLayout from "../../DashboardLayout/index.jsx";
+export default {
+  title: "Dashboard/Widgets/ProjectWidget",
+  component: ProjectWidget,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "3em" }}>
+        <ThemeLayout>
+          <Story />
+        </ThemeLayout>
+      </div>
+    ),
+  ],
+};
+
+export const Primary = {
+  name: "ProjectWidget",
+  args: {
+    image:
+      "https://images.squarespace-cdn.com/content/v1/606d4deb4db8c15ea53b3624/1618824875786-3V9HT8BLB1L5PEEJC6ZQ/124.jpg",
+    title: "ProjectWidgetTitle",
+    onLinkClick: () => {},
+    linkIcon: "Link",
+    sdgList: [
+      "noPoverty",
+      "zeroHunger",
+      "goodHealthWellbeing",
+      "qualityEducation",
+      "genderEquality",
+      "cleanWaterSanitation",
+      "affordableCleanEnergy",
+      "decentWorkEconomicGrowth",
+      "industryInnovationInfrastructure",
+      "reducedInequalities",
+      "sustainableCitiesCommunities",
+      "responsibleConsumptionProduction",
+      "climateAction",
+      "lifeBelowWater",
+      "lifeOnLand",
+      "peaceJusticeStrongInstitutions",
+      "partnershipsForGoals",
+    ],
+    items: [
+      { label: "Item 1", render: () => <span>Value 1</span> },
+      { label: "Item 2", render: () => <span>Value 2</span> },
+      { label: "Item 3", render: () => <span>Value 3</span> },
+    ],
+  },
+  render: (args) => {
+    return (
+      <DashboardLayout>
+        <Widget title="Project Catalogue" className="with-border-header">
+          <section>
+            <ProjectWidget {...args} />
+
+            <ProjectWidget
+              {...args}
+              sdgList={["noPoverty", "lifeBelowWater"]}
+            />
+
+            <ProjectWidget {...args} sdgList={[]} />
+          </section>
+        </Widget>
+      </DashboardLayout>
+    );
+  },
+};

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/index.jsx

@@ -0,0 +1,84 @@
+import { Card, Tooltip } from "antd";
+import { ImageContainer, ProjectWidgetItems, SDGList, Label } from "./style.js";
+import CustomIcon from "../../../Icon/CustomIcon.jsx";
+import { SDG_IMAGES } from "../../../../../../constants/SDGs.js";
+
+const { Meta } = Card;
+
+export default function ProjectWidget({
+  title,
+  description,
+  onLinkClick,
+  image,
+  linkIcon = "Link",
+  sdgList,
+  items,
+  hideSDGList = false,
+  t = (x) => x,
+}) {
+  return (
+    <Card
+      style={{
+        flex: 1,
+      }}
+      cover={
+        <ImageContainer>
+          {/* <img src={image} alt="ProjectWidget" /> */}
+          <div
+            className="image"
+            style={{
+              backgroundImage: `url(${image})`,
+            }}
+          />
+          {onLinkClick && (
+            <div className="icon-container" onClick={onLinkClick}>
+              <CustomIcon
+                name={linkIcon}
+                width={16}
+                height={16}
+                color="black"
+              />
+            </div>
+          )}
+        </ImageContainer>
+      }
+    >
+      <Meta title={title || undefined} description={description || undefined} />
+      <ProjectWidgetItems>
+        {items.map((item, index) => (
+          <li key={index} className="project-widget-item">
+            <Label>{item.label}</Label>
+            {item.render()}
+          </li>
+        ))}
+      </ProjectWidgetItems>
+
+      {!hideSDGList && (
+        <div
+          style={{
+            borderTop: "1px solid var(--base-gray-30)",
+            paddingTop: "10px",
+          }}
+        >
+          <Label>SDGs:</Label>
+          <SDGList>
+            {sdgList.map((sdg, index) => {
+              return (
+                <li key={index} className="project-widget-item">
+                  <Tooltip title={t(`SDGS::${sdg}`)}>
+                    <div
+                      style={{
+                        backgroundImage: `url(${SDG_IMAGES[sdg].img})`,
+                      }}
+                      className="sdg-item-image"
+                    />
+                  </Tooltip>
+                </li>
+              );
+            })}
+          </SDGList>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/@daf/core/components/Dashboard/Widget/ProjectWidget/style.js

@@ -0,0 +1,74 @@
+import styled from "styled-components";
+
+export const ImageContainer = styled.div`
+	overflow: hidden;
+	position: relative;
+
+	.image {
+		width: 100%;
+		height: 151px;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+	}
+
+	.icon-container {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+		background: white;
+		padding: 10px;
+		border-radius: 6px;
+		cursor: pointer;
+	}
+`;
+
+export const ProjectWidgetItems = styled.ul`
+	list-style: none;
+	padding: 0;
+	padding-top: 10px;
+	margin: 0;
+
+	.project-widget-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid var(--base-gray-30);
+		padding: 10px 0;
+
+		&:last-of-type {
+			border-bottom: 0;
+		}
+	}
+`;
+
+export const SDGList = styled.ul`
+	list-style: none;
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin: 0;
+
+	.sdg-item-image {
+		width: 24px;
+		height: 24px;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+`;
+
+export const Label = styled.span`
+	font-family: SF UI Display;
+	font-weight: 500;
+	font-style: Medium;
+	font-size: 14px;
+	leading-trim: NONE;
+	line-height: 26px;
+	letter-spacing: 0%;
+	color: #6c737f;
+`;

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/SDGWidget.stories.jsx

@@ -5,6 +5,32 @@ export default {
 	title: "Dashboard/Widgets/SDGWidget",
 	component: SDGWidget,
 	tags: ["autodocs"],
+	argsTypes: {
+		activeSdgGoals: {
+			control: {
+				type: "checkbox",
+			},
+			options: [
+				"noPoverty",
+				"zeroHunger",
+				"goodHealthWellbeing",
+				"qualityEducation",
+				"genderEquality",
+				"cleanWaterSanitation",
+				"affordableCleanEnergy",
+				"decentWorkEconomicGrowth",
+				"industryInnovationInfrastructure",
+				"reducedInequalities",
+				"sustainableCitiesCommunities",
+				"responsibleConsumptionProduction",
+				"climateAction",
+				"lifeBelowWater",
+				"lifeOnLand",
+				"peaceJusticeStrongInstitutions",
+				"partnershipsForGoals",
+			],
+		},
+	},
 	decorators: [
 		(Story) => (
 			<div style={{ margin: "3em" }}>
@@ -42,20 +68,10 @@ export const Primary = {
 	},
 };
 
-// NO_POVERTY: "noPoverty",
-// ZERO_HUNGER: "zeroHunger",
-// GOOD_HEALTH_WELL_BEING: "goodHealthWellbeing",
-// QUALITY_EDUCATION: "qualityEducation",
-// GENDER_EQUALITY: "genderEquality",
-// CLEAN_WATER_SANITATION: "cleanWaterSanitation",
-// AFFORDABLE_CLEAN_ENERGY: "affordableCleanEnergy",
-// DECENT_WORK_ECONOMIC_GROWTH: "decentWorkEconomicGrowth",
-// INDUSTRY_INNOVATION_INFRASTRUCTURE: "industryInnovationInfrastructure",
-// REDUCED_INEQUALITIES: "reducedInequalities",
-// SUSTAINABLE_CITIES_COMMUNITIES: "sustainableCitiesCommunities",
-// RESPONSIBLE_CONSUMPTION_PRODUCTION: "responsibleConsumptionProduction",
-// CLIMATE_ACTION: "climateAction",
-// LIFE_BELOW_WATER: "lifeBelowWater",
-// LIFE_ON_LAND: "lifeOnLand",
-// PEACE_JUSTICE_STRONG_INSTITUTIONS: "peaceJusticeStrongInstitutions",
-// PARTNERSHIPS_FOR_GOALS: "partnershipsForGoals",
+export const Empty = {
+	name: "Empty",
+	args: {
+		title: "Sustainable Development Goals",
+		activeSdgGoals: [],
+	},
+};

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/config.js

@@ -1,29 +1,11 @@
-const KEYS = {
-	NO_POVERTY: "noPoverty",
-	ZERO_HUNGER: "zeroHunger",
-	GOOD_HEALTH_WELL_BEING: "goodHealthWellbeing",
-	QUALITY_EDUCATION: "qualityEducation",
-	GENDER_EQUALITY: "genderEquality",
-	CLEAN_WATER_SANITATION: "cleanWaterSanitation",
-	AFFORDABLE_CLEAN_ENERGY: "affordableCleanEnergy",
-	DECENT_WORK_ECONOMIC_GROWTH: "decentWorkEconomicGrowth",
-	INDUSTRY_INNOVATION_INFRASTRUCTURE: "industryInnovationInfrastructure",
-	REDUCED_INEQUALITIES: "reducedInequalities",
-	SUSTAINABLE_CITIES_COMMUNITIES: "sustainableCitiesCommunities",
-	RESPONSIBLE_CONSUMPTION_PRODUCTION: "responsibleConsumptionProduction",
-	CLIMATE_ACTION: "climateAction",
-	LIFE_BELOW_WATER: "lifeBelowWater",
-	LIFE_ON_LAND: "lifeOnLand",
-	PEACE_JUSTICE_STRONG_INSTITUTIONS: "peaceJusticeStrongInstitutions",
-	PARTNERSHIPS_FOR_GOALS: "partnershipsForGoals",
-};
+import { SDG_KEYS as KEYS } from "../../../../../../constants/SDGs";
 
 export const getGoalConfig = () => {
 	return [
-		{ img: "/SDGs/SDGs.svg", key: KEYS.NO_POVERTY, disabled: "/SDGs/SDGs-17.svg" },
-		{ img: "/SDGs/SDGs-1.svg", key: KEYS.ZERO_HUNGER, disabled: "/SDGs/SDGs-18.svg" },
+		{ img: "/SDGs/SDGs.svg", key: KEYS.NO_POVERTY, disabled: "./SDGs/SDGs-17.svg" },
+		{ img: "/SDGs/SDGs-1.svg", key: KEYS.ZERO_HUNGER, disabled: "./SDGs/SDGs-18.svg" },
 		{
-			img:"/SDGs/SDGs-2.svg",
+			img: "/SDGs/SDGs-2.svg",
 			key: KEYS.GOOD_HEALTH_WELL_BEING,
 			disabled: "/SDGs/SDGs-19.svg",
 		},

package/src/@daf/core/components/Dashboard/Widget/SDGWidget/index.jsx

@@ -32,12 +32,12 @@ export default function SDGWidget({
 
 const SDGContainer = styled.div`
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 	gap: 8px;
 
 	.sdg-item {
-		height: 90px;
-		width: 90px;
+		height: 100px;
+		width: 100px;
 		border-radius: 8px;
 		background-size: cover;
 		background-position: center;