@marimo-team/frontend 0.15.5 → 0.16.0-dev96986

package/src/core/static/__tests__/download-html.test.ts

@@ -1,5 +1,8 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
+import { EDGE_CASE_FILENAMES } from "../../../__tests__/mocks";
+import { Filenames } from "../../../utils/filenames";
+import { Paths } from "../../../utils/paths";
 import { visibleForTesting } from "../download-html";
 
 const { updateAssetUrl } = visibleForTesting;
@@ -39,3 +42,42 @@ describe("updateAssetUrl", () => {
     expect(updateAssetUrl(existingUrl, assetBaseUrl)).toBe(existingUrl);
   });
 });
+
+describe("filename handling for downloads", () => {
+  it.each(EDGE_CASE_FILENAMES)(
+    "should handle edge case filenames in download operations: %s",
+    (filename) => {
+      // Test that basename extraction works correctly for downloads
+      const basename = Paths.basename(filename);
+      expect(basename).toBe(filename);
+
+      // Test filename conversion for HTML downloads
+      const htmlFilename = Filenames.toHTML(filename);
+      expect(htmlFilename).toMatch(/\.html$/);
+      expect(htmlFilename).toContain(Filenames.withoutExtension(filename));
+
+      // Ensure unicode and spaces are preserved in basename
+      const withoutExt = Filenames.withoutExtension(filename);
+      expect(withoutExt).not.toBe("");
+      expect(typeof withoutExt).toBe("string");
+    },
+  );
+
+  it("should handle blob download filename generation", () => {
+    // Mock URL.createObjectURL for blob testing
+    const mockCreateObjectURL = vi.fn().mockReturnValue("blob:mock-url");
+    global.URL.createObjectURL = mockCreateObjectURL;
+
+    EDGE_CASE_FILENAMES.forEach((filename) => {
+      const htmlFilename = Filenames.toHTML(filename);
+
+      // Verify blob can be created with unicode filenames
+      expect(() => new Blob(["test"], { type: "text/html" })).not.toThrow();
+      expect(htmlFilename).toMatch(/\.html$/);
+
+      // Verify filename maintains unicode characters
+      const baseName = Filenames.withoutExtension(filename);
+      expect(htmlFilename).toContain(baseName);
+    });
+  });
+});

package/src/core/wasm/bridge.ts

