@localstack/appinspector-ui 1.0.39 → 1.0.41

package/dist/index.cjs

@@ -4299,21 +4299,6 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
   });
   return { edges: inputEdges, nodes: layoutedNodes };
 };
-var getNodesMinMaxX = (nodes) => {
-  if (nodes.length === 0) return { maxX: 0, minX: 0 };
-  let minX = Number.POSITIVE_INFINITY;
-  let maxX = Number.NEGATIVE_INFINITY;
-  for (const node of nodes) {
-    minX = Math.min(minX, node.position.x);
-    maxX = Math.max(maxX, node.position.x);
-  }
-  return { maxX, minX };
-};
-var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
-  const nodeWidth = 200;
-  const desiredCenter = focusNodeX + viewPortPixelWidth / 2;
-  return Math.min(Math.max(desiredCenter, minX + viewPortPixelWidth / 2), maxX - viewPortPixelWidth / 2 + nodeWidth);
-};
 
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
@@ -4435,13 +4420,10 @@ var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
   onRefresh,
-  spans,
-  viewPortPixelWidth
+  spans
 }) => {
   const [nodes, setNodes, onNodesChange] = (0, import_react21.useNodesState)([]);
   const [edges, setEdges] = (0, import_react22.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react22.useState)(false);
-  const { fitView, setCenter } = (0, import_react21.useReactFlow)();
   (0, import_react22.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
@@ -4477,26 +4459,6 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes]);
-  (0, import_react22.useEffect)(() => {
-    const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
-    if (shouldSetInitialView) {
-      if (initialFocusEventId) {
-        const focusNode = nodes.find((node) => node.id === initialFocusEventId);
-        if (focusNode) {
-          const { maxX, minX } = getNodesMinMaxX(nodes);
-          const centerX = calculateCenterX(focusNode.position.x, viewPortPixelWidth, minX, maxX);
-          void setCenter(centerX, focusNode.position.y, {
-            duration: 500,
-            zoom: 0.8
-          });
-          onEventSelect(focusNode.data.event);
-        }
-      } else {
-        void fitView({ duration: 500 });
-      }
-      setInitialViewSet(true);
-    }
-  }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
   const theme = (0, import_material18.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
     spans.error && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
@@ -4517,16 +4479,16 @@ var TraceGraph = ({
       import_react21.ReactFlow,
       {
         "data-testid": "trace-graph",
-        defaultViewport: { x: 0, y: 0, zoom: 1 },
         edges,
         fitView: true,
+        fitViewOptions: initialFocusEventId ? { maxZoom: 1, nodes: [{ id: initialFocusEventId }], padding: 0.2 } : void 0,
         maxZoom: 1.5,
         minZoom: 0.1,
         nodes,
         nodesDraggable: false,
         nodeTypes,
         onNodeClick: (_event, node) => {
-          onEventSelect(node.data.event);
+          onEventSelect(node.data.event.span_id);
         },
         onNodesChange,
         selectNodesOnDrag: false,
@@ -4591,8 +4553,7 @@ var TraceGraphView = ({
   spans,
   status,
   statusError,
-  traceId,
-  viewPortPixelWidth
+  traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
@@ -4651,8 +4612,7 @@ var TraceGraphView = ({
                         data: spans,
                         error: fetchError,
                         loading
-                      },
-                      viewPortPixelWidth
+                      }
                     }
                   ) })
                 }
@@ -4691,35 +4651,20 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     void fetchSpans();
   }, [fetchSpans]);
   const [open, setOpen] = (0, import_react24.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react24.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react24.useState)(0);
-  const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react24.useCallback)(() => {
-    const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
-    if (percentageMatch && open) {
-      const percentage = Number.parseInt(percentageMatch[1], 10);
-      return window.innerWidth * percentage / 100;
-    }
-    return 0;
-  }, [open]);
+  const [selectedEvent, setSelectedEvent] = (0, import_react24.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react24.useRef)();
   (0, import_react24.useEffect)(() => {
-    const updateViewportWidth = () => {
-      const totalWidth = window.innerWidth;
-      const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
-      setViewPortPixelWidth(totalWidth - drawerPixelWidth);
-    };
-    updateViewportWidth();
-    const timeoutId = setTimeout(updateViewportWidth, 50);
-    window.addEventListener("resize", updateViewportWidth);
-    return () => {
-      window.removeEventListener("resize", updateViewportWidth);
-      clearTimeout(timeoutId);
-    };
-  }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react24.useCallback)((event) => {
-    setSelectedEvent(event);
+    if (!spansReference.current && spans) {
+      setSelectedEvent(spans.find((span) => span.span_id === spanId));
+      spansReference.current = spans;
+    }
+  }, [spans, setSelectedEvent, spanId]);
+  const { checkStatus, error: statusError, status } = useStatus();
+  const handleEventSelect = (0, import_react24.useCallback)((spanId2) => {
+    const span = spans?.find((s) => s.span_id === spanId2);
+    setSelectedEvent(span);
     setOpen(true);
-  }, []);
+  }, [spans]);
   const handleRetry = (0, import_react24.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
@@ -4744,8 +4689,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spans,
       status,
       statusError,
-      traceId,
-      viewPortPixelWidth
+      traceId
     }
   );
 };