@localstack/appinspector-ui 1.0.150 → 1.0.152

package/dist/index.cjs

@@ -2425,8 +2425,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
-var import_material23 = require("@mui/material");
-var import_react63 = require("react");
+var import_material24 = require("@mui/material");
+var import_react65 = require("react");
 
 // src/api/errors.ts
 var AppInspectorDisabledError = class extends Error {
@@ -17442,6 +17442,7 @@ var AwsServiceIconBase = (0, import_react38.memo)((props) => {
   return Icon ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Icon, { ...props }) : null;
 });
 var supportedServiceNames = Object.keys(ICONS_MAP);
+var getServiceIconComponent = (service) => ICONS_MAP[service];
 
 // src/components/aws-service-icon/aws-service-icon.tsx
 var import_jsx_runtime124 = require("react/jsx-runtime");
@@ -19070,10 +19071,10 @@ var useSpans = () => {
 
 // src/pages/trace-graph-page.tsx
 var import_icons_material13 = require("@mui/icons-material");
-var import_material22 = require("@mui/material");
+var import_material23 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react61 = require("@xyflow/react");
-var import_react62 = require("react");
+var import_react63 = require("@xyflow/react");
+var import_react64 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_icons_material10 = require("@mui/icons-material");
@@ -31680,9 +31681,9 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
-var import_material21 = require("@mui/material");
-var import_react59 = require("@xyflow/react");
-var import_react60 = require("react");
+var import_material22 = require("@mui/material");
+var import_react61 = require("@xyflow/react");
+var import_react62 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_icons_material11 = require("@mui/icons-material");
@@ -32012,20 +32013,121 @@ var Controls = (0, import_react58.memo)(() => {
   );
 });
 
-// src/components/trace-graph/trace-graph.tsx
+// src/components/trace-graph/xyflow/minimap-node.tsx
+var import_material21 = require("@mui/material");
+var import_react59 = require("@xyflow/react");
+var import_react60 = require("react");
 var import_jsx_runtime143 = require("react/jsx-runtime");
+var ICON_FRACTION = 0.35;
+var PADDING_FRACTION = 0.18;
+var ICON_NATIVE_SIZE = 80;
+var MinimapServiceNode = (0, import_react60.memo)(({
+  height,
+  id: id2,
+  onClick,
+  selected,
+  width,
+  x,
+  y
+}) => {
+  const theme = (0, import_material21.useTheme)();
+  const node = (0, import_react59.useStore)((s) => s.nodeLookup.get(id2));
+  const event = node?.data.event;
+  const serviceName = event?.service_name;
+  const Icon = serviceName ? getServiceIconComponent(serviceName) : void 0;
+  const { operation_status, status_code } = event ?? {};
+  const isError = operation_status ? operation_status === "error" || operation_status === "iam_explicit_deny" || operation_status === "iam_implicit_deny" : status_code === 2;
+  const errorColor = theme.palette.error.main;
+  const iconSize = Math.min(width, height) * ICON_FRACTION;
+  const padding = Math.min(width, height) * PADDING_FRACTION;
+  const scale2 = iconSize / ICON_NATIVE_SIZE;
+  const dotRadius = Math.min(width, height) * 0.12;
+  const dotX = x + padding + iconSize / 2;
+  const dotY = y + height - padding - dotRadius;
+  const outlineColor = selected ? isError ? errorColor : "#1a73e8" : "#cccccc";
+  const outlineWidth = selected ? 2 : 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)("g", { onClick: onClick ? (event2) => {
+    onClick(event2, id2);
+  } : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+      "rect",
+      {
+        fill: "white",
+        height,
+        rx: 3,
+        ry: 3,
+        stroke: outlineColor,
+        strokeWidth: outlineWidth,
+        width,
+        x,
+        y
+      }
+    ),
+    isError && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+      "rect",
+      {
+        fill: errorColor,
+        height: height - 6,
+        rx: 2,
+        ry: 2,
+        width: 3,
+        x: x + 1.5,
+        y: y + 3
+      }
+    ),
+    Icon && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("g", { transform: `translate(${String(x + padding)}, ${String(y + padding)}) scale(${String(scale2)})`, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Icon, { height: ICON_NATIVE_SIZE, width: ICON_NATIVE_SIZE }) }),
+    isError && Icon && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+      "circle",
+      {
+        cx: dotX,
+        cy: dotY,
+        fill: errorColor,
+        r: dotRadius
+      }
+    )
+  ] });
+});
+
+// src/components/trace-graph/trace-graph.tsx
+var import_jsx_runtime144 = require("react/jsx-runtime");
 var nodeTypes = {
   service: ServiceNode
 };
