@marimo-team/frontend 0.14.18-dev9 → 0.15.1-dev10

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

@@ -0,0 +1,298 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+"use no memo";
+
+// tanstack/table is not compatible with React compiler
+// https://github.com/TanStack/table/issues/5567
+
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  ColumnPinning,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type OnChangeFn,
+  type PaginationState,
+  type RowSelectionState,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import React, { memo } from "react";
+
+import { Table } from "@/components/ui/table";
+import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
+import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import { CellSelectionFeature } from "./cell-selection/feature";
+import type { CellSelectionState } from "./cell-selection/types";
+import { CellStylingFeature } from "./cell-styling/feature";
+import type { CellStyleState } from "./cell-styling/types";
+import { ColumnFormattingFeature } from "./column-formatting/feature";
+import { ColumnWrappingFeature } from "./column-wrapping/feature";
+import { CopyColumnFeature } from "./copy-column/feature";
+import type { DownloadActionProps } from "./download-actions";
+import { FilterPills } from "./filter-pills";
+import { FocusRowFeature } from "./focus-row/feature";
+import { useColumnPinning } from "./hooks/use-column-pinning";
+import { CellSelectionProvider } from "./range-focus/provider";
+import { DataTableBody, renderTableHeader } from "./renderers";
+import { SearchBar } from "./SearchBar";
+import { TableActions } from "./TableActions";
+import type { DataTableSelection, TooManyRows } from "./types";
+import { getStableRowId } from "./utils";
+
+interface DataTableProps<TData> extends Partial<DownloadActionProps> {
+  wrapperClassName?: string;
+  className?: string;
+  columns: Array<ColumnDef<TData>>;
+  data: TData[];
+  // Sorting
+  manualSorting?: boolean; // server-side sorting
+  sorting?: SortingState; // controlled sorting
+  setSorting?: OnChangeFn<SortingState>; // controlled sorting
+  // Pagination
+  totalRows: number | TooManyRows;
+  totalColumns: number;
+  pagination?: boolean;
+  manualPagination?: boolean; // server-side pagination
+  paginationState?: PaginationState; // controlled pagination
+  setPaginationState?: OnChangeFn<PaginationState>; // controlled pagination
+  // Selection
+  selection?: DataTableSelection;
+  rowSelection?: RowSelectionState;
+  cellSelection?: CellSelectionState;
+  cellStyling?: CellStyleState | null;
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+  onCellSelectionChange?: OnChangeFn<CellSelectionState>;
+  getRowIds?: GetRowIds;
+  // Search
+  enableSearch?: boolean;
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
+  showFilters?: boolean;
+  filters?: ColumnFiltersState;
+  onFiltersChange?: OnChangeFn<ColumnFiltersState>;
+  reloading?: boolean;
+  // Columns
+  freezeColumnsLeft?: string[];
+  freezeColumnsRight?: string[];
+  toggleDisplayHeader?: () => void;
+  // Row viewer panel
+  viewedRowIdx?: number;
+  onViewedRowChange?: OnChangeFn<number>;
+  // Others
+  showChartBuilder?: boolean;
+  showPageSizeSelector?: boolean;
+  showColumnExplorer?: boolean;
+  togglePanel?: (panelType: PanelType) => void;
+  isPanelOpen?: (panelType: PanelType) => boolean;
+}
+
+const DataTableInternal = <TData,>({
+  wrapperClassName,
+  className,
+  columns,
+  data,
+  selection,
+  totalColumns,
+  totalRows,
+  manualSorting = false,
+  sorting,
+  setSorting,
+  rowSelection,
+  cellSelection,
+  cellStyling,
+  paginationState,
+  setPaginationState,
+  downloadAs,
+  manualPagination = false,
+  pagination = false,
+  onRowSelectionChange,
+  onCellSelectionChange,
+  getRowIds,
+  enableSearch = false,
+  searchQuery,
+  onSearchQueryChange,
+  showFilters = false,
+  filters,
+  onFiltersChange,
+  reloading,
+  freezeColumnsLeft,
+  freezeColumnsRight,
+  toggleDisplayHeader,
+  showChartBuilder,
+  showPageSizeSelector,
+  showColumnExplorer,
+  togglePanel,
+  isPanelOpen,
+  viewedRowIdx,
+  onViewedRowChange,
+}: DataTableProps<TData>) => {
+  const [isSearchEnabled, setIsSearchEnabled] = React.useState<boolean>(false);
+  const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
+
+  const { columnPinning, setColumnPinning } = useColumnPinning(
+    freezeColumnsLeft,
+    freezeColumnsRight,
+  );
+
+  // Show loading bar only after a short delay to prevent flickering
+  React.useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+
+    if (reloading) {
+      timeoutId = setTimeout(() => {
+        setShowLoadingBar(true);
+      }, 300);
+    } else {
+      setShowLoadingBar(false);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [reloading]);
+
+  // Returns the row index, accounting for pagination
+  function getPaginatedRowIndex(_row: TData, idx: number): number {
+    if (!paginationState) {
+      return idx;
+    }
+
+    // Add offset if manualPagination is enabled
+    const offset = manualPagination
+      ? paginationState.pageIndex * paginationState.pageSize
+      : 0;
+    return idx + offset;
+  }
+
+  const table = useReactTable<TData>({
+    _features: [
+      ColumnPinning,
+      ColumnWrappingFeature,
+      ColumnFormattingFeature,
+      CellSelectionFeature,
+      CellStylingFeature,
+      CopyColumnFeature,
+      FocusRowFeature,
+    ],
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    // pagination
+    rowCount: totalRows === "too_many" ? undefined : totalRows,
+    ...(setPaginationState
+      ? {
+          onPaginationChange: setPaginationState,
+          getRowId: (row, idx) => {
+            // Prefer stable row ID if it exists
+            const stableRowId = getStableRowId(row);
+            if (stableRowId) {
+              return stableRowId;
+            }
+
+            const paginatedRowIndex = getPaginatedRowIndex(row, idx);
+            return String(paginatedRowIndex);
+          },
+        }
+      : {}),
+    manualPagination: manualPagination,
+    getPaginationRowModel: getPaginationRowModel(),
+    // sorting
+    ...(setSorting ? { onSortingChange: setSorting } : {}),
+    manualSorting: manualSorting,
+    getSortedRowModel: getSortedRowModel(),
+    // filtering
+    manualFiltering: true,
+    enableColumnFilters: showFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnFiltersChange: onFiltersChange,
+    // selection
+    onRowSelectionChange: onRowSelectionChange,
+    onCellSelectionChange: onCellSelectionChange,
+    enableCellSelection:
+      selection === "single-cell" || selection === "multi-cell",
+    enableMultiCellSelection: selection === "multi-cell",
+    // pinning
+    onColumnPinningChange: setColumnPinning,
+    // focus row
+    enableFocusRow: true,
+    onFocusRowChange: onViewedRowChange,
+    // state
+    state: {
+      ...(sorting ? { sorting } : {}),
+      columnFilters: filters,
+      ...// Controlled state
+      (paginationState
+        ? { pagination: paginationState }
+        : // Uncontrolled state
+          pagination && !paginationState
+          ? {}
+          : // No pagination, show all rows
+            { pagination: { pageIndex: 0, pageSize: data.length } }),
+      rowSelection,
+      cellSelection,
+      cellStyling,
+      columnPinning: columnPinning,
+    },
+  });
+
+  const rowViewerPanelOpen = isPanelOpen?.("row-viewer") ?? false;
+
+  return (
+    <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
+      <FilterPills filters={filters} table={table} />
+      <div className={cn(className || "rounded-md border overflow-hidden")}>
+        {onSearchQueryChange && enableSearch && (
+          <SearchBar
+            value={searchQuery || ""}
+            onHide={() => setIsSearchEnabled(false)}
+            handleSearch={onSearchQueryChange}
+            hidden={!isSearchEnabled}
+            reloading={reloading}
+          />
+        )}
+        <Table className="relative">
+          {showLoadingBar && (
+            <div className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
+          )}
+          {renderTableHeader(table)}
+          <CellSelectionProvider>
+            <DataTableBody
+              table={table}
+              columns={columns}
+              rowViewerPanelOpen={rowViewerPanelOpen}
+              getRowIndex={getPaginatedRowIndex}
+              viewedRowIdx={viewedRowIdx}
+            />
+          </CellSelectionProvider>
+        </Table>
+      </div>
+      <TableActions
+        enableSearch={enableSearch}
+        totalColumns={totalColumns}
+        onSearchQueryChange={onSearchQueryChange}
+        isSearchEnabled={isSearchEnabled}
+        setIsSearchEnabled={setIsSearchEnabled}
+        pagination={pagination}
+        selection={selection}
+        onRowSelectionChange={onRowSelectionChange}
+        table={table}
+        downloadAs={downloadAs}
+        getRowIds={getRowIds}
+        toggleDisplayHeader={toggleDisplayHeader}
+        showChartBuilder={showChartBuilder}
+        showPageSizeSelector={showPageSizeSelector}
+        showColumnExplorer={showColumnExplorer}
+        togglePanel={togglePanel}
+        isPanelOpen={isPanelOpen}
+        tableLoading={reloading}
+      />
+    </div>
+  );
+};
+
+export const DataTable = memo(DataTableInternal) as typeof DataTableInternal;

