@marimo-team/frontend 0.23.7-dev5 → 0.23.7-dev51

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">