+var ExtentUpdater = ({ onUpdate, viewportRef }) => {
+  const zoom = (0, import_react61.useStore)((s) => s.transform[2]);
+  const width = (0, import_react61.useStore)((s) => s.width);
+  const height = (0, import_react61.useStore)((s) => s.height);
+  (0, import_react62.useEffect)(() => {
+    viewportRef.current = { height, width, zoom };
+    onUpdate();
+  }, [zoom, width, height, onUpdate, viewportRef]);
+  return null;
+};
 var TraceGraph = ({
   initialFocusEventId,
   onEventSelect,
   onRefresh,
   spans
 }) => {
-  const [nodes2, setNodes, onNodesChange] = (0, import_react59.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react59.useEdgesState)([]);
-  (0, import_react60.useEffect)(() => {
+  const [nodes2, setNodes, onNodesChange] = (0, import_react61.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react61.useEdgesState)([]);
+  const [translateExtent, setTranslateExtent] = (0, import_react62.useState)();
+  const nodeBoundsRef = (0, import_react62.useRef)(null);
+  const viewportRef = (0, import_react62.useRef)({ height: 0, width: 0, zoom: 1 });
+  const updateExtent = (0, import_react62.useCallback)(() => {
+    const bounds = nodeBoundsRef.current;
+    const { height, width, zoom } = viewportRef.current;
+    if (!bounds || width === 0 || height === 0) return;
+    const NODE_W = 200;
+    const NODE_H = 80;
+    const hMargin = (width - NODE_W) / zoom;
+    const vMargin = (height - NODE_H) / zoom;
+    setTranslateExtent([
+      [bounds.minX - hMargin, bounds.minY - vMargin],
+      [bounds.maxX + hMargin, bounds.maxY + vMargin]
+    ]);
+  }, []);
+  (0, import_react62.useEffect)(() => {
     const allNodes = [];
     const allEdges = [];
     for (const span of spans.data ?? []) {
@@ -32040,15 +32142,15 @@ var TraceGraph = ({
         },
         id: span.span_id,
         position: { x: 0, y: 0 },
-        sourcePosition: import_react59.Position.Right,
-        targetPosition: import_react59.Position.Left,
+        sourcePosition: import_react61.Position.Right,
+        targetPosition: import_react61.Position.Left,
         type: "service"
       });
       if (span.parent_span_id !== null) {
         allEdges.push({
           animated: false,
           id: `e-${span.parent_span_id}-${span.span_id}`,
-          markerEnd: { color: "lightgray", height: 16, type: import_react59.MarkerType.Arrow, width: 16 },
+          markerEnd: { color: "lightgray", height: 16, type: import_react61.MarkerType.Arrow, width: 16 },
           source: span.parent_span_id,
           style: { stroke: "lightgray", strokeWidth: 1 },
           target: span.span_id
@@ -32057,7 +32159,7 @@ var TraceGraph = ({
       for (const outgoingLinkSpanId of span.outgoing_link_span_ids ?? []) {
         allEdges.push({
           id: `e-link-${outgoingLinkSpanId}-${span.span_id}`,
-          markerEnd: { color: "lightgray", height: 16, type: import_react59.MarkerType.Arrow, width: 16 },
+          markerEnd: { color: "lightgray", height: 16, type: import_react61.MarkerType.Arrow, width: 16 },
           source: outgoingLinkSpanId,
           style: { stroke: "lightgray", strokeWidth: 1 },
           // animated: true,
@@ -32085,13 +32187,24 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId, setNodes, setEdges]);
-  const theme = (0, import_material21.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
-    spans.error && /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
-      import_material21.Alert,
+    if (layoutedNodes.length > 0) {
+      const NODE_W = 200;
+      const NODE_H = 80;
+      nodeBoundsRef.current = {
+        maxX: Math.max(...layoutedNodes.map((n) => n.position.x + NODE_W)),
+        maxY: Math.max(...layoutedNodes.map((n) => n.position.y + NODE_H)),
+        minX: Math.min(...layoutedNodes.map((n) => n.position.x)),
+        minY: Math.min(...layoutedNodes.map((n) => n.position.y))
+      };
+      updateExtent();
+    }
+  }, [spans.data, initialFocusEventId, setNodes, setEdges, updateExtent]);
+  const theme = (0, import_material22.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
+    spans.error && /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+      import_material22.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(import_material21.Button, { onClick: () => {
+        action: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_material22.Button, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -32102,8 +32215,8 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
-      import_react59.ReactFlow,
+    /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+      import_react61.ReactFlow,
       {
         "data-testid": TRACE_GRAPH_TEST_ID,
         edges,
@@ -32119,10 +32232,20 @@ var TraceGraph = ({
         },
         onNodesChange,
         selectNodesOnDrag: false,
+        translateExtent,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Controls, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
-            import_react59.Background,
+          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(ExtentUpdater, { onUpdate: updateExtent, viewportRef }),
+          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+            import_react61.MiniMap,
+            {
+              nodeComponent: MinimapServiceNode,
+              pannable: true,
+              zoomable: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+            import_react61.Background,
             {
               bgColor: theme.palette.background.default,
               color: theme.palette.text.disabled
@@ -32135,7 +32258,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 var DRAWER_WIDTH = "35%";
 var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
   flexGrow: 1,
@@ -32152,7 +32275,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material22.Drawer)(({ headerHeight }) => ({
+var StyledDrawer = (0, import_styles.styled)(import_material23.Drawer)(({ headerHeight }) => ({
   "& .MuiDrawer-paper": {
     bottom: 0,
     boxSizing: "border-box",
@@ -32181,8 +32304,8 @@ var TraceGraphView = ({
 }) => {
   const { deploymentContainer } = useAppInspector();
   const isVSCode = deploymentContainer.source === "vscode";
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
-    import_material22.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
+    import_material23.Box,
     {
       "data-testid": TRACE_GRAPH_PAGE_TEST_ID,
       sx: {
@@ -32194,14 +32317,14 @@ var TraceGraphView = ({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_material22.Box, { sx: { display: "flex", width: "100%", ...isVSCode && { pt: 1.5, px: 2 } }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_material22.Button, { onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_material23.Box, { sx: { display: "flex", width: "100%", ...isVSCode && { pt: 1.5, px: 2 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material23.Button, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_icons_material13.ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_material22.Box, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_icons_material13.ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_material23.Box, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
-          import_material22.Paper,
+        /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
+          import_material23.Paper,
           {
             sx: {
               display: "flex",
@@ -32212,14 +32335,14 @@ var TraceGraphView = ({
               ...isVSCode && { borderRadius: 0 }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
-                import_material22.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+                import_material23.Box,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(import_react63.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -32236,7 +32359,7 @@ var TraceGraphView = ({
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
             ]
           }
         )
@@ -32288,10 +32411,10 @@ async function fetchConnectedTracesWaterfall(api, traceIds, allSpans = /* @__PUR
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
   const { headerHeight } = useAppInspector();
-  const [spans, setSpans] = (0, import_react62.useState)();
-  const [loading, setLoading] = (0, import_react62.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react62.useState)();
-  const fetchSpans = (0, import_react62.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react64.useState)();
+  const [loading, setLoading] = (0, import_react64.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react64.useState)();
+  const fetchSpans = (0, import_react64.useCallback)(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, traceId);
@@ -32304,27 +32427,27 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react62.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react62.useState)(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = (0, import_react62.useRef)();
-  (0, import_react62.useEffect)(() => {
+  const [open, setOpen] = (0, import_react64.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react64.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react64.useRef)();
+  (0, import_react64.useEffect)(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
       spansReference.current = spans;
     }
   }, [spans, setSelectedEvent, spanId]);
-  const handleEventSelect = (0, import_react62.useCallback)((spanId2) => {
+  const handleEventSelect = (0, import_react64.useCallback)((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const navigateToSpansList = (0, import_react62.useCallback)(() => {
+  const navigateToSpansList = (0, import_react64.useCallback)(() => {
     onClose?.();
   }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
     TraceGraphView,
     {
       fetchError,
@@ -32346,7 +32469,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 };
 
 // src/pages/spans-list-page.tsx
-var import_jsx_runtime145 = require("react/jsx-runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 var SpansListPage = () => {
   const api = useAppInspectorApi();
   const {
@@ -32370,33 +32493,33 @@ var SpansListPage = () => {
     warningCount
   } = useSpans();
   const { checkStatus, phase, status, statusError } = useAppInspectorStatus();
-  const clearSpansSync = (0, import_react63.useCallback)(() => {
+  const clearSpansSync = (0, import_react65.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
   const localstackVersion = status?.localstackVersion ?? (statusError instanceof AppInspectorNotFoundError ? statusError.localstackVersion : void 0);
   const versionCompatibility = checkEmulatorVersion(localstackVersion);
   const searchSupported = emulatorSupportsSearch(localstackVersion);
-  const [bannerDismissed, setBannerDismissed] = (0, import_react63.useState)(false);
+  const [bannerDismissed, setBannerDismissed] = (0, import_react65.useState)(false);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react63.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react63.useState)();
-  const navigateToSpan = (0, import_react63.useCallback)((span) => {
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react65.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react65.useState)();
+  const navigateToSpan = (0, import_react65.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = (0, import_react63.useCallback)(() => {
+  const handleRetry = (0, import_react65.useCallback)(() => {
     checkStatus();
     fetchForward();
   }, [checkStatus, fetchForward]);
-  const handleEnable = (0, import_react63.useCallback)(async () => {
+  const handleEnable = (0, import_react65.useCallback)(async () => {
     await api.setStatus({ status: "ENABLED" });
     clearFetchError();
     checkStatus();
   }, [api, checkStatus, clearFetchError]);
-  const isDelayedRefetchRef = (0, import_react63.useRef)(false);
-  const delayedRefetchTimerRef = (0, import_react63.useRef)();
-  const prevFetchingForwardRef = (0, import_react63.useRef)(false);
-  (0, import_react63.useEffect)(() => {
+  const isDelayedRefetchRef = (0, import_react65.useRef)(false);
+  const delayedRefetchTimerRef = (0, import_react65.useRef)();
+  const prevFetchingForwardRef = (0, import_react65.useRef)(false);
+  (0, import_react65.useEffect)(() => {
     const wasFetching = prevFetchingForwardRef.current;
     prevFetchingForwardRef.current = fetchingForward;
     if (wasFetching && !fetchingForward) {
@@ -32417,10 +32540,10 @@ var SpansListPage = () => {
   switch (phase) {
     case "CHECKING_STATUS":
     case "CONNECTING_WS": {
-      return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StatusMessage, { phase });
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(StatusMessage, { phase });
     }
     case "DISABLED": {
-      return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
         StatusMessage,
         {
           onEnable: handleEnable,
@@ -32429,7 +32552,7 @@ var SpansListPage = () => {
       );
     }
     case "INCOMPATIBLE": {
-      return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
         StatusMessage,
         {
           localstackVersion,
@@ -32442,7 +32565,7 @@ var SpansListPage = () => {
       break;
     }
     case "UNREACHABLE": {
-      return /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
         StatusMessage,
         {
           onRetry: handleRetry,
@@ -32451,9 +32574,9 @@ var SpansListPage = () => {
       );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
-      import_material23.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+      import_material24.Box,
       {
         "data-testid": SPANS_LIST_PAGE_TEST_ID,
         sx: {
@@ -32468,7 +32591,7 @@ var SpansListPage = () => {
           width: "100%"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             EmulatorVersionBanner,
             {
               compatibility: bannerDismissed && versionCompatibility === "warning" ? "ok" : versionCompatibility,
@@ -32478,7 +32601,7 @@ var SpansListPage = () => {
               } : void 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             SpansList,
             {
               clearingSpans,
@@ -32507,7 +32630,7 @@ var SpansListPage = () => {
         ]
       }
     ),
-    selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(TraceGraphPage, { onClose: () => {
+    selectedTraceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(TraceGraphPage, { onClose: () => {
       setSelectedTraceId(void 0);
     }, spanId: selectedSpanId, traceId: selectedTraceId })
   ] });