@abdellatifui/react 3.1.90 → 3.1.92

package/dist/nextgen.d.ts

@@ -617,6 +617,7 @@ declare type NetworkMapProps_2 = {
     className: string;
     hideLinksOnDrag: boolean;
     showHoveredLinksOnly: boolean;
+    showGoNodeControlButton: boolean;
     draggingMode: boolean;
     maxZoomOutForLinkCount: number;
     nodeSizeScaler: number;

package/dist/nextgen.js

@@ -14,7 +14,7 @@ import { LayerExtension, _mergeShaders } from "@deck.gl/core";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { Cross2Icon, MagnifyingGlassIcon, ChevronDownIcon, ArrowLeftIcon, ArrowRightIcon, CheckIcon as CheckIcon$2, InfoCircledIcon, QuestionMarkCircledIcon } from "@radix-ui/react-icons";
 import $ from "jquery";
-import { CheckIcon as CheckIcon$1, Copy, CheckCheck, Info, ChevronUp, ChevronDown, X, Check, ChevronRight, ChevronLeft, EllipsisVertical, Eye, EyeOff, Filter, Search, ArrowUpDown, Rows4, FoldHorizontal, Grid2x2CheckIcon, Download, FilterX, RotateCw, Fullscreen, Brackets, LucideEllipsisVertical, Columns3, AlertTriangle, GripHorizontal, CircleCheckBig, CircleAlert, TriangleAlert, CircleHelp } from "lucide-react";
+import { CheckIcon as CheckIcon$1, MapPin, Copy, CheckCheck, Info, ChevronUp, ChevronDown, X, Check, ChevronRight, ChevronLeft, EllipsisVertical, Eye, EyeOff, Filter, Search, ArrowUpDown, Rows4, FoldHorizontal, Grid2x2CheckIcon, Download, FilterX, RotateCw, Fullscreen, Brackets, LucideEllipsisVertical, Columns3, AlertTriangle, GripHorizontal, CircleCheckBig, CircleAlert, TriangleAlert, CircleHelp } from "lucide-react";
 export * from "lucide-react";
 import copy$1 from "copy-to-clipboard";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
@@ -12722,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) => {
@@ -14144,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 && (item == null ? void 0 : item.destination) && (item == null ? void 0 : item.source))) == 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);
@@ -14204,7 +14212,6 @@ const useCreatePath = ({ connections = [], mapApi, options: options2, selectedCo
         }
         return d.linkColor ? d.linkColor : options2 == null ? void 0 : options2.defaultLinkColorHex;
       },
-      // opacity: options?.draggingMode ? 0 : 1 ,
       main: true,
       capRounded: true,
       visible: mapDragging && (options2 == null ? void 0 : options2.hideLinksOnDrag) || (options2 == null ? void 0 : options2.draggingMode) && (options2 == null ? void 0 : options2.hideLinksOnDrag) || (options2 == null ? void 0 : options2.hideLinks) ? false : true,
