Simplify timelines UI/reuse UI elements

[tillprochaska]

See #2673 for context.

Scope of this PR

The test cases in the top-level test suite give a good impression of the main features:

PASS src/components/Timeline2/Timeline.test.tsx (7.005 s)
  ✓ sorts and filters items by temporal start (115 ms)
  ✓ allows creating new items (2015 ms)
  ✓ does not allow creating new items if not writeable (35 ms)
  ✓ allows removing entities (49 ms)
  ✓ does not allow removing entities if not writeable (49 ms)
  Sidebar
    ✓ allows changing entity color (120 ms)
    ✓ does not allow changing entity color if not writeable (35 ms)
    ✓ allows changing entity properties (190 ms)
    ✓ does not allow changing entity properties if not writeable (47 ms)
    ✓ allows changing entity-type properties (335 ms)
  Empty state
    ✓ displays a message (8 ms)
    ✓ allows creating new items (45 ms)
    ✓ does not allow creating new items if not writeable (2 ms)

Timelines will eventually have two different views (or renderers), a list view and a chart view. This PR mainly deals with refreshing the list view. However, I have already implemented a first version of the chart view (in src/components/Timeline2/TimelineChart). The chart view is not exposed in the UI right now.

In an ideal world, the chart view should be in a different PR. That would’ve resulted in more work (or splitting out this part into a separate PR and potentially losing part of the Git history).

I’d suggest that you either ignore the TimelineChart directory when reviewing this PR (instead reviewing it later, when we actually enable this view in the UI) or that you review what’s there now already. If you decide to do the latter, you can manually enable the chart view by adding a renderer="chart" property here.

How to review

I’d recommend reviewing in the following order:

1. Take a look at the types in src/components/Timeline2/types.ts and the classes (TimelineItem, ImpreciseDate) in src/components/Timeline2/util.ts.
2. src/screens/TimelineScreen/TimelineScreen.jsx
3. src/components/Timeline2/Timeline.tsx and src/components/Timeline2/Timeline.test.tsx
4. Then take a look at any components referenced in the Timeline component as well as respective tests.
5. Anything else

I try to keep my git history clean and often add relevant implementation considerations to the commit message body. In case you’re wondering about something specific, it may make sense to click "View file" on GitHub and then "Blame" to find commits that have changed a specific file.

Also read through the implementation notes below.

Implementation notes

While this PR replaces most of the existing timelines implementation, I have kept the old implementation around while developing and have selectively used bits and pieces of the existing implementation. That is why there is a src/components/Timeline directory with the old implementation and a src/components/Timeline2 directory with the new implementation.

I will remove the old implementation before we merge this PR and rename the Timeline2 directory. This will remove about 1500 LOC, so the net-lines added in this PR will be closer to ~2500 rather than the ~4000 this PR has at the moment. Keep in mind that a big part of the lines added is for test coverage (this feature wasn’t tested before).

Apart from that, I have partially re-implemented the existing entity sidebar (that is already used in network diagrams) with the goal of porting it to TypeScript and refactoring it to make it easier to test. Right now, there exist two implementations of the same UI:

• Old implementation used for network diagrams in src/react-ftm/components/NetworkDiagram/toolbox/EntityViewer.tsx
• New implementation used in timelines in src/components/Timeline2/EntityViewer2.tsx

The mid-term goal is to replace the old implementation used in network diagrams. In order to keep the scope of this PR smaller, and to keep the risk of implementing bugs in network diagrams low, I haven’t done this in this PR.

To do

Before review:

• Remove entities from timeline
• Fix entity suggestions in entity viewer sidebar
• Fix edge selects in create dialog
• Improve keyboard navigation
  • Up/down arrows to select prev/next item
  • Clicking an item should set keyboard focus to it
  • Pressing escape should close entity sidebar
• Use table-like layout (two columns for dates)
• Rebase and reenable type checking in tests where we use window.crypto
• Fix bug: Add entity and delete directly fails
• Add proper translations
• Add read-only mode (depending on permissions)

Before merging:

• Delete Timeline directory and rename Timeline2 directory
• Remove unrelated changes (see review comment)
• Remove script to populate timelines during development

Potential enhancements:

• Add status indicator ("Saved"/"Saving…"/"Error"/"Offline")
• Display items without temporal extent separately
• Improve ranking/order of properties in entity viewer, always display temporal properties first?
• Add empty state
• Add loading state
• Format dates
• Add tooltip to remove icon button
• Use TimelineItem in EntityViewer
• Don’t let people add items without at least one date field filled out
• Move "Add item" button to the fixed entity set bar?
• Add indicator for optional fields when creating a timeline item
• Sort list by start or end date (asc or desc)
• Add optional description field to create form / show description in list

Screenshots

[tillprochaska]

Not a massive fan of the Timeline2, but that is just me, and by no means a request for change or a need to refactor later.

This is now gone -- I removed the old implementation and renamed Timeline2 to just Timeline. :)