@localstack/appinspector-ui 1.0.56 → 1.0.57

package/dist/index.js

@@ -9651,7 +9651,7 @@ var AnimatePresence = function(_a) {
 };
 
 // src/components/spans-list/spans-data-grid.tsx
-import { useMemo as useMemo5 } from "react";
+import { memo as memo8, useMemo as useMemo5 } from "react";
 
 // src/components/cells/responsive-timestamp-cell.tsx
 import { memo as memo2 } from "react";
@@ -12145,15 +12145,65 @@ var newSpanBackgroundColor = {
   dark: "#887b02",
   light: "#ffde7b"
 };
+var SpansDataGridRow = memo8(
+  ({ row }) => {
+    const theme = useTheme2();
+    return /* @__PURE__ */ jsx124(
+      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__ */ jsx124(
+            TableCell,
+            {
+              sx: {
+                height: 36,
+                maxWidth: `${cell.column.getSize().toString()}px`,
+                minWidth: `${cell.column.getSize().toString()}px`
+              },
+              children: /* @__PURE__ */ jsx124(
+                Box3,
+                {
+                  sx: {
+                    "alignItems": "center",
+                    "display": "flex",
+                    "flex-direction": "row",
+                    "height": "100%",
+                    "tr:hover &": {
+                      backgroundColor: (theme2) => theme2.palette.action.hover
+                    },
+                    "width": "100%"
+                  },
+                  children: /* @__PURE__ */ jsx124(Box3, { 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
 }) => {
@@ -12191,6 +12241,16 @@ var SpansDataGrid = ({
       size: 180
     }),
     columnHelper.accessor("operation_name", {
+      cell: (props) => /* @__PURE__ */ jsx124(
+        Box3,
+        {
+          sx: {
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: /* @__PURE__ */ jsx124("span", { title: props.getValue(), children: props.getValue() })
+        }
+      ),
       header: "Action",
       id: "operationName",
       size: 96
@@ -12231,7 +12291,6 @@ var SpansDataGrid = ({
   const columnCount = table.getAllColumns().length;
   const rows = table.getRowModel().rows;
   const hasRows = rows.length > 0;
-  const theme = useTheme2();
   return /* @__PURE__ */ jsxs120(Fragment3, { children: [
     /* @__PURE__ */ jsx124(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs120(Box3, { sx: { alignItems: "center", display: "flex", gap: "0.5rem" }, children: [
       /* @__PURE__ */ jsx124(Box3, { sx: { flexGrow: 1 } }),
@@ -12293,74 +12352,20 @@ var SpansDataGrid = ({
               /* @__PURE__ */ jsxs120(TableBody, { children: [
                 spans === void 0 && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124(CircularProgress, { size: 48, sx: { m: 4 } }) }) }),
                 spans?.length === 0 && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: "There are no spans" }) }) }),
+                hasRows && !hasMoreBackward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: "This is the beginning of the stream" }) }) }),
                 hasRows && hasMoreBackward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsxs120(TableCell, { colSpan: columnCount, sx: { textAlign: "center" }, children: [
-                  !fetchingBackward && !fetchingForward && /* @__PURE__ */ jsx124(
+                  !fetchingBackward && /* @__PURE__ */ jsx124(
                     Button,
                     {
                       onClick: onFetchBackward,
                       sx: { my: 1 },
-                      children: "Load newer spans"
-                    }
-                  ),
-                  (fetchingBackward || fetchingForward) && /* @__PURE__ */ jsx124(CircularProgress, { size: 24, sx: { m: 2 } })
-                ] }) }),
-                hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx124(
-                  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__ */ jsx124(
-                        TableCell,
-                        {
-                          sx: {
-                            height: 36,
-                            maxWidth: `${cell.column.getSize().toString()}px`,
-                            minWidth: `${cell.column.getSize().toString()}px`
-                          },
-                          children: /* @__PURE__ */ jsx124(
-                            Box3,
-                            {
-                              sx: {
-                                "alignItems": "center",
-                                "display": "flex",
-                                "flex-direction": "row",
-                                "height": "100%",
-                                "tr:hover &": {
-                                  backgroundColor: (theme2) => theme2.palette.action.hover
-                                },
-                                "width": "100%"
-                              },
-                              children: /* @__PURE__ */ jsx124(Box3, { sx: { px: 1, width: "100%" }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
-                            }
-                          )
-                        },
-                        cell.id
-                      );
-                    })
-                  },
-                  row.original.span_id
-                )) }),
-                hasRows && hasMoreForward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsxs120(TableCell, { colSpan: columnCount, sx: { textAlign: "center" }, children: [
-                  !fetchingBackward && !fetchingForward && /* @__PURE__ */ jsx124(
-                    Button,
-                    {
-                      onClick: onFetchForward,
-                      sx: { my: 1 },
                       children: "Load older spans"
                     }
                   ),
-                  (fetchingBackward || fetchingForward) && /* @__PURE__ */ jsx124(CircularProgress, { size: 24, sx: { m: 2 } })
+                  fetchingBackward && /* @__PURE__ */ jsx124(CircularProgress, { size: 24, sx: { m: 2 } })
                 ] }) }),
-                hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: "There are no older spans" }) }) })
+                hasRows && /* @__PURE__ */ jsx124(AnimatePresence, { initial: false, children: rows.map((row) => /* @__PURE__ */ jsx124(SpansDataGridRow, { row }, row.original.span_id)) }),
+                hasRows && !hasMoreForward && /* @__PURE__ */ jsx124(TableRow, { children: /* @__PURE__ */ jsx124(TableCell, { colSpan: columnCount, sx: { fontStyle: "italic", textAlign: "center" }, children: /* @__PURE__ */ jsx124("span", { children: "This is the end of the stream" }) }) })
               ] })
             ]
           }