@@ -14282,7 +14289,9 @@ const CustomMarker = (props) => {
     latitude,
     children,
     offset = [0, 0],
-    markerProps = {}
+    markerProps = {},
+    style: style2 = {},
+    className = {}
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Marker,
@@ -14290,8 +14299,12 @@ const CustomMarker = (props) => {
       longitude,
       latitude,
       anchor: "center",
+      className: cn(
+        "group z-30 isolate hover:z-40",
+        className
+      ),
       style: {
-        zIndex: 30
+        ...style2
       },
       offset,
       children
@@ -14299,7 +14312,7 @@ const CustomMarker = (props) => {
   );
 };
 const CustomMarker$1 = memo(CustomMarker);
-function ConnectionBadge({ data, getCenterBox, points, mapApi, hoveredConnection }) {
+function ConnectionBadge({ data, getCenterBox, points, mapApi, hoveredConnection, setSupressLinkHover }) {
   const element = useMemo(() => {
     if (!data) return null;
     const visible = (hoveredConnection == null ? void 0 : hoveredConnection.u_id) == (data == null ? void 0 : data.u_id) ? true : false;
@@ -14310,6 +14323,8 @@ function ConnectionBadge({ data, getCenterBox, points, mapApi, hoveredConnection
     return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: "Number of connections", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
+        onMouseEnter: () => setSupressLinkHover(true),
+        onMouseLeave: () => setSupressLinkHover(false),
         id: "#" + (data == null ? void 0 : data.connCountBoxId),
         style: {
           backgroundColor: data == null ? void 0 : data.linkColorHex,
@@ -14334,7 +14349,9 @@ const LinkCountCircule = (props) => {
     mapApi,
     mapZooming,
     getCenterBox,
-    hoveredConnection
+    hoveredConnection,
+    draggingMode: draggingMode2,
+    setSupressLinkHover
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14361,6 +14378,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,
         {
@@ -14368,7 +14388,8 @@ const LinkCountCircule = (props) => {
           mapApi,
           points: midpoint,
           getCenterBox,
-          hoveredConnection
+          hoveredConnection,
+          setSupressLinkHover
         }
       )
     }
@@ -14408,7 +14429,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],
@@ -14419,6 +14443,7 @@ const LinkOverContainer = (props) => {
   );
 };
 const PortText = (props) => {
+  var _a;
   const ref = useRef(null);
   const {
     text,
@@ -14426,27 +14451,57 @@ const PortText = (props) => {
     isVisible,
     data,
     isFocused,
-    fontSize
+    fontSize,
+    isSource,
+    setSupressLinkHover
   } = props;
+  const vsConnectionHander = (data2) => {
+    console.log(data2);
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref,
+      onMouseEnter: (e) => {
+        console.log(data);
+        setSupressLinkHover(true);
+      },
+      onMouseLeave: (e) => {
+        setSupressLinkHover(false);
+      },
       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",
-        isFocused && "!scale-[1.5]"
+        "space-y-[2px] hover:space-y-1  w-fit h-fit hover:bg-black/50 font-geist text-xs rounded text-accent p-1 cursor-default pointer-events-all hover:!scale-[1.5] transition-all duration-300",
+        isFocused && "!scale-[1.5]",
+        !isVisible && "opacity-0"
       ),
       style: {
         transform: `rotate(${rotation}deg)`,
         transformOrigin: "50% 50%",
-        display: "inline-flex",
+        position: "relative",
         alignItems: "center",
         justifyContent: "center",
-        backgroundColor: data == null ? void 0 : data.linkColorHex,
-        opacity: isVisible ? 1 : 0,
         fontSize: fontSize + "rem"
       },
-      children: text
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (_a = data == null ? void 0 : data.linksGroup) == null ? void 0 : _a.map((item) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex gap-x-2 px-1 group/2 w-fit rounded-full relative hover:ring-[4px] outline-offset-1 outline-blue-600 transition-all duration-300 ease-in-out"
+            ),
+            id: `#sub-${item == null ? void 0 : item.u_id}`,
+            onMouseEnter: () => vsConnectionHander(item),
+            style: {
+              backgroundColor: data == null ? void 0 : data.linkColorHex
+            },
+            children: [
+              (item == null ? void 0 : item.isSource) ? item == null ? void 0 : item.sourcePort : item == null ? void 0 : item.destinationPort,
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[0px] group-hover/2:text-xs text-black/80 -translate-x-full group-hover/2:translate-x-0 transition-all duration-300 ease-in-out relative flex gap-x-2", children: isSource ? item == null ? void 0 : item.destinationPort : item == null ? void 0 : item.sourcePort })
+            ]
+          },
+          "txtport-" + (item == null ? void 0 : item.u_id)
+        );
+      }) })
     }
   );
 };
@@ -14460,7 +14515,10 @@ const SourcesPorts = (props) => {
     mapDragging,
     getEndpointText,
     mapRotating,
-    fontSize
+    fontSize,
+    draggingMode: draggingMode2,
+    supressLinkHover,
+    setSupressLinkHover
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14473,6 +14531,10 @@ const SourcesPorts = (props) => {
       setIsVisible(false);
       return;
     } else {
+      if (mapDragging) {
+        setIsVisible(false);
+        return;
+      }
       setIsVisible(true);
     }
     if (currentZoomLevel < 5) {
@@ -14483,6 +14545,12 @@ const SourcesPorts = (props) => {
     }
   }, [currentZoomLevel, mapDragging]);
   useEffect(() => {
+    if (draggingMode2) {
+      setIsVisible(false);
+      return;
+    } else {
+      setIsVisible(true);
+    }
     if (!hoveredConnection) {
       setIsVisible(true);
       setIsFocused(false);
@@ -14495,7 +14563,7 @@ const SourcesPorts = (props) => {
       setIsVisible(false);
       setIsFocused(false);
     }
-  }, [hoveredConnection == null ? void 0 : hoveredConnection.u_id, data == null ? void 0 : data.u_id, currentZoomLevel]);
+  }, [hoveredConnection == null ? void 0 : hoveredConnection.u_id, data == null ? void 0 : data.u_id, currentZoomLevel, draggingMode2]);
   const sourceLabel = useMemo(() => {
     var _a2, _b2, _c2, _d2, _e, _f;
     try {
@@ -14532,7 +14600,7 @@ const SourcesPorts = (props) => {
     } catch (e) {
       return null;
     }
-  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel, draggingMode2]);
   const destinationLabel = useMemo(() => {
     var _a2, _b2, _c2, _d2, _e, _f;
     try {
@@ -14569,7 +14637,7 @@ const SourcesPorts = (props) => {
     } catch (e) {
       return null;
     }
-  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel]);
+  }, [mapApi == null ? void 0 : mapApi.current, mapRotating, currentZoomLevel, draggingMode2]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     sourceLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
       CustomMarker$1,
@@ -14583,7 +14651,12 @@ const SourcesPorts = (props) => {
           isVisible,
           text: data == null ? void 0 : data.sourcePort,
           isFocused,
-          fontSize
+          fontSize,
+          isSource: true,
+          draggingMode: draggingMode2,
+          supressLinkHover,
+          setSupressLinkHover,
+          vsConn: data == null ? void 0 : data.destinationPort
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14592,7 +14665,11 @@ const SourcesPorts = (props) => {
             isVisible,
             data,
             isFocused,
-            fontSize
+            fontSize,
+            isSource: true,
+            supressLinkHover,
+            setSupressLinkHover,
+            vsConn: data == null ? void 0 : data.destinationPort
           }
         )
       }
@@ -14609,7 +14686,12 @@ const SourcesPorts = (props) => {
           isVisible,
           text: data == null ? void 0 : data.destinationPort,
           isFocused,
-          fontSize
+          fontSize,
+          isSource: false,
+          draggingMode: draggingMode2,
+          supressLinkHover,
+          setSupressLinkHover,
+          vsConn: data == null ? void 0 : data.sourcePort
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14619,7 +14701,11 @@ const SourcesPorts = (props) => {
             data,
             getEndpointText,
             isFocused,
-            fontSize
+            fontSize,
+            isSource: false,
+            supressLinkHover,
+            setSupressLinkHover,
+            vsConn: data == null ? void 0 : data.sourcePort
           }
         )
       }
@@ -14627,6 +14713,20 @@ const SourcesPorts = (props) => {
   ] });
 };
 const SourcesPorts$1 = memo(SourcesPorts);
