Context Cards

Usage

import { ContextCards } from '@wdzyi/ui';

<ContextCards
  chunks={[
    {
      id: 'research',
      title: 'Why new teams stall',
      body: 'Most new teams try to invite someone on their first day.',
      source: 'Onboarding research',
      kind: 'PDF',
      where: 'p. 4',
      score: 0.92,
      tokens: 164,
    },
  ]}
  terms={['invite', 'team']}
  onExcludedChange={setLeftOut}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

chunksContextCardsChunk[]

What was found: each has an id, a title, the passage, its source with a short kind such as PDF, where in the source, an href, a score from 0 to 1 and its tokens. Add to it as things are found.

termsstring[]

Words to mark in the passages, so it’s clear why each one came back.

working, statusboolean, string = false, 'Searching'

Still looking. The header says what it’s doing, shining, instead of counting.

labelstring = 'Context'

The header.

excluded, defaultExcluded, onExcludedChangestring[]

The ids of the chunks left out of the context. Each card has a square to take it out or put it back.

Notes

• The line along the top of each card fills to its score as the card arrives. Once the search is done, the best match’s line turns to foil. In the demo, it searches for 1.7 seconds, long enough to read what it’s doing, then the cards come about a second apart, never quite evenly.
• A term marks any word it starts, so invite marks invites and invited too.
• A passage longer than three lines folds. Shut, its row keeps a floor of three lines, so opening it eases from there to the whole passage without measuring anything.
• Cards sit in as many columns of at least 232px as fit, and the columns hold their places before they fill, so an arriving card never moves the others.
• With reduced motion, the lines are drawn full, the shine holds still and the fold opens at once.