@marimo-team/frontend 0.17.7 → 0.17.8

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

@@ -3,6 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAtom } from "jotai";
 import {
+  AlertTriangle,
   ChartColumnIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -16,6 +17,7 @@ import React, { useMemo, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import useResizeObserver from "use-resize-observer";
 import { PythonIcon } from "@/components/editor/cell/code/icons";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -26,7 +28,11 @@ import type { GetDataUrl } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { useTheme } from "@/theme/useTheme";
 import { inferFieldTypes } from "../columns";
-import type { FieldTypesWithExternalType } from "../types";
+import {
+  type FieldTypesWithExternalType,
+  TOO_MANY_ROWS,
+  type TooManyRows,
+} from "../types";
 import { generateAltairChartSnippet } from "./chart-spec/altair-generator";
 import { createSpecWithoutData } from "./chart-spec/spec";
 import { ChartTypeSelect } from "./components/chart-items";
@@ -45,11 +51,15 @@ import { ChartType } from "./types";
 const NEW_CHART_TYPE = "bar" as ChartType;
 const DEFAULT_TAB_NAME = "table" as TabName;
 const CHART_HEIGHT = 290;
+const CHART_MAX_ROWS = 50_000;
+const CHART_MAX_COLUMNS = 50;
 
 export interface TablePanelProps {
   cellId: CellId | null;
   data: unknown[];
   dataTable: JSX.Element;
+  totalRows: number | TooManyRows;
+  columns: number;
   displayHeader: boolean;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
@@ -59,6 +69,8 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   cellId,
   data,
   dataTable,
+  totalRows,
+  columns,
   getDataUrl,
   fieldTypes,
   displayHeader,
@@ -159,6 +171,11 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     setSelectedTab(newTabs[tabIndex].tabName);
   };
 
+  const isLargeDataset =
+    totalRows === TOO_MANY_ROWS ||
+    totalRows > CHART_MAX_ROWS ||
+    columns > CHART_MAX_COLUMNS;
+
   return (
     <Tabs value={selectedTab} className="-mt-1">
       <TabsList>
@@ -220,6 +237,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
               saveChartType={saveChartType}
               getDataUrl={getDataUrl}
               fieldTypes={fieldTypes ?? inferFieldTypes(dataTable.props.data)}
+              isLargeDataset={isLargeDataset}
             />
           </TabsContent>
         );
@@ -238,6 +256,7 @@ export const ChartPanel: React.FC<{
   saveChartType: (chartType: ChartType) => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
+  isLargeDataset: boolean;
 }> = ({
   tableData,
   chartConfig,
@@ -246,6 +265,7 @@ export const ChartPanel: React.FC<{
   saveChartType,
   getDataUrl,
   fieldTypes,
+  isLargeDataset,
 }) => {
   const { theme } = useTheme();
   const form = useForm<ChartSchemaType>({
@@ -257,10 +277,12 @@ export const ChartPanel: React.FC<{
     useState<ChartType>(chartType);
   const [formCollapsed, setFormCollapsed] = useState(false);
 
+  const [renderLargeCharts, setRenderLargeCharts] = useState(!isLargeDataset);
+
   const { ref: chartContainerRef } = useResizeObserver();
 
   const { data, isPending, error } = useAsyncData(async () => {
-    if (!getDataUrl || tableData.length === 0) {
+    if (!getDataUrl || tableData.length === 0 || !renderLargeCharts) {
       return [];
     }
 
@@ -282,7 +304,7 @@ export const ChartPanel: React.FC<{
     );
     return chartData;
     // Re-run when the data table changes
-  }, [tableData]);
+  }, [tableData, renderLargeCharts]);
 
   const formValues = form.watch();
 
@@ -307,10 +329,33 @@ export const ChartPanel: React.FC<{
     if (error) {
       return <ChartErrorState error={error} />;
     }
+    if (!renderLargeCharts) {
+      return (
+        <Alert
+          variant="warning"
+          className="flex flex-row gap-2 items-center w-2/3 mx-auto"
+        >
+          <AlertTriangle className="h-4 w-4 mt-1" />
+          <AlertDescription className="flex flex-row justify-between items-center w-full">
+            <span>
+              Rendering large datasets is not well supported and may crash the
+              browser
+            </span>
+            <Button
+              variant="warn"
+              onClick={() => setRenderLargeCharts(true)}
+              className="h-8"
+            >
+              Proceed
+            </Button>
+          </AlertDescription>
+        </Alert>
+      );
+    }
     return (
       <LazyChart baseSpec={specWithoutData} data={data} height={CHART_HEIGHT} />
     );
-  }, [isPending, error, specWithoutData, data]);
+  }, [isPending, error, renderLargeCharts, specWithoutData, data]);
 
   const developmentMode = import.meta.env.DEV;
 

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

@@ -4,6 +4,7 @@
 import { PopoverClose } from "@radix-ui/react-popover";
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate } from "date-fns";
+import { useNumberFormatter } from "react-aria";
 import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
@@ -538,6 +539,15 @@ export function renderCellValue<TData, TValue>({
     );
   }
 
+  // Format to the correct locale
+  if (typeof value === "number") {
+    return (
+      <div onClick={selectCell} className={cellStyles}>
+        <LocaleNumber value={value} />
+      </div>
+    );
+  }
+
   if (isPrimitiveOrNullish(value)) {
     const rendered = renderValue();
     return (
@@ -578,3 +588,8 @@ export function renderCellValue<TData, TValue>({
     </div>
   );
 }
+
+const LocaleNumber = ({ value }: { value: number }) => {
+  const format = useNumberFormatter();
+  return format.format(value);
+};

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

@@ -8,6 +8,7 @@ import {
   TableIcon,
 } from "lucide-react";
 import React from "react";
+import { useLocale } from "react-aria";
 import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
@@ -71,6 +72,8 @@ const clipboardOptions = [
 ] as const;
 
 export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
+  const { locale } = useLocale();
+
   const button = (
     <Button data-testid="download-as-button" size="xs" variant="link">
       Download <ChevronDownIcon className="w-3 h-3 ml-1" />
@@ -96,7 +99,7 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
       case "tsv": {
         const downloadUrl = await getDownloadUrl("json");
         const json = await fetchJson(downloadUrl);
-        text = jsonToTSV(json);
+        text = jsonToTSV(json, locale);
         break;
       }
       case "json": {

package/src/components/editor/Output.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from "react";
 import { type CellId, CellOutputId } from "@/core/cells/ids";
-import type { OutputMessage } from "@/core/kernel/messages";
+import type { CellOutput, OutputMessage } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
 import { logNever } from "../../utils/assertNever";
 import { ErrorBoundary } from "./boundary/ErrorBoundary";
@@ -44,7 +44,16 @@ import { CsvViewer } from "./file-tree/renderers";
 import { MarimoTracebackOutput } from "./output/MarimoTracebackOutput";
 import { renderMimeIcon } from "./renderMimeIcon";
 
-type MimeBundle = Record<OutputMessage["mimetype"], { [key: string]: unknown }>;
+const METADATA_KEY = "__metadata__";
+
+type MimeBundleWithoutMetadata = Record<
+  OutputMessage["mimetype"],
+  { [key: string]: unknown }
+>;
+
+type MimeBundle = MimeBundleWithoutMetadata & {
+  [METADATA_KEY]?: Record<string, { width?: number; height?: number }>;
+};
 type MimeBundleOrTuple = MimeBundle | [MimeBundle, { [key: string]: unknown }];
 
 export type OnRefactorWithAI = (opts: {
@@ -60,8 +69,9 @@ export const OutputRenderer: React.FC<{
   cellId?: CellId;
   onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
+  metadata?: { width?: number; height?: number };
 }> = memo((props) => {
-  const { message, onRefactorWithAI, cellId, wrapText } = props;
+  const { message, onRefactorWithAI, cellId, wrapText, metadata } = props;
   const { theme } = useTheme();
 
   // Memoize parsing the json data
@@ -123,7 +133,15 @@ export const OutputRenderer: React.FC<{
         typeof data === "string",
         `Expected string data for mime=${mimetype}. Got ${typeof data}`,
       );
-      return <ImageOutput className={channel} src={data} alt="" />;
+      return (
+        <ImageOutput
+          className={channel}
+          src={data}
+          alt=""
+          width={metadata?.width}
+          height={metadata?.height}
+        />
+      );
     case "image/svg+xml":
       invariant(
         typeof data === "string",
@@ -230,14 +248,25 @@ const MimeBundleOutputRenderer: React.FC<{
 }> = memo(({ data, channel, cellId }) => {
   const mimebundle = Array.isArray(data) ? data[0] : data;
 
+  // Extract metadata if present (e.g., for retina image rendering)
+  const metadata = mimebundle[METADATA_KEY];
+
+  // Filter out metadata from the mime entries and type narrow
+  const mimeEntries = Objects.entries(mimebundle as Record<string, unknown>)
+    .filter(([key]) => key !== METADATA_KEY)
+    .map(
+      ([mime, data]) =>
+        [mime, data] as [OutputMessage["mimetype"], CellOutput["data"]],
+    );
+
   // If there is none, return null
-  const first = Objects.keys(mimebundle)[0];
+  const first = mimeEntries[0]?.[0];
   if (!first) {
     return null;
   }
 
   // If there is only one mime type, render it directly
-  if (Object.keys(mimebundle).length === 1) {
+  if (mimeEntries.length === 1) {
     return (
       <OutputRenderer
         cellId={cellId}
@@ -246,11 +275,11 @@ const MimeBundleOutputRenderer: React.FC<{
           data: mimebundle[first],
           mimetype: first,
         }}
+        metadata={metadata?.[first]}
       />
     );
   }
 
-  const mimeEntries = Objects.entries(mimebundle);
   // Sort HTML first
   mimeEntries.sort(([mimeA], [_mimeB]) => {
     if (mimeA === "text/html") {
@@ -286,6 +315,7 @@ const MimeBundleOutputRenderer: React.FC<{
                     data: output,
                     mimetype: mime,
                   }}
+                  metadata={metadata?.[mime]}
                 />
               </ErrorBoundary>
             </TabsContent>

package/src/components/editor/chrome/panels/write-secret-modal.tsx

@@ -121,7 +121,7 @@ export const WriteSecretModal: React.FC<{
             <Label htmlFor="value">Value</Label>
             <Input
               id="value"
-              type="text"
+              type="password"
               value={value}
               onChange={(e) => setValue(e.target.value)}
               required={true}

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -1,10 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import React, {
-  type PropsWithChildren,
-  Suspense,
-  useEffect,
-  useId,
-} from "react";
+import React, { type PropsWithChildren, Suspense, useEffect } from "react";
 import {
   type ImperativePanelHandle,
   Panel,
@@ -26,7 +21,6 @@ import { useChromeActions, useChromeState } from "../state";
 import { Minimap } from "./minimap";
 import { PanelsWrapper } from "./panels";
 import { PendingAICells } from "./pending-ai-cells";
-import { createStorage } from "./storage";
 import { handleDragging } from "./utils";
 
 const LazyTerminal = React.lazy(() => import("@/components/terminal/terminal"));
@@ -65,9 +59,6 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const sidebarRef = React.useRef<ImperativePanelHandle>(null);
   const terminalRef = React.useRef<ImperativePanelHandle>(null);
 
-  const helperPanelId = useId();
-  const terminalPanelId = useId();
-
   // sync sidebar
   useEffect(() => {
     if (!sidebarRef.current) {
@@ -188,7 +179,9 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const helperPanel = (
     <Panel
       ref={sidebarRef}
-      id={`helper-${helperPanelId}`}
+      // This cannot by dynamic and must be constant
+      // so that the size is preserved between page loads
+      id="app-chrome-sidebar"
       data-testid="helper"
       key={"helper"}
       collapsedSize={0}
@@ -219,7 +212,9 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const terminalPanel = (
     <Panel
       ref={terminalRef}
-      id={`terminal-${terminalPanelId}`}
+      // This cannot by dynamic and must be constant
+      // so that the size is preserved between page loads
+      id="app-chrome-terminal"
       data-testid="terminal"
       key={"terminal"}
       collapsedSize={0}
@@ -255,16 +250,12 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <PanelsWrapper>
-      <PanelGroup
-        autoSaveId="marimo:chrome:v1:l2"
-        direction={"horizontal"}
-        storage={createStorage("left")}
-      >
+      <PanelGroup autoSaveId="marimo:chrome:v1:l2" direction={"horizontal"}>
         <TooltipProvider>
           <Sidebar />
         </TooltipProvider>
         {helperPanel}
-        <Panel>
+        <Panel id="app-chrome-body">
           <PanelGroup autoSaveId="marimo:chrome:v1:l1" direction="vertical">
             {appBodyPanel}
             <IfCapability capability="terminal">{terminalPanel}</IfCapability>

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

@@ -3,18 +3,22 @@
 import { EditorView, keymap } from "@codemirror/view";
 import { useAtomValue } from "jotai";
 import {
+  AlertTriangleIcon,
   CopyIcon,
   DownloadIcon,
   ExternalLinkIcon,
+  RefreshCwIcon,
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
 import { Suspense, useEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Tooltip } from "@/components/ui/tooltip";
 import { hotkeysAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import type { FileInfo } from "@/core/network/types";
+import { filenameAtom } from "@/core/saving/file-state";
 import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
@@ -45,15 +49,17 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   const { theme } = useTheme();
   const { sendFileDetails, sendUpdateFile } = useRequestClient();
   const hotkeys = useAtomValue(hotkeysAtom);
+  const currentNotebookFilename = useAtomValue(filenameAtom);
   // undefined value means not modified yet
   const [internalValue, setInternalValue] = useState<string>("");
 
-  const { data, isPending, error, setData } = useAsyncData(async () => {
-    const details = await sendFileDetails({ path: file.path });
-    const contents = details.contents || "";
-    setInternalValue(unsavedContentsForFile.get(file.path) || contents);
-    return details;
-  }, [file.path]);
+  const { data, isPending, error, setData, refetch } =
+    useAsyncData(async () => {
+      const details = await sendFileDetails({ path: file.path });
+      const contents = details.contents || "";
+      setInternalValue(unsavedContentsForFile.get(file.path) || contents);
+      return details;
+    }, [file.path]);
 
   const handleSaveFile = async () => {
     if (internalValue === data?.contents) {
@@ -99,6 +105,13 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
 
   const mimeType = data.mimeType || "text/plain";
   const isEditable = mimeType in mimeToLanguage;
+  const isActiveNotebook =
+    currentNotebookFilename &&
+    data.file.isMarimoFile &&
+    (file.path === currentNotebookFilename ||
+      // This may capture other notebook files in subdirectories
+      // but this is an okay heuristic for now.
+      file.path.endsWith(`/${currentNotebookFilename}`));
 
   if (!data.contents && !isEditable) {
     // Show details instead of contents
@@ -127,6 +140,11 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
 
   const header = (
     <div className="text-xs text-muted-foreground p-1 flex justify-end gap-2 border-b">
+      <Tooltip content="Refresh">
+        <Button size="small" onClick={refetch}>
+          <RefreshCwIcon />
+        </Button>
+      </Tooltip>
       {file.isMarimoFile && !isWasm() && (
         <Tooltip content="Open notebook">
           <Button size="small" onClick={(evt) => onOpenNotebook(evt)}>
@@ -221,9 +239,20 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     );
   }
 
+  const warningBanner = isActiveNotebook && (
+    <Alert variant="warning" className="rounded-none">
+      <AlertTriangleIcon className="h-4 w-4" />
+      <AlertDescription>
+        Editing the notebook file directly while running in marimo's editor may
+        cause unintended changes. Please use with caution.
+      </AlertDescription>
+    </Alert>
+  );
+
   return (
     <>
       {header}
+      {warningBanner}
       <div className="flex-1 overflow-auto">
         <Suspense>
           <LazyAnyLanguageCodeMirror

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

@@ -9,6 +9,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
+import { Kbd } from "@/components/ui/kbd";
 import { ExternalLink } from "@/components/ui/links";
 import type { CellId } from "@/core/cells/ids";
 import type { MarimoError } from "../../../core/kernel/messages";
@@ -260,6 +261,7 @@ export const MarimoErrorOutput = ({
     }
 
     if (multipleDefsErrors.length > 0) {
+      const firstName = multipleDefsErrors[0].name;
       messages.push(
         <div key="multiple-defs">
           <p className="text-muted-foreground font-medium">
@@ -294,7 +296,8 @@ export const MarimoErrorOutput = ({
             <p className="py-2">
               Try merging this cell with the mentioned cells or wrapping it in a
               function. Alternatively, rename variables to make them private to
-              this cell by prefixing them with an underscore.
+              this cell by prefixing them with an underscore (e.g.{" "}
+              <Kbd className="inline">_{firstName}</Kbd>).
             </p>
 
             <p className="py-2">
@@ -383,23 +386,45 @@ export const MarimoErrorOutput = ({
     if (exceptionErrors.length > 0) {
       messages.push(
         <ul key="exception">
-          {exceptionErrors.map((error, idx) => (
-            <li className="my-2" key={`exception-${idx}`}>
-              {error.raising_cell == null ? (
-                <div>
-                  <p className="text-muted-foreground">{error.msg}</p>
-                  <div className="text-muted-foreground mt-2">
-                    See the console area for a traceback.
+          {exceptionErrors.map((error, idx) => {
+            if (
+              error.exception_type === "NameError" &&
+              error.msg.startsWith("name 'mo'")
+            ) {
+              return (
+                <li className="my-2" key={`exception-${idx}`}>
+                  <div>
+                    <p className="text-muted-foreground">
+                      name 'mo' is not defined.
+                    </p>
+                    <p className="text-muted-foreground mt-2">
+                      The marimo module (imported as{" "}
+                      <Kbd className="inline">mo</Kbd>) is required for
+                      Markdown, SQL, and UI elements.
+                    </p>
                   </div>
-                </div>
-              ) : (
-                <div>
-                  {error.msg}
-                  <CellLinkError cellId={error.raising_cell as CellId} />
-                </div>
-              )}
-            </li>
-          ))}
+                </li>
+              );
+            }
+
+            return (
+              <li className="my-2" key={`exception-${idx}`}>
+                {error.raising_cell == null ? (
+                  <div>
+                    <p className="text-muted-foreground">{error.msg}</p>
+                    <div className="text-muted-foreground mt-2">
+                      See the console area for a traceback.
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    {error.msg}
+                    <CellLinkError cellId={error.raising_cell as CellId} />
+                  </div>
+                )}
+              </li>
+            );
+          })}
           {exceptionErrors.some((e) => e.raising_cell != null) && (
             <Tip>
               Fix the error in the mentioned cells, or handle the exceptions