Implement a token annotation display mode

[jacobwegner]

• Enable token alignment display mode
• Choose an available alignment set (jtauber-word-level-english)
• Reference of urn:cts:greekLit:tlg0012.tlg001.perseus-grc2:1.1-1.10 to query for data in that alignment set
• Render Greek on left, English on right
• When hovering over a token:
  • If participating in one alignment highlight the corresponding token in the English passage
  • If participating in more than one alignment, choose the alignment

Will supply queries / data model in https://app.zenhub.com/workspace/o/scaife-viewer/sv-mini-atlas/issues/17

Ref @jtauber's codepen in #23

TODOS:

• [x] Don't show the under-rectangle if only one alignment
• [x] Select from available alignments

  {
  textAlignments(reference: "urn:cts:greekLit:tlg0012.tlg001.perseus-grc2:1.1-1.7") {
  edges {
    node {
      name
      slug
      id
    }
  }
  }
  }

• [x] Style tokens "out of bounds" with a muted color; if a token has no alignments, mute it
• ~Click to toggle alignment selection (so a user can scroll down a longer alignment)~ (defer)
• [x] hover over a text part passage ref in the primary (e.g. Greek) text and have exactly those words highlight in the secondary text(s) based on token-level alignment
  • an attempt to infer a text-part-level alignment from the token-level alignments
  • all just be one colour so we wouldn’t bother with trying to distinguish different alignments
  • maybe we do something to indicate the ref that was clicked
  • clicking selects / de-selects the entire line (brute force toggle)
• [x] Tweak under spacing

[jacobwegner]

@paltman I've gone ahead and tried to demonstrate / document queries within https://github.com/scaife-viewer/sv-mini-atlas/issues/17.

Am happy to discuss further as-needed.

I still need to actually get the data and ATLAS bits over to sv-mini-atlas, but will leave the preview instance referenced in that issue online for awhile so you can experiment (via VUE_APP_ATLAS_GRAPHQL_ENDPOINT).

[jacobwegner]

@paltman here is the latest GraphQL query btw:

https://github.com/scaife-viewer/sv-mini-atlas/issues/17#issuecomment-675669984

I already had id for each node instance, so there is one less problem to deal with

[paltman]

linking codepen in case I need to find it again: https://codepen.io/jtauber/pen/bGpEbBm

[jacobwegner]

@jtauber: @paltman is going to work through the checklist above and his pushes will be deployed to https://token-alignments-mode--scaife-viewer-frontend.netlify.app/.

If you wanted a "stable" URL for what he worked on last week, you can use:

https://5f4036de34c051000875b794--scaife-viewer-frontend.netlify.app/

[jacobwegner]

@paltman when you get to

Style tokens "out of bounds" with a muted color; if a token has no alignments, mute it

I have a new GraphQL endpoint you can try out that changes the structure of passageReferences as below:

Instead of a list of strings, you have a list of objects where reference is the value that was formerly "just" given as a string, and start_idx and end_idx are the token boundaries for the tokens returned by the reference.

So if you're grabbing alignment records for urn:cts:greekLit:tlg0012.tlg001.perseus-grc2:1.1-1.12, you would fetch text parts for urn:cts:greekLit:tlg0012.tlg001.perseus-eng3:1.1 but "mute" any of those tokens with idx > 114.

I set up a new endpoint for you to test this out; if it looks good, let me know, and I can merge it back to the other ATLAS endpoint you've been using.

The new endpoint is https://explorehomer-spike-duca-r9f0er.herokuapp.com/graphql/:

export VUE_APP_ATLAS_GRAPHQL_ENDPOINT="https://explorehomer-spike-duca-r9f0er.herokuapp.com/graphql/"

Sample query:

{
  textAlignmentChunks(reference: "urn:cts:greekLit:tlg0012.tlg001.perseus-grc2:1.1-1.10") {
    metadata {
      passageReferences
    }
  }
}

Returns

{
  "data": {
    "textAlignmentChunks": {
      "metadata": {
        "passageReferences": [
          {
            "reference": "urn:cts:greekLit:tlg0012.tlg001.perseus-grc2:1.1-1.12",
            "start_idx": 0,
            "end_idx": 73
          },
          {
            "reference": "urn:cts:greekLit:tlg0012.tlg001.perseus-eng3:1.1",
            "start_idx": 0,
            "end_idx": 114
          }
        ]
      }
    }
  }
}

[jacobwegner]

@paltman: @jtauber and I discussed:

Click to toggle alignment selection

on our grooming call; let's defer it from this first pass.

If that is the case, and all the "TODOs" have been checked off above, are we ready to do a code review and move this along?

[paltman]

@jacobwegner yes!

[jacobwegner]

I've just approved https://github.com/scaife-viewer/frontend/pull/14, but need to get things wired up on sv-mini / sv-mini ATLAS before advancing to product owner review.