datastake-daf 0.6.780 → 0.6.782

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/dist/utils/index.js

@@ -7211,17 +7211,6 @@ function convertUndefinedToNull(obj) {
   }
   return obj;
 }
-const removeKeysFromObject = (obj = {}, keys = []) => {
-  if (typeof obj !== 'object' || obj === null) return obj;
-  const result = {};
-  for (const key of Object.keys(obj)) {
-    if (!keys.includes(key)) {
-      result[key] = obj[key];
-    }
-  }
-  return result;
-};
-const hasKeyInObject = (obj, key) => Object.keys(obj || {}).includes(key);
 
 ({
   t: PropTypes__default["default"].func,
@@ -14946,7 +14935,6 @@ exports.handleError = handleError;
 exports.handleInfo = handleInfo;
 exports.handleSuccess = handleSuccess;
 exports.handleWarning = handleWarning;
-exports.hasKeyInObject = hasKeyInObject;
 exports.hasNotChanged = hasNotChanged;
 exports.isEmptyOrSpaces = isEmptyOrSpaces;
 exports.isModuleApproved = isModuleApproved;
@@ -14962,7 +14950,6 @@ exports.modules = modules;
 exports.nowToIso = nowToIso;
 exports.processConfig = processConfig;
 exports.propHasValue = propHasValue;
-exports.removeKeysFromObject = removeKeysFromObject;
 exports.renderBreadCrumbs = renderBreadCrumbs;
 exports.renderDateFormatted = renderDateFormatted;
 exports.renderNumber = renderNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.780",
+	"version": "0.6.782",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Map/ChainIcon/Markers/StakeholderMarker.js

@@ -88,10 +88,6 @@ export default function StakeholderIcon({
 	}, [parentId, allData]);
 
 	useEffect(() => {
-		if (selectedMarkersId.length === 0 || !isSelected) {
-			return;
-		}
-
 		linkNodesData.map((node) => {
 			const isConnectingToStakeholder = node.isStakeholder;
 			const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
@@ -105,6 +101,13 @@ export default function StakeholderIcon({
 			const stakeholderLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
 			let endLatLng = L.latLng(node.gps.latitude, node.gps.longitude);
 
+			const areNextToEachOther =
+				targetMarkerIndex === index + 1 ||
+				targetMarkerIndex === index - 1 ||
+				(index === 0 && targetMarkerIndex === node.totalStakeholders - 1) ||
+				(targetMarkerIndex === 0 && index === node.totalStakeholders - 1);
+			const areOnlyTwoSiblings = node.totalStakeholders === 2;
+
 			if (isExtraSmallMarker(zoom) && !isForceOpen) {
 				createPolyline({
 					L,
@@ -115,7 +118,6 @@ export default function StakeholderIcon({
 					isSelected,
 					id,
 					listOfPolylines: polylinesRef.current,
-					animated: true,
 				});
 				return;
 			}
@@ -135,8 +137,75 @@ export default function StakeholderIcon({
 					y + nodePoint.y + center.top,
 				);
 				endLatLng = mapRef.layerPointToLatLng(endPoint);
+
+				if (isSibling && (!areNextToEachOther || areOnlyTwoSiblings)) {
+					if (areOnlyTwoSiblings) {
+						buildCurveWIthTwoSiblings({
+							mapRef,
+							startLatLng: stakeholderLatLng,
+							endLatLng,
+							zoom,
+							isSelected,
+							id,
+						});
+						return;
+					}
+
+					const total = node.totalStakeholders;
+					let from = index;
+					let to = targetMarkerIndex;
+					let flip = false;
+
+					const forwardDistance = (to - from + total) % total;
+					const backwardDistance = (from - to + total) % total;
+
+					if (backwardDistance < forwardDistance) {
+						[from, to] = [to, from];
+						flip = true;
+					}
+
+					const intermediateIndices = [];
+					for (let i = 1; i < (to - from + total) % total; i++) {
+						intermediateIndices.push((from + i) % total);
+					}
+
+					const indices = [from, ...intermediateIndices, to];
+
+					const intermediatePoints = [];
+
+					for (const i of indices) {
+						const { x, y } = createCurvePath({
+							zoom,
+							totalMarkers: node.totalStakeholders,
+							markerIndex: i,
+						});
+
+						const point = centerPoint.add(L.point(x, y));
+						const latlng = mapRef.layerPointToLatLng(point);
+						intermediatePoints.push(latlng);
+					}
+
+					const latlngs = flip
+						? [endLatLng, ...intermediatePoints, stakeholderLatLng]
+						: [stakeholderLatLng, ...intermediatePoints, endLatLng];
+
+					const layerPoints = latlngs.map((latlng) => mapRef.latLngToLayerPoint(latlng));
+
+					const path = buildSmoothCurve(layerPoints, mapRef, flip);
+
+					const curve = L?.curve?.(path, {
+						color: "var(--base-gray-70)",
+						weight: isExtraSmallMarker(zoom) ? 0 : 1,
+						opacity: isSelected ? 1 : 0.5,
+						smoothFactor: 1,
+						id,
+					});
+
+					mapRef.addLayer(curve);
+					return;
+				}
 			}
-			// Always use straight lines
+
 			createPolyline({
 				L,
 				mapRef,
@@ -147,10 +216,9 @@ export default function StakeholderIcon({
 				isSelected,
 				id,
 				listOfPolylines: polylinesRef.current,
-				animated: true,
 			});
 		});
-	}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen, selectedMarkersId]);
+	}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
 
 	return (
 		<>
@@ -165,7 +233,6 @@ export default function StakeholderIcon({
 					onClickLink: () => {
 						onClickLink(data);
 					},
-					isNewTab: true,
 				})}
 				getPopupContainer={(triggerNode) => {
 					const mapElement = document.getElementById("map");

package/src/@daf/core/components/Dashboard/Map/ChainIcon/index.js

@@ -48,7 +48,6 @@ export default function LocationIcon({
 		const nodes = [];
 		const links = data.links || [];
 
-		// Add links from the location itself
 		links.forEach((link) => {
 			allData.forEach((d) => {
 				if (d.datastakeId === link) {
@@ -69,49 +68,8 @@ export default function LocationIcon({
 			});
 		});
 
-		// ADD: Also include links from this location's stakeholders
-		const stakeholders = data.stakeholders || [];
-		stakeholders.forEach((stakeholder) => {
-			const stakeholderLinks = stakeholder.links || [];
-			stakeholderLinks.forEach((link) => {
-				allData.forEach((d) => {
-					// Check if it's a direct location link
-					if (d.datastakeId === link) {
-						// Avoid duplicates
-						if (!nodes.find(n => n.datastakeId === link && !n.isStakeholder)) {
-							nodes.push({
-								...d,
-								fromStakeholderId: stakeholder.datastakeId,
-							});
-						}
-					}
-					// Check if it's a stakeholder link
-					if (d.stakeholders && d.stakeholders.length > 0) {
-						d.stakeholders.forEach((targetStakeholder) => {
-							if (targetStakeholder.datastakeId === link) {
-								// Avoid duplicates
-								if (!nodes.find(n => 
-									n.isStakeholder && 
-									n.datastakeId === d.datastakeId && 
-									n.stakeholdersIndex === d.stakeholders.indexOf(targetStakeholder)
-								)) {
-									nodes.push({
-										...d,
-										isStakeholder: true,
-										totalStakeholders: d.stakeholders.length,
-										stakeholdersIndex: d.stakeholders.indexOf(targetStakeholder),
-										fromStakeholderId: stakeholder.datastakeId,
-									});
-								}
-							}
-						});
-					}
-				});
-			});
-		});
-
 		return nodes;
-	}, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
+	}, [JSON.stringify(allData), JSON.stringify(data.links), zoom]);
 
 	const stakeholdersOfLocation = useMemo(() => {
 		return data?.stakeholders || [];
@@ -132,16 +90,7 @@ export default function LocationIcon({
 		currentRoots.clear();
 		markersRef.current = [];
 
-		// Only create stakeholder markers if this location or any of its stakeholders are selected
-		const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => 
-			selectedMarkersId.includes(stk.datastakeId)
-		);
-
-		if (!shouldShowStakeholders || selectedMarkersId.length === 0) {
-			return;
-		}
-
-		// Create new markers only when selected
+		// Create new markers
 		stakeholdersOfLocation.forEach((stakeholder, index) => {
 			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
@@ -235,8 +184,6 @@ export default function LocationIcon({
 				isFromStakeholder: true,
 				isForceOpen,
 				listOfPolylines: polylinesRef.current,
-				stakeholderType: stakeholder.type,
-				animated: true,                     
 			});
 		});
 
@@ -252,67 +199,12 @@ export default function LocationIcon({
 			rootsMapRef.current.clear();
 			markersRef.current = [];
 		};
-	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
+	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
 
-// Only create polylines for linked nodes when something is selected
-useEffect(() => {
-	if (selectedMarkersId.length === 0) {
-		return;
-	}
-
-	// IMPORTANT: Only draw links if this location is actually selected
-	// Not just highlighted as part of the chain
-	if (!isSelected) {
-		return;
-	}
-
-	// Filter linkedNodesData to only include nodes that are in the selected chain
-	const relevantLinks = linkedNodesData.filter(node => {
-		// Check if the target node (location) is in the selected markers
-		const targetLocationInSelection = selectedMarkersId.includes(node.datastakeId);
-		
-		// If connecting to a stakeholder, check if that stakeholder is selected
-		if (node.isStakeholder) {
-			const stakeholderInSelection = node.stakeholdersIndex !== undefined && 
-				selectedMarkersId.includes(node.datastakeId);
-			return stakeholderInSelection;
-		}
-		
-		return targetLocationInSelection;
-	});
-
-	relevantLinks.forEach((node) => {
-		const id = node.fromStakeholderId 
-			? `${node.fromStakeholderId}-${node.datastakeId}` 
-			: `${data.datastakeId}-${node.datastakeId}`;
+	linkedNodesData.map((node) => {
+		const id = `${data.datastakeId}-${node.datastakeId}`;
 		const isConnectingToStakeholder = node.isStakeholder;
-		
-		// If the link is from a stakeholder, start from the stakeholder position
-		let startLatLng;
-		if (node.fromStakeholderId) {
-			// Find the stakeholder index in this location's stakeholders
-			const stakeholderIndex = stakeholdersOfLocation.findIndex(
-				s => s.datastakeId === node.fromStakeholderId
-			);
-			
-			if (stakeholderIndex !== -1) {
-				const { x, y } = getStakeholderPosition({
-					zoom,
-					totalMarkers: stakeholdersOfLocation.length,
-					markerIndex: stakeholderIndex,
-				});
-				
-				const centerLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
-				const centerPoint = mapRef.latLngToLayerPoint(centerLatLng);
-				const stakeholderPoint = centerPoint.add(L.point(x, y));
-				startLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
-			} else {
-				startLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
-			}
-		} else {
-			startLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
-		}
-		
+		const centerLatLng = L.latLng(data.gps.latitude, data.gps.longitude);
 		let endLatLng = L.latLng(node.gps.latitude, node.gps.longitude);
 		const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
 
@@ -333,15 +225,15 @@ useEffect(() => {
 		createPolyline({
 			L,
 			mapRef,
-			startLatLng,
+			startLatLng: centerLatLng,
 			endLatLng,
+
 			isSelected: isConnectingToStakeholderSelected,
 			id,
 			zoom,
 			listOfPolylines: polylinesRef.current,
 		});
 	});
-}, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
 
 	return (
 		<Popover