datastake-daf 0.6.264 → 0.6.265

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

@@ -48,30 +48,15 @@ export const useGlobe = ({
   const isMounted = useRef(true);
 
   const addAllDataToMap = useCallback(() => {
-    console.log('🚀 [GLOBE HOOK] addAllDataToMap called');
-    console.log('🚀 [GLOBE HOOK] data:', data);
-    console.log('🚀 [GLOBE HOOK] mapRef exists:', !!mapRef);
-    console.log('🚀 [GLOBE HOOK] style loaded:', mapRef?.isStyleLoaded());
-    
-    if (!data || !mapRef) {
-      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - missing data or mapRef');
-      return;
-    }
-    
-    if (!mapRef.isStyleLoaded()) {
-      console.log('⏳ [GLOBE HOOK] Style not loaded yet, retrying in 100ms...');
-      setTimeout(() => {
-        addAllDataToMap();
-      }, 100);
+
+    if (!data || !mapRef || !mapRef.isStyleLoaded()) {
       return;
     }
     
+    // Prevent multiple calls with empty data
     if (data.length === 0) {
-      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - no data');
       return;
     }
-    
-    console.log('✅ [GLOBE HOOK] Starting to add markers to map...');
 
     // Clear existing markers using functional update to avoid dependency issues
     setMapMarkers(currentMarkers => {
@@ -123,14 +108,8 @@ export const useGlobe = ({
       const newMarkers = [];
       const maxTotal = Math.max(...(data || []).map((d) => d.total || 0));
       
-      console.log('🎯 [GLOBE HOOK] Processing data items:', data.length);
       data.forEach((d, i) => {
-        console.log(`🎯 [GLOBE HOOK] Processing item ${i}:`, d);
-        console.log(`🎯 [GLOBE HOOK] Item ${i} marker:`, d?.marker);
-        console.log(`🎯 [GLOBE HOOK] Item ${i} lat/lng:`, d?.marker?.lat, d?.marker?.lng);
-        
         if (d?.marker?.lat && d?.marker?.lng) {
-          console.log(`✅ [GLOBE HOOK] Item ${i} has valid coordinates, creating marker...`);
           let marker;
           let iconClassName = "";
           let innerHtml = "";
@@ -233,8 +212,6 @@ export const useGlobe = ({
               .setLngLat([d.marker.lng, d.marker.lat])
               .setPopup(new mapboxgl.Popup().setDOMContent(div))
               .addTo(mapRef);
-              
-            console.log(`🎉 [GLOBE HOOK] Marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
 
           } else if (type === "territory") {
             // Handle territory polygons
@@ -320,8 +297,6 @@ export const useGlobe = ({
               .setLngLat([d.marker.lng, d.marker.lat])
               .setPopup(new mapboxgl.Popup().setDOMContent(div))
               .addTo(mapRef);
-              
-            console.log(`🎉 [GLOBE HOOK] Default marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
           }
 
           // Add click handler
@@ -355,7 +330,6 @@ export const useGlobe = ({
       mapboxgl.accessToken = MAP_TOKEN;
 
       // Create the map with Mapbox GL JS - 3D globe
-      console.log('🗺️ [GLOBE HOOK] Creating map with style:', STYLE_URL);
       const map = new mapboxgl.Map({
         container: container.current,
         style: STYLE_URL,
@@ -374,13 +348,9 @@ export const useGlobe = ({
 
       // Configure the map when style loads
       map.on('style.load', () => {
-        console.log('🎨 [GLOBE HOOK] Style loaded event triggered');
-        console.log('🎨 [GLOBE HOOK] Map style loaded:', map.isStyleLoaded());
         
         // Wait a bit for the style to fully load
         setTimeout(() => {
-          console.log('🎨 [GLOBE HOOK] After timeout - Map style loaded:', map.isStyleLoaded());
-          
           // Set fog for the space background effect with stars - simplified to avoid errors
           try {
             map.setFog({
@@ -475,10 +445,9 @@ export const useGlobe = ({
       // Add navigation controls
       map.addControl(new mapboxgl.NavigationControl(), 'top-right');
 
-      console.log('🗺️ [GLOBE HOOK] Map created successfully');
       return map;
     } catch (error) {
-      console.error('❌ [GLOBE HOOK] Error creating Mapbox GL JS globe:', error);
+      console.error('Error creating Mapbox GL JS globe:', error);
       return null;
     }
   }, []);
@@ -491,13 +460,10 @@ export const useGlobe = ({
   // }, [initialMarkerSetIsDone]);
 
   useEffect(() => {
-    console.log('🔄 [GLOBE HOOK] useEffect for map creation - mapRef:', !!mapRef);
 
     if (!mapRef) {
-      console.log('🔄 [GLOBE HOOK] Creating map instance...');
       const instance = createInstance();
       if (instance) {
-        console.log('🔄 [GLOBE HOOK] Map instance created, setting mapRef');
         setMapRef(instance);
         
         // Add comprehensive resize detection for Mapbox GL JS responsiveness
@@ -586,24 +552,15 @@ export const useGlobe = ({
   }, [polygon, mapRef]);
 
   useEffect(() => {
-    console.log('📥 [GLOBE HOOK] allData received:', allData);
-    console.log('📥 [GLOBE HOOK] allData length:', allData?.length);
-    
+
     if (allData) {
       if (allData.length === 0) {
-        console.log('⚠️ [GLOBE HOOK] Empty data array');
         setEmptyStateIsVisible(true);
       } else if (emptyStateIsVisible) {
         setEmptyStateIsVisible(false);
       }
-      
-      console.log('🔍 [GLOBE HOOK] Filtering data with filterValidGPS...');
-      const filteredData = filterValidGPS(allData);
-      console.log('🔍 [GLOBE HOOK] filtered data result:', filteredData);
-      console.log('🔍 [GLOBE HOOK] filtered data length:', filteredData.length);
-      setData(filteredData);
+      setData(filterValidGPS(allData));
     } else {
-      console.log('❌ [GLOBE HOOK] No allData provided');
       setData(null);
     }
   }, [allData, emptyStateIsVisible]);
@@ -634,20 +591,7 @@ export const useGlobe = ({
   }, [user, mapRef, allData]);
 
   useEffect(() => {
-    console.log('🔄 [GLOBE HOOK] useEffect triggered:', { 
-      mapRef: !!mapRef, 
-      data: !!data, 
-      dataLength: data?.length, 
-      initialMarkerSetIsDone, 
-      styleLoaded: mapRef?.isStyleLoaded() 
-    });
-    
-    if (mapRef && data && !initialMarkerSetIsDone) {
-      console.log('🚀 [GLOBE HOOK] Attempting to add markers...');
-      console.log('🚀 [GLOBE HOOK] Style loaded check:', mapRef.isStyleLoaded());
-      
-      // Try to add markers immediately, and if style isn't loaded, 
-      // the addAllDataToMap function will handle it
+    if (mapRef && data && !initialMarkerSetIsDone && mapRef.isStyleLoaded()) {
       setInitialMarkerSetIsDone(true);
       addAllDataToMap();
     }

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

@@ -111,7 +111,7 @@ function Globe({
 	renderSider = null,
 	renderMarker = null,
 	type = "default",
-	showSider = false,
+	showSider = true,
 	filtersConfig,
 	onFilterChange = () => { },
 	isSatellite = false,
@@ -122,29 +122,11 @@ function Globe({
 }) {
 	// Map data to include marker coordinates
 	const mappedData = useMemo(
-		() => {
-			console.log('📊 [GLOBE COMPONENT] Original data received:', data);
-			console.log('📊 [GLOBE COMPONENT] Data length:', data?.length);
-			
-			if (!data || data.length === 0) {
-				console.log('❌ [GLOBE COMPONENT] No data to map');
-				return [];
-			}
-			
-			const mapped = data.map((d, i) => {
-				console.log(`📊 [GLOBE COMPONENT] Mapping item ${i}:`, d);
-				console.log(`📊 [GLOBE COMPONENT] Item ${i} GPS:`, d?.gps);
-				const result = {
-					...d,
-					marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
-				};
-				console.log(`📊 [GLOBE COMPONENT] Item ${i} mapped result:`, result);
-				return result;
-			});
-			
-			console.log('📊 [GLOBE COMPONENT] Final mapped data:', mapped);
-			return mapped;
-		},
+		() =>
+			data.map((d) => ({
+				...d,
+				marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
+			})),
 		[data],
 	);
 

package/src/@daf/core/components/Dashboard/Map/helper.js

@@ -20,6 +20,7 @@ export function useMapHelper({
 	mapCenter,
 	allData,
 	renderTooltip,
+	renderTooltipTags,
 	onClickLink,
 	link,
 	tooltipAsText,
@@ -158,6 +159,7 @@ export function useMapHelper({
 								title: data.name,
 								subTitle: data.type,
 								items: renderTooltip({ ...data, totals }),
+								tags: renderTooltipTags(data),
 								link,
 								total: data.sources,
 								onClickLink: () => onClickLink(data),
@@ -194,6 +196,7 @@ export function useMapHelper({
 							{renderTooltipHtml({
 								title: data.name,
 								items: renderTooltip(data),
+								tags: renderTooltipTags(data),
 								link,
 								total: data.sources,
 								onClickLink: () => onClickLink(data),
@@ -230,6 +233,7 @@ export function useMapHelper({
 							data={data}
 							title={data.name}
 							renderTooltip={renderTooltip}
+							renderTooltipTags={renderTooltipTags}
 							link={link}
 							onClickLink={onClickLink}
 							activeStakeholder={activeStakeholder}
@@ -270,6 +274,7 @@ export function useMapHelper({
 								link,
 								onClickLink: () => onClickLink(data),
 								items: renderTooltip(data),
+								tags: renderTooltipTags(data),
 							})}
 						</>,
 					);
@@ -336,6 +341,7 @@ export function useMapHelper({
 								link,
 								onClickLink: () => onClickLink(data),
 								items: renderTooltip(data),
+								tags: renderTooltipTags(data),
 							})}
 						</>,
 					);
@@ -370,6 +376,7 @@ export function useMapHelper({
 		[
 			mapRef,
 			renderTooltip,
+			renderTooltipTags,
 			tooltipAsText,
 			onClickLink,
 			zoom,

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

@@ -18,6 +18,7 @@ export const useMap = ({
 	polygon,
 	app,
 	renderTooltip,
+	renderTooltipTags,
 	mapConfig,
 	tooltipAsText,
 	renderMarker,
@@ -136,6 +137,7 @@ export const useMap = ({
 		allData,
 		mapCenter,
 		renderTooltip,
+		renderTooltipTags,
 		onClickLink,
 		link,
 		tooltipAsText,

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

@@ -92,180 +92,174 @@ import Filters from "../../Filters/FloatingFilters/index.js";
  */
 
 function Map({
-  isPdf = false,
-  data = [],
-  user = null,
-  app = "sbg",
-  polygon = null,
-  t = (s) => s,
-  onClickLink = () => {},
-  link,
-  siderTitle = "Mine Description",
-  renderTooltip = () => [],
-  mapConfig = {},
-  emptyDescriptionText = "No description provided",
-  tooltipAsText = false,
-  primaryLink = false,
-  renderSider = null,
-  renderMarker = null,
-  type = "default",
-  showSider = true,
-  filtersConfig,
-  onFilterChange = () => {},
-  isSatellite = false,
-  nameAsSiderTitle = false,
+	isPdf = false,
+	data = [],
+	user = null,
+	app = "sbg",
+	polygon = null,
+	t = (s) => s,
+	onClickLink = () => {},
+	link,
+	siderTitle = "Mine Description",
+	renderTooltip = () => [],
+	renderTooltipTags = () => {},
+	mapConfig = {},
+	emptyDescriptionText = "No description provided",
+	tooltipAsText = false,
+	primaryLink = false,
+	renderSider = null,
+	renderMarker = null,
+	type = "default",
+	showSider = true,
+	filtersConfig,
+	onFilterChange = () => {},
+	isSatellite = false,
+	nameAsSiderTitle = false,
 }) {
-  // Map data to include marker coordinates
-  const mappedData = useMemo(
-    () =>
-      data.map((d) => ({
-        ...d,
-        marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
-      })),
-    [data]
-  );
+	// Map data to include marker coordinates
+	const mappedData = useMemo(
+		() =>
+			data.map((d) => ({
+				...d,
+				marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
+			})),
+		[data],
+	);
 
-  // Use custom hook to configure map functionality
-  const { container, activeMarker, mapOptionsButtonsConfig } = useMap({
-    data: mappedData,
-    user,
-    polygon,
-    t,
-    app,
-    renderTooltip,
-    onClickLink,
-    link,
-    mapConfig,
-    tooltipAsText,
-    renderMarker,
-    type,
-    isSatellite,
-  });
+	// Use custom hook to configure map functionality
+	const { container, activeMarker, mapOptionsButtonsConfig } = useMap({
+		data: mappedData,
+		user,
+		polygon,
+		t,
+		app,
+		renderTooltip,
+    renderTooltipTags,
+		onClickLink,
+		link,
+		mapConfig,
+		tooltipAsText,
+		renderMarker,
+		type,
+		isSatellite,
+	});
 
-  return (
-    <ComponentWithFocus>
-      <Style
-        className={formatClassname([showSider && activeMarker && "with-sider"])}
-      >
-        {filtersConfig ? (
-          <Filters
-            t={t}
-            filtersConfig={filtersConfig}
-            onFilterChange={onFilterChange}
-          />
-        ) : null}
+	return (
+		<ComponentWithFocus>
+			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>
+				{filtersConfig ? (
+					<Filters t={t} filtersConfig={filtersConfig} onFilterChange={onFilterChange} />
+				) : null}
 
-        {/* Map container */}
-        <div
-          id="map"
-          className={tooltipAsText ? "tooltip-text" : "tooltip-daf"}
-          ref={container}
-        />
-        {/* Control buttons */}
-        {isPdf ? null : (
-          <div className="map-control-buttons">
-            {mapOptionsButtonsConfig.map((c, i) => (
-              <button onClick={c.handler} key={i.toString()}>
-                {c.icon}
-              </button>
-            ))}
-          </div>
-        )}
-        {/* Sidebar for active marker */}
-        {activeMarker && showSider ? (
-          <div className="sider">
-            <div className="sider-header flex">
-              <div className="flex flex-column justify-center">
-                <h2>
-                  {nameAsSiderTitle ? activeMarker.data.name : t(siderTitle)}
-                </h2>
-              </div>
-              <div className="flex flex-column justify-center">
-                <Button
-                  type={primaryLink ? "primary" : "default"}
-                  size="sm"
-                  onClick={() => onClickLink(activeMarker.data)}
-                >
-                  <CustomIcon
-                    name="ArrowUpRight"
-                    width={20}
-                    height={20}
-                    color={primaryLink ? "white" : "#6C737F"}
-                  />
-                </Button>
-              </div>
-            </div>
+				{/* Map container */}
+				<div
+					id="map"
+					className={tooltipAsText ? "tooltip-text" : "tooltip-daf"}
+					ref={container}
+				/>
+				{/* Control buttons */}
+				{isPdf ? null : (
+					<div className="map-control-buttons">
+						{mapOptionsButtonsConfig.map((c, i) => (
+							<button onClick={c.handler} key={i.toString()}>
+								{c.icon}
+							</button>
+						))}
+					</div>
+				)}
+				{/* Sidebar for active marker */}
+				{activeMarker && showSider ? (
+					<div className="sider">
+						<div className="sider-header flex">
+							<div className="flex flex-column justify-center">
+								<h2>{nameAsSiderTitle ? activeMarker.data.name : t(siderTitle)}</h2>
+							</div>
+							<div className="flex flex-column justify-center">
+								<Button
+									type={primaryLink ? "primary" : "default"}
+									size="sm"
+									onClick={() => onClickLink(activeMarker.data)}
+								>
+									<CustomIcon
+										name="ArrowUpRight"
+										width={20}
+										height={20}
+										color={primaryLink ? "white" : "#6C737F"}
+									/>
+								</Button>
+							</div>
+						</div>
 
-            {/* Render custom sider or default content */}
-            {typeof renderSider === "function" ? (
-              <div className="sider-body">{renderSider(activeMarker)}</div>
-            ) : (
-              <div className="sider-body">
-                {/* Documents Carousel */}
-                {activeMarker?.data?.documents?.length ? (
-                  <Carousel className="carousel">
-                    {activeMarker.data.documents.map((v, i) => (
-                      <div key={i}>
-                        <Image height={169} width="100%" src={v.url} />
-                      </div>
-                    ))}
-                  </Carousel>
-                ) : (
-                  <div className="placeholder flex justify-center">
-                    <div className="flex flex-column justify-center">
-                      <svg
-                        width="106"
-                        height="94"
-                        viewBox="0 0 106 94"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M88.0001 92.165H93.0519C97.9078 92.165 100.336 92.165 101.674 91.1525C102.84 90.2705 103.561 88.9224 103.649 87.463C103.749 85.7878 102.402 83.7676 99.7083 79.7274L84.6565 57.1496C82.4309 53.8111 81.318 52.1419 79.9154 51.5603C78.6892 51.0517 77.311 51.0517 76.0847 51.5603C74.6821 52.1419 73.5693 53.8111 71.3437 57.1496L67.6227 62.731M88.0001 92.165L49.5776 36.6659C47.3679 33.4741 46.2631 31.8782 44.883 31.3172C43.6757 30.8264 42.3245 30.8264 41.1172 31.3172C39.7371 31.8782 38.6323 33.4741 36.4225 36.6659L6.69109 79.6113C3.87596 83.6776 2.46839 85.7108 2.54853 87.4017C2.61832 88.8743 3.33442 90.241 4.50545 91.1366C5.8501 92.165 8.32294 92.165 13.2686 92.165H88.0001ZM98.0001 17.165C98.0001 25.4492 91.2843 32.165 83.0001 32.165C74.7158 32.165 68.0001 25.4492 68.0001 17.165C68.0001 8.88071 74.7158 2.16498 83.0001 2.16498C91.2843 2.16498 98.0001 8.88071 98.0001 17.165Z"
-                          stroke="#F3F4F6"
-                          strokeWidth="3.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                )}
+						{/* Render custom sider or default content */}
+						{typeof renderSider === "function" ? (
+							<div className="sider-body">{renderSider(activeMarker)}</div>
+						) : (
+							<div className="sider-body">
+								{/* Documents Carousel */}
+								{activeMarker?.data?.documents?.length ? (
+									<Carousel className="carousel">
+										{activeMarker.data.documents.map((v, i) => (
+											<div key={i}>
+												<Image height={169} width="100%" src={v.url} />
+											</div>
+										))}
+									</Carousel>
+								) : (
+									<div className="placeholder flex justify-center">
+										<div className="flex flex-column justify-center">
+											<svg
+												width="106"
+												height="94"
+												viewBox="0 0 106 94"
+												fill="none"
+												xmlns="http://www.w3.org/2000/svg"
+											>
+												<path
+													d="M88.0001 92.165H93.0519C97.9078 92.165 100.336 92.165 101.674 91.1525C102.84 90.2705 103.561 88.9224 103.649 87.463C103.749 85.7878 102.402 83.7676 99.7083 79.7274L84.6565 57.1496C82.4309 53.8111 81.318 52.1419 79.9154 51.5603C78.6892 51.0517 77.311 51.0517 76.0847 51.5603C74.6821 52.1419 73.5693 53.8111 71.3437 57.1496L67.6227 62.731M88.0001 92.165L49.5776 36.6659C47.3679 33.4741 46.2631 31.8782 44.883 31.3172C43.6757 30.8264 42.3245 30.8264 41.1172 31.3172C39.7371 31.8782 38.6323 33.4741 36.4225 36.6659L6.69109 79.6113C3.87596 83.6776 2.46839 85.7108 2.54853 87.4017C2.61832 88.8743 3.33442 90.241 4.50545 91.1366C5.8501 92.165 8.32294 92.165 13.2686 92.165H88.0001ZM98.0001 17.165C98.0001 25.4492 91.2843 32.165 83.0001 32.165C74.7158 32.165 68.0001 25.4492 68.0001 17.165C68.0001 8.88071 74.7158 2.16498 83.0001 2.16498C91.2843 2.16498 98.0001 8.88071 98.0001 17.165Z"
+													stroke="#F3F4F6"
+													strokeWidth="3.5"
+													strokeLinecap="round"
+													strokeLinejoin="round"
+												/>
+											</svg>
+										</div>
+									</div>
+								)}
 
-                <div className="p-cont">
-                  <p className="mt-4">
-                    {activeMarker?.data?.description || t(emptyDescriptionText)}
-                  </p>
-                </div>
-              </div>
-            )}
-          </div>
-        ) : null}
-      </Style>
-    </ComponentWithFocus>
-  );
+								<div className="p-cont">
+									<p className="mt-4">
+										{activeMarker?.data?.description || t(emptyDescriptionText)}
+									</p>
+								</div>
+							</div>
+						)}
+					</div>
+				) : null}
+			</Style>
+		</ComponentWithFocus>
+	);
 }
 
 Map.propTypes = {
-  data: PropTypes.object,
-  user: PropTypes.any,
-  app: PropTypes.string,
-  polygon: PropTypes.any,
-  t: PropTypes.func,
-  onClickLink: PropTypes.func,
-  siderTitle: PropTypes.string,
-  emptyDescriptionText: PropTypes.string,
-  isPdf: PropTypes.any,
-  mapConfig: PropTypes.any,
-  tooltipAsText: PropTypes.any,
-  primaryLink: PropTypes.any,
-  renderSider: PropTypes.any,
-  renderMarker: PropTypes.any,
-  type: PropTypes.any,
-  showSider: PropTypes.any,
-  filtersConfig: PropTypes.any,
-  onFilterChange: PropTypes.any,
-  nameAsSiderTitle: PropTypes.bool,
+	data: PropTypes.object,
+	user: PropTypes.any,
+	app: PropTypes.string,
+	polygon: PropTypes.any,
+	t: PropTypes.func,
+	onClickLink: PropTypes.func,
+	siderTitle: PropTypes.string,
+	emptyDescriptionText: PropTypes.string,
+	isPdf: PropTypes.any,
+	mapConfig: PropTypes.any,
+	tooltipAsText: PropTypes.any,
+	primaryLink: PropTypes.any,
+	renderSider: PropTypes.any,
+	renderMarker: PropTypes.any,
+	type: PropTypes.any,
+	showSider: PropTypes.any,
+	filtersConfig: PropTypes.any,
+	onFilterChange: PropTypes.any,
+	nameAsSiderTitle: PropTypes.bool,
 };
 
 export default Map;

package/src/@daf/core/components/Dashboard/Map/storyConfig3.js

@@ -111,4 +111,10 @@ export const storyConfig = {
 			},
 		];
 	},
+	renderTooltipTags: () => {
+		return {
+			label: "Species",
+			items: [{ label: "Label 1", color: "red" }, { label: "Label 6" }],
+		};
+	},
 };