@marimo-team/frontend 0.16.0 → 0.16.2

package/src/components/data-table/__tests__/data-table.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -57,4 +57,42 @@ describe("DataTable", () => {
     // Verify the rowSelection prop is maintained
     expect(commonProps.rowSelection).toEqual(initialRowSelection);
   });
+
+  it("applies hoverTemplate to the row title using row values", () => {
+    interface RowData {
+      id: number;
+      first: string;
+      last: string;
+    }
+
+    const testData: RowData[] = [
+      { id: 1, first: "Michael", last: "Scott" },
+      { id: 2, first: "Jim", last: "Halpert" },
+    ];
+
+    const columns: Array<ColumnDef<RowData>> = [
+      { accessorKey: "first", header: "First" },
+      { accessorKey: "last", header: "Last" },
+    ];
+
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={testData}
+          columns={columns}
+          selection={null}
+          totalRows={2}
+          totalColumns={2}
+          pagination={false}
+          hoverTemplate={"{{first}} {{last}}"}
+        />
+      </TooltipProvider>,
+    );
+
+    // Grab all rows and assert title attribute computed from template
+    const rows = screen.getAllByRole("row");
+    // The first row is header; subsequent rows correspond to data
+    expect(rows[1]).toHaveAttribute("title", "Michael Scott");
+    expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
+  });
 });

package/src/components/data-table/cell-hover-template/feature.ts

@@ -0,0 +1,14 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+"use no memo";
+
+import type { InitialTableState, TableFeature } from "@tanstack/react-table";
+import type { CellHoverTemplateTableState } from "./types";
+
+export const CellHoverTemplateFeature: TableFeature = {
+  getInitialState: (state?: InitialTableState): CellHoverTemplateTableState => {
+    return {
+      ...state,
+      cellHoverTemplate: null,
+    };
+  },
+};

package/src/components/data-table/cell-hover-template/types.ts

@@ -0,0 +1,11 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+
+export interface CellHoverTemplateTableState {
+  cellHoverTemplate: string | null;
+}
+
+// Use declaration merging to add our new feature APIs
+declare module "@tanstack/react-table" {
+  interface TableState extends CellHoverTemplateTableState {}
+}

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

@@ -342,7 +342,7 @@ interface SliderFieldProps {
   fieldName: FieldName;
   label: string;
   className?: string;
-  value: number;
+  defaultValue: number;
   start: number;
   stop: number;
   step?: number;
@@ -351,53 +351,57 @@ interface SliderFieldProps {
 export const SliderField = ({
   fieldName,
   label,
-  value,
+  defaultValue,
   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 }) => (
-        <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>
-      )}
+      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>
+        );
+      }}
     />
   );
 };

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

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

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

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

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

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

@@ -28,6 +28,7 @@ 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,6 +5,7 @@ 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,
@@ -76,6 +77,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   calculateTopKRows,
 }: DataTableColumnHeaderProps<TData, TValue>) => {
   const [isFilterValueOpen, setIsFilterValueOpen] = useState(false);
+  const { locale } = useLocale();
 
   // No header
   if (!header) {
@@ -119,7 +121,7 @@ export const DataTableColumnHeader = <TData, TValue>({
           {renderCopyColumn(column)}
           {renderColumnPinning(column)}
           {renderColumnWrapping(column)}
-          {renderFormatOptions(column)}
+          {renderFormatOptions(column, locale)}
           <DropdownMenuSeparator />
           {renderMenuItemFilter(column)}
           {renderFilterByValues(column, setIsFilterValueOpen)}

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

@@ -64,17 +64,34 @@ 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(
-    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: {
+    data: T[] | string,
+    fieldTypes: FieldTypes,
+    stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
+    binValues: Record<ColumnName, BinValues>,
+    valueCounts: Record<ColumnName, ValueCounts>,
+    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,...")
@@ -93,9 +110,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,5 +1,6 @@
 /* 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";
@@ -29,6 +30,8 @@ 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);
@@ -65,7 +68,7 @@ export const TableColumnSummary = <TData, TValue>({
   ) => {
     return (
       <DatePopover date={date} type={type}>
-        {prettyDate(date, type)}
+        {prettyDate(date, type, locale)}
       </DatePopover>
     );
   };
@@ -84,7 +87,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)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -106,16 +109,22 @@ export const TableColumnSummary = <TData, TValue>({
               <span>
                 min:{" "}
                 {typeof stats.min === "number"
-                  ? prettyScientificNumber(stats.min, { shouldRound: true })
+                  ? prettyScientificNumber(stats.min, {
+                      shouldRound: true,
+                      locale,
+                    })
                   : stats.min}
               </span>
               <span>
                 max:{" "}
                 {typeof stats.max === "number"
-                  ? prettyScientificNumber(stats.max, { shouldRound: true })
+                  ? prettyScientificNumber(stats.max, {
+                      shouldRound: true,
+                      locale,
+                    })
                   : stats.max}
               </span>
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -127,8 +136,8 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>true: {prettyNumber(stats.true)}</span>
-              <span>false: {prettyNumber(stats.false)}</span>
+              <span>true: {prettyNumber(stats.true, locale)}</span>
+              <span>false: {prettyNumber(stats.false, locale)}</span>
             </div>
           );
         }
@@ -140,7 +149,7 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -148,7 +157,7 @@ export const TableColumnSummary = <TData, TValue>({
       case "unknown":
         return (
           <div className="flex flex-col whitespace-pre">
-            <span>nulls: {prettyNumber(stats.nulls)}</span>
+            <span>nulls: {prettyNumber(stats.nulls, locale)}</span>
           </div>
         );
       default: