@abdellatifui/react 3.1.91 → 3.1.93

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";
@@ -14148,7 +14148,7 @@ const useCreatePath = ({ connections = [], mapApi, options: options2, selectedCo
     () => {
       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) => {
+      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;
@@ -14212,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,
@@ -14291,7 +14290,8 @@ const CustomMarker = (props) => {
     children,
     offset = [0, 0],
     markerProps = {},
-    style: style2 = {}
+    style: style2 = {},
+    className = {}
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Marker,
@@ -14299,8 +14299,11 @@ const CustomMarker = (props) => {
       longitude,
       latitude,
       anchor: "center",
+      className: cn(
+        "group z-30 isolate hover:z-40 w-fit h-fit",
+        className
+      ),
       style: {
-        zIndex: 30,
         ...style2
       },
       offset,
@@ -14309,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;
@@ -14320,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,
@@ -14345,7 +14350,8 @@ const LinkCountCircule = (props) => {
     mapZooming,
     getCenterBox,
     hoveredConnection,
-    draggingMode: draggingMode2
+    draggingMode: draggingMode2,
+    setSupressLinkHover
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14382,7 +14388,8 @@ const LinkCountCircule = (props) => {
           mapApi,
           points: midpoint,
           getCenterBox,
-          hoveredConnection
+          hoveredConnection,
+          setSupressLinkHover
         }
       )
     }
@@ -14439,36 +14446,56 @@ const PortText = (props) => {
   var _a;
   const ref = useRef(null);
   const {
-    text,
     rotation,
     isVisible,
     data,
     isFocused,
     fontSize,
-    isSource
+    isSource,
+    setSupressLinkHover
   } = props;
   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 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]"
+        "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: /* @__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));
+      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}`,
+            style: {
+              backgroundColor: data == null ? void 0 : data.linkColorHex
+            },
+            children: [
+              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)
+        );
       }) })
     }
   );
@@ -14484,7 +14511,9 @@ const SourcesPorts = (props) => {
     getEndpointText,
     mapRotating,
     fontSize,
-    draggingMode: draggingMode2
+    draggingMode: draggingMode2,
+    supressLinkHover,
+    setSupressLinkHover
   } = props;
   const [midpoint, setMidpoint] = useState(null);
   const [isVisible, setIsVisible] = useState(true);
@@ -14619,7 +14648,10 @@ const SourcesPorts = (props) => {
           isFocused,
           fontSize,
           isSource: true,
-          draggingMode: draggingMode2
+          draggingMode: draggingMode2,
+          supressLinkHover,
+          setSupressLinkHover,
+          vsConn: data == null ? void 0 : data.destinationPort
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14629,7 +14661,10 @@ const SourcesPorts = (props) => {
             data,
             isFocused,
             fontSize,
-            isSource: true
+            isSource: true,
+            supressLinkHover,
+            setSupressLinkHover,
+            vsConn: data == null ? void 0 : data.destinationPort
           }
         )
       }
@@ -14648,7 +14683,10 @@ const SourcesPorts = (props) => {
           isFocused,
           fontSize,
           isSource: false,
-          draggingMode: draggingMode2
+          draggingMode: draggingMode2,
+          supressLinkHover,
+          setSupressLinkHover,
+          vsConn: data == null ? void 0 : data.sourcePort
         }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
           PortText,
           {
@@ -14659,7 +14697,10 @@ const SourcesPorts = (props) => {
             getEndpointText,
             isFocused,
             fontSize,
-            isSource: false
+            isSource: false,
+            supressLinkHover,
+            setSupressLinkHover,
+            vsConn: data == null ? void 0 : data.sourcePort
           }
         )
       }
@@ -14667,6 +14708,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" },
@@ -14699,6 +14754,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     MapLogoClassName,
     MapLogoStyle,
     linkAnimation = true,
+    showGoNodeControlButton = true,
     onConnClick = () => {
     },
     onConnection,
@@ -14758,6 +14814,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);
@@ -14837,10 +14894,12 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   }
   const CreateMapObjectsScheme = useCallback((_nodes2, _connections, updateOnly = false) => {
     if (!mapApi.current) return;
-    const processedNodes = _nodes2.map((node2) => ({
-      ...node2,
-      connections: []
-    }));
+    const processedNodes = _nodes2.map((node2) => {
+      return {
+        ...node2,
+        connections: []
+      };
+    });
     const processedConnections = updateOnly ? _connections : _connections == null ? void 0 : _connections.map((conn) => {
       return {
         ...conn,
@@ -14857,21 +14916,40 @@ const NetworkMapComponent = forwardRef((props, ref) => {
         data: conn,
         connCountBoxId: useRandomId(),
         timestamp: [0, 5, 10, 15],
-        // 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("")
       };
     });
+    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
@@ -14879,18 +14957,18 @@ 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);
-    }
     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;
@@ -14979,6 +15057,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,
@@ -15006,8 +15085,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,
@@ -15053,6 +15138,9 @@ const NetworkMapComponent = forwardRef((props, ref) => {
   };
   const handleHover = (e) => {
     var _a, _b, _c;
+    if (supressLinkHover) {
+      return;
+    }
     if (!e.layer) {
       setHoveredConnection(null);
     }
@@ -15068,7 +15156,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
     if ((e == null ? void 0 : e.picked) && ((_b = (_a = e == null ? void 0 : e.layer) == null ? void 0 : _a.props) == null ? void 0 : _b.main)) {
       mapApi.current.getCanvas().style.cursor = "default";
       setHoveredConnection({ ...e.object });
-      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 });
+      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: ref || mapApi });
     }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -15203,10 +15291,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)
                     );
@@ -15216,7 +15305,7 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                     {
                       conn: hoveredConnection,
                       coordinates: currentCoordinates,
-                      mapApi,
+                      mapApi: ref,
                       getOverLinkElement,
                       getOverLinkElementDelay,
                       draggingMode: draggingMode2
@@ -15227,11 +15316,12 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                       LinkCountCircule$1,
                       {
                         data: con,
-                        mapApi,
+                        mapApi: ref,
                         mapDragging,
                         getCenterBox,
                         hoveredConnection,
-                        draggingMode: draggingMode2
+                        draggingMode: draggingMode2,
+                        setSupressLinkHover
                       },
                       "_lnk_count_circule_" + (con == null ? void 0 : con.u_id)
                     );
@@ -15242,20 +15332,25 @@ const NetworkMapComponent = forwardRef((props, ref) => {
                       {
                         fontSize: sourcePortsFontSizePercentage,
                         data: con,
-                        mapApi,
+                        mapApi: ref,
                         currentZoomLevel,
                         hoveredConnection,
                         mapDragging,
                         getEndpointText,
                         mapRotating,
-                        draggingMode: draggingMode2
+                        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",