@abdellatifui/react 3.1.89 → 3.1.91

package/dist/nextgen.js

@@ -12441,17 +12441,14 @@ const Sidebar = forwardRef((props, ref) => {
     }
   } = props;
   const content = useMemo(() => {
-    if (children) {
-      return children;
-    }
-    return null;
+    return children ? children : null;
   }, [children]);
   const handleOpen = useCallback(() => {
     var _a;
     (_a = modelRef.current) == null ? void 0 : _a.open();
-    window.setTimeout(() => {
+    setTimeout(() => {
       setIsOpen(true);
-    }, 200);
+    }, 50);
   }, []);
   const handleClose = useCallback(() => {
     var _a;
@@ -12725,13 +12722,13 @@ const LazyContainer = (props) => {
   ) });
 };
 const hex2rgb = (hex) => {
-  let hexValue = hex.startsWith("#") ? hex.slice(1) : hex;
-  if (hexValue.length === 3) {
+  let hexValue = (hex == null ? void 0 : hex.startsWith("#")) ? hex == null ? void 0 : hex.slice(1) : hex;
+  if ((hexValue == null ? void 0 : hexValue.length) === 3) {
     hexValue = hexValue.split("").map((char2) => char2 + char2).join("");
   }
-  const r2 = parseInt(hexValue.substring(0, 2), 16);
-  const g = parseInt(hexValue.substring(2, 4), 16);
-  const b = parseInt(hexValue.substring(4, 6), 16);
+  const r2 = parseInt(hexValue == null ? void 0 : hexValue.substring(0, 2), 16);
+  const g = parseInt(hexValue == null ? void 0 : hexValue.substring(2, 4), 16);
+  const b = parseInt(hexValue == null ? void 0 : hexValue.substring(4, 6), 16);
   return [r2, g, b];
 };
 const createDefaultNodeTempate = (params) => {
@@ -14147,11 +14144,19 @@ const useCreatePath = ({ connections = [], mapApi, options: options2, selectedCo
   const [currentTime, setTime] = useState(0);
   const loopLength = 20;
   const animationSpeed = 5;
-  const layer0conns = useMemo(() => {
-    return connections == null ? void 0 : connections.filter((item) => (item == null ? void 0 : item.layer) == 0);
-  }, [
-    connections
-  ]);
+  const layer0conns = useMemo(
+    () => {
+      var _a;
+      const seen = /* @__PURE__ */ new Set();
+      const f0 = (_a = connections == null ? void 0 : connections.filter((item) => (item == null ? void 0 : item.layer) === 0)) == null ? void 0 : _a.filter((item) => {
+        if (seen.has(item.sourcesId)) return false;
+        seen.add(item.sourcesId);
+        return true;
+      });
+      return f0;
+    },
+    [connections]
+  );
   const layer1conns = useMemo(() => {
     console.log("layer1conns", connections);
     const a = connections == null ? void 0 : connections.filter((item) => (item == null ? void 0 : item.layer) == 1);
@@ -14285,7 +14290,8 @@ const CustomMarker = (props) => {
     latitude,
     children,
     offset = [0, 0],
-    markerProps = {}
+    markerProps = {},
+    style: style2 = {}
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Marker,
@@ -14294,7 +14300,8 @@ const CustomMarker = (props) => {
       latitude,
       anchor: "center",
       style: {
-        zIndex: 30
+        zIndex: 30,
+        ...style2
       },
       offset,
       children
@@ -14337,7 +14344,8 @@ const LinkCountCircule = (props) => {
     mapApi,
     mapZooming,
     getCenterBox,
-    hoveredConnection
+    hoveredConnection,
+    draggingMode: draggingMode2
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14364,6 +14372,9 @@ const LinkCountCircule = (props) => {
     {
       longitude: midpoint == null ? void 0 : midpoint.lng,
       latitude: midpoint == null ? void 0 : midpoint.lat,
+      style: {
+        opacity: draggingMode2 ? 0 : 1
+      },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ConnectionBadge,
         {
@@ -14411,7 +14422,10 @@ const LinkOverContainer = (props) => {
       onMouseLeave: () => {
         setElement(null);
       },
-      className: "absolute z-30 pointer-events-auto",
+      className: cn(
+        "absolute z-30 pointer-events-auto",
+        draggingMode && "hidden"
+      ),
       style: {
         transform: "translate(-50%, -50%)",
         left: position2[0],
@@ -14422,20 +14436,23 @@ const LinkOverContainer = (props) => {
   );
 };
 const PortText = (props) => {
+  var _a;
   const ref = useRef(null);
   const {
     text,
     rotation,
     isVisible,
     data,
-    isFocused
+    isFocused,
+    fontSize,
+    isSource
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref,
       className: cn(
-        "w-fit h-fit font-geist text-xs z-[300] rounded-full text-accent px-1 cursor-default pointer-events-all hover:!scale-[1.5] transition-all duration-300",
+        "w-fit h-fit font-geist space-y-1 text-xs z-[300] rounded-full text-accent px-1 cursor-default pointer-events-all hover:!scale-[1.5] transition-all duration-300",
         isFocused && "!scale-[1.5]"
       ),
       style: {
@@ -14445,21 +14462,29 @@ const PortText = (props) => {
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: data == null ? void 0 : data.linkColorHex,
-        opacity: isVisible ? 1 : 0
+        opacity: isVisible ? 1 : 0,
+        fontSize: fontSize + "rem"
       },
-      children: text
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: (_a = data == null ? void 0 : data.linksGroup) == null ? void 0 : _a.map((item) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
+          "px-2 bg-black/20 rounded-full "
+        ), children: (item == null ? void 0 : item.isSource) ? item == null ? void 0 : item.sourcePort : item == null ? void 0 : item.destinationPort }, "txtport-" + (item == null ? void 0 : item.u_id));
+      }) })
     }
   );
 };
 const SourcesPorts = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  var _a, _b, _c, _d;
   const {
     data,
     mapApi,
     currentZoomLevel,
     hoveredConnection,
     mapDragging,
-    getEndpointText
+    getEndpointText,
+    mapRotating,
+    fontSize,
+    draggingMode: draggingMode2
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14472,6 +14497,10 @@ const SourcesPorts = (props) => {
       setIsVisible(false);
       return;
     } else {
+      if (mapDragging) {
+        setIsVisible(false);
+        return;
+      }
       setIsVisible(true);
     }
     if (currentZoomLevel < 5) {
@@ -14480,8 +14509,14 @@ const SourcesPorts = (props) => {
     } else if (currentZoomLevel > 6) {
       setIsVisible(true);
     }
-  }, [currentZoomLevel]);
+  }, [currentZoomLevel, mapDragging]);
   useEffect(() => {
+    if (draggingMode2) {
+      setIsVisible(false);
+      return;
+    } else {
+      setIsVisible(true);
+    }
     if (!hoveredConnection) {
       setIsVisible(true);
       setIsFocused(false);
@@ -14494,25 +14529,9 @@ const SourcesPorts = (props) => {
       setIsVisible(false);
       setIsFocused(false);
     }
-  }, [hoveredConnection == null ? void 0 : hoveredConnection.u_id, data == null ? void 0 : data.u_id, currentZoomLevel]);
-  useEffect(() => {
-    const map = mapApi == null ? void 0 : mapApi.current;
-    if (!map) return;
-    const onMove = () => setViewportRevision((v) => v + 1);
-    map.on("move", onMove);
-    map.on("zoom", onMove);
-    map.on("rotate", onMove);
-    return () => {
-      try {
-        map.off("move", onMove);
-        map.off("zoom", onMove);
-        map.off("rotate", onMove);
-      } catch (e) {
-      }
-    };
-  }, [mapApi == null ? void 0 : mapApi.current]);
+  }, [hoveredConnection == null ? void 0 : hoveredConnection.u_id, data == null ? void 0 : data.u_id, currentZoomLevel, draggingMode2]);
   const sourceLabel = useMemo(() => {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e, _f;
     try {
       const map = mapApi == null ? void 0 : mapApi.current;
       if (!map || !(data == null ? void 0 : data.source) || !(data == null ? void 0 : data.destination)) return null;
@@ -14525,7 +14544,7 @@ const SourcesPorts = (props) => {
       const uy = dy / length2;
       const nx = -uy;
       const ny = ux;
-      const markerHalfSize = ((_e2 = data == null ? void 0 : data.source) == null ? void 0 : _e2.markerSize) ? ((_f2 = data == null ? void 0 : data.source) == null ? void 0 : _f2.markerSize) / 2 : 12;
+      const markerHalfSize = ((_e = data == null ? void 0 : data.source) == null ? void 0 : _e.markerSize) ? ((_f = data == null ? void 0 : data.source) == null ? void 0 : _f.markerSize) / 2 : 12;
       const totalLength = length2;
       const defaultOffset = { along: 100, perpendicular: 0 };
       const customOffset = (data == null ? void 0 : data.sourcePortOffset) || {};
@@ -14547,9 +14566,9 @@ const SourcesPorts = (props) => {
     } catch (e) {
       return null;
     }
-  }, [mapApi == null ? void 0 : mapApi.current, (_a = data == null ? void 0 : data.source) == null ? void 0 : _a.lat, (_b = data == null ? void 0 : data.source) == null ? void 0 : _b.lng, (_c = data == null ? void 0 : data.destination) == null ? void 0 : _c.lat, (_d = data == null ? void 0 : data.destination) == null ? void 0 : _d.lng, (_e = data == null ? void 0 : data.sourcePortOffset) == null ? void 0 : _e.along, (_f = data == null ? void 0 : data.sourcePortOffset) == null ? void 0 : _f.perpendicular, viewportRevision, currentZoomLevel]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel, draggingMode2]);
   const destinationLabel = useMemo(() => {
-    var _a2, _b2, _c2, _d2, _e2, _f2;
+    var _a2, _b2, _c2, _d2, _e, _f;
     try {
       const map = mapApi == null ? void 0 : mapApi.current;
       if (!map || !(data == null ? void 0 : data.source) || !(data == null ? void 0 : data.destination)) return null;
@@ -14562,7 +14581,7 @@ const SourcesPorts = (props) => {
       const uy = dy / length2;
       const nx = -uy;
       const ny = ux;
-      const markerHalfSize = ((_e2 = data == null ? void 0 : data.destination) == null ? void 0 : _e2.markerSize) ? ((_f2 = data == null ? void 0 : data.destination) == null ? void 0 : _f2.markerSize) / 2 : 12;
+      const markerHalfSize = ((_e = data == null ? void 0 : data.destination) == null ? void 0 : _e.markerSize) ? ((_f = data == null ? void 0 : data.destination) == null ? void 0 : _f.markerSize) / 2 : 12;
       const totalLength = length2;
       const defaultOffset = { along: 100, perpendicular: 0 };
       const customOffset = (data == null ? void 0 : data.destinationPortOffset) || {};
@@ -14584,20 +14603,23 @@ const SourcesPorts = (props) => {
     } catch (e) {
       return null;
     }
-  }, [mapApi == null ? void 0 : mapApi.current, (_g = data == null ? void 0 : data.source) == null ? void 0 : _g.lat, (_h = data == null ? void 0 : data.source) == null ? void 0 : _h.lng, (_i = data == null ? void 0 : data.destination) == null ? void 0 : _i.lat, (_j = data == null ? void 0 : data.destination) == null ? void 0 : _j.lng, (_k = data == null ? void 0 : data.destinationPortOffset) == null ? void 0 : _k.along, (_l = data == null ? void 0 : data.destinationPortOffset) == null ? void 0 : _l.perpendicular, viewportRevision, currentZoomLevel]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel, draggingMode2]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     sourceLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
       CustomMarker$1,
       {
-        longitude: (_m = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _m.lng,
-        latitude: (_n = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _n.lat,
+        longitude: (_a = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _a.lng,
+        latitude: (_b = sourceLabel == null ? void 0 : sourceLabel.position) == null ? void 0 : _b.lat,
         offset: [0, 0],
         children: getEndpointText ? getEndpointText({
           ...data,
           rotation: sourceLabel == null ? void 0 : sourceLabel.rotation,
           isVisible,
           text: data == null ? void 0 : data.sourcePort,
-          isFocused
+          isFocused,
+          fontSize,
+          isSource: true,
+          draggingMode: draggingMode2
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14605,7 +14627,9 @@ const SourcesPorts = (props) => {
             rotation: sourceLabel == null ? void 0 : sourceLabel.rotation,
             isVisible,
             data,
-            isFocused
+            isFocused,
+            fontSize,
+            isSource: true
           }
         )
       }
@@ -14613,15 +14637,18 @@ const SourcesPorts = (props) => {
     destinationLabel && (data == null ? void 0 : data.destinationPort) && /* @__PURE__ */ jsxRuntimeExports.jsx(
       CustomMarker$1,
       {
-        longitude: (_o = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _o.lng,
-        latitude: (_p = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _p.lat,
+        longitude: (_c = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _c.lng,
+        latitude: (_d = destinationLabel == null ? void 0 : destinationLabel.position) == null ? void 0 : _d.lat,
         offset: [0, 0],
         children: getEndpointText ? getEndpointText({
           ...data,
           rotation: destinationLabel == null ? void 0 : destinationLabel.rotation,
           isVisible,
           text: data == null ? void 0 : data.destinationPort,
-          isFocused
+          isFocused,
+          fontSize,
+          isSource: false,
+          draggingMode: draggingMode2
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14630,7 +14657,9 @@ const SourcesPorts = (props) => {
             isVisible,
             data,
             getEndpointText,
-            isFocused
+            isFocused,
+            fontSize,
+            isSource: false
           }
         )
       }
@@ -14638,6 +14667,7 @@ const SourcesPorts = (props) => {
   ] });
 };
 const SourcesPorts$1 = memo(SourcesPorts);
+const baseFont = 0.75;
 const mapStyles = [
   { "name": "street1", url: "https://api.maptiler.com/maps/streets/style.json?key=4s1cX8zNpChcrWFsQqbP" },
   { "name": "street2", url: "https://api.maptiler.com/maps/streets-v2/style.json?key=4s1cX8zNpChcrWFsQqbP" },
@@ -14658,14 +14688,20 @@ function DeckGLOverlay(props) {
 const NetworkMapComponent = forwardRef((props, ref) => {
   const {
     nodes = [],
+    initialZoomLevel = 6,
     connections = [],
     linkHighlightedColorHex = "#ffffff",
     defaultLinkColorHex = "#1d6591",
     defaultAnimationLinkColor = "#f0f3f5",
     hideLinksOnDrag = false,
+    MapLogo,
+    boundMargin = 0.5,
+    MapLogoClassName,
+    MapLogoStyle,
     linkAnimation = true,
     onConnClick = () => {
     },
+    onConnection,
     onNodeClick = () => {
     },
     getEndpointText,
@@ -14688,7 +14724,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     hideLinks = false,
     getCenterBox,
     enableLngLatBox = true,
-    draggingMode = false,
+    draggingMode: draggingMode2 = false,
     mapProps = {},
     menuItems = [],
     nodeMenuItems = [],
@@ -14701,6 +14737,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     className = ""
   } = props;
   const networkMapRef = useRef();
+  const mapId = useGeneratedId(4, true, false);
   const mapApi = useRef({});
   useRef();
   const [currentCoordinates, setCurrentCoordinates] = useState([]);
@@ -14716,10 +14753,11 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   const [hoveredNode, setHoveredNode] = useState({});
   const [mapZooming, setMapZooming] = useState(false);
   const [startLinkCounterRerender, setStartLinkCounterRerender] = useState(false);
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(6);
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(initialZoomLevel);
   const [mapRotating, setMapRotating] = useState();
   const [inViewNodes, setInViewNodes] = useState([]);
   const [inViewConnections, setInViewConnections] = useState([]);
+  const [hasInternet, setHasInternet] = useState(true);
   useEffect(() => {
     if (debug) {
       console.log(props);
@@ -14741,7 +14779,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     hideLinksOnDrag,
     hideLinks,
     showHoveredLinksOnly,
-    draggingMode,
+    draggingMode: draggingMode2,
     isolateNonSelectedLinksOnNodeClick,
     staticMapColor,
     mapStyle
@@ -14781,13 +14819,18 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       showHoveredLinksOnly,
       hideLinks,
       mapStyle,
-      draggingMode,
+      draggingMode: draggingMode2,
       isolateNonSelectedLinksOnNodeClick,
       showLinkCount,
       maxZoomOutForLinkCount,
       nodeSizeScaler
     }));
-  }, [linkAnimation, nodeSizeScaler, maxZoomOutForLinkCount, showLinkCount, mapApi == null ? void 0 : mapApi.current, isolateNonSelectedLinksOnNodeClick, draggingMode, showHoveredLinksOnly, mapStyle == null ? void 0 : mapStyle.name, hideLinks, defaultLinkColorHex, linkHighlightedColorHex, defaultAnimationLinkColor, enableNativeContextMenu, enableLngLatBox, hideLinksOnDrag, maxZoomOutForLinkCount, nodeSizeScaler]);
+  }, [linkAnimation, nodeSizeScaler, maxZoomOutForLinkCount, showLinkCount, mapApi == null ? void 0 : mapApi.current, isolateNonSelectedLinksOnNodeClick, draggingMode2, showHoveredLinksOnly, mapStyle == null ? void 0 : mapStyle.name, hideLinks, defaultLinkColorHex, linkHighlightedColorHex, defaultAnimationLinkColor, enableNativeContextMenu, enableLngLatBox, hideLinksOnDrag, maxZoomOutForLinkCount, nodeSizeScaler]);
+  const sourcePortsFontSizePercentage = useMemo(() => {
+    const scale = currentZoomLevel / initialZoomLevel;
+    const fontSize = baseFont * scale - 0.3;
+    return fontSize;
+  }, [currentZoomLevel]);
   function _onLinkSelected(obj) {
     setSelectedConn(obj);
     onConnClick(obj);
@@ -14798,17 +14841,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       ...node2,
       connections: []
     }));
-    const countHowManyDuplicateConnections = (conn) => {
-      const s = _connections.filter((item) => {
-        if (((item == null ? void 0 : item.sourceId) == (conn == null ? void 0 : conn.sourceId) && (item == null ? void 0 : item.destinationId) == (conn == null ? void 0 : conn.destinationId) || (item == null ? void 0 : item.destinationId) == (conn == null ? void 0 : conn.sourceId) && (item == null ? void 0 : item.sourceId) == (conn == null ? void 0 : conn.destinationId)) && (item == null ? void 0 : item.layer) == 0) {
-          return item;
-        }
-        return null;
-      });
-      return s == null ? void 0 : s.filter((item) => item != null);
-    };
     const processedConnections = updateOnly ? _connections : _connections == null ? void 0 : _connections.map((conn) => {
-      const linksGroup = countHowManyDuplicateConnections(conn);
       return {
         ...conn,
         u_id: conn.u_id || useRandomId(),
@@ -14824,8 +14857,10 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         data: conn,
         connCountBoxId: useRandomId(),
         timestamp: [0, 5, 10, 15],
-        linkCount: linksGroup == null ? void 0 : linksGroup.length,
-        linksGroup
+        // linkCount : linksGroup?.length,
+        // linksGroup : linksGroup ,
+        sourcesId: (conn.sourceId + conn.destinationId).toString().split("").sort().join(""),
+        fullSourcesId: (conn.sourceId + (conn == null ? void 0 : conn.sourcePort) + conn.destinationId + (conn == null ? void 0 : conn.destinationPort)).toString().split("").sort().join("")
       };
     });
     processedNodes.forEach((node2, nodeIndex) => {
@@ -14844,6 +14879,12 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         }
       });
     });
+    processedConnections == null ? void 0 : processedConnections.map((con) => {
+      const sourcesId = con == null ? void 0 : con.sourcesId;
+      const s = processedConnections == null ? void 0 : processedConnections.filter((item) => (item == null ? void 0 : item.sourcesId) == sourcesId);
+      con.linkCount = s == null ? void 0 : s.length;
+      con.linksGroup = s;
+    });
     if (debug) {
       console.log("Processed Nodes", processedNodes);
       console.log("Processed Connections", processedConnections);
@@ -14933,6 +14974,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     }));
   }
   useImperativeHandle(ref, () => ({
+    id: mapId,
     getCanvas: () => {
       var _a, _b;
       return (_b = (_a = mapApi.current) == null ? void 0 : _a.getCanvas) == null ? void 0 : _b.call(_a);
@@ -14948,6 +14990,22 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     saveOptions,
     loadOptions,
     FlyToNodeApi,
+    setCurrentZoomLevel,
+    setOptions,
+    setMapDragging,
+    hasInternet,
+    setMapZooming,
+    setMapRotating,
+    setStartLinkCounterRerender,
+    setInViewNodes,
+    setInViewConnections,
+    setHoveredNode,
+    setHoveredConnection,
+    setContextMenuEvent,
+    setNodeContextMenuEvent,
+    setSelectedConn,
+    setSelectedNode,
+    setOnScreenLinksGroup,
     ...mapApi.current
   }));
   const _menuItems = useMemo(() => {
@@ -14983,8 +15041,9 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     setStartLinkCounterRerender(true);
     const bounds = (_a = mapApi.current) == null ? void 0 : _a.getBounds();
     console.log("Bounds : ", bounds);
+    const MARGIN = boundMargin;
     const filtered = _nodes.filter(
-      (n) => n.location.lng >= bounds.getWest() && n.location.lng <= bounds.getEast() && n.location.lat >= bounds.getSouth() && n.location.lat <= bounds.getNorth()
+      (n) => n.location.lng >= bounds.getWest() - MARGIN && n.location.lng <= bounds.getEast() + MARGIN && n.location.lat >= bounds.getSouth() - MARGIN && n.location.lat <= bounds.getNorth() + MARGIN
     );
     console.log("In View Nodes : ", filtered);
     const cs = [...new Set(filtered.flatMap((node2) => node2 == null ? void 0 : node2.connections))];
@@ -15012,175 +15071,212 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       onLinkMouseOver({ event: e, data: e == null ? void 0 : e.object, type: "connection", id: (_c = e == null ? void 0 : e.object) == null ? void 0 : _c.id, mapApi });
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
-    "w-full h-full relative rounded overflow-hidden",
-    className
-  ), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      onContextMenu: (e) => {
-        if (!(selectedConn == null ? void 0 : selectedConn.x)) {
-          return;
-        }
-        setContextMenuEvent(e);
-        onLinkContextMenu({
-          data: selectedConn,
-          event: e,
-          mapApi,
-          type: "connection"
-        });
-      },
-      className: "network-map-canvas w-full h-full",
-      ref: networkMapRef,
-      children: [
-        enableNativeContextMenu && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ContextMenu,
-            {
-              event: contextMenuEvent,
-              items: {
-                title: _menuTitle,
-                items: _menuItems
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ContextMenu,
-            {
-              event: NodeContextMenuEvent,
-              items: {
-                title: _nodeMenuTitle,
-                items: _nodeMenuItems
-              }
+      id: "#" + mapId,
+      className: cn(
+        "w-full h-full relative rounded overflow-hidden abdellatifuimap",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          onContextMenu: (e) => {
+            if (!(selectedConn == null ? void 0 : selectedConn.x)) {
+              return;
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Map$1,
-          {
-            ref: mapApi,
-            onMoveStart: () => setStartLinkCounterRerender(false),
-            style: {
-              width: "100%",
-              height: "100%",
-              position: "relative"
-            },
-            initialViewState: {
-              longitude: 31.233334,
-              latitude: 30.033333,
-              zoom: 9,
-              bearing: 0,
-              minZoom: 3,
-              maxZoom: 10
-            },
-            mapStyle: MapStyleUrl,
-            onZoom: (e) => {
-              var _a;
-              setCurrentZoomLevel((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.getZoom());
-              setMapZooming((prev2) => !prev2);
-            },
-            onRotate: (e) => {
-              var _a;
-              setMapRotating((_a = e == null ? void 0 : e.viewState) == null ? void 0 : _a.bearing);
-            },
-            onDragStart: () => setMapDragging(true),
-            onDragEnd: () => setMapDragging(false),
-            onMoveEnd: handleMoveEnd,
-            ...mapProps,
-            children: [
+            setContextMenuEvent(e);
+            onLinkContextMenu({
+              data: selectedConn,
+              event: e,
+              mapApi,
+              type: "connection"
+            });
+          },
+          className: "network-map-canvas w-full h-full",
+          ref: networkMapRef,
+          children: [
+            enableNativeContextMenu && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DeckGLOverlay,
+                ContextMenu,
                 {
-                  layers: [...paths],
-                  onHover: handleHover,
-                  onClick: (e) => {
-                    if (!(e == null ? void 0 : e.layer)) {
-                      setSelectedConn((prev2) => {
-                        var _a, _b;
-                        (_b = (_a = prev2 == null ? void 0 : prev2.object) == null ? void 0 : _a.nodes) == null ? void 0 : _b.map((item) => {
-                          var _a2, _b2;
-                          (_b2 = (_a2 = item == null ? void 0 : item.ref) == null ? void 0 : _a2.current) == null ? void 0 : _b2.changeMarkerOutline(false);
-                        });
-                        return {};
-                      });
-                      setOnScreenLinksGroup({ connections: [], nodes: [], countBoxes: [] });
-                    }
-                  },
-                  style: { zIndex: 0 }
+                  event: contextMenuEvent,
+                  items: {
+                    title: _menuTitle,
+                    items: _menuItems
+                  }
                 }
               ),
-              inViewNodes == null ? void 0 : inViewNodes.map((item) => {
-                var _a, _b;
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  PinItem$1,
-                  {
-                    name: item == null ? void 0 : item.name,
-                    item,
-                    nodeSizeScaler,
-                    longitude: (_a = item == null ? void 0 : item.location) == null ? void 0 : _a.lng,
-                    options: options2,
-                    CreateMapObjectsScheme,
-                    latitude: (_b = item == null ? void 0 : item.location) == null ? void 0 : _b.lat,
-                    nodeIconMapper,
-                    hoveredConnection,
-                    onScreenLinksGroup,
-                    selectedNode,
-                    onNodeSelected: _onNodeSelected,
-                    onNodeMouseOver: _onNodeMouseOver,
-                    mapApi,
-                    nodes: _nodes,
-                    connections: _conns,
-                    setNodeContextMenuEvent
-                  },
-                  "_node_" + (item == null ? void 0 : item.elementId)
-                );
-              }),
-              getOverLinkElement && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                LinkOverContainer,
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ContextMenu,
                 {
-                  conn: hoveredConnection,
-                  coordinates: currentCoordinates,
-                  mapApi,
-                  getOverLinkElement,
-                  getOverLinkElementDelay
+                  event: NodeContextMenuEvent,
+                  items: {
+                    title: _nodeMenuTitle,
+                    items: _nodeMenuItems
+                  }
                 }
-              ),
-              showLinkCount && !mapDragging && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  LinkCountCircule$1,
-                  {
-                    data: con,
-                    mapApi,
-                    mapDragging,
-                    getCenterBox,
-                    hoveredConnection
-                  },
-                  "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
-                );
-              })),
-              showEndpoints && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  SourcesPorts$1,
-                  {
-                    data: con,
-                    mapApi,
-                    currentZoomLevel,
-                    hoveredConnection,
-                    mapDragging,
-                    getEndpointText,
-                    mapRotating
-                  },
-                  "_source_port_" + (con == null ? void 0 : con.u_id)
-                );
-              })),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(NavigationControl, {}),
-              enableLngLatBox && /* @__PURE__ */ jsxRuntimeExports.jsx(LngLatBox, { coordinates: currentCoordinates })
-            ]
-          }
-        )
-      ]
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Map$1,
+              {
+                ref: mapApi,
+                onMoveStart: () => setStartLinkCounterRerender(false),
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  position: "relative"
+                },
+                initialViewState: {
+                  longitude: 31.233334,
+                  latitude: 30.033333,
+                  zoom: initialZoomLevel,
+                  bearing: 0,
+                  minZoom: 3,
+                  maxZoom: 10
+                },
+                mapStyle: MapStyleUrl,
+                onZoom: (e) => {
+                  var _a;
+                  setCurrentZoomLevel((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.getZoom());
+                  setMapZooming((prev2) => !prev2);
+                },
+                onRotate: (e) => {
+                  var _a;
+                  setMapRotating((_a = e == null ? void 0 : e.viewState) == null ? void 0 : _a.bearing);
+                },
+                onDragStart: () => setMapDragging(true),
+                onDragEnd: () => setMapDragging(false),
+                onMoveEnd: handleMoveEnd,
+                onSourceData: (e) => {
+                  if (onConnection) {
+                    onConnection({ mapApi: mapApi.current, event: e, hasInternet: true });
+                  }
+                },
+                onError: (e) => {
+                  var _a;
+                  const x = ((_a = e.error) == null ? void 0 : _a.status) == 0;
+                  if (onConnection) {
+                    onConnection({ mapApi: mapApi.current, event: e, hasInternet: x == 0 ? false : true });
+                  }
+                },
+                ...mapProps,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    DeckGLOverlay,
+                    {
+                      layers: [...paths],
+                      onHover: handleHover,
+                      onClick: (e) => {
+                        if (!(e == null ? void 0 : e.layer)) {
+                          setSelectedConn((prev2) => {
+                            var _a, _b;
+                            (_b = (_a = prev2 == null ? void 0 : prev2.object) == null ? void 0 : _a.nodes) == null ? void 0 : _b.map((item) => {
+                              var _a2, _b2;
+                              (_b2 = (_a2 = item == null ? void 0 : item.ref) == null ? void 0 : _a2.current) == null ? void 0 : _b2.changeMarkerOutline(false);
+                            });
+                            return {};
+                          });
+                          setOnScreenLinksGroup({ connections: [], nodes: [], countBoxes: [] });
+                        }
+                      },
+                      style: { zIndex: 0 }
+                    }
+                  ),
+                  inViewNodes == null ? void 0 : inViewNodes.map((item) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      PinItem$1,
+                      {
+                        name: item == null ? void 0 : item.name,
+                        item,
+                        nodeSizeScaler,
+                        longitude: (_a = item == null ? void 0 : item.location) == null ? void 0 : _a.lng,
+                        options: options2,
+                        CreateMapObjectsScheme,
+                        latitude: (_b = item == null ? void 0 : item.location) == null ? void 0 : _b.lat,
+                        nodeIconMapper,
+                        hoveredConnection,
+                        onScreenLinksGroup,
+                        selectedNode,
+                        onNodeSelected: _onNodeSelected,
+                        onNodeMouseOver: _onNodeMouseOver,
+                        mapApi,
+                        nodes: _nodes,
+                        connections: _conns,
+                        setNodeContextMenuEvent
+                      },
+                      "_node_" + (item == null ? void 0 : item.elementId)
+                    );
+                  }),
+                  getOverLinkElement && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    LinkOverContainer,
+                    {
+                      conn: hoveredConnection,
+                      coordinates: currentCoordinates,
+                      mapApi,
+                      getOverLinkElement,
+                      getOverLinkElementDelay,
+                      draggingMode: draggingMode2
+                    }
+                  ),
+                  showLinkCount && !mapDragging && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      LinkCountCircule$1,
+                      {
+                        data: con,
+                        mapApi,
+                        mapDragging,
+                        getCenterBox,
+                        hoveredConnection,
+                        draggingMode: draggingMode2
+                      },
+                      "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
+                    );
+                  })),
+                  showEndpoints && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      SourcesPorts$1,
+                      {
+                        fontSize: sourcePortsFontSizePercentage,
+                        data: con,
+                        mapApi,
+                        currentZoomLevel,
+                        hoveredConnection,
+                        mapDragging,
+                        getEndpointText,
+                        mapRotating,
+                        draggingMode: draggingMode2
+                      },
+                      "_source_port_" + (con == null ? void 0 : con.u_id)
+                    );
+                  })),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    NavigationControl,
+                    {}
+                  ),
+                  MapLogo && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "absolute border bg-white p-2 w-fit h-fit z-50 bottom-2 left-2 cursor-default hover:scale-105 transition-all duration-300 select-none",
+                        MapLogoClassName
+                      ),
+                      style: MapLogoStyle || {},
+                      children: MapLogo
+                    }
+                  ),
+                  enableLngLatBox && /* @__PURE__ */ jsxRuntimeExports.jsx(LngLatBox, { coordinates: currentCoordinates })
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 const NetworkMap = memo(NetworkMapComponent);
 const Accordion = AccordionPrimitive.Root;