@marimo-team/frontend 0.23.4-dev0 → 0.23.4-dev1

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BjiE1T38.js"></script>
+    <script type="module" crossorigin src="./assets/index-BFivsT-R.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-D2MJg03u.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -133,7 +133,7 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-DhnxH9Rh.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-BUVn5HoR.js">
     <link rel="modulepreload" crossorigin href="./assets/main-B0OX4z33.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-CJlo_hG2.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-A-ljPpuj.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DzYV_VeY.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-CGShmG7L.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-afgh7PwB.js">
@@ -147,33 +147,33 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-CtfZXGno.js">
     <link rel="modulepreload" crossorigin href="./assets/input-DyPS_GiK.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-BBqcKmmk.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-BA7Demf0.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-d38hFEon.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-rafH3cg3.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-cDholnQq.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CG5QYXYk.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-D1A3cFC8.js">
     <link rel="modulepreload" crossorigin href="./assets/links-C-rLiK3d.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-B531RIUE.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DU1tawR-.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-B5qyZn5s.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-Dk_3y0H-.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-C67c9EwB.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-BT9obKLc.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-BKDU-4D5.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-C5AUgyZT.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DR6lqJGS.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-BCnGIjqn.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-Bsz477is.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-CZ5WmLPA.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BBD405a6.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-B9_RO5eX.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Bhir8k53.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-Cz8lDF-Y.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-BX3gXJxx.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-tbPEMBJg.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-Baz7rlo0.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-dS4Ne6pU.js">
     <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-0gZO1asr.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-WzovnJik.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-B4RvNAGm.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CeHY2KoQ.js">
-    <link rel="modulepreload" crossorigin href="./assets/command-DbT_zkRP.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CFrgiLqu.js">
+    <link rel="modulepreload" crossorigin href="./assets/command-CzIDL1VI.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-UExmgBsf.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-CZb6hI2x.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-mzsKQgiy.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-Iyng0xCz.js">
     <link rel="modulepreload" crossorigin href="./assets/table-23NNA1s9.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-CryCjoyY.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-CTBwdcdk.js">
@@ -189,28 +189,29 @@
     <link rel="modulepreload" crossorigin href="./assets/table-6NxtGaCm.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-pk06Lq82.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-CWm2KnSx.js">
+    <link rel="modulepreload" crossorigin href="./assets/trash-2-D280Xiwg.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-Bcm5njwd.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-DXnOS_Hk.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-BVAcY5xS.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-nqk474t8.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-D1dlJvD8.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-Cq8FVoTf.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-vertical-gxgNyR5G.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DHwG4Mac.js">
     <link rel="modulepreload" crossorigin href="./assets/tree-actions-oMCx6WNc.js">
-    <link rel="modulepreload" crossorigin href="./assets/components-BiBOcq1x.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-DzN2QumC.js">
+    <link rel="modulepreload" crossorigin href="./assets/components-FepcpFGL.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-_5uYiy74.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-BRopQwI3.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-BMB4_phA.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-CqBbGhrY.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CSNGDMAm.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-De9xD63_.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-smPWkHxB.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-G1JMtvxe.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-BT-KOYV5.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-BgB18UzY.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-Ccd8HM-7.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-B0nrQE3U.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-B3fuktN0.js">
     <link rel="modulepreload" crossorigin href="./assets/file-HTLbeC2b.js">
     <link rel="modulepreload" crossorigin href="./assets/image-DQHXdEQn.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-BNrh8MRG.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-DTNZv05h.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-DlgpDZMk.js">
     <link rel="modulepreload" crossorigin href="./assets/events-Qeh-bHlj.js">
     <link rel="modulepreload" crossorigin href="./assets/globals-xVhZei_S.js">
@@ -219,13 +220,12 @@
     <link rel="modulepreload" crossorigin href="./assets/memoize-Tp7rARFe.js">
     <link rel="modulepreload" crossorigin href="./assets/get-C-qh_et5.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-CxV9N1bc.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-DHlRrwyY.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-LyvUXW6A.js">
     <link rel="modulepreload" crossorigin href="./assets/label-DTR8T0AE.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-BXPC1-kb.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-Dd0InTQJ.js">
     <link rel="modulepreload" crossorigin href="./assets/radio-group-BtBoRbGH.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-C-n2VFP5.js">
