@localstack/appinspector-ui 1.0.34 → 1.0.36

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
 import { Box as Box19 } from "@mui/material";
-import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef4, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef4, useState as useState10 } from "react";
 
 // src/api/use-api.tsx
 import { createContext, useContext } from "react";
@@ -2758,10 +2758,10 @@ var columns = [
 ];
 var defaultSortingOption = { field: "start_time_unix_nano", sort: "asc" };
 var SpansDataGrid = ({
-  filterWriteOperations = true,
+  includeReadOperations = false,
   loading,
   onClearSpans,
-  onFilterWriteOperationsChange,
+  onIncludeReadOperationsChange,
   onPageChange,
   onPageSizeChange,
   onRefresh,
@@ -2831,20 +2831,20 @@ var SpansDataGrid = ({
         }
       ),
       /* @__PURE__ */ jsx126(Box4, { sx: { flexGrow: 1 } }),
-      onFilterWriteOperationsChange && /* @__PURE__ */ jsx126(
+      /* @__PURE__ */ jsx126(
         FormControlLabel,
         {
           control: /* @__PURE__ */ jsx126(
             Switch,
             {
-              checked: filterWriteOperations,
+              checked: includeReadOperations,
               onChange: (event) => {
-                onFilterWriteOperationsChange(event.target.checked);
+                onIncludeReadOperationsChange?.(event.target.checked);
               },
               size: "small"
             }
           ),
-          label: "Only Write Operations"
+          label: "Include Read Operations"
         }
       ),
       /* @__PURE__ */ jsx126(Button, { onClick: onClearSpans, startIcon: /* @__PURE__ */ jsx126(DeleteForeverOutlined, {}), children: "Clear Spans" }),
@@ -2917,10 +2917,10 @@ var SpansList = (props) => {
     (props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */ jsx127(
       SpansDataGrid,
       {
-        filterWriteOperations: props.filterWriteOperations,
+        includeReadOperations: props.includeReadOperations,
         loading: props.spans.loading,
         onClearSpans: props.onClearSpans,
-        onFilterWriteOperationsChange: props.onFilterWriteOperationsChange,
+        onIncludeReadOperationsChange: props.onIncludeReadOperationsChange,
         onPageChange: props.onPageChange,
         onPageSizeChange: props.onPageSizeChange,
         onRefresh: props.onRefresh,
@@ -3321,7 +3321,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box18, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback5, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box14, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
@@ -4136,8 +4136,8 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme2 } from "@mui/material";
-import { Background, ReactFlow, useReactFlow as useReactFlow2 } from "@xyflow/react";
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState8 } from "react";
+import { Background, ReactFlow, useNodesState, useReactFlow as useReactFlow2 } from "@xyflow/react";
+import { useEffect as useEffect5, useState as useState8 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box16, Stack as Stack3, Typography as Typography10 } from "@mui/material";
@@ -4503,16 +4503,10 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = useState8([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useState8([]);
   const [initialViewSet, setInitialViewSet] = useState8(false);
   const { fitView, setCenter } = useReactFlow2();
-  const updateSelectedNode = useCallback4((nodeId) => {
-    const toSelect = new Set(nodeId ? [nodeId] : []);
-    setNodes((previousNodes) => {
-      return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
-    });
-  }, []);
   useEffect5(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
@@ -4547,7 +4541,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId]);
+  }, [spans.data, initialFocusEventId, setNodes]);
   useEffect5(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
@@ -4568,15 +4562,6 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  useEffect5(() => {
-    if (initialFocusEventId) {
-      updateSelectedNode(initialFocusEventId);
-    }
-  }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = useCallback4((_event, node) => {
-    onEventSelect(node.data.event);
-    updateSelectedNode(node.id);
-  }, [onEventSelect, updateSelectedNode]);
   const theme = useTheme2();
   return /* @__PURE__ */ jsxs132(Fragment7, { children: [
     spans.error && /* @__PURE__ */ jsxs132(
@@ -4604,7 +4589,10 @@ var TraceGraph = ({
         minZoom: 0.1,
         nodes,
         nodeTypes,
-        onNodeClick,
+        onNodeClick: (_event, node) => {
+          onEventSelect(node.data.event);
+        },
+        onNodesChange,
         selectNodesOnDrag: false,
         children: [
           /* @__PURE__ */ jsx140(Controls, {}),
@@ -4745,11 +4733,13 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = useState9();
   const [loading, setLoading] = useState9(false);
+  const [includeReadOperations] = useLocalStorage("includeReadOperations", false);
   const [fetchError, setFetchError] = useState9();
-  const fetchSpans = useCallback5(async () => {
+  const fetchSpans = useCallback4(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
+        is_write_operation: includeReadOperations ? void 0 : true,
         trace_id: traceId
       });
       setSpans(response.spans);
@@ -4760,7 +4750,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     } finally {
       setLoading(false);
     }
-  }, [api, traceId]);
+  }, [api, includeReadOperations, traceId]);
   useEffect6(() => {
     void fetchSpans();
   }, [fetchSpans]);
@@ -4768,7 +4758,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const [selectedEvent, setSelectedEvent] = useState9();
   const [viewPortPixelWidth, setViewPortPixelWidth] = useState9(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = useCallback5(() => {
+  const calculateDrawerWidth = useCallback4(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -4790,14 +4780,14 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = useCallback5((event) => {
+  const handleEventSelect = useCallback4((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = useCallback5(() => {
+  const handleRetry = useCallback4(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback5(() => {
+  const navigateToSpansList = useCallback4(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ jsx141(
@@ -4832,21 +4822,21 @@ var SpansListPage = () => {
   const [spans, setSpans] = useState10();
   const [loading, setLoading] = useState10(false);
   const hasFetched = useRef4(false);
-  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
+  const [includeReadOperations, setIncludeReadOperations] = useLocalStorage("includeReadOperations", false);
   const mapPageToNextCursor = useRef4({});
   const [page, setPage] = useState10(0);
   const [pageSize, setPageSize] = useState10(100);
   const [spanCount, setSpanCount] = useState10(0);
   const queryOptions = useMemo7(() => {
     return {
-      is_write_operation: filterWriteOperations ? true : void 0,
+      is_write_operation: includeReadOperations ? void 0 : true,
       limit: pageSize,
       pagination_token: mapPageToNextCursor.current[page - 1]
     };
-  }, [filterWriteOperations, pageSize, page]);
+  }, [includeReadOperations, pageSize, page]);
   const [fetchError, setFetchError] = useState10();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = useCallback6(async () => {
+  const fetchSpans = useCallback5(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans(queryOptions);
@@ -4863,7 +4853,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, page, queryOptions]);
-  const fetchSpansSync = useCallback6(() => {
+  const fetchSpansSync = useCallback5(() => {
     void fetchSpans();
   }, [fetchSpans]);
   useEffect7(() => {
@@ -4878,11 +4868,11 @@ var SpansListPage = () => {
   }, [fetchSpans]);
   const [selectedTraceId, setSelectedTraceId] = useState10();
   const [selectedSpanId, setSelectedSpanId] = useState10();
-  const navigateToSpan = useCallback6((span) => {
+  const navigateToSpan = useCallback5((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const clearSpans = useCallback6(async () => {
+  const clearSpans = useCallback5(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -4896,7 +4886,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = useCallback6(() => {
+  const handleRetry = useCallback5(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -4926,12 +4916,12 @@ var SpansListPage = () => {
         ) : /* @__PURE__ */ jsx142(
           SpansList,
           {
-            filterWriteOperations,
+            includeReadOperations,
             onClearSpans: () => {
               void clearSpans();
             },
-            onFilterWriteOperationsChange: (value) => {
-              setFilterWriteOperations(value);
+            onIncludeReadOperationsChange: (value) => {
+              setIncludeReadOperations(value);
             },
             onPageChange: setPage,
             onPageSizeChange: setPageSize,
@@ -4967,7 +4957,7 @@ var routes = {
 
 // src/context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { useCallback as useCallback7, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo8 } from "react";
 
 // src/constants/error-messages.ts
 var ERROR_MESSAGES = {
@@ -5094,7 +5084,7 @@ var AppInspectorContextProvider = (props) => {
   const api = useMemo8(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = useCallback7(
+  const resolveLink = useCallback6(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;