@marimo-team/frontend 0.16.0 → 0.16.2

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

@@ -93,6 +93,25 @@ export const DataTableBody = <TData,>({
     handleCellsKeyDown,
   } = useCellRangeSelection({ table });
 
+  function applyHoverTemplate(
+    template: string,
+    cells: Array<Cell<TData, unknown>>,
+  ): string {
+    const variableRegex = /{{(\w+)}}/g;
+    // Map column id -> stringified value
+    const idToValue = new Map<string, string>();
+    for (const c of cells) {
+      const v = c.getValue();
+      // Prefer empty string for nulls to keep tooltip clean
+      const s = renderUnknownValue({ value: v, nullAsEmptyString: true });
+      idToValue.set(c.column.id, s);
+    }
+    return template.replaceAll(variableRegex, (_substr, varName: string) => {
+      const val = idToValue.get(varName);
+      return val === undefined ? `{{${varName}}}` : val;
+    });
+  }
+
   const renderCells = (cells: Array<Cell<TData, unknown>>) => {
     return cells.map((cell) => {
       const { className, style: pinningstyle } = getPinningStyles(cell.column);
@@ -101,6 +120,7 @@ export const DataTableBody = <TData,>({
         cell.getUserStyling?.() || {},
         pinningstyle,
       );
+
       return (
         <TableCell
           tabIndex={0}
@@ -134,6 +154,8 @@ export const DataTableBody = <TData,>({
     }
   };
 
+  const hoverTemplate = table.getState().cellHoverTemplate || null;
+
   return (
     <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
       {table.getRowModel().rows?.length ? (
@@ -145,10 +167,24 @@ export const DataTableBody = <TData,>({
           const isRowViewedInPanel =
             rowViewerPanelOpen && viewedRowIdx === rowIndex;
 
+          // Compute hover title once per row using all visible cells
+          let rowTitle: string | undefined;
+          if (hoverTemplate) {
+            const visibleCells = row.getVisibleCells?.() ?? [
+              ...row.getLeftVisibleCells(),
+              ...row.getCenterVisibleCells(),
+              ...row.getRightVisibleCells(),
+            ];
+            rowTitle = hoverTemplate
+              ? applyHoverTemplate(hoverTemplate, visibleCells)
+              : undefined;
+          }
+
           return (
             <TableRow
               key={row.id}
               data-state={row.getIsSelected() && "selected"}
+              title={rowTitle}
               // These classes ensure that empty rows (nulls) still render
               className={cn(
                 "border-t h-6",

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -15,6 +15,7 @@ import {
   SearchIcon,
 } from "lucide-react";
 import { useRef, useState } from "react";
+import { useLocale } from "react-aria";
 import { ColumnName } from "@/components/datasources/components";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
@@ -66,6 +67,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
   const [searchQuery, setSearchQuery] = useState("");
   const panelRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const { locale } = useLocale();
 
   const tooManyRows = totalRows === TOO_MANY_ROWS;
 
@@ -204,13 +206,13 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
               applyColumnFormatting: (value) => value,
             } as Column<unknown>;
 
-            const cellContent = renderCellValue(
-              mockColumn,
-              () => columnValue,
-              () => columnValue,
-              undefined,
-              "text-left break-word",
-            );
+            const cellContent = renderCellValue({
+              column: mockColumn,
+              renderValue: () => columnValue,
+              getValue: () => columnValue,
+              selectCell: undefined,
+              cellStyles: "text-left break-word",
+            });
 
             const copyValue =
               typeof columnValue === "object"
@@ -286,7 +288,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
         <span className="text-xs">
           {tooManyRows
             ? `Row ${rowIdx + 1}`
-            : `Row ${rowIdx + 1} of ${prettifyRowCount(totalRows)}`}
+            : `Row ${rowIdx + 1} of ${prettifyRowCount(totalRows, locale)}`}
         </span>
         <Button
           variant="outline"

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

@@ -0,0 +1,16 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import z from "zod";
+import { rpc } from "@/plugins/core/rpc";
+
+export type DownloadAsArgs = (req: {
+  format: "csv" | "json" | "parquet";
+}) => Promise<string>;
+
+export const DownloadAsSchema = rpc
+  .input(
+    z.object({
+      format: z.enum(["csv", "json", "parquet"]),
+    }),
+  )
+  .output(z.string());

package/src/components/datasources/column-preview.tsx

@@ -3,6 +3,7 @@
 import { useAtomValue } from "jotai";
 import { PlusSquareIcon } from "lucide-react";
 import React, { Suspense } from "react";
+import { useLocale } from "react-aria";
 import { maybeAddAltairImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
@@ -42,6 +43,7 @@ export const DatasetColumnPreview: React.FC<{
 }> = ({ table, column, preview, onAddColumnChart, sqlTableContext }) => {
   const { theme } = useTheme();
   const { previewDatasetColumn } = useRequestClient();
+  const { locale } = useLocale();
 
   const previewColumn = () => {
     previewDatasetColumn({
@@ -107,7 +109,8 @@ export const DatasetColumnPreview: React.FC<{
       refetchPreview: previewColumn,
     });
 
-  const stats = preview.stats && renderStats(preview.stats, column.type);
+  const stats =
+    preview.stats && renderStats(preview.stats, column.type, locale);
 
   const chart = preview.chart_spec && renderChart(preview.chart_spec, theme);
 
@@ -175,6 +178,7 @@ export function renderPreviewError({
 export function renderStats(
   stats: Partial<Record<ColumnHeaderStatsKey, unknown>>,
   dataType: DataType,
+  locale: string,
 ) {
   return (
     <div className="gap-x-16 gap-y-1 grid grid-cols-2-fit border rounded p-2 empty:hidden">
@@ -189,7 +193,7 @@ export function renderStats(
               {convertStatsName(key as ColumnHeaderStatsKey, dataType)}
             </span>
             <span className="text-xs font-bold text-muted-foreground tracking-wide">
-              {prettyNumber(value)}
+              {prettyNumber(value, locale)}
             </span>
             <CopyClipboardIcon
               className="h-3 w-3 invisible group-hover:visible"

package/src/components/datasources/datasources.tsx

@@ -304,10 +304,12 @@ const DatabaseItem: React.FC<{
 }> = ({ hasSearch, engineName, database, children }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [isSelected, setIsSelected] = React.useState(false);
+  const [prevHasSearch, setPrevHasSearch] = React.useState(hasSearch);
 
-  React.useEffect(() => {
+  if (prevHasSearch !== hasSearch) {
+    setPrevHasSearch(hasSearch);
     setIsExpanded(hasSearch);
-  }, [hasSearch]);
+  }
 
   return (
     <>
@@ -399,14 +401,10 @@ const SchemaItem: React.FC<{
   children: React.ReactNode;
   hasSearch: boolean;
 }> = ({ databaseName, schema, children, hasSearch }) => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(hasSearch);
   const [isSelected, setIsSelected] = React.useState(false);
   const uniqueValue = `${databaseName}:${schema.name}`;
 
-  React.useEffect(() => {
-    setIsExpanded(hasSearch);
-  }, [hasSearch]);
-
   if (isSchemaless(schema.name)) {
     return children;
   }
@@ -693,11 +691,9 @@ const DatasetColumnItem: React.FC<{
   const closeAllColumns = useAtomValue(closeAllColumnsAtom);
   const setExpandedColumns = useSetAtom(expandedColumnsAtom);
 
-  React.useEffect(() => {
-    if (closeAllColumns) {
-      setIsExpanded(false);
-    }
-  }, [closeAllColumns]);
+  if (closeAllColumns && isExpanded) {
+    setIsExpanded(false);
+  }
 
   if (isExpanded) {
     setExpandedColumns(

package/src/components/editor/Cell.tsx

@@ -80,6 +80,7 @@ import { useDeleteCellCallback } from "./cell/useDeleteCell";
 import { useRunCell } from "./cell/useRunCells";
 import { HideCodeButton } from "./code/readonly-python-code";
 import { cellDomProps } from "./common";
+import { SqlValidationErrorBanner } from "./errors/sql-validation-errors";
 import { useCellNavigationProps } from "./navigation/navigation";
 import {
   useTemporarilyShownCode,
@@ -653,6 +654,7 @@ const EditableCellComponent = ({
                 )}
               </div>
             </div>
+            <SqlValidationErrorBanner cellId={cellId} />
             {cellOutput === "below" && outputArea}
             {cellRuntime.serialization && (
               <div className="py-1 px-2 flex items-center justify-end gap-2 last:rounded-b">

package/src/components/editor/ai/transport/chat-transport.tsx

@@ -13,11 +13,14 @@ import {
 export class StreamingChunkTransport<
   UI_MESSAGE extends UIMessage,
 > extends DefaultChatTransport<UI_MESSAGE> {
+  private onChunkReceived: (chunk: UIMessageChunk) => void;
+
   constructor(
     options: HttpChatTransportInitOptions<UI_MESSAGE> = {},
-    private onChunkReceived: (chunk: UIMessageChunk) => void,
+    onChunkReceived: (chunk: UIMessageChunk) => void,
   ) {
     super(options);
+    this.onChunkReceived = onChunkReceived;
   }
 
   protected override processResponseStream(

package/src/components/editor/cell/CellStatus.tsx

@@ -5,6 +5,7 @@ import {
   RefreshCwIcon,
   WorkflowIcon,
 } from "lucide-react";
+import { useDateFormatter } from "react-aria";
 import { MultiIcon } from "@/components/icons/multi-icon";
 import { Logger } from "@/utils/Logger";
 import type { CellRuntimeState } from "../../../core/cells/types";
@@ -28,26 +29,6 @@ export interface CellStatusComponentProps
   uninstantiated: boolean;
 }
 
-// Looks like HH:MM:SS.SSS AM/PM
-const timeFormatter = new Intl.DateTimeFormat("en-US", {
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3,
-  hour12: true,
-});
-
-// Looks like MM/DD HH:MM:SS.SSS AM/PM
-const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
-  month: "numeric",
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-  second: "numeric",
-  fractionalSecondDigits: 3,
-  hour12: true,
-});
-
 export const CellStatusComponent: React.FC<CellStatusComponentProps> = ({
   editing,
   status,
@@ -329,10 +310,32 @@ export const ElapsedTime = (props: { elapsedTime: string }) => {
 const LastRanTime = (props: { lastRanTime: number }) => {
   const date = new Date(props.lastRanTime * 1000);
   const today = new Date();
+
+  // Looks like HH:MM:SS.SSS AM/PM
+  const timeFormatter = useDateFormatter({
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    hour12: true,
+  });
+
+  // Looks like MM/DD HH:MM:SS.SSS AM/PM
+  const dateTimeFormatter = useDateFormatter({
+    month: "numeric",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    hour12: true,
+  });
+
   const formatter =
     date.toDateString() === today.toDateString()
       ? timeFormatter
       : dateTimeFormatter;
+
   return (
     <span>
       Ran at{" "}

package/src/components/editor/cell/CreateCellButton.tsx

@@ -9,8 +9,7 @@ import {
 } from "@/components/ui/context-menu";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
@@ -103,7 +102,7 @@ const CreateCellButtonContextMenu = (props: {
             evt.stopPropagation();
             maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
             onClick({
-              code: new MarkdownLanguageAdapter().defaultCode,
+              code: LanguageAdapters.markdown.defaultCode,
               hideCode: true,
             });
           }}
@@ -118,7 +117,7 @@ const CreateCellButtonContextMenu = (props: {
           onSelect={(evt) => {
             evt.stopPropagation();
             maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
-            onClick({ code: new SQLLanguageAdapter().defaultCode });
+            onClick({ code: LanguageAdapters.sql.defaultCode });
           }}
         >
           <div className="mr-3 text-muted-foreground">

package/src/components/editor/cell/code/language-toggle.tsx

@@ -7,8 +7,7 @@ import { useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { switchLanguage } from "@/core/codemirror/language/extension";
-import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import type { LanguageAdapter } from "@/core/codemirror/language/types";
 import { Functions } from "@/utils/functions";
 import { MarkdownIcon, PythonIcon } from "./icons";
@@ -27,11 +26,11 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   onAfterToggle,
 }) => {
   const canUseMarkdown = useMemo(
-    () => new MarkdownLanguageAdapter().isSupported(code) || code.trim() === "",
+    () => LanguageAdapters.markdown.isSupported(code) || code.trim() === "",
     [code],
   );
   const canUseSQL = useMemo(
-    () => new SQLLanguageAdapter().isSupported(code) || code.trim() === "",
+    () => LanguageAdapters.sql.isSupported(code) || code.trim() === "",
     [code],
   );
 

package/src/components/editor/chrome/wrapper/footer-items/machine-stats.tsx

@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import { CpuIcon, MemoryStickIcon, MicrochipIcon } from "lucide-react";
 import type React from "react";
 import { useState } from "react";
+import { useNumberFormatter } from "react-aria";
 import { Tooltip } from "@/components/ui/tooltip";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
@@ -56,23 +57,42 @@ const MemoryUsageBar: React.FC<{
 }> = ({ memory, kernel, server }) => {
   const { percent, total, available } = memory;
   const roundedPercent = Math.round(percent);
+
+  const gbFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+  const mbFormatter = useNumberFormatter({
+    maximumFractionDigits: 0,
+  });
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes > 1024 * 1024 * 1024) {
+      return `${gbFormatter.format(bytes / (1024 * 1024 * 1024))} GB`;
+    }
+    return `${mbFormatter.format(bytes / (1024 * 1024))} MB`;
+  };
+
+  const formatGB = (bytes: number): string => {
+    return gbFormatter.format(bytes / (1024 * 1024 * 1024));
+  };
+
   return (
     <Tooltip
       delayDuration={200}
       content={
         <div className="flex flex-col gap-1">
           <span>
-            <b>computer memory:</b> {asGB(total - available)} / {asGB(total)} GB
-            ({roundedPercent}%)
+            <b>computer memory:</b> {formatGB(total - available)} /{" "}
+            {formatGB(total)} GB ({roundedPercent}%)
           </span>
           {server?.memory && (
             <span>
-              <b>marimo server:</b> {asGBorMB(server.memory)}
+              <b>marimo server:</b> {formatBytes(server.memory)}
             </span>
           )}
           {kernel?.memory && (
             <span>
-              <b>kernel:</b> {asGBorMB(kernel.memory)}
+              <b>kernel:</b> {formatBytes(kernel.memory)}
             </span>
           )}
         </div>
@@ -122,6 +142,20 @@ const GPUBar: React.FC<{ gpus: GPU[] }> = ({ gpus }) => {
       gpus.length,
   );
 
+  const gbFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+  const mbFormatter = useNumberFormatter({
+    maximumFractionDigits: 0,
+  });
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes > 1024 * 1024 * 1024) {
+      return `${gbFormatter.format(bytes / (1024 * 1024 * 1024))} GB`;
+    }
+    return `${mbFormatter.format(bytes / (1024 * 1024))} MB`;
+  };
+
   return (
     <Tooltip
       delayDuration={200}
@@ -132,7 +166,7 @@ const GPUBar: React.FC<{ gpus: GPU[] }> = ({ gpus }) => {
               <b>
                 GPU {gpu.index} ({gpu.name}):
               </b>{" "}
-              {asGBorMB(gpu.memory.used)} / {asGBorMB(gpu.memory.total)} GB (
+              {formatBytes(gpu.memory.used)} / {formatBytes(gpu.memory.total)} (
               {Math.round(gpu.memory.percent)}%)
             </span>
           ))}
@@ -160,26 +194,3 @@ const Bar: React.FC<{ percent: number; colorClassName?: string }> = ({
     </div>
   );
 };
-
-function asGBorMB(bytes: number): string {
-  if (bytes > 1024 * 1024 * 1024) {
-    return `${asGB(bytes)} GB`;
-  }
-  return `${asMB(bytes)} MB`;
-}
-
-function asMB(bytes: number) {
-  // 0 decimal places
-  const format = new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: 0,
-  });
-  return format.format(bytes / (1024 * 1024));
-}
-
-function asGB(bytes: number) {
-  // At most 2 decimal places
-  const format = new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: 2,
-  });
-  return format.format(bytes / (1024 * 1024 * 1024));
-}

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -2,6 +2,7 @@
 
 import { MenuIcon } from "lucide-react";
 import React from "react";
+import { useLocale } from "react-aria";
 import { Button } from "@/components/editor/inputs/Inputs";
 import {
   DropdownMenu,
@@ -33,7 +34,7 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
   tooltip = "Actions",
 }) => {
   const actions = useNotebookActions();
-
+  const { locale } = useLocale();
   // Create tooltip content with keyboard shortcut decoration
   const tooltipContent = (
     <div className="flex flex-col gap-2">
@@ -148,7 +149,8 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
           );
         })}
         <DropdownMenuSeparator />
-        <div className="flex-1 px-2 text-xs text-muted-foreground">
+        <div className="flex-1 px-2 text-xs text-muted-foreground flex flex-col gap-1">
+          <span>Locale: {locale}</span>
           <span>Version: {getMarimoVersion()}</span>
         </div>
       </DropdownMenuContent>

package/src/components/editor/errors/sql-validation-errors.tsx

@@ -0,0 +1,34 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { AlertCircleIcon } from "lucide-react";
+import type { CellId } from "@/core/cells/ids";
+import { useSqlValidationErrorsForCell } from "@/core/codemirror/language/languages/sql/validation-errors";
+
+export const SqlValidationErrorBanner = ({ cellId }: { cellId: CellId }) => {
+  const error = useSqlValidationErrorsForCell(cellId);
+
+  if (!error) {
+    return;
+  }
+
+  return (
+    <div className="p-3 text-sm flex flex-col text-muted-foreground gap-1.5 bg-destructive/5">
+      <div className="flex items-start gap-1.5">
+        <AlertCircleIcon size={13} className="mt-[3px] text-destructive" />
+        <p>
+          <span className="font-bold text-destructive">{error.errorType}:</span>{" "}
+          {error.errorMessage}
+        </p>
+      </div>
+
+      {error.codeblock && (
+        <pre
+          lang="sql"
+          className="text-xs bg-muted rounded p-2 pb-0 mx-3 overflow-x-auto font-mono whitespace-pre-wrap"
+        >
+          {error.codeblock}
+        </pre>
+      )}
+    </div>
+  );
+};

package/src/components/editor/file-tree/requesting-tree.tsx

@@ -13,15 +13,21 @@ import { type FilePath, PathBuilder } from "@/utils/paths";
 
 export class RequestingTree {
   private delegate = new SimpleTree<FileInfo>([]);
+  private callbacks: {
+    listFiles: EditRequests["sendListFiles"];
+    createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
+    deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
+  };
 
-  constructor(
-    private callbacks: {
-      listFiles: EditRequests["sendListFiles"];
-      createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
-      deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
-      renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
-    },
-  ) {}
+  constructor(callbacks: {
+    listFiles: EditRequests["sendListFiles"];
+    createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
+    deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
+  }) {
+    this.callbacks = callbacks;
+  }
 
   private rootPath: FilePath = "" as FilePath;
   private onChange: (data: FileInfo[]) => void = Functions.NOOP;

package/src/components/editor/output/ConsoleOutput.tsx

@@ -14,6 +14,7 @@ import type { OutputMessage } from "@/core/kernel/messages";
 import { useSelectAllContent } from "@/hooks/useSelectAllContent";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
+import { ansiToPlainText, parseHtmlContent } from "@/utils/dom";
 import { invariant } from "@/utils/invariant";
 import { Strings } from "@/utils/strings";
 import { NameCellContentEditable } from "../actions/name-cell-input";
@@ -124,7 +125,18 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
                 onClick={() => {
                   const text = reversedOutputs
                     .filter((output) => output.channel !== "pdb")
-                    .map((output) => Strings.asString(output.data))
+                    .map((output) => {
+                      // If starts with `<`, then assume it's HTML
+                      if (
+                        typeof output.data === "string" &&
+                        output.data.startsWith("<")
+                      ) {
+                        return parseHtmlContent(output.data);
+                      }
+
+                      // Otherwise, convert the ANSI to HTML, then parse as HTML
+                      return ansiToPlainText(Strings.asString(output.data));
+                    })
                     .join("\n");
                   void copyToClipboard(text);
                 }}