@localstack/appinspector-ui 1.0.39 → 1.0.41

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
 import { Box as Box18 } from "@mui/material";
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3, useState as useState9 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef4, useState as useState9 } from "react";
 
 // src/api/use-api.tsx
 import { createContext, useContext } from "react";
@@ -3208,7 +3208,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box17, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState8 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3, useState as useState8 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box13, Chip as Chip3, Divider as Divider2, Stack, Typography as Typography9 } from "@mui/material";
@@ -4034,7 +4034,7 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme2 } from "@mui/material";
-import { Background, ReactFlow, useNodesState, useReactFlow as useReactFlow2 } from "@xyflow/react";
+import { Background, ReactFlow, useNodesState } from "@xyflow/react";
 import { useEffect as useEffect4, useState as useState7 } from "react";
 
 // src/components/trace-graph/service-node.tsx
@@ -4262,21 +4262,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
 import { Add, FitScreen, Remove } from "@mui/icons-material";
@@ -4398,13 +4383,10 @@ var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
   onRefresh,
-  spans,
-  viewPortPixelWidth
+  spans
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useState7([]);
-  const [initialViewSet, setInitialViewSet] = useState7(false);
-  const { fitView, setCenter } = useReactFlow2();
   useEffect4(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
@@ -4440,26 +4422,6 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes]);
-  useEffect4(() => {
-    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 = useTheme2();
   return /* @__PURE__ */ jsxs132(Fragment6, { children: [
     spans.error && /* @__PURE__ */ jsxs132(
@@ -4480,16 +4442,16 @@ var TraceGraph = ({
       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,
@@ -4554,8 +4516,7 @@ var TraceGraphView = ({
   spans,
   status,
   statusError,
-  traceId,
-  viewPortPixelWidth
+  traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ jsxs133(
@@ -4614,8 +4575,7 @@ var TraceGraphView = ({
                         data: spans,
                         error: fetchError,
                         loading
-                      },
-                      viewPortPixelWidth
+                      }
                     }
                   ) })
                 }
@@ -4654,35 +4614,20 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     void fetchSpans();
   }, [fetchSpans]);
   const [open, setOpen] = useState8(true);
-  const [selectedEvent, setSelectedEvent] = useState8();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = useState8(0);
-  const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = useCallback4(() => {
-    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] = useState8(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = useRef3();
   useEffect5(() => {
-    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 = useCallback4((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 = useCallback4((spanId2) => {
+    const span = spans?.find((s) => s.span_id === spanId2);
+    setSelectedEvent(span);
     setOpen(true);
-  }, []);
+  }, [spans]);
   const handleRetry = useCallback4(() => {
     void checkStatus();
   }, [checkStatus]);
@@ -4707,8 +4652,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spans,
       status,
       statusError,
-      traceId,
-      viewPortPixelWidth
+      traceId
     }
   );
 };
@@ -4720,9 +4664,9 @@ var SpansListPage = () => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = useState9();
   const [loading, setLoading] = useState9(false);
-  const hasFetched = useRef3(false);
+  const hasFetched = useRef4(false);
   const [includeReadOperations, setIncludeReadOperations] = useLocalStorage("includeReadOperations", false);
-  const mapPageToNextCursor = useRef3({});
+  const mapPageToNextCursor = useRef4({});
   const [page, setPage] = useState9(0);
   const [pageSize, setPageSize] = useState9(100);
   const [spanCount, setSpanCount] = useState9(0);