Add a syntax trees display mode

[jacobwegner]

Look into how http://folio2.furman.edu/ot/pages/urn_cts_greekLit_tlg0011_tlg004_1-57.html is used with Treant.

Acceptance Criteria:

• [x] Add a new display mode for showing syntax trees
• [x] Given a passage reference, retrieve trees from ATLAS (see sv-mini-atlas/#25)
• [x] For each tree, render the tree (treeant.js above) as well as a the sentence
• [x] Allow a user to toggle tree / sentence on/off
  • Default to sentence + graph
  • Only tree
  • Only graph
• [x] Show relationship to head in graph
• [x] Render all text horizontally

Discussions from September 15, 2020

Required changes:

• [x] Circle needs to be done below (@paltman may have local commits)
• [x] Make text respond to text size setting
• [x] Increase line height
• [x] Noto Serif font
• [x] Background color vs text highlight or mute all "non-involved" text
• [x] Make "relationship" values smaller (c.f.):

• [x] On hover, distinguish between immediate children and descendants.

Optional:

• [ ] Make SVG draggable, like an image

[jacobwegner]

@paltman see https://github.com/scaife-viewer/sv-mini-atlas/issues/25#issuecomment-685149176 for a sample query (using the endpoint of https://mini-stack-a-feature-sy-srpyxy.herokuapp.com/graphql/)

[jacobwegner]

@paltman and @jtauber: I drafted acceptance criteria on our call earlier this week.

Did we still want to implement the toggle (show sentence + tree, only tree, only sentence), similar to "map mode" or "folio mode"?

And did we want to add the relation information to the diagram (OBJ , COORD, etc):