Filter bar

FilterBar.tsxA chip per applied filter, one click to remove, clear all, a count beside them, and a menu that offers only values the other filters leave.Copy

import { useState, type ReactNode } from "react";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

/** One narrowing: a dimension and the values allowed through. */
export type Filter = { key: string; values: string[] };
export type Row = Record<string, string>;

/** "1 and 2", "checkout", "a, b and c". A chip says the values, never a count. */
const list = (v: string[]) => (v.length < 3 ? v.join(" and ") : `${v.slice(0, -1).join(", ")} and ${v[v.length - 1]}`);

const passes = (row: Row, filters: Filter[]) => filters.every((f) => f.values.includes(row[f.key]));

/**
 * The state is the bar; the content is a consequence. Every applied filter is
 * its own chip, removal is one click, and the offered values come from the
 * rows the other filters leave, so the viewer cannot build an empty result
 * from the menu. The count sits beside the chips, and an empty one says which
 * chip did it.
 */
export function FilterBar({ rows, keys, filters, onFiltersChange, noun = "rows", children }: {
  rows: Row[];
  /** The dimensions a viewer may filter on, in menu order. */
  keys: string[];
  filters: Filter[];
  onFiltersChange: (filters: Filter[]) => void;
  noun?: string;
  /** Renders the rows that pass. */
  children: (rows: Row[]) => ReactNode;
}) {
  const [open, setOpen] = useState(false);
  const matches = rows.filter((r) => passes(r, filters));

  // Which chip emptied the page: the one whose removal brings rows back.
  const culprit = matches.length === 0
    ? filters.find((f) => rows.some((r) => passes(r, filters.filter((g) => g !== f))))
    : undefined;

  const remove = (key: string) => onFiltersChange(filters.filter((f) => f.key !== key));
  const add = (key: string, value: string) => {
    const cur = filters.find((f) => f.key === key);
    onFiltersChange(cur
      ? filters.map((f) => (f.key === key ? { key, values: [...f.values, value] } : f))
      : [...filters, { key, values: [value] }]);
    setOpen(false);
  };
  // Options for a key come from rows that pass every other filter.
  const options = (key: string) => {
    const others = filters.filter((f) => f.key !== key);
    const chosen = filters.find((f) => f.key === key)?.values ?? [];
    return [...new Set(rows.filter((r) => passes(r, others)).map((r) => r[key]))].filter((v) => !chosen.includes(v)).sort();
  };

  return (
    <div className="rounded-lg border bg-card">
      <div className="flex flex-wrap items-center gap-2 border-b p-3">
        {filters.map((f) => (
          <span key={f.key} className="inline-flex items-center gap-1.5 rounded-md border border-chart-1 bg-chart-1/10 py-0.5 pl-2.5 pr-1 text-[11px] text-card-foreground">
            {f.key}: {list(f.values)}
            <Button variant="ghost" size="sm" className="h-5 w-5 p-0 text-chart-1" onClick={() => remove(f.key)} aria-label={`remove ${f.key} filter`}>✕</Button>
          </span>
        ))}
        {filters.length > 0 && (
          <Button variant="link" size="sm" className="h-auto p-0 text-[11px] text-muted-foreground underline underline-offset-2" onClick={() => onFiltersChange([])}>clear all</Button>
        )}
        <Popover open={open} onOpenChange={setOpen} modal={false}>
          <PopoverTrigger asChild>
            <Button variant="outline" size="sm" className="h-6 gap-1 px-2 text-[11px]"><Plus className="size-3" aria-hidden /> filter</Button>
          </PopoverTrigger>
          <PopoverContent align="start" className="w-56 p-0">
            <Command>
              <CommandInput placeholder="Narrow by…" className="h-8 text-xs" />
              <CommandList>
                <CommandEmpty>Nothing left to narrow by.</CommandEmpty>
                {keys.map((key) => (
                  <CommandGroup key={key} heading={key}>
                    {options(key).map((v) => (
                      <CommandItem key={v} value={`${key} ${v}`} onSelect={() => add(key, v)} className="text-xs">{v}</CommandItem>
                    ))}
                  </CommandGroup>
                ))}
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
        <span className="ml-auto text-[11px] tabular-nums text-muted-foreground" aria-live="polite">
          {matches.length.toLocaleString("en-US")} of {rows.length.toLocaleString("en-US")} {noun}
        </span>
      </div>
      {culprit ? (
        <p className="p-3 text-xs text-muted-foreground">
          Nothing matches. Removing <span className="text-card-foreground">{culprit.key}: {list(culprit.values)}</span> would bring {noun} back.
        </p>
      ) : children(matches)}
    </div>
  );
}

demo.tsxHow it is called: the rows, the filterable keys, the applied filters in state, and a render function for what passes.Copy

import { useState } from "react";
import { FilterBar, type Filter, type Row } from "./FilterBar";

/** Alerts from the last hour. Three filters applied, four rows left. */
const ALERTS: Row[] = [
  { at: "14:52", service: "checkout", env: "prod", sev: "1", title: "p95 latency above 800 ms for 5 min" },
  { at: "14:47", service: "checkout", env: "prod", sev: "2", title: "Card auth error rate 3.1% (threshold 2%)" },
  { at: "14:41", service: "checkout", env: "prod", sev: "2", title: "Queue depth 4,200 and rising" },
  { at: "14:30", service: "checkout", env: "prod", sev: "1", title: "Deploy 4a91c: canary failing health check" },
  { at: "14:28", service: "checkout", env: "prod", sev: "3", title: "Cache hit ratio below 90%" },
  { at: "14:22", service: "checkout", env: "staging", sev: "1", title: "Pod restarting in a loop" },
  { at: "14:15", service: "search", env: "prod", sev: "2", title: "Index lag 90 s" },
  { at: "14:09", service: "cart", env: "prod", sev: "1", title: "Redis primary failover" },
  { at: "13:58", service: "search", env: "staging", sev: "3", title: "Slow query logged 12 times" },
];

export default function Demo() {
  const [filters, setFilters] = useState<Filter[]>([
    { key: "service", values: ["checkout"] },
    { key: "env", values: ["prod"] },
    { key: "sev", values: ["1", "2"] },
  ]);
  return (
    <FilterBar rows={ALERTS} keys={["service", "env", "sev"]} filters={filters} onFiltersChange={setFilters} noun="alerts">
      {(rows) => (
        <ul className="flex flex-col divide-y">
          {rows.map((r) => (
            <li key={r.at + r.title} className="flex items-center gap-4 px-3 py-2 text-xs">
              <span className="text-card-foreground">{r.title}</span>
              <span className="ml-auto shrink-0 tabular-nums text-muted-foreground">sev {r.sev} · {r.at}</span>
            </li>
          ))}
        </ul>
      )}
    </FilterBar>
  );
}