@localstack/appinspector-ui 1.0.55 → 1.0.57

package/README.md

@@ -7,3 +7,26 @@ This package is used internally in different LocalStack products as an interface
 ```sh
 npm install @localstack/appinspector-ui
 ```
+
+## Development
+
+### Start LocalStack
+
+Start LocalStack with the following configuration:
+
+```sh
+APPINSPECTOR_ENABLE=1 APPINSPECTOR_DEV_ENABLE=1 EXTRA_CORS_ALLOWED_ORIGINS=* localstack start
+```
+
+> [!NOTE]
+> Remember to start LocalStack Pro using `LOCALSTACK_AUTH_TOKEN=test` in development or with <your-auth-token> in production.
+
+### Run the development server
+
+Develop locally using:
+
+```sh
+npm run dev
+```
+
+Check out [CONTRIBUTING.md](CONTRIBUTING.md) for more information about development and testing.

package/dist/index.cjs

@@ -12148,15 +12148,65 @@ var newSpanBackgroundColor = {
   dark: "#887b02",
   light: "#ffde7b"
 };
+var SpansDataGridRow = (0, import_react40.memo)(
+  ({ row }) => {
+    const theme = (0, import_material4.useTheme)();
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+      import_material4.TableRow,
+      {
+        animate: {
+          backgroundColor: "transparent"
+        },
+        component: motion.tr,
+        initial: {
+          backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light : newSpanBackgroundColor.dark
+        },
+        sx: {
+          transition: "background-color 1200ms ease-in"
+        },
+        children: row.getVisibleCells().map((cell) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+            import_material4.TableCell,
+            {
+              sx: {
+                height: 36,
+                maxWidth: `${cell.column.getSize().toString()}px`,
+                minWidth: `${cell.column.getSize().toString()}px`
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+                import_material4.Box,
+                {
+                  sx: {
+                    "alignItems": "center",
+                    "display": "flex",
+                    "flex-direction": "row",
+                    "height": "100%",
+                    "tr:hover &": {
+                      backgroundColor: (theme2) => theme2.palette.action.hover
+                    },
+                    "width": "100%"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+                }
+              )
+            },
+            cell.id
+          );
+        })
+      },
+      row.original.span_id
+    );
+  },
+  // Since spans are immutable, we can cache this component by the span ID
+  (previous, next) => previous.row.original.span_id === next.row.original.span_id
+);
 var SpansDataGrid = ({
   clearingSpans,
   fetchingBackward,
-  fetchingForward,
   hasMoreBackward,
   hasMoreForward,
   onClearSpans,
   onFetchBackward,
-  onFetchForward,
   onSpanClick,
   spans
 }) => {
@@ -12194,6 +12244,16 @@ var SpansDataGrid = ({
       size: 180
     }),
     columnHelper.accessor("operation_name", {
+      cell: (props) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        import_material4.Box,
+        {
+          sx: {
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { title: props.getValue(), children: props.getValue() })
+        }
+      ),
       header: "Action",
       id: "operationName",
       size: 96
@@ -12234,7 +12294,6 @@ var SpansDataGrid = ({
   const columnCount = table.getAllColumns().length;
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
-  const theme = (0, import_material4.useTheme)();
   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 } }),
@@ -12296,74 +12355,20 @@ var SpansDataGrid = ({
               /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.TableBody, { children: [
                 spans === void 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
                 spans?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: "There are no spans" }) }) }),
