@localstack/appinspector-ui 1.0.131 → 1.0.132

package/dist/index.js

@@ -31694,39 +31694,70 @@ var ServiceNode = memo12(({ data, selected }) => {
 // src/components/trace-graph/utils.ts
 import dagre from "@dagrejs/dagre";
 var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
-  const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   const direction = "LR";
   const nodeWidth = 200;
   const nodeHeight = 80;
-  dagreGraph.setGraph({ rankdir: direction });
+  const nodeIds = new Set(inputNodes.map((n) => n.id));
+  const validEdges = inputEdges.filter((error) => nodeIds.has(error.source) && nodeIds.has(error.target));
+  const buildGraph = () => {
+    const g2 = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    g2.setGraph({ rankdir: direction });
+    for (const node of inputNodes) {
+      g2.setNode(node.id, { height: nodeHeight, width: nodeWidth });
+    }
+    for (const edge of validEdges) {
+      g2.setEdge(edge.source, edge.target);
+    }
+    return g2;
+  };
+  const naturalGraph = buildGraph();
+  dagre.layout(naturalGraph);
+  const naturalYMap = new Map(
+    inputNodes.map((n) => [n.id, naturalGraph.node(n.id).y])
+  );
   const timestampMap = new Map(
     inputNodes.map((n) => [n.id, n.data.event.start_time_unix_nano])
   );
-  for (const node of inputNodes) {
-    dagreGraph.setNode(node.id, { height: nodeHeight, width: nodeWidth });
-  }
-  for (const edge of inputEdges) {
-    dagreGraph.setEdge(edge.source, edge.target);
-  }
+  const parentMap = new Map(
+    inputNodes.filter((n) => n.data.event.parent_span_id !== null).map((n) => [n.id, n.data.event.parent_span_id])
+  );
+  const dagreGraph = buildGraph();
   dagre.layout(dagreGraph, {
     customOrder: (g2) => {
       const rankMap = /* @__PURE__ */ new Map();
       for (const nodeId of g2.nodes()) {
         const rank = g2.node(nodeId).rank;
         if (rank === void 0) continue;
-        const group3 = rankMap.get(rank) ?? [];
-        group3.push(nodeId);
-        rankMap.set(rank, group3);
-      }
-      for (const nodeIds of rankMap.values()) {
-        nodeIds.sort((a3, b3) => {
-          const tsA = timestampMap.get(a3) ?? "";
-          const tsB = timestampMap.get(b3) ?? "";
-          return tsA.localeCompare(tsB);
+        const bucket = rankMap.get(rank) ?? [];
+        bucket.push(nodeId);
+        rankMap.set(rank, bucket);
+      }
+      for (const nodeIds2 of rankMap.values()) {
+        const siblingGroups = /* @__PURE__ */ new Map();
+        for (const nodeId of nodeIds2) {
+          const key = parentMap.get(nodeId) ?? `__root_${nodeId}`;
+          const group3 = siblingGroups.get(key) ?? [];
+          group3.push(nodeId);
+          siblingGroups.set(key, group3);
+        }
+        for (const group3 of siblingGroups.values()) {
+          group3.sort((a3, b3) => {
+            const tsA = timestampMap.get(a3) ?? "";
+            const tsB = timestampMap.get(b3) ?? "";
+            return tsA.localeCompare(tsB);
+          });
+        }
+        const sortedGroups = [...siblingGroups.values()].toSorted((groupA, groupB) => {
+          const minYA = Math.min(...groupA.map((id2) => naturalYMap.get(id2) ?? 0));
+          const minYB = Math.min(...groupB.map((id2) => naturalYMap.get(id2) ?? 0));
+          return minYA - minYB;
         });
-        for (const [index, nodeId] of nodeIds.entries()) {
-          ;
-          g2.node(nodeId).order = index;
+        let orderIndex = 0;
+        for (const group3 of sortedGroups) {
+          for (const nodeId of group3) {
+            ;
+            g2.node(nodeId).order = orderIndex++;
+          }
         }
       }
     }