@localstack/appinspector-ui 1.0.132 → 1.0.134

package/dist/index.js

@@ -2586,7 +2586,7 @@ var EmulatorVersionBanner = ({
 import { Alert as Alert2, Box as Box6, Button as Button3 } from "@mui/material";
 
 // src/components/spans-list/spans-data-grid.tsx
-import { DeleteForeverOutlined, PauseOutlined, PlayArrowOutlined } from "@mui/icons-material";
+import { DeleteForeverOutlined } from "@mui/icons-material";
 import {
   Box as Box5,
   Button as Button2,
@@ -15562,14 +15562,9 @@ var newSpanBackgroundColor = {
 var LABEL_BEGINNING_OF_STREAM = "This is the beginning of the stream";
 var LABEL_END_OF_STREAM = "This is the end of the stream";
 var LABEL_NO_SPANS = "There are no operations";
-var LABEL_LOAD_OLDER = "Load older operations";
-var LABEL_LOAD_NEWER = "Load newer operations";
 var STICK_TO_EDGE_THRESHOLD_PX = 4;
 var StreamBoundaryRow = ({ colSpan, label }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127("span", { children: label }) }) });
-var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsxs121(TableCell, { colSpan, sx: { textAlign: "center" }, children: [
-  !fetching && /* @__PURE__ */ jsx127(Button2, { onClick: onFetch, sx: { my: 1 }, children: label }),
-  fetching && /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } })
-] }) });
+var LoadingRow = ({ colSpan }) => /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 24, sx: { m: 2 } }) }) });
 var SpansDataGridRow = memo9(
   ({ isNew, onSpanClick, row }) => {
     const theme = useTheme2();
@@ -15636,14 +15631,10 @@ var SpansDataGrid = ({
   hasMoreForward,
   licenseLimit,
   onClearSpans,
-  onFetchBackward,
-  onFetchForward,
   onOrderChange,
   onSpanClick,
-  onToggleStream,
   order: order2,
   spans,
-  streamPaused,
   systemLimit,
   totalCount,
   warningCount
@@ -15811,21 +15802,6 @@ var SpansDataGrid = ({
         ) })
       ] }),
       /* @__PURE__ */ jsx127(Box5, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsx127(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ jsx127(
-            Button2,
-            {
-              onClick: onToggleStream,
-              startIcon: streamPaused ? /* @__PURE__ */ jsx127(PlayArrowOutlined, {}) : /* @__PURE__ */ jsx127(PauseOutlined, {}),
-              variant: "text",
-              children: streamPaused ? "Resume Stream" : "Pause Stream"
-            }
-          ),
-          label: ""
-        }
-      ),
       /* @__PURE__ */ jsx127(
         FormControlLabel,
         {
@@ -15888,7 +15864,7 @@ var SpansDataGrid = ({
                 (spans === void 0 || clearingSpans) && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx127(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
                 !clearingSpans && spans?.length === 0 && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
                 !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ jsxs121(Fragment5, { children: [
-                  hasRows && hasMoreForward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
@@ -15897,12 +15873,12 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ jsx127(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
                 !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ jsxs121(Fragment5, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
@@ -15910,7 +15886,7 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ jsx127(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ jsx127(TableRow, { children: /* @__PURE__ */ jsx127(TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreForward && /* @__PURE__ */ jsx127(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ jsx127(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ jsx127(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
@@ -15949,14 +15925,10 @@ var SpansList = (props) => {
         hasMoreForward: props.hasMoreForward,
         licenseLimit: props.licenseLimit,
         onClearSpans: props.onClearSpans,
-        onFetchBackward: props.onFetchBackward,
-        onFetchForward: props.onFetchForward,
         onOrderChange: props.onOrderChange,
         onSpanClick: props.onSpanClick,
-        onToggleStream: props.onToggleStream,
         order: props.order,
         spans: props.spans,
-        streamPaused: props.streamPaused,
         systemLimit: props.systemLimit,
         totalCount: props.totalCount,
         warningCount: props.warningCount
@@ -18775,7 +18747,7 @@ function useSpansWebSocket(options) {
 }
 
 // src/hooks/use-spans.ts
-var PAGE_SIZE = 30;
+var PAGE_SIZE = 100;
 var useSpans = () => {
   const api = useAppInspectorApi();
   const { reportDisabled } = useAppInspectorStatus();
@@ -18856,26 +18828,23 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [clearingSpans, api]);
-  const [streamPaused, setStreamPaused] = useState9(false);
-  const toggleStream = useCallback8(() => {
-    setStreamPaused((previous) => !previous);
-  }, []);
   useEffect16(() => {
-    if (hasMoreForward === true && !fetchingForward && !streamPaused) {
+    if (hasMoreForward === true && !fetchingForward) {
       void paginationBufferRef.current.fetchForward();
     }
-  }, [hasMoreForward, fetchingForward, streamPaused]);
+  }, [hasMoreForward, fetchingForward]);
+  useEffect16(() => {
+    if (hasMoreBackward === true && !fetchingBackward && !fetchingForward) {
+      void paginationBufferRef.current.fetchBackward();
+    }
+  }, [hasMoreBackward, fetchingBackward, fetchingForward]);
   useSpansWebSocket({
     onMessage: () => {
       if (clearingSpans) {
         return;
       }
       if (!hasMoreForward) {
-        if (streamPaused) {
-          paginationBufferRef.current.checkIfThereAreMoreItemsForward();
-        } else {
-          void paginationBufferRef.current.fetchForward();
-        }
+        void paginationBufferRef.current.fetchForward();
       }
     }
   });
@@ -18901,9 +18870,7 @@ var useSpans = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   };
@@ -31902,7 +31869,11 @@ var TraceGraph = ({
         });
       }
     }
-    const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
+    const knownSpanIds = new Set(allNodes.map((node) => node.id));
+    const validEdges = allEdges.filter(
+      (edge) => knownSpanIds.has(edge.source) && knownSpanIds.has(edge.target)
+    );
+    const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, validEdges);
     for (const node of layoutedNodes) {
       if (node.id === initialFocusEventId) {
         node.selected = true;
@@ -32197,7 +32168,6 @@ var SpansListPage = () => {
     clearingSpans,
     clearSpans,
     errorCount,
-    fetchBackward,
     fetchError,
     fetchForward,
     fetchingBackward,
@@ -32206,9 +32176,7 @@ var SpansListPage = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   } = useSpans();
@@ -32317,14 +32285,11 @@ var SpansListPage = () => {
               hasMoreForward,
               licenseLimit,
               onClearSpans: clearSpansSync,
-              onFetchBackward: fetchBackward,
               onFetchForward: fetchForward,
               onOrderChange: setOrder,
               onSpanClick: navigateToSpan,
-              onToggleStream: toggleStream,
               order: order2,
               spans,
-              streamPaused,
               systemLimit,
               totalCount,
               warningCount