+                hasRows && !hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: "This is the beginning of the stream" }) }) }),
                 hasRows && hasMoreBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.TableCell, { colSpan: columnCount, sx: { textAlign: "center" }, children: [
-                  !fetchingBackward && !fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+                  !fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
                     import_material4.Button,
                     {
                       onClick: onFetchBackward,
                       sx: { my: 1 },
-                      children: "Load newer spans"
-                    }
-                  ),
-                  (fetchingBackward || fetchingForward) && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 24, sx: { m: 2 } })
-                ] }) }),
-                hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-                  import_material4.TableRow,
-                  {
-                    animate: {
-                      backgroundColor: "transparent"
-                    },
-                    component: motion.tr,
-                    initial: {
-                      backgroundColor: theme.palette.mode === "light" ? newSpanBackgroundColor.light : newSpanBackgroundColor.dark
-                    },
-                    sx: {
-                      transition: "background-color 1200ms ease-in"
-                    },
-                    children: row.getVisibleCells().map((cell) => {
-                      return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-                        import_material4.TableCell,
-                        {
-                          sx: {
-                            height: 36,
-                            maxWidth: `${cell.column.getSize().toString()}px`,
-                            minWidth: `${cell.column.getSize().toString()}px`
-                          },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-                            import_material4.Box,
-                            {
-                              sx: {
-                                "alignItems": "center",
-                                "display": "flex",
-                                "flex-direction": "row",
-                                "height": "100%",
-                                "tr:hover &": {
-                                  backgroundColor: (theme2) => theme2.palette.action.hover
-                                },
-                                "width": "100%"
-                              },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.Box, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
-                            }
-                          )
-                        },
-                        cell.id
-                      );
-                    })
-                  },
-                  row.original.span_id
-                )) }),
-                hasRows && hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_material4.TableCell, { colSpan: columnCount, sx: { textAlign: "center" }, children: [
-                  !fetchingBackward && !fetchingForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-                    import_material4.Button,
-                    {
-                      onClick: onFetchForward,
-                      sx: { my: 1 },
                       children: "Load older spans"
                     }
                   ),
-                  (fetchingBackward || fetchingForward) && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 24, sx: { m: 2 } })
+                  fetchingBackward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.CircularProgress, { size: 24, sx: { m: 2 } })
                 ] }) }),
-                hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: "There are no older spans" }) }) })
+                hasRows && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SpansDataGridRow, { row }, row.original.span_id)) }),
+                hasRows && !hasMoreForward && /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_material4.TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: "This is the end of the stream" }) }) })
               ] })
             ]
           }
@@ -12380,7 +12385,7 @@ var SpansList = (props) => {
     props.fetchError && /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
       import_material5.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Button, { onClick: props.onRefresh, children: "Retry" }),
