From d6881adb256894f9edd46ec3006b75e407e9815e Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Tue, 9 Jun 2020 15:24:33 -0500
Subject: [PATCH 01/12] Add new display mode toggle

---
 src/actions.js                    |  4 ++++
 src/constants.js                  |  1 +
 src/mutations.js                  |  4 ++++
 src/widgets/DisplayModeWidget.vue | 22 ++++++++++++++++------
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/actions.js b/src/actions.js
index f460faa..c3e1a29 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -6,6 +6,7 @@ import {
   UPDATE_METADATA,
   FETCH_LIBRARY,
   SET_PASSAGE,
+  SET_DISPLAY_MODE_METRICAL,
   SET_DISPLAY_MODE_INTERLINEAR,
   SET_DISPLAY_MODE_NAMED_ENTITIES,
   SET_DISPLAY_MODE_FOLIO,
@@ -24,6 +25,9 @@ export default {
   [SET_DISPLAY_MODE_NAMED_ENTITIES]: ({ commit }) => {
     commit(SET_DISPLAY_MODE_NAMED_ENTITIES);
   },
+  [SET_DISPLAY_MODE_METRICAL]: ({ commit }) => {
+    commit(SET_DISPLAY_MODE_METRICAL);
+  },
   [SET_DISPLAY_MODE_FOLIO]: ({ commit }) => {
     commit(SET_DISPLAY_MODE_FOLIO);
   },
diff --git a/src/constants.js b/src/constants.js
index cb29869..78d9b2c 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -3,6 +3,7 @@ export const FETCH_METADATA = 'fetchMetadata';
 export const UPDATE_METADATA = 'updateMetadata';
 export const FETCH_LIBRARY = 'fetchLibrary';
 export const SET_PASSAGE = 'setPassage';
+export const SET_DISPLAY_MODE_METRICAL = 'setDisplayModeMetrical';
 export const SET_DISPLAY_MODE_INTERLINEAR = 'setDisplayModeInterlinear';
 export const SET_DISPLAY_MODE_NAMED_ENTITIES = 'setDisplayModeNamedEntities';
 export const SET_DISPLAY_MODE_DEFAULT = 'setDisplayModeDefault';
diff --git a/src/mutations.js b/src/mutations.js
index 833a838..c6a2f94 100644
--- a/src/mutations.js
+++ b/src/mutations.js
@@ -2,6 +2,7 @@ import {
   FETCH_METADATA,
   FETCH_LIBRARY,
   SET_PASSAGE,
+  SET_DISPLAY_MODE_METRICAL,
   SET_DISPLAY_MODE_INTERLINEAR,
   SET_DISPLAY_MODE_NAMED_ENTITIES,
   SET_DISPLAY_MODE_FOLIO,
@@ -17,6 +18,9 @@ export default {
   [CLEAR_NAMED_ENTITIES]: state => {
     state.selectedNamedEntities = [];
   },
+  [SET_DISPLAY_MODE_METRICAL]: state => {
+    state.displayMode = 'metrical';
+  },
   [SET_DISPLAY_MODE_NAMED_ENTITIES]: state => {
     state.displayMode = 'named-entities';
   },
diff --git a/src/widgets/DisplayModeWidget.vue b/src/widgets/DisplayModeWidget.vue
index 565ea78..15547a6 100644
--- a/src/widgets/DisplayModeWidget.vue
+++ b/src/widgets/DisplayModeWidget.vue
@@ -9,6 +9,9 @@
     <div :class="{ active: folio }" @click="setFolio">
       Folio Images
     </div>
+    <div :class="{ active: metrical }" @click="setMetrical">
+      Metrical Annotation
+    </div>
     <div :class="{ active: namedEntities }" @click="setNamedEntities">
       Named Entities
     </div>
@@ -21,6 +24,7 @@
     SET_DISPLAY_MODE_NAMED_ENTITIES,
     SET_DISPLAY_MODE_FOLIO,
     SET_DISPLAY_MODE_DEFAULT,
+    SET_DISPLAY_MODE_METRICAL,
   } from '@/constants';
 
   export default {
@@ -30,20 +34,23 @@
       singleton: true,
     },
     computed: {
+      displayMode() {
+        return this.$store.state.displayMode;
+      },
       interlinear() {
-        return this.$store.state.displayMode === 'interlinear';
+        return this.displayMode === 'interlinear';
       },
       namedEntities() {
-        return this.$store.state.displayMode === 'named-entities';
+        return this.displayMode === 'named-entities';
       },
       folio() {
-        return this.$store.state.displayMode === 'folio';
+        return this.displayMode === 'folio';
       },
       defaultMode() {
-        return this.$store.state.displayMode === 'default';
+        return this.displayMode === 'default';
       },
-      displayMode() {
-        return this.$store.state.displayMode;
+      metrical() {
+        return this.displayMode === 'metrical';
       },
     },
     methods: {
@@ -67,6 +74,9 @@
         document.getElementsByClassName('main-layout')[0]
           .classList.remove('main-layout-wide');
       },
+      setMetrical() {
+        this.$store.dispatch(SET_DISPLAY_MODE_METRICAL);
+      },
     },
   };
 </script>

From fedec8a820542151c96b5222343d5d641d335aec Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Tue, 9 Jun 2020 16:18:17 -0500
Subject: [PATCH 02/12] Implement metrical view

---
 src/reader/components/Reader.vue    | 55 +++++++++++++++++++++++++++++
 src/reader/widgets/ReaderWidget.vue | 18 ++++++++--
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/reader/components/Reader.vue b/src/reader/components/Reader.vue
index 47ec5fb..78ec2da 100644
--- a/src/reader/components/Reader.vue
+++ b/src/reader/components/Reader.vue
@@ -4,7 +4,9 @@
       class="reader-container text"
       :class="[`text-${textSize}`, `text-width-${textWidth}`]"
     >
+      <ul class="metrical" v-if="metrical" v-html="metricalData" />
       <ReaderLine
+        v-else
         v-for="(line, index) in lines"
         :key="`${index}-${line.label}`"
         :line="line"
@@ -19,6 +21,19 @@
   export default {
     components: { ReaderLine },
     props: ['lines', 'textSize', 'textWidth'],
+    computed: {
+      metrical() {
+        return this.$store.state.displayMode === 'metrical';
+      },
+      metricalData() {
+        if (this.metrical) {
+          return this.lines
+            .map(l => l.metricalAnnotations[0].htmlContent)
+            .join('\n');
+        }
+        return '';
+      }
+    }
   };
 </script>
 
@@ -85,3 +100,43 @@
     max-width: 100%;
   }
 </style>
+
+<style lang="scss">
+  .metrical {
+    span.foot {
+      box-sizing: border-box;
+    }
+    span.syll {
+      box-sizing: border-box;
+    }
+
+    /* show foot and syllable divisions */
+
+    li div {
+      word-spacing: 0.6em;
+    }
+    span.syll {
+      padding: 1px 3px;
+    }
+    span.syll:first-child {
+      border-left: 2px solid black;
+    }
+    span.syll.caesura:first-child {
+      border-left: 3px solid blue;
+    }
+    span.syll:not(:first-child) {
+      border-left: 1px dotted black;
+    }
+    span.syll.caesura:not(:first-child) {
+      border-left: 3px dotted blue;
+    }
+
+    /* show syllable length */
+    span.syll.long {
+      background-color: #CCC;
+    }
+    span.syll:not(.long) {
+      background-color: #EEE;
+    }
+  }
+</style>
diff --git a/src/reader/widgets/ReaderWidget.vue b/src/reader/widgets/ReaderWidget.vue
index 3f13add..90e36c7 100644
--- a/src/reader/widgets/ReaderWidget.vue
+++ b/src/reader/widgets/ReaderWidget.vue
@@ -98,6 +98,14 @@
                   kind
                   urn
                   ref
+                  metricalAnnotations {
+                    edges {
+                      node {
+                        metricalPattern
+                        htmlContent
+                      }
+                    }
+                  }
                   tokens {
                     edges {
                       node {
@@ -161,7 +169,7 @@
           return [];
         }
         return this.gqlData.passageTextParts.edges.map(line => {
-          const { id, kind, ref } = line.node;
+          const { id, kind, ref, metricalAnnotations } = line.node;
           const tokens = line.node.tokens.edges.map(edge => {
             const {
               value,
@@ -183,7 +191,13 @@
               entities,
             };
           });
-          return { id, kind, ref, tokens };
+          return {
+            id,
+            kind,
+            ref,
+            tokens,
+            metricalAnnotations: metricalAnnotations.edges.map(e => e.node),
+          };
         });
       },
       siblings() {

From e1aa2895a2af46f006deccfa61d855f2cbfc9e23 Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Tue, 9 Jun 2020 16:19:10 -0500
Subject: [PATCH 03/12] Use <ol> to get line numbering

---
 src/reader/components/Reader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/reader/components/Reader.vue b/src/reader/components/Reader.vue
index 78ec2da..785e111 100644
--- a/src/reader/components/Reader.vue
+++ b/src/reader/components/Reader.vue
@@ -4,7 +4,7 @@
       class="reader-container text"
       :class="[`text-${textSize}`, `text-width-${textWidth}`]"
     >
-      <ul class="metrical" v-if="metrical" v-html="metricalData" />
+      <ol class="metrical" v-if="metrical" v-html="metricalData" />
       <ReaderLine
         v-else
         v-for="(line, index) in lines"

From 97e56266aef1ef1ed9b46a67dc07c3be99f1cef4 Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Tue, 9 Jun 2020 16:19:59 -0500
Subject: [PATCH 04/12] Using <ol> is the wrong approach

---
 src/reader/components/Reader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/reader/components/Reader.vue b/src/reader/components/Reader.vue
index 785e111..78ec2da 100644
--- a/src/reader/components/Reader.vue
+++ b/src/reader/components/Reader.vue
@@ -4,7 +4,7 @@
       class="reader-container text"
       :class="[`text-${textSize}`, `text-width-${textWidth}`]"
     >
-      <ol class="metrical" v-if="metrical" v-html="metricalData" />
+      <ul class="metrical" v-if="metrical" v-html="metricalData" />
       <ReaderLine
         v-else
         v-for="(line, index) in lines"

From e19c86fd7cfbe6ab3455b40e41db939b8e81e9c6 Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Tue, 9 Jun 2020 16:33:28 -0500
Subject: [PATCH 05/12] Switch over to use the ReaderLine component now that
 content is in divs

---
 src/reader/components/Reader.vue     | 55 ----------------------------
 src/reader/components/ReaderLine.vue | 50 ++++++++++++++++++++++++-
 2 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/src/reader/components/Reader.vue b/src/reader/components/Reader.vue
index 78ec2da..47ec5fb 100644
--- a/src/reader/components/Reader.vue
+++ b/src/reader/components/Reader.vue
@@ -4,9 +4,7 @@
       class="reader-container text"
       :class="[`text-${textSize}`, `text-width-${textWidth}`]"
     >
-      <ul class="metrical" v-if="metrical" v-html="metricalData" />
       <ReaderLine
-        v-else
         v-for="(line, index) in lines"
         :key="`${index}-${line.label}`"
         :line="line"
@@ -21,19 +19,6 @@
   export default {
     components: { ReaderLine },
     props: ['lines', 'textSize', 'textWidth'],
-    computed: {
-      metrical() {
-        return this.$store.state.displayMode === 'metrical';
-      },
-      metricalData() {
-        if (this.metrical) {
-          return this.lines
-            .map(l => l.metricalAnnotations[0].htmlContent)
-            .join('\n');
-        }
-        return '';
-      }
-    }
   };
 </script>
 
@@ -100,43 +85,3 @@
     max-width: 100%;
   }
 </style>
-
-<style lang="scss">
-  .metrical {
-    span.foot {
-      box-sizing: border-box;
-    }
-    span.syll {
-      box-sizing: border-box;
-    }
-
-    /* show foot and syllable divisions */
-
-    li div {
-      word-spacing: 0.6em;
-    }
-    span.syll {
-      padding: 1px 3px;
-    }
-    span.syll:first-child {
-      border-left: 2px solid black;
-    }
-    span.syll.caesura:first-child {
-      border-left: 3px solid blue;
-    }
-    span.syll:not(:first-child) {
-      border-left: 1px dotted black;
-    }
-    span.syll.caesura:not(:first-child) {
-      border-left: 3px dotted blue;
-    }
-
-    /* show syllable length */
-    span.syll.long {
-      background-color: #CCC;
-    }
-    span.syll:not(.long) {
-      background-color: #EEE;
-    }
-  }
-</style>
diff --git a/src/reader/components/ReaderLine.vue b/src/reader/components/ReaderLine.vue
index d21f251..4ba04d1 100644
--- a/src/reader/components/ReaderLine.vue
+++ b/src/reader/components/ReaderLine.vue
@@ -5,7 +5,12 @@
     </section>
     <div class="line u-flex" v-else>
       <div class="line-ref">{{ line.ref }}</div>
-      <div class="line-text">
+      <div
+        class="line-text metrical"
+        v-if="metrical"
+        v-html="line.metricalAnnotations[0].htmlContent"
+      />
+      <div class="line-text" v-else>
         <ReaderToken
           v-for="token in tokens"
           :key="token.veRef"
@@ -29,6 +34,9 @@
       interlinear() {
         return this.$store.state.displayMode === 'interlinear';
       },
+      metrical() {
+        return this.$store.state.displayMode === 'metrical';
+      },
     },
   };
 </script>
