@marimo-team/frontend 0.16.0 → 0.16.1

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 && (

package/src/plugins/impl/anywidget/model.ts

@@ -17,8 +17,10 @@ export type EventHandler = (...args: any[]) => void;
 
 class ModelManager {
   private models = new Map<string, Deferred<Model<any>>>();
-
-  constructor(private timeout = 10_000) {}
+  private timeout: number;
+  constructor(timeout = 10_000) {
+    this.timeout = timeout;
+  }
 
   get(key: string): Promise<Model<any>> {
     let deferred = this.models.get(key);
@@ -64,16 +66,25 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
   private ANY_CHANGE_EVENT = "change";
   private dirtyFields;
   public static _modelManager: ModelManager = MODEL_MANAGER;
+  private data: T;
+  private onChange: (value: Partial<T>) => void;
+  private sendToWidget: (req: {
+    content?: any;
+    buffers?: ArrayBuffer[] | ArrayBufferView[];
+  }) => Promise<null | undefined>;
 
   constructor(
-    private data: T,
-    private onChange: (value: Partial<T>) => void,
-    private sendToWidget: (req: {
+    data: T,
+    onChange: (value: Partial<T>) => void,
+    sendToWidget: (req: {
       content?: any;
       buffers?: ArrayBuffer[] | ArrayBufferView[];
     }) => Promise<null | undefined>,
     initialDirtyFields: Set<keyof T>,
   ) {
+    this.data = data;
+    this.onChange = onChange;
+    this.sendToWidget = sendToWidget;
     this.dirtyFields = new Set(initialDirtyFields);
   }
 

package/src/plugins/impl/data-editor/types.ts

@@ -10,11 +10,13 @@ export interface PositionalEdit {
   value: unknown;
 }
 
-export enum BulkEdit {
-  Insert = "insert",
-  Remove = "remove",
-  Rename = "rename",
-}
+export const BulkEdit = {
+  Insert: "insert",
+  Remove: "remove",
+  Rename: "rename",
+} as const;
+
+type BulkEdit = (typeof BulkEdit)[keyof typeof BulkEdit];
 
 export interface RowEdit {
   rowIdx: number;

package/src/plugins/impl/data-explorer/components/column-summary.tsx

@@ -3,6 +3,7 @@
 import type { Schema } from "compassql/build/src/schema";
 import { BarChartBigIcon } from "lucide-react";
 import React, { useState } from "react";
+import { useDateFormatter, useNumberFormatter } from "react-aria";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -131,7 +132,9 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
           {STAT_KEYS.map((key) => (
             <div key={key} className="flex flex-row gap-2 min-w-[100px]">
               <span className="font-semibold">{key}</span>
-              <span>{formatStat(stats?.[key])}</span>
+              <span>
+                <FormatStat value={stats?.[key]} />
+              </span>
             </div>
           ))}
         </div>
@@ -151,24 +154,28 @@ const STAT_KEYS = [
   "stdev",
 ];
 
-function formatStat(value: unknown) {
+const FormatStat = ({ value }: { value: unknown }) => {
+  // Decimal .2
+  const numberFormatter = useNumberFormatter({
+    maximumFractionDigits: 2,
+  });
+
+  // Just day, month, year
+  const dateFormatter = useDateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
   if (typeof value === "number") {
-    // Decimal .2
-    return new Intl.NumberFormat("en-US", {
-      maximumFractionDigits: 2,
-    }).format(value);
+    return numberFormatter.format(value);
   }
   if (typeof value === "string") {
     return value;
   }
   if (typeof value === "object" && value instanceof Date) {
-    // Just day, month, year
-    return new Intl.DateTimeFormat("en-US", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }).format(value);
+    return dateFormatter.format(value);
   }
 
   return String(value);
-}
+};

package/src/plugins/impl/panel/utils.ts

@@ -57,11 +57,13 @@ export class EventBuffer<T> {
   private buffer: T[] = [];
   private isBlocked = false;
   private timeout: number | null = null;
+  private processEvents: () => void;
+  private blockDuration: number;
 
-  constructor(
-    private processEvents: () => void,
-    private blockDuration = 200,
-  ) {}
+  constructor(processEvents: () => void, blockDuration = 200) {
+    this.processEvents = processEvents;
+    this.blockDuration = blockDuration;
+  }
 
   add(event: T) {
     this.buffer.push(event);

package/src/plugins/layout/OutlinePlugin.tsx

@@ -0,0 +1,69 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { Provider, useAtomValue } from "jotai";
+import type { JSX } from "react";
+import { z } from "zod";
+import { notebookOutline } from "@/core/cells/cells";
+import { store } from "@/core/state/jotai";
+import { OutlineList } from "../../components/editor/chrome/panels/outline/floating-outline";
+import {
+  findOutlineElements,
+  useActiveOutline,
+} from "../../components/editor/chrome/panels/outline/useActiveOutline";
+import type {
+  IStatelessPlugin,
+  IStatelessPluginProps,
+} from "../stateless-plugin";
+
+interface Data {
+  label?: string;
+}
+
+const OutlineContent: React.FC<{ label?: string }> = ({ label }) => {
+  const { items } = useAtomValue(notebookOutline);
+  const headerElements = findOutlineElements(items);
+  const { activeHeaderId, activeOccurrences } =
+    useActiveOutline(headerElements);
+
+  if (items.length === 0) {
+    return (
+      <div className="text-muted-foreground text-sm p-4 border border-dashed border-border rounded-lg">
+        No outline found. Add markdown headings to your notebook to create an
+        outline.
+      </div>
+    );
+  }
+
+  return (
+    <div className="border border-border rounded-lg">
+      {label && (
+        <div className="px-4 py-2 border-b border-border font-medium text-sm">
+          {label}
+        </div>
+      )}
+      <OutlineList
+        className="max-h-[400px]"
+        items={items}
+        activeHeaderId={activeHeaderId}
+        activeOccurrences={activeOccurrences}
+      />
+    </div>
+  );
+};
+
+export class OutlinePlugin implements IStatelessPlugin<Data> {
+  tagName = "marimo-outline";
+
+  validator = z.object({
+    label: z.string().optional(),
+  });
+
+  render(props: IStatelessPluginProps<Data>): JSX.Element {
+    const { label } = props.data;
+
+    return (
+      <Provider store={store}>
+        <OutlineContent label={label} />
+      </Provider>
+    );
+  }
+}

package/src/plugins/layout/StatPlugin.tsx

@@ -2,6 +2,7 @@
 
 import { TriangleIcon } from "lucide-react";
 import type { JSX } from "react";
+import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import { prettyNumber } from "@/utils/numbers";
@@ -41,6 +42,8 @@ export const StatComponent: React.FC<Data> = ({
   bordered,
   direction,
 }) => {
+  const { locale } = useLocale();
+
   const renderPrettyValue = () => {
     if (value == null) {
       return <i>No value</i>;
@@ -51,7 +54,7 @@ export const StatComponent: React.FC<Data> = ({
     }
 
     if (typeof value === "number") {
-      return prettyNumber(value);
+      return prettyNumber(value, locale);
     }
 
     if (typeof value === "boolean") {

package/src/plugins/plugins.ts

@@ -45,6 +45,7 @@ import { JsonOutputPlugin } from "./layout/JsonOutputPlugin";
 import { LazyPlugin } from "./layout/LazyPlugin";
 import { MimeRendererPlugin } from "./layout/MimeRenderPlugin";
 import { MermaidPlugin } from "./layout/mermaid/MermaidPlugin";
+import { OutlinePlugin } from "./layout/OutlinePlugin";
 import { ProgressPlugin } from "./layout/ProgressPlugin";
 import { RoutesPlugin } from "./layout/RoutesPlugin";
 import { StatPlugin } from "./layout/StatPlugin";
@@ -99,6 +100,7 @@ const LAYOUT_PLUGINS: Array<IStatelessPlugin<unknown>> = [
   new MimeRendererPlugin(),
   new MermaidPlugin(),
   new NavigationMenuPlugin(),
+  new OutlinePlugin(),
   new ProgressPlugin(),
   new RoutesPlugin(),
   new StatPlugin(),

package/src/utils/__tests__/dates.test.ts

@@ -8,6 +8,8 @@ import {
   timeAgo,
 } from "../dates";
 
+const locale = "en-US";
+
 describe("dates", () => {
   // Save original timezone
   let originalTimezone: string | undefined;
@@ -25,36 +27,38 @@ describe("dates", () => {
 
   describe("prettyDate", () => {
     it("returns empty string for null or undefined", () => {
-      expect(prettyDate(null, "date")).toBe("");
-      expect(prettyDate(undefined, "date")).toBe("");
+      expect(prettyDate(null, "date", locale)).toBe("");
+      expect(prettyDate(undefined, "date", locale)).toBe("");
     });
 
     it("formats date correctly", () => {
       const date = new Date("2023-05-15T12:00:00Z");
       // Using a regex to match the pattern since exact format may vary by locale
-      expect(prettyDate(date.toISOString(), "date")).toMatch(/May 15, 2023/);
+      expect(prettyDate(date.toISOString(), "date", locale)).toMatch(
+        /May 15, 2023/,
+      );
     });
 
     it("formats datetime correctly", () => {
       const date = new Date("2023-05-15T12:00:00Z");
-      expect(prettyDate(date.toISOString(), "datetime")).toMatch(
+      expect(prettyDate(date.toISOString(), "datetime", locale)).toMatch(
         /May 15, 2023/,
       );
     });
 
     it("handles errors gracefully", () => {
-      expect(prettyDate("invalid-date", "date")).toBe("Invalid Date");
+      expect(prettyDate("invalid-date", "date", locale)).toBe("Invalid Date");
     });
 
     it("handles numeric timestamp input", () => {
       const timestamp = 1_684_152_000_000; // 2023-05-15T12:00:00Z in milliseconds
-      expect(prettyDate(timestamp, "date")).toMatch(/May 15, 2023/);
+      expect(prettyDate(timestamp, "date", locale)).toMatch(/May 15, 2023/);
     });
 
     it("preserves timezone for datetime type", () => {
       // This date is in winter time to avoid daylight saving time issues
       const date = new Date("2023-01-15T15:30:00Z");
-      expect(prettyDate(date.toISOString(), "datetime")).toMatch(
+      expect(prettyDate(date.toISOString(), "datetime", locale)).toMatch(
         /Jan 15, 2023/,
       );
     });
@@ -62,7 +66,9 @@ describe("dates", () => {
     it("drops timezone for date type by using UTC", () => {
       // Create a date that would be different days in different timezones
       const date = new Date("2023-05-15T23:30:00Z"); // Late in the day UTC
-      expect(prettyDate(date.toISOString(), "date")).toMatch(/May 15, 2023/);
+      expect(prettyDate(date.toISOString(), "date", locale)).toMatch(
+        /May 15, 2023/,
+      );
     });
 
     describe("with different locales", () => {
@@ -86,7 +92,9 @@ describe("dates", () => {
         };
 
         const date = new Date("2023-05-15T12:00:00Z");
-        expect(prettyDate(date.toISOString(), "date")).toBe("15 mai 2023");
+        expect(prettyDate(date.toISOString(), "date", locale)).toBe(
+          "15 mai 2023",
+        );
       });
     });
   });
@@ -94,34 +102,42 @@ describe("dates", () => {
   describe("exactDateTime", () => {
     it("formats date without milliseconds", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, undefined)).toBe("2023-05-15 12:00:00");
+      expect(exactDateTime(date, undefined, locale)).toBe(
+        "2023-05-15 12:00:00",
+      );
     });
 
     it("formats date with milliseconds", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, undefined)).toBe("2023-05-15 12:00:00.123");
+      expect(exactDateTime(date, undefined, locale)).toBe(
+        "2023-05-15 12:00:00.123",
+      );
     });
 
     it("formats date in UTC when renderInUTC is true", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, "UTC")).toBe("2023-05-15 12:00:00 UTC");
+      expect(exactDateTime(date, "UTC", locale)).toBe(
+        "2023-05-15 12:00:00 UTC",
+      );
     });
 
     it("formats date with milliseconds in UTC when renderInUTC is true", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, "UTC")).toBe("2023-05-15 12:00:00.123 UTC");
+      expect(exactDateTime(date, "UTC", locale)).toBe(
+        "2023-05-15 12:00:00.123 UTC",
+      );
     });
 
     it("formats date in America/New_York timezone", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, "America/New_York")).toBe(
+      expect(exactDateTime(date, "America/New_York", locale)).toBe(
         "2023-05-15 08:00:00 EDT",
       );
     });
 
     it("formats date with milliseconds in America/New_York timezone", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, "America/New_York")).toBe(
+      expect(exactDateTime(date, "America/New_York", locale)).toBe(
         "2023-05-15 08:00:00.123 EDT",
       );
     });
@@ -129,42 +145,47 @@ describe("dates", () => {
 
   describe("timeAgo", () => {
     it("returns empty string for null, undefined, or 0", () => {
-      expect(timeAgo(null)).toBe("");
-      expect(timeAgo(undefined)).toBe("");
-      expect(timeAgo(0)).toBe("");
+      expect(timeAgo(null, locale)).toBe("");
+      expect(timeAgo(undefined, locale)).toBe("");
+      expect(timeAgo(0, locale)).toBe("");
     });
 
     it("formats today's date correctly", () => {
       const today = new Date();
-      const result = timeAgo(today.toISOString());
+      const result = timeAgo(today.toISOString(), locale);
       expect(result).toMatch(/Today at/);
     });
 
     it("formats yesterday's date correctly", () => {
       const yesterday = new Date();
       yesterday.setDate(yesterday.getDate() - 1);
-      const result = timeAgo(yesterday.toISOString());
+      const result = timeAgo(yesterday.toISOString(), locale);
       expect(result).toMatch(/Yesterday at/);
     });
 
     it("formats older dates correctly", () => {
       const oldDate = new Date("2020-01-01T12:00:00Z");
-      const result = timeAgo(oldDate.toISOString());
+      const result = timeAgo(oldDate.toISOString(), locale);
       expect(result).toMatch(/Jan 1, 2020 at/);
     });
 
     it("handles errors gracefully", () => {
-      expect(timeAgo("invalid-date")).toBe("Invalid Date at Invalid Date");
+      expect(timeAgo("invalid-date", locale)).toBe(
+        "Invalid Date at Invalid Date",
+      );
     });
   });
 
   describe("getShortTimeZone", () => {
     it("returns the short timezone", () => {
-      expect(getShortTimeZone("America/New_York")).toBeOneOf(["EDT", "EST"]);
+      expect(getShortTimeZone("America/New_York", locale)).toBeOneOf([
+        "EDT",
+        "EST",
+      ]);
     });
 
     it("handles errors gracefully", () => {
-      expect(getShortTimeZone("MarimoLand")).toBe("MarimoLand");
+      expect(getShortTimeZone("MarimoLand", locale)).toBe("MarimoLand");
     });
   });
 

package/src/utils/__tests__/numbers.test.ts

@@ -6,24 +6,32 @@ import {
   prettyScientificNumber,
 } from "../numbers";
 
+const locale = "en-US";
+
 describe("prettyNumber", () => {
   it("should format numbers", () => {
-    expect(prettyNumber(123_456_789)).toBe("123,456,789");
-    expect(prettyNumber(1234.567_89)).toBe("1,234.57");
-    expect(prettyNumber(0)).toBe("0");
+    expect(prettyNumber(123_456_789, locale)).toBe("123,456,789");
+    expect(prettyNumber(1234.567_89, locale)).toBe("1,234.57");
+    expect(prettyNumber(0, locale)).toBe("0");
   });
 });
 
+const options = { locale };
+
 describe("prettyScientificNumber", () => {
   it("should handle special cases", () => {
-    expect(prettyScientificNumber(0)).toBe("0");
-    expect(prettyScientificNumber(Number.NaN)).toBe("NaN");
-    expect(prettyScientificNumber(Number.POSITIVE_INFINITY)).toBe("Infinity");
-    expect(prettyScientificNumber(Number.NEGATIVE_INFINITY)).toBe("-Infinity");
+    expect(prettyScientificNumber(0, options)).toBe("0");
+    expect(prettyScientificNumber(Number.NaN, options)).toBe("NaN");
+    expect(prettyScientificNumber(Number.POSITIVE_INFINITY, options)).toBe(
+      "Infinity",
+    );
+    expect(prettyScientificNumber(Number.NEGATIVE_INFINITY, options)).toBe(
+      "-Infinity",
+    );
   });
 
   it("should format decimals with scientific notation, ignoring integer part rounding", () => {
-    const opts = { shouldRound: true };
+    const opts = { shouldRound: true, locale };
     expect(prettyScientificNumber(123_456, opts)).toBe("123,456");
     expect(prettyScientificNumber(123_456.7, opts)).toBe("123,456.7");
     expect(prettyScientificNumber(12_345.6789, opts)).toBe("12,345.68");
@@ -40,10 +48,10 @@ describe("prettyScientificNumber", () => {
   });
 
   it("should not round numbers when shouldRound is false", () => {
-    expect(prettyScientificNumber(123_456)).toBe("123,456");
-    expect(prettyScientificNumber(123_456.7)).toBe("123,456.7");
-    expect(prettyScientificNumber(12_345.6789)).toBe("12,345.6789");
-    expect(prettyScientificNumber(1.234_567_891_011_12)).toBe(
+    expect(prettyScientificNumber(123_456, options)).toBe("123,456");
+    expect(prettyScientificNumber(123_456.7, options)).toBe("123,456.7");
+    expect(prettyScientificNumber(12_345.6789, options)).toBe("12,345.6789");
+    expect(prettyScientificNumber(1.234_567_891_011_12, options)).toBe(
       "1.23456789101112",
     );
   });
@@ -51,26 +59,30 @@ describe("prettyScientificNumber", () => {
 
 describe("prettyEngineeringNumber", () => {
   it("should handle special cases", () => {
-    expect(prettyEngineeringNumber(0)).toBe("0");
-    expect(prettyEngineeringNumber(-0)).toBe("0"); // Test with negative zero
-    expect(prettyEngineeringNumber(Number.NaN)).toBe("NaN");
-    expect(prettyEngineeringNumber(Number.POSITIVE_INFINITY)).toBe("Infinity");
-    expect(prettyEngineeringNumber(Number.NEGATIVE_INFINITY)).toBe("-Infinity");
+    expect(prettyEngineeringNumber(0, locale)).toBe("0");
+    expect(prettyEngineeringNumber(-0, locale)).toBe("0"); // Test with negative zero
+    expect(prettyEngineeringNumber(Number.NaN, locale)).toBe("NaN");
+    expect(prettyEngineeringNumber(Number.POSITIVE_INFINITY, locale)).toBe(
+      "Infinity",
+    );
+    expect(prettyEngineeringNumber(Number.NEGATIVE_INFINITY, locale)).toBe(
+      "-Infinity",
+    );
   });
 
   it("should format decimals with engineering notation, ignoring integer part", () => {
-    expect(prettyEngineeringNumber(123_456)).toBe("123k");
-    expect(prettyEngineeringNumber(123_456.7)).toBe("123k");
-    expect(prettyEngineeringNumber(12_345.6789)).toBe("12.3k");
-    expect(prettyEngineeringNumber(1.2345)).toBe("1.23");
-    expect(prettyEngineeringNumber(1.000_001_234)).toBe("1");
-    expect(prettyEngineeringNumber(0.12)).toBe("120m");
-    expect(prettyEngineeringNumber(0.1234)).toBe("123m");
-    expect(prettyEngineeringNumber(0.000_123_4)).toBe("123µ");
-    expect(prettyEngineeringNumber(-1.2345)).toBe("-1.23"); // Test with negative numbers
-    expect(prettyEngineeringNumber(-1.000_001_234)).toBe("-1");
-    expect(prettyEngineeringNumber(-0.12)).toBe("-120m");
-    expect(prettyEngineeringNumber(-0.1234)).toBe("-123m");
-    expect(prettyEngineeringNumber(-0.000_123_4)).toBe("-123µ");
+    expect(prettyEngineeringNumber(123_456, locale)).toBe("123k");
+    expect(prettyEngineeringNumber(123_456.7, locale)).toBe("123k");
+    expect(prettyEngineeringNumber(12_345.6789, locale)).toBe("12.3k");
+    expect(prettyEngineeringNumber(1.2345, locale)).toBe("1.23");
+    expect(prettyEngineeringNumber(1.000_001_234, locale)).toBe("1");
+    expect(prettyEngineeringNumber(0.12, locale)).toBe("120m");
+    expect(prettyEngineeringNumber(0.1234, locale)).toBe("123m");
+    expect(prettyEngineeringNumber(0.000_123_4, locale)).toBe("123µ");
+    expect(prettyEngineeringNumber(-1.2345, locale)).toBe("-1.23"); // Test with negative numbers
+    expect(prettyEngineeringNumber(-1.000_001_234, locale)).toBe("-1");
+    expect(prettyEngineeringNumber(-0.12, locale)).toBe("-120m");
+    expect(prettyEngineeringNumber(-0.1234, locale)).toBe("-123m");
+    expect(prettyEngineeringNumber(-0.000_123_4, locale)).toBe("-123µ");
   });
 });