@localstack/appinspector-ui 1.0.37 → 1.0.39

package/dist/index.cjs

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material20 = require("@mui/material");
-var import_react21 = require("react");
+var import_react25 = require("react");
 
 // src/api/use-api.tsx
 var import_react = require("react");
@@ -61,101 +61,114 @@ var import_material5 = require("@mui/material");
 var import_icons_material = require("@mui/icons-material");
 var import_material4 = require("@mui/material");
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_react4 = require("react");
+var import_react8 = require("react");
 
 // src/components/cells/responsive-timestamp-cell.tsx
 var import_react2 = require("react");
-
-// src/utils/time.ts
-function unixNanoToDate(unixNanoString) {
-  if (!unixNanoString) return void 0;
-  const milliseconds = Number(BigInt(unixNanoString) / BigInt("1000000"));
-  return new Date(milliseconds);
-}
-
-// src/components/cells/responsive-timestamp-cell.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ResponsiveTimestampCell = ({ locale, value }) => {
-  const [columnWidth, setColumnWidth] = (0, import_react2.useState)(0);
-  const cellReference = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
-    const updateWidth = () => {
-      if (cellReference.current) {
-        const width = cellReference.current.offsetWidth;
-        setColumnWidth(width);
-      }
-    };
-    updateWidth();
-    window.addEventListener("resize", updateWidth);
-    if (cellReference.current) {
-      const resizeObserver = new ResizeObserver(updateWidth);
-      resizeObserver.observe(cellReference.current);
-      return () => {
-        resizeObserver.disconnect();
-        window.removeEventListener("resize", updateWidth);
-      };
+var ResponsiveTimestampCell = (0, import_react2.memo)(({ date, locale }) => {
+  const format = new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    fractionalSecondDigits: 3,
+    hour: "2-digit",
+    hour12: false,
+    minute: "2-digit",
+    month: "2-digit",
+    second: "2-digit",
+    year: "numeric"
+  });
+  const formattedTime = format.format(date);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: "100%" }, children: formattedTime });
+});
+
+// src/utils/logger.ts
+var getIsDevelopment = () => {
+  try {
+    return false;
+  } catch {
+    return false;
+  }
+};
+var isDevelopment = getIsDevelopment();
+var logger = {
+  debug: (message, data) => {
+    if (isDevelopment) {
+      console.debug(`[DEBUG] ${message}`, data === void 0 ? "" : data);
     }
-  }, []);
-  const formattedTime = (0, import_react2.useMemo)(() => {
-    if (!value) return;
-    const date = unixNanoToDate(value);
-    if (!date) return;
-    if (columnWidth < 100) {
-      const formatter = new Intl.DateTimeFormat(locale, {
-        hour: "2-digit",
-        hour12: false,
-        minute: "2-digit",
-        second: "2-digit"
-      });
-      return formatter.format(date);
-    } else if (columnWidth < 160) {
-      const formatter = new Intl.DateTimeFormat(locale, {
-        hour: "2-digit",
-        hour12: false,
-        minute: "2-digit",
-        second: "2-digit"
-      });
-      const timeString = formatter.format(date);
-      const ms = date.getMilliseconds().toString().padStart(3, "0");
-      return `${timeString}:${ms}`;
-    } else {
-      const dateFormatter = new Intl.DateTimeFormat(locale, {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric"
-      });
-      const timeFormatter = new Intl.DateTimeFormat(locale, {
-        hour: "2-digit",
-        hour12: false,
-        minute: "2-digit",
-        second: "2-digit"
-      });
-      const dateString = dateFormatter.format(date);
-      const timeString = timeFormatter.format(date);
-      const ms = date.getMilliseconds().toString().padStart(3, "0");
-      return `${dateString} - ${timeString}:${ms}`;
+  },
+  error: (message, data) => {
+    if (isDevelopment) {
+      console.error(`[ERROR] ${message}`, data === void 0 ? "" : data);
     }
-  }, [value, columnWidth, locale]);
-  if (!formattedTime) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "N/A" });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: cellReference, style: { width: "100%" }, children: formattedTime });
+  },
+  info: (message, data) => {
+    if (isDevelopment) {
+      console.info(`[INFO] ${message}`, data === void 0 ? "" : data);
+    }
+  },
+  warn: (message, data) => {
+    if (isDevelopment) {
+      console.warn(`[WARN] ${message}`, data === void 0 ? "" : data);
+    }
+  }
+};
+var createScopedLogger = (scope) => ({
+  debug: (message, data) => {
+    logger.debug(`[${scope}] ${message}`, data);
+  },
+  error: (message, data) => {
+    logger.error(`[${scope}] ${message}`, data);
+  },
+  info: (message, data) => {
+    logger.info(`[${scope}] ${message}`, data);
+  },
+  warn: (message, data) => {
+    logger.warn(`[${scope}] ${message}`, data);
+  }
+});
+
+// src/utils/search-in-object.ts
+var searchInObject = (object, searchTerm, skipKeys = []) => {
+  if (!object) return false;
+  if (!searchTerm || searchTerm.trim() === "") return true;
+  const normalizedSearchTerm = searchTerm.toLowerCase().trim();
+  if (typeof object === "string") {
+    return object.toLowerCase().includes(normalizedSearchTerm);
+  }
+  if (typeof object === "number") {
+    return String(object).toLowerCase().includes(normalizedSearchTerm);
+  }
+  if (typeof object === "boolean") {
+    return String(object).toLowerCase().includes(normalizedSearchTerm);
+  }
+  if (Array.isArray(object)) {
+    return object.some((item) => searchInObject(item, searchTerm, skipKeys));
+  }
+  if (typeof object === "object") {
+    return Object.entries(object).filter(([key]) => !skipKeys.includes(key)).some(([, value]) => searchInObject(value, searchTerm, skipKeys));
+  }
+  return false;
 };
 
 // src/components/cells/service-cell.tsx
 var import_material3 = require("@mui/material");