+const CustomNavigateButtons = (props) => {
+  const {
+    mapApi,
+    showGoNodeControlButton
+  } = props;
+  const onMapPinClick = () => {
+    var _a, _b, _c, _d;
+    (_d = mapApi == null ? void 0 : mapApi.current) == null ? void 0 : _d.FlyToNodeApi(
+      (_c = (_b = (_a = mapApi == null ? void 0 : mapApi.current) == null ? void 0 : _a.nodes) == null ? void 0 : _b[0]) == null ? void 0 : _c.elementId
+    );
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-10 overflow-hidden right-3 z-50 min-h-[60px] w-[25px] gap-2 bg-white border rounded-full flex flex-wrap items-center justify-center py-1", children: showGoNodeControlButton && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledTooltip, { title: "Go to first node", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { onClick: onMapPinClick, className: "text-blue-600 hover:bg-accent rounded-full", size: 18 }) }) });
+};
+const CustomNavigateButtons$1 = memo(CustomNavigateButtons);
 const baseFont = 0.75;
 const mapStyles = [
   { "name": "street1", url: "https://api.maptiler.com/maps/streets/style.json?key=4s1cX8zNpChcrWFsQqbP" },
@@ -14659,6 +14759,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     MapLogoClassName,
     MapLogoStyle,
     linkAnimation = true,
+    showGoNodeControlButton = true,
     onConnClick = () => {
     },
     onConnection,
@@ -14684,7 +14785,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     hideLinks = false,
     getCenterBox,
     enableLngLatBox = true,
-    draggingMode = false,
+    draggingMode: draggingMode2 = false,
     mapProps = {},
     menuItems = [],
     nodeMenuItems = [],
@@ -14718,6 +14819,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   const [inViewNodes, setInViewNodes] = useState([]);
   const [inViewConnections, setInViewConnections] = useState([]);
   const [hasInternet, setHasInternet] = useState(true);
+  const [supressLinkHover, setSupressLinkHover] = useState(false);
   useEffect(() => {
     if (debug) {
       console.log(props);
@@ -14739,7 +14841,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     hideLinksOnDrag,
     hideLinks,
     showHoveredLinksOnly,
-    draggingMode,
+    draggingMode: draggingMode2,
     isolateNonSelectedLinksOnNodeClick,
     staticMapColor,
     mapStyle
@@ -14779,13 +14881,13 @@ 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;
@@ -14797,21 +14899,13 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   }
   const CreateMapObjectsScheme = useCallback((_nodes2, _connections, updateOnly = false) => {
     if (!mapApi.current) return;
-    const processedNodes = _nodes2.map((node2) => ({
-      ...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 processedNodes = _nodes2.map((node2) => {
+      return {
+        ...node2,
+        connections: []
+      };
+    });
     const processedConnections = updateOnly ? _connections : _connections == null ? void 0 : _connections.map((conn) => {
-      const linksGroup = countHowManyDuplicateConnections(conn);
       return {
         ...conn,
         u_id: conn.u_id || useRandomId(),
@@ -14827,19 +14921,40 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         data: conn,
         connCountBoxId: useRandomId(),
         timestamp: [0, 5, 10, 15],
-        linkCount: linksGroup == null ? void 0 : linksGroup.length,
-        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("")
       };
     });
+    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);
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const f0 = [];
+    const ignored = [];
+    for (const conn of processedConnections || []) {
+      if (seen.has(conn.sourcesId)) {
+        ignored.push(conn.sourceId);
+        continue;
+      }
+      f0.push(conn);
+      seen.add(conn.sourcesId);
+    }
     processedNodes.forEach((node2, nodeIndex) => {
-      processedConnections.forEach((conn, connIndex) => {
+      f0.forEach((conn, connIndex) => {
         const key = (node2 == null ? void 0 : node2.elementId) === (conn == null ? void 0 : conn.sourceId) ? "source" : (node2 == null ? void 0 : node2.elementId) === (conn == null ? void 0 : conn.destinationId) ? "destination" : null;
         if (key) {
-          processedConnections[connIndex].nodes = [
-            ...processedConnections[connIndex].nodes,
+          f0[connIndex].nodes = [
+            ...f0[connIndex].nodes,
             node2
           ];
-          processedConnections[connIndex][key] = node2 == null ? void 0 : node2.location;
+          f0[connIndex][key] = node2 == null ? void 0 : node2.location;
           processedNodes[nodeIndex].connections = [
             ...processedNodes[nodeIndex].connections,
             conn
@@ -14847,12 +14962,18 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         }
       });
     });
-    if (debug) {
-      console.log("Processed Nodes", processedNodes);
-      console.log("Processed Connections", processedConnections);
-    }
     setNodes(processedNodes);
-    setConns(processedConnections);
+    setConns(f0);
+    console.log(
+      "seen ",
+      seen.length,
+      "f0 ",
+      f0.length,
+      "ignored ",
+      ignored.length,
+      "all",
+      connections.length
+    );
   }, [mapApi]);
   useEffect(() => {
     if (!mapApi.current) return;
@@ -14941,6 +15062,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
       var _a, _b;
       return (_b = (_a = mapApi.current) == null ? void 0 : _a.getCanvas) == null ? void 0 : _b.call(_a);
     },
+    props,
     createNode,
     removeNode,
     getNodes,
@@ -14968,8 +15090,14 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     setSelectedConn,
     setSelectedNode,
     setOnScreenLinksGroup,
-    ...mapApi.current
-  }));
+    ...mapApi.current,
+    inViewConnections,
+    inViewNodes,
+    connections,
+    nodes,
+    setSupressLinkHover,
+    supressLinkHover
+  }), [debug, showAllLinks, showGoNodeControlButton]);
   const _menuItems = useMemo(() => {
     return (menuItems == null ? void 0 : menuItems.map((item) => ({
       ...item,
@@ -15015,6 +15143,9 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   };
   const handleHover = (e) => {
     var _a, _b, _c;
+    if (supressLinkHover) {
+      return;
+    }
     if (!e.layer) {
       setHoveredConnection(null);
     }
@@ -15165,10 +15296,11 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                         selectedNode,
                         onNodeSelected: _onNodeSelected,
                         onNodeMouseOver: _onNodeMouseOver,
-                        mapApi,
+                        mapApi: ref,
                         nodes: _nodes,
                         connections: _conns,
-                        setNodeContextMenuEvent
+                        setNodeContextMenuEvent,
+                        setSupressLinkHover
                       },
                       "_node_" + (item == null ? void 0 : item.elementId)
                     );
@@ -15178,9 +15310,10 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                     {
                       conn: hoveredConnection,
                       coordinates: currentCoordinates,
-                      mapApi,
+                      mapApi: ref,
                       getOverLinkElement,
-                      getOverLinkElementDelay
+                      getOverLinkElementDelay,
+                      draggingMode: draggingMode2
                     }
                   ),
                   showLinkCount && !mapDragging && (inViewConnections == null ? void 0 : inViewConnections.map((con, index) => {
@@ -15188,10 +15321,12 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                       LinkCountCircule$1,
                       {
                         data: con,
-                        mapApi,
+                        mapApi: ref,
                         mapDragging,
                         getCenterBox,
-                        hoveredConnection
+                        hoveredConnection,
+                        draggingMode: draggingMode2,
+                        setSupressLinkHover
                       },
                       "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
                     );
@@ -15202,19 +15337,25 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                       {
                         fontSize: sourcePortsFontSizePercentage,
                         data: con,
-                        mapApi,
+                        mapApi: ref,
                         currentZoomLevel,
                         hoveredConnection,
                         mapDragging,
                         getEndpointText,
-                        mapRotating
+                        mapRotating,
+                        draggingMode: draggingMode2,
+                        setSupressLinkHover
                       },
                       "_source_port_" + (con == null ? void 0 : con.u_id)
                     );
                   })),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(NavigationControl, {}),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    NavigationControl,
-                    {}
+                    CustomNavigateButtons$1,
+                    {
+                      mapApi: ref,
+                      showGoNodeControlButton
+                    }
                   ),
                   MapLogo && /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "div",