@marimo-team/frontend 0.23.9-dev3 → 0.23.9-dev32

package/src/core/codemirror/__tests__/setup.test.ts

@@ -134,6 +134,35 @@ describe("snapshot all duplicate keymaps", () => {
   });
 });
 
+test("auto_close_pairs: false removes closeBrackets keymaps", () => {
+  const withAutoClose = EditorState.create({
+    extensions: setup(),
+  });
+  const withoutAutoClose = EditorState.create({
+    extensions: setup({
+      completionConfig: {
+        ...getOpts().completionConfig,
+        auto_close_pairs: false,
+      },
+    }),
+  });
+
+  const keysWith = withAutoClose.facet(keymap).flat();
+  const keysWithout = withoutAutoClose.facet(keymap).flat();
+
+  // closeBracketsKeymap contributes Backspace and Enter handlers
+  expect(keysWith.length).toBeGreaterThan(keysWithout.length);
+
+  const hasBracketPairHandler = (state: EditorState) =>
+    state
+      .facet(keymap)
+      .flat()
+      .some((k) => k.run?.name === "deleteBracketPair");
+
+  expect(hasBracketPairHandler(withAutoClose)).toBe(true);
+  expect(hasBracketPairHandler(withoutAutoClose)).toBe(false);
+});
+
 test("placeholder adds another extension", () => {
   const opts = getOpts();
   const withAI = new PythonLanguageAdapter()

package/src/core/codemirror/cells/traceback-decorations.ts

@@ -147,7 +147,7 @@ export function errorLineHighlighter(
         backgroundColor: "color-mix(in srgb, var(--red-4) 40%, transparent)",
       },
       "&.cm-focused .cm-error-line.cm-activeLine": {
-        backgroundColor: "color-mix(in srgb, var(--red-6) 40%, transparent)",
+        backgroundColor: "color-mix(in srgb, var(--red-5) 40%, transparent)",
       },
     }),
   ];

package/src/core/codemirror/cm.ts

@@ -182,6 +182,7 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
     diagnosticsConfig,
   } = opts;
   const placeholderType = getPlaceholderType(opts);