+var import_react7 = require("react");
 
 // src/components/aws-service-icon/aws-service-icon.tsx
 var import_material = require("@mui/material");
+var import_react5 = require("react");
 
 // src/utils/wrap-in-component.tsx
-var WrapInComponent = ({ children, wrap, wrapperFn }) => {
+var import_react3 = require("react");
+var WrapInComponent = (0, import_react3.memo)(({ children, wrap, wrapperFn }) => {
   if (wrap) {
     return wrapperFn(children);
   }
   return children;
-};
+});
 
 // src/components/aws-service-icon/icons/index.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/types/service-names.ts
 var SERVICE_NAME = {
@@ -2470,7 +2483,7 @@ var ICONS_MAP = {
   [SERVICE_NAME.WAFV2]: wafv2_default,
   [SERVICE_NAME.XRAY]: xray_default
 };
-var AwsServiceIconBase = (0, import_react3.memo)((props) => {
+var AwsServiceIconBase = (0, import_react4.memo)((props) => {
   const Icon = ICONS_MAP[props.service] ?? ICONS_MAP.infrastructure;
   return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { ...props });
 });
@@ -2479,7 +2492,7 @@ var supportedServiceNames = Object.keys(ICONS_MAP);
 // src/components/aws-service-icon/aws-service-icon.tsx
 var import_jsx_runtime122 = require("react/jsx-runtime");
 var sizes = { large: [32, 32], medium: [22, 22], small: [11, 11] };
-var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
+var AwsServiceIcon = (0, import_react5.memo)(({ hideTooltip, service, size = "medium", title }) => {
   const [width, height] = sizes[size];
   return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
     WrapInComponent,
@@ -2489,12 +2502,13 @@ var AwsServiceIcon = ({ hideTooltip, service, size = "medium", title }) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(AwsServiceIconBase, { height, service, style: { display: "block" }, width })
     }
   );
-};
+});
 
 // src/components/cells/pill-cell.tsx
 var import_material2 = require("@mui/material");
