@localstack/appinspector-ui 1.0.176 → 1.0.177

package/dist/index.cjs

@@ -15707,8 +15707,8 @@ var SpansFilterBar = ({
 var import_jsx_runtime127 = require("react/jsx-runtime");
 var columnHelper = createColumnHelper();
 var newSpanBackgroundColor = {
-  dark: { from: "rgba(136, 123, 2, 1)", to: "rgba(136, 123, 2, 0)" },
-  light: { from: "rgba(255, 222, 123, 1)", to: "rgba(255, 222, 123, 0)" }
+  dark: { from: "rgba(255, 193, 7, 0.14)", to: "rgba(255, 193, 7, 0)" },
+  light: { from: "rgba(255, 213, 79, 0.45)", to: "rgba(255, 213, 79, 0)" }
 };
 var LABEL_BEGINNING_OF_STREAM = "This is the beginning of the stream";
 var LABEL_END_OF_STREAM = "This is the end of the stream";
@@ -15784,10 +15784,8 @@ var SpansDataGridRow = (0, import_react38.memo)(
         onClick: () => {
           onSpanClick(row.original);
         },
-        sx: {
-          cursor: "pointer",
-          transition: "background-color 1200ms ease-in"
-        },
+        sx: { cursor: "pointer" },
+        transition: { duration: 2.5, ease: "easeOut" },
         children: row.getVisibleCells().map((cell) => {
           return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
             import_material7.TableCell,
@@ -15838,6 +15836,7 @@ var SpansDataGrid = ({
   hasMoreBackward,
   hasMoreForward,
   licenseLimit,
+  newSpanIds,
   onClearSpans,
   onFiltersChange,
   onOrderChange,
@@ -16033,17 +16032,6 @@ var SpansDataGrid = ({
   const totalVirtualSize = virtualizer.getTotalSize();
   const paddingTop = virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
   const paddingBottom = virtualItems.length > 0 ? totalVirtualSize - (virtualItems.at(-1)?.end ?? 0) : totalVirtualSize;
-  const seenSpanIdsRef = (0, import_react38.useRef)(void 0);
-  seenSpanIdsRef.current ??= new Set((filteredSpans ?? []).map((span) => span.span_id));
-  (0, import_react38.useLayoutEffect)(() => {
-    for (const virtualItem of virtualItems) {
-      const row = displayRows[virtualItem.index];
-      if (row) seenSpanIdsRef.current?.add(row.original.span_id);
-    }
-  });
-  (0, import_react38.useEffect)(() => {
-    if (filteredSpans?.length === 0) seenSpanIdsRef.current = void 0;
-  }, [filteredSpans?.length]);
   const lastSpanId = filteredSpans?.at(-1)?.span_id;
   (0, import_react38.useLayoutEffect)(() => {
     handleScroll();
@@ -16213,7 +16201,7 @@ var SpansDataGrid = ({
                   ) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
-                    const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
+                    const isNew = newSpanIds?.has(row.original.span_id) ?? false;
                     return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
                       SpansDataGridRow,
                       {
@@ -16246,7 +16234,7 @@ var SpansDataGrid = ({
                   ) }),
                   hasRows && virtualItems.map((virtualItem) => {
                     const row = displayRows[virtualItem.index];
-                    const isNew = !(seenSpanIdsRef.current?.has(row.original.span_id) ?? false);
+                    const isNew = newSpanIds?.has(row.original.span_id) ?? false;
                     return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
                       SpansDataGridRow,
                       {
@@ -16309,6 +16297,7 @@ var SpansList = (props) => {
         hasMoreBackward: props.hasMoreBackward,
         hasMoreForward: props.hasMoreForward,
         licenseLimit: props.licenseLimit,
+        newSpanIds: props.newSpanIds,
         onClearSpans: props.onClearSpans,
         onFiltersChange: props.onFiltersChange,
         onOrderChange: props.onOrderChange,
@@ -19392,11 +19381,14 @@ function useSpansWebSocket(options) {
 
 // src/hooks/use-spans.ts
 var PAGE_SIZE = 100;
+var NEW_SPAN_HIGHLIGHT_WINDOW_MS = 5e3;
 var useSpans = () => {
   const api = useAppInspectorApi();
   const { onWsClose, onWsOpen, status, wsEnabled } = useAppInspectorStatus();
   const { addPage, clear: clearCompute, result: computeResult, retryWorker, setFilters: setComputeFilters, workerError } = useSpansCompute();
   const spanMapRef = (0, import_react48.useRef)(/* @__PURE__ */ new Map());
+  const newSpanIdsRef = (0, import_react48.useRef)(/* @__PURE__ */ new Set());
+  const caughtUpRef = (0, import_react48.useRef)(false);
   const [filters, setFiltersState] = (0, import_react48.useState)(EMPTY_FILTERS);
   const setFilters = (0, import_react48.useCallback)((next) => {
     setFiltersState(next);
@@ -19426,6 +19418,8 @@ var useSpans = () => {
   }, []);
   const resetCorpus = (0, import_react48.useCallback)(() => {
     spanMapRef.current.clear();
+    newSpanIdsRef.current.clear();
+    caughtUpRef.current = false;
     clearCompute();
   }, [clearCompute]);
   const [epoch, setEpoch] = (0, import_react48.useState)();
@@ -19512,6 +19506,7 @@ var useSpans = () => {
         setFetchError(void 0);
         setHasMoreBackward(hasMoreBackward2);
         setHasMoreForward(hasMoreForward2);
+        if (!hasMoreForward2) caughtUpRef.current = true;
         setSpansLoaded(true);
       },
       onError: (error) => {
@@ -19522,6 +19517,11 @@ var useSpans = () => {
       // Ordering is owned by the compute backend, so no main-thread sortComparator is needed.
       onPageFetched: (direction, items) => {
         for (const span of items) {
+          if (direction === "forward" && caughtUpRef.current && !spanMapRef.current.has(span.span_id)) {
+            const { span_id: spanId } = span;
+            newSpanIdsRef.current.add(spanId);
+            setTimeout(() => newSpanIdsRef.current.delete(spanId), NEW_SPAN_HIGHLIGHT_WINDOW_MS);
+          }
           spanMapRef.current.set(span.span_id, span);
         }
         addPage(direction, items.map((span) => toSpanFilterProjection(span)));
@@ -19599,6 +19599,7 @@ var useSpans = () => {
     const spanMap = spanMapRef.current;
     return computeResult.orderedFilteredIds.map((id2) => spanMap.get(id2)).filter((span) => span !== void 0);
   }, [computeResult, spansLoaded]);
+  const newSpanIds = newSpanIdsRef.current;
   return {
     clearFetchError,
     clearingSpans,
@@ -19618,6 +19619,7 @@ var useSpans = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    newSpanIds,
     producerValues: computeResult.producerValues,
     retryWorker,
     search,
@@ -33026,6 +33028,7 @@ var SpansListPage = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    newSpanIds,
     producerValues,
     retryWorker,
     search,
@@ -33167,6 +33170,7 @@ var SpansListPage = () => {
               hasMoreBackward,
               hasMoreForward,
               licenseLimit,
+              newSpanIds,
               onClearSpans: clearSpansSync,
               onFetchForward: fetchForward,
               onFiltersChange: setFilters,