@localstack/appinspector-ui 1.0.132 → 1.0.134

package/dist/index.cjs

@@ -15549,14 +15549,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__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { children: label }) }) });
-var LoadSpansRow = ({ colSpan, fetching, label, onFetch }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material7.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
-  !fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
-  fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.CircularProgress, { size: 24, sx: { m: 2 } })
-] }) });
+var LoadingRow = ({ colSpan }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan, sx: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.CircularProgress, { size: 24, sx: { m: 2 } }) }) });
 var SpansDataGridRow = (0, import_react38.memo)(
   ({ isNew, onSpanClick, row }) => {
     const theme = (0, import_material7.useTheme)();
@@ -15623,14 +15618,10 @@ var SpansDataGrid = ({
   hasMoreForward,
   licenseLimit,
   onClearSpans,
-  onFetchBackward,
-  onFetchForward,
   onOrderChange,
   onSpanClick,
-  onToggleStream,
   order: order2,
   spans,
-  streamPaused,
   systemLimit,
   totalCount,
   warningCount
@@ -15798,21 +15789,6 @@ var SpansDataGrid = ({
         ) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Box, { sx: { flexGrow: 1 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-        import_material7.FormControlLabel,
-        {
-          control: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-            import_material7.Button,
-            {
-              onClick: onToggleStream,
-              startIcon: streamPaused ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.PlayArrowOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_icons_material3.PauseOutlined, {}),
-              variant: "text",
-              children: streamPaused ? "Resume Stream" : "Pause Stream"
-            }
-          ),
-          label: ""
-        }
-      ),
       /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
         import_material7.FormControlLabel,
         {
@@ -15875,7 +15851,7 @@ var SpansDataGrid = ({
                 (spans === void 0 || clearingSpans) && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
                 !clearingSpans && spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_NO_SPANS }),
                 !clearingSpans && order2 === "newest_first" && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
-                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
@@ -15884,12 +15860,12 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM })
                 ] }),
                 !clearingSpans && order2 === "oldest_first" && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
                   hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_BEGINNING_OF_STREAM }),
-                  hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingBackward, label: LABEL_LOAD_OLDER, onFetch: onFetchBackward }),
+                  hasRows && hasMoreBackward && fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && paddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingTop, p: 0 } }) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
@@ -15897,7 +15873,7 @@ var SpansDataGrid = ({
                     return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpansDataGridRow, { isNew, onSpanClick, row }, row.original.span_id);
                   }),
                   hasRows && paddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.TableCell, { colSpan: columnCount, sx: { border: 0, height: paddingBottom, p: 0 } }) }),
-                  hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadSpansRow, { colSpan: columnCount, fetching: fetchingForward, label: LABEL_LOAD_NEWER, onFetch: onFetchForward }),
+                  hasRows && hasMoreForward && fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(LoadingRow, { colSpan: columnCount }),
                   hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(StreamBoundaryRow, { colSpan: columnCount, label: LABEL_END_OF_STREAM })
                 ] })
               ] })
@@ -15936,14 +15912,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
@@ -18762,7 +18734,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();
@@ -18843,26 +18815,23 @@ var useSpans = () => {
       setClearingSpans(false);
     }
   }, [clearingSpans, api]);
-  const [streamPaused, setStreamPaused] = (0, import_react47.useState)(false);
-  const toggleStream = (0, import_react47.useCallback)(() => {
-    setStreamPaused((previous) => !previous);
-  }, []);
   (0, import_react47.useEffect)(() => {
-    if (hasMoreForward === true && !fetchingForward && !streamPaused) {
+    if (hasMoreForward === true && !fetchingForward) {
       void paginationBufferRef.current.fetchForward();
     }
-  }, [hasMoreForward, fetchingForward, streamPaused]);
+  }, [hasMoreForward, fetchingForward]);
+  (0, import_react47.useEffect)(() => {
+    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();
       }
     }
   });
@@ -18888,9 +18857,7 @@ var useSpans = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   };
@@ -31889,7 +31856,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;
@@ -32184,7 +32155,6 @@ var SpansListPage = () => {
     clearingSpans,
     clearSpans,
     errorCount,
-    fetchBackward,
     fetchError,
     fetchForward,
     fetchingBackward,
@@ -32193,9 +32163,7 @@ var SpansListPage = () => {
     hasMoreForward,
     licenseLimit,
     spans,
-    streamPaused,
     systemLimit,
-    toggleStream,
     totalCount,
     warningCount
   } = useSpans();
@@ -32304,14 +32272,11 @@ var SpansListPage = () => {
               hasMoreForward,
               licenseLimit,
               onClearSpans: clearSpansSync,
-              onFetchBackward: fetchBackward,
               onFetchForward: fetchForward,
               onOrderChange: setOrder,
               onSpanClick: navigateToSpan,
-              onToggleStream: toggleStream,
               order: order2,
               spans,
-              streamPaused,
               systemLimit,
               totalCount,
               warningCount