@marimo-team/frontend 0.16.0-dev96986 → 0.16.0

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

@@ -342,7 +342,7 @@ interface SliderFieldProps {
   fieldName: FieldName;
   label: string;
   className?: string;
-  defaultValue: number;
+  value: number;
   start: number;
   stop: number;
   step?: number;
@@ -351,57 +351,53 @@ interface SliderFieldProps {
 export const SliderField = ({
   fieldName,
   label,
-  defaultValue,
+  value,
   start,
   stop,
   step,
   className,
 }: SliderFieldProps) => {
+  const [internalValue, setInternalValue] = React.useState(value);
   const form = useFormContext();
 
+  // Update internal value on prop change
+  React.useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
   return (
     <FormField
       control={form.control}
       name={fieldName}
-      render={({ field }) => {
-        const currentValue = field.value ?? defaultValue;
-        const numericValue = Number(currentValue);
-
-        const saveValue = (value: number | string) => {
-          if (typeof value === "string") {
-            value = Number(value);
-          }
-          field.onChange(value);
-        };
-
-        return (
-          <FormItem
-            className={cn("flex flex-row items-center gap-2 w-1/2", className)}
-          >
-            <FormLabel>{label}</FormLabel>
-            <FormControl>
-              <Slider
-                {...field}
-                id={fieldName}
-                className="relative flex items-center select-none"
-                value={[numericValue]}
-                min={start}
-                max={stop}
-                step={step}
-                // Triggered on slider drag
-                onValueChange={([nextValue]) => {
-                  saveValue(nextValue);
-                }}
-                // Triggered on mouse up
-                onValueCommit={([nextValue]) => {
-                  saveValue(nextValue);
-                }}
-                valueMap={(value) => value}
-              />
-            </FormControl>
-          </FormItem>
-        );
-      }}
+      render={({ field }) => (
+        <FormItem
+          className={cn("flex flex-row items-center gap-2 w-1/2", className)}
+        >
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Slider
+              {...field}
+              id={fieldName}
+              className="relative flex items-center select-none"
+              value={[internalValue]}
+              min={start}
+              max={stop}
+              step={step}
+              // Triggered on slider drag
+              onValueChange={([nextValue]) => {
+                setInternalValue(nextValue);
+                field.onChange(nextValue);
+              }}
+              // Triggered on mouse up
+              onValueCommit={([nextValue]) => {
+                field.onChange(nextValue);
+                form.setValue(fieldName, nextValue);
+              }}
+              valueMap={(value) => value}
+            />
+          </FormControl>
+        </FormItem>
+      )}
     />
   );
 };

package/src/components/data-table/charts/forms/common-chart.tsx

@@ -102,7 +102,7 @@ export const StyleForm: React.FC = () => {
           <SliderField
             fieldName="xAxis.width"
             label="Width"
-            defaultValue={400}
+            value={400}
             start={200}
             stop={800}
           />
@@ -118,7 +118,7 @@ export const StyleForm: React.FC = () => {
           <SliderField
             fieldName="yAxis.height"
             label="Height"
-            defaultValue={300}
+            value={300}
             start={150}
             stop={600}
           />

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useState } from "react";
-import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
   renderChart,
@@ -54,7 +53,6 @@ export const ColumnExplorerPanel = ({
   tableId,
 }: ColumnExplorerPanelProps) => {
   const [searchValue, setSearchValue] = useState("");
-  const { locale } = useLocale();
   const columns = fieldTypes?.filter(([columnName]) => {
     if (
       columnName === SELECT_COLUMN_ID ||
@@ -73,7 +71,7 @@ export const ColumnExplorerPanel = ({
   return (
     <div className="mt-5 mb-3">
       <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount(totalRows, totalColumns, locale)}
+        {prettifyRowColumnCount(totalRows, totalColumns)}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
@@ -171,7 +169,6 @@ const ColumnPreview = ({
   dataType: DataType;
 }) => {
   const { theme } = useTheme();
-  const { locale } = useLocale();
 
   const {
     data,
@@ -211,7 +208,7 @@ const ColumnPreview = ({
       refetchPreview,
     });
 
-  const previewStats = stats && renderStats(stats, dataType, locale);
+  const previewStats = stats && renderStats(stats, dataType);
 
   const chart = chart_spec && renderChart(chart_spec, theme);
 

package/src/components/data-table/column-formatting/feature.ts

@@ -16,7 +16,6 @@ import {
   prettyNumber,
   prettyScientificNumber,
 } from "@/utils/numbers";
-import { memoizeLastValue } from "@/utils/once";
 import type {
   ColumnFormattingOptions,
   ColumnFormattingState,
@@ -40,7 +39,6 @@ export const ColumnFormattingFeature: TableFeature = {
     return {
       enableColumnFormatting: true,
       onColumnFormattingChange: makeStateUpdater("columnFormatting", table),
-      locale: navigator.language,
     } as ColumnFormattingOptions;
   },
 
@@ -76,50 +74,36 @@ export const ColumnFormattingFeature: TableFeature = {
       const dataType = column.columnDef.meta?.dataType;
       const format = column.getColumnFormatting?.();
       if (format) {
-        return applyFormat(value, {
-          format,
-          dataType,
-          locale: table.options.locale,
-        });
+        return applyFormat(value, { format, dataType });
       }
       return value;
     };
   },
 };
 
-export const getFormatters = memoizeLastValue((locale: string) => {
-  const percentFormatter = new Intl.NumberFormat(locale, {
-    style: "percent",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  });
-
-  const dateFormatter = new Intl.DateTimeFormat(locale, {
-    dateStyle: "short", // 3/4/2024
-  });
+const percentFormatter = new Intl.NumberFormat(undefined, {
+  style: "percent",
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 2,
+});
 
-  const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
-    dateStyle: "short", // 3/4/2024
-    timeStyle: "long", // 3:04:05 PM
-    timeZone: "UTC",
-  });
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  dateStyle: "short", // 3/4/2024
+});
 
-  const timeFormatter = new Intl.DateTimeFormat(locale, {
-    timeStyle: "long", // 3:04:05 PM
-    timeZone: "UTC",
-  });
+const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+  dateStyle: "short", // 3/4/2024
+  timeStyle: "long", // 3:04:05 PM
+  timeZone: "UTC",
+});
 
-  const integerFormatter = new Intl.NumberFormat(locale, {
-    maximumFractionDigits: 0, // 1,000,000
-  });
+const timeFormatter = new Intl.DateTimeFormat(undefined, {
+  timeStyle: "long", // 3:04:05 PM
+  timeZone: "UTC",
+});
 
-  return {
-    percentFormatter,
-    dateFormatter,
-    dateTimeFormatter,
-    timeFormatter,
-    integerFormatter,
-  };
+const integerFormatter = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 0, // 1,000,000
 });
 
 // Apply formatting to a value given a format and data type
@@ -128,18 +112,9 @@ export const applyFormat = (
   options: {
     format: FormatOption;
     dataType: DataType | undefined;
-    locale: string;
   },
 ) => {
-  const { format, dataType, locale } = options;
-  const {
-    percentFormatter,
-    dateFormatter,
-    dateTimeFormatter,
-    timeFormatter,
-    integerFormatter,
-  } = getFormatters(locale);
-
+  const { format, dataType } = options;
   // If the value is null, return an empty string
   if (value === null || value === undefined || value === "") {
     return "";
@@ -168,13 +143,13 @@ export const applyFormat = (
       const num = Number.parseFloat(value as string);
       switch (format) {
         case "Auto":
-          return prettyNumber(num, locale);
+          return prettyNumber(num);
         case "Percent":
           return percentFormatter.format(num);
         case "Scientific":
-          return prettyScientificNumber(num, { shouldRound: true, locale });
+          return prettyScientificNumber(num, { shouldRound: true });
         case "Engineering":
-          return prettyEngineeringNumber(num, locale);
+          return prettyEngineeringNumber(num);
         case "Integer":
           return integerFormatter.format(num);
         default:
@@ -223,35 +198,32 @@ export const applyFormat = (
 
 export function formattingExample(
   format: FormatOption,
-  locale: string,
 ): string | number | undefined | null {
   switch (format) {
     case "Date":
       return String(
-        applyFormat(new Date(), { format: "Date", dataType: "date", locale }),
+        applyFormat(new Date(), { format: "Date", dataType: "date" }),
       );
     case "Datetime":
       return String(
         applyFormat(new Date(), {
           format: "Datetime",
           dataType: "date",
-          locale,
         }),
       );
     case "Time":
       return String(
-        applyFormat(new Date(), { format: "Time", dataType: "date", locale }),
+        applyFormat(new Date(), { format: "Time", dataType: "date" }),
       );
     case "Percent":
       return String(
-        applyFormat(0.1234, { format: "Percent", dataType: "number", locale }),
+        applyFormat(0.1234, { format: "Percent", dataType: "number" }),
       );
     case "Scientific":
       return String(
         applyFormat(12_345_678_910, {
           format: "Scientific",
           dataType: "number",
-          locale,
         }),
       );
     case "Engineering":
@@ -259,20 +231,15 @@ export function formattingExample(
         applyFormat(12_345_678_910, {
           format: "Engineering",
           dataType: "number",
-          locale,
         }),
       );
     case "Integer":
       return String(
-        applyFormat(1234.567, {
-          format: "Integer",
-          dataType: "number",
-          locale,
-        }),
+        applyFormat(1234.567, { format: "Integer", dataType: "number" }),
       );
     case "Auto":
       return String(
-        applyFormat(1234.567, { format: "Auto", dataType: "number", locale }),
+        applyFormat(1234.567, { format: "Auto", dataType: "number" }),
       );
     default:
       return null;

package/src/components/data-table/column-formatting/types.ts

@@ -28,7 +28,6 @@ export interface ColumnFormattingTableState {
 
 // define types for column formatting's table options
 export interface ColumnFormattingOptions {
-  locale: string;
   enableColumnFormatting?: boolean;
   onColumnFormattingChange?: OnChangeFn<ColumnFormattingState>;
 }

package/src/components/data-table/column-header.tsx

@@ -5,7 +5,6 @@ import type { Column } from "@tanstack/react-table";
 import { capitalize } from "lodash-es";
 import { FilterIcon, MinusIcon, TextIcon, XIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
-import { useLocale } from "react-aria";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -77,7 +76,6 @@ export const DataTableColumnHeader = <TData, TValue>({
   calculateTopKRows,
 }: DataTableColumnHeaderProps<TData, TValue>) => {
   const [isFilterValueOpen, setIsFilterValueOpen] = useState(false);
-  const { locale } = useLocale();
 
   // No header
   if (!header) {
@@ -121,7 +119,7 @@ export const DataTableColumnHeader = <TData, TValue>({
           {renderCopyColumn(column)}
           {renderColumnPinning(column)}
           {renderColumnWrapping(column)}
-          {renderFormatOptions(column, locale)}
+          {renderFormatOptions(column)}
           <DropdownMenuSeparator />
           {renderMenuItemFilter(column)}
           {renderFilterByValues(column, setIsFilterValueOpen)}

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -64,34 +64,17 @@ export class ColumnChartSpecModel<T> {
   private dataSpec: TopLevelSpec["data"];
   private sourceName: "data_0" | "source_0";
 
-  private readonly data: T[] | string;
-  private readonly fieldTypes: FieldTypes;
-  readonly stats: Record<ColumnName, Partial<ColumnHeaderStats>>;
-  readonly binValues: Record<ColumnName, BinValues>;
-  readonly valueCounts: Record<ColumnName, ValueCounts>;
-  private readonly opts: {
-    includeCharts: boolean;
-    usePreComputedValues?: boolean;
-  };
-
   constructor(
-    data: T[] | string,
-    fieldTypes: FieldTypes,
-    stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
-    binValues: Record<ColumnName, BinValues>,
-    valueCounts: Record<ColumnName, ValueCounts>,
-    opts: {
+    private readonly data: T[] | string,
+    private readonly fieldTypes: FieldTypes,
+    readonly stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
+    readonly binValues: Record<ColumnName, BinValues>,
+    readonly valueCounts: Record<ColumnName, ValueCounts>,
+    private readonly opts: {
       includeCharts: boolean;
       usePreComputedValues?: boolean;
     },
   ) {
-    this.data = data;
-    this.fieldTypes = fieldTypes;
-    this.stats = stats;
-    this.binValues = binValues;
-    this.valueCounts = valueCounts;
-    this.opts = opts;
-
     // Data may come in from a few different sources:
     // - A URL
     // - A CSV data URI (e.g. "data:text/csv;base64,...")
@@ -110,9 +93,9 @@ export class ColumnChartSpecModel<T> {
         const decoded = typedAtob(base64);
 
         if (decoded.startsWith(ARROW_MAGIC_NUMBER)) {
-          // @ts-expect-error vega-typings does not include arrow format
           this.dataSpec = {
             values: byteStringToBinary(decoded),
+            // @ts-expect-error vega-typings does not include arrow format
             format: { type: "arrow" },
           };
         } else {

package/src/components/data-table/column-summary/column-summary.tsx

@@ -1,6 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import React, { Suspense } from "react";
-import { useLocale } from "react-aria";
 import { createBatchedLoader } from "@/plugins/impl/vega/batched";
 import { useTheme } from "@/theme/useTheme";
 import { logNever } from "@/utils/assertNever";
@@ -30,8 +29,6 @@ const batchedLoader = createBatchedLoader();
 export const TableColumnSummary = <TData, TValue>({
   columnId,
 }: Props<TData, TValue>) => {
-  const { locale } = useLocale();
-
   const chartSpecModel = React.use(ColumnChartContext);
   const { theme } = useTheme();
   const { spec, type, stats } = chartSpecModel.getHeaderSummary(columnId);
@@ -68,7 +65,7 @@ export const TableColumnSummary = <TData, TValue>({
   ) => {
     return (
       <DatePopover date={date} type={type}>
-        {prettyDate(date, type, locale)}
+        {prettyDate(date, type)}
       </DatePopover>
     );
   };
@@ -87,7 +84,7 @@ export const TableColumnSummary = <TData, TValue>({
             <div className="flex flex-col whitespace-pre">
               <span>min: {renderDate(stats.min, type)}</span>
               <span>max: {renderDate(stats.max, type)}</span>
-              <span>unique: {prettyNumber(stats.unique, locale)}</span>
+              <span>unique: {prettyNumber(stats.unique)}</span>
             </div>
           );
         }
@@ -109,22 +106,16 @@ export const TableColumnSummary = <TData, TValue>({
               <span>
                 min:{" "}
                 {typeof stats.min === "number"
-                  ? prettyScientificNumber(stats.min, {
-                      shouldRound: true,
-                      locale,
-                    })
+                  ? prettyScientificNumber(stats.min, { shouldRound: true })
                   : stats.min}
               </span>
               <span>
                 max:{" "}
                 {typeof stats.max === "number"
-                  ? prettyScientificNumber(stats.max, {
-                      shouldRound: true,
-                      locale,
-                    })
+                  ? prettyScientificNumber(stats.max, { shouldRound: true })
                   : stats.max}
               </span>
-              <span>unique: {prettyNumber(stats.unique, locale)}</span>
+              <span>unique: {prettyNumber(stats.unique)}</span>
             </div>
           );
         }
@@ -136,8 +127,8 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>true: {prettyNumber(stats.true, locale)}</span>
-              <span>false: {prettyNumber(stats.false, locale)}</span>
+              <span>true: {prettyNumber(stats.true)}</span>
+              <span>false: {prettyNumber(stats.false)}</span>
             </div>
           );
         }
@@ -149,7 +140,7 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>unique: {prettyNumber(stats.unique, locale)}</span>
+              <span>unique: {prettyNumber(stats.unique)}</span>
             </div>
           );
         }
@@ -157,7 +148,7 @@ export const TableColumnSummary = <TData, TValue>({
       case "unknown":
         return (
           <div className="flex flex-col whitespace-pre">
-            <span>nulls: {prettyNumber(stats.nulls, locale)}</span>
+            <span>nulls: {prettyNumber(stats.nulls)}</span>
           </div>
         );
       default:

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

@@ -4,7 +4,6 @@
 import { PopoverClose } from "@radix-ui/react-popover";
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate } from "date-fns";
-import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
@@ -228,13 +227,13 @@ export function generateColumns<T>({
           isCellSelected,
         );
 
-        const renderedCell = renderCellValue({
+        const renderedCell = renderCellValue(
           column,
           renderValue,
           getValue,
           selectCell,
           cellStyles,
-        });
+        );
 
         // Row headers are bold
         if (rowHeadersSet.has(key)) {
@@ -404,25 +403,18 @@ function renderAny(value: unknown): string {
   }
 }
 
-function renderDate({
-  value,
-  dataType,
-  dtype,
-  format,
-  locale,
-}: {
-  value: Date;
-  dataType?: DataType;
-  dtype?: string;
-  format?: DateFormat | null;
-  locale: string;
-}): React.ReactNode {
+function renderDate(
+  value: Date,
+  dataType?: DataType,
+  dtype?: string,
+  format?: DateFormat | null,
+): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
 
   const exactValue = format
     ? formatDate(value, format)
-    : exactDateTime(value, timezone, locale);
+    : exactDateTime(value, timezone);
 
   return (
     <DatePopover date={value} type={type}>
@@ -431,19 +423,13 @@ function renderDate({
   );
 }
 
-export function renderCellValue<TData, TValue>({
-  column,
-  renderValue,
-  getValue,
-  selectCell,
-  cellStyles,
-}: {
-  column: Column<TData, TValue>;
-  renderValue: () => TValue | null;
-  getValue: () => TValue;
-  selectCell?: () => void;
-  cellStyles?: string;
-}) {
+export function renderCellValue<TData, TValue>(
+  column: Column<TData, TValue>,
+  renderValue: () => TValue | null,
+  getValue: () => TValue,
+  selectCell?: () => void,
+  cellStyles?: string,
+) {
   const value = getValue();
   const format = column.getColumnFormatting?.();
 
@@ -454,13 +440,7 @@ export function renderCellValue<TData, TValue>({
     try {
       const date = new Date(value);
       const format = getDateFormat(value);
-      return (
-        <WithLocale>
-          {(locale) =>
-            renderDate({ value: date, dataType, dtype, format, locale })
-          }
-        </WithLocale>
-      );
+      return renderDate(date, dataType, dtype, format);
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
     }
@@ -468,11 +448,7 @@ export function renderCellValue<TData, TValue>({
 
   if (value instanceof Date) {
     // e.g. 2010-10-07 17:15:00
-    return (
-      <WithLocale>
-        {(locale) => renderDate({ value, dataType, dtype, locale })}
-      </WithLocale>
-    );
+    return renderDate(value, dataType, dtype);
   }
 
   if (typeof value === "string") {