@@ -12377,7 +12382,7 @@ var SpansList = (props) => {
     props.fetchError && /* @__PURE__ */ jsxs121(
       Alert,
       {
-        action: /* @__PURE__ */ jsx125(Button2, { onClick: props.onRefresh, children: "Retry" }),
+        action: /* @__PURE__ */ jsx125(Button2, { onClick: props.onFetchForward, children: "Retry" }),
         severity: "error",
         children: [
           "Unexpected error:",
@@ -12397,7 +12402,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
@@ -12731,7 +12735,7 @@ var useStatus = () => {
   const hasFetchedReference = useRef8(false);
   const abortControllerReference = useRef8(null);
   const checkStatus = useCallback3(async () => {
-    if (abortControllerReference.current) {
+    if (abortControllerReference.current !== null) {
       abortControllerReference.current.abort();
     }
     const abortController = new AbortController();
@@ -12764,26 +12768,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 = () => {
@@ -12798,35 +12829,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 }));
@@ -12840,32 +12860,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 }));
@@ -12875,62 +12883,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;
@@ -12940,41 +12892,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();
     }
   };
 };
@@ -13266,7 +13202,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] = useState6();
@@ -13275,9 +13211,9 @@ var useSpans = () => {
   const [fetchingBackward, setFetchingBackward] = useState6(false);
   const [refetching, setRefetching] = useState6(false);
   const paginationBuffer = useRef10(createPaginationBuffer({
-    async fetchPage(token, limit) {
+    async fetchPage(token) {
       const response = await api.getSpans({
-        limit,
+        limit: PAGE_SIZE,
         pagination_token: token
       });
       return {
@@ -13289,6 +13225,7 @@ var useSpans = () => {
       };
     },
     onDataChange: ({ hasMoreBackward: hasMoreBackward2, hasMoreForward: hasMoreForward2, items }) => {
+      setFetchError(void 0);
       setSpans(items);
       setHasMoreBackward(hasMoreBackward2);
       setHasMoreForward(hasMoreForward2);
@@ -13301,7 +13238,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] = useState6();
   const [hasMoreForward, setHasMoreForward] = useState6();
@@ -13315,28 +13257,22 @@ var useSpans = () => {
     fetchForward();
   }, [fetchForward]);
   const { checkStatus, error: statusError, status } = useStatus();
-  const refreshSpans = useCallback6(() => {
-    paginationBuffer.current.refetchCurrent();
-  }, []);
-  useEffect13(() => {
-    refreshSpans();
-  }, [refreshSpans]);
   const [clearingSpans, setClearingSpans] = useState6(false);
   const clearSpans = useCallback6(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 {
@@ -13351,7 +13287,6 @@ var useSpans = () => {
     hasMoreBackward,
     hasMoreForward,
     refetching,
-    refreshSpans,
     spans,
     status,
     statusError
@@ -14209,7 +14144,7 @@ import { useEffect as useEffect15, useState as useState10 } from "react";
 import { Box as Box15, Stack as Stack2, Typography as Typography10 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo as memo8 } from "react";
+import { memo as memo9 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
@@ -14269,7 +14204,7 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = memo8(({ data, selected }) => {
+var ServiceNode = memo9(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ jsxs130(Box15, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ jsxs130(
@@ -14435,7 +14370,7 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
 import { Add, FitScreen, Remove } from "@mui/icons-material";
 import { Box as Box16, IconButton as IconButton4 } from "@mui/material";
 import { useReactFlow, useStore } from "@xyflow/react";
-import { memo as memo9 } from "react";
+import { memo as memo10 } from "react";
 
 // node_modules/zustand/esm/shallow.mjs
 function shallow$1(objA, objB) {
@@ -14482,7 +14417,7 @@ var selector = (s) => ({
   maxZoomReached: s.transform[2] >= s.maxZoom,
   minZoomReached: s.transform[2] <= s.minZoom
 });
-var Controls = memo9(() => {
+var Controls = memo10(() => {
   const { maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
   const { fitView, zoomIn, zoomOut } = useReactFlow();
   const onZoomInHandler = () => {
@@ -14877,7 +14812,6 @@ var SpansListPage = () => {
     hasMoreBackward,
     hasMoreForward,
     refetching,
-    refreshSpans,
     spans,
     status,
     statusError
@@ -14930,7 +14864,6 @@ var SpansListPage = () => {
             onClearSpans: clearSpansSync,
             onFetchBackward: fetchBackward,
             onFetchForward: fetchForward,
-            onRefresh: refreshSpans,
             onSpanClick: navigateToSpan,
             refetching,
             spans