+  const autoClosePairs = completionConfig.auto_close_pairs !== false;
 
   return [
     ///// View
@@ -208,10 +209,10 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
     copilotBundle(completionConfig),
     foldGutter(),
     stringsAutoCloseBraces(),
-    closeBrackets(),
+    autoClosePairs ? closeBrackets() : [],
     completionKeymap(acceptCompletionOnEnter),
     // to avoid clash with charDeleteBackward keymap
-    Prec.high(keymap.of(closeBracketsKeymap)),
+    autoClosePairs ? Prec.high(keymap.of(closeBracketsKeymap)) : [],
     bracketMatching(),
     indentOnInput(),
     indentUnit.of("    "),

package/src/core/codemirror/format.ts

@@ -205,6 +205,7 @@ async function getSqlFormatterDialect(
     case "mongodb":
     case "timescaledb":
     case "datafusion":
+    case "dremio":
       return sql;
     case "databricks":
       return spark;

package/src/core/codemirror/keymaps/vim.ts

@@ -112,6 +112,35 @@ export function vimKeymapExtension(): Extension[] {
   ];
 }
 
+function scrollCursorTo(cm: CodeMirror, position: "center" | "start" | "end") {
+  const view = cm.cm6;
+  if (!view) {
+    return;
+  }
+  const coords = view.coordsAtPos(view.state.selection.main.head);
+  if (!coords) {
+    return;
+  }
+  const appEl = document.getElementById("App");
+  if (!appEl) {
+    return;
+  }
+  const viewportHeight = appEl.clientHeight;
+  let delta: number;
+  switch (position) {
+    case "center":
+      delta = (coords.top + coords.bottom) / 2 - viewportHeight / 2;
+      break;
+    case "start":
+      delta = coords.top;
+      break;
+    case "end":
+      delta = coords.bottom - viewportHeight;
+      break;
+  }
+  appEl.scrollBy({ top: delta, behavior: "smooth" });
+}
+
 const addCustomVimCommandsOnce = once(() => {
   // Go to definition
   Vim.defineAction("goToDefinition", (cm: CodeMirror) => {
@@ -120,6 +149,40 @@ const addCustomVimCommandsOnce = once(() => {
   });
   Vim.mapCommand("gd", "action", "goToDefinition", {}, { context: "normal" });
 
+  // Scroll cursor to center/top/bottom of viewport (mirrors zz/zt/zb in classic vim)
+  Vim.defineAction("scrollCursorToCenter", (cm: CodeMirror) =>
+    scrollCursorTo(cm, "center"),
+  );
+  Vim.mapCommand(
+    "zz",
+    "action",
+    "scrollCursorToCenter",
+    {},
+    { context: "normal" },
+  );
+
+  Vim.defineAction("scrollCursorToTop", (cm: CodeMirror) =>
+    scrollCursorTo(cm, "start"),
+  );
+  Vim.mapCommand(
+    "zt",
+    "action",
+    "scrollCursorToTop",
+    {},
+    { context: "normal" },
+  );
+
+  Vim.defineAction("scrollCursorToBottom", (cm: CodeMirror) =>
+    scrollCursorTo(cm, "end"),
+  );
+  Vim.mapCommand(
+    "zb",
+    "action",
+    "scrollCursorToBottom",
+    {},
+    { context: "normal" },
+  );
+
   // Save command
   Vim.defineEx("write", "w", (cm: CodeMirror) => {
     const view = cm.cm6;

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -410,6 +410,7 @@ function connectionNameToParserDialect(
     case "spark":
     case "databricks":
     case "datafusion":
+    case "dremio":
       Logger.debug("Unsupported dialect", { dialect });
       return null;
     default:

package/src/core/codemirror/language/languages/sql/utils.ts

@@ -52,6 +52,7 @@ const KNOWN_DIALECTS_ARRAY = [
   "databricks",
   "datafusion",
   "microsoft sql server",
+  "dremio",
 ] as const;
 const KNOWN_DIALECTS: ReadonlySet<string> = new Set(KNOWN_DIALECTS_ARRAY);
 type KnownDialect = (typeof KNOWN_DIALECTS_ARRAY)[number];
@@ -115,6 +116,7 @@ export function guessDialect(
     case "spark":
     case "databricks":
     case "datafusion":
+    case "dremio":
       Logger.debug("Unsupported dialect", { dialect });
       return ModifiedStandardSQL;
     default:

package/src/core/config/__tests__/config-schema.test.ts

@@ -56,6 +56,7 @@ test("default UserConfig - empty", () => {
       },
       "completion": {
         "activate_on_typing": true,
+        "auto_close_pairs": true,
         "copilot": false,
         "signature_hint_on_typing": false,
       },
@@ -127,6 +128,7 @@ test("default UserConfig - one level", () => {
       },
       "completion": {
         "activate_on_typing": true,
+        "auto_close_pairs": true,
         "copilot": false,
         "signature_hint_on_typing": false,
       },

package/src/core/config/config-schema.ts

@@ -75,6 +75,7 @@ export const UserConfigSchema = z
       .object({
         activate_on_typing: z.boolean().prefault(true),
         signature_hint_on_typing: z.boolean().prefault(false),
+        auto_close_pairs: z.boolean().prefault(true),
         copilot: z
           .union([z.boolean(), z.enum(["github", "codeium", "custom"])])
           .prefault(false)
@@ -158,6 +159,7 @@ export const UserConfigSchema = z
     ai: z
       .looseObject({
         rules: z.string().prefault(""),
+        max_tokens: z.number().int().positive().nullable().optional(),
         mode: z.enum(COPILOT_MODES).prefault("manual"),
         inline_tooltip: z.boolean().prefault(false),
         open_ai: AiConfigSchema.optional(),

package/src/css/app/Cell.css

@@ -214,7 +214,6 @@
   &.error-outline,
   &.error-outline:focus-within {
     box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--error), transparent 80%);
-    background-color: var(--red-2);
   }
 
   /* Needs Run */

package/src/plugins/impl/DataTablePlugin.tsx

@@ -8,8 +8,9 @@ import type {
   PaginationState,
   RowSelectionState,
   SortingState,
+  Table as TanstackTable,
 } 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 +29,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";
@@ -190,11 +192,11 @@ interface Data<T> {
   fieldTypes?: FieldTypesWithExternalType | null;
   freezeColumnsLeft?: string[];
   freezeColumnsRight?: string[];
+  hiddenColumns?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
   totalColumns: number;
-  sizeBytes?: number | null;
   maxColumns: number | "all";
   hasStableRowId: boolean;
   lazy: boolean;
@@ -221,12 +223,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 })[];
@@ -265,6 +269,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       rowHeaders: columnToFieldTypesSchema,
       freezeColumnsLeft: z.array(z.string()).optional(),
       freezeColumnsRight: z.array(z.string()).optional(),
+      hiddenColumns: z.array(z.string()).optional(),
       textJustifyColumns: z
         .record(z.string(), z.enum(["left", "center", "right"]))
         .optional(),
@@ -272,7 +277,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(),
@@ -330,7 +334,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(
@@ -362,6 +365,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 (
@@ -536,7 +542,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 () => {
@@ -553,7 +558,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;
 
@@ -597,7 +601,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 || {};
       }
@@ -610,7 +613,6 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
-        sizeBytes,
         cellStyles,
         cellHoverTexts,
       };
@@ -622,7 +624,6 @@ export const LoadingDataTableComponent = memo(
       useDeepCompareMemoize(props.fieldTypes),
       props.data,
       props.totalRows,
-      props.sizeBytes,
       props.lazy,
       props.cellHoverTexts,
       props.cellStyles,
@@ -630,6 +631,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 =
@@ -737,7 +766,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}
@@ -785,6 +815,7 @@ const DataTableComponent = ({
   rawData,
   totalRows,
   sizeBytes,
+  sizeBytesIsLoading,
   maxColumns,
   pagination,
   selection,
@@ -814,6 +845,7 @@ const DataTableComponent = ({
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
+  hiddenColumns,
   textJustifyColumns,
   wrappedColumns,
   headerTooltip,
@@ -835,6 +867,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);
@@ -1007,6 +1041,52 @@ const DataTableComponent = ({
   const isInVscode = isInVscodeExtension();
   const isIslandsMode = isIslands();
 
+  const renderTableExplorerPanel = useMemo(() => {
+    if (!isAnyPanelOpen || !(showRowExplorer || canShowColumnExplorer)) {
+      return undefined;
+    }
+    return (table: TanstackTable<unknown>) => (
+      <ContextAwarePanelItem>
+        <TableExplorerPanel
+          rowIdx={viewedRowIdx}
+          setRowIdx={setViewedRow}
+          totalRows={totalRows}
+          fieldTypes={memoizedUnclampedFieldTypes}
+          getRow={getRow}
+          isSelectable={isSelectable}
+          isRowSelected={Boolean(rowSelection[viewedRowIdx])}
+          handleRowSelectionChange={handleRowSelectionChange}
+          previewColumn={preview_column}
+          totalColumns={totalColumns}
+          tableId={id}
+          table={table}
+          showRowExplorer={showRowExplorer && !isInVscode}
+          showColumnExplorer={canShowColumnExplorer && !isInVscode}
+          activeTab={panelType}
+          onTabChange={setPanelType}
+        />
+      </ContextAwarePanelItem>
+    );
+  }, [
+    isAnyPanelOpen,
+    showRowExplorer,
+    canShowColumnExplorer,
+    viewedRowIdx,
+    setViewedRow,
+    totalRows,
+    memoizedUnclampedFieldTypes,
+    getRow,
+    isSelectable,
+    rowSelection,
+    handleRowSelectionChange,
+    preview_column,
+    totalColumns,
+    id,
+    isInVscode,
+    panelType,
+    setPanelType,
+  ]);
+
   return (
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
@@ -1032,28 +1112,6 @@ const DataTableComponent = ({
         </Banner>
       )}
 
-      {isAnyPanelOpen && (showRowExplorer || canShowColumnExplorer) && (
-        <ContextAwarePanelItem>
-          <TableExplorerPanel
-            rowIdx={viewedRowIdx}
-            setRowIdx={setViewedRow}
-            totalRows={totalRows}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            getRow={getRow}
-            isSelectable={isSelectable}
-            isRowSelected={Boolean(rowSelection[viewedRowIdx])}
-            handleRowSelectionChange={handleRowSelectionChange}
-            previewColumn={preview_column}
-            totalColumns={totalColumns}
-            tableId={id}
-            showRowExplorer={showRowExplorer && !isInVscode}
-            showColumnExplorer={canShowColumnExplorer && !isInVscode}
-            activeTab={panelType}
-            onTabChange={setPanelType}
-          />
-        </ContextAwarePanelItem>
-      )}
-
       <ColumnChartContext value={chartSpecModel}>
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
@@ -1065,6 +1123,7 @@ const DataTableComponent = ({
             sorting={sorting}
             totalRows={totalRows}
             sizeBytes={sizeBytes}
+            sizeBytesIsLoading={sizeBytesIsLoading}
             totalColumns={totalColumns}
             manualSorting={true}
             setSorting={setSorting}
@@ -1090,6 +1149,7 @@ const DataTableComponent = ({
             onRowSelectionChange={handleRowSelectionChange}
             freezeColumnsLeft={freezeColumnsLeft}
             freezeColumnsRight={freezeColumnsRight}
+            hiddenColumns={hiddenColumns}
             onCellSelectionChange={handleCellSelectionChange}
             getRowIds={get_row_ids}
             toggleDisplayHeader={toggleDisplayHeader}
@@ -1108,6 +1168,7 @@ const DataTableComponent = ({
             isAnyPanelOpen={isAnyPanelOpen}
             viewedRowIdx={viewedRowIdx}
             onViewedRowChange={(rowIdx) => setViewedRowIdx(rowIdx)}
+            renderTableExplorerPanel={renderTableExplorerPanel}
           />
         </Labeled>
       </ColumnChartContext>

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/chat/ChatPlugin.tsx

@@ -6,7 +6,7 @@ import { z } from "zod";
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import { Arrays } from "@/utils/arrays";
-import type { SendMessageRequest } from "./types";
+import type { CancelPromptRequest, SendMessageRequest } from "./types";
 
 const LazyChatbot = React.lazy(() =>
   import("./chat-ui").then((m) => ({ default: m.Chatbot })),
@@ -18,6 +18,7 @@ export type PluginFunctions = {
   delete_chat_history: (req: {}) => Promise<null>;
   delete_chat_message: (req: { index: number }) => Promise<null>;
   send_prompt: (req: SendMessageRequest) => Promise<unknown>;
+  cancel_prompt: (req: CancelPromptRequest) => Promise<null>;
 };
 
 const messageSchema = z.array(
@@ -65,11 +66,15 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
     send_prompt: rpc
       .input(
         z.object({
+          request_id: z.string(),
           messages: messageSchema,
           config: configSchema,
         }),
       )
       .output(z.unknown()),
+    cancel_prompt: rpc
+      .input(z.object({ request_id: z.string() }))
+      .output(z.null()),
   })
   .renderer((props) => (
     <Suspense>
@@ -84,6 +89,7 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
         delete_chat_history={props.functions.delete_chat_history}
         delete_chat_message={props.functions.delete_chat_message}
         send_prompt={props.functions.send_prompt}
+        cancel_prompt={props.functions.cancel_prompt}
         value={props.value?.messages || Arrays.EMPTY}
         setValue={(messages) => props.setValue({ messages })}
         host={props.host}