@@ -576,7 +576,11 @@ export class PyodideWebsocket implements IReconnectingWebSocket {
   messageSubscriptions = new Set<(event: MessageEvent) => void>();
   errorSubscriptions = new Set<(event: Event) => void>();
 
-  constructor(private bridge: Pick<PyodideBridge, "consumeMessages">) {}
+  private bridge: Pick<PyodideBridge, "consumeMessages">;
+
+  constructor(bridge: Pick<PyodideBridge, "consumeMessages">) {
+    this.bridge = bridge;
+  }
 
   private consumeMessages() {
     this.bridge.consumeMessages((message) => {

package/src/core/wasm/store.ts

@@ -87,7 +87,10 @@ const emptyFileStore: FileStore = {
 };
 
 export class CompositeFileStore implements FileStore {
-  constructor(private stores: FileStore[]) {}
+  private stores: FileStore[];
+  constructor(stores: FileStore[]) {
+    this.stores = stores;
+  }
 
   insert(index: number, store: FileStore) {
     this.stores.splice(index, 0, store);

package/src/core/wasm/worker/message-buffer.ts

@@ -7,8 +7,9 @@
 export class MessageBuffer<T> {
   private buffer: T[];
   private started = false;
-
-  constructor(private onMessage: (data: T) => void) {
+  private onMessage: (data: T) => void;
+  constructor(onMessage: (data: T) => void) {
+    this.onMessage = onMessage;
     this.buffer = [];
   }
 

package/src/core/websocket/types.ts

@@ -2,22 +2,28 @@
 
 import type ReconnectingWebSocket from "partysocket/ws";
 
-export enum WebSocketState {
-  CONNECTING = "CONNECTING",
-  OPEN = "CONNECTED",
-  CLOSING = "CLOSING",
-  CLOSED = "CLOSED",
-}
-
-export enum WebSocketClosedReason {
-  KERNEL_DISCONNECTED = "KERNEL_DISCONNECTED",
-  ALREADY_RUNNING = "ALREADY_RUNNING",
-  MALFORMED_QUERY = "MALFORMED_QUERY",
-}
+export const WebSocketState = {
+  CONNECTING: "CONNECTING",
+  OPEN: "OPEN",
+  CLOSING: "CLOSING",
+  CLOSED: "CLOSED",
+} as const;
+
+export type WebSocketState =
+  (typeof WebSocketState)[keyof typeof WebSocketState];
+
+export const WebSocketClosedReason = {
+  KERNEL_DISCONNECTED: "KERNEL_DISCONNECTED",
+  ALREADY_RUNNING: "ALREADY_RUNNING",
+  MALFORMED_QUERY: "MALFORMED_QUERY",
+} as const;
+
+export type WebSocketClosedReason =
+  (typeof WebSocketClosedReason)[keyof typeof WebSocketClosedReason];
 
 export type ConnectionStatus =
   | {
-      state: WebSocketState.CLOSED;
+      state: typeof WebSocketState.CLOSED;
       code: WebSocketClosedReason;
       /**
        * Human-readable reason for closing the connection.
@@ -31,9 +37,9 @@ export type ConnectionStatus =
     }
   | {
       state:
-        | WebSocketState.CONNECTING
-        | WebSocketState.OPEN
-        | WebSocketState.CLOSING;
+        | typeof WebSocketState.CONNECTING
+        | typeof WebSocketState.OPEN
+        | typeof WebSocketState.CLOSING;
     };
 
 type PublicInterface<T> = {

package/src/core/websocket/useMarimoWebSocket.tsx

@@ -86,7 +86,7 @@ export function useMarimoWebSocket(opts: {
 
   const handleMessage = (e: MessageEvent<JsonString<OperationMessage>>) => {
     const msg = jsonParseWithSpecialChar(e.data);
-    switch (msg.op) {
+    switch (msg.data.op) {
       case "reload":
         reloadSafe();
         return;
@@ -267,7 +267,7 @@ export function useMarimoWebSocket(opts: {
         setCellIds({ cellIds: msg.data.cell_ids as CellId[] });
         return;
       default:
-        logNever(msg);
+        logNever(msg.data);
     }
   };
 

package/src/css/app/Cell.css

@@ -23,6 +23,17 @@
     outline: none;
   }
 
+  &:has(.mo-ai-generated-cell)::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 10px;
+    pointer-events: none;
+    opacity: 0.5;
+    box-shadow: 0px 0px 10px 0px var(--cyan-9);
+    z-index: 1;
+  }
+
   &:focus-within {
     z-index: 20;
   }

package/src/hooks/useFormatting.ts

@@ -0,0 +1,97 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useCallback } from "react";
+import { useLocale } from "react-aria";
+import { getShortTimeZone, prettyDate, timeAgo } from "@/utils/dates";
+import {
+  prettyEngineeringNumber,
+  prettyNumber,
+  prettyScientificNumber,
+} from "@/utils/numbers";
+
+/**
+ * Hook that provides locale-aware number formatting using the prettyNumber utility
+ */
+export function usePrettyNumber() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: unknown): string => {
+      return prettyNumber(value, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware scientific number formatting
+ */
+export function usePrettyScientificNumber() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: number, opts: { shouldRound?: boolean } = {}): string => {
+      return prettyScientificNumber(value, { ...opts, locale });
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware engineering number formatting
+ */
+export function usePrettyEngineeringNumber() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: number): string => {
+      return prettyEngineeringNumber(value, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware date formatting
+ */
+export function usePrettyDate() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (
+      value: string | number | null | undefined,
+      type: "date" | "datetime",
+    ): string => {
+      return prettyDate(value, type, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware relative time formatting
+ */
+export function useTimeAgo() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (value: string | number | null | undefined): string => {
+      return timeAgo(value, locale);
+    },
+    [locale],
+  );
+}
+
+/**
+ * Hook that provides locale-aware timezone abbreviation
+ */
+export function useShortTimeZone() {
+  const { locale } = useLocale();
+
+  return useCallback(
+    (timezone: string): string => {
+      return getShortTimeZone(timezone, locale);
+    },
+    [locale],
+  );
+}

package/src/hooks/useTimer.ts

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useEffect, useRef, useState } from "react";
+import { useNumberFormatter } from "react-aria";
 import useEvent from "react-use-event-hook";
 
 /**
@@ -11,6 +12,12 @@ export function useTimer() {
   const [time, setTime] = useState(0);
   const interval = useRef<number>(undefined);
 
+  // one decimal place, exactly
+  const numberFormatter = useNumberFormatter({
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  });
+
   const start = useEvent(() => {
     interval.current = window.setInterval(() => {
       setTime((time) => time + 0.1);
@@ -36,11 +43,7 @@ export function useTimer() {
   }, []);
 
   return {
-    // one decimal place, exactly
-    time: new Intl.NumberFormat("en-US", {
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 1,
-    }).format(time),
+    time: numberFormatter.format(time),
     start,
     stop,
     clear,

package/src/plugins/core/RenderHTML.tsx

@@ -5,7 +5,7 @@ import parse, {
   Element,
   type HTMLReactParserOptions,
 } from "html-react-parser";
-import React, { type JSX, type ReactNode, useId } from "react";
+import React, { isValidElement, type JSX, type ReactNode, useId } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 
 type ReplacementFn = NonNullable<HTMLReactParserOptions["replace"]>;
@@ -23,6 +23,36 @@ const replaceValidTags = (domNode: DOMNode) => {
   }
 };
 
+const removeWrappingBodyTags: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+) => {
+  // Remove body tags and just render their children
+  if (domNode instanceof Element && domNode.name === "body") {
+    if (isValidElement(reactNode) && "props" in reactNode) {
+      const props = reactNode.props as { children?: ReactNode };
+      const children = props.children;
+      return <>{children}</>; // eslint-disable-line react/jsx-no-useless-fragment
+    }
+    return;
+  }
+};
+
+const removeWrappingHtmlTags: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+) => {
+  // Remove html tags and just render their children
+  if (domNode instanceof Element && domNode.name === "html") {
+    if (isValidElement(reactNode) && "props" in reactNode) {
+      const props = reactNode.props as { children?: ReactNode };
+      const children = props.children;
+      return <>{children}</>; // eslint-disable-line react/jsx-no-useless-fragment
+    }
+    return;
+  }
+};
+
 const replaceValidIframes = (domNode: DOMNode) => {
   // For iframe, we just want to use dangerouslySetInnerHTML so:
   // 1) we can remount the iframe when the src changes
@@ -110,7 +140,11 @@ export const renderHTML = ({ html, additionalReplacements = [] }: Options) => {
     ...additionalReplacements,
   ];
 
-  const transformFunctions: TransformFn[] = [addCopyButtonToCodehilite];
+  const transformFunctions: TransformFn[] = [
+    addCopyButtonToCodehilite,
+    removeWrappingBodyTags,
+    removeWrappingHtmlTags,
+  ];
 
   return parse(html, {
     replace: (domNode: DOMNode, index: number) => {

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -121,6 +121,78 @@ describe("RenderHTML", () => {
       </p>
     `);
   });
+
+  test("removes body tags but preserves children", () => {
+    const html = "<body><h1>Hello</h1><p>World</p></body>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <h1>
+          Hello
+        </h1>
+        <p>
+          World
+        </p>
+      </React.Fragment>
+    `);
+  });
+
+  test("removes nested body tags", () => {
+    const html = "<div><body><span>Content</span></body></div>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <div>
+        <React.Fragment>
+          <span>
+            Content
+          </span>
+        </React.Fragment>
+      </div>
+    `);
+  });
+
+  test("removes html tags but preserves children", () => {
+    const html =
+      "<html><head><title>Test</title></head><body><p>Content</p></body></html>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <head>
+          <title>
+            Test
+          </title>
+        </head>
+        <React.Fragment>
+          <p>
+            Content
+          </p>
+        </React.Fragment>
+      </React.Fragment>
+    `);
+  });
+
+  test("removes nested html tags", () => {
+    const html = "<div><html><span>Content</span></html></div>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <div>
+        <React.Fragment>
+          <span>
+            Content
+          </span>
+        </React.Fragment>
+      </div>
+    `);
+  });
+
+  test("remove nested body in html", () => {
+    const html = "<html><body><span>Content</span></body></html>";
+    expect(renderHTML({ html })).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <React.Fragment>
+          <span>
+            Content
+          </span>
+        </React.Fragment>
+      </React.Fragment>
+    `);
+  });
 });
 
 describe("RenderHTML with < nad >", () => {

package/src/plugins/core/registerReactComponent.tsx

@@ -1,4 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
+
 /* eslint-disable unicorn/prefer-spread */
 /**
  * WebComponent Factory for React Components
@@ -7,6 +8,7 @@
  * component. The factory handles the logic of communicating UI element values
  * to and from the rest of marimo.
  */
+import { Provider } from "jotai";
 import React, {
   createRef,
   type JSX,
@@ -21,16 +23,22 @@ import React, {
 import ReactDOM, { type Root } from "react-dom/client";
 import useEvent from "react-use-event-hook";
 import type { ZodSchema } from "zod";
+import { notebookAtom } from "@/core/cells/cells.ts";
+import { findCellId } from "@/core/cells/ids.ts";
+import { isUninstantiated } from "@/core/cells/utils";
 import { createInputEvent, MarimoValueUpdateEvent } from "@/core/dom/events";
 import { getUIElementObjectId } from "@/core/dom/ui-element";
 import { UIElementRegistry } from "@/core/dom/uiregistry";
 import { FUNCTIONS_REGISTRY } from "@/core/functions/FunctionRegistry";
+import { LocaleProvider } from "@/core/i18n/locale-provider";
+import { store } from "@/core/state/jotai";
 import {
   type HTMLElementNotDerivedFromRef,
   useEventListener,
 } from "@/hooks/useEventListener";
 import { StyleNamespace } from "@/theme/namespace";
 import { useTheme } from "@/theme/useTheme";
+import { CellNotInitializedError } from "@/utils/errors.ts";
 import { Functions } from "@/utils/functions";
 import { shallowCompare } from "@/utils/shallow-compare";
 import { defineCustomElement } from "../../core/dom/defineCustomElement";
@@ -78,6 +86,7 @@ interface PluginSlotProps<T> {
 }
 
 /* Handles synchronization of value on behalf of the component */
+
 // eslint-disable-next-line react/function-component-definition
 function PluginSlotInternal<T>(
   { hostElement, plugin, children, getInitialValue }: PluginSlotProps<T>,
@@ -172,6 +181,27 @@ function PluginSlotInternal<T>(
         );
         const objectId = getUIElementObjectId(hostElement);
         invariant(objectId, "Object ID should exist");
+
+        const cellId = findCellId(hostElement);
+        invariant(cellId, "Cell ID should exist");
+
+        const notebookState = store.get(notebookAtom);
+        const cellRuntime = notebookState.cellRuntime[cellId];
+        const cellData = notebookState.cellData[cellId];
+
+        const cellNotInitialized = isUninstantiated({
+          executionTime:
+            cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
+          status: cellRuntime.status,
+          errored: cellRuntime.errored,
+          interrupted: cellRuntime.interrupted,
+          stopped: cellRuntime.stopped,
+        });
+
+        if (cellNotInitialized) {
+          throw new CellNotInitializedError();
+        }
+
         const response = await FUNCTIONS_REGISTRY.request({
           args: prettyParse(input, args[0]),
           functionName: key,
@@ -335,16 +365,20 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
 
       invariant(this.root, "Root must be defined");
       this.root.render(
-        <PluginSlot
-          hostElement={this}
-          plugin={plugin}
-          ref={this.pluginRef}
-          getInitialValue={() => {
-            return parseInitialValue(this, UIElementRegistry.INSTANCE);
-          }}
-        >
-          {this.getChildren()}
-        </PluginSlot>,
+        <Provider store={store}>
+          <LocaleProvider>
+            <PluginSlot
+              hostElement={this}
+              plugin={plugin}
+              ref={this.pluginRef}
+              getInitialValue={() => {
+                return parseInitialValue(this, UIElementRegistry.INSTANCE);
+              }}
+            >
+              {this.getChildren()}
+            </PluginSlot>
+          </LocaleProvider>
+        </Provider>,
       );
     }
 

package/src/plugins/impl/DataTablePlugin.tsx

@@ -254,6 +254,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       cellStyles: z.record(z.record(z.object({}).passthrough())).optional(),
+      hoverTemplate: z.string().optional(),
       // Whether to load the data lazily.
       lazy: z.boolean().default(false),
       // If lazy, this will preload the first page of data
@@ -385,6 +386,7 @@ interface DataTableProps<T> extends Data<T>, DataTableFunctions {
   // Filters
   enableFilters?: boolean;
   cellStyles?: CellStyleState | null;
+  hoverTemplate?: string | null;
   toggleDisplayHeader?: () => void;
   host: HTMLElement;
   cellId?: CellId | null;
@@ -707,6 +709,7 @@ const DataTableComponent = ({
   totalColumns,
   get_row_ids,
   cellStyles,
+  hoverTemplate,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -904,6 +907,7 @@ const DataTableComponent = ({
             rowSelection={rowSelection}
             cellSelection={cellSelection}
             cellStyling={cellStyles}
+            hoverTemplate={hoverTemplate}
             downloadAs={showDownload ? downloadAs : undefined}
             enableSearch={enableSearch}
             searchQuery={searchQuery}

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -12,7 +12,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { NativeSelect } from "@/components/ui/native-select";
-import { Table, TableCell, TableRow } from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
@@ -158,6 +158,10 @@ export const FileBrowser = ({
     return null;
   }
 
+  if (!data && error) {
+    return <Banner kind="danger">{error.message}</Banner>;
+  }
+
   let { files } = data || {};
   if (files === undefined) {
     files = [];
@@ -458,7 +462,9 @@ export const FileBrowser = ({
         className="mt-3 overflow-y-auto w-full border"
         style={{ height: "14rem" }}
       >
-        <Table className="cursor-pointer table-fixed">{fileRows}</Table>
+        <Table className="cursor-pointer table-fixed">
+          <TableBody>{fileRows}</TableBody>
+        </Table>
       </div>
       <div className="mt-4">
         {value.length > 0 && (

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -2,6 +2,7 @@
 
 import { isEqual } from "lodash-es";
 import { type JSX, useEffect, useId, useState } from "react";
+import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
@@ -82,6 +83,7 @@ const RangeSliderComponent = ({
   valueMap,
 }: RangeSliderProps): JSX.Element => {
   const id = useId();
+  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -150,9 +152,9 @@ const RangeSliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {`${prettyScientificNumber(
-              valueMap(internalValue[0]),
-            )}, ${prettyScientificNumber(valueMap(internalValue[1]))}`}
+            {`${prettyScientificNumber(valueMap(internalValue[0]), {
+              locale,
+            })}, ${prettyScientificNumber(valueMap(internalValue[1]), { locale })}`}
           </div>
         )}
       </div>

package/src/plugins/impl/SliderPlugin.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { type JSX, useEffect, useId, useState } from "react";
+import { useLocale } from "react-aria";
 import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
 import { cn } from "@/utils/cn";
@@ -85,6 +86,7 @@ const SliderComponent = ({
   disabled,
 }: SliderProps): JSX.Element => {
   const id = useId();
+  const { locale } = useLocale();
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
@@ -138,7 +140,7 @@ const SliderComponent = ({
         />
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
-            {prettyScientificNumber(valueMap(internalValue))}
+            {prettyScientificNumber(valueMap(internalValue), { locale })}
           </div>
         )}
         {includeInput && (