@localstack/appinspector-ui 1.0.40 → 1.0.41

package/dist/index.cjs

@@ -4420,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 = [];
@@ -4462,21 +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) {
-          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 = (0, import_material18.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(import_jsx_runtime139.Fragment, { children: [
     spans.error && /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
@@ -4497,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,
@@ -4571,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)(
@@ -4631,8 +4612,7 @@ var TraceGraphView = ({
                         data: spans,
                         error: fetchError,
                         loading
-                      },
-                      viewPortPixelWidth
+                      }
                     }
                   ) })
                 }
@@ -4671,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]);
@@ -4724,8 +4689,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       spans,
       status,
       statusError,
-      traceId,
-      viewPortPixelWidth
+      traceId
     }
   );
 };