package/src/components/data-table/date-popover.tsx

@@ -0,0 +1,146 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import React from "react";
+import { Tooltip } from "@/components/ui/tooltip";
+
+interface DatePopoverProps {
+  date: Date | string | number | null | undefined;
+  type: "date" | "datetime";
+  children: React.ReactNode;
+}
+
+export const DatePopover: React.FC<DatePopoverProps> = ({
+  date,
+  type,
+  children,
+}) => {
+  // Return just the text if date is invalid
+  if (!date || Number.isNaN(new Date(date).getTime())) {
+    return children;
+  }
+
+  const dateObj = new Date(date);
+  const relativeTime = getRelativeTime(dateObj);
+
+  const content = (
+    <div className="min-w-[240px] p-1 text-sm">
+      <div className="text-muted-foreground mb-2">{relativeTime}</div>
+      <div className="space-y-1">
+        {type === "datetime" ? (
+          Object.entries(getTimezones(dateObj)).map(
+            ([timezone, formattedDate]) => (
+              <div
+                key={timezone}
+                className="grid grid-cols-[fit-content(40px)_1fr] gap-4 items-center justify-items-end"
+              >
+                <span className="bg-muted rounded-md py-1 px-2 w-fit ml-auto">
+                  {timezone}
+                </span>
+                <span>{formattedDate}</span>
+              </div>
+            ),
+          )
+        ) : (
+          <span>
+            {dateObj.toLocaleDateString("en-US", {
+              timeZone: "UTC",
+              dateStyle: "long",
+            })}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <Tooltip content={content} delayDuration={200}>
+      <span>{children}</span>
+    </Tooltip>
+  );
+};
+
+function getTimezones(date: Date) {
+  const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  const hasSubSeconds = date.getUTCMilliseconds() !== 0;
+  if (hasSubSeconds) {
+    return {
+      UTC: new Intl.DateTimeFormat("en-US", {
+        timeZone: "UTC",
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        fractionalSecondDigits: 3,
+      }).format(date),
+      [localTimezone]: new Intl.DateTimeFormat("en-US", {
+        timeZone: localTimezone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        fractionalSecondDigits: 3,
+      }).format(date),
+    };
+  }
+
+  return {
+    UTC: new Intl.DateTimeFormat("en-US", {
+      timeZone: "UTC",
+      dateStyle: "long",
+      timeStyle: "medium",
+    }).format(date),
+    [localTimezone]: new Intl.DateTimeFormat("en-US", {
+      timeZone: localTimezone,
+      dateStyle: "long",
+      timeStyle: "medium",
+    }).format(date),
+  };
+}
+
+/**
+ * Converts a date into a human-readable relative time string (e.g. "2 hours ago", "in 5 minutes")
+ * Uses Intl.RelativeTimeFormat for localized formatting
+ */
+function getRelativeTime(date: Date): string {
+  // Initialize relative time formatter with English locale and "auto" numeric style
+  // "auto" allows for strings like "yesterday" instead of "1 day ago"
+  const relativeTimeFormatter = new Intl.RelativeTimeFormat("en", {
+    numeric: "auto",
+  });
+
+  const currentTime = new Date();
+  // Get difference in seconds between now and the input date
+  const differenceInSeconds = (currentTime.getTime() - date.getTime()) / 1000;
+
+  // Define time units with their thresholds and conversion factors
+  // Format: [threshold before next unit, seconds in this unit, unit name]
+  const timeUnits: Array<[number, number, string]> = [
+    [60, 1, "second"], // Less than 60 seconds
+    [60, 60, "minute"], // Less than 60 minutes
+    [24, 3600, "hour"], // Less than 24 hours
+    [365, 86_400, "day"], // Less than 365 days
+    [Number.POSITIVE_INFINITY, 31_536_000, "year"], // Everything else in years
+  ];
+
+  // Find the appropriate unit to use
+  for (const [unitThreshold, secondsInUnit, unitName] of timeUnits) {
+    const valueInUnits = differenceInSeconds / secondsInUnit;
+
+    if (valueInUnits < unitThreshold) {
+      // Convert to fixed decimal and negate since RelativeTimeFormat expects
+      // negative values for past times and positive for future times
+      const roundedValue = -Number(valueInUnits.toFixed(1));
+      return relativeTimeFormatter.format(
+        roundedValue,
+        unitName as Intl.RelativeTimeFormatUnit,
+      );
+    }
+  }
+
+  // Should never reach here due to Infinity threshold, but provide fallback
+  return relativeTimeFormatter.format(0, "second");
+}

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

@@ -0,0 +1,186 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import {
+  BracesIcon,
+  BrickWallIcon,
+  ChevronDownIcon,
+  ClipboardListIcon,
+  TableIcon,
+} from "lucide-react";
+import React from "react";
+import { logNever } from "@/utils/assertNever";
+import { copyToClipboard } from "@/utils/copy";
+import { downloadByURL } from "@/utils/download";
+import { jsonToTSV } from "@/utils/json/json-parser";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { toast } from "../ui/use-toast";
+
+type DownloadFormat = "csv" | "json" | "parquet";
+
+export interface DownloadActionProps {
+  downloadAs: (req: { format: DownloadFormat }) => Promise<string>;
+}
+
+const options = [
+  {
+    label: "CSV",
+    format: "csv",
+    icon: TableIcon,
+  },
+  {
+    label: "JSON",
+    format: "json",
+    icon: BracesIcon,
+  },
+  {
+    label: "Parquet",
+    format: "parquet",
+    icon: BrickWallIcon,
+  },
+] as const;
+
+const clipboardOptions = [
+  {
+    label: "TSV",
+    format: "tsv",
+    description: "Best for Excel and Google Sheets",
+    icon: TableIcon,
+  },
+  {
+    label: "JSON",
+    format: "json",
+    description: "Raw JSON data",
+    icon: BracesIcon,
+  },
+  {
+    label: "CSV",
+    format: "csv",
+    description: "Comma-separated values",
+    icon: TableIcon,
+  },
+] as const;
+
+export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
+  const button = (
+    <Button data-testid="download-as-button" size="xs" variant="link">
+      Download <ChevronDownIcon className="w-3 h-3 ml-1" />
+    </Button>
+  );
+
+  const getDownloadUrl = (format: DownloadFormat) => {
+    return props.downloadAs({ format }).catch((error) => {
+      toast({
+        title: "Failed to download",
+        description: "message" in error ? error.message : String(error),
+      });
+      throw error;
+    });
+  };
+
+  const handleClipboardCopy = async (
+    format: (typeof clipboardOptions)[number]["format"],
+  ) => {
+    let text: string;
+
+    switch (format) {
+      case "tsv": {
+        const downloadUrl = await getDownloadUrl("json");
+        const json = await fetchJson(downloadUrl);
+        text = jsonToTSV(json);
+        break;
+      }
+      case "json": {
+        const downloadUrl = await getDownloadUrl("json");
+        const json = await fetchJson(downloadUrl);
+        text = JSON.stringify(json, null, 2);
+        break;
+      }
+      case "csv": {
+        const downloadUrl = await getDownloadUrl("csv");
+        const csv = await fetchText(downloadUrl);
+        text = csv;
+        break;
+      }
+      default:
+        logNever(format);
+        return;
+    }
+
+    await copyToClipboard(text);
+    toast({
+      title: "Copied to clipboard",
+    });
+  };
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild={true}>{button}</DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" className="no-print">
+        {options.map((option) => (
+          <DropdownMenuItem
+            key={option.label}
+            onSelect={async () => {
+              const downloadUrl = await getDownloadUrl(option.format);
+              const ext = option.format;
+              downloadByURL(downloadUrl, `download.${ext}`);
+            }}
+          >
+            <option.icon className="mo-dropdown-icon" />
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <ClipboardListIcon className="mo-dropdown-icon" />
+            Copy to clipboard
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            {clipboardOptions.map((option) => (
+              <DropdownMenuItem
+                key={option.label}
+                onSelect={() => handleClipboardCopy(option.format)}
+              >
+                <option.icon className="mo-dropdown-icon" />
+                <div className="flex flex-col">
+                  <span>{option.label}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {option.description}
+                  </span>
+                </div>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+function fetchJson(url: string): Promise<Array<Record<string, unknown>>> {
+  return fetch(url).then((res) => {
+    if (!res.ok) {
+      throw new Error(res.statusText);
+    }
+    return res.json();
+  });
+}
+
+function fetchText(url: string): Promise<string> {
+  return fetch(url).then((res) => {
+    if (!res.ok) {
+      throw new Error(res.statusText);
+    }
+    return res.text();
+  });
+}