+var import_react6 = require("react");
 var import_jsx_runtime123 = require("react/jsx-runtime");
-var PillCell = ({
+var PillCell = (0, import_react6.memo)(({
   backgroundColor,
   children,
   height = "24px",
@@ -2523,11 +2537,11 @@ var PillCell = ({
       children
     }
   );
-};
+});
 
 // src/components/cells/service-cell.tsx
 var import_jsx_runtime124 = require("react/jsx-runtime");
-var ServiceCell = ({
+var ServiceCell = (0, import_react7.memo)(({
   height = "24px",
   resource,
   selected,
@@ -2600,77 +2614,8 @@ var ServiceCell = ({
       )
     ] }) : void 0
   ] }) });
-};
-ServiceCell.displayName = "ServiceCell";
-
-// src/utils/logger.ts
-var getIsDevelopment = () => {
-  try {
-    return false;
-  } catch {
-    return false;
-  }
-};
-var isDevelopment = getIsDevelopment();
-var logger = {
-  debug: (message, data) => {
-    if (isDevelopment) {
-      console.debug(`[DEBUG] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  error: (message, data) => {
-    if (isDevelopment) {
-      console.error(`[ERROR] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  info: (message, data) => {
-    if (isDevelopment) {
-      console.info(`[INFO] ${message}`, data === void 0 ? "" : data);
-    }
-  },
-  warn: (message, data) => {
-    if (isDevelopment) {
-      console.warn(`[WARN] ${message}`, data === void 0 ? "" : data);
-    }
-  }
-};
-var createScopedLogger = (scope) => ({
-  debug: (message, data) => {
-    logger.debug(`[${scope}] ${message}`, data);
-  },
-  error: (message, data) => {
-    logger.error(`[${scope}] ${message}`, data);
-  },
-  info: (message, data) => {
-    logger.info(`[${scope}] ${message}`, data);
-  },
-  warn: (message, data) => {
-    logger.warn(`[${scope}] ${message}`, data);
-  }
 });
-
-// src/utils/search-in-object.ts
-var searchInObject = (object, searchTerm, skipKeys = []) => {
-  if (!object) return false;
-  if (!searchTerm || searchTerm.trim() === "") return true;
-  const normalizedSearchTerm = searchTerm.toLowerCase().trim();
-  if (typeof object === "string") {
-    return object.toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (typeof object === "number") {
-    return String(object).toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (typeof object === "boolean") {
-    return String(object).toLowerCase().includes(normalizedSearchTerm);
-  }
-  if (Array.isArray(object)) {
-    return object.some((item) => searchInObject(item, searchTerm, skipKeys));
-  }
-  if (typeof object === "object") {
-    return Object.entries(object).filter(([key]) => !skipKeys.includes(key)).some(([, value]) => searchInObject(value, searchTerm, skipKeys));
-  }
-  return false;
-};
+ServiceCell.displayName = "ServiceCell";
 
 // src/components/spans-list/spans-data-grid.tsx
 var import_jsx_runtime125 = require("react/jsx-runtime");
@@ -2678,12 +2623,6 @@ var resourceNameComparator = (v1 = "", v2 = "") => {
   return v1.localeCompare(v2);
 };
 var columns = [
-  // {
-  //   field: 'status',
-  //   renderHeader: () => null,
-  //   width: 50,
-  //   renderCell: (parameters) => <StatusCell span={parameters.row} />,
-  // },
   {
     field: "trace_id",
     headerName: "Trace",
@@ -2707,7 +2646,7 @@ var columns = [
   {
     field: "start_time_unix_nano",
     headerName: "Time",
-    renderCell: (parameters) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ResponsiveTimestampCell, { value: parameters.value }),
+    renderCell: (parameters) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(ResponsiveTimestampCell, { date: parameters.value?.startTime }),
     type: "string",
     width: 180
   },
@@ -2759,8 +2698,8 @@ var SpansDataGrid = ({
   // setRows,
   sortingOption = defaultSortingOption
 }) => {
-  const [searchTerm, setSearchTerm] = (0, import_react4.useState)(() => localStorage.getItem("spansSearchTerm") ?? "");
-  const [sortModel, setSortModel] = (0, import_react4.useState)(() => {
+  const [searchTerm, setSearchTerm] = (0, import_react8.useState)(() => localStorage.getItem("spansSearchTerm") ?? "");
+  const [sortModel, setSortModel] = (0, import_react8.useState)(() => {
     const savedSorting = localStorage.getItem("spansSortModel");
     if (savedSorting) {
       try {
@@ -2776,27 +2715,27 @@ var SpansDataGrid = ({
       }
     ];
   });
-  const handleRowClick = (0, import_react4.useCallback)((parameters) => {
+  const handleRowClick = (0, import_react8.useCallback)((parameters) => {
     onSpanClick(parameters.row);
   }, [onSpanClick]);
-  const handleSearchTermChange = (0, import_react4.useCallback)((span) => {
+  const handleSearchTermChange = (0, import_react8.useCallback)((span) => {
     const newValue = span.target.value;
     setSearchTerm(newValue);
     localStorage.setItem("spansSearchTerm", newValue);
   }, []);
-  const handleSortModelChange = (0, import_react4.useCallback)((newSortModel) => {
+  const handleSortModelChange = (0, import_react8.useCallback)((newSortModel) => {
     setSortModel(newSortModel);
     localStorage.setItem("spansSortModel", JSON.stringify(newSortModel));
   }, []);
-  const filterSpansBySearchTerm = (0, import_react4.useCallback)(
+  const filterSpansBySearchTerm = (0, import_react8.useCallback)(
     (span) => {
       if (searchTerm.length === 0) return true;
       return searchInObject(span, searchTerm);
     },
     [searchTerm]
   );
-  const filtersToApply = (0, import_react4.useMemo)(() => [filterSpansBySearchTerm], [filterSpansBySearchTerm]);
-  const filteredRows = (0, import_react4.useMemo)(
+  const filtersToApply = (0, import_react8.useMemo)(() => [filterSpansBySearchTerm], [filterSpansBySearchTerm]);
+  const filteredRows = (0, import_react8.useMemo)(
     () => rows.filter((row) => filtersToApply.every((filter) => filter(row))),
     [filtersToApply, rows]
   );
@@ -3218,9 +3157,9 @@ var StatusMessage = ({
 };
 
 // src/hooks/use-local-storage.tsx
-var import_react5 = require("react");
+var import_react9 = require("react");
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = (0, import_react5.useState)(() => {
+  const [storedValue, setStoredValue] = (0, import_react9.useState)(() => {
     try {
       const item = globalThis.localStorage.getItem(key);
       return item ? JSON.parse(item) : initialValue;
@@ -3229,7 +3168,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = (0, import_react5.useCallback)((value) => {
+  const setValue = (0, import_react9.useCallback)((value) => {
     try {
       setStoredValue(value);
       globalThis.localStorage.setItem(key, JSON.stringify(value));
@@ -3241,7 +3180,7 @@ function useLocalStorage(key, initialValue) {
       console.error(`Error setting localStorage key "${key}":`, error);
     }
   }, [key]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleStorageChange = (event) => {
       if (event.key === key && event.newValue !== null) {
         try {
@@ -3260,15 +3199,15 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-status.tsx
-var import_react6 = require("react");
+var import_react10 = require("react");
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = (0, import_react6.useState)(true);
-  const [status, setStatus] = (0, import_react6.useState)();
-  const [error, setError] = (0, import_react6.useState)();
-  const hasFetchedReference = (0, import_react6.useRef)(false);
-  const abortControllerReference = (0, import_react6.useRef)(null);
-  const checkStatus = (0, import_react6.useCallback)(async () => {
+  const [checking, setChecking] = (0, import_react10.useState)(true);
+  const [status, setStatus] = (0, import_react10.useState)();
+  const [error, setError] = (0, import_react10.useState)();
+  const hasFetchedReference = (0, import_react10.useRef)(false);
+  const abortControllerReference = (0, import_react10.useRef)(null);
+  const checkStatus = (0, import_react10.useCallback)(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -3292,7 +3231,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -3305,12 +3244,12 @@ var useStatus = () => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react19 = require("@xyflow/react");
-var import_react20 = require("react");
+var import_react23 = require("@xyflow/react");
+var import_react24 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_material14 = require("@mui/material");
-var import_react10 = require("react");
+var import_react14 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -3506,6 +3445,17 @@ var getEventGroupsByType = (events) => {
   return groups;
 };
 
+// src/utils/time.ts
+function unixNanoToDate(unixNanoString) {
+  const milliseconds = unixNanoToMilliseconds(unixNanoString);
+  if (!milliseconds) return void 0;
+  return new Date(milliseconds);
+}
+function unixNanoToMilliseconds(unixNanoString) {
+  if (!unixNanoString) return void 0;
+  return Number(BigInt(unixNanoString) / BigInt("1000000"));
+}
+
 // src/components/event-details/event-details-header.tsx
 var import_icons_material3 = require("@mui/icons-material");
 var import_material7 = require("@mui/material");
@@ -3544,7 +3494,7 @@ var import_material13 = require("@mui/material");
 // src/components/event-details/event-detail.tsx
 var import_icons_material7 = require("@mui/icons-material");
 var import_material11 = require("@mui/material");
-var import_react8 = require("react");
+var import_react12 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material4 = require("@mui/icons-material");
@@ -3695,7 +3645,7 @@ var IAMEventDetail = ({ event }) => {
 // src/components/event-details/iam-permission-detail.tsx
 var import_icons_material6 = require("@mui/icons-material");
 var import_material10 = require("@mui/material");
-var import_react7 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime131 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -3705,8 +3655,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
-  const parsedData = (0, import_react7.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const parsedData = (0, import_react11.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -3776,15 +3726,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react8.useState)(false);
-  const textReference = (0, import_react8.useRef)(null);
-  const parsedMessage = (0, import_react8.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react8.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react12.useState)(false);
+  const textReference = (0, import_react12.useRef)(null);
+  const parsedMessage = (0, import_react12.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react12.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -3797,11 +3747,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react8.useMemo)(
+  const hasAdditionalContent = (0, import_react12.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react8.useMemo)(
+  const shouldShowToggle = (0, import_react12.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -3943,10 +3893,10 @@ var EventDetail = ({
 // src/components/event-details/toggle-section.tsx
 var import_icons_material8 = require("@mui/icons-material");
 var import_material12 = require("@mui/material");
-var import_react9 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime133 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_material12.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       import_material12.Box,
@@ -4022,7 +3972,7 @@ var EventSection = ({
 // src/components/event-details/event-details.tsx
 var import_jsx_runtime135 = require("react/jsx-runtime");
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = (0, import_react10.useMemo)(() => {
+  const attributes = (0, import_react14.useMemo)(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => key !== "localstack.aws.account_id" && key !== "localstack.aws.service");
   }, [selectedEvent?.attributes]);
@@ -4121,22 +4071,22 @@ function renderKeyValue(key, 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_react17 = require("@xyflow/react");
-var import_react18 = require("react");
+var import_react21 = require("@xyflow/react");
+var import_react22 = 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_react12 = require("@xyflow/react");
-var import_react13 = require("react");
+var import_react16 = require("@xyflow/react");
+var import_react17 = 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_react11 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime136 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react11.useMemo)(() => {
+  const icon = (0, import_react15.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -4149,7 +4099,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color = (0, import_react11.useMemo)(() => {
+  const color = (0, import_react15.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -4188,7 +4138,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react13.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react17.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(import_material16.Box, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
@@ -4212,8 +4162,8 @@ var ServiceNode = (0, import_react13.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react12.Handle, { position: import_react12.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react12.Handle, { position: import_react12.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react16.Handle, { position: import_react16.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react16.Handle, { position: import_react16.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
             ServiceCell,
             {
@@ -4273,7 +4223,7 @@ var ServiceNode = (0, import_react13.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react14 = require("@xyflow/react");
+var import_react18 = require("@xyflow/react");
 var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
@@ -4289,8 +4239,8 @@ var generateNodesAndEdges = (event, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react14.Position.Right,
-    targetPosition: import_react14.Position.Left,
+    sourcePosition: import_react18.Position.Right,
+    targetPosition: import_react18.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -4300,7 +4250,7 @@ var generateNodesAndEdges = (event, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react14.MarkerType.Arrow,
+        type: import_react18.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -4368,8 +4318,8 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
 // src/components/trace-graph/xyflow/controls.tsx
 var import_icons_material10 = require("@mui/icons-material");
 var import_material17 = require("@mui/material");
-var import_react15 = require("@xyflow/react");
-var import_react16 = require("react");
+var import_react19 = require("@xyflow/react");
+var import_react20 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -4416,9 +4366,9 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react16.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react15.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react15.useReactFlow)();
+var Controls = (0, import_react20.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react19.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react19.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -4488,11 +4438,11 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react17.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react18.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react18.useState)(false);
-  const { fitView, setCenter } = (0, import_react17.useReactFlow)();
-  (0, import_react18.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react21.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react22.useState)([]);
+  const [initialViewSet, setInitialViewSet] = (0, import_react22.useState)(false);
+  const { fitView, setCenter } = (0, import_react21.useReactFlow)();
+  (0, import_react22.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -4527,7 +4477,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, setNodes]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -4564,7 +4514,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
-      import_react17.ReactFlow,
+      import_react21.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -4573,6 +4523,7 @@ var TraceGraph = ({
         maxZoom: 1.5,
         minZoom: 0.1,
         nodes,
+        nodesDraggable: false,
         nodeTypes,
         onNodeClick: (_event, node) => {
           onEventSelect(node.data.event);
@@ -4582,7 +4533,7 @@ var TraceGraph = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
-            import_react17.Background,
+            import_react21.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -4688,7 +4639,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react19.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react23.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -4716,11 +4667,11 @@ var TraceGraphView = ({
 };
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react20.useState)();
-  const [loading, setLoading] = (0, import_react20.useState)(false);
+  const [spans, setSpans] = (0, import_react24.useState)();
+  const [loading, setLoading] = (0, import_react24.useState)(false);
   const [includeReadOperations] = useLocalStorage("includeReadOperations", false);
-  const [fetchError, setFetchError] = (0, import_react20.useState)();
-  const fetchSpans = (0, import_react20.useCallback)(async () => {
+  const [fetchError, setFetchError] = (0, import_react24.useState)();
+  const fetchSpans = (0, import_react24.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -4736,14 +4687,14 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       setLoading(false);
     }
   }, [api, includeReadOperations, traceId]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react20.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react20.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react20.useState)(0);
+  const [open, setOpen] = (0, import_react24.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react24.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react24.useState)(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react20.useCallback)(() => {
+  const calculateDrawerWidth = (0, import_react24.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -4751,7 +4702,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     }
     return 0;
   }, [open]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -4765,14 +4716,14 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react20.useCallback)((event) => {
+  const handleEventSelect = (0, import_react24.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = (0, import_react20.useCallback)(() => {
+  const handleRetry = (0, import_react24.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react20.useCallback)(() => {
+  const navigateToSpansList = (0, import_react24.useCallback)(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
@@ -4804,24 +4755,24 @@ var import_jsx_runtime141 = require("react/jsx-runtime");
 var spansPerPageOptions = [25, 50, 100];
 var SpansListPage = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react21.useState)();
-  const [loading, setLoading] = (0, import_react21.useState)(false);
-  const hasFetched = (0, import_react21.useRef)(false);
+  const [spans, setSpans] = (0, import_react25.useState)();
+  const [loading, setLoading] = (0, import_react25.useState)(false);
+  const hasFetched = (0, import_react25.useRef)(false);
   const [includeReadOperations, setIncludeReadOperations] = useLocalStorage("includeReadOperations", false);
-  const mapPageToNextCursor = (0, import_react21.useRef)({});
-  const [page, setPage] = (0, import_react21.useState)(0);
-  const [pageSize, setPageSize] = (0, import_react21.useState)(100);
-  const [spanCount, setSpanCount] = (0, import_react21.useState)(0);
-  const queryOptions = (0, import_react21.useMemo)(() => {
+  const mapPageToNextCursor = (0, import_react25.useRef)({});
+  const [page, setPage] = (0, import_react25.useState)(0);
+  const [pageSize, setPageSize] = (0, import_react25.useState)(100);
+  const [spanCount, setSpanCount] = (0, import_react25.useState)(0);
+  const queryOptions = (0, import_react25.useMemo)(() => {
     return {
       is_write_operation: includeReadOperations ? void 0 : true,
       limit: pageSize,
       pagination_token: mapPageToNextCursor.current[page - 1]
     };
   }, [includeReadOperations, pageSize, page]);
-  const [fetchError, setFetchError] = (0, import_react21.useState)();
+  const [fetchError, setFetchError] = (0, import_react25.useState)();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = (0, import_react21.useCallback)(async () => {
+  const fetchSpans = (0, import_react25.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans(queryOptions);
@@ -4838,26 +4789,26 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, page, queryOptions]);
-  const fetchSpansSync = (0, import_react21.useCallback)(() => {
+  const fetchSpansSync = (0, import_react25.useCallback)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (hasFetched.current) return;
     if (status?.status !== "ENABLED") return;
     hasFetched.current = true;
     void fetchSpans();
   }, [fetchSpans, status]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!hasFetched.current) return;
     void fetchSpans();
   }, [fetchSpans]);
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react21.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react21.useState)();
-  const navigateToSpan = (0, import_react21.useCallback)((span) => {
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react25.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react25.useState)();
+  const navigateToSpan = (0, import_react25.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const clearSpans = (0, import_react21.useCallback)(async () => {
+  const clearSpans = (0, import_react25.useCallback)(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -4871,7 +4822,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = (0, import_react21.useCallback)(() => {
+  const handleRetry = (0, import_react25.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -4941,8 +4892,8 @@ var routes = {
 };
 
 // src/context.tsx
-var import_react22 = require("react");
-var import_react23 = require("react");
+var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/constants/error-messages.ts
 var ERROR_MESSAGES = {
@@ -5051,7 +5002,15 @@ var createApiClient = ({ localstackEndpoint }) => {
     },
     getSpans: async (request) => {
       const endpoint = buildSpansEndpoint(request);
-      return makeRequest({ endpoint, localstackEndpoint });
+      const response = await makeRequest({ endpoint, localstackEndpoint });
+      return {
+        ...response,
+        spans: response.spans.map((span) => ({
+          ...span,
+          endTime: unixNanoToDate(span.end_time_unix_nano),
+          startTime: unixNanoToDate(span.start_time_unix_nano)
+        }))
+      };
     },
     getStatus: async () => {
       return makeRequest({
@@ -5064,12 +5023,12 @@ var createApiClient = ({ localstackEndpoint }) => {
 
 // src/context.tsx
 var import_jsx_runtime142 = require("react/jsx-runtime");
-var AppInspectorContext = (0, import_react22.createContext)(void 0);
+var AppInspectorContext = (0, import_react26.createContext)(void 0);
 var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react23.useMemo)(() => {
+  const api = (0, import_react27.useMemo)(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = (0, import_react23.useCallback)(
+  const resolveLink = (0, import_react27.useCallback)(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -5081,7 +5040,7 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const contextValue = (0, import_react23.useMemo)(
+  const contextValue = (0, import_react27.useMemo)(
     () => ({
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,