@marimo-team/islands 0.23.9-dev6 → 0.23.9-dev8

package/dist/{reveal-component-Pq7C0LSU.js → reveal-component-v4zHgynl.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { ct as kioskModeAtom } from "./html-to-image-CiSinpSR.js";
 import "./chunk-5FQGJX7Z-BNjes6Yx.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
-import { G as PanelGroup, Gt as Code, Ht as Expand, K as PanelResizeHandle, Vt as EyeOff, W as Panel, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-DILs4Gug.js";
+import { G as Panel, Ht as EyeOff, K as PanelGroup, Kt as Code, Ut as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, q as PanelResizeHandle, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-SqsoLwxQ.js";
 import { q as useDebouncedCallback } from "./input-CZD2z6X2.js";
 import "./toDate-ZVVIBmdk.js";
 import "./react-dom-BTJzcVJ9.js";
@@ -7223,7 +7223,7 @@ var NotesAside = (e5) => {
   t[18] === s ? p = t[19] : (p = s && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesAside, { text: s }), t[18] = s, t[19] = p);
   let io;
   return t[20] !== o || t[21] !== ro || t[22] !== p ? (io = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(o, { children: [ro, p] }), t[20] = o, t[21] = ro, t[22] = p, t[23] = io) : io = t[23], io;
-}, reveal_component_default = ({ cellsWithOutput: e5, layout: o, setLayout: s, activeIndex: l, onSlideChange: ao, mode: so, configWidth: uo = 300, isEditable: fo = false }) => {
+}, reveal_component_default = ({ cellsWithOutput: e5, layout: o, setLayout: s, activeIndex: l, onSlideChange: io, mode: oo, configWidth: uo = 300, isEditable: fo = false }) => {
   var _a2, _b2;
   let _o = (0, import_react.useRef)(null), vo = (0, import_react.useRef)(null), { width: bo, height: xo } = useSlideDimensions(_o), So = useAtomValue(kioskModeAtom), Co = (0, import_react.useMemo)(() => So ? [] : [ce], [So]), [wo, To] = (0, import_react.useState)(false), Eo = useNotebookCodeAvailable(e5), Do = !isIslands() && Eo, Oo = Do && wo, ko = l == null ? void 0 : e5[l], Ao = ko ?? e5.at(0), jo = (0, import_react.useMemo)(() => composeSlides({
     cells: e5,
@@ -7294,14 +7294,14 @@ var NotesAside = (e5) => {
     let e6 = vo.current;
     if (!e6) return;
     let t = resolveActiveCellIndex(Po, e6.getIndices());
-    t != null && (ao == null ? void 0 : ao(t));
+    t != null && (io == null ? void 0 : io(t));
   }), Uo = useEvent_default((t) => {
     if (!Mo || l == null || Events.fromInput(t)) return;
     let n = classifyNavKey(t);
     if (n === 0) return;
     t.preventDefault(), t.stopPropagation();
     let i = l + n;
-    i < 0 || i >= e5.length || (ao == null ? void 0 : ao(i));
+    i < 0 || i >= e5.length || (io == null ? void 0 : io(i));
   }), Wo = useEvent_default(() => {
     Ho(), triggerResize(vo.current);
   });
@@ -7400,7 +7400,7 @@ var NotesAside = (e5) => {
       ]
     })
   });
-  return so === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+  return oo === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: "flex-1 min-w-0 flex flex-row gap-3",
     children: Go
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.9-dev6",
+  "version": "0.23.9-dev8",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -35,6 +35,7 @@ interface TableTopBarProps extends Partial<ExportActionProps> {
   togglePanel?: (panelType: PanelType) => void;
   isAnyPanelOpen?: boolean;
   sizeBytes?: number | null;
+  sizeBytesIsLoading?: boolean;
 }
 
 export const TableTopBar: React.FC<TableTopBarProps> = ({
@@ -50,6 +51,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   isAnyPanelOpen,
   downloadAs,
   sizeBytes,
+  sizeBytesIsLoading,
 }) => {
   const [internalValue, setInternalValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(internalValue, 500);
@@ -133,7 +135,11 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
           </Button>
         )}
         {downloadAs && (
-          <ExportMenu downloadAs={downloadAs} sizeBytes={sizeBytes} />
+          <ExportMenu
+            downloadAs={downloadAs}
+            sizeBytes={sizeBytes}
+            sizeBytesIsLoading={sizeBytesIsLoading}
+          />
         )}
       </div>
     </div>

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

@@ -86,6 +86,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   // JSON-serialized size of the currently-rendered data. Forwarded to
   // ExportMenu so hosts can size-gate the Export button via downloadSizeLimitAtom.
   sizeBytes?: number | null;
+  sizeBytesIsLoading?: boolean;
   totalColumns: number;
   pagination?: boolean;
   manualPagination?: boolean; // server-side pagination
@@ -139,6 +140,7 @@ const DataTableInternal = <TData,>({
   totalColumns,
   totalRows,
   sizeBytes,
+  sizeBytesIsLoading,
   manualSorting = false,
   sorting,
   setSorting,
@@ -362,6 +364,7 @@ const DataTableInternal = <TData,>({
               isAnyPanelOpen={isAnyPanelOpen}
               downloadAs={downloadAs}
               sizeBytes={sizeBytes}
+              sizeBytesIsLoading={sizeBytesIsLoading}
             />
             {allUserColumnsHidden && (
               <Banner className="mb-1 mx-2 rounded flex items-center justify-between">

package/src/components/data-table/export-actions.tsx

@@ -91,6 +91,7 @@ export interface ExportActionProps {
   // marimo-lsp inside VS Code) declares a download size cap. Null/undefined
   // means "no info" and the gate stays disabled (fail-open).
   sizeBytes?: number | null;
+  sizeBytesIsLoading?: boolean;
 }
 
 const labelForDownloadFormat = (format: DownloadFormat): string =>
@@ -100,13 +101,19 @@ const labelForCopyFormat = (format: CopyFormat): string =>
 
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   const { locale } = useLocale();
-  const [open, setOpen] = React.useState(false);
+  const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
   const policy = useAtomValue(downloadSizeLimitAtom);
-  const disabled = !!(
+  const overLimit = !!(
     policy &&
     props.sizeBytes != null &&
     props.sizeBytes > policy.limitBytes
   );
+  const disabled = !!(policy && (props.sizeBytesIsLoading || overLimit));
+  const tooltipContent = !disabled
+    ? "Export"
+    : props.sizeBytesIsLoading
+      ? "Checking download size…"
+      : policy?.unavailableMessage;
 
   const button = (
     <Button
@@ -116,7 +123,7 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
       disabled={disabled}
       className={cn(
         "print:hidden text-xs gap-1",
-        open ? "text-primary" : "text-muted-foreground",
+        downloadMenuOpen ? "text-primary" : "text-muted-foreground",
       )}
     >
       <DownloadIcon className="w-3.5 h-3.5" />
@@ -248,10 +255,14 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   };
 
   return (
-    <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
+    <DropdownMenu
+      modal={false}
+      open={downloadMenuOpen}
+      onOpenChange={setDownloadMenuOpen}
+    >
       <Tooltip
-        content={disabled ? policy?.unavailableMessage : "Export"}
-        open={open ? false : undefined}
+        content={tooltipContent}
+        open={downloadMenuOpen ? false : undefined}
       >
         <DropdownMenuTrigger asChild={true} disabled={disabled}>
           <span tabIndex={disabled ? 0 : -1} className="inline-flex">

package/src/plugins/impl/DataTablePlugin.tsx

@@ -9,7 +9,7 @@ import type {
   RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
-import { Provider } from "jotai";
+import { Provider, useAtomValue } from "jotai";
 import { Table2Icon } from "lucide-react";
 import type { JSX } from "react";
 import React, {
@@ -28,6 +28,7 @@ import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
+import { downloadSizeLimitAtom } from "@/components/data-table/download-policy/atoms";
 import { filtersToFilterGroup } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
@@ -195,7 +196,6 @@ interface Data<T> {
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
   totalColumns: number;
-  sizeBytes?: number | null;
   maxColumns: number | "all";
   hasStableRowId: boolean;
   lazy: boolean;
@@ -222,12 +222,14 @@ type DataTableFunctions = {
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
     raw_data?: TableData<T> | null;
-    size_bytes?: number | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
   calculate_top_k_rows?: CalculateTopKRows;
   preview_column?: PreviewColumn;
+  get_size_bytes: (opts: Record<string, never>) => Promise<{
+    size_bytes?: number | null;
+  }>;
 };
 
 type S = (number | string | { rowId: string; columnName?: string })[];
@@ -274,7 +276,6 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       headerTooltip: z.record(z.string(), z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
-      sizeBytes: z.number().nullish(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       maxHeight: z.number().optional(),
@@ -332,7 +333,6 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
           raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
-          size_bytes: z.number().nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -364,6 +364,9 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         stats: columnStats.nullable(),
       }),
     ),
+    get_size_bytes: rpc
+      .input(z.object({}))
+      .output(z.object({ size_bytes: z.number().nullish() })),
   })
   .renderer((props) => {
     return (
@@ -538,7 +541,6 @@ export const LoadingDataTableComponent = memo(
       rows: T[];
       rawRows?: T[];
       totalRows: number | TooManyRows;
-      sizeBytes?: number | null;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
@@ -555,7 +557,6 @@ export const LoadingDataTableComponent = memo(
       let tableData = props.data;
       let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
-      let sizeBytes = props.sizeBytes ?? null;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
 
@@ -599,7 +600,6 @@ export const LoadingDataTableComponent = memo(
         tableData = searchResults.data;
         rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
-        sizeBytes = searchResults.size_bytes ?? null;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
@@ -612,7 +612,6 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
-        sizeBytes,
         cellStyles,
         cellHoverTexts,
       };
@@ -624,7 +623,6 @@ export const LoadingDataTableComponent = memo(
       useDeepCompareMemoize(props.fieldTypes),
       props.data,
       props.totalRows,
-      props.sizeBytes,
       props.lazy,
       props.cellHoverTexts,
       props.cellStyles,
@@ -632,6 +630,34 @@ export const LoadingDataTableComponent = memo(
       paginationState.pageIndex,
     ]);
 
+    const policy = useAtomValue(downloadSizeLimitAtom);
+    const { data: sizeBytesData, isPending: sizeBytesPending } = useAsyncData<
+      number | null
+    >(async () => {
+      if (
+        !policy ||
+        !props.showDownload ||
+        props.lazy ||
+        props.totalRows === 0
+      ) {
+        return null;
+      }
+      const result = await props.get_size_bytes({});
+      return result.size_bytes ?? null;
+    }, [
+      policy,
+      props.showDownload,
+      props.get_size_bytes,
+      props.lazy,
+      props.totalRows,
+      searchQuery,
+      useDeepCompareMemoize(filters),
+      useDeepCompareMemoize(sorting),
+    ]);
+    const sizeBytes = sizeBytesData ?? null;
+    const sizeBytesIsLoading =
+      !!policy && props.showDownload && sizeBytesPending;
+
     const getRow = useCallback(
       async (rowId: number) => {
         const sortArgs =
@@ -739,7 +765,8 @@ export const LoadingDataTableComponent = memo(
         setFilters={setFilters}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
-        sizeBytes={data?.sizeBytes ?? props.sizeBytes ?? null}
+        sizeBytes={sizeBytes}
+        sizeBytesIsLoading={sizeBytesIsLoading}
         paginationState={paginationState}
         setPaginationState={setPaginationState}
         cellStyles={data?.cellStyles ?? props.cellStyles}
@@ -787,6 +814,7 @@ const DataTableComponent = ({
   rawData,
   totalRows,
   sizeBytes,
+  sizeBytesIsLoading,
   maxColumns,
   pagination,
   selection,
@@ -838,6 +866,8 @@ const DataTableComponent = ({
     rawData?: unknown[];
     columnSummaries?: ColumnSummaries;
     getRow: (rowIdx: number) => Promise<GetRowResult>;
+    sizeBytes?: number | null;
+    sizeBytesIsLoading?: boolean;
   }): JSX.Element => {
   const id = useId();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
@@ -1068,6 +1098,7 @@ const DataTableComponent = ({
             sorting={sorting}
             totalRows={totalRows}
             sizeBytes={sizeBytes}
+            sizeBytesIsLoading={sizeBytesIsLoading}
             totalColumns={totalColumns}
             manualSorting={true}
             setSorting={setSorting}

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -107,6 +107,7 @@ describe("LoadingDataTableComponent", () => {
       }),
       get_data_url: vi.fn() as GetDataUrl,
       get_row_ids: vi.fn() as GetRowIds,
+      get_size_bytes: vi.fn().mockResolvedValue({ size_bytes: null }),
     };
 
     const Wrapper = ({ children }: { children: React.ReactNode }) => (

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -64,7 +64,6 @@ type PluginFunctions = {
     column_types_per_step: FieldTypesWithExternalType[];
     python_code?: string | null;
     sql_code?: string | null;
-    size_bytes?: number | null;
   }>;
   get_column_values: (req: { column: string }) => Promise<{
     values: unknown[];
@@ -82,9 +81,11 @@ type PluginFunctions = {
   }) => Promise<{
     data: TableData<T>;
     total_rows: number;
-    size_bytes?: number | null;
   }>;
   download_as: DownloadAsArgs;
+  get_size_bytes: (opts: Record<string, never>) => Promise<{
+    size_bytes?: number | null;
+  }>;
 };
 
 // Value is selection, but it is not currently exposed to the user
@@ -120,7 +121,6 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         column_types_per_step: z.array(columnToFieldTypesSchema),
         python_code: z.string().nullish(),
         sql_code: z.string().nullish(),
-        size_bytes: z.number().nullish(),
       }),
     ),
     get_column_values: rpc.input(z.object({ column: z.string() })).output(
@@ -150,10 +150,12 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
         z.object({
           data: z.union([z.string(), z.array(z.object({}).passthrough())]),
           total_rows: z.number(),
-          size_bytes: z.number().nullish(),
         }),
       ),
     download_as: DownloadAsSchema,
+    get_size_bytes: rpc
+      .input(z.object({}))
+      .output(z.object({ size_bytes: z.number().nullish() })),
   })
   .renderer((props) => (
     <TableProviders>
@@ -192,6 +194,7 @@ export const DataFrameComponent = memo(
     get_column_values,
     search,
     download_as,
+    get_size_bytes,
     host,
   }: DataTableProps): JSX.Element => {
     const { data, error, isPending } = useAsyncData(
@@ -207,7 +210,6 @@ export const DataFrameComponent = memo(
       column_types_per_step,
       python_code,
       sql_code,
-      size_bytes,
     } = data || {};
 
     const totalColumns = field_types?.length;
@@ -327,7 +329,6 @@ export const DataFrameComponent = memo(
           data={url || ""}
           hasStableRowId={false}
           totalRows={total_rows ?? 0}
-          sizeBytes={size_bytes ?? null}
           totalColumns={totalColumns ?? 0}
           maxColumns="all"
           pageSize={pageSize}
@@ -336,6 +337,7 @@ export const DataFrameComponent = memo(
           rowHeaders={row_headers || Arrays.EMPTY}
           showDownload={showDownload}
           download_as={download_as}
+          get_size_bytes={get_size_bytes}
           enableSearch={false}
           showFilters={false}
           search={search}

package/src/stories/dataframe.stories.tsx

@@ -42,6 +42,7 @@ export const DataFrame: StoryObj = {
         host={document.body}
         showDownload={false}
         download_as={async () => ({ url: "", filename: "" })}
+        get_size_bytes={async () => ({ size_bytes: null })}
         lazy={false}
       />
     );