@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/flow/provenance/NumberTrace.tsx

@@ -0,0 +1,208 @@
+// NumberTrace ("where did this number come from?"): a manuscript passage
+// whose numbers can be followed back to the records they came from. Each
+// traced number is a button; the selected one opens a panel beside the text
+// with the number, what it counts, and the numbered chain sentence → run →
+// edition → records → assertions, each link marked as holding or pending.
+
+import { useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Check, Hourglass, RotateCcw, Share2 } from 'lucide-react'
+import { Button } from '../../index'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import type { NumberTraceStep, TracedNumber, TracedPassage } from './proofTypes'
+
+export interface NumberTraceLabels {
+  passage: string
+  number: string
+  panel: string
+  chain: string
+  close: string
+  open: string
+  status: Record<NumberTraceStep['status'], string>
+  kinds: Record<string, string>
+  selected: string
+  openInGraph: string
+  rerun: string
+}
+
+export const numberTraceLabels = defineLabels<NumberTraceLabels>('NumberTrace', {
+  en: {
+    passage: 'Manuscript passage',
+    number: 'number {value}, show its trace',
+    panel: 'Where {value} comes from',
+    chain: 'Chain from the sentence to the assertions',
+    close: 'Close the trace',
+    open: 'Open {title}',
+    selected: 'Selected number',
+    openInGraph: 'Open in the graph',
+    rerun: 'Run again',
+    status: { ok: 'holds', pending: 'pending' },
+    kinds: { query: 'query', retrieval: 'retrieval', source: 'source', assertion: 'assertion', record: 'record', verification: 'verification', analysis: 'run', edition: 'edition', manuscript: 'sentence' },
+  },
+  'pt-BR': {
+    passage: 'Trecho do manuscrito',
+    number: 'número {value}, mostrar a origem',
+    panel: 'De onde vem {value}',
+    chain: 'Cadeia da frase até as afirmações',
+    close: 'Fechar a origem',
+    open: 'Abrir {title}',
+    selected: 'Número selecionado',
+    openInGraph: 'Abrir no grafo',
+    rerun: 'Reexecutar',
+    status: { ok: 'confere', pending: 'pendente' },
+    kinds: { query: 'busca', retrieval: 'leitura', source: 'fonte', assertion: 'afirmação', record: 'registro', verification: 'verificação', analysis: 'execução', edition: 'edição', manuscript: 'frase' },
+  },
+  es: {
+    passage: 'Fragmento del manuscrito',
+    number: 'número {value}, mostrar su origen',
+    panel: 'De dónde viene {value}',
+    chain: 'Cadena de la frase a las afirmaciones',
+    close: 'Cerrar el origen',
+    open: 'Abrir {title}',
+    selected: 'Número seleccionado',
+    openInGraph: 'Abrir en el grafo',
+    rerun: 'Ejecutar de nuevo',
+    status: { ok: 'coincide', pending: 'pendiente' },
+    kinds: { query: 'búsqueda', retrieval: 'lectura', source: 'fuente', assertion: 'afirmación', record: 'registro', verification: 'verificación', analysis: 'ejecución', edition: 'edición', manuscript: 'frase' },
+  },
+})
+
+export const defaultNumberTraceLabels = numberTraceLabels.bundles.en
+
+export interface NumberTraceProps {
+  passage: TracedPassage
+  /** Where the passage is (file, section), in mono above the text. */
+  source?: string
+  /** Text after the passage (the next paragraph, muted). */
+  after?: ReactNode
+  /** Number whose trace is open at first. */
+  defaultOpenId?: string
+  /** Makes each step of the chain a link-like button (for example to focus it in the graph). */
+  onOpenStep?: (step: NumberTraceStep) => void
+  /** "Open in the graph" for the selected number. */
+  onOpenInGraph?: (n: TracedNumber) => void
+  /** "Run again" for the selected number. */
+  onRerun?: (n: TracedNumber) => void
+  labels?: Partial<NumberTraceLabels>
+  className?: string
+}
+
+const STATUS_ICON = { ok: Check, pending: Hourglass } as const
+
+export function NumberTrace({ passage, source, after, defaultOpenId, onOpenStep, onOpenInGraph, onRerun, labels, className }: NumberTraceProps) {
+  const l = useLabels(numberTraceLabels, labels)
+  const { locale } = useFlowLocale()
+  const [open, setOpen] = useState<TracedNumber | null>(() => (defaultOpenId ? (passage.find((p): p is TracedNumber => typeof p !== 'string' && p.id === defaultOpenId) ?? null) : null))
+  const opener = useRef<HTMLButtonElement | null>(null)
+  const headingRef = useRef<HTMLHeadingElement>(null)
+  const num = (n: number) => new Intl.NumberFormat(locale).format(n)
+
+  const close = () => {
+    setOpen(null)
+    requestAnimationFrame(() => opener.current?.focus())
+  }
+  const onPanelKey = (e: KeyboardEvent<HTMLElement>) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      e.stopPropagation()
+      close()
+    }
+  }
+
+  return (
+    <div className={['ty-numtrace', className].filter(Boolean).join(' ')} data-open={open ? 'true' : undefined} role="group" aria-label={l.passage}>
+      <article className="ty-numtrace__article">
+        {source ? (
+          <p className="ty-numtrace__source" dir="ltr">
+            {source}
+          </p>
+        ) : null}
+        <p className="ty-numtrace__text" dir="auto">
+          {passage.map((part, i) =>
+            typeof part === 'string' ? (
+              <span key={i}>{part}</span>
+            ) : (
+              <button
+                key={part.id}
+                type="button"
+                className="ty-numtrace__number"
+                aria-label={fill(l.number, { value: part.text }, locale)}
+                aria-expanded={open?.id === part.id}
+                data-active={open?.id === part.id || undefined}
+                onClick={(e) => {
+                  opener.current = e.currentTarget
+                  setOpen(part)
+                  requestAnimationFrame(() => headingRef.current?.focus())
+                }}
+              >
+                {part.text}
+              </button>
+            ),
+          )}
+        </p>
+        {after ? <div className="ty-numtrace__after">{after}</div> : null}
+      </article>
+      {open ? (
+        <section className="ty-numtrace__panel" role="region" aria-labelledby="ty-numtrace-heading" onKeyDown={onPanelKey}>
+          <h3 id="ty-numtrace-heading" ref={headingRef} tabIndex={-1} className="ty-numtrace__eyebrow">
+            <span aria-hidden="true">{l.selected}</span>
+            <span className="ty-visually-hidden">{fill(l.panel, { value: open.text }, locale)}</span>
+          </h3>
+          <p className="ty-numtrace__value" aria-hidden="true">
+            {open.text}
+          </p>
+          {open.caption ? <p className="ty-numtrace__caption">{open.caption}</p> : null}
+          <ol className="ty-numtrace__chain" aria-label={l.chain}>
+            {open.chain.map((step, i) => {
+              const Icon = STATUS_ICON[step.status]
+              const body = (
+                <>
+                  <span className="ty-visually-hidden">{l.kinds[step.kind] ?? step.kind}: </span>
+                  <span className="ty-numtrace__step-title" dir="auto">
+                    {step.title}
+                  </span>
+                  {step.meta ? (
+                    <code className="ty-numtrace__meta" dir="ltr">
+                      {step.meta}
+                    </code>
+                  ) : null}
+                </>
+              )
+              return (
+                <li key={step.id} className="ty-numtrace__step" data-status={step.status}>
+                  <span className="ty-numtrace__index" aria-hidden="true">
+                    {num(i + 1)}
+                  </span>
+                  {onOpenStep ? (
+                    <button type="button" className="ty-numtrace__open" aria-label={fill(l.open, { title: step.title }, locale)} onClick={() => onOpenStep(step)}>
+                      {body}
+                    </button>
+                  ) : (
+                    <span className="ty-numtrace__body">{body}</span>
+                  )}
+                  <span className="ty-numtrace__status">
+                    <Icon aria-hidden="true" focusable="false" />
+                    <span className="ty-visually-hidden">{l.status[step.status]}</span>
+                  </span>
+                </li>
+              )
+            })}
+          </ol>
+          {onOpenInGraph || onRerun ? (
+            <div className="ty-numtrace__actions">
+              {onOpenInGraph ? (
+                <Button variant="secondary" leadingIcon={<Share2 />} onPress={() => onOpenInGraph(open)}>
+                  {l.openInGraph}
+                </Button>
+              ) : null}
+              {onRerun ? (
+                <Button variant="quiet" leadingIcon={<RotateCcw />} onPress={() => onRerun(open)}>
+                  {l.rerun}
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+        </section>
+      ) : null}
+    </div>
+  )
+}

package/src/flow/provenance/ProvenanceCertificate.tsx

@@ -0,0 +1,263 @@
+// ProvenanceCertificate ("Certificado"): the obligation tree a deterministic
+// verifier checked for one claim, with the verdict and the facts needed to
+// reproduce it (verifier version, run time, input edition, certificate hash).
+
+import { useMemo } from 'react'
+import { Button as AriaButton, Tree, TreeItem, TreeItemContent, type Key } from 'react-aria-components'
+import { Check, ChevronRight, CircleCheck, CircleX, FileDown, Hourglass, ShieldCheck } from 'lucide-react'
+import { Button } from '../../index'
+import { ProofPill } from './ProvenanceNode'
+import { defineLabels, fill, useFlowLocale, useLabels } from '../internal/labels'
+import type { ObligationStatus, ProofCertificate, ProofObligation } from './proofTypes'
+
+export interface ProvenanceCertificateLabels {
+  title: string
+  tree: string
+  facts: string
+  verdict: string
+  verifier: string
+  ranAt: string
+  inputEdition: string
+  hash: string
+  rerun: string
+  rerunning: string
+  download: string
+  deterministic: string
+  empty: string
+  obligation: string
+  status: Record<ObligationStatus, string>
+  verdicts: Record<'proved' | 'pending' | 'refuted', string>
+  obligationsTitle: string
+  /** Verdict line beside the pill: how many obligations are still open. */
+  openCount: string
+  allHold: string
+}
+
+export const provenanceCertificateLabels = defineLabels<ProvenanceCertificateLabels>('ProvenanceCertificate', {
+  en: {
+    title: 'Certificate',
+    tree: 'Proof obligations of the claim',
+    facts: 'Certificate details',
+    verdict: 'Verdict',
+    verifier: 'Verifier',
+    ranAt: 'Run at',
+    inputEdition: 'Input edition',
+    hash: 'Certificate hash',
+    rerun: 'Run again',
+    rerunning: 'Running',
+    download: 'Download certificate',
+    deterministic: 'The verifier is deterministic: the same edition and rules always give the same certificate. It uses no language model.',
+    empty: 'No certificate for this item yet.',
+    obligation: '{label}, {status}',
+    status: { ok: 'holds', pending: 'pending', failed: 'fails' },
+    verdicts: { proved: 'proved', pending: 'pending', refuted: 'refuted' },
+    obligationsTitle: 'Proof obligations',
+    openCount: '{pending, plural, =0 {} one {# obligation pending} other {# obligations pending}}{failed, plural, =0 {} one { · # fails} other { · # fail}}',
+    allHold: 'every obligation holds',
+  },
+  'pt-BR': {
+    title: 'Certificado',
+    tree: 'Obrigações da prova da afirmação',
+    facts: 'Dados do certificado',
+    verdict: 'Veredito',
+    verifier: 'Verificador',
+    ranAt: 'Rodou em',
+    inputEdition: 'Edição de entrada',
+    hash: 'Hash do certificado',
+    rerun: 'Rodar de novo',
+    rerunning: 'Rodando',
+    download: 'Baixar certificado',
+    deterministic: 'O verificador é determinístico: a mesma edição e as mesmas regras dão sempre o mesmo certificado. Ele não usa modelo de linguagem.',
+    empty: 'Ainda não há certificado para este item.',
+    obligation: '{label}, {status}',
+    status: { ok: 'cumprida', pending: 'pendente', failed: 'falhou' },
+    verdicts: { proved: 'provada', pending: 'pendente', refuted: 'refutada' },
+    obligationsTitle: 'Obrigações da prova',
+    openCount: '{pending, plural, =0 {} one {# obrigação pendente} other {# obrigações pendentes}}{failed, plural, =0 {} one { · # falhou} other { · # falharam}}',
+    allHold: 'todas as obrigações cumpridas',
+  },
+  es: {
+    title: 'Certificado',
+    tree: 'Obligaciones de prueba de la afirmación',
+    facts: 'Datos del certificado',
+    verdict: 'Veredicto',
+    verifier: 'Verificador',
+    ranAt: 'Ejecutado el',
+    inputEdition: 'Edición de entrada',
+    hash: 'Hash del certificado',
+    rerun: 'Ejecutar de nuevo',
+    rerunning: 'Ejecutando',
+    download: 'Descargar certificado',
+    deterministic: 'El verificador es determinista: la misma edición y las mismas reglas dan siempre el mismo certificado. No usa ningún modelo de lenguaje.',
+    empty: 'Todavía no hay certificado para este elemento.',
+    obligation: '{label}, {status}',
+    status: { ok: 'cumplida', pending: 'pendiente', failed: 'falla' },
+    verdicts: { proved: 'probada', pending: 'pendiente', refuted: 'refutada' },
+    obligationsTitle: 'Obligaciones de prueba',
+    openCount: '{pending, plural, =0 {} one {# obligación pendiente} other {# obligaciones pendientes}}{failed, plural, =0 {} one { · # falla} other { · # fallan}}',
+    allHold: 'todas las obligaciones se cumplen',
+  },
+})
+
+export const defaultProvenanceCertificateLabels = provenanceCertificateLabels.bundles.en
+
+export interface ProvenanceCertificateProps {
+  certificate: ProofCertificate | null
+  onRerun?: () => void
+  onDownload?: () => void
+  busy?: boolean
+  labels?: Partial<ProvenanceCertificateLabels>
+  className?: string
+}
+
+const STATUS_ICON = { ok: CircleCheck, pending: Hourglass, failed: CircleX } as const
+
+function allKeys(list: readonly ProofObligation[], prefix: string): string[] {
+  return list.flatMap((o) => [`${prefix}/${o.id}`, ...allKeys(o.children ?? [], `${prefix}/${o.id}`)])
+}
+
+export function ProvenanceCertificate({ certificate, onRerun, onDownload, busy = false, labels, className }: ProvenanceCertificateProps) {
+  const l = useLabels(provenanceCertificateLabels, labels)
+  const { locale } = useFlowLocale()
+  const expanded = useMemo<Key[]>(() => (certificate ? ['root', ...allKeys(certificate.obligations, 'root')] : []), [certificate])
+
+  if (!certificate) {
+    return (
+      <section className={['ty-cert', className].filter(Boolean).join(' ')} aria-label={l.title}>
+        <p className="ty-cert__empty">
+          <ShieldCheck aria-hidden="true" focusable="false" />
+          <span>{l.empty}</span>
+        </p>
+      </section>
+    )
+  }
+
+  const open = countOpen(certificate.obligations)
+  const ranAt = Number.isFinite(Date.parse(certificate.ranAt)) ? new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'medium' }).format(Date.parse(certificate.ranAt)) : certificate.ranAt
+
+  const obligationRow = (o: ProofObligation, key: string) => {
+    const Icon = STATUS_ICON[o.status]
+    return (
+      <TreeItem key={key} id={key} textValue={fill(l.obligation, { label: o.label, status: l.status[o.status] }, locale)} className="ty-cert__item">
+        <TreeItemContent>
+          {({ hasChildItems }) => (
+            <div className="ty-cert__row" data-status={o.status}>
+              {hasChildItems ? (
+                <AriaButton slot="chevron" className="ty-cert__chevron">
+                  <ChevronRight aria-hidden="true" focusable="false" />
+                </AriaButton>
+              ) : (
+                <span className="ty-cert__spacer" aria-hidden="true" />
+              )}
+              <Icon className="ty-cert__icon" aria-hidden="true" focusable="false" />
+              <span className="ty-cert__text">
+                <span className="ty-cert__label">{o.label}</span>
+                {o.detail ? (
+                  <code className="ty-cert__detail" dir="ltr">
+                    {o.detail}
+                  </code>
+                ) : null}
+              </span>
+              <span className="ty-cert__status">{l.status[o.status]}</span>
+            </div>
+          )}
+        </TreeItemContent>
+        {(o.children ?? []).map((c) => obligationRow(c, `${key}/${c.id}`))}
+      </TreeItem>
+    )
+  }
+
+  return (
+    <section className={['ty-cert', className].filter(Boolean).join(' ')} aria-label={l.title}>
+      <div className="ty-cert__main">
+        <h3 className="ty-cert__heading">{l.obligationsTitle}</h3>
+        <Tree aria-label={l.tree} className="ty-cert__tree" defaultExpandedKeys={expanded}>
+          <TreeItem id="root" textValue={`${certificate.claim}, ${l.verdicts[certificate.verdict]}`} className="ty-cert__item" data-root="">
+            <TreeItemContent>
+              {() => (
+                <div className="ty-cert__row ty-cert__row--root" data-status={certificate.verdict === 'proved' ? 'ok' : certificate.verdict === 'refuted' ? 'failed' : 'pending'}>
+                  <AriaButton slot="chevron" className="ty-cert__chevron">
+                    <ChevronRight aria-hidden="true" focusable="false" />
+                  </AriaButton>
+                  {(() => {
+                    const Icon = STATUS_ICON[certificate.verdict === 'proved' ? 'ok' : certificate.verdict === 'refuted' ? 'failed' : 'pending']
+                    return <Icon className="ty-cert__icon" aria-hidden="true" focusable="false" />
+                  })()}
+                  <span className="ty-cert__text">
+                    <span className="ty-cert__claim" dir="auto">
+                      {certificate.claim}
+                    </span>
+                    {certificate.note ? (
+                      <code className="ty-cert__detail" dir="auto">
+                        {certificate.note}
+                      </code>
+                    ) : null}
+                  </span>
+                  <span className="ty-cert__status">{l.verdicts[certificate.verdict]}</span>
+                </div>
+              )}
+            </TreeItemContent>
+            {certificate.obligations.map((o) => obligationRow(o, `root/${o.id}`))}
+          </TreeItem>
+        </Tree>
+      </div>
+      <aside className="ty-cert__side" aria-label={l.facts}>
+        <span className="ty-cert__eyebrow">{l.verdict}</span>
+        <div className="ty-cert__verdict">
+          <ProofPill state={certificate.verdict} word={l.verdicts[certificate.verdict]} />
+          <span className="ty-cert__open">{open.pending || open.failed ? fill(l.openCount, open, locale) : l.allHold}</span>
+        </div>
+        <p className="ty-cert__note">{l.deterministic}</p>
+        <dl className="ty-cert__facts">
+          <div>
+            <dt>{l.verifier}</dt>
+            <dd className="ty-cert__mono" dir="ltr">
+              {certificate.verifier}
+            </dd>
+          </div>
+          <div>
+            <dt>{l.ranAt}</dt>
+            <dd className="ty-cert__mono">
+              <time dateTime={certificate.ranAt}>{ranAt}</time>
+            </dd>
+          </div>
+          <div>
+            <dt>{l.inputEdition}</dt>
+            <dd className="ty-cert__mono" dir="ltr">
+              {certificate.inputEdition}
+            </dd>
+          </div>
+          <div>
+            <dt>{l.hash}</dt>
+            <dd className="ty-cert__mono ty-cert__hash" dir="ltr">
+              {certificate.hash}
+            </dd>
+          </div>
+        </dl>
+        <div className="ty-cert__actions">
+          {onRerun ? (
+            <Button variant="secondary" leadingIcon={<Check />} busy={busy} busyLabel={l.rerunning} onPress={onRerun}>
+              {l.rerun}
+            </Button>
+          ) : null}
+          {onDownload ? (
+            <Button variant="quiet" leadingIcon={<FileDown />} onPress={onDownload}>
+              {l.download}
+            </Button>
+          ) : null}
+        </div>
+      </aside>
+    </section>
+  )
+}
+
+/** Pending and failed obligations, at every level. */
+function countOpen(list: readonly ProofObligation[]): { pending: number; failed: number } {
+  return list.reduce(
+    (acc, o) => {
+      const inner = countOpen(o.children ?? [])
+      return { pending: acc.pending + inner.pending + (o.status === 'pending' ? 1 : 0), failed: acc.failed + inner.failed + (o.status === 'failed' ? 1 : 0) }
+    },
+    { pending: 0, failed: 0 },
+  )
+}

package/src/flow/provenance/ProvenanceFilters.tsx

@@ -0,0 +1,137 @@
+// Filters of the provenance view. In the graph they are three chips (type,
+// actor, proof), each opening its own popover; ProvenanceFilters keeps the
+// single "Filters" popover and ProvenanceFilterFields the bare fields.
+
+import { ChevronDown, SlidersHorizontal } from 'lucide-react'
+import { Button as AriaButton, Dialog, DialogTrigger, Popover as AriaPopover } from 'react-aria-components'
+import { Button, Checkbox, CheckboxGroup, Popover, Switch, TextField } from '../../index'
+import type { ReactNode } from 'react'
+import { fill } from '../internal/labels'
+import type { ProvenanceLabels } from './labels'
+import { ACTOR_KINDS, activeFilterCount, EMPTY_FILTERS, PROOF_KEYS, PROV_KINDS, type ProofKey, type ProvActorKind, type ProvFilters, type ProvKind } from './model'
+
+export interface ProvenanceFiltersProps {
+  value: ProvFilters
+  onChange: (next: ProvFilters) => void
+  labels: ProvenanceLabels
+  locale?: string
+  /** Kinds offered (defaults to every PROV kind). */
+  kinds?: readonly ProvKind[]
+  /** Offer the "actors as nodes" switch (only when actors with ids exist). */
+  canShowActors?: boolean
+}
+
+/** The filter fields without the popover (embeddable in a drawer). */
+export function ProvenanceFilterFields({ value, onChange, labels: l, kinds = PROV_KINDS, canShowActors = false }: ProvenanceFiltersProps) {
+  return (
+    <div className="ty-prov-filters">
+      <CheckboxGroup label={l.filterKinds} value={value.kinds} onChange={(v) => onChange({ ...value, kinds: v as ProvKind[] })} orientation="vertical">
+        {kinds.map((k) => (
+          <Checkbox key={k} value={k} label={l.kinds[k]} />
+        ))}
+      </CheckboxGroup>
+      <CheckboxGroup label={l.filterProof} value={value.proofStates} onChange={(v) => onChange({ ...value, proofStates: v as ProofKey[] })}>
+        {PROOF_KEYS.map((k) => (
+          <Checkbox key={k} value={k} label={l.proof[k]} />
+        ))}
+      </CheckboxGroup>
+      <CheckboxGroup label={l.filterActors} value={value.actorKinds} onChange={(v) => onChange({ ...value, actorKinds: v as ProvActorKind[] })}>
+        {ACTOR_KINDS.map((k) => (
+          <Checkbox key={k} value={k} label={l.actorKinds[k]} />
+        ))}
+      </CheckboxGroup>
+      <TextField label={l.filterActorName} value={value.actorName} onChange={(t) => onChange({ ...value, actorName: t })} />
+      {canShowActors ? <Switch label={l.actorsAsNodes} isSelected={value.actorsAsNodes} onChange={(on) => onChange({ ...value, actorsAsNodes: on })} /> : null}
+      <Button variant="quiet" onPress={() => onChange({ ...EMPTY_FILTERS, kinds: [], actorKinds: [], proofStates: [] })} disabled={activeFilterCount(value) === 0} focusableWhenDisabled>
+        {l.clearFilters}
+      </Button>
+    </div>
+  )
+}
+
+export function ProvenanceFilters(props: ProvenanceFiltersProps) {
+  const { value, labels: l, locale } = props
+  const count = activeFilterCount(value)
+  const trigger = count ? fill(l.filtersActive, { count }, locale) : l.filters
+  return (
+    <Popover
+      title={l.filters}
+      placement="bottom"
+      align="end"
+      trigger={
+        <Button variant="secondary" leadingIcon={<SlidersHorizontal />} className="ty-prov-filters__trigger">
+          {trigger}
+        </Button>
+      }
+    >
+      <ProvenanceFilterFields {...props} />
+    </Popover>
+  )
+}
+
+type ChipKey = 'kinds' | 'actors' | 'proof'
+
+/** Type, actor and proof filters as three chips with popovers ("Type: all"). */
+export function FilterChips({ value, onChange, labels: l, locale, kinds = PROV_KINDS, canShowActors = false }: ProvenanceFiltersProps) {
+  const chosen = (n: number, all: string) => (n ? fill(l.filterChosen, { count: n }, locale) : all)
+  const actorCount = value.actorKinds.length + (value.actorName.trim() ? 1 : 0) + (value.actorsAsNodes ? 1 : 0)
+  const chips: Array<{ key: ChipKey; text: string; active: boolean; body: ReactNode }> = [
+    {
+      key: 'kinds',
+      text: fill(l.filterKindChip, { value: chosen(value.kinds.length, l.filterAllKinds) }, locale),
+      active: value.kinds.length > 0,
+      body: (
+        <CheckboxGroup label={l.filterKinds} value={value.kinds} onChange={(v) => onChange({ ...value, kinds: v as ProvKind[] })}>
+          {kinds.map((k) => (
+            <Checkbox key={k} value={k} label={l.kinds[k]} />
+          ))}
+        </CheckboxGroup>
+      ),
+    },
+    {
+      key: 'actors',
+      text: fill(l.filterActorChip, { value: chosen(actorCount, l.filterAllActors) }, locale),
+      active: actorCount > 0,
+      body: (
+        <>
+          <CheckboxGroup label={l.filterActors} value={value.actorKinds} onChange={(v) => onChange({ ...value, actorKinds: v as ProvActorKind[] })}>
+            {ACTOR_KINDS.map((k) => (
+              <Checkbox key={k} value={k} label={l.actorKinds[k]} />
+            ))}
+          </CheckboxGroup>
+          <TextField label={l.filterActorName} value={value.actorName} onChange={(t) => onChange({ ...value, actorName: t })} />
+          {canShowActors ? <Switch label={l.actorsAsNodes} isSelected={value.actorsAsNodes} onChange={(on) => onChange({ ...value, actorsAsNodes: on })} /> : null}
+        </>
+      ),
+    },
+    {
+      key: 'proof',
+      text: fill(l.filterProofChip, { value: chosen(value.proofStates.length, l.filterAllProof) }, locale),
+      active: value.proofStates.length > 0,
+      body: (
+        <CheckboxGroup label={l.filterProof} value={value.proofStates} onChange={(v) => onChange({ ...value, proofStates: v as ProofKey[] })}>
+          {PROOF_KEYS.map((k) => (
+            <Checkbox key={k} value={k} label={l.proof[k]} />
+          ))}
+        </CheckboxGroup>
+      ),
+    },
+  ]
+  return (
+    <>
+      {chips.map((c) => (
+        <DialogTrigger key={c.key}>
+          <AriaButton className="ty-prov-chip" data-active={c.active ? 'true' : undefined}>
+            {c.text}
+            <ChevronDown className="ty-prov-chip__chevron" aria-hidden="true" />
+          </AriaButton>
+          <AriaPopover className="ty-prov-chip-pop" placement="bottom start" offset={6}>
+            <Dialog className="ty-prov-chip-pop__dialog" aria-label={c.text}>
+              <div className="ty-prov-filters">{c.body}</div>
+            </Dialog>
+          </AriaPopover>
+        </DialogTrigger>
+      ))}
+    </>
+  )
+}