@localstack/appinspector-ui 1.0.40 → 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
@@ -4383,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 = [];
@@ -4425,21 +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) {
-          void fitView({ maxZoom: 0.8, nodes: [focusNode], padding: 0.2 });
-          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(
@@ -4460,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,
@@ -4534,8 +4516,7 @@ var TraceGraphView = ({
   spans,
   status,
   statusError,
-  traceId,
-  viewPortPixelWidth
+  traceId
 }) => {
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   return /* @__PURE__ */ jsxs133(
@@ -4594,8 +4575,7 @@ var TraceGraphView = ({
                         data: spans,
                         error: fetchError,
                         loading
-                      },
-                      viewPortPixelWidth
+                      }
                     }
                   ) })
                 }
@@ -4634,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]);
@@ -4687,8 +4652,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spans,
       status,
       statusError,
-      traceId,
-      viewPortPixelWidth
+      traceId
     }
   );
 };
@@ -4700,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);