@localstack/appinspector-ui 1.0.77 → 1.0.79

package/dist/index.js

@@ -484,7 +484,7 @@ var init_event_streams = __esm({
 
 // src/pages/spans-list-page.tsx
 import { Box as Box18 } from "@mui/material";
-import { useCallback as useCallback10, useState as useState15 } from "react";
+import { useCallback as useCallback10, useState as useState16 } from "react";
 
 // src/components/spans-list/spans-list.tsx
 import { Alert, Box as Box4, Button as Button2 } from "@mui/material";
@@ -12914,9 +12914,9 @@ var SpansDataGrid = ({
                 )) }, headerGroup.id);
               }) }),
               /* @__PURE__ */ jsxs120(TableBody, { children: [
-                spans === void 0 && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                spans?.length === 0 && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
-                order2 === "newest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
+                (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
                   hasRows && hasMoreForward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
                   hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: (() => {
@@ -12932,7 +12932,7 @@ var SpansDataGrid = ({
                   hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
-                order2 === "oldest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
+                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs120(Fragment3, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
                   hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
                   hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx124(SpansDataGridRow, { row }, row.original.span_id)) }),
@@ -13329,7 +13329,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-import { useCallback as useCallback7, useEffect as useEffect14, useRef as useRef10, useState as useState7 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect15, useRef as useRef11, useState as useState8 } from "react";
 
 // src/api/use-api.tsx
 import { createContext as createContext7, useContext as useContext14 } from "react";
@@ -13544,26 +13544,24 @@ var createPaginationBuffer = (options) => {
       void checkIfThereAreMoreItemsForward();
     },
     clear: () => {
-      if (items !== void 0) {
-        items = [];
-      }
+      items = [];
       hasMoreBackward = void 0;
       nextBackwardToken = void 0;
       hasMoreForward = void 0;
       nextForwardToken = void 0;
       reportDataChange();
     },
-    fetchBackward: () => {
+    fetchBackward: async () => {
       if (fetchingForward || fetchingBackward) {
         return;
       }
-      void fetchBackward();
+      await fetchBackward();
     },
-    fetchForward: () => {
+    fetchForward: async () => {
       if (fetchingForward || fetchingBackward) {
         return;
       }
-      void fetchForward();
+      await fetchForward();
     }
   };
 };
@@ -13855,15 +13853,109 @@ function useSpansWebSocket(options) {
   return { connected };
 }
 
+// src/hooks/use-throttled-items.ts
+import { useEffect as useEffect14, useRef as useRef10, useState as useState7 } from "react";
+function useThrottledItems(items, getId, catchUpIncrement = 10) {
+  const [displayedItems, setDisplayedItems] = useState7([]);
+  const [isCatchingUpForward, setIsCatchingUpForward] = useState7(false);
+  const [isCatchingUpBackward, setIsCatchingUpBackward] = useState7(false);
+  const targetRef = useRef10([]);
+  const rafRef = useRef10(void 0);
+  const leftHiddenRef = useRef10(0);
+  const rightHiddenRef = useRef10(0);
+  const shrinkRafPendingRef = useRef10(false);
+  useEffect14(() => {
+    const previousTarget = targetRef.current;
+    const target = items ?? [];
+    targetRef.current = target;
+    if (rafRef.current !== void 0) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = void 0;
+    }
+    if (target.length < previousTarget.length) {
+      leftHiddenRef.current = 0;
+      rightHiddenRef.current = 0;
+      shrinkRafPendingRef.current = true;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = void 0;
+        shrinkRafPendingRef.current = false;
+        setDisplayedItems(targetRef.current);
+        setIsCatchingUpForward(false);
+        setIsCatchingUpBackward(false);
+      });
+      return;
+    }
+    if (shrinkRafPendingRef.current) {
+      if (target.length === previousTarget.length) {
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = void 0;
+          shrinkRafPendingRef.current = false;
+          setDisplayedItems(targetRef.current);
+          setIsCatchingUpForward(false);
+          setIsCatchingUpBackward(false);
+        });
+        return;
+      }
+      shrinkRafPendingRef.current = false;
+    }
+    let targetGrew = false;
+    if (target.length > previousTarget.length) {
+      targetGrew = true;
+      const previousIds = new Set(previousTarget.map((item) => getId(item)));
+      const firstOldIndex = target.findIndex((item) => previousIds.has(getId(item)));
+      const leftGrowth = Math.max(0, firstOldIndex);
+      const lastOldIndex = target.findLastIndex((item) => previousIds.has(getId(item)));
+      const rightGrowth = lastOldIndex === -1 ? Math.max(0, target.length - previousTarget.length) : target.length - 1 - lastOldIndex;
+      leftHiddenRef.current += leftGrowth;
+      rightHiddenRef.current += rightGrowth;
+    }
+    if (leftHiddenRef.current > 0 || rightHiddenRef.current > 0) {
+      const step = () => {
+        const t2 = targetRef.current;
+        if (leftHiddenRef.current > 0) {
+          const inc = leftHiddenRef.current < catchUpIncrement ? 1 : catchUpIncrement;
+          leftHiddenRef.current = Math.max(0, leftHiddenRef.current - inc);
+        }
+        if (rightHiddenRef.current > 0) {
+          const inc = rightHiddenRef.current < catchUpIncrement ? 1 : catchUpIncrement;
+          rightHiddenRef.current = Math.max(0, rightHiddenRef.current - inc);
+        }
+        const left = leftHiddenRef.current;
+        const right = rightHiddenRef.current;
+        setDisplayedItems(t2.slice(left, right > 0 ? t2.length - right : void 0));
+        setIsCatchingUpForward(right > 0);
+        setIsCatchingUpBackward(left > 0);
+        rafRef.current = left > 0 || right > 0 ? requestAnimationFrame(step) : void 0;
+      };
+      rafRef.current = requestAnimationFrame(step);
+    } else if (targetGrew) {
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = void 0;
+        setDisplayedItems(targetRef.current);
+      });
+    }
+  }, [items, getId, catchUpIncrement]);
+  useEffect14(() => {
+    return () => {
+      if (rafRef.current !== void 0) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = void 0;
+      }
+    };
+  }, []);
+  return { isCatchingUpBackward, isCatchingUpForward, items: displayedItems };
+}
+
 // src/hooks/use-spans.ts
 var PAGE_SIZE = 30;
 var useSpans = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState7();