@@ -54,3 +62,43 @@
     margin: 20px 0;
   }
 </style>
+
+<style lang="scss">
+  .metrical {
+    span.foot {
+      box-sizing: border-box;
+    }
+    span.syll {
+      box-sizing: border-box;
+    }
+
+    /* show foot and syllable divisions */
+
+    li div {
+      word-spacing: 0.6em;
+    }
+    span.syll {
+      padding: 1px 3px;
+    }
+    span.syll:first-child {
+      border-left: 2px solid black;
+    }
+    span.syll.caesura:first-child {
+      border-left: 3px solid blue;
+    }
+    span.syll:not(:first-child) {
+      border-left: 1px dotted black;
+    }
+    span.syll.caesura:not(:first-child) {
+      border-left: 3px dotted blue;
+    }
+
+    /* show syllable length */
+    span.syll.long {
+      background-color: #CCC;
+    }
+    span.syll:not(.long) {
+      background-color: #EEE;
+    }
+  }
+</style>

From 9459a6d86faf5bde8695c3500045f7d1a4886904 Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Tue, 9 Jun 2020 16:47:31 -0500
Subject: [PATCH 06/12] Handle when metrical data doesn't exist

---
 src/reader/components/ReaderLine.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/reader/components/ReaderLine.vue b/src/reader/components/ReaderLine.vue
