Add high fidelity design and layout screens

[reefdog]

This is a little bit sneaky because I already added these in 53028bc. However, I wanted to both describe them all here in a PR, and I did actually change one, so I forced all to be part of this PR with a directory name change.

This PR contains our initial design and layout screens, exported from our interactive Figma prototype. They represent our starting position for design, layout, and interactivity, and thus close #26. (We fully expect design particularly to go through some changes after Joanna completes our branding in #24.) This PR will also describe our user flows, so it will close #16.

First Run Experience

New visitors to the site will get our generic dashboard but with a modal that welcomes them, briefly describes the app, then provides one primary call to action to enter the site and multiple secondary calls to action to find out more about the project and the team (e.g., the BIFFUD project site; this repo; an explanatory blog post; etc.).

Dashboard

Upon closing the welcome modal (and upon subsequent visits), the visitor will be greeted by the current live Dashboard:

• Default facets will be preselected for entity type, interval span, and channel(s).
• No entities will be pre-selected in the entity list / primary graph.
• The entity list will be sorted by "Recent"
  • Visitors can scroll the entity list to view more than will fit on-screen
  • Clicking the column headers will sort by that column (Term, Total, or Recent)
  • Hovering on an entity in the list will reveal its line in the graph, and vice versa
  • Click on an entity (or its line) will activate/show its entity detail box (see below)
    • Clicking again will deactivate/hide its detail box
    • A selected entity can't be scrolled out of view; it will stick to the top (or bottom) of the scroll area until its natural sort position is scrolled back in-view
    • Only one entity can be selected at a time (for now); selecting another will deselect the active one
• The primary graph shows a lightly-smoothed line graph of all entity appearances over the selected interval
  • X-axis will be some reasonable sub-period of the selected interval period, e.g. 30 minutes in the 4-hour view or 2 hours in the 24-hour view. The x-axis label will just be a human-friendly summary of this interval span.
  • Y-axis represents number of times the entity appeared w/in each interval sub-period.
  • Hovering over any line will highlight the line and its corresponding entity in the list. If the entity is not in the current scroll view, it will surface at the top (or bottom) of the scroll view in a way that shows "this belongs out of view, but is being brought into view so you can ID the line".
  • Clicking the line will activate its detail box (see below).
  • Each interval period will have a fixed "Recent" period (e.g., "past hour" in the 4-hour view, or "past two hours" in the 24-hour view).
    • Future enhancement: the "Recent" period's starting point will be adjustable by the user
• The live transcript for the default channel(s) will be in a box on the right.
  • Each sentence appears appears on a newline.
  • Timestamps will be occasionally dropped in, possibly every minute unless it proves too noisy
  • The box will be half-height so as to not be overly-noisy, but can be expanded to full-height (and subsequently collapsed).
  • As the viewer watches, the "typing" ellipsis indicates new sentences are coming in live and added to the transcript box; scrolling up on the box does not pause new sentences arriving, but they will be arriving out of scrollview and a "Jump back to current transcript" link will appear until the user clicks it or scrolls back to the latest sentences.
  • Recognized entities in the live transcript will be auto-linked; clicking them will trigger the same action as clicking entities in the left-hand entity list area.
• There will be a global text-entry field for filtering everything on-screen (entity list, transcripts, etc.) for the entered term. Think instantaneous search but only for data already on-screen. (This isn't pictured but will likely be part of the facet bar along with entity type/interval/channel.)

Entity Detail

Clicking on a term in the entity list (or its corresponding line on the graph), or in the live transcript, will spawn the entity detail box with every sentence (in the current interval) that contains the term:

• The list of matching sentences is scrollable
• Header shows the term, total count, and "recent" count
• Footer lists related entities and their counts (definitely the top X number of terms, potentially with all additional terms listed in a pop-up menu)
  • Clicking related entities filters the sentences to just those that contain selected terms and updates all counts (see below)
  • Related entities are also linked inside the sentences themselves; clicking "President Trump" in the example above would be identical to clicking "Trump" in the related entity list
• Clicking and individual sentence drills into its surrounding context (see below)
• Likely claims will be marked with a badge/indicator of some kind (not yet mocked up)
• Header button will indicate number of likely claims and allow filtering just to them

Related Entity Filter

After clicking a related entity, the list of results is filtered to just those sentences that contain both terms, and the "related entities" list filters to those that intersect with both terms:

Individual Transcript

Upon drilling into an individual transcript, the surrounding context is provided in a scrollable, lazy-loading list:

• Visitor can continue loading the transcript in either direction by scrolling
• The entity detail box header reflects we're in this detail view with transcript metadata and "Go back to results" link
• Visitor can also go back by clicking again (deselecting) the original matching sentence
• Like in the live transcript view, blocks of sentences are divided by an occasional timestamp
• In this view, other exploratory tools like related entities and likely claims are removed

[slifty]

Just to note that we had talked through a lot of these over the past few weeks and they are awesome -- thank you for documenting everything so well!