-  const [fetchError, setFetchError] = useState7();
-  const [fetchingForward, setFetchingForward] = useState7(false);
-  const [fetchingBackward, setFetchingBackward] = useState7(false);
-  const paginationBuffer = useRef10(createPaginationBuffer({
+  const [spans, setSpans] = useState8();
+  const throttledSpans = useThrottledItems(spans, (span) => span.span_id);
+  const [fetchError, setFetchError] = useState8();
+  const [fetchingForward, setFetchingForward] = useState8(false);
+  const [fetchingBackward, setFetchingBackward] = useState8(false);
+  const paginationBufferRef = useRef11(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
         limit: PAGE_SIZE,
@@ -13897,19 +13989,19 @@ var useSpans = () => {
       return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
     }
   }));
-  const [hasMoreBackward, setHasMoreBackward] = useState7();
-  const [hasMoreForward, setHasMoreForward] = useState7();
+  const [hasMoreBackward, setHasMoreBackward] = useState8();
+  const [hasMoreForward, setHasMoreForward] = useState8();
   const fetchForward = useCallback7(() => {
-    paginationBuffer.current.fetchForward();
+    void paginationBufferRef.current.fetchForward();
   }, []);
   const fetchBackward = useCallback7(() => {
-    paginationBuffer.current.fetchBackward();
+    void paginationBufferRef.current.fetchBackward();
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const [clearingSpans, setClearingSpans] = useState7(false);
+  const [clearingSpans, setClearingSpans] = useState8(false);
   const clearSpans = useCallback7(async () => {
     if (clearingSpans) {
       return;
@@ -13917,7 +14009,8 @@ var useSpans = () => {
     setClearingSpans(true);
     try {
       await api.deleteSpans();
-      paginationBuffer.current.clear();
+      paginationBufferRef.current.clear();
+      await paginationBufferRef.current.fetchForward();
     } catch (error) {
       console.error("Failed to delete spans:", error);
       setFetchError(error instanceof Error ? error : new Error("Failed to delete spans", { cause: error }));
@@ -13925,17 +14018,25 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [clearingSpans, api]);
-  const [streamPaused, setStreamPaused] = useState7(false);
+  const [streamPaused, setStreamPaused] = useState8(false);
   const toggleStream = useCallback7(() => {
     setStreamPaused((previous) => !previous);
   }, []);
+  useEffect15(() => {
+    if (hasMoreForward === true && !fetchingForward && !streamPaused) {
+      void paginationBufferRef.current.fetchForward();
+    }
+  }, [hasMoreForward, fetchingForward, streamPaused]);
   useSpansWebSocket({
     onMessage: () => {
+      if (clearingSpans) {
+        return;
+      }
       if (!hasMoreForward) {
         if (streamPaused) {
-          paginationBuffer.current.checkIfThereAreMoreItemsForward();
+          paginationBufferRef.current.checkIfThereAreMoreItemsForward();
         } else {
-          paginationBuffer.current.fetchForward();
+          void paginationBufferRef.current.fetchForward();
         }
       }
     }
@@ -13951,7 +14052,7 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    spans,
+    spans: throttledSpans.items,
     status,
     statusError,
     streamPaused,
@@ -13964,7 +14065,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box17, Button as Button5, Drawer, Paper as Paper3 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback9, useEffect as useEffect19, useRef as useRef14, useState as useState14 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect20, useRef as useRef15, useState as useState15 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Close as Close2 } from "@mui/icons-material";
@@ -13974,7 +14075,7 @@ import { Box as Box13, Chip as Chip3, Divider as Divider2, FormControlLabel as F
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 import { jsx as jsx129, jsxs as jsxs123, Fragment as Fragment5 } from "react/jsx-runtime";
 import { Box as Box6, InputBase, NoSsr, SvgIcon, createTheme, ThemeProvider, Paper as Paper2 } from "@mui/material";
-import { createContext as createContext9, useContext as useContext16, useState as useState8, useRef as useRef11, useCallback as useCallback8, useMemo as useMemo7, useEffect as useEffect15, memo as memo9 } from "react";
+import { createContext as createContext9, useContext as useContext16, useState as useState9, useRef as useRef12, useCallback as useCallback8, useMemo as useMemo7, useEffect as useEffect16, memo as memo9 } from "react";
 import { create, useStore, createStore } from "zustand";
 function r(e2) {
   var t2, f2, n2 = "";
@@ -14218,8 +14319,8 @@ async function copyString(value) {
 }
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [copied, setCopied] = useState8(false);
-  const copyTimeout = useRef11(null);
+  const [copied, setCopied] = useState9(false);
+  const copyTimeout = useRef12(null);
   const handleCopyResult = useCallback8((value) => {
     const current = copyTimeout.current;
     if (current) {
@@ -14279,7 +14380,7 @@ function useInspect(path, value, nestedIndex) {
   const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
   const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
   const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
-  useEffect15(() => {
+  useEffect16(() => {
     const inspect2 = getInspectCache(path, nestedIndex);
     if (inspect2 !== void 0) {
       return;
@@ -14301,7 +14402,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = useState8(() => {
+  const [inspect, set] = useState9(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -14832,7 +14933,7 @@ var ObjectType = (props) => {
   const borderColor = useJsonViewerStore((store) => store.colorspace.base02);
   const groupArraysAfterLength = useJsonViewerStore((store) => store.groupArraysAfterLength);
   const isTrap = useIsCycleReference(props.path, props.value);
-  const [displayLength, setDisplayLength] = useState8(useJsonViewerStore((store) => store.maxDisplayLength));
+  const [displayLength, setDisplayLength] = useState9(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
   const elements = useMemo7(() => {
     if (!props.inspect) {
@@ -15038,7 +15139,7 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = useState8(false);
+    const [showRest, setShowRest] = useState9(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
@@ -15192,7 +15293,7 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = useState8("");
+  const [tempValue, setTempValue] = useState9("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
@@ -15206,7 +15307,7 @@ var DataKeyPair = (props) => {
   const setHover = useJsonViewerStore((store) => store.setHover);
   const root = useJsonViewerStore((store) => store.value);
   const [inspect, setInspect] = useInspect(path, value, nestedIndex);
-  const [editing, setEditing] = useState8(false);
+  const [editing, setEditing] = useState9(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -15294,8 +15395,8 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const highlightContainer = useRef11();
-  useEffect15(() => {
+  const highlightContainer = useRef12();
+  useEffect16(() => {
     if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
       highlightContainer.current.animate([
         {
@@ -15591,8 +15692,8 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = useState8(false);
-  useEffect15(() => {
+  const [isDark, setIsDark] = useState9(false);
+  useEffect16(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
     const queryMedia = window.matchMedia(query);
@@ -15603,7 +15704,7 @@ function useThemeDetector() {
 }
 function useSetIfNotUndefinedEffect(key, value) {
   const { setState } = useContext16(JsonViewerStoreContext);
-  useEffect15(() => {
+  useEffect16(() => {
     if (value !== void 0) {
       setState({
         [key]: value
@@ -15617,7 +15718,7 @@ function useSetIfNotUndefinedEffect(key, value) {
 }
 var JsonViewerInner = (props) => {
   const { setState } = useContext16(JsonViewerStoreContext);
-  useEffect15(() => {
+  useEffect16(() => {
     setState((state) => ({
       prevValue: state.value,
       value: props.value
@@ -15645,7 +15746,7 @@ var JsonViewerInner = (props) => {
   useSetIfNotUndefinedEffect("displaySize", props.displaySize);
   useSetIfNotUndefinedEffect("displayComma", props.displayComma);
   useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
-  useEffect15(() => {
+  useEffect16(() => {
     if (props.theme === "light") {
       setState({
         colorspace: lightColorspace
@@ -15669,7 +15770,7 @@ var JsonViewerInner = (props) => {
   }, [
     props.theme
   ]);
-  const onceRef = useRef11(true);
+  const onceRef = useRef12(true);
   const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
   if (onceRef.current) {
     const allTypes = props.valueTypes ? [
@@ -15681,7 +15782,7 @@ var JsonViewerInner = (props) => {
     registerTypes(allTypes);
     onceRef.current = false;
   }
-  useEffect15(() => {
+  useEffect16(() => {
     const allTypes = props.valueTypes ? [
       ...predefinedTypes,
       ...props.valueTypes
@@ -15778,7 +15879,7 @@ var JsonViewer = function JsonViewer2(props) {
 };
 
 // src/components/event-details/event-details.tsx
-import { memo as memo10, useMemo as useMemo11, useState as useState13 } from "react";
+import { memo as memo10, useMemo as useMemo11, useState as useState14 } from "react";
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -15977,7 +16078,7 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/event-detail.tsx
 import { KeyboardArrowDown as KeyboardArrowDown2, KeyboardArrowRight as KeyboardArrowRight2 } from "@mui/icons-material";
 import { Box as Box10, Grid as Grid3, IconButton as IconButton2, Typography as Typography6 } from "@mui/material";
-import { useEffect as useEffect16, useMemo as useMemo9, useRef as useRef12, useState as useState10 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo9, useRef as useRef13, useState as useState11 } from "react";
 
 // src/components/status-icon.tsx
 import { Cancel, CheckCircle, Error as Error2, Info, RemoveCircle } from "@mui/icons-material";
@@ -16128,7 +16229,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
 import { Box as Box9, Chip as Chip2, IconButton, Typography as Typography5 } from "@mui/material";
-import { useMemo as useMemo8, useState as useState9 } from "react";
+import { useMemo as useMemo8, useState as useState10 } from "react";
 import { jsx as jsx132, jsxs as jsxs125 } from "react/jsx-runtime";
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -16138,7 +16239,7 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = useState9(false);
+  const [isOpen, setIsOpen] = useState10(false);
   const parsedData = useMemo8(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
@@ -16209,15 +16310,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ jsxs126(Grid3, { contai
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = useState10(false);
-  const [isOverflowing, setIsOverflowing] = useState10(false);
-  const textReference = useRef12(null);
+  const [isOpen, setIsOpen] = useState11(false);
+  const [isOverflowing, setIsOverflowing] = useState11(false);
+  const textReference = useRef13(null);
   const parsedMessage = useMemo9(() => parseEventMessage(event), [event]);
   const isIAMPolicyEvent = useMemo9(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -26061,7 +26162,7 @@ var QueryStatus = {
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
 import { Box as Box11, CircularProgress as CircularProgress2, Stack, Typography as Typography7 } from "@mui/material";
-import { useEffect as useEffect17, useMemo as useMemo10, useRef as useRef13, useState as useState11 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo10, useRef as useRef14, useState as useState12 } from "react";
 import { jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
@@ -26090,12 +26191,12 @@ function useCloudWatchLogsClient(region) {
   return client;
 }
 function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
-  const [loading, setLoading] = useState11(true);
-  const [logs, setLogs] = useState11([]);
-  const [error, setError] = useState11();
-  const pollTimerRef = useRef13(null);
+  const [loading, setLoading] = useState12(true);
+  const [logs, setLogs] = useState12([]);
+  const [error, setError] = useState12();
+  const pollTimerRef = useRef14(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
-  useEffect17(() => {
+  useEffect18(() => {
     let cancelled = false;
     const startTimeSec = Math.floor(Number(BigInt(startTimeNano) / BigInt(1e9)));
     const endTimeSec = Math.ceil(Number(BigInt(endTimeNano) / BigInt(1e9)));
@@ -26169,10 +26270,10 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
 // src/components/event-details/toggle-section.tsx
 import { KeyboardArrowDown as KeyboardArrowDown3, KeyboardArrowRight as KeyboardArrowRight3 } from "@mui/icons-material";
 import { Box as Box12, Typography as Typography8 } from "@mui/material";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = useState12(initialOpen);
+  const [isOpen, setIsOpen] = useState13(initialOpen);
   return /* @__PURE__ */ jsxs128(Box12, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ jsxs128(
       Box12,
@@ -26243,7 +26344,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = useState13(true);
+  const [parseNestedJson, setParseNestedJson] = useState14(true);
   if (!selectedEvent) {
     return /* @__PURE__ */ jsx136(Box13, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ jsx136(Typography9, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
@@ -26431,7 +26532,7 @@ var PayloadViewer = memo10(({ value }) => {
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme4 } from "@mui/material";
 import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box15, Stack as Stack3, Typography as Typography10 } from "@mui/material";
@@ -26694,7 +26795,7 @@ var TraceGraph = ({
 }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useEdgesState([]);
-  useEffect18(() => {
+  useEffect19(() => {
     const allNodes = [];
     const allEdges = [];
     for (const span of spans.data ?? []) {
@@ -26946,9 +27047,9 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = useState14();
-  const [loading, setLoading] = useState14(false);
-  const [fetchError, setFetchError] = useState14();
+  const [spans, setSpans] = useState15();
+  const [loading, setLoading] = useState15(false);
+  const [fetchError, setFetchError] = useState15();
   const fetchSpans = useCallback9(async () => {
     setLoading(true);
     try {
@@ -26962,13 +27063,13 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  useEffect19(() => {
+  useEffect20(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = useState14(true);
-  const [selectedEvent, setSelectedEvent] = useState14(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = useRef14();
-  useEffect19(() => {
+  const [open, setOpen] = useState15(true);
+  const [selectedEvent, setSelectedEvent] = useState15(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = useRef15();
+  useEffect20(() => {
     if (!spansReference.current && spans) {
       setSelectedEvent(spans.find((span) => span.span_id === spanId));
       spansReference.current = spans;
@@ -27033,8 +27134,8 @@ var SpansListPage = () => {
     void clearSpans();
   }, [clearSpans]);
   const [order2, setOrder] = useLocalStorage("spans-order", "oldest_first");
-  const [selectedTraceId, setSelectedTraceId] = useState15();
-  const [selectedSpanId, setSelectedSpanId] = useState15();
+  const [selectedTraceId, setSelectedTraceId] = useState16();
+  const [selectedSpanId, setSelectedSpanId] = useState16();
   const navigateToSpan = useCallback10((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);