@opentrace/components 0.1.1-rc.88 → 0.1.1-rc.93

package/dist/opentrace-components.cjs

@@ -7154,10 +7154,12 @@ function LayoutPipeline({
   layoutReady,
   layoutConfig,
   optimizeTick,
-  onOptimizeStatus
+  onOptimizeStatus,
+  onLayoutControl
 }) {
   const sigma = v();
   const timerRef = t.useRef(null);
+  const runningRef = t.useRef(false);
   const { start, stop } = n({
     settings: {
       gravity: layoutConfig.fa2Gravity,
@@ -7169,14 +7171,45 @@ function LayoutPipeline({
       linLogMode: layoutConfig.fa2LinLogMode,
       outboundAttractionDistribution: layoutConfig.fa2OutboundAttraction,
       adjustSizes: layoutConfig.fa2AdjustSizes
+    },
+    outputReducer: (_key, attrs) => {
+      if (attrs._pinnedX != null) {
+        attrs.x = attrs._pinnedX;
+        attrs.y = attrs._pinnedY;
+        if (!attrs.fixed) {
+          attrs._pinnedX = void 0;
+          attrs._pinnedY = void 0;
+        }
+      }
+      return attrs;
     }
   });
+  t.useEffect(() => {
+    onLayoutControl?.({
+      stop: () => {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+        stop();
+        runningRef.current = false;
+        onOptimizeStatus?.(null);
+      },
+      start: () => {
+        start();
+        runningRef.current = true;
+        onOptimizeStatus?.({ phase: "fa2" });
+      },
+      isRunning: () => runningRef.current
+    });
+  }, [start, stop, onLayoutControl]);
   function cleanup() {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
     stop();
+    runningRef.current = false;
   }
   t.useEffect(() => {
     if (!layoutReady) return;
@@ -7187,8 +7220,10 @@ function LayoutPipeline({
     if (layoutConfig.fa2Enabled && graph.order > 0) {
       onOptimizeStatus?.({ phase: "fa2" });
       start();
+      runningRef.current = true;
       timerRef.current = setTimeout(() => {
         stop();
+        runningRef.current = false;
         onOptimizeStatus?.(null);
       }, layoutConfig.fa2Duration);
     } else {
@@ -7441,13 +7476,16 @@ function GraphEventHandler({
   t.useEffect(() => {
     const container = sigma.getContainer();
     const graph = sigma.getGraph();
+    const s = sigma;
     const mouseCanvas = container.querySelector(
       ".sigma-mouse"
     );
     let overNode = false;
     let overEdge = false;
+    let draggedNode = null;
+    let isDragging = false;
     function updateCursor() {
-      const value = overNode || overEdge ? "pointer" : "grab";
+      const value = isDragging ? "grabbing" : overNode || overEdge ? "pointer" : "grab";
       container.style.cursor = value;
       if (mouseCanvas) mouseCanvas.style.cursor = value;
     }
@@ -7471,7 +7509,21 @@ function GraphEventHandler({
         overEdge = false;
         updateCursor();
       },
+      // Start drag on mousedown over a node
+      downNode: ({ node }) => {
+        draggedNode = node;
+        isDragging = false;
+        const attrs = graph.getNodeAttributes(node);
+        graph.setNodeAttribute(node, "fixed", true);
+        graph.setNodeAttribute(node, "_pinnedX", attrs.x);
+        graph.setNodeAttribute(node, "_pinnedY", attrs.y);
+        s.getCamera().disable();
+      },
       clickNode: ({ node }) => {
+        if (isDragging) {
+          isDragging = false;
+          return;
+        }
         if (!onNodeClick) return;
         const attrs = graph.getNodeAttributes(node);
         const graphNode = attrs._graphNode;
@@ -7497,21 +7549,56 @@ function GraphEventHandler({
         onStageClick?.();
       }
     };
+    function onMouseMove(e2) {
+      if (!draggedNode) return;
+      isDragging = true;
+      updateCursor();
+      const pos = s.viewportToGraph({
+        x: e2.offsetX,
+        y: e2.offsetY
+      });
+      graph.setNodeAttribute(draggedNode, "x", pos.x);
+      graph.setNodeAttribute(draggedNode, "y", pos.y);
+      graph.setNodeAttribute(draggedNode, "_pinnedX", pos.x);
+      graph.setNodeAttribute(draggedNode, "_pinnedY", pos.y);
+      e2.preventDefault();
+    }
+    function onMouseUp() {
+      if (draggedNode) {
+        graph.setNodeAttribute(draggedNode, "fixed", false);
+        draggedNode = null;
+        s.getCamera().enable();
+        updateCursor();
+      }
+    }
     sigma.on("enterNode", handlers.enterNode);
     sigma.on("leaveNode", handlers.leaveNode);
     sigma.on("enterEdge", handlers.enterEdge);
     sigma.on("leaveEdge", handlers.leaveEdge);
+    sigma.on("downNode", handlers.downNode);
     sigma.on("clickNode", handlers.clickNode);
     sigma.on("clickEdge", handlers.clickEdge);
     sigma.on("clickStage", handlers.clickStage);
+    const mouseTarget = mouseCanvas ?? container;
+    mouseTarget.addEventListener("mousemove", onMouseMove);
+    mouseTarget.addEventListener("mouseup", onMouseUp);
+    mouseTarget.addEventListener("mouseleave", onMouseUp);
     return () => {
+      if (draggedNode) {
+        graph.setNodeAttribute(draggedNode, "fixed", false);
+        s.getCamera().enable();
+      }
       sigma.off("enterNode", handlers.enterNode);
       sigma.off("leaveNode", handlers.leaveNode);
       sigma.off("enterEdge", handlers.enterEdge);
       sigma.off("leaveEdge", handlers.leaveEdge);
+      sigma.off("downNode", handlers.downNode);
       sigma.off("clickNode", handlers.clickNode);
       sigma.off("clickEdge", handlers.clickEdge);
       sigma.off("clickStage", handlers.clickStage);
+      mouseTarget.removeEventListener("mousemove", onMouseMove);
+      mouseTarget.removeEventListener("mouseup", onMouseUp);
+      mouseTarget.removeEventListener("mouseleave", onMouseUp);
     };
   }, [sigma, onNodeClick, onEdgeClick, onStageClick]);
   return null;
@@ -7559,6 +7646,7 @@ const GraphCanvas = t.memo(
         availableSubTypes = EMPTY_SUB_TYPES,
         zIndex: zIndexEnabled = false,
         communityData: communityDataProp,
+        labelsVisible = true,
         animationSettings = DEFAULT_ANIMATION,
         onNodeClick,
         onEdgeClick,
@@ -7568,6 +7656,7 @@ const GraphCanvas = t.memo(
         style
       } = props;
       const sigmaRef = t.useRef(null);
+      const layoutControlRef = t.useRef(null);
       const [optimizeTick, setOptimizeTick] = t.useState(0);
       const internalCommunityData = useHighlights.useCommunities(nodes, links, layoutConfig);
       const communityData = communityDataProp ?? internalCommunityData;
@@ -7679,17 +7768,18 @@ const GraphCanvas = t.memo(
           },
           renderEdgeLabels: false,
           enableEdgeEvents: !isLargeGraph,
-          labelRenderedSizeThreshold: LABEL_RENDERED_SIZE_THRESHOLD,
+          labelRenderedSizeThreshold: labelsVisible ? LABEL_RENDERED_SIZE_THRESHOLD : Infinity,
           labelFont: LABEL_FONT,
           labelColor: { color: LABEL_COLOR },
           labelSize: LABEL_SIZE,
-          defaultDrawNodeLabel: drawNodeLabel,
+          defaultDrawNodeLabel: labelsVisible ? drawNodeLabel : () => {
+          },
           defaultDrawNodeHover: drawNodeHover,
           allowInvalidContainer: true,
           zIndex: zIndexEnabled,
           zoomToSizeRatioFunction: (ratio) => Math.pow(ratio, ZOOM_SIZE_EXPONENT)
         }),
-        [isLargeGraph, zIndexEnabled]
+        [isLargeGraph, zIndexEnabled, labelsVisible]
       );
       const edgeReducer = t.useCallback(
         (_edge, data) => {
@@ -7699,6 +7789,9 @@ const GraphCanvas = t.memo(
         },
         []
       );
+      const handleLayoutControl = t.useCallback((control) => {
+        layoutControlRef.current = control;
+      }, []);
       const handleSigmaReady = t.useCallback(
         (sigma) => {
           sigmaRef.current = sigma;
@@ -7786,6 +7879,15 @@ const GraphCanvas = t.memo(
               const camera = sigmaRef.current.getCamera();
               camera.animatedReset({ duration });
             }
+          },
+          stopPhysics: () => {
+            layoutControlRef.current?.stop();
+          },
+          startPhysics: () => {
+            layoutControlRef.current?.start();
+          },
+          isPhysicsRunning: () => {
+            return layoutControlRef.current?.isRunning() ?? false;
           }
         }),
         [nodes, links, hops, onNodeClick]
@@ -7849,7 +7951,8 @@ const GraphCanvas = t.memo(
                       layoutReady,
                       layoutConfig,
                       optimizeTick,
-                      onOptimizeStatus
+                      onOptimizeStatus,
+                      onLayoutControl: handleLayoutControl
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(