@localstack/appinspector-ui 1.0.77 → 1.0.79

package/dist/index.cjs

@@ -488,7 +488,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material20 = require("@mui/material");
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/components/spans-list/spans-list.tsx
 var import_material5 = require("@mui/material");
@@ -12901,9 +12901,9 @@ var SpansDataGrid = ({
                 )) }, headerGroup.id);
               }) }),
               /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.TableBody, { children: [
-                spans === void 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
-                spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
-                order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+                (spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
+                !clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
+                !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
                   hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
                   hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: (() => {
@@ -12919,7 +12919,7 @@ var SpansDataGrid = ({
                   hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
-                order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
+                !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
                   hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
                   hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SpansDataGridRow, { row }, row.original.span_id)) }),
@@ -13316,7 +13316,7 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-spans.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/api/use-api.tsx
 var import_react42 = require("react");
@@ -13531,26 +13531,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();
     }
   };
 };
@@ -13842,15 +13840,109 @@ function useSpansWebSocket(options) {
   return { connected };
 }
 
+// src/hooks/use-throttled-items.ts
+var import_react47 = require("react");
+function useThrottledItems(items, getId, catchUpIncrement = 10) {
+  const [displayedItems, setDisplayedItems] = (0, import_react47.useState)([]);
+  const [isCatchingUpForward, setIsCatchingUpForward] = (0, import_react47.useState)(false);
+  const [isCatchingUpBackward, setIsCatchingUpBackward] = (0, import_react47.useState)(false);
+  const targetRef = (0, import_react47.useRef)([]);
+  const rafRef = (0, import_react47.useRef)(void 0);
+  const leftHiddenRef = (0, import_react47.useRef)(0);
+  const rightHiddenRef = (0, import_react47.useRef)(0);
+  const shrinkRafPendingRef = (0, import_react47.useRef)(false);
+  (0, import_react47.useEffect)(() => {
+    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]);
+  (0, import_react47.useEffect)(() => {
+    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] = (0, import_react47.useState)();
-  const [fetchError, setFetchError] = (0, import_react47.useState)();
-  const [fetchingForward, setFetchingForward] = (0, import_react47.useState)(false);
-  const [fetchingBackward, setFetchingBackward] = (0, import_react47.useState)(false);
-  const paginationBuffer = (0, import_react47.useRef)(createPaginationBuffer({
+  const [spans, setSpans] = (0, import_react48.useState)();
+  const throttledSpans = useThrottledItems(spans, (span) => span.span_id);
+  const [fetchError, setFetchError] = (0, import_react48.useState)();
+  const [fetchingForward, setFetchingForward] = (0, import_react48.useState)(false);
+  const [fetchingBackward, setFetchingBackward] = (0, import_react48.useState)(false);
+  const paginationBufferRef = (0, import_react48.useRef)(createPaginationBuffer({
     async fetchPage(token) {
       const response = await api.getSpans({
         limit: PAGE_SIZE,
@@ -13884,27 +13976,28 @@ var useSpans = () => {
       return a3.start_time_unix_nano < b3.start_time_unix_nano ? -1 : 1;
     }
   }));
-  const [hasMoreBackward, setHasMoreBackward] = (0, import_react47.useState)();
-  const [hasMoreForward, setHasMoreForward] = (0, import_react47.useState)();
-  const fetchForward = (0, import_react47.useCallback)(() => {
-    paginationBuffer.current.fetchForward();
+  const [hasMoreBackward, setHasMoreBackward] = (0, import_react48.useState)();
+  const [hasMoreForward, setHasMoreForward] = (0, import_react48.useState)();
+  const fetchForward = (0, import_react48.useCallback)(() => {
+    void paginationBufferRef.current.fetchForward();
   }, []);
-  const fetchBackward = (0, import_react47.useCallback)(() => {
-    paginationBuffer.current.fetchBackward();
+  const fetchBackward = (0, import_react48.useCallback)(() => {
+    void paginationBufferRef.current.fetchBackward();
   }, []);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const [clearingSpans, setClearingSpans] = (0, import_react47.useState)(false);
-  const clearSpans = (0, import_react47.useCallback)(async () => {
+  const [clearingSpans, setClearingSpans] = (0, import_react48.useState)(false);
+  const clearSpans = (0, import_react48.useCallback)(async () => {
     if (clearingSpans) {
       return;
     }
     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 }));
@@ -13912,17 +14005,25 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [clearingSpans, api]);
-  const [streamPaused, setStreamPaused] = (0, import_react47.useState)(false);
-  const toggleStream = (0, import_react47.useCallback)(() => {
+  const [streamPaused, setStreamPaused] = (0, import_react48.useState)(false);
+  const toggleStream = (0, import_react48.useCallback)(() => {
     setStreamPaused((previous) => !previous);
   }, []);
+  (0, import_react48.useEffect)(() => {
+    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();
         }
       }
     }
@@ -13938,7 +14039,7 @@ var useSpans = () => {
     fetchingForward,
     hasMoreBackward,
     hasMoreForward,
-    spans,
+    spans: throttledSpans.items,
     status,
     statusError,
     streamPaused,
@@ -13950,8 +14051,8 @@ var useSpans = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react61 = require("@xyflow/react");
-var import_react62 = require("react");
+var import_react62 = require("@xyflow/react");
+var import_react63 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_icons_material8 = require("@mui/icons-material");
@@ -13960,7 +14061,7 @@ var import_material14 = require("@mui/material");
 // node_modules/@textea/json-viewer/dist/index.mjs
 var import_jsx_runtime129 = require("react/jsx-runtime");
 var import_material7 = require("@mui/material");
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_zustand = require("zustand");
 var import_copy_to_clipboard = __toESM(require_copy_to_clipboard(), 1);
 function r(e2) {
@@ -14077,10 +14178,10 @@ var createJsonViewerStore = (props) => {
     };
   });
 };
-var JsonViewerStoreContext = (0, import_react48.createContext)(void 0);
+var JsonViewerStoreContext = (0, import_react49.createContext)(void 0);
 JsonViewerStoreContext.Provider;
 var useJsonViewerStore = (selector2, equalityFn) => {
-  const store = (0, import_react48.useContext)(JsonViewerStoreContext);
+  const store = (0, import_react49.useContext)(JsonViewerStoreContext);
   return (0, import_zustand.useStore)(store, selector2, equalityFn);
 };
 var useTextColor = () => {
@@ -14205,9 +14306,9 @@ async function copyString(value) {
 }
 function useClipboard() {
   let { timeout = 2e3 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  const [copied, setCopied] = (0, import_react48.useState)(false);
-  const copyTimeout = (0, import_react48.useRef)(null);
-  const handleCopyResult = (0, import_react48.useCallback)((value) => {
+  const [copied, setCopied] = (0, import_react49.useState)(false);
+  const copyTimeout = (0, import_react49.useRef)(null);
+  const handleCopyResult = (0, import_react49.useCallback)((value) => {
     const current = copyTimeout.current;
     if (current) {
       window.clearTimeout(current);
@@ -14218,7 +14319,7 @@ function useClipboard() {
     timeout
   ]);
   const onCopy = useJsonViewerStore((store) => store.onCopy);
-  const copy = (0, import_react48.useCallback)(async (path, value) => {
+  const copy = (0, import_react49.useCallback)(async (path, value) => {
     if (typeof onCopy === "function") {
       try {
         await onCopy(path, value, copyString);
@@ -14239,7 +14340,7 @@ function useClipboard() {
     handleCopyResult,
     onCopy
   ]);
-  const reset = (0, import_react48.useCallback)(() => {
+  const reset = (0, import_react49.useCallback)(() => {
     setCopied(false);
     if (copyTimeout.current) {
       clearTimeout(copyTimeout.current);
@@ -14253,7 +14354,7 @@ function useClipboard() {
 }
 function useIsCycleReference(path, value) {
   const rootValue = useJsonViewerStore((store) => store.value);
-  return (0, import_react48.useMemo)(() => isCycleReference(rootValue, path, value), [
+  return (0, import_react49.useMemo)(() => isCycleReference(rootValue, path, value), [
     path,
     value,
     rootValue
@@ -14266,7 +14367,7 @@ function useInspect(path, value, nestedIndex) {
   const setInspectCache = useJsonViewerStore((store) => store.setInspectCache);
   const defaultInspectDepth = useJsonViewerStore((store) => store.defaultInspectDepth);
   const defaultInspectControl = useJsonViewerStore((store) => store.defaultInspectControl);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const inspect2 = getInspectCache(path, nestedIndex);
     if (inspect2 !== void 0) {
       return;
@@ -14288,7 +14389,7 @@ function useInspect(path, value, nestedIndex) {
     value,
     setInspectCache
   ]);
-  const [inspect, set] = (0, import_react48.useState)(() => {
+  const [inspect, set] = (0, import_react49.useState)(() => {
     const shouldInspect = getInspectCache(path, nestedIndex);
     if (shouldInspect !== void 0) {
       return shouldInspect;
@@ -14298,7 +14399,7 @@ function useInspect(path, value, nestedIndex) {
     }
     return isTrap ? false : typeof defaultInspectControl === "function" ? defaultInspectControl(path, value) : depth < defaultInspectDepth;
   });
-  const setInspect = (0, import_react48.useCallback)((apply) => {
+  const setInspect = (0, import_react49.useCallback)((apply) => {
     set((oldState) => {
       const newState = typeof apply === "boolean" ? apply : apply(oldState);
       setInspectCache(path, newState, nestedIndex);
@@ -14338,7 +14439,7 @@ var DataTypeLabel = (param) => {
 };
 function defineEasyType(param) {
   let { is, serialize, deserialize, type, colorKey, displayTypeLabel = true, Renderer } = param;
-  const Render = /* @__PURE__ */ (0, import_react48.memo)(Renderer);
+  const Render = /* @__PURE__ */ (0, import_react49.memo)(Renderer);
   const EasyType = (props) => {
     const storeDisplayDataTypes = useJsonViewerStore((store) => store.displayDataTypes);
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
@@ -14375,7 +14476,7 @@ function defineEasyType(param) {
   const EasyTypeEditor = (param2) => {
     let { value, setValue, abortEditing, commitEditing } = param2;
     const color2 = useJsonViewerStore((store) => store.colorspace[colorKey]);
-    const handleKeyDown = (0, import_react48.useCallback)((event) => {
+    const handleKeyDown = (0, import_react49.useCallback)((event) => {
       if (event.key === "Enter") {
         event.preventDefault();
         commitEditing(value);
@@ -14389,7 +14490,7 @@ function defineEasyType(param) {
       commitEditing,
       value
     ]);
-    const handleChange = (0, import_react48.useCallback)((event) => {
+    const handleChange = (0, import_react49.useCallback)((event) => {
       setValue(event.target.value);
     }, [
       setValue
@@ -14714,17 +14815,17 @@ function inspectMetadata(value) {
 var PreObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = (0, import_react48.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = (0, import_react49.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = (0, import_react48.useMemo)(() => inspectMetadata(props.value), [
+  const sizeOfValue = (0, import_react49.useMemo)(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = (0, import_react48.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = (0, import_react49.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
@@ -14772,17 +14873,17 @@ var PreObjectType = (props) => {
 var PostObjectType = (props) => {
   const metadataColor = useJsonViewerStore((store) => store.colorspace.base04);
   const textColor = useTextColor();
-  const isArrayLike = (0, import_react48.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
+  const isArrayLike = (0, import_react49.useMemo)(() => Array.isArray(props.value) || props.value instanceof Set, [
     props.value
   ]);
-  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
     props.value
   ]);
-  const sizeOfValue = (0, import_react48.useMemo)(() => inspectMetadata(props.value), [
+  const sizeOfValue = (0, import_react49.useMemo)(() => inspectMetadata(props.value), [
     props.value
   ]);
   const displaySize = useJsonViewerStore((store) => store.displaySize);
-  const shouldDisplaySize = (0, import_react48.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
+  const shouldDisplaySize = (0, import_react49.useMemo)(() => typeof displaySize === "function" ? displaySize(props.path, props.value) : displaySize, [
     displaySize,
     props.path,
     props.value
@@ -14819,9 +14920,9 @@ 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] = (0, import_react48.useState)(useJsonViewerStore((store) => store.maxDisplayLength));
+  const [displayLength, setDisplayLength] = (0, import_react49.useState)(useJsonViewerStore((store) => store.maxDisplayLength));
   const objectSortKeys = useJsonViewerStore((store) => store.objectSortKeys);
-  const elements = (0, import_react48.useMemo)(() => {
+  const elements = (0, import_react49.useMemo)(() => {
     if (!props.inspect) {
       return null;
     }
@@ -14982,7 +15083,7 @@ var ObjectType = (props) => {
   const marginLeft = props.inspect ? 0.6 : 0;
   const width = useJsonViewerStore((store) => store.indentWidth);
   const indentWidth = props.inspect ? width - marginLeft : width;
-  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(props.value) === 0, [
+  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(props.value) === 0, [
     props.value
   ]);
   if (isEmptyValue) {
@@ -15025,7 +15126,7 @@ var stringType = defineEasyType({
   serialize: (value) => value,
   deserialize: (value) => value,
   Renderer: (props) => {
-    const [showRest, setShowRest] = (0, import_react48.useState)(false);
+    const [showRest, setShowRest] = (0, import_react49.useState)(false);
     const collapseStringsAfterLength = useJsonViewerStore((store) => store.collapseStringsAfterLength);
     const value = showRest ? props.value : props.value.slice(0, collapseStringsAfterLength);
     const hasRest = props.value.length > collapseStringsAfterLength;
@@ -15082,17 +15183,17 @@ function memorizeDataType(dataType) {
     var _prevProps_path, _nextProps_path;
     return Object.is(prevProps.value, nextProps.value) && prevProps.inspect && nextProps.inspect && ((_prevProps_path = prevProps.path) === null || _prevProps_path === void 0 ? void 0 : _prevProps_path.join(".")) === ((_nextProps_path = nextProps.path) === null || _nextProps_path === void 0 ? void 0 : _nextProps_path.join("."));
   }
-  dataType.Component = /* @__PURE__ */ (0, import_react48.memo)(dataType.Component, compare);
+  dataType.Component = /* @__PURE__ */ (0, import_react49.memo)(dataType.Component, compare);
   if (dataType.Editor) {
-    dataType.Editor = /* @__PURE__ */ (0, import_react48.memo)(dataType.Editor, function compare2(prevProps, nextProps) {
+    dataType.Editor = /* @__PURE__ */ (0, import_react49.memo)(dataType.Editor, function compare2(prevProps, nextProps) {
       return Object.is(prevProps.value, nextProps.value);
     });
   }
   if (dataType.PreComponent) {
-    dataType.PreComponent = /* @__PURE__ */ (0, import_react48.memo)(dataType.PreComponent, compare);
+    dataType.PreComponent = /* @__PURE__ */ (0, import_react49.memo)(dataType.PreComponent, compare);
   }
   if (dataType.PostComponent) {
-    dataType.PostComponent = /* @__PURE__ */ (0, import_react48.memo)(dataType.PostComponent, compare);
+    dataType.PostComponent = /* @__PURE__ */ (0, import_react49.memo)(dataType.PostComponent, compare);
   }
   return dataType;
 }
@@ -15118,10 +15219,10 @@ var createTypeRegistryStore = () => {
     }
   }));
 };
-var TypeRegistryStoreContext = /* @__PURE__ */ (0, import_react48.createContext)(void 0);
+var TypeRegistryStoreContext = /* @__PURE__ */ (0, import_react49.createContext)(void 0);
 TypeRegistryStoreContext.Provider;
 var useTypeRegistryStore = (selector2, equalityFn) => {
-  const store = (0, import_react48.useContext)(TypeRegistryStoreContext);
+  const store = (0, import_react49.useContext)(TypeRegistryStoreContext);
   return (0, import_zustand.useStore)(store, selector2, equalityFn);
 };
 function matchTypeComponents(value, path, registry) {
@@ -15141,7 +15242,7 @@ function matchTypeComponents(value, path, registry) {
 }
 function useTypeComponents(value, path) {
   const registry = useTypeRegistryStore((store) => store.registry);
-  return (0, import_react48.useMemo)(() => matchTypeComponents(value, path, registry), [
+  return (0, import_react49.useMemo)(() => matchTypeComponents(value, path, registry), [
     value,
     path,
     registry
@@ -15162,7 +15263,7 @@ var DataKeyPair = (props) => {
   var _props_editable;
   const propsEditable = (_props_editable = props.editable) !== null && _props_editable !== void 0 ? _props_editable : void 0;
   const storeEditable = useJsonViewerStore((store) => store.editable);
-  const editable = (0, import_react48.useMemo)(() => {
+  const editable = (0, import_react49.useMemo)(() => {
     if (storeEditable === false) {
       return false;
     }
@@ -15179,11 +15280,11 @@ var DataKeyPair = (props) => {
     storeEditable,
     value
   ]);
-  const [tempValue, setTempValue] = (0, import_react48.useState)("");
+  const [tempValue, setTempValue] = (0, import_react49.useState)("");
   const depth = path.length;
   const key = path[depth - 1];
   const hoverPath = useJsonViewerStore((store) => store.hoverPath);
-  const isHover = (0, import_react48.useMemo)(() => {
+  const isHover = (0, import_react49.useMemo)(() => {
     return hoverPath && path.every((value2, index) => value2 === hoverPath.path[index] && nestedIndex === hoverPath.nestedIndex);
   }, [
     hoverPath,
@@ -15193,7 +15294,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] = (0, import_react48.useState)(false);
+  const [editing, setEditing] = (0, import_react49.useState)(false);
   const onChange = useJsonViewerStore((store) => store.onChange);
   const keyColor = useTextColor();
   const numberKeyColor = useJsonViewerStore((store) => store.colorspace.base0C);
@@ -15205,7 +15306,7 @@ var DataKeyPair = (props) => {
   const isNumberKey = Number.isInteger(Number(key));
   const storeEnableAdd = useJsonViewerStore((store) => store.enableAdd);
   const onAdd = useJsonViewerStore((store) => store.onAdd);
-  const enableAdd = (0, import_react48.useMemo)(() => {
+  const enableAdd = (0, import_react49.useMemo)(() => {
     if (!onAdd || nestedIndex !== void 0) return false;
     if (storeEnableAdd === false) {
       return false;
@@ -15230,7 +15331,7 @@ var DataKeyPair = (props) => {
   ]);
   const storeEnableDelete = useJsonViewerStore((store) => store.enableDelete);
   const onDelete = useJsonViewerStore((store) => store.onDelete);
-  const enableDelete = (0, import_react48.useMemo)(() => {
+  const enableDelete = (0, import_react49.useMemo)(() => {
     if (!onDelete || nestedIndex !== void 0) return false;
     if (isRoot) {
       return false;
@@ -15257,7 +15358,7 @@ var DataKeyPair = (props) => {
   const enableClipboard = useJsonViewerStore((store) => store.enableClipboard);
   const { copy, copied } = useClipboard();
   const highlightUpdates = useJsonViewerStore((store) => store.highlightUpdates);
-  const isHighlight = (0, import_react48.useMemo)(() => {
+  const isHighlight = (0, import_react49.useMemo)(() => {
     if (!highlightUpdates || prevValue === void 0) return false;
     if (typeof value !== typeof prevValue) {
       return true;
@@ -15281,8 +15382,8 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const highlightContainer = (0, import_react48.useRef)();
-  (0, import_react48.useEffect)(() => {
+  const highlightContainer = (0, import_react49.useRef)();
+  (0, import_react49.useEffect)(() => {
     if (highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
       highlightContainer.current.animate([
         {
@@ -15302,7 +15403,7 @@ var DataKeyPair = (props) => {
     prevValue,
     value
   ]);
-  const startEditing = (0, import_react48.useCallback)((event) => {
+  const startEditing = (0, import_react49.useCallback)((event) => {
     event.preventDefault();
     if (serialize) setTempValue(serialize(value));
     setEditing(true);
@@ -15310,14 +15411,14 @@ var DataKeyPair = (props) => {
     serialize,
     value
   ]);
-  const abortEditing = (0, import_react48.useCallback)(() => {
+  const abortEditing = (0, import_react49.useCallback)(() => {
     setEditing(false);
     setTempValue("");
   }, [
     setEditing,
     setTempValue
   ]);
-  const commitEditing = (0, import_react48.useCallback)((newValue) => {
+  const commitEditing = (0, import_react49.useCallback)((newValue) => {
     setEditing(false);
     if (!deserialize) return;
     try {
@@ -15331,7 +15432,7 @@ var DataKeyPair = (props) => {
     path,
     value
   ]);
-  const actionIcons = (0, import_react48.useMemo)(() => {
+  const actionIcons = (0, import_react49.useMemo)(() => {
     if (editing) {
       return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_jsx_runtime129.Fragment, {
         children: [
@@ -15427,12 +15528,12 @@ var DataKeyPair = (props) => {
     abortEditing,
     commitEditing
   ]);
-  const isEmptyValue = (0, import_react48.useMemo)(() => getValueSize(value) === 0, [
+  const isEmptyValue = (0, import_react49.useMemo)(() => getValueSize(value) === 0, [
     value
   ]);
   const expandable = !isEmptyValue && !!(PreComponent && PostComponent);
   const KeyRenderer = useJsonViewerStore((store) => store.keyRenderer);
-  const downstreamProps = (0, import_react48.useMemo)(() => ({
+  const downstreamProps = (0, import_react49.useMemo)(() => ({
     path,
     inspect,
     setInspect,
@@ -15453,7 +15554,7 @@ var DataKeyPair = (props) => {
     sx: {
       userSelect: "text"
     },
-    onMouseEnter: (0, import_react48.useCallback)(() => setHover(path, nestedIndex), [
+    onMouseEnter: (0, import_react49.useCallback)(() => setHover(path, nestedIndex), [
       setHover,
       path,
       nestedIndex
@@ -15468,7 +15569,7 @@ var DataKeyPair = (props) => {
           letterSpacing: 0.5,
           opacity: 0.8
         },
-        onClick: (0, import_react48.useCallback)((event) => {
+        onClick: (0, import_react49.useCallback)((event) => {
           if (event.isDefaultPrevented()) {
             return;
           }
@@ -15578,8 +15679,8 @@ var DataKeyPair = (props) => {
 };
 var query = "(prefers-color-scheme: dark)";
 function useThemeDetector() {
-  const [isDark, setIsDark] = (0, import_react48.useState)(false);
-  (0, import_react48.useEffect)(() => {
+  const [isDark, setIsDark] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     const listener = (e2) => setIsDark(e2.matches);
     setIsDark(window.matchMedia(query).matches);
     const queryMedia = window.matchMedia(query);
@@ -15589,8 +15690,8 @@ function useThemeDetector() {
   return isDark;
 }
 function useSetIfNotUndefinedEffect(key, value) {
-  const { setState } = (0, import_react48.useContext)(JsonViewerStoreContext);
-  (0, import_react48.useEffect)(() => {
+  const { setState } = (0, import_react49.useContext)(JsonViewerStoreContext);
+  (0, import_react49.useEffect)(() => {
     if (value !== void 0) {
       setState({
         [key]: value
@@ -15603,8 +15704,8 @@ function useSetIfNotUndefinedEffect(key, value) {
   ]);
 }
 var JsonViewerInner = (props) => {
-  const { setState } = (0, import_react48.useContext)(JsonViewerStoreContext);
-  (0, import_react48.useEffect)(() => {
+  const { setState } = (0, import_react49.useContext)(JsonViewerStoreContext);
+  (0, import_react49.useEffect)(() => {
     setState((state) => ({
       prevValue: state.value,
       value: props.value
@@ -15632,7 +15733,7 @@ var JsonViewerInner = (props) => {
   useSetIfNotUndefinedEffect("displaySize", props.displaySize);
   useSetIfNotUndefinedEffect("displayComma", props.displayComma);
   useSetIfNotUndefinedEffect("highlightUpdates", props.highlightUpdates);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (props.theme === "light") {
       setState({
         colorspace: lightColorspace
@@ -15650,13 +15751,13 @@ var JsonViewerInner = (props) => {
     setState,
     props.theme
   ]);
-  const themeCls = (0, import_react48.useMemo)(() => {
+  const themeCls = (0, import_react49.useMemo)(() => {
     if (typeof props.theme === "object") return "json-viewer-theme-custom";
     return props.theme === "dark" ? "json-viewer-theme-dark" : "json-viewer-theme-light";
   }, [
     props.theme
   ]);
-  const onceRef = (0, import_react48.useRef)(true);
+  const onceRef = (0, import_react49.useRef)(true);
   const registerTypes = useTypeRegistryStore((store) => store.registerTypes);
   if (onceRef.current) {
     const allTypes = props.valueTypes ? [
@@ -15668,7 +15769,7 @@ var JsonViewerInner = (props) => {
     registerTypes(allTypes);
     onceRef.current = false;
   }
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const allTypes = props.valueTypes ? [
       ...predefinedTypes,
       ...props.valueTypes
@@ -15682,9 +15783,9 @@ var JsonViewerInner = (props) => {
   ]);
   const value = useJsonViewerStore((store) => store.value);
   const prevValue = useJsonViewerStore((store) => store.prevValue);
-  const emptyPath = (0, import_react48.useMemo)(() => [], []);
+  const emptyPath = (0, import_react49.useMemo)(() => [], []);
   const setHover = useJsonViewerStore((store) => store.setHover);
-  const onMouseLeave = (0, import_react48.useCallback)(() => setHover(null), [
+  const onMouseLeave = (0, import_react49.useCallback)(() => setHover(null), [
     setHover
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material7.Paper, {
@@ -15713,14 +15814,14 @@ var JsonViewer = function JsonViewer2(props) {
     }
   }
   const isAutoDarkTheme = useThemeDetector();
-  const themeType = (0, import_react48.useMemo)(() => {
+  const themeType = (0, import_react49.useMemo)(() => {
     var _props_theme;
     return props.theme === "auto" ? isAutoDarkTheme ? "dark" : "light" : (_props_theme = props.theme) !== null && _props_theme !== void 0 ? _props_theme : "light";
   }, [
     isAutoDarkTheme,
     props.theme
   ]);
-  const theme = (0, import_react48.useMemo)(() => {
+  const theme = (0, import_react49.useMemo)(() => {
     const backgroundColor = typeof themeType === "object" ? themeType.base00 : themeType === "dark" ? darkColorspace.base00 : lightColorspace.base00;
     const foregroundColor = typeof themeType === "object" ? themeType.base07 : themeType === "dark" ? darkColorspace.base07 : lightColorspace.base07;
     return (0, import_material7.createTheme)({
@@ -15748,8 +15849,8 @@ var JsonViewer = function JsonViewer2(props) {
     ...props,
     theme: themeType
   };
-  const jsonViewerStore = (0, import_react48.useMemo)(() => createJsonViewerStore(props), []);
-  const typeRegistryStore = (0, import_react48.useMemo)(() => createTypeRegistryStore(), []);
+  const jsonViewerStore = (0, import_react49.useMemo)(() => createJsonViewerStore(props), []);
+  const typeRegistryStore = (0, import_react49.useMemo)(() => createTypeRegistryStore(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_material7.ThemeProvider, {
     theme,
     children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TypeRegistryStoreContext.Provider, {
@@ -15765,7 +15866,7 @@ var JsonViewer = function JsonViewer2(props) {
 };
 
 // src/components/event-details/event-details.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -15964,7 +16065,7 @@ var getEventGroupsByType = (events) => {
 // src/components/event-details/event-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material3 = require("@mui/icons-material");
@@ -16115,7 +16216,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material5 = require("@mui/icons-material");
 var import_material10 = require("@mui/material");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -16125,8 +16226,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react49.useState)(false);
-  const parsedData = (0, import_react49.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
+  const parsedData = (0, import_react50.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -16196,15 +16297,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react50.useState)(false);
-  const textReference = (0, import_react50.useRef)(null);
-  const parsedMessage = (0, import_react50.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react50.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react51.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react51.useState)(false);
+  const textReference = (0, import_react51.useRef)(null);
+  const parsedMessage = (0, import_react51.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react51.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -16217,11 +16318,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react50.useMemo)(
+  const hasAdditionalContent = (0, import_react51.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react50.useMemo)(
+  const shouldShowToggle = (0, import_react51.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -26048,7 +26149,7 @@ var QueryStatus = {
 
 // src/components/event-details/lambda-invoke-logs-section.tsx
 var import_material12 = require("@mui/material");
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var POLL_INTERVAL_MS = 1e3;
 async function pollQueryResults(client, queryId) {
@@ -26066,7 +26167,7 @@ async function startLambdaLogsQuery(client, functionName2, requestId, startTimeS
 }
 function useCloudWatchLogsClient(region) {
   const { localstackEndpoint } = useAppInspector();
-  const client = (0, import_react51.useMemo)(() => new CloudWatchLogsClient({
+  const client = (0, import_react52.useMemo)(() => new CloudWatchLogsClient({
     credentials: {
       accessKeyId: "test",
       secretAccessKey: "test"
@@ -26077,12 +26178,12 @@ function useCloudWatchLogsClient(region) {
   return client;
 }
 function useLambdaInvokeLogs(functionName2, requestId, region, startTimeNano, endTimeNano) {
-  const [loading, setLoading] = (0, import_react51.useState)(true);
-  const [logs, setLogs] = (0, import_react51.useState)([]);
-  const [error, setError] = (0, import_react51.useState)();
-  const pollTimerRef = (0, import_react51.useRef)(null);
+  const [loading, setLoading] = (0, import_react52.useState)(true);
+  const [logs, setLogs] = (0, import_react52.useState)([]);
+  const [error, setError] = (0, import_react52.useState)();
+  const pollTimerRef = (0, import_react52.useRef)(null);
   const cloudWatchLogs = useCloudWatchLogsClient(region);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let cancelled = false;
     const startTimeSec = Math.floor(Number(BigInt(startTimeNano) / BigInt(1e9)));
     const endTimeSec = Math.ceil(Number(BigInt(endTimeNano) / BigInt(1e9)));
@@ -26156,10 +26257,10 @@ var LambdaInvokeLogsSection = ({ endTimeNano, functionName: functionName2, regio
 // src/components/event-details/toggle-section.tsx
 var import_icons_material7 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var ToggleSection = ({ action, children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react52.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react53.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material13.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
       import_material13.Box,
@@ -26226,11 +26327,11 @@ var checkIsSqsSendMessage = (span) => {
   return span.operation_name.startsWith("SendMessage");
 };
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const eventGroups = (0, import_react53.useMemo)(
+  const eventGroups = (0, import_react54.useMemo)(
     () => getEventGroupsByType(selectedEvent?.events ?? []),
     [selectedEvent?.events]
   );
-  const [parseNestedJson, setParseNestedJson] = (0, import_react53.useState)(true);
+  const [parseNestedJson, setParseNestedJson] = (0, import_react54.useState)(true);
   if (!selectedEvent) {
     return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { sx: { p: 3, textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Typography, { color: "text.secondary", variant: "body2", children: "Select an event to view details" }) });
   }
@@ -26399,7 +26500,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
     ] }) })
   ] });
 };
-var PayloadViewer = (0, import_react53.memo)(({ value }) => {
+var PayloadViewer = (0, import_react54.memo)(({ value }) => {
   const theme = (0, import_material14.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material14.Box, { sx: { backgroundColor: "background.default", borderRadius: 1, fontSize: 12, overflow: "auto", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     JsonViewer,
@@ -26417,22 +26518,22 @@ var PayloadViewer = (0, import_react53.memo)(({ value }) => {
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
 var import_material18 = require("@mui/material");
-var import_react59 = require("@xyflow/react");
-var import_react60 = require("react");
+var import_react60 = require("@xyflow/react");
+var import_react61 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material16 = require("@mui/material");
 var import_style = require("@xyflow/react/dist/style.css");
-var import_react55 = require("@xyflow/react");
-var import_react56 = require("react");
+var import_react56 = require("@xyflow/react");
+var import_react57 = require("react");
 
 // src/components/trace-graph/problem-indicator.tsx
 var import_icons_material9 = require("@mui/icons-material");
 var import_material15 = require("@mui/material");
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime137 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react54.useMemo)(() => {
+  const icon = (0, import_react55.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -26445,7 +26546,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color2 = (0, import_react54.useMemo)(() => {
+  const color2 = (0, import_react55.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -26484,7 +26585,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react56.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react57.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
@@ -26508,8 +26609,8 @@ var ServiceNode = (0, import_react56.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react55.Handle, { position: import_react55.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react55.Handle, { position: import_react55.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react56.Handle, { position: import_react56.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react56.Handle, { position: import_react56.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             ServiceCell,
             {
@@ -26599,8 +26700,8 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react57 = require("@xyflow/react");
-var import_react58 = require("react");
+var import_react58 = require("@xyflow/react");
+var import_react59 = require("react");
 var import_shallow = require("zustand/shallow");
 var import_jsx_runtime139 = require("react/jsx-runtime");
 var selector = (s2) => ({
@@ -26608,9 +26709,9 @@ var selector = (s2) => ({
   maxZoomReached: s2.transform[2] >= s2.maxZoom,
   minZoomReached: s2.transform[2] <= s2.minZoom
 });
-var Controls = (0, import_react58.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react57.useStore)(selector, import_shallow.shallow);
-  const { fitView, zoomIn, zoomOut } = (0, import_react57.useReactFlow)();
+var Controls = (0, import_react59.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react58.useStore)(selector, import_shallow.shallow);
+  const { fitView, zoomIn, zoomOut } = (0, import_react58.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -26679,9 +26780,9 @@ var TraceGraph = ({
   onRefresh,
   spans
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react59.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react59.useEdgesState)([]);
-  (0, import_react60.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react60.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react60.useEdgesState)([]);
+  (0, import_react61.useEffect)(() => {
     const allNodes = [];
     const allEdges = [];
     for (const span of spans.data ?? []) {
@@ -26696,15 +26797,15 @@ var TraceGraph = ({
         },
         id: span.span_id,
         position: { x: 0, y: 0 },
-        sourcePosition: import_react59.Position.Right,
-        targetPosition: import_react59.Position.Left,
+        sourcePosition: import_react60.Position.Right,
+        targetPosition: import_react60.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_react60.MarkerType.Arrow, width: 16 },
           source: span.parent_span_id,
           style: { stroke: "lightgray", strokeWidth: 1 },
           target: span.span_id
@@ -26713,7 +26814,7 @@ var TraceGraph = ({
       for (const linkedSpanId of span.linked_span_ids ?? []) {
         allEdges.push({
           id: `e-link-${linkedSpanId}-${span.span_id}`,
-          markerEnd: { color: "lightgray", height: 16, type: import_react59.MarkerType.Arrow, width: 16 },
+          markerEnd: { color: "lightgray", height: 16, type: import_react60.MarkerType.Arrow, width: 16 },
           source: linkedSpanId,
           style: { stroke: "lightgray", strokeWidth: 1 },
           // animated: true,
@@ -26748,7 +26849,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_react59.ReactFlow,
+      import_react60.ReactFlow,
       {
         "data-testid": "trace-graph",
         edges,
@@ -26767,7 +26868,7 @@ var TraceGraph = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_react59.Background,
+            import_react60.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -26872,7 +26973,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react62.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -26933,10 +27034,10 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  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_react63.useState)();
+  const [loading, setLoading] = (0, import_react63.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react63.useState)();
+  const fetchSpans = (0, import_react63.useCallback)(async () => {
     setLoading(true);
     try {
       const spans2 = await fetchConnectedTraces(api, [traceId]);
@@ -26949,28 +27050,28 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.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_react63.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react63.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react63.useRef)();
+  (0, import_react63.useEffect)(() => {
     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_react62.useCallback)((spanId2) => {
+  const handleEventSelect = (0, import_react63.useCallback)((spanId2) => {
     const span = spans?.find((s2) => s2.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = (0, import_react62.useCallback)(() => {
+  const handleRetry = (0, import_react63.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react62.useCallback)(() => {
+  const navigateToSpansList = (0, import_react63.useCallback)(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
@@ -27016,17 +27117,17 @@ var SpansListPage = () => {
     streamPaused,
     toggleStream
   } = useSpans();
-  const clearSpansSync = (0, import_react63.useCallback)(() => {
+  const clearSpansSync = (0, import_react64.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
   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_react64.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react64.useState)();
+  const navigateToSpan = (0, import_react64.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = (0, import_react63.useCallback)(() => {
+  const handleRetry = (0, import_react64.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";