Filter bar

Narrowing a large set by several attributes, with what is applied visible without opening anything. Applied filters belong as removable chips, and the result count belongs beside them so an empty result has an explanation.

npx shadcn@latest add button popover command
npm i lucide-react

Tokens this needs: --card, --card-foreground, --muted-foreground, --border, --chart-1

────────────────────────────────────────────────────────────────────────
// FilterBar.tsx
────────────────────────────────────────────────────────────────────────

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.tsx
────────────────────────────────────────────────────────────────────────

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>
  );
}