index 4ba04d1..2b84409 100644
--- a/src/reader/components/ReaderLine.vue
+++ b/src/reader/components/ReaderLine.vue
@@ -5,11 +5,7 @@
     </section>
     <div class="line u-flex" v-else>
       <div class="line-ref">{{ line.ref }}</div>
-      <div
-        class="line-text metrical"
-        v-if="metrical"
-        v-html="line.metricalAnnotations[0].htmlContent"
-      />
+      <div class="line-text metrical" v-if="metrical" v-html="metricalHtml" />
       <div class="line-text" v-else>
         <ReaderToken
           v-for="token in tokens"
@@ -34,8 +30,16 @@
       interlinear() {
         return this.$store.state.displayMode === 'interlinear';
       },
+      metricalHtml() {
+        return (
+          this.line.metricalAnnotations[0] &&
+          this.line.metricalAnnotations[0].htmlContent
+        );
+      },
       metrical() {
-        return this.$store.state.displayMode === 'metrical';
+        return (
+          this.$store.state.displayMode === 'metrical' && this.metricalHtml
+        );
       },
     },
   };

From 1b859d14039702b0cafeda021a83faa3ce8ee09c Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Wed, 10 Jun 2020 15:44:54 -0500
Subject: [PATCH 07/12] Add sentence level alignment mode

