@marimo-team/frontend 0.23.2-dev15 → 0.23.2-dev18

package/src/components/data-table/pagination.tsx

@@ -2,7 +2,7 @@
 "use no memo";
 
 import type { Table } from "@tanstack/react-table";
-import { range } from "lodash-es";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,9 +37,6 @@ import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
 import { PluralWord } from "@/utils/pluralize";
-import type { PageRange } from "./types";
-
-const MAX_PAGES_BEFORE_CLAMPING = 100;
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -189,6 +186,81 @@ export const DataTablePagination = <TData,>({
   );
 };
 
+const PAGE_ITEM_HEIGHT = 32;
+
+/**
+ * Compute contiguous ranges of page numbers whose string starts with `prefix`,
+ * without scanning every page. O(log10(totalPages)).
+ *
+ * For prefix "5", totalPages=500: [[5,5], [50,59], [500,500]]
+ */
+export function matchingPageRanges(
+  prefix: string,
+  totalPages: number,
+): [number, number][] {
+  const n = Number.parseInt(prefix, 10);
+  if (Number.isNaN(n) || n <= 0 || String(n) !== prefix) {
+    return [];
+  }
+
+  const ranges: [number, number][] = [];
+  let power = 1;
+  while (n * power <= totalPages) {
+    const start = n * power;
+    const end = Math.min((n + 1) * power - 1, totalPages);
+    ranges.push([start, end]);
+    power *= 10;
+  }
+  return ranges;
+}
+
+interface PageMapping {
+  count: number;
+  pageAtIndex: (index: number) => number;
+  indexOfPage: (page: number) => number;
+}
+
+function createPageMapping(search: string, totalPages: number): PageMapping {
+  if (search === "") {
+    return {
+      count: totalPages,
+      pageAtIndex: (i) => i + 1,
+      indexOfPage: (p) => p - 1,
+    };
+  }
+
+  const ranges = matchingPageRanges(search, totalPages);
+  let count = 0;
+  for (const [s, e] of ranges) {
+    count += e - s + 1;
+  }
+
+  return {
+    count,
+    pageAtIndex: (i) => {
+      let offset = 0;
+      for (const [start, end] of ranges) {
+        const size = end - start + 1;
+        if (i < offset + size) {
+          return start + (i - offset);
+        }
+        offset += size;
+      }
+      return -1;
+    },
+    indexOfPage: (p) => {
+      let offset = 0;
+      for (const [start, end] of ranges) {
+        if (p >= start && p <= end) {
+          return offset + (p - start);
+        }
+        offset += end - start + 1;
+      }
+      return -1;
+    },
+  };
+}
+
 export const PageSelector = ({
   currentPage,
   totalPages,
@@ -199,19 +271,31 @@ export const PageSelector = ({
   onPageChange: (page: number) => void;
 }) => {
   const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
 
-  const pageRanges = React.useMemo(
-    () => getPageRanges(currentPage, totalPages),
-    [currentPage, totalPages],
+  const mapping = React.useMemo(
+    () => createPageMapping(search, totalPages),
+    [search, totalPages],
   );
 
   const handleSelect = (page: number) => {
     onPageChange(page - 1);
+    setSearch("");
     setOpen(false);
   };
 
+  const listHeight = Math.min(mapping.count * PAGE_ITEM_HEIGHT, 240);
+
   return (
-    <Popover open={totalPages > 1 ? open : false} onOpenChange={setOpen}>
+    <Popover
+      open={totalPages > 1 ? open : false}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setSearch("");
+        }
+      }}
+    >
       <PopoverTrigger asChild={true} disabled={totalPages <= 1}>
         <button
           type="button"
@@ -229,18 +313,15 @@ export const PageSelector = ({
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-36 p-0" align="center" sideOffset={6}>
-        <Command
-          shouldFilter={true}
-          filter={(value, search) => {
-            return value.startsWith(search) ? 1 : 0;
-          }}
-        >
+        <Command shouldFilter={false} value={String(currentPage)}>
           <CommandInput
             placeholder={`Page (1–${totalPages})`}
             rootClassName="px-2 h-8"
             className="text-xs h-8"
             autoFocus={true}
             icon={null}
+            value={search}
+            onValueChange={setSearch}
             onKeyDown={(e) => {
               // Allow navigation/editing keys, block non-numeric input
               const allowed = [
@@ -248,6 +329,8 @@ export const PageSelector = ({
                 "Delete",
                 "ArrowLeft",
                 "ArrowRight",
+                "ArrowUp",
+                "ArrowDown",
                 "Tab",
                 "Enter",
                 "Escape",
@@ -257,27 +340,19 @@ export const PageSelector = ({
               }
             }}
           />
-          <CommandList className="max-h-60">
-            {pageRanges.map((item) =>
-              item.type === "ellipsis" ? null : (
-                <CommandItem
-                  key={item.page}
-                  value={String(item.page)}
-                  data-testid="page-option"
-                  className={cn(
-                    "text-xs cursor-pointer",
-                    item.page === currentPage && "font-semibold bg-accent",
-                  )}
-                  onSelect={() => handleSelect(item.page)}
-                  onMouseDown={Events.preventFocus}
-                >
-                  {item.page}
-                </CommandItem>
-              ),
+          <CommandList className="max-h-60 overflow-hidden">
+            {mapping.count === 0 ? (
+              <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
+                No matching page
+              </CommandEmpty>
+            ) : (
+              <VirtualizedPageList
+                mapping={mapping}
+                currentPage={currentPage}
+                listHeight={listHeight}
+                onSelect={handleSelect}
+              />
             )}
-            <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
-              No matching page
-            </CommandEmpty>
           </CommandList>
         </Command>
       </PopoverContent>
@@ -285,57 +360,95 @@ export const PageSelector = ({
   );
 };
 
-export function getPageRanges(
-  currentPage: number,
-  totalPages: number,
-): PageRange[] {
-  if (totalPages <= MAX_PAGES_BEFORE_CLAMPING) {
-    return range(totalPages).map((i) => ({ type: "page", page: i + 1 }));
-  }
-
-  const middle = Math.floor(totalPages / 2);
-
-  const items: PageRange[] = [];
-  const addPages = (start: number, count: number) => {
-    for (let i = 0; i < count; i++) {
-      items.push({ type: "page", page: start + i });
-    }
-  };
-
-  addPages(1, 10);
-  items.push({ type: "ellipsis", key: "e1" });
-
-  if (currentPage > 10 && currentPage <= middle - 5) {
-    items.push(
-      { type: "page", page: currentPage },
-      { type: "ellipsis", key: "e1b" },
-    );
-  }
+const VirtualizedPageList = ({
+  mapping,
+  currentPage,
+  listHeight,
+  onSelect,
+}: {
+  mapping: PageMapping;
+  currentPage: number;
+  listHeight: number;
+  onSelect: (page: number) => void;
+}) => {
+  const parentRef = React.useRef<HTMLDivElement>(null);
 
-  addPages(middle - 4, 10);
-  items.push({ type: "ellipsis", key: "e2" });
+  const currentIndex = mapping.indexOfPage(currentPage);
 
-  if (currentPage > middle + 5 && currentPage <= totalPages - 10) {
-    items.push(
-      { type: "page", page: currentPage },
-      { type: "ellipsis", key: "e2b" },
-    );
-  }
+  const virtualizer = useVirtualizer({
+    count: mapping.count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => PAGE_ITEM_HEIGHT,
+    overscan: 10,
+    initialOffset:
+      currentIndex > 0
+        ? Math.max(0, currentIndex * PAGE_ITEM_HEIGHT - listHeight / 2)
+        : 0,
+  });
 
-  addPages(totalPages - 9, 10);
+  // Scroll to top when filtered results change (user is searching)
+  const prevCount = React.useRef(mapping.count);
+  React.useEffect(() => {
+    if (mapping.count !== prevCount.current) {
+      virtualizer.scrollToIndex(0);
+      prevCount.current = mapping.count;
+    }
+  }, [mapping.count, virtualizer]);
 
-  return items;
-}
+  return (
+    <div ref={parentRef} style={{ height: listHeight, overflow: "auto" }}>
+      <div
+        style={{
+          height: virtualizer.getTotalSize(),
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const page = mapping.pageAtIndex(virtualItem.index);
+          return (
+            <CommandItem
+              key={page}
+              value={String(page)}
+              data-testid="page-option"
+              aria-selected={page === currentPage}
+              className={cn(
+                "text-xs cursor-pointer",
+                page === currentPage && "font-semibold bg-accent",
+              )}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: virtualItem.size,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+              onSelect={() => onSelect(page)}
+              onMouseDown={Events.preventFocus}
+            >
+              {page}
+            </CommandItem>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
 export function prettifyRowCount(rowCount: number, locale: string): string {
   return `${prettyNumber(rowCount, locale)} ${new PluralWord("row").pluralize(rowCount)}`;
 }
 
-export const prettifyRowColumnCount = (
-  numRows: number | "too_many",
-  totalColumns: number,
-  locale: string,
-): string => {
+export const prettifyRowColumnCount = ({
+  numRows,
+  totalColumns,
+  locale,
+}: {
+  numRows: number | "too_many";
+  totalColumns: number;
+  locale: string;
+}): string => {
   const rowsLabel =
     numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows, locale);
   const columnsLabel = `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;

package/src/components/data-table/types.ts

@@ -105,7 +105,3 @@ export function extractTimezone(dtype: string | undefined): string | undefined {
   const match = /^datetime(?:64)?\[[^,]+,([^,]+)]$/.exec(dtype);
   return match?.[1]?.trim();
 }
-
-export type PageRange =
-  | { type: "page"; page: number }
-  | { type: "ellipsis"; key: string };

package/dist/assets/CellStatus-CvVketBj.js

@@ -1 +0,0 @@
-import{s as $}from"./chunk-LvLJmgfZ.js";import{t as z}from"./react-Bj1aDYRI.js";import{dt as F}from"./cells-CvCKjUwL.js";import{t as O}from"./compiler-runtime-B3qBwwSJ.js";import{_ as B}from"./useEventListener-DGjKht0c.js";import{t as L}from"./jsx-runtime-Blw4afVn.js";import{t as _}from"./tooltip-DmqhBBs6.js";import{t as V}from"./createLucideIcon-w-Qo9n0R.js";import{c as G,l as A,n as J,t as M}from"./toDate-BGIVWsZ9.js";import{t as K}from"./ellipsis-DidENKDy.js";import{t as R}from"./refresh-cw-CiOe0azG.js";import{t as Q}from"./workflow-BAgKBPlq.js";import{i as U,n as Y,r as C,t as Z}from"./en-US-JRtp5zfw.js";import{t as E}from"./useDateFormatter-BEz9SEXo.js";import{t as H}from"./multi-icon-CGRsWmew.js";var k=V("ban",[["path",{d:"M4.929 4.929 19.07 19.071",key:"196cmz"}],["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]]);function X(n,e){let t=M(n)-+M(e);return t<0?-1:t>0?1:t}function ee(n){return J(n,Date.now())}function te(n,e,t){let[d,l]=Y(t==null?void 0:t.in,n,e),h=d.getFullYear()-l.getFullYear(),o=d.getMonth()-l.getMonth();return h*12+o}function se(n){return e=>{let t=(n?Math[n]:Math.trunc)(e);return t===0?0:t}}function ae(n,e){return M(n)-+M(e)}function le(n,e){let t=M(n,e==null?void 0:e.in);return t.setHours(23,59,59,999),t}function ne(n,e){let t=M(n,e==null?void 0:e.in),d=t.getMonth();return t.setFullYear(t.getFullYear(),d+1,0),t.setHours(23,59,59,999),t}function re(n,e){let t=M(n,e==null?void 0:e.in);return+le(t,e)==+ne(t,e)}function ie(n,e,t){let[d,l,h]=Y(t==null?void 0:t.in,n,n,e),o=X(l,h),b=Math.abs(te(l,h));if(b<1)return 0;l.getMonth()===1&&l.getDate()>27&&l.setDate(30),l.setMonth(l.getMonth()-o*b);let m=X(l,h)===-o;re(d)&&b===1&&X(d,h)===1&&(m=!1);let x=o*(b-+m);return x===0?0:x}function ce(n,e,t){let d=ae(n,e)/1e3;return se(t==null?void 0:t.roundingMethod)(d)}function oe(n,e,t){let d=U(),l=(t==null?void 0:t.locale)??d.locale??Z,h=X(n,e);if(isNaN(h))throw RangeError("Invalid time value");let o=Object.assign({},t,{addSuffix:t==null?void 0:t.addSuffix,comparison:h}),[b,m]=Y(t==null?void 0:t.in,...h>0?[e,n]:[n,e]),x=ce(m,b),D=(C(m)-C(b))/1e3,p=Math.round((x-D)/60),T;if(p<2)return t!=null&&t.includeSeconds?x<5?l.formatDistance("lessThanXSeconds",5,o):x<10?l.formatDistance("lessThanXSeconds",10,o):x<20?l.formatDistance("lessThanXSeconds",20,o):x<40?l.formatDistance("halfAMinute",0,o):x<60?l.formatDistance("lessThanXMinutes",1,o):l.formatDistance("xMinutes",1,o):p===0?l.formatDistance("lessThanXMinutes",1,o):l.formatDistance("xMinutes",p,o);if(p<45)return l.formatDistance("xMinutes",p,o);if(p<90)return l.formatDistance("aboutXHours",1,o);if(p<1440){let g=Math.round(p/60);return l.formatDistance("aboutXHours",g,o)}else{if(p<2520)return l.formatDistance("xDays",1,o);if(p<43200){let g=Math.round(p/G);return l.formatDistance("xDays",g,o)}else if(p<43200*2)return T=Math.round(p/A),l.formatDistance("aboutXMonths",T,o)}if(T=ie(m,b),T<12){let g=Math.round(p/A);return l.formatDistance("xMonths",g,o)}else{let g=T%12,u=Math.trunc(T/12);return g<3?l.formatDistance("aboutXYears",u,o):g<9?l.formatDistance("overXYears",u,o):l.formatDistance("almostXYears",u+1,o)}}function ue(n,e){return oe(n,ee(n),e)}var I=$(z(),1);function de(n){let e=(0,I.useRef)(n),[t,d]=(0,I.useState)(n);return(0,I.useEffect)(()=>{let l=setInterval(()=>{d(F.now().toMilliseconds())},17);return()=>clearInterval(l)},[]),t-e.current}var P=O(),s=$(L(),1);const me=n=>{let e=(0,P.c)(79),{editing:t,status:d,disabled:l,staleInputs:h,edited:o,interrupted:b,elapsedTime:m,runStartTimestamp:x,lastRunStartTimestamp:D,uninstantiated:p}=n;if(!t)return null;let T=x??D,g;e[0]===T?g=e[1]:(g=T?(0,s.jsx)(he,{lastRanTime:T}):null,e[0]=T,e[1]=g);let u=g;if(l&&d==="running")return B.error("CellStatusComponent: disabled and running"),null;if(l&&h){let c;e[2]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is stale, but it's disabled and can't be run"}),e[2]=c):c=e[2];let a;e[3]===u?a=e[4]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[3]=u,e[4]=a);let i;e[5]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"stale",children:(0,s.jsxs)(H,{children:[(0,s.jsx)(k,{className:"h-5 w-5",strokeWidth:1.5}),(0,s.jsx)(R,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[5]=i):i=e[5];let r;return e[6]===a?r=e[7]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[6]=a,e[7]=r),r}if(l){let c;e[8]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is disabled"}),e[8]=c):c=e[8];let a;e[9]===u?a=e[10]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[9]=u,e[10]=a);let i;e[11]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-disabled","data-testid":"cell-status","data-status":"disabled",children:(0,s.jsx)(k,{className:"h-5 w-5",strokeWidth:1.5})}),e[11]=i):i=e[11];let r;return e[12]===a?r=e[13]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[12]=a,e[13]=r),r}if(!h&&d==="disabled-transitively"){let c;e[14]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"An ancestor of this cell is disabled, so it can't be run"}),e[14]=c):c=e[14];let a;e[15]===u?a=e[16]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[15]=u,e[16]=a);let i;e[17]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"disabled-transitively",children:(0,s.jsxs)(H,{layerTop:!0,children:[(0,s.jsx)(Q,{className:"h-5 w-5",strokeWidth:1.5}),(0,s.jsx)(k,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[17]=i):i=e[17];let r;return e[18]===a?r=e[19]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[18]=a,e[19]=r),r}if(h&&d==="disabled-transitively"){let c;e[20]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is stale, but an ancestor is disabled so it can't be run"}),e[20]=c):c=e[20];let a;e[21]===u?a=e[22]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[21]=u,e[22]=a);let i;e[23]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-stale","data-testid":"cell-status","data-status":"stale",children:(0,s.jsxs)(H,{children:[(0,s.jsx)(R,{className:"h-5 w-5",strokeWidth:1}),(0,s.jsx)(k,{className:"h-3 w-3",strokeWidth:2.5})]})}),e[23]=i):i=e[23];let r;return e[24]===a?r=e[25]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[24]=a,e[25]=r),r}if(d==="running"){let c;e[26]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is running"}),e[26]=c):c=e[26];let a;e[27]===u?a=e[28]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[27]=u,e[28]=a);let i;e[29]===x?i=e[30]:(i=F.fromSeconds(x)||F.now(),e[29]=x,e[30]=i);let r;e[31]===i?r=e[32]:(r=(0,s.jsx)("div",{className:"cell-status-icon elapsed-time running","data-testid":"cell-status","data-status":"running",children:(0,s.jsx)(fe,{startTime:i})}),e[31]=i,e[32]=r);let f;return e[33]!==a||e[34]!==r?(f=(0,s.jsx)(_,{content:a,usePortal:!0,children:r}),e[33]=a,e[34]=r,e[35]=f):f=e[35],f}if(d==="queued"){let c;e[36]===Symbol.for("react.memo_cache_sentinel")?(c=(0,s.jsx)("span",{children:"This cell is queued to run"}),e[36]=c):c=e[36];let a;e[37]===u?a=e[38]:(a=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[c,u]}),e[37]=u,e[38]=a);let i;e[39]===Symbol.for("react.memo_cache_sentinel")?(i=(0,s.jsx)("div",{className:"cell-status-icon cell-status-queued","data-testid":"cell-status","data-status":"queued",children:(0,s.jsx)(K,{className:"h-5 w-5",strokeWidth:1.5})}),e[39]=i):i=e[39];let r;return e[40]===a?r=e[41]:(r=(0,s.jsx)(_,{content:a,usePortal:!0,children:i}),e[40]=a,e[41]=r),r}if(o||b||h||p){let c;e[42]===m?c=e[43]:(c=W(m),e[42]=m,e[43]=c);let a=c,i;e[44]!==m||e[45]!==a?(i=m?(0,s.jsx)(q,{elapsedTime:a}):null,e[44]=m,e[45]=a,e[46]=i):i=e[46];let r=i,f,v="";if(p)f="This cell has not yet been run";else if(b){f="This cell was interrupted when it was last run";let j;e[47]===r?j=e[48]:(j=(0,s.jsxs)("span",{children:["This cell ran for ",r," before being interrupted"]}),e[47]=r,e[48]=j),v=j}else if(o){f="This cell has been modified since it was last run";let j;e[49]===r?j=e[50]:(j=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[49]=r,e[50]=j),v=j}else{f="This cell has not been run with the latest inputs";let j;e[51]===r?j=e[52]:(j=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[51]=r,e[52]=j),v=j}let N;e[53]===Symbol.for("react.memo_cache_sentinel")?(N=(0,s.jsx)("div",{className:"cell-status-stale","data-testid":"cell-status","data-status":"outdated",children:(0,s.jsx)(R,{className:"h-5 w-5",strokeWidth:1.5})}),e[53]=N):N=e[53];let S;e[54]===f?S=e[55]:(S=(0,s.jsx)(_,{content:f,usePortal:!0,children:N}),e[54]=f,e[55]=S);let y;e[56]!==m||e[57]!==a||e[58]!==u||e[59]!==v?(y=m&&(0,s.jsx)(_,{content:(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[v,u]}),usePortal:!0,children:(0,s.jsx)("div",{className:"elapsed-time hover-action","data-testid":"cell-status","data-status":"outdated",children:(0,s.jsx)("span",{children:a})})}),e[56]=m,e[57]=a,e[58]=u,e[59]=v,e[60]=y):y=e[60];let w;return e[61]!==S||e[62]!==y?(w=(0,s.jsxs)("div",{className:"cell-status-icon flex items-center gap-2",children:[S,y]}),e[61]=S,e[62]=y,e[63]=w):w=e[63],w}if(m!==null){let c;e[64]===m?c=e[65]:(c=W(m),e[64]=m,e[65]=c);let a=c,i;e[66]!==m||e[67]!==a?(i=m?(0,s.jsx)(q,{elapsedTime:a}):null,e[66]=m,e[67]=a,e[68]=i):i=e[68];let r=i,f;e[69]===r?f=e[70]:(f=(0,s.jsxs)("span",{children:["This cell took ",r," to run"]}),e[69]=r,e[70]=f);let v;e[71]!==u||e[72]!==f?(v=(0,s.jsxs)("div",{className:"flex flex-col gap-1",children:[f,u]}),e[71]=u,e[72]=f,e[73]=v):v=e[73];let N;e[74]===a?N=e[75]:(N=(0,s.jsx)("div",{className:"cell-status-icon elapsed-time hover-action","data-testid":"cell-status","data-status":"idle",children:(0,s.jsx)("span",{children:a})}),e[74]=a,e[75]=N);let S;return e[76]!==v||e[77]!==N?(S=(0,s.jsx)(_,{content:v,usePortal:!0,children:N}),e[76]=v,e[77]=N,e[78]=S):S=e[78],S}return null},q=n=>{let e=(0,P.c)(2),t;return e[0]===n.elapsedTime?t=e[1]:(t=(0,s.jsx)("span",{className:"tracking-wide font-semibold",children:n.elapsedTime}),e[0]=n.elapsedTime,e[1]=t),t};var he=n=>{let e=(0,P.c)(4),t=new Date(n.lastRanTime*1e3),d=new Date,l;e[0]===Symbol.for("react.memo_cache_sentinel")?(l={hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,hour12:!0},e[0]=l):l=e[0];let h=E(l),o;e[1]===Symbol.for("react.memo_cache_sentinel")?(o={month:"numeric",day:"numeric",hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,hour12:!0},e[1]=o):o=e[1];let b=E(o),m=t.toDateString()===d.toDateString()?h:b,x=ue(t),D;return e[2]===x?D=e[3]:(D=(0,s.jsxs)("span",{className:"text-muted-foreground",children:["(",x," ago)"]}),e[2]=x,e[3]=D),(0,s.jsxs)("span",{children:["Ran at"," ",(0,s.jsx)("strong",{className:"tracking-wide font-semibold",children:m.format(t)})," ",D]})};function W(n){if(n===null)return"";let e=n,t=e/1e3;return t>=60?`${Math.floor(t/60)}m${Math.floor(t%60)}s`:t>=1?`${t.toFixed(2).toString()}s`:`${e.toFixed(0).toString()}ms`}var fe=n=>{let e=(0,P.c)(6),t;e[0]===n.startTime?t=e[1]:(t=n.startTime.toMilliseconds(),e[0]=n.startTime,e[1]=t);let d=de(t),l;e[2]===d?l=e[3]:(l=W(d),e[2]=d,e[3]=l);let h;return e[4]===l?h=e[5]:(h=(0,s.jsx)("span",{children:l}),e[4]=l,e[5]=h),h};export{q as n,W as r,me as t};