+        action: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_material5.Button, { onClick: props.onFetchForward, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -12400,7 +12405,6 @@ var SpansList = (props) => {
         onClearSpans: props.onClearSpans,
         onFetchBackward: props.onFetchBackward,
         onFetchForward: props.onFetchForward,
-        onRefresh: props.onRefresh,
         onSpanClick: props.onSpanClick,
         refetching: props.refetching,
         spans: props.spans
@@ -12734,7 +12738,7 @@ var useStatus = () => {
   const hasFetchedReference = (0, import_react42.useRef)(false);
   const abortControllerReference = (0, import_react42.useRef)(null);
   const checkStatus = (0, import_react42.useCallback)(async () => {
-    if (abortControllerReference.current) {
+    if (abortControllerReference.current !== null) {
       abortControllerReference.current.abort();
     }
     const abortController = new AbortController();
@@ -12767,26 +12771,53 @@ var useStatus = () => {
 };
 
 // src/utils/pagination-buffer.ts
+var insertSorted = (array, item, compareFunction, hint = "back") => {
+  let left;
+  let right;
+  if (hint === "back") {
+    left = array.length;
+    right = array.length;
+    let step = 1;
+    while (left > 0 && compareFunction(array[left - 1], item) > 0) {
+      right = left;
+      left = Math.max(0, left - step);
+      step *= 2;
+    }
+  } else {
+    left = 0;
+    right = 0;
+    let step = 1;
+    while (right < array.length && compareFunction(array[right], item) <= 0) {
+      left = right + 1;
+      right = Math.min(array.length, right + step);
+      step *= 2;
+    }
+  }
+  while (left < right) {
+    const mid = left + right >>> 1;
+    if (compareFunction(array[mid], item) <= 0) {
+      left = mid + 1;
+    } else {
+      right = mid;
+    }
+  }
+  array.splice(left, 0, item);
+};
 var createPaginationBuffer = (options) => {
-  const { fetchPage, pageSize } = options;
-  const items = [];
-  const pages2 = [];
+  const { fetchPage } = options;
+  let items = void 0;
+  let nextForwardToken;
+  let nextBackwardToken;
+  let hasMoreForward = void 0;
+  let hasMoreBackward = void 0;
   let fetchingForward = false;
   let fetchingBackward = false;
-  let refetching = false;
-  const hasMoreBackward = () => {
-    const firstPage = pages2[0];
-    return firstPage?.hasMoreBackward;
-  };
-  const hasMoreForward = () => {
-    const lastPage = pages2.at(-1);
-    return lastPage?.hasMoreForward;
-  };
+  const refetching = false;
   const reportDataChange = () => {
     options.onDataChange({
-      hasMoreBackward: hasMoreBackward() ?? false,
-      hasMoreForward: hasMoreForward() ?? false,
-      items: structuredClone(items)
+      hasMoreBackward: hasMoreBackward ?? false,
+      hasMoreForward: hasMoreForward ?? false,
+      items: items ?? []
     });
   };
   const reportStatusChange = () => {
@@ -12801,35 +12832,24 @@ var createPaginationBuffer = (options) => {
   };
   let fetchForwardLater = false;
   let fetchBackwardLater = false;
-  let refetchCurrentLater = false;
   const fetchForward = async () => {
     fetchingForward = true;
     reportStatusChange();
     try {
-      const lastPage = pages2.at(-1);
-      const token = lastPage?.nextForwardToken;
-      const newPage = await fetchPage(token, pageSize);
-      if (lastPage && lastPage.items.length < pageSize) {
-        lastPage.items.push(...newPage.items);
-        lastPage.nextForwardToken = newPage.nextForwardToken;
-      } else if (newPage.items.length > 0) {
-        pages2.push({
-          hasMoreBackward: newPage.hasMoreBackward,
-          hasMoreForward: newPage.hasMoreForward,
-          items: newPage.items,
-          nextBackwardToken: newPage.nextBackwardToken,
-          nextForwardToken: newPage.nextForwardToken,
-          token,
-          tokenDirection: "forward"
-        });
-        if (pages2.length > 3) {
-          const removedPage = pages2.shift();
-          if (removedPage) {
-            items.splice(0, removedPage.items.length);
-          }
+      const newPage = await fetchPage(nextForwardToken);
+      if (options.sortComparator === void 0) {
+        items = [...items ?? [], ...newPage.items];
+      } else {
+        const merged = [...items ?? []];
+        for (const item of newPage.items.toSorted(options.sortComparator)) {
+          insertSorted(merged, item, options.sortComparator, "back");
         }
+        items = merged;
       }
-      items.push(...newPage.items);
+      hasMoreForward = newPage.hasMoreForward;
+      nextForwardToken = newPage.nextForwardToken;
+      hasMoreBackward ??= newPage.hasMoreBackward;
+      nextBackwardToken ??= newPage.nextBackwardToken;
       reportDataChange();
     } catch (error) {
       reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
@@ -12843,32 +12863,20 @@ var createPaginationBuffer = (options) => {
     fetchingBackward = true;
     reportStatusChange();
     try {
-      const firstPage = pages2[0];
-      const token = firstPage?.nextBackwardToken;
-      const newPage = await fetchPage(token, pageSize);
-      if (firstPage && firstPage.items.length < pageSize) {
-        firstPage.items.unshift(...newPage.items);
-        firstPage.nextBackwardToken = newPage.nextBackwardToken;
-        items.unshift(...newPage.items);
-      } else if (newPage.items.length > 0) {
-        pages2.unshift({
-          hasMoreBackward: newPage.hasMoreBackward,
-          hasMoreForward: newPage.hasMoreForward,
-          items: newPage.items,
-          nextBackwardToken: newPage.nextBackwardToken,
-          nextForwardToken: newPage.nextForwardToken,
-          token,
-          // If no token was used, the default direction is forward.
-          tokenDirection: token ? "backward" : "forward"
-        });
-        if (pages2.length > 3) {
-          const removedPage = pages2.pop();
-          if (removedPage) {
-            items.splice(items.length - removedPage.items.length, removedPage.items.length);
-          }
+      const newPage = await fetchPage(nextBackwardToken);
+      if (options.sortComparator === void 0) {
+        items = [...newPage.items, ...items ?? []];
+      } else {
+        const merged = [...items ?? []];
+        for (const item of newPage.items.toSorted(options.sortComparator)) {
+          insertSorted(merged, item, options.sortComparator, "front");
         }
-        items.unshift(...newPage.items);
+        items = merged;
       }
+      hasMoreBackward = newPage.hasMoreBackward;
+      nextBackwardToken = newPage.nextBackwardToken;
+      hasMoreForward ??= newPage.hasMoreForward;
+      nextForwardToken ??= newPage.nextForwardToken;
       reportDataChange();
     } catch (error) {
       reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
@@ -12878,62 +12886,6 @@ var createPaginationBuffer = (options) => {
     }
     runPostFetchActions();
   };
-  const refetchCurrent = async () => {
-    if (pages2.length === 0) {
-      await fetchForward();
-      return;
-    }
-    refetching = true;
-    reportStatusChange();
-    try {
-      const backwardIndex = pages2.findLastIndex((page) => page.tokenDirection === "backward");
-      const backwardPage = backwardIndex === -1 ? void 0 : pages2[backwardIndex];
-      const backwardPageCount = backwardIndex + 1;
-      const forwardIndex = pages2.findIndex((page) => page.tokenDirection === "forward");
-      const forwardPage = forwardIndex === -1 ? void 0 : pages2[forwardIndex];
-      const forwardPageCount = forwardIndex === -1 ? 0 : pages2.length - forwardIndex;
-      const [backwardResponse, forwardResponse] = await Promise.all([
-        backwardPageCount > 0 ? fetchPage(backwardPage?.token, pageSize * backwardPageCount) : void 0,
-        forwardPageCount > 0 ? fetchPage(forwardPage?.token, pageSize * forwardPageCount) : void 0
-      ]);
-      pages2.length = 0;
-      items.length = 0;
-      if (backwardResponse) {
-        pages2.push({
-          hasMoreBackward: backwardResponse.hasMoreBackward,
-          hasMoreForward: backwardResponse.hasMoreForward,
-          items: backwardResponse.items,
-          nextBackwardToken: backwardResponse.nextBackwardToken,
-          nextForwardToken: backwardResponse.nextForwardToken,
-          token: backwardPage?.token,
-          tokenDirection: "backward"
-        });
-        items.push(...backwardResponse.items);
-      }
-      if (forwardResponse) {
-        pages2.push({
-          hasMoreBackward: forwardResponse.hasMoreBackward,
-          hasMoreForward: forwardResponse.hasMoreForward,
-          items: forwardResponse.items,
-          nextBackwardToken: forwardResponse.nextBackwardToken,
-          nextForwardToken: forwardResponse.nextForwardToken,
-          token: forwardPage?.token,
-          tokenDirection: "forward"
-        });
-        items.push(...forwardResponse.items);
-      }
-      reportDataChange();
-      if (hasMoreForward() === false) {
-        fetchForwardLater = true;
-      }
-    } catch (error) {
-      reportError(error instanceof Error ? error : new Error("Failed to fetch forward page", { cause: error }));
-    } finally {
-      refetching = false;
-      reportStatusChange();
-    }
-    runPostFetchActions();
-  };
   const runPostFetchActions = () => {
     if (fetchBackwardLater) {
       fetchBackwardLater = false;
@@ -12943,41 +12895,25 @@ var createPaginationBuffer = (options) => {
       fetchForwardLater = false;
       void fetchForward();
     }
-    if (refetchCurrentLater) {
-      refetchCurrentLater = false;
-      void refetchCurrent();
-    }
   };
   return {
+    clear: () => {
+      if (items !== void 0) {
+        items.length = 0;
+        reportDataChange();
+      }
+    },
     fetchBackward: () => {
       if (fetchingForward || fetchingBackward) {
         return;
       }
-      if (refetching) {
-        fetchBackwardLater = true;
-        return;
-      }
       void fetchBackward();
     },
     fetchForward: () => {
       if (fetchingForward || fetchingBackward) {
         return;
       }
-      if (refetching) {
-        fetchForwardLater = true;
-        return;
-      }
       void fetchForward();
-    },
-    refetchCurrent: () => {
-      if (fetchingForward || fetchingBackward || refetching) {
-        refetchCurrentLater = true;
-        return;
-      }
-      if (refetchCurrentLater) {
-        return;
-      }
-      void refetchCurrent();
     }
   };
 };
@@ -13269,7 +13205,7 @@ function useSpansWebSocket(options) {
 }
 
 // src/hooks/use-spans.ts
-var PAGE_SIZE = 50;
+var PAGE_SIZE = 30;
 var useSpans = () => {
   const api = useAppInspectorApi();
   const [spans, setSpans] = (0, import_react46.useState)();
@@ -13278,9 +13214,9 @@ var useSpans = () => {
   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) {
+    async fetchPage(token) {
       const response = await api.getSpans({
-        limit,
+        limit: PAGE_SIZE,
         pagination_token: token
       });
       return {
@@ -13292,6 +13228,7 @@ var useSpans = () => {
       };
     },
     onDataChange: ({ hasMoreBackward: hasMoreBackward2, hasMoreForward: hasMoreForward2, items }) => {
+      setFetchError(void 0);
       setSpans(items);
       setHasMoreBackward(hasMoreBackward2);
       setHasMoreForward(hasMoreForward2);
@@ -13304,7 +13241,12 @@ var useSpans = () => {
       setFetchingForward(status2.fetchingForward);
       setRefetching(status2.refetching);
     },
-    pageSize: PAGE_SIZE
+    // The spans endpoint is sorted by span ingestion time, which might differ from
+    // the span timestamp. In order to accomodate for this, we will sort the spans
+    // in the frontend with the following sort comparator.
+    sortComparator(a2, b2) {
+      return a2.start_time_unix_nano < b2.start_time_unix_nano ? -1 : 1;
+    }
   }));
   const [hasMoreBackward, setHasMoreBackward] = (0, import_react46.useState)();
   const [hasMoreForward, setHasMoreForward] = (0, import_react46.useState)();
@@ -13318,28 +13260,22 @@ var useSpans = () => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const refreshSpans = (0, import_react46.useCallback)(() => {
-    paginationBuffer.current.refetchCurrent();
-  }, []);
-  (0, import_react46.useEffect)(() => {
-    refreshSpans();
-  }, [refreshSpans]);
   const [clearingSpans, setClearingSpans] = (0, import_react46.useState)(false);
   const clearSpans = (0, import_react46.useCallback)(async () => {
     setClearingSpans(true);
     try {
       await api.deleteSpans();
-      refreshSpans();
+      paginationBuffer.current.clear();
     } catch (error) {
       console.error("Failed to delete spans:", error);
       setFetchError(error instanceof Error ? error : new Error("Failed to delete spans", { cause: error }));
     } finally {
       setClearingSpans(false);
     }
-  }, [refreshSpans, api]);
+  }, [paginationBuffer, api]);
   useSpansWebSocket({
     onMessage: () => {
-      refreshSpans();
+      paginationBuffer.current.fetchForward();
     }
   });
   return {
@@ -13354,7 +13290,6 @@ var useSpans = () => {
     hasMoreBackward,
     hasMoreForward,
     refetching,
-    refreshSpans,
     spans,
     status,
     statusError
@@ -14880,7 +14815,6 @@ var SpansListPage = () => {
     hasMoreBackward,
     hasMoreForward,
     refetching,
-    refreshSpans,
     spans,
     status,
     statusError
@@ -14933,7 +14867,6 @@ var SpansListPage = () => {
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
-            onRefresh: refreshSpans,
             onSpanClick: navigateToSpan,
             refetching,
             spans