@localstack/appinspector-ui 1.0.176 → 1.0.177

package/dist/index.js

@@ -15731,8 +15731,8 @@ var SpansFilterBar = ({
 import { Fragment as Fragment5, jsx as jsx127, jsxs as jsxs122 } from "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";
@@ -15808,10 +15808,8 @@ var SpansDataGridRow = memo8(
         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__ */ jsx127(
             TableCell,
@@ -15862,6 +15860,7 @@ var SpansDataGrid = ({
   hasMoreBackward,
   hasMoreForward,
   licenseLimit,
+  newSpanIds,
   onClearSpans,
   onFiltersChange,
   onOrderChange,
@@ -16057,17 +16056,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 = useRef6(void 0);
-  seenSpanIdsRef.current ??= new Set((filteredSpans ?? []).map((span) => span.span_id));
-  useLayoutEffect3(() => {
-    for (const virtualItem of virtualItems) {
-      const row = displayRows[virtualItem.index];
-      if (row) seenSpanIdsRef.current?.add(row.original.span_id);
-    }
-  });
-  useEffect11(() => {
-    if (filteredSpans?.length === 0) seenSpanIdsRef.current = void 0;
-  }, [filteredSpans?.length]);
   const lastSpanId = filteredSpans?.at(-1)?.span_id;
   useLayoutEffect3(() => {
     handleScroll();
@@ -16237,7 +16225,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__ */ jsx127(
                       SpansDataGridRow,
                       {
@@ -16270,7 +16258,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__ */ jsx127(
                       SpansDataGridRow,
                       {
@@ -16333,6 +16321,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,
@@ -19416,11 +19405,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 = useRef11(/* @__PURE__ */ new Map());
+  const newSpanIdsRef = useRef11(/* @__PURE__ */ new Set());
+  const caughtUpRef = useRef11(false);
   const [filters, setFiltersState] = useState12(EMPTY_FILTERS);
   const setFilters = useCallback8((next) => {
     setFiltersState(next);
@@ -19450,6 +19442,8 @@ var useSpans = () => {
   }, []);
   const resetCorpus = useCallback8(() => {
     spanMapRef.current.clear();
+    newSpanIdsRef.current.clear();
+    caughtUpRef.current = false;
     clearCompute();
   }, [clearCompute]);
   const [epoch, setEpoch] = useState12();
@@ -19536,6 +19530,7 @@ var useSpans = () => {
         setFetchError(void 0);
         setHasMoreBackward(hasMoreBackward2);
         setHasMoreForward(hasMoreForward2);
+        if (!hasMoreForward2) caughtUpRef.current = true;
         setSpansLoaded(true);
       },
       onError: (error) => {
@@ -19546,6 +19541,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)));
@@ -19623,6 +19623,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,
@@ -19642,6 +19643,7 @@ var useSpans = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    newSpanIds,
     producerValues: computeResult.producerValues,
     retryWorker,
     search,
@@ -33050,6 +33052,7 @@ var SpansListPage = () => {
     hasMoreBackward,
     hasMoreForward,
     licenseLimit,
+    newSpanIds,
     producerValues,
     retryWorker,
     search,
@@ -33191,6 +33194,7 @@ var SpansListPage = () => {
               hasMoreBackward,
               hasMoreForward,
               licenseLimit,
+              newSpanIds,
               onClearSpans: clearSpansSync,
               onFetchForward: fetchForward,
               onFiltersChange: setFilters,