@localstack/appinspector-ui 1.0.34 → 1.0.36

package/dist/index.cjs

@@ -2795,10 +2795,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,
@@ -2868,20 +2868,20 @@ var SpansDataGrid = ({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_material5.Box, { sx: { flexGrow: 1 } }),
-      onFilterWriteOperationsChange && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
         import_material5.FormControlLabel,
         {
           control: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
             import_material5.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__ */ (0, import_jsx_runtime126.jsx)(import_material5.Button, { onClick: onClearSpans, startIcon: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_icons_material.DeleteForeverOutlined, {}), children: "Clear Spans" }),
@@ -2954,10 +2954,10 @@ var SpansList = (props) => {
     (props.spans.data !== void 0 || props.spans.loading) && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
       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,
@@ -4540,16 +4540,10 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react18.useState)([]);
+  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)();
-  const updateSelectedNode = (0, import_react18.useCallback)((nodeId) => {
-    const toSelect = new Set(nodeId ? [nodeId] : []);
-    setNodes((previousNodes) => {
-      return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
-    });
-  }, []);
   (0, import_react18.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
@@ -4584,7 +4578,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId]);
+  }, [spans.data, initialFocusEventId, setNodes]);
   (0, import_react18.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
@@ -4605,15 +4599,6 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react18.useEffect)(() => {
-    if (initialFocusEventId) {
-      updateSelectedNode(initialFocusEventId);
-    }
-  }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react18.useCallback)((_event, node) => {
-    onEventSelect(node.data.event);
-    updateSelectedNode(node.id);
-  }, [onEventSelect, updateSelectedNode]);
   const theme = (0, import_material19.useTheme)();
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_jsx_runtime140.Fragment, { children: [
     spans.error && /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
@@ -4641,7 +4626,10 @@ var TraceGraph = ({
         minZoom: 0.1,
         nodes,
         nodeTypes,
-        onNodeClick,
+        onNodeClick: (_event, node) => {
+          onEventSelect(node.data.event);
+        },
+        onNodesChange,
         selectNodesOnDrag: false,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Controls, {}),
@@ -4782,11 +4770,13 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = (0, import_react20.useState)();
   const [loading, setLoading] = (0, import_react20.useState)(false);
+  const [includeReadOperations] = useLocalStorage("includeReadOperations", false);
   const [fetchError, setFetchError] = (0, import_react20.useState)();
   const fetchSpans = (0, import_react20.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
+        is_write_operation: includeReadOperations ? void 0 : true,
         trace_id: traceId
       });
       setSpans(response.spans);
@@ -4797,7 +4787,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
     } finally {
       setLoading(false);
     }
-  }, [api, traceId]);
+  }, [api, includeReadOperations, traceId]);
   (0, import_react20.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
@@ -4869,18 +4859,18 @@ var SpansListPage = () => {
   const [spans, setSpans] = (0, import_react21.useState)();
   const [loading, setLoading] = (0, import_react21.useState)(false);
   const hasFetched = (0, import_react21.useRef)(false);
-  const [filterWriteOperations, setFilterWriteOperations] = useLocalStorage("filterWriteOperations", true);
+  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)(() => {
     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] = (0, import_react21.useState)();
   const { checkStatus, error: statusError, status } = useStatus();
   const fetchSpans = (0, import_react21.useCallback)(async () => {
@@ -4963,12 +4953,12 @@ var SpansListPage = () => {
         ) : /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
           SpansList,
           {
-            filterWriteOperations,
+            includeReadOperations,
             onClearSpans: () => {
               void clearSpans();
             },
-            onFilterWriteOperationsChange: (value) => {
-              setFilterWriteOperations(value);
+            onIncludeReadOperationsChange: (value) => {
+              setIncludeReadOperations(value);
             },
             onPageChange: setPage,
             onPageSizeChange: setPageSize,