@marimo-team/islands 0.23.7-dev47 → 0.23.7-dev48

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

@@ -9,7 +9,7 @@ import {
   TextIcon,
   XIcon,
 } from "lucide-react";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useLocale } from "react-aria";
 import {
   DropdownMenu,
@@ -26,25 +26,31 @@ import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
-import { capitalize } from "@/utils/strings";
 import { Button } from "../ui/button";
 import { DraggablePopover } from "../ui/draggable-popover";
 import { Input } from "../ui/input";
+import { RegexInput } from "./regex-input";
 import { NumberField } from "../ui/number-field";
 import { PopoverClose } from "../ui/popover";
 import {
   Select,
   SelectContent,
   SelectItem,
-  SelectSeparator,
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
 import { FilterByValuesList } from "./filter-by-values-picker";
+import { OPERATOR_LABELS } from "./operator-labels";
 import {
   type ColumnFilterForType,
   type ColumnFilterValue,
   Filter,
+  NUMBER_COMPARISON_OPS,
+  type NumberComparisonOp,
+  NUMBER_OPS,
+  TEXT_OPS,
+  TEXT_SCALAR_OPS,
+  type TextScalarOp,
 } from "./filters";
 import {
   ClearFilterMenuItem,
@@ -148,7 +154,7 @@ export const DataTableColumnHeader = <TData, TValue>({
               {renderColumnWrapping(column)}
               {renderFormatOptions(column, locale)}
               <DropdownMenuSeparator />
-              {renderMenuItemFilter(column)}
+              {renderMenuItemFilter(column, calculateTopKRows)}
               {renderFilterByValues(column, setIsFilterValueOpen)}
               {hasFilter && <ClearFilterMenuItem column={column} />}
             </DropdownMenuContent>
@@ -211,6 +217,7 @@ const SortButton = <TData, TValue>({
 
 export function renderMenuItemFilter<TData, TValue>(
   column: Column<TData, TValue>,
+  calculateTopKRows?: CalculateTopKRows,
 ) {
   const canFilter = column.getCanFilter();
   if (!canFilter) {
@@ -248,7 +255,10 @@ export function renderMenuItemFilter<TData, TValue>(
         {filterMenuItem}
         <DropdownMenuPortal>
           <DropdownMenuSubContent>
-            <TextFilter column={column} />
+            <TextFilterMenu
+              column={column}
+              calculateTopKRows={calculateTopKRows}
+            />
           </DropdownMenuSubContent>
         </DropdownMenuPortal>
       </DropdownMenuSub>
@@ -261,7 +271,7 @@ export function renderMenuItemFilter<TData, TValue>(
         {filterMenuItem}
         <DropdownMenuPortal>
           <DropdownMenuSubContent>
-            <NumberRangeFilter column={column} />
+            <NumberFilterMenu column={column} />
           </DropdownMenuSubContent>
         </DropdownMenuPortal>
       </DropdownMenuSub>
@@ -292,58 +302,28 @@ export function renderMenuItemFilter<TData, TValue>(
   return null;
 }
 
-// Type-safe constants for null filter operators
-const NULL_FILTER_OPERATORS = {
-  is_null: "is_null",
-  is_not_null: "is_not_null",
-} satisfies Record<string, OperatorType>;
-
-const NullFilter = <TData, TValue>({
-  column,
-  defaultItem,
+const OperatorSelect = ({
   operator,
-  setOperator,
+  options,
+  onChange,
 }: {
-  column: Column<TData, TValue>;
-  defaultItem?: OperatorType | "between";
-  operator: OperatorType | "between";
-  setOperator: (operator: OperatorType) => void;
-}) => {
-  const handleValueChange = (value: OperatorType) => {
-    setOperator(value);
-    if (value === "is_null" || value === "is_not_null") {
-      column.setFilterValue(Filter.text({ operator: value }));
-    }
-  };
-
-  const isNullOrNotNull = operator === "is_null" || operator === "is_not_null";
-
-  return (
-    <Select
-      value={operator}
-      onValueChange={(value) => handleValueChange(value as OperatorType)}
-    >
-      <SelectTrigger
-        className={cn(
-          "border-border shadow-none! ring-0! w-full mb-0.5",
-          isNullOrNotNull && "mb-2",
-        )}
-      >
-        <SelectValue defaultValue={operator} />
-      </SelectTrigger>
-      <SelectContent>
-        {defaultItem && (
-          <SelectItem value={defaultItem}>{capitalize(defaultItem)}</SelectItem>
-        )}
-        <SelectSeparator />
-        <SelectItem value={NULL_FILTER_OPERATORS.is_null}>Is null</SelectItem>
-        <SelectItem value={NULL_FILTER_OPERATORS.is_not_null}>
-          Is not null
+  operator: OperatorType;
+  options: readonly OperatorType[];
+  onChange: (next: OperatorType) => void;
+}) => (
+  <Select value={operator} onValueChange={(v) => onChange(v as OperatorType)}>
+    <SelectTrigger className="border-border shadow-none! ring-0! w-full mb-0.5">
+      <SelectValue />
+    </SelectTrigger>
+    <SelectContent>
+      {options.map((op) => (
+        <SelectItem key={op} value={op}>
+          {OPERATOR_LABELS[op]}
         </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-};
+      ))}
+    </SelectContent>
+  </Select>
+);
 
 const BooleanFilter = <TData, TValue>({
   column,
@@ -389,7 +369,21 @@ const BooleanFilter = <TData, TValue>({
   );
 };
 
-const NumberRangeFilter = <TData, TValue>({
+const NUMBER_COMPARISON_SET: ReadonlySet<OperatorType> = new Set(
+  NUMBER_COMPARISON_OPS,
+);
+const isNumberComparisonOp = (op: OperatorType): op is NumberComparisonOp =>
+  NUMBER_COMPARISON_SET.has(op);
+
+type NumberComparisonFilter = Extract<
+  ColumnFilterForType<"number">,
+  { value: number }
+>;
+const isNumberComparisonFilter = (
+  filter: ColumnFilterForType<"number">,
+): filter is NumberComparisonFilter => isNumberComparisonOp(filter.operator);
+
+export const NumberFilterMenu = <TData, TValue>({
   column,
 }: {
   column: Column<TData, TValue>;
@@ -399,149 +393,208 @@ const NumberRangeFilter = <TData, TValue>({
     | undefined;
   const hasFilter = currentFilter !== undefined;
 
-  const [operator, setOperator] = useState<OperatorType | "between">(
+  const [operator, setOperator] = useState<OperatorType>(
     currentFilter?.operator ?? "between",
   );
-  const [min, setMin] = useState<number | undefined>(currentFilter?.min);
-  const [max, setMax] = useState<number | undefined>(currentFilter?.max);
-  const minRef = useRef<HTMLInputElement>(null);
-  const maxRef = useRef<HTMLInputElement>(null);
+  const [min, setMin] = useState<number | undefined>(
+    currentFilter?.operator === "between" ? currentFilter.min : undefined,
+  );
+  const [max, setMax] = useState<number | undefined>(
+    currentFilter?.operator === "between" ? currentFilter.max : undefined,
+  );
+  const [value, setValue] = useState<number | undefined>(
+    currentFilter !== undefined && isNumberComparisonFilter(currentFilter)
+      ? currentFilter.value
+      : undefined,
+  );
 
-  const handleApply = (opts: { min?: number; max?: number } = {}) => {
-    column.setFilterValue(
-      Filter.number({
-        min: opts.min ?? min,
-        max: opts.max ?? max,
-        operator: operator === "between" ? undefined : operator,
-      }),
-    );
+  const isComparison = isNumberComparisonOp(operator);
+  const isNullish = operator === "is_null" || operator === "is_not_null";
+
+  const applyDisabled =
+    (operator === "between" && (min === undefined || max === undefined)) ||
+    (isComparison && value === undefined);
+
+  const handleApply = () => {
+    if (isNullish) {
+      column.setFilterValue(Filter.number({ operator }));
+      return;
+    }
+    if (operator === "between" && min !== undefined && max !== undefined) {
+      column.setFilterValue(Filter.number({ operator: "between", min, max }));
+      return;
+    }
+    if (isComparison && value !== undefined) {
+      column.setFilterValue(Filter.number({ operator, value }));
+    }
+  };
+
+  const handleClear = () => {
+    setMin(undefined);
+    setMax(undefined);
+    setValue(undefined);
+    column.setFilterValue(undefined);
+  };
+
+  const handleOperatorChange = (next: OperatorType) => {
+    setOperator(next);
   };
 
   return (
     <div className="flex flex-col gap-1 pt-3 px-2">
-      <NullFilter
-        column={column}
-        defaultItem="between"
+      <OperatorSelect
         operator={operator}
-        setOperator={setOperator}
+        options={NUMBER_OPS}
+        onChange={handleOperatorChange}
       />
       {operator === "between" && (
-        <>
-          <div className="flex gap-1 items-center">
-            <NumberField
-              ref={minRef}
-              value={min}
-              onChange={(value) => setMin(value)}
-              aria-label="min"
-              placeholder="min"
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  handleApply({
-                    min: Number.parseFloat(e.currentTarget.value),
-                  });
-                }
-                if (e.key === "Tab") {
-                  maxRef.current?.focus();
-                }
-              }}
-              className="shadow-none! border-border hover:shadow-none!"
-            />
-            <MinusIcon className="h-5 w-5 text-muted-foreground" />
-            <NumberField
-              ref={maxRef}
-              value={max}
-              onChange={(value) => setMax(value)}
-              aria-label="max"
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  handleApply({
-                    max: Number.parseFloat(e.currentTarget.value),
-                  });
-                }
-                if (e.key === "Tab") {
-                  minRef.current?.focus();
-                }
-              }}
-              placeholder="max"
-              className="shadow-none! border-border hover:shadow-none!"
-            />
-          </div>
-          <FilterButtons
-            onApply={handleApply}
-            onClear={() => {
-              setMin(undefined);
-              setMax(undefined);
-              column.setFilterValue(undefined);
-            }}
-            clearButtonDisabled={!hasFilter}
+        <div className="flex gap-1 items-center">
+          <NumberField
+            value={min}
+            onChange={setMin}
+            aria-label="min"
+            placeholder="min"
+            className="shadow-none! border-border hover:shadow-none!"
+          />
+          <MinusIcon className="h-5 w-5 text-muted-foreground" />
+          <NumberField
+            value={max}
+            onChange={setMax}
+            aria-label="max"
+            placeholder="max"
+            className="shadow-none! border-border hover:shadow-none!"
           />
-        </>
+        </div>
+      )}
+      {isComparison && (
+        <NumberField
+          value={value}
+          onChange={setValue}
+          aria-label="value"
+          placeholder="value"
+          className="shadow-none! border-border hover:shadow-none!"
+        />
       )}
+      <FilterButtons
+        onApply={handleApply}
+        onClear={handleClear}
+        clearButtonDisabled={!hasFilter}
+        applyButtonDisabled={applyDisabled}
+      />
     </div>
   );
 };
 
-const TextFilter = <TData, TValue>({
+const TEXT_SCALAR_SET: ReadonlySet<OperatorType> = new Set(TEXT_SCALAR_OPS);
+const isTextScalarOp = (op: OperatorType): op is TextScalarOp =>
+  TEXT_SCALAR_SET.has(op);
+
+export const TextFilterMenu = <TData, TValue>({
   column,
+  calculateTopKRows,
 }: {
   column: Column<TData, TValue>;
+  calculateTopKRows?: CalculateTopKRows;
 }) => {
   const currentFilter = column.getFilterValue() as
     | ColumnFilterForType<"text">
     | undefined;
   const hasFilter = currentFilter !== undefined;
-  const [value, setValue] = useState<string>(currentFilter?.text ?? "");
+
   const [operator, setOperator] = useState<OperatorType>(
     currentFilter?.operator ?? "contains",
   );
+  const [text, setText] = useState<string>(
+    currentFilter && "text" in currentFilter ? currentFilter.text : "",
+  );
+  const [values, setValues] = useState<string[]>(
+    currentFilter && "values" in currentFilter ? [...currentFilter.values] : [],
+  );
+
+  const isScalar = isTextScalarOp(operator);
+  const isMulti = operator === "in" || operator === "not_in";
+  const isNullish =
+    operator === "is_null" ||
+    operator === "is_not_null" ||
+    operator === "is_empty";
+
+  const applyDisabled =
+    (isScalar && text === "") || (isMulti && values.length === 0);
 
   const handleApply = () => {
-    if (operator !== "contains") {
+    if (isNullish) {
       column.setFilterValue(Filter.text({ operator }));
       return;
     }
-
-    if (value === "") {
-      column.setFilterValue(undefined);
+    if (isScalar && text !== "") {
+      column.setFilterValue(Filter.text({ operator, text }));
       return;
     }
+    if (isMulti && values.length > 0) {
+      column.setFilterValue(Filter.text({ operator, values }));
+    }
+  };
+
+  const handleClear = () => {
+    setText("");
+    setValues([]);
+    column.setFilterValue(undefined);
+  };
 
-    column.setFilterValue(Filter.text({ text: value, operator }));
+  const handleOperatorChange = (next: OperatorType) => {
+    setOperator(next);
   };
 
   return (
     <div className="flex flex-col gap-1 pt-3 px-2">
-      <NullFilter
-        column={column}
-        defaultItem="contains"
+      <OperatorSelect
         operator={operator}
-        setOperator={setOperator}
+        options={TEXT_OPS}
+        onChange={handleOperatorChange}
       />
-      {operator === "contains" && (
-        <>
-          <Input
-            type="text"
-            icon={<TextIcon className="h-3 w-3 text-muted-foreground mb-1" />}
-            value={value ?? ""}
-            onChange={(e) => setValue(e.target.value)}
-            placeholder="Text..."
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                handleApply();
-              }
-            }}
-            className="shadow-none! border-border hover:shadow-none!"
-          />
-          <FilterButtons
-            onApply={handleApply}
-            onClear={() => {
-              setValue("");
-              column.setFilterValue(undefined);
-            }}
-            clearButtonDisabled={!hasFilter}
-          />
-        </>
+      {isScalar && operator === "regex" && (
+        <RegexInput
+          value={text}
+          onChange={setText}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") {
+              handleApply();
+            }
+          }}
+        />
       )}
+      {isScalar && operator !== "regex" && (
+        <Input
+          type="text"
+          icon={<TextIcon className="h-3 w-3 text-muted-foreground mb-1" />}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Text..."
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") {
+              handleApply();
+            }
+          }}
+          className="shadow-none! border-border hover:shadow-none!"
+        />
+      )}
+      {isMulti && (
+        <FilterByValuesList
+          column={column}
+          calculateTopKRows={calculateTopKRows}
+          chosenValues={new Set(values)}
+          onChange={(next) => setValues(next.map(String))}
+          creatable={true}
+        />
+      )}
+      <FilterButtons
+        onApply={handleApply}
+        onClear={handleClear}
+        clearButtonDisabled={!hasFilter}
+        applyButtonDisabled={applyDisabled}
+      />
     </div>
   );
 };

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

@@ -32,6 +32,7 @@ interface Props<TData, TValue> {
   calculateTopKRows?: CalculateTopKRows;
   chosenValues: unknown[];
   onChange: (values: unknown[]) => void;
+  creatable?: boolean;
 }
 
 export const FilterByValuesPicker = <TData, TValue>({
@@ -39,6 +40,7 @@ export const FilterByValuesPicker = <TData, TValue>({
   calculateTopKRows,
   chosenValues,
   onChange,
+  creatable = false,
 }: Props<TData, TValue>) => {
   const [open, setOpen] = useState(false);
 
@@ -58,6 +60,7 @@ export const FilterByValuesPicker = <TData, TValue>({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild={true}>
         <Button
+          type="button"
           variant="outline"
           size="xs"
           className="h-6 mb-1 w-full justify-between font-normal"
@@ -79,6 +82,7 @@ export const FilterByValuesPicker = <TData, TValue>({
           calculateTopKRows={calculateTopKRows}
           chosenValues={chosenValuesSet}
           onChange={onChange}
+          creatable={creatable}
         />
       </PopoverContent>
     </Popover>
@@ -90,6 +94,7 @@ interface FilterByValuesListProps<TData, TValue> {
   calculateTopKRows?: CalculateTopKRows;
   chosenValues: Set<unknown>;
   onChange: (values: unknown[]) => void;
+  creatable?: boolean;
 }
 
 /**
@@ -100,6 +105,7 @@ export const FilterByValuesList = <TData, TValue>({
   calculateTopKRows,
   chosenValues,
   onChange,
+  creatable = false,
 }: FilterByValuesListProps<TData, TValue>) => {
   const [query, setQuery] = useState<string>("");
 
@@ -133,13 +139,48 @@ export const FilterByValuesList = <TData, TValue>({
     }
   }, [data, query]);
 
+  // Surface chosen values that aren't in the top-K so they stay visible/uncheckable.
+  // Count is undefined for these rows; the cell renders an em-dash.
+  const mergedData = useMemo<Array<[unknown, number | undefined]>>(() => {
+    const seen = new Set(filteredData.map(([v]) => v));
+    const extras: Array<[unknown, number | undefined]> = [];
+    for (const chosen of chosenValues) {
+      if (seen.has(chosen)) {
+        continue;
+      }
+      const str = String(chosen);
+      const matches =
+        query.length === 0 ||
+        smartMatch(query, str) ||
+        str.toLowerCase().includes(query.toLowerCase());
+      if (matches) {
+        extras.push([chosen, undefined]);
+      }
+    }
+    return [...filteredData, ...extras];
+  }, [filteredData, chosenValues, query]);
+
   const handleToggle = (value: unknown) => {
     onChange([...Sets.toggle(chosenValues, value)]);
   };
 
+  const trimmedQuery = query.trim();
+  const canCreate =
+    creatable &&
+    trimmedQuery !== "" &&
+    !mergedData.some(([v]) => String(v) === trimmedQuery);
+
+  const commitCreate = () => {
+    if (!canCreate) {
+      return;
+    }
+    onChange([...chosenValues, trimmedQuery]);
+    setQuery("");
+  };
+
   const allVisibleChecked =
-    filteredData.length > 0 &&
-    filteredData.every(([value]) => chosenValues.has(value));
+    mergedData.length > 0 &&
+    mergedData.every(([value]) => chosenValues.has(value));
 
   const selectAllState: boolean | "indeterminate" = allVisibleChecked
     ? true
@@ -153,11 +194,11 @@ export const FilterByValuesList = <TData, TValue>({
     }
     const next = new Set(chosenValues);
     if (allVisibleChecked) {
-      for (const [value] of filteredData) {
+      for (const [value] of mergedData) {
         next.delete(value);
       }
     } else {
-      for (const [value] of filteredData) {
+      for (const [value] of mergedData) {
         next.add(value);
       }
     }
@@ -183,13 +224,24 @@ export const FilterByValuesList = <TData, TValue>({
   return (
     <Command className="text-sm outline-hidden" shouldFilter={false}>
       <CommandInput
-        placeholder={`Search among the top ${data.length} values`}
+        placeholder={
+          creatable
+            ? "Search or add a value…"
+            : `Search among the top ${data.length} values`
+        }
         autoFocus={true}
-        onValueChange={(value) => setQuery(value.trim())}
+        value={query}
+        onValueChange={setQuery}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && canCreate) {
+            e.preventDefault();
+            commitCreate();
+          }
+        }}
       />
       <CommandEmpty>No results found.</CommandEmpty>
       <CommandList>
-        {filteredData.length > 0 && (
+        {mergedData.length > 0 && (
           <CommandItem
             value="__select-all__"
             className="border-b rounded-none px-3"
@@ -204,7 +256,7 @@ export const FilterByValuesList = <TData, TValue>({
             <span className="font-bold">Count</span>
           </CommandItem>
         )}
-        {filteredData.map(([value, count]) => {
+        {mergedData.map(([value, count]) => {
           const isSelected = chosenValues.has(value);
           const valueString = stringifyUnknownValue({ value });
           const sentinel = detectSentinel(
@@ -226,10 +278,19 @@ export const FilterByValuesList = <TData, TValue>({
               <span className="flex-1 overflow-hidden max-h-20 line-clamp-3">
                 {sentinel ? <SentinelCell sentinel={sentinel} /> : valueString}
               </span>
-              <span className="ml-3">{count}</span>
+              <span className="ml-3">{count === undefined ? "—" : count}</span>
             </CommandItem>
           );
         })}
+        {canCreate && (
+          <CommandItem
+            value={`__create__:${trimmedQuery}`}
+            className="border-t rounded-none px-3 italic"
+            onSelect={commitCreate}
+          >
+            + Add "{trimmedQuery}"
+          </CommandItem>
+        )}
       </CommandList>
       {data.length === TOP_K_ROWS && (
         <span className="text-xs text-muted-foreground py-1.5 text-center">