---
 src/actions.js                       |  4 ++
 src/constants.js                     |  2 +
 src/mutations.js                     |  4 ++
 src/reader/components/Alignment.vue  | 64 ++++++++++++++++++++++++++++
 src/reader/components/Alignments.vue | 23 ++++++++++
 src/reader/widgets/ReaderWidget.vue  | 19 +++++++++
 src/widgets/DisplayModeWidget.vue    | 32 ++++++++++----
 7 files changed, 140 insertions(+), 8 deletions(-)
 create mode 100644 src/reader/components/Alignment.vue
 create mode 100644 src/reader/components/Alignments.vue

diff --git a/src/actions.js b/src/actions.js
index c3e1a29..5bbb7d9 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -10,6 +10,7 @@ import {
   SET_DISPLAY_MODE_INTERLINEAR,
   SET_DISPLAY_MODE_NAMED_ENTITIES,
   SET_DISPLAY_MODE_FOLIO,
+  SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS,
   SET_DISPLAY_MODE_DEFAULT,
   SELECT_NAMED_ENTITIES,
   CLEAR_NAMED_ENTITIES,
@@ -28,6 +29,9 @@ export default {
   [SET_DISPLAY_MODE_METRICAL]: ({ commit }) => {
     commit(SET_DISPLAY_MODE_METRICAL);
   },
+  [SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS]: ({ commit }) => {
+    commit(SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS);
+  },
   [SET_DISPLAY_MODE_FOLIO]: ({ commit }) => {
     commit(SET_DISPLAY_MODE_FOLIO);
   },
diff --git a/src/constants.js b/src/constants.js
index 78d9b2c..c78609e 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -8,5 +8,7 @@ export const SET_DISPLAY_MODE_INTERLINEAR = 'setDisplayModeInterlinear';
 export const SET_DISPLAY_MODE_NAMED_ENTITIES = 'setDisplayModeNamedEntities';
 export const SET_DISPLAY_MODE_DEFAULT = 'setDisplayModeDefault';
 export const SET_DISPLAY_MODE_FOLIO = 'setDisplayModeFolio';
+export const SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS =
+  'setDisplayModeSentenceAlignments';
 export const SELECT_NAMED_ENTITIES = 'selectNamedEntities';
 export const CLEAR_NAMED_ENTITIES = 'clearNamedEntities';
diff --git a/src/mutations.js b/src/mutations.js
index c6a2f94..73d540d 100644
--- a/src/mutations.js
+++ b/src/mutations.js
@@ -6,6 +6,7 @@ import {
   SET_DISPLAY_MODE_INTERLINEAR,
   SET_DISPLAY_MODE_NAMED_ENTITIES,
   SET_DISPLAY_MODE_FOLIO,
+  SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS,
   SET_DISPLAY_MODE_DEFAULT,
   SELECT_NAMED_ENTITIES,
   CLEAR_NAMED_ENTITIES,
@@ -21,6 +22,9 @@ export default {
   [SET_DISPLAY_MODE_METRICAL]: state => {
     state.displayMode = 'metrical';
   },
+  [SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS]: state => {
+    state.displayMode = 'sentence-alignments';
+  },
   [SET_DISPLAY_MODE_NAMED_ENTITIES]: state => {
     state.displayMode = 'named-entities';
   },
diff --git a/src/reader/components/Alignment.vue b/src/reader/components/Alignment.vue
new file mode 100644
index 0000000..aaea8b4
--- /dev/null
+++ b/src/reader/components/Alignment.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="alignment">
+    <div class="alignment-ref">{{ right[0][0] }}</div>
+    <div class="columns">
+      <div class="left">
+        <div class="line" :class="line[2]" v-for="line in left" :key="line[0]">
+          <span class="line-ref">{{ line[0] }}</span>
+          <span class="line-text">{{ line[1] }}</span>
+        </div>
+      </div>
+      <div class="right">
+        <div class="line" :class="line[2]" v-for="line in right" :key="line[0]">
+          {{ line[1] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['left', 'right'],
+  }
+</script>
+
+<style lang="scss" scoped>
+  .alignment {
+    margin-bottom: 20px;
+    .columns {
+      display: flex;
+      .left,
+      .right {
+        flex: 1;
+      }
+      .left {
+        padding-right: 0.5rem;
+      }
+      .right {
+        padding-left: 0.5rem;
+      }
+    }
+  }
+  .alignment-ref {
+    text-align: center;
+    font-size: 12pt;
+    color: #69c;
+    font-family: 'Noto Sans';
+    margin-bottom: 5px;
+  }
+  .left .line {
+    display: flex;
+    align-items: baseline;
+    .line-ref {
+      font-size: 10pt;
+      color: #69c;
+      font-family: 'Noto Sans';
+      min-width: 4em;
+      text-align: right;
+    }
+    .line-text {
+      margin-left: 1rem;
+    }
+  }
+</style>
diff --git a/src/reader/components/Alignments.vue b/src/reader/components/Alignments.vue
new file mode 100644
index 0000000..78837dc
--- /dev/null
+++ b/src/reader/components/Alignments.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="alignments">
+    <Alignment
+      v-for="(alignment, index) in alignments"
+      :key="index"
+      :left="alignment[0]"
+      :right="alignment[1]"
+    />
+  </div>
+</template>
+
+<script>
+  import Alignment from './Alignment.vue';
+
+  export default {
+    props: ['alignments'],
+    components: { Alignment },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/reader/widgets/ReaderWidget.vue b/src/reader/widgets/ReaderWidget.vue
index 90e36c7..4cf7f2a 100644
--- a/src/reader/widgets/ReaderWidget.vue
+++ b/src/reader/widgets/ReaderWidget.vue
@@ -14,6 +14,7 @@
             No image annotations were found for the selected passage.
           </div>
         </template>
+        <Alignments v-else-if="alignmentMode" :alignments="alignments" />
         <Reader
           v-else
           :lines="lines"
@@ -31,6 +32,7 @@
 
   import WIDGETS_NS, { URN } from '@scaife-viewer/scaife-widgets';
   import Reader from '@/reader/components/Reader.vue';
+  import Alignments from '@/reader/components/Alignments.vue';
   import ImageViewer from '@/components/ImageViewer.vue';
   import Paginator from '@/components/Paginator.vue';
   import { SET_PASSAGE, UPDATE_METADATA } from '@/constants';
@@ -38,6 +40,7 @@
 
   export default {
     components: {
+      Alignments,
       Paginator,
       Reader,
       ImageViewer,
@@ -68,6 +71,9 @@
       }
     },
     computed: {
+      alignmentMode() {
+        return this.$store.state.displayMode === 'sentence-alignments';
+      },
       imageMode() {
         return this.$store.state.displayMode === 'folio';
       },
@@ -132,6 +138,13 @@
                 endCursor
               }
             }
+            textAlignmentChunks(reference: "${this.urn}") {
+              edges {
+                node {
+                  items
+                }
+              }
+            }
             imageAnnotations(reference: "${this.urn}") {
               edges {
                 node {
@@ -164,6 +177,12 @@
       textWidth() {
         return this.$store.getters[`${WIDGETS_NS}/readerTextWidth`];
       },
+      alignments() {
+        if (!this.gqlData) {
+          return [];
+        }
+        return this.gqlData.textAlignmentChunks.edges.map(e => e.node.items);
+      },
       lines() {
         if (!this.gqlData) {
           return [];
diff --git a/src/widgets/DisplayModeWidget.vue b/src/widgets/DisplayModeWidget.vue
index 15547a6..1ae09c9 100644
--- a/src/widgets/DisplayModeWidget.vue
+++ b/src/widgets/DisplayModeWidget.vue
@@ -15,6 +15,9 @@
     <div :class="{ active: namedEntities }" @click="setNamedEntities">
       Named Entities
     </div>
+    <div :class="{ active: sentence }" @click="setSentence">
+      Sentence Alignments
+    </div>
   </div>
 </template>
 
@@ -25,6 +28,7 @@
     SET_DISPLAY_MODE_FOLIO,
     SET_DISPLAY_MODE_DEFAULT,
     SET_DISPLAY_MODE_METRICAL,
+    SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS,
   } from '@/constants';
 
   export default {
@@ -52,30 +56,42 @@
       metrical() {
         return this.displayMode === 'metrical';
       },
+      sentence() {
+        return this.displayMode === 'sentence-alignments';
+      },
     },
     methods: {
-      setDefault() {
-        this.$store.dispatch(SET_DISPLAY_MODE_DEFAULT);
+      setWideLayout() {
+        document.getElementsByClassName('main-layout')[0]
+          .classList.add('main-layout-wide');
+      },
+      setNormalLayout() {
         document.getElementsByClassName('main-layout')[0]
           .classList.remove('main-layout-wide');
       },
+      setDefault() {
+        this.$store.dispatch(SET_DISPLAY_MODE_DEFAULT);
+        this.setNormalLayout();
+      },
       setInterlinear() {
         this.$store.dispatch(SET_DISPLAY_MODE_INTERLINEAR);
-        document.getElementsByClassName('main-layout')[0]
-          .classList.remove('main-layout-wide');
+        this.setNormalLayout();
       },
       setFolio() {
         this.$store.dispatch(SET_DISPLAY_MODE_FOLIO);
-        document.getElementsByClassName('main-layout')[0]
-          .classList.add('main-layout-wide');
+        this.setWideLayout();
       },
       setNamedEntities() {
         this.$store.dispatch(SET_DISPLAY_MODE_NAMED_ENTITIES);
-        document.getElementsByClassName('main-layout')[0]
-          .classList.remove('main-layout-wide');
+        this.setNormalLayout();
       },
       setMetrical() {
         this.$store.dispatch(SET_DISPLAY_MODE_METRICAL);
+        this.setNormalLayout();
+      },
+      setSentence() {
+        this.$store.dispatch(SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS);
+        this.setWideLayout();
       },
     },
   };

From eeca284b851fdafe3488f60d3f4c6a2fb75280b9 Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Thu, 11 Jun 2020 12:44:22 -0500
Subject: [PATCH 08/12] Set text width on display mode change

---
 src/widgets/DisplayModeWidget.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/widgets/DisplayModeWidget.vue b/src/widgets/DisplayModeWidget.vue
index 1ae09c9..9d87b07 100644
--- a/src/widgets/DisplayModeWidget.vue
+++ b/src/widgets/DisplayModeWidget.vue
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+  import WIDGETS_NS from '@scaife-viewer/scaife-widgets';
   import {
     SET_DISPLAY_MODE_INTERLINEAR,
     SET_DISPLAY_MODE_NAMED_ENTITIES,
@@ -69,29 +70,45 @@
         document.getElementsByClassName('main-layout')[0]
           .classList.remove('main-layout-wide');
       },
+      setWideText() {
+        this.$store.dispatch(`${WIDGETS_NS}/setTextWidth`, {
+          width: 'wide',
+        });
+      },
+      setNormalText() {
+        this.$store.dispatch(`${WIDGETS_NS}/setTextWidth`, {
+          width: 'normal',
+        });
+      },
       setDefault() {
         this.$store.dispatch(SET_DISPLAY_MODE_DEFAULT);
         this.setNormalLayout();
+        this.setNormalText()
       },
       setInterlinear() {
         this.$store.dispatch(SET_DISPLAY_MODE_INTERLINEAR);
         this.setNormalLayout();
+        this.setNormalText()
       },
       setFolio() {
         this.$store.dispatch(SET_DISPLAY_MODE_FOLIO);
         this.setWideLayout();
+        this.setNormalText()
       },
       setNamedEntities() {
         this.$store.dispatch(SET_DISPLAY_MODE_NAMED_ENTITIES);
         this.setNormalLayout();
+        this.setNormalText()
       },
       setMetrical() {
         this.$store.dispatch(SET_DISPLAY_MODE_METRICAL);
         this.setNormalLayout();
+        this.setWideText();
       },
       setSentence() {
         this.$store.dispatch(SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS);
         this.setWideLayout();
+        this.setNormalText()
       },
     },
   };

From 5d0a0b2f3a37f71f77523502f82e8339a46d49fe Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Thu, 11 Jun 2020 12:54:28 -0500
Subject: [PATCH 09/12] Fix up sentence alignment issues

---
 src/reader/components/Alignment.vue  |  5 ++++
 src/reader/components/Alignments.vue | 38 ++++++++++++++++++++++++++--
 src/reader/widgets/ReaderWidget.vue  |  7 ++++-
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/reader/components/Alignment.vue b/src/reader/components/Alignment.vue
index aaea8b4..1567aac 100644
--- a/src/reader/components/Alignment.vue
+++ b/src/reader/components/Alignment.vue
@@ -24,6 +24,7 @@
 </script>
 
 <style lang="scss" scoped>
+  @import '../../styles/variables';
   .alignment {
     margin-bottom: 20px;
     .columns {
@@ -37,6 +38,7 @@
       }
       .right {
         padding-left: 0.5rem;
+        padding-right: 0.25rem;
       }
     }
   }
@@ -61,4 +63,7 @@
       margin-left: 1rem;
     }
   }
+  .line {
+    font-family: $font-family-serif;
+  }
 </style>
diff --git a/src/reader/components/Alignments.vue b/src/reader/components/Alignments.vue
index 78837dc..211933d 100644
--- a/src/reader/components/Alignments.vue
+++ b/src/reader/components/Alignments.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="alignments">
+  <div
+    class="alignments"
+    :class="[`text-${textSize}`, `text-width-${textWidth}`]"
+  >
     <Alignment
       v-for="(alignment, index) in alignments"
       :key="index"
@@ -13,11 +16,42 @@
   import Alignment from './Alignment.vue';
 
   export default {
-    props: ['alignments'],
+    props: ['alignments', 'textSize', 'textWidth'],
     components: { Alignment },
   }
 </script>
 
 <style lang="scss" scoped>
+  .text-xs {
+    font-size: 12px;
+  }
+  .text-sm {
+    font-size: 14px;
+  }
+  .text-md {
+    font-size: 16px;
+  }
+  .text-lg {
+    font-size: 20px;
+  }
+  .text-xl {
+    font-size: 24px;
+  }
+
+  // TODO: media queries for defaults?
+  .text-width-narrow {
+    max-width: 20em;
+  }
+
+  .text-width-normal {
+    max-width: 30em;
+  }
 
+  .text-width-wide {
+    max-width: 40em;
+  }
+
+  .text-width-full {
+    max-width: 100%;
+  }
 </style>
diff --git a/src/reader/widgets/ReaderWidget.vue b/src/reader/widgets/ReaderWidget.vue
index 4cf7f2a..36cdd15 100644
--- a/src/reader/widgets/ReaderWidget.vue
+++ b/src/reader/widgets/ReaderWidget.vue
@@ -14,7 +14,12 @@
             No image annotations were found for the selected passage.
           </div>
         </template>
-        <Alignments v-else-if="alignmentMode" :alignments="alignments" />
+        <Alignments
+          v-else-if="alignmentMode"
+          :alignments="alignments"
+          :textSize="textSize"
+          :textWidth="textWidth"
+        />
         <Reader
           v-else
           :lines="lines"

From cc58e128141537cbbf79bd395ecb0fb786b54410 Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Thu, 11 Jun 2020 13:55:55 -0500
Subject: [PATCH 10/12] Apply width to columns

---
 src/reader/components/Alignment.vue  | 10 +++++-----
 src/reader/components/Alignments.vue |  7 +++----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/reader/components/Alignment.vue b/src/reader/components/Alignment.vue
index 1567aac..664156a 100644
--- a/src/reader/components/Alignment.vue
+++ b/src/reader/components/Alignment.vue
@@ -2,14 +2,14 @@
   <div class="alignment">
     <div class="alignment-ref">{{ right[0][0] }}</div>
     <div class="columns">
-      <div class="left">
-        <div class="line" :class="line[2]" v-for="line in left" :key="line[0]">
+      <div :class="['left', `text-${textSize}`, `text-width-${textWidth}`]">
+        <div v-for="line in left" :key="line[0]" :class="['line', line[2]]">
           <span class="line-ref">{{ line[0] }}</span>
           <span class="line-text">{{ line[1] }}</span>
         </div>
       </div>
-      <div class="right">
-        <div class="line" :class="line[2]" v-for="line in right" :key="line[0]">
+      <div :class="['right', `text-${textSize}`, `text-width-${textWidth}`]">
+        <div v-for="line in right" :key="line[0]" :class="['line', line[2]]">
           {{ line[1] }}
         </div>
       </div>
@@ -19,7 +19,7 @@
 
 <script>
   export default {
-    props: ['left', 'right'],
+    props: ['left', 'right', 'textSize', 'textWidth'],
   }
 </script>
 
diff --git a/src/reader/components/Alignments.vue b/src/reader/components/Alignments.vue
index 211933d..b58f160 100644
--- a/src/reader/components/Alignments.vue
+++ b/src/reader/components/Alignments.vue
@@ -1,13 +1,12 @@
 <template>
-  <div
-    class="alignments"
-    :class="[`text-${textSize}`, `text-width-${textWidth}`]"
-  >
+  <div class="alignments">
     <Alignment
       v-for="(alignment, index) in alignments"
       :key="index"
       :left="alignment[0]"
       :right="alignment[1]"
+      :textSize="textSize"
+      :textWidth="textWidth"
     />
   </div>
 </template>

From f5526f3fffbcf894ad8fac13e19cde8ea74ced0a Mon Sep 17 00:00:00 2001
From: Patrick Altman <paltman@gmail.com>
Date: Thu, 11 Jun 2020 14:09:35 -0500
Subject: [PATCH 11/12] Add line heights

---
 src/reader/components/Alignment.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/reader/components/Alignment.vue b/src/reader/components/Alignment.vue
index 664156a..1b3a09f 100644
--- a/src/reader/components/Alignment.vue
+++ b/src/reader/components/Alignment.vue
@@ -66,4 +66,20 @@
   .line {
     font-family: $font-family-serif;
   }
+
+  .text-xs .line {
+    line-height: 1.5;
+  }
+  .text-sm .line {
+    line-height: 1.6;
+  }
+  .text-md .line {
+    line-height: 1.7;
+  }
+  .text-lg .line {
+    line-height: 1.8;
+  }
+  .text-xl .line {
+    line-height: 1.9;
+  }
 </style>

From c1568228e957f671307e61532963d92ceefd9c1c Mon Sep 17 00:00:00 2001
From: Jacob Wegner <jwegner@eldarion.com>
Date: Wed, 10 Jun 2020 17:28:36 -0500
Subject: [PATCH 12/12] update to latest scaife-widgets release with styling
 fixes

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 4cdd11c..3faed35 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
-    "@scaife-viewer/scaife-widgets": "0.13.0",
+    "@scaife-viewer/scaife-widgets": "0.13.1",
     "apollo-boost": "^0.4.7",
     "core-js": "^3.6.5",
     "graphql": "^15.0.0",
diff --git a/yarn.lock b/yarn.lock
index 00c0f76..ebd48b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1432,10 +1432,10 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@scaife-viewer/scaife-widgets@0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@scaife-viewer/scaife-widgets/-/scaife-widgets-0.13.0.tgz#db3bce5ee314aa94e86af4152947b3586bb78b05"
-  integrity sha512-xiOUsSuP8PBtSBmHts+OJg/h80XEMdxkuv+SBJQtxqqV27RoD6nKCpF2RPaz1YGPERjg5/G8y7s6mbYQ4fEP9A==
+"@scaife-viewer/scaife-widgets@0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@scaife-viewer/scaife-widgets/-/scaife-widgets-0.13.1.tgz#40da92bf603b8247ffc3aa2f69a661927873c194"
+  integrity sha512-2HKzXu+0RSalwghDi9GzbV8x5iKBKs2l1da2Bn9eLNhqtEWdE+a0zQj19tBphf8ztEnXbKVHAJZyWgfpqNgmCg==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^1.2.25"
     "@fortawesome/free-solid-svg-icons" "^5.11.2"