-    <link rel="modulepreload" crossorigin href="./assets/trash-2-D280Xiwg.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-CPDlIjdV.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-Dr-_EXr8.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-CkNNAheg.js">
     <link rel="modulepreload" crossorigin href="./assets/field-B8kJgr2A.js">
     <link rel="modulepreload" crossorigin href="./assets/RSPContexts-BeHIgT4C.js">
@@ -246,7 +246,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-jmgGt1lS.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-BYLYJcAY.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-DH5UUBE4.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.4-dev0",
+  "version": "0.23.4-dev1",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -22,7 +22,10 @@ import React, { memo } from "react";
 import { useLocale } from "react-aria";
 
 import { Table } from "@/components/ui/table";
-import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
+import type {
+  CalculateTopKRows,
+  GetRowIds,
+} from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import {
   PANEL_TYPES,
@@ -89,6 +92,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   showFilters?: boolean;
   filters?: ColumnFiltersState;
   onFiltersChange?: OnChangeFn<ColumnFiltersState>;
+  calculateTopKRows?: CalculateTopKRows;
   reloading?: boolean;
   // Columns
   freezeColumnsLeft?: string[];
@@ -139,6 +143,7 @@ const DataTableInternal = <TData,>({
   showFilters = false,
   filters,
   onFiltersChange,
+  calculateTopKRows,
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
@@ -282,7 +287,11 @@ const DataTableInternal = <TData,>({
 
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
-      <FilterPills filters={filters} table={table} />
+      <FilterPills
+        filters={filters}
+        table={table}
+        calculateTopKRows={calculateTopKRows}
+      />
       <CellSelectionProvider>
         <div
           part="table-wrapper"

package/src/components/data-table/filter-by-values-picker.tsx

@@ -0,0 +1,238 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import type { Column } from "@tanstack/react-table";
+import { ChevronDownIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { ErrorBanner } from "@/plugins/impl/common/error-banner";
+import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
+import { Logger } from "@/utils/Logger";
+import { Sets } from "@/utils/sets";
+import { smartMatch } from "@/utils/smartMatch";
+import { Spinner } from "../icons/spinner";
+import { Button } from "../ui/button";
+import { Checkbox } from "../ui/checkbox";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { SentinelCell } from "./sentinel-cell";
+import { detectSentinel, stringifyUnknownValue } from "./utils";
+
+const TOP_K_ROWS = 30;
+
+interface Props<TData, TValue> {
+  column: Column<TData, TValue>;
+  calculateTopKRows?: CalculateTopKRows;
+  chosenValues: unknown[];
+  onChange: (values: unknown[]) => void;
+}
+
+export const FilterByValuesPicker = <TData, TValue>({
+  column,
+  calculateTopKRows,
+  chosenValues,
+  onChange,
+}: Props<TData, TValue>) => {
+  const [open, setOpen] = useState(false);
+
+  const chosenValuesSet = useMemo(() => new Set(chosenValues), [chosenValues]);
+
+  const selectedValuesStr = useMemo(() => {
+    if (chosenValuesSet.size === 0) {
+      return "Select values…";
+    }
+    const items = [...chosenValuesSet].map((v) =>
+      stringifyUnknownValue({ value: v }),
+    );
+    return `[${items.join(", ")}]`;
+  }, [chosenValuesSet]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild={true}>
+        <Button
+          variant="outline"
+          size="xs"
+          className="h-6 mb-1 w-full justify-between font-normal"
+        >
+          <span
+            className={cn(
+              "truncate",
+              chosenValuesSet.size === 0 && "text-muted-foreground",
+            )}
+          >
+            {selectedValuesStr}
+          </span>
+          <ChevronDownIcon className="h-4 w-4 opacity-50 shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0">
+        <PickerBody
+          column={column}
+          calculateTopKRows={calculateTopKRows}
+          chosenValues={chosenValuesSet}
+          onChange={onChange}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+interface PickerBodyProps<TData, TValue> {
+  column: Column<TData, TValue>;
+  calculateTopKRows?: CalculateTopKRows;
+  chosenValues: Set<unknown>;
+  onChange: (values: unknown[]) => void;
+}
+
+const PickerBody = <TData, TValue>({
+  column,
+  calculateTopKRows,
+  chosenValues,
+  onChange,
+}: PickerBodyProps<TData, TValue>) => {
+  const [query, setQuery] = useState<string>("");
+
+  const { data, isPending, error } = useAsyncData(async () => {
+    if (!calculateTopKRows) {
+      return null;
+    }
+    const res = await calculateTopKRows({ column: column.id, k: TOP_K_ROWS });
+    return res.data;
+  }, [calculateTopKRows, column.id]);
+
+  const filteredData = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+    try {
+      // try to do includes and also smart match for prefixes
+      return data.filter(([value, _count]) => {
+        if (value === undefined) {
+          return false;
+        }
+        const str = String(value);
+        return (
+          smartMatch(query, str) ||
+          str.toLowerCase().includes(query.toLowerCase())
+        );
+      });
+    } catch (error_) {
+      Logger.error("Error filtering data", error_);
+      return [];
+    }
+  }, [data, query]);
+
+  const handleToggle = (value: unknown) => {
+    onChange([...Sets.toggle(chosenValues, value)]);
+  };
+
+  const allVisibleChecked =
+    filteredData.length > 0 &&
+    filteredData.every(([value]) => chosenValues.has(value));
+
+  const selectAllState: boolean | "indeterminate" = allVisibleChecked
+    ? true
+    : chosenValues.size > 0
+      ? "indeterminate"
+      : false;
+
+  const handleToggleAll = () => {
+    if (!data) {
+      return;
+    }
+    const next = new Set(chosenValues);
+    if (allVisibleChecked) {
+      for (const [value] of filteredData) {
+        next.delete(value);
+      }
+    } else {
+      for (const [value] of filteredData) {
+        next.add(value);
+      }
+    }
+    onChange([...next]);
+  };
+
+  if (isPending) {
+    return <Spinner size="medium" className="mx-auto mt-12 mb-10" />;
+  }
+
+  if (error) {
+    return <ErrorBanner error={error} className="my-10 mx-4" />;
+  }
+
+  if (!data) {
+    return (
+      <div className="py-6 px-4 text-sm text-muted-foreground text-center">
+        No values available
+      </div>
+    );
+  }
+
+  return (
+    <Command className="text-sm outline-hidden" shouldFilter={false}>
+      <CommandInput
+        placeholder={`Search among the top ${data.length} values`}
+        autoFocus={true}
+        onValueChange={(value) => setQuery(value.trim())}
+      />
+      <CommandEmpty>No results found.</CommandEmpty>
+      <CommandList>
+        {filteredData.length > 0 && (
+          <CommandItem
+            value="__select-all__"
+            className="border-b rounded-none px-3"
+            onSelect={handleToggleAll}
+          >
+            <Checkbox
+              checked={selectAllState}
+              aria-label="Select all"
+              className="mr-3 h-3.5 w-3.5"
+            />
+            <span className="font-bold flex-1">{column.id}</span>
+            <span className="font-bold">Count</span>
+          </CommandItem>
+        )}
+        {filteredData.map(([value, count]) => {
+          const isSelected = chosenValues.has(value);
+          const valueString = stringifyUnknownValue({ value });
+          const sentinel = detectSentinel(
+            value,
+            column.columnDef.meta?.dataType,
+          );
+          return (
+            <CommandItem
+              key={valueString}
+              value={valueString}
+              className="not-last:border-b rounded-none px-3"
+              onSelect={() => handleToggle(value)}
+            >
+              <Checkbox
+                checked={isSelected}
+                aria-label="Select row"
+                className="mr-3 h-3.5 w-3.5"
+              />
+              <span className="flex-1 overflow-hidden max-h-20 line-clamp-3">
+                {sentinel ? <SentinelCell sentinel={sentinel} /> : valueString}
+              </span>
+              <span className="ml-3">{count}</span>
+            </CommandItem>
+          );
+        })}
+      </CommandList>
+      {data.length === TOP_K_ROWS && (
+        <span className="text-xs text-muted-foreground py-1.5 text-center">
+          Only showing the top {TOP_K_ROWS} values
+        </span>
+      )}
+    </Command>
+  );
+};