@localstack/appinspector-ui 1.0.106 → 1.0.107

package/dist/index.cjs

@@ -14871,6 +14871,7 @@ 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_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.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_material6.TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.TableCell, { colSpan, sx: { textAlign: "center" }, children: [
   !fetching && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Button, { onClick: onFetch, sx: { my: 1 }, children: label }),
@@ -15029,6 +15030,28 @@ var SpansDataGrid = ({
   const columnCount = table.getAllColumns().length;
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
+  const containerRef = (0, import_react42.useRef)(null);
+  const isAtLiveEdgeRef = (0, import_react42.useRef)(true);
+  const handleScroll = (0, import_react42.useCallback)(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    if (order2 === "oldest_first") {
+      const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+      isAtLiveEdgeRef.current = distanceFromBottom <= STICK_TO_EDGE_THRESHOLD_PX;
+      return;
+    }
+    isAtLiveEdgeRef.current = element.scrollTop <= STICK_TO_EDGE_THRESHOLD_PX;
+  }, [order2]);
+  const lastSpanId = spans?.at(-1)?.span_id;
+  (0, import_react42.useLayoutEffect)(() => {
+    handleScroll();
+  }, [handleScroll]);
+  (0, import_react42.useLayoutEffect)(() => {
+    if (order2 !== "oldest_first") return;
+    const element = containerRef.current;
+    if (!element || !isAtLiveEdgeRef.current) return;
+    element.scrollTop = element.scrollHeight;
+  }, [order2, spans?.length, lastSpanId]);
   return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Grid, { item: true, xs: 12, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_material6.Box, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(SpanCountBadge, { licenseLimit, systemLimit, totalCount, visibleCount: spans?.length }),
@@ -15086,6 +15109,8 @@ var SpansDataGrid = ({
     /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material6.Paper, { sx: { flexGrow: 1, overflow: "hidden", position: "relative", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
       import_material6.TableContainer,
       {
+        onScroll: handleScroll,
+        ref: containerRef,
         sx: {
           bottom: 0,
           flexGrow: 1,