@localstack/appinspector-ui 1.0.52 → 1.0.54

package/dist/index.cjs

@@ -77,7 +77,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/pages/spans-list-page.tsx
 var import_material20 = require("@mui/material");
-var import_react62 = require("react");
+var import_react61 = require("react");
 
 // src/components/spans-list/spans-list.tsx
 var import_material5 = require("@mui/material");
@@ -12154,11 +12154,9 @@ var SpansDataGrid = ({
   fetchingForward,
   hasMoreBackward,
   hasMoreForward,
-  includeReadOperations = false,
   onClearSpans,
   onFetchBackward,
   onFetchForward,
-  onIncludeReadOperationsChange,
   onSpanClick,
   spans
 }) => {
@@ -12240,22 +12238,6 @@ var SpansDataGrid = ({
   return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_jsx_runtime124.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-        import_material4.FormControlLabel,
-        {
-          control: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-            import_material4.Switch,
-            {
-              checked: includeReadOperations,
-              onChange: (event) => {
-                onIncludeReadOperationsChange(event.target.checked);
-              },
-              size: "small"
-            }
-          ),
-          label: "Include Read Operations"
-        }
-      ),
       /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
         import_material4.FormControlLabel,
         {
@@ -12415,11 +12397,9 @@ var SpansList = (props) => {
         fetchingForward: props.fetchingForward,
         hasMoreBackward: props.hasMoreBackward,
         hasMoreForward: props.hasMoreForward,
-        includeReadOperations: props.includeReadOperations,
         onClearSpans: props.onClearSpans,
         onFetchBackward: props.onFetchBackward,
         onFetchForward: props.onFetchForward,
-        onIncludeReadOperationsChange: props.onIncludeReadOperationsChange,
         onRefresh: props.onRefresh,
         onSpanClick: props.onSpanClick,
         refetching: props.refetching,
@@ -12726,69 +12706,18 @@ var StatusMessage = ({
   return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, {});
 };
 
-// src/hooks/use-local-storage.tsx
-var import_react41 = require("react");
-function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = (0, import_react41.useState)(() => {
-    try {
-      const item = globalThis.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      console.error(`Error reading localStorage key "${key}":`, error);
-      return initialValue;
-    }
-  });
-  const setValue = (0, import_react41.useCallback)((value) => {
-    try {
-      setStoredValue(value);
-      globalThis.localStorage.setItem(key, JSON.stringify(value));
-      globalThis.dispatchEvent(new StorageEvent("storage", {
-        key,
-        newValue: JSON.stringify(value)
-      }));
-    } catch (error) {
-      console.error(`Error setting localStorage key "${key}":`, error);
-    }
-  }, [key]);
-  (0, import_react41.useEffect)(() => {
-    const handleStorageChange = (event) => {
-      if (event.key === key && event.newValue !== null) {
-        try {
-          setStoredValue(JSON.parse(event.newValue));
-        } catch (error) {
-          console.error(`Error parsing localStorage key "${key}":`, error);
-        }
-      }
-    };
-    globalThis.addEventListener("storage", handleStorageChange);
-    return () => {
-      globalThis.removeEventListener("storage", handleStorageChange);
-    };
-  }, [key]);
-  return [storedValue, setValue];
-}
-
-// src/hooks/use-include-read-operations.tsx
-var useIncludeReadOperations = () => {
-  const [includeReadOperations, setIncludeReadOperations] = useLocalStorage("includeReadOperations", false);
-  return {
-    includeReadOperations,
-    setIncludeReadOperations
-  };
-};
-
 // src/hooks/use-spans.ts
-var import_react47 = require("react");
+var import_react46 = require("react");
 
 // src/api/use-api.tsx
-var import_react42 = require("react");
+var import_react41 = require("react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
-var AppInspectorApiContext = (0, import_react42.createContext)(void 0);
+var AppInspectorApiContext = (0, import_react41.createContext)(void 0);
 var ApiProvider = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(AppInspectorApiContext.Provider, { value: props.api, children: props.children });
 };
 var useAppInspectorApi = () => {
-  const api = (0, import_react42.useContext)(AppInspectorApiContext);
+  const api = (0, import_react41.useContext)(AppInspectorApiContext);
   if (!api) {
     throw new Error("useAppInspectorApi must be used within AppInspectorApiProvider");
   }
@@ -12796,15 +12725,15 @@ var useAppInspectorApi = () => {
 };
 
 // src/hooks/use-status.tsx
-var import_react43 = require("react");
+var import_react42 = require("react");
 var useStatus = () => {
   const api = useAppInspectorApi();
-  const [checking, setChecking] = (0, import_react43.useState)(true);
-  const [status, setStatus] = (0, import_react43.useState)();
-  const [error, setError] = (0, import_react43.useState)();
-  const hasFetchedReference = (0, import_react43.useRef)(false);
-  const abortControllerReference = (0, import_react43.useRef)(null);
-  const checkStatus = (0, import_react43.useCallback)(async () => {
+  const [checking, setChecking] = (0, import_react42.useState)(true);
+  const [status, setStatus] = (0, import_react42.useState)();
+  const [error, setError] = (0, import_react42.useState)();
+  const hasFetchedReference = (0, import_react42.useRef)(false);
+  const abortControllerReference = (0, import_react42.useRef)(null);
+  const checkStatus = (0, import_react42.useCallback)(async () => {
     if (abortControllerReference.current) {
       abortControllerReference.current.abort();
     }
@@ -12828,7 +12757,7 @@ var useStatus = () => {
       }
     }
   }, [api]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!hasFetchedReference.current) {
       hasFetchedReference.current = true;
       void checkStatus();
@@ -13054,11 +12983,11 @@ var createPaginationBuffer = (options) => {
 };
 
 // src/hooks/use-spans-ws.tsx
-var import_react46 = require("react");
+var import_react45 = require("react");
 
 // src/context.tsx
+var import_react43 = require("react");
 var import_react44 = require("react");
-var import_react45 = require("react");
 
 // src/utils/time.ts
 function unixNanoToDate(unixNanoString) {
@@ -13245,19 +13174,19 @@ var createApiClient = ({ localstackEndpoint }) => {
 
 // src/context.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
-var AppInspectorContext = (0, import_react44.createContext)(void 0);
+var AppInspectorContext = (0, import_react43.createContext)(void 0);
 var useAppInspector = () => {
-  const context = (0, import_react44.useContext)(AppInspectorContext);
+  const context = (0, import_react43.useContext)(AppInspectorContext);
   if (!context) {
     throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
   }
   return context;
 };
 var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react45.useMemo)(() => {
+  const api = (0, import_react44.useMemo)(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = (0, import_react45.useCallback)(
+  const resolveLink = (0, import_react44.useCallback)(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -13269,7 +13198,7 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const contextValue = (0, import_react45.useMemo)(
+  const contextValue = (0, import_react44.useMemo)(
     () => ({
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,
@@ -13283,15 +13212,15 @@ var AppInspectorContextProvider = (props) => {
 // src/hooks/use-spans-ws.tsx
 function useSpansWebSocket(options) {
   const { onMessage } = options;
-  const onMessageRef = (0, import_react46.useRef)(onMessage);
-  (0, import_react46.useEffect)(() => {
+  const onMessageRef = (0, import_react45.useRef)(onMessage);
+  (0, import_react45.useEffect)(() => {
     onMessageRef.current = onMessage;
   }, [onMessage]);
-  const [connected, setConnected] = (0, import_react46.useState)(false);
-  const wsRef = (0, import_react46.useRef)(void 0);
-  const reconnectRef = (0, import_react46.useRef)(void 0);
+  const [connected, setConnected] = (0, import_react45.useState)(false);
+  const wsRef = (0, import_react45.useRef)(void 0);
+  const reconnectRef = (0, import_react45.useRef)(void 0);
   const { localstackEndpoint } = useAppInspector();
-  const connect = (0, import_react46.useCallback)(() => {
+  const connect = (0, import_react45.useCallback)(() => {
     if (wsRef.current !== void 0) return;
     const url = new URL(getAppInspectorApiUrl(localstackEndpoint, API_ENDPOINTS.WEBSOCKET_SPANS));
     url.protocol = globalThis.location.protocol === "https:" ? "wss" : "ws";
@@ -13317,7 +13246,7 @@ function useSpansWebSocket(options) {
       }
     });
   }, [localstackEndpoint]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     connect();
     return () => {
       if (reconnectRef.current !== void 0) clearTimeout(reconnectRef.current);
@@ -13335,19 +13264,16 @@ function useSpansWebSocket(options) {
 
 // src/hooks/use-spans.ts
 var PAGE_SIZE = 50;
-var useSpans = (options) => {
+var useSpans = () => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react47.useState)();
-  const includeReadOperationsRef = (0, import_react47.useRef)(options.includeReadOperations);
-  includeReadOperationsRef.current = options.includeReadOperations;
-  const [fetchError, setFetchError] = (0, import_react47.useState)();
-  const [fetchingForward, setFetchingForward] = (0, import_react47.useState)(false);
-  const [fetchingBackward, setFetchingBackward] = (0, import_react47.useState)(false);
-  const [refetching, setRefetching] = (0, import_react47.useState)(false);
-  const paginationBuffer = (0, import_react47.useRef)(createPaginationBuffer({
+  const [spans, setSpans] = (0, import_react46.useState)();
+  const [fetchError, setFetchError] = (0, import_react46.useState)();
+  const [fetchingForward, setFetchingForward] = (0, import_react46.useState)(false);
+  const [fetchingBackward, setFetchingBackward] = (0, import_react46.useState)(false);
+  const [refetching, setRefetching] = (0, import_react46.useState)(false);
+  const paginationBuffer = (0, import_react46.useRef)(createPaginationBuffer({
     async fetchPage(token, limit) {
       const response = await api.getSpans({
-        is_write_operation: includeReadOperationsRef.current ? void 0 : true,
         limit,
         pagination_token: token
       });
@@ -13374,26 +13300,26 @@ var useSpans = (options) => {
     },
     pageSize: PAGE_SIZE
   }));
-  const [hasMoreBackward, setHasMoreBackward] = (0, import_react47.useState)();
-  const [hasMoreForward, setHasMoreForward] = (0, import_react47.useState)();
-  const fetchForward = (0, import_react47.useCallback)(() => {
+  const [hasMoreBackward, setHasMoreBackward] = (0, import_react46.useState)();
+  const [hasMoreForward, setHasMoreForward] = (0, import_react46.useState)();
+  const fetchForward = (0, import_react46.useCallback)(() => {
     paginationBuffer.current.fetchForward();
   }, []);
-  const fetchBackward = (0, import_react47.useCallback)(() => {
+  const fetchBackward = (0, import_react46.useCallback)(() => {
     paginationBuffer.current.fetchBackward();
   }, []);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const refreshSpans = (0, import_react47.useCallback)(() => {
+  const refreshSpans = (0, import_react46.useCallback)(() => {
     paginationBuffer.current.refetchCurrent();
   }, []);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     refreshSpans();
-  }, [options.includeReadOperations, refreshSpans]);
-  const [clearingSpans, setClearingSpans] = (0, import_react47.useState)(false);
-  const clearSpans = (0, import_react47.useCallback)(async () => {
+  }, [refreshSpans]);
+  const [clearingSpans, setClearingSpans] = (0, import_react46.useState)(false);
+  const clearSpans = (0, import_react46.useCallback)(async () => {
     setClearingSpans(true);
     try {
       await api.deleteSpans();
@@ -13433,12 +13359,12 @@ var useSpans = (options) => {
 var import_icons_material11 = require("@mui/icons-material");
 var import_material19 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react60 = require("@xyflow/react");
-var import_react61 = require("react");
+var import_react59 = require("@xyflow/react");
+var import_react60 = require("react");
 
 // src/components/event-details/event-details.tsx
 var import_material14 = require("@mui/material");
-var import_react51 = require("react");
+var import_react50 = require("react");
 
 // src/utils/iam-utils.ts
 function determinePermissionStatus(payload) {
@@ -13672,7 +13598,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_react49 = require("react");
+var import_react48 = require("react");
 
 // src/components/status-icon.tsx
 var import_icons_material4 = require("@mui/icons-material");
@@ -13823,7 +13749,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_react48 = require("react");
+var import_react47 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
 var getChipColors = (status) => {
   const isAllowed = status === "explicitly_allowed" || status === "implicitly_allowed";
@@ -13833,8 +13759,8 @@ var getChipColors = (status) => {
   };
 };
 var IAMPermissionItem = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react48.useState)(false);
-  const parsedData = (0, import_react48.useMemo)(() => {
+  const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
+  const parsedData = (0, import_react47.useMemo)(() => {
     const payloadString = event.attributes?.payload;
     if (!payloadString) {
       return;
@@ -13904,15 +13830,15 @@ var DetailRow2 = ({ content, label }) => /* @__PURE__ */ (0, import_jsx_runtime1
   ) : content })
 ] });
 var EventMessage = ({ event }) => {
-  const [isOpen, setIsOpen] = (0, import_react49.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react49.useState)(false);
-  const textReference = (0, import_react49.useRef)(null);
-  const parsedMessage = (0, import_react49.useMemo)(() => parseEventMessage(event), [event]);
-  const isIAMPolicyEvent = (0, import_react49.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react48.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react48.useState)(false);
+  const textReference = (0, import_react48.useRef)(null);
+  const parsedMessage = (0, import_react48.useMemo)(() => parseEventMessage(event), [event]);
+  const isIAMPolicyEvent = (0, import_react48.useMemo)(
     () => event.event_type === "iam.policy_evaluation" && event.attributes?.payload && typeof event.attributes.payload === "string",
     [event]
   );
-  (0, import_react49.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const checkOverflow = () => {
       const element = textReference.current;
       if (element) {
@@ -13925,11 +13851,11 @@ var EventMessage = ({ event }) => {
       window.removeEventListener("resize", checkOverflow);
     };
   }, [parsedMessage.headline]);
-  const hasAdditionalContent = (0, import_react49.useMemo)(
+  const hasAdditionalContent = (0, import_react48.useMemo)(
     () => parsedMessage.message || parsedMessage.details || isIAMPolicyEvent,
     [parsedMessage.message, parsedMessage.details, isIAMPolicyEvent]
   );
-  const shouldShowToggle = (0, import_react49.useMemo)(
+  const shouldShowToggle = (0, import_react48.useMemo)(
     () => isOverflowing || hasAdditionalContent,
     [isOverflowing, hasAdditionalContent]
   );
@@ -14071,10 +13997,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_react50 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var ToggleSection = ({ children, headline, initialOpen = true }) => {
-  const [isOpen, setIsOpen] = (0, import_react50.useState)(initialOpen);
+  const [isOpen, setIsOpen] = (0, import_react49.useState)(initialOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_material12.Box, { sx: { mt: 4 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       import_material12.Box,
@@ -14164,7 +14090,7 @@ var ATTRIBUTE_NAME_TRANSFORMATIONS = {
   "localstack.aws.service.response": "Response"
 };
 var EventDetails = ({ onClose, selectedEvent }) => {
-  const attributes = (0, import_react51.useMemo)(() => {
+  const attributes = (0, import_react50.useMemo)(() => {
     const attributes2 = Object.entries(selectedEvent?.attributes ?? {});
     return attributes2.filter(([key]) => !ATTRIBUTES_TO_EXCLUDE.has(key));
   }, [selectedEvent?.attributes]);
@@ -14273,22 +14199,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_react58 = require("@xyflow/react");
-var import_react59 = require("react");
+var import_react57 = require("@xyflow/react");
+var import_react58 = 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_react53 = require("@xyflow/react");
-var import_react54 = require("react");
+var import_react52 = require("@xyflow/react");
+var import_react53 = 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_react52 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime137 = require("react/jsx-runtime");
 var ProblemIndicator = ({ error }) => {
-  const icon = (0, import_react52.useMemo)(() => {
+  const icon = (0, import_react51.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_icons_material9.Error, { sx: { color: "#d32f2f", fontSize: "14px" } });
@@ -14301,7 +14227,7 @@ var ProblemIndicator = ({ error }) => {
       }
     }
   }, [error.level]);
-  const color2 = (0, import_react52.useMemo)(() => {
+  const color2 = (0, import_react51.useMemo)(() => {
     switch (error.level) {
       case "error": {
         return "#d32f2f";
@@ -14340,7 +14266,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react54.memo)(({ data, selected }) => {
+var ServiceNode = (0, import_react53.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)(
@@ -14364,8 +14290,8 @@ var ServiceNode = (0, import_react54.memo)(({ data, selected }) => {
         },
         tabIndex: 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react53.Handle, { position: import_react53.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react53.Handle, { position: import_react53.Position.Right, style: handleStyle, type: "source" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react52.Handle, { position: import_react52.Position.Left, style: handleStyle, type: "target" }),
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react52.Handle, { position: import_react52.Position.Right, style: handleStyle, type: "source" }),
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             ServiceCell,
             {
@@ -14425,7 +14351,7 @@ var ServiceNode = (0, import_react54.memo)(({ data, selected }) => {
 
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
-var import_react55 = require("@xyflow/react");
+var import_react54 = require("@xyflow/react");
 var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
@@ -14441,8 +14367,8 @@ var generateNodesAndEdges = (event, parentId) => {
     id: event.span_id,
     position: { x: 0, y: 0 },
     // Will be set by layout
-    sourcePosition: import_react55.Position.Right,
-    targetPosition: import_react55.Position.Left,
+    sourcePosition: import_react54.Position.Right,
+    targetPosition: import_react54.Position.Left,
     type: "service"
   });
   if (parentId) {
@@ -14452,7 +14378,7 @@ var generateNodesAndEdges = (event, parentId) => {
       markerEnd: {
         color: "lightgray",
         height: 16,
-        type: import_react55.MarkerType.Arrow,
+        type: import_react54.MarkerType.Arrow,
         width: 16
       },
       source: parentId,
@@ -14505,8 +14431,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_react56 = require("@xyflow/react");
-var import_react57 = require("react");
+var import_react55 = require("@xyflow/react");
+var import_react56 = require("react");
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -14553,9 +14479,9 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = (0, import_react57.memo)(() => {
-  const { maxZoomReached, minZoomReached } = (0, import_react56.useStore)(selector, shallow$1);
-  const { fitView, zoomIn, zoomOut } = (0, import_react56.useReactFlow)();
+var Controls = (0, import_react56.memo)(() => {
+  const { maxZoomReached, minZoomReached } = (0, import_react55.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react55.useReactFlow)();
   const onZoomInHandler = () => {
     void zoomIn();
   };
@@ -14624,9 +14550,9 @@ var TraceGraph = ({
   onRefresh,
   spans
 }) => {
-  const [nodes, setNodes, onNodesChange] = (0, import_react58.useNodesState)([]);
-  const [edges, setEdges] = (0, import_react59.useState)([]);
-  (0, import_react59.useEffect)(() => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react57.useNodesState)([]);
+  const [edges, setEdges] = (0, import_react58.useState)([]);
+  (0, import_react58.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -14678,7 +14604,7 @@ var TraceGraph = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_react58.ReactFlow,
+      import_react57.ReactFlow,
       {
         "data-testid": "trace-graph",
         edges,
@@ -14697,7 +14623,7 @@ var TraceGraph = ({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Controls, {}),
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_react58.Background,
+            import_react57.Background,
             {
               bgColor: theme.palette.background.paper,
               color: theme.palette.text.disabled
@@ -14802,7 +14728,7 @@ var TraceGraphView = ({
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react60.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(import_react59.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -14829,15 +14755,13 @@ var TraceGraphView = ({
 };
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react61.useState)();
-  const [loading, setLoading] = (0, import_react61.useState)(false);
-  const { includeReadOperations } = useIncludeReadOperations();
-  const [fetchError, setFetchError] = (0, import_react61.useState)();
-  const fetchSpans = (0, import_react61.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react60.useState)();
+  const [loading, setLoading] = (0, import_react60.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react60.useState)();
+  const fetchSpans = (0, import_react60.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
-        is_write_operation: includeReadOperations ? void 0 : true,
         trace_id: traceId
       });
       setSpans(response.spans);
@@ -14848,29 +14772,29 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     } finally {
       setLoading(false);
     }
-  }, [api, includeReadOperations, traceId]);
-  (0, import_react61.useEffect)(() => {
+  }, [api, traceId]);
+  (0, import_react60.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react61.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react61.useState)(() => spans?.find((span) => span.span_id === spanId));
-  const spansReference = (0, import_react61.useRef)();
-  (0, import_react61.useEffect)(() => {
+  const [open, setOpen] = (0, import_react60.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react60.useState)(() => spans?.find((span) => span.span_id === spanId));
+  const spansReference = (0, import_react60.useRef)();
+  (0, import_react60.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_react61.useCallback)((spanId2) => {
+  const handleEventSelect = (0, import_react60.useCallback)((spanId2) => {
     const span = spans?.find((s) => s.span_id === spanId2);
     setSelectedEvent(span);
     setOpen(true);
   }, [spans]);
-  const handleRetry = (0, import_react61.useCallback)(() => {
+  const handleRetry = (0, import_react60.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = (0, import_react61.useCallback)(() => {
+  const navigateToSpansList = (0, import_react60.useCallback)(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
@@ -14899,7 +14823,6 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
 // src/pages/spans-list-page.tsx
 var import_jsx_runtime142 = require("react/jsx-runtime");
 var SpansListPage = () => {
-  const { includeReadOperations, setIncludeReadOperations } = useIncludeReadOperations();
   const {
     checkStatus,
     clearingSpans,
@@ -14916,19 +14839,17 @@ var SpansListPage = () => {
     spans,
     status,
     statusError
-  } = useSpans({
-    includeReadOperations
-  });
-  const clearSpansSync = (0, import_react62.useCallback)(() => {
+  } = useSpans();
+  const clearSpansSync = (0, import_react61.useCallback)(() => {
     void clearSpans();
   }, [clearSpans]);
-  const [selectedTraceId, setSelectedTraceId] = (0, import_react62.useState)();
-  const [selectedSpanId, setSelectedSpanId] = (0, import_react62.useState)();
-  const navigateToSpan = (0, import_react62.useCallback)((span) => {
+  const [selectedTraceId, setSelectedTraceId] = (0, import_react61.useState)();
+  const [selectedSpanId, setSelectedSpanId] = (0, import_react61.useState)();
+  const navigateToSpan = (0, import_react61.useCallback)((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const handleRetry = (0, import_react62.useCallback)(() => {
+  const handleRetry = (0, import_react61.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -14964,11 +14885,9 @@ var SpansListPage = () => {
             fetchingForward,
             hasMoreBackward,
             hasMoreForward,
-            includeReadOperations,
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
-            onIncludeReadOperationsChange: setIncludeReadOperations,
             onRefresh: refreshSpans,
             onSpanClick: navigateToSpan,
             refetching,