Narrative pages with animated transitions

[macfarlandian]

Description of the change

Builds out the bulk (but not all) of the basic layout UI for the narrative pages.

Functionality you should see:

• all the content is present on each page
• the sections smoothly "snap" into place as you scroll up and down the page
• up/down chevrons on the left can also be used to page through the sections
• the page progress bar in the left navigation updates as the page scrolls
• the URL updates with the section number as the page scrolls
• if you navigate directly to a URL with a section number (paste it in or just reload the page), the page will scroll to that section once it loads

The animations are somewhat inspired by this article, although I didn't really use any of their code directly. We will probably wind up implementing a similar "wipe" transition on this site eventually, but full motion designs are still TBD. I'm also using a different animation library than they did, React Spring, which has a nice, concise API and seems to be the newest hotness? Seems good so far in this limited context. (And, after a brief scare, has been verified to work in IE 11!)

There is some slightly funky state management within this page to integrate the animations and prevent the router from clobbering the page (the section "routes" are kind of fake since they do not actually map to different components), but I tried to comment voluminously to keep it sensible.

Other work to do on this page (other than the charts, obviously) includes adding a page footer for navigating to the other narratives and adding some more interactions to the section navigation component (jumping to a specific section in addition to advancing one at a time). This PR was already getting big enough, though, so I will defer that stuff for the next one.

Also in this PR I removed all of the "data portal" stuff since that is now out of scope for the first release.

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Configuration change (adjusts configuration to achieve some end related to functionality, development, performance, or security)

Related issues

part of #276

Checklists

Development

These boxes should be checked by the submitter prior to merging:

• Manual testing against realistic data has been performed locally

Code review

These boxes should be checked by reviewers prior to merging:

• This pull request has a descriptive title and information useful to a reviewer
• This pull request has been moved out of a Draft state, has no "Work In Progress" label, and has assigned reviewers
• Potential security implications or infrastructural changes have been considered, if relevant

[coveralls]

Pull Request Test Coverage Report for Build 478270227

• 74 of 80 (92.5%) changed or added relevant lines in 13 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.6%) to 64.04%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
spotlight-client/src/SystemNarrativePage/SectionNavigation.tsx	22	23	95.65%
spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx	27	32	84.38%

Totals
Change from base Build 440710187:	0.6%
Covered Lines:	1369
Relevant Lines:	2085

---

💛 - Coveralls

[daschi]

The transitions seem pretty smooth! It's great that the navigation for the sections is keyboard accessible. I just had a couple small questions.

[daschi]

Do you need to add e.preventDefault() here too?

[macfarlandian]

no actually I should have removed it in both places! and the preventdefault was what was causing the URL history to mysteriously not update in reference to your second comment, which I spent like ....... an hour-plus trying to debug. wow

[daschi]

Does this mean you wouldn't be able to look at the history returned from renderNavigableApp to assert the page URL?