@localstack/appinspector-ui 1.0.89 → 1.0.90

package/dist/index.js

@@ -26853,19 +26853,44 @@ var ServiceNode = memo11(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 import dagre from "@dagrejs/dagre";
-var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
+var getLayoutedNodesAndEdges = (inputNodes, inputEdges, order2 = "oldest_first") => {
   const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   const direction = "LR";
   const nodeWidth = 200;
   const nodeHeight = 70;
   dagreGraph.setGraph({ rankdir: direction });
+  const timestampMap = new Map(
+    inputNodes.map((n2) => [n2.id, n2.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);
   }
-  dagre.layout(dagreGraph);
+  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 group4 = rankMap.get(rank) ?? [];
+        group4.push(nodeId);
+        rankMap.set(rank, group4);
+      }
+      for (const nodeIds of rankMap.values()) {
+        nodeIds.sort((a3, b3) => {
+          const tsA = timestampMap.get(a3) ?? "";
+          const tsB = timestampMap.get(b3) ?? "";
+          return order2 === "newest_first" ? tsB.localeCompare(tsA) : tsA.localeCompare(tsB);
+        });
+        for (const [index, nodeId] of nodeIds.entries()) {
+          ;
+          g2.node(nodeId).order = index;
+        }
+      }
+    }
+  });
   const layoutedNodes = inputNodes.map((node) => {
     const nodeWithPosition = dagreGraph.node(node.id);
     return {
@@ -26961,6 +26986,7 @@ var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
   onRefresh,
+  order: order2 = "oldest_first",
   spans
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -27006,7 +27032,7 @@ var TraceGraph = ({
         });
       }
     }
-    const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
+    const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges, order2);
     for (const node of layoutedNodes) {
       if (node.id === initialFocusEventId) {
         node.selected = true;
@@ -27014,7 +27040,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId, setNodes, setEdges]);
+  }, [spans.data, initialFocusEventId, order2, setNodes, setEdges]);
   const theme = useTheme4();
   return /* @__PURE__ */ jsxs133(Fragment9, { children: [
     spans.error && /* @__PURE__ */ jsxs133(
@@ -27105,6 +27131,7 @@ var TraceGraphView = ({
   loading,
   navigateToSpansList,
   open,
+  order: order2,
   selectedEvent,
   spanId,
   spans,
@@ -27166,6 +27193,7 @@ var TraceGraphView = ({
                       onRefresh: () => {
                         fetchSpans();
                       },
+                      order: order2,
                       spans: {
                         data: spans,
                         error: fetchError,
@@ -27217,7 +27245,7 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
   }
   return [...allSpans.values()];
 }
-var TraceGraphPage = ({ onClose, spanId, traceId }) => {
+var TraceGraphPage = ({ onClose, order: order2 = "oldest_first", spanId, traceId }) => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = useState17();
   const [loading, setLoading] = useState17(false);
@@ -27277,6 +27305,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       loading,
       navigateToSpansList,
       open,
+      order: order2,
       selectedEvent,
       spanId: spanId ?? void 0,
       spans,
@@ -27380,7 +27409,7 @@ var SpansListPage = () => {
     ),
     selectedTraceId !== void 0 && /* @__PURE__ */ jsx143(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
-    }, spanId: selectedSpanId, traceId: selectedTraceId })
+    }, order: order2, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });
 };