From b07d09ed887d1949f17800d6be2a4d21b766ed63 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Tue, 2 Jan 2024 15:19:00 -0600
Subject: [PATCH 1/6] feat: Clone widget-commentary as widget-textual-notes

---
 packages/widget-commentary/src/index.js       |   6 +-
 packages/widget-textual-notes/LICENSE         |  21 +
 packages/widget-textual-notes/README.md       |   6 +
 packages/widget-textual-notes/package.json    |  17 +
 .../src/TextualNotesWidget.vue                | 473 ++++++++++++++++++
 packages/widget-textual-notes/src/index.js    |   4 +
 src/ExploreHomer.vue                          |   2 +
 yarn.lock                                     |  23 +-
 8 files changed, 544 insertions(+), 8 deletions(-)
 create mode 100644 packages/widget-textual-notes/LICENSE
 create mode 100644 packages/widget-textual-notes/README.md
 create mode 100644 packages/widget-textual-notes/package.json
 create mode 100644 packages/widget-textual-notes/src/TextualNotesWidget.vue
 create mode 100644 packages/widget-textual-notes/src/index.js

diff --git a/packages/widget-commentary/src/index.js b/packages/widget-commentary/src/index.js
index dd2e240..31e6e34 100644
--- a/packages/widget-commentary/src/index.js
+++ b/packages/widget-commentary/src/index.js
@@ -1,11 +1,13 @@
 // TODO: Export / target SV 2
 import CommentaryWidget from './CommentaryWidget.vue';
-
 import CommentaryWidget2 from './CommentaryWidget2.vue';
 
+// NOTE: Used by widget-textual-notes
+import CommentaryLine from './CommentaryLine.vue';
+
 const CommentaryWidgetSV1 = CommentaryWidget;
 const CommentaryWidgetSV2 = CommentaryWidget2;
 
 export default CommentaryWidgetSV1;
 
-export { CommentaryWidgetSV1, CommentaryWidgetSV2 };
+export { CommentaryWidgetSV1, CommentaryWidgetSV2, CommentaryLine };
diff --git a/packages/widget-textual-notes/LICENSE b/packages/widget-textual-notes/LICENSE
new file mode 100644
index 0000000..8d5af72
--- /dev/null
+++ b/packages/widget-textual-notes/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-2023 Perseus Digital Library
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/widget-textual-notes/README.md b/packages/widget-textual-notes/README.md
new file mode 100644
index 0000000..909d934
--- /dev/null
+++ b/packages/widget-textual-notes/README.md
@@ -0,0 +1,6 @@
+# widget-textual-notes
+
+A widget that displays textual notes.
+
+_NOTE:_ This widget reuses code from `@scaife-viewer/widget-commentary`
+
diff --git a/packages/widget-textual-notes/package.json b/packages/widget-textual-notes/package.json
new file mode 100644
index 0000000..39d89dd
--- /dev/null
+++ b/packages/widget-textual-notes/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@scaife-viewer/widget-textual-notes",
+  "packageManager": "yarn@3.6.4",
+  "version": "0.6.0",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Eldarion",
+  "license": "MIT",
+  "dependencies": {
+    "@scaife-viewer/common": "^0.6.0",
+    "@scaife-viewer/store": "^0.6.0",
+    "@scaife-viewer/widget-commentary": "^0.6.0",
+    "graphql-tag": "^2.12.6"
+  }
+}
diff --git a/packages/widget-textual-notes/src/TextualNotesWidget.vue b/packages/widget-textual-notes/src/TextualNotesWidget.vue
new file mode 100644
index 0000000..03bcd40
--- /dev/null
+++ b/packages/widget-textual-notes/src/TextualNotesWidget.vue
@@ -0,0 +1,473 @@
+<template>
+  <div class="commentary">
+    <!-- TODO: Select a commentary set -->
+    <!-- TODO: Show attributions -->
+    <div :key="urn.absolute" class="commentary-container">
+      <div v-if="showToolbar" class="commentary-container-controls">
+        <!-- TODO: Put these behind a cog and revisit labels -->
+        <!-- Sync mode scroll to token could change the icon color -->
+        <span @click="toggleHighlight()">
+          <div class="mode">
+            <a :class="[{ active: !showCommentary }]"> hide </a>
+            <a :class="[{ active: showCommentary }]"> show </a>
+          </div>
+          <div class="help">
+            <span v-if="!showCommentary">
+              commentary annotations are hidden
+            </span>
+            <span v-else> commentary annotations are shown </span>
+          </div>
+        </span>
+        <span @click="toggleCommentarySync()">
+          <div class="mode sync-mode">
+            <a :class="[{ active: !syncCommentary }]"> independent </a>
+            <a :class="[{ active: syncCommentary }]"> sync </a>
+          </div>
+          <div class="help">
+            <span v-if="!syncCommentary">
+              scroll commentary independently
+            </span>
+            <span v-else> scroll to an annotation when selected </span>
+          </div>
+        </span>
+      </div>
+      <div class="toolbar" v-if="showWitnesses">
+        <CustomSelect
+          v-model="selectedWitness"
+          :options="witnesses"
+          placeholder="Select an alignment..."
+        />
+      </div>
+      <EmptyMessage v-if="invalidReff">
+        View passage at
+        <router-link
+          :to="{ name: 'reader', params: { urn: healedPassage.toString() } }"
+        >
+          {{ healedPassage.reference }}
+        </router-link>
+        to show commentary
+      </EmptyMessage>
+      <EmptyMessage v-else-if="!filteredLines || filteredLines.length === 0" />
+      <template v-else-if="!invalidReff">
+        <div
+          v-for="[fragment, lines] in filteredFragmentMap"
+          :key="fragment"
+          class="line"
+          :class="{ selected: isMultiSelected(lines) }"
+          :id="`line-${lines[0].id}`"
+        >
+          <div class="fragment" @click.prevent="onSelect(lines[0])">
+            <em>
+              {{ fragment }}
+              <span v-if="lines.length > 1"> ({{ lines.length }}) </span>
+            </em>
+          </div>
+          <template v-if="isMultiSelected(lines)">
+            <CommentaryLine v-for="line in lines" :key="line.id" :line="line" />
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+  import URN, { CustomSelect, EmptyMessage } from '@scaife-viewer/common';
+
+  import gql from 'graphql-tag';
+
+  import {
+    MODULE_NS,
+    TOGGLE_READER_SYNC_COMMENTARY,
+    SET_COMMENTARIES,
+    SET_SELECTED_COMMENTARIES,
+    CLEAR_SELECTED_COMMENTARIES,
+  } from '@scaife-viewer/store';
+  import { CommentaryLine } from '@scaife-viewer/widget-commentary';
+  // TODO: Refactor default ALL_ label to callback too
+  const ALL_WITNESSES = { value: null, title: 'All Witnesses' };
+
+  export default {
+    scaifeConfig: {
+      displayName: 'Textual Notes'
+    },
+    name: 'TextualNotesWidget',
+    // TODO: Provide attribution functionality
+    components: {
+      EmptyMessage,
+      CustomSelect,
+      CommentaryLine,
+    },
+    data() {
+      // TODO: Set component local toggle that drives the store
+      // to toggle commentary highlighting on / off in the reader.
+      return {
+        selectedWitness: ALL_WITNESSES,
+        witnesses: [],
+        commentaryCollectionUrn: this.$scaife.config.commentaryCollectionUrn,
+      };
+    },
+    computed: {
+      refDepth() {
+        return this.urn.reference.split('-')[0].split('.').length;
+      },
+      invalidReff() {
+        // FIXME: Make compatible with SV1 version
+        // return this.refDepth !== 2;
+        return false;
+      },
+      healedPassage() {
+        if (this.invalidReff) {
+          // const versionUrn = this.urn.upTo('version');
+          const versionUrn = this.urn.version;
+          const firstRef = this.urn.reference.split('-')[0];
+          return this.refDepth === 1
+            ? new URN(`${versionUrn}:${firstRef}.1.1`)
+            : new URN(`${versionUrn}:${firstRef}.1`);
+        }
+        return this.urn;
+      },
+      showCommentary() {
+        return this.$store.getters[`${MODULE_NS}/showCommentary`];
+      },
+      syncCommentary() {
+        return this.$store.state[MODULE_NS].syncCommentary;
+      },
+      showWitnesses() {
+        // TODO: tie this into $scaife.config and also set
+        // defaults in the widget itself, would require passing upstream
+        return false;
+      },
+      showToolbar() {
+        // TODO: Rework this as slots?
+        return false;
+      },
+      show() {
+        // TODO: Restore the previous functionality where we used a 404
+        // from the server to determine if the widget was shown or not.
+        // return this.urn.textGroup === 'stoa0023';
+        return true;
+      },
+      // TODO: regroup lines using fragment, sort_key and ve_refs
+      // possibly server side?
+      filteredLines() {
+        if (this.selectedWitness.value === null) {
+          return this.lines;
+        }
+        const filteredToWitness = this.lines.filter(line => {
+          return (
+            line.data.witnesses.filter(
+              witness => witness.value === this.selectedWitness.value,
+            ).length > 0
+          );
+        });
+        return filteredToWitness;
+      },
+      filteredFragmentMap() {
+        const byFragment = new Map();
+        this.filteredLines.forEach(line => {
+          const key = line.data.fragment;
+          const lookupValue = byFragment.get(key) || [];
+          lookupValue.push(line);
+          byFragment.set(key, lookupValue);
+        });
+        return byFragment;
+      },
+      urn() {
+        return this.$store.getters[`${MODULE_NS}/urn`];
+      },
+      selectedCommentaries() {
+        return this.$store.state[MODULE_NS].selectedCommentaries || [];
+      },
+      passage() {
+        return this.urn;
+      },
+      selectedWords() {
+        return this.$store.getters['reader/selectedWords'];
+      },
+    },
+    watch: {
+      lines: {
+        handler() {
+          this.updateWitnesses();
+        },
+      },
+      filteredLines: {
+        immediate: true,
+        handler(newVal) {
+          if (newVal) {
+            // TODO: Proper mutation
+            // OPTION B: Filter via selected lines
+            const lookup = this.buildTokenLookup(newVal);
+            this.$store.dispatch(`${MODULE_NS}/${SET_COMMENTARIES}`, {
+              lookup,
+            });
+          }
+        },
+      },
+      selectedCommentaries: {
+        handler(newVal) {
+          if (newVal.length) {
+            const id = newVal[0];
+            this.$nextTick(() => {
+              if (this.syncCommentary) {
+                // TODO: Prefer using named refs and a few view events
+                const selector = `#line-${id}`;
+                const $lineElem = document.querySelector(selector);
+                $lineElem.scrollIntoView();
+
+                // TODO: This could / should also be a ref
+                const offset = this.$el.parentElement.querySelector(
+                  '.sticky-block',
+                ).clientHeight;
+                this.$el.parentElement.scrollTop -= offset;
+              }
+            });
+          }
+        },
+      },
+    },
+    methods: {
+      toggleHighlight() {
+        const query = {
+          ...this.$route.query,
+        };
+
+        if (this.showCommentary) {
+          delete query.commentary;
+        } else {
+          query.commentary = 'y';
+        }
+        this.$router.replace({ query });
+      },
+      toggleCommentarySync() {
+        this.$store.dispatch(`${MODULE_NS}/${TOGGLE_READER_SYNC_COMMENTARY}`);
+      },
+      onSelect(commentary) {
+        // TODO: Prefer actions here
+        // this.$store.dispatch('reader/READER_SET_SELECTED_TOKEN', {
+        //   token: null,
+        // });
+        const isCurrentlySelected =
+          this.selectedCommentaries.filter(id => commentary.id === id).length >
+          0;
+        if (isCurrentlySelected) {
+          this.$store.dispatch(`${MODULE_NS}/${CLEAR_SELECTED_COMMENTARIES}`);
+          // this.$store.dispatch(
+          //   `reader/${constants.READER_SET_SELECTED_TOKEN}`,
+          //   { token: null },
+          // );
+        } else {
+          this.$store.dispatch(`${MODULE_NS}/${SET_SELECTED_COMMENTARIES}`, {
+            commentaries: [commentary.id],
+          });
+        }
+      },
+      // TODO: Watch for token changes too?
+      // We may need to simplify into its own mode
+      isMultiSelected(lines) {
+        const selectedIds = lines.map(line => line.id);
+        const selected = [];
+        selectedIds.forEach(id => {
+          selected.push(
+            this.selectedCommentaries.filter(entityId => entityId === id)
+              .length > 0,
+          );
+        });
+        return selected.filter(selection => selection).length > 0;
+      },
+      isSelected(id) {
+        const value =
+          this.selectedCommentaries.filter(entityId => entityId === id).length >
+          0;
+        // TODO: Tweak this and set this up
+        // if (value) {
+        //   this.$el.scrollIntoView();
+        //   document.querySelector(`#${id}`).scrollIntoView();
+        // }
+
+        return value;
+      },
+      buildTokenLookup(annotations) {
+        // FIXME: Namespace tokens with URN due to parallel reader
+        const tokenLookup = {};
+        annotations
+          .filter(annotation => (annotation.data.veRefs || []).length > 0)
+          .forEach(annotation => {
+            annotation.data.veRefs.forEach(veRef => {
+              tokenLookup[veRef] = tokenLookup[veRef] || [];
+              tokenLookup[veRef].push(annotation.id);
+            });
+          });
+        return tokenLookup;
+      },
+      buildWitnesses() {
+        const witnessLookup = {};
+        this.lines.forEach(line => {
+          const witnesses = line.data.witnesses || [{ value: null, label: '' }];
+          witnesses.forEach(witness => {
+            // FIXME: Clashing IDs?
+            witnessLookup[witness.value] = witness;
+          });
+        });
+        // TODO: Sort
+        const witnesses = Object.values(witnessLookup).map(witness => ({
+          title: witness.label,
+          value: witness.value,
+        }));
+        return witnesses.sort((a, b) => a.title.localeCompare(b.title));
+      },
+      updateWitnesses() {
+        // FIXME: Handle a witness is selected but no longer available;
+        // c.f. alignments
+
+        this.witnesses = [ALL_WITNESSES, ...this.buildWitnesses()];
+      },
+    },
+    apollo: {
+      lines: {
+        query: gql`
+          query Commentaries($urn: String!, $collectionUrn: ID) {
+            textAnnotations(
+              reference: $urn
+              collection_Urn: $collectionUrn
+              kind: "commentary"
+            ) {
+              edges {
+                node {
+                  id
+                  idx
+                  data
+                }
+              }
+            }
+          }
+        `,
+        variables() {
+          return {
+            urn: `${this.urn}`,
+            collectionUrn: this.commentaryCollectionUrn || '',
+          };
+        },
+        update(data) {
+          const annotations = data.textAnnotations.edges.map(e => ({
+            id: e.node.id,
+            idx: e.node.idx,
+            data: e.node.data,
+          }));
+          // return annotations;
+          // OPTION A: Annotations always shown
+          // const prototypeState = this.$store.state.prototype;
+          // prototypeState.commentaryTokensLookup = this.buildTokenLookup(
+          //   annotations,
+          // );
+          // TODO: Add server-side option for sorting
+          // TODO: Really need server-side option for sorting
+          // TODO: Sorting breaks across references
+          // 14.1.1-14.1.2
+          // The best sort key is indeed using path / IDX,
+          // so we should think about how we want to do that with ingestion.
+          // FIXME: fallback
+          // TODO: Standardize sorting with SV1
+          // return annotations.sort(
+          //   (a, b) =>
+          //     a.data.sortKey[0][0] - b.data.sortKey[0][0] ||
+          //     a.data.sortKey[0][1] - b.data.sortKey[0][1] ||
+          //     a.data.sortKey[0][2] - b.data.sortKey[0][2] ||
+          //     a.data.sortKey[1] - b.data.sortKey[1],
+          // );
+          return annotations;
+        },
+        skip() {
+          return this.urn === null || this.invalidReff;
+        },
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  // TODO: Standardize color variables
+  // across SV packages; standards with fallback probably ok.
+  $gray-200: #e9ecef;
+  $gray-500: #adb5bd;
+  $gray-600: #868e96;
+  $gray-700: #495057;
+  $black: #000;
+  .commentary {
+    flex: 1;
+  }
+  .commentary-container {
+    width: 100%;
+  }
+
+  .commentary-container-controls {
+    // TODO: revisit /refactor with other controls, e.g.
+    // text-width-control
+    // NOTE: These styles
+    .mode a {
+      padding: 3px 6px;
+
+      font-family: var(
+        --sv-widget-commentary-controls-font-family,
+        'Noto Serif'
+      );
+      font-size: 12px;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      cursor: pointer;
+      color: $gray-500;
+      &.active {
+        color: $black;
+        &:hover {
+          color: $black;
+        }
+      }
+      &:hover {
+        color: $gray-700;
+        background: $gray-200;
+      }
+    }
+    .sync-mode {
+      margin-top: 1em;
+    }
+    .help {
+      margin-left: 6px;
+      font-size: 11px;
+      color: $gray-600;
+    }
+  }
+
+  .line {
+    font-family: var(--sv-widget-commentaries-font-family, 'Noto Serif');
+    font-size: 14px;
+    .fragment {
+      font-weight: 200;
+      color: $gray-600;
+      display: flex;
+      justify-content: space-between;
+      cursor: pointer;
+    }
+    // TODO: scaife framework setting
+    // do we want this widget to do this on hover too?
+    margin: 0.375rem 0;
+
+    // TODO: SV1 / SV2 difference with sidebar margin
+    padding: 0px 7px;
+  }
+  .line.selected {
+    background: var(
+      --sv-widget-commentaries-selected-background-color,
+      #f8f9fa
+    );
+    // TODO: margin-left commented out
+    // due to SV 1 / SV 2 difference
+    // margin-left: -10px;
+    // SV 2
+    // .widget-sidebar .body>div {
+    //     margin: 0 2em;
+    // }
+    padding: 3px 7px;
+    border-left: 3px solid
+      var(--sv-widget-commentaries-selected-border-color, #343a40);
+  }
+</style>
diff --git a/packages/widget-textual-notes/src/index.js b/packages/widget-textual-notes/src/index.js
new file mode 100644
index 0000000..2aa0dc4
--- /dev/null
+++ b/packages/widget-textual-notes/src/index.js
@@ -0,0 +1,4 @@
+// TODO: Refactor with widget-commentary
+import TextualNotesWidget from './TextualNotesWidget.vue';
+
+export default TextualNotesWidget;
diff --git a/src/ExploreHomer.vue b/src/ExploreHomer.vue
index d9995e1..795b31b 100644
--- a/src/ExploreHomer.vue
+++ b/src/ExploreHomer.vue
@@ -16,6 +16,7 @@
 
   import ReaderWidget from '@scaife-viewer/widget-reader';
   import { CommentaryWidgetSV2 } from '@scaife-viewer/widget-commentary';
+  import TextualNotesWidget from '@scaife-viewer/widget-textual-notes';
   import RepoMetadataWidget from '@scaife-viewer/widget-repo-metadata';
   import MetadataWidget from '@scaife-viewer/widget-metadata';
   // FIXME: Restore once we've synchronized ATLAS branches
@@ -90,6 +91,7 @@
           MorphologyWidget,
           WordListWidget,
           NewAlexandriaWidget,
+          TextualNotesWidget,
           ScholiaWidget,
           CommentaryWidgetSV2,
           EmbedWidget,
diff --git a/yarn.lock b/yarn.lock
index a5f7ac3..e4213cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1569,7 +1569,7 @@ __metadata:
   dependencies:
     "@scaife-viewer/common": ^0.6.0
     "@scaife-viewer/store": ^0.6.0
-    "@scaife-viewer/widget-attributions": ^0.6.0
+    "@scaife-viewer/widget-attributions": ^0.6.1
     graphql-tag: ^2.10.3
   languageName: unknown
   linkType: soft
@@ -1668,8 +1668,8 @@ __metadata:
   dependencies:
     "@scaife-viewer/common": ^0.6.0
     "@scaife-viewer/store": ^0.6.0
-    "@scaife-viewer/vue-treant": ^0.6.0
-    "@scaife-viewer/widget-attributions": ^0.6.0
+    "@scaife-viewer/vue-treant": ^0.6.1
+    "@scaife-viewer/widget-attributions": ^0.6.1
     graphql-tag: ^2.10.3
     vue-apollo: ^3.0.4
   languageName: unknown
@@ -1709,7 +1709,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@scaife-viewer/vue-treant@^0.6.0, @scaife-viewer/vue-treant@workspace:packages/vue-treant":
+"@scaife-viewer/vue-treant@^0.6.1, @scaife-viewer/vue-treant@workspace:packages/vue-treant":
   version: 0.0.0-use.local
   resolution: "@scaife-viewer/vue-treant@workspace:packages/vue-treant"
   dependencies:
@@ -1719,7 +1719,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@scaife-viewer/widget-attributions@^0.6.0, @scaife-viewer/widget-attributions@workspace:packages/widget-attributions":
+"@scaife-viewer/widget-attributions@^0.6.1, @scaife-viewer/widget-attributions@workspace:packages/widget-attributions":
   version: 0.0.0-use.local
   resolution: "@scaife-viewer/widget-attributions@workspace:packages/widget-attributions"
   dependencies:
@@ -1739,7 +1739,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@scaife-viewer/widget-commentary@workspace:packages/widget-commentary":
+"@scaife-viewer/widget-commentary@^0.6.0, @scaife-viewer/widget-commentary@workspace:packages/widget-commentary":
   version: 0.0.0-use.local
   resolution: "@scaife-viewer/widget-commentary@workspace:packages/widget-commentary"
   dependencies:
@@ -1958,6 +1958,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@scaife-viewer/widget-textual-notes@workspace:packages/widget-textual-notes":
+  version: 0.0.0-use.local
+  resolution: "@scaife-viewer/widget-textual-notes@workspace:packages/widget-textual-notes"
+  dependencies:
+    "@scaife-viewer/common": ^0.6.0
+    "@scaife-viewer/store": ^0.6.0
+    "@scaife-viewer/widget-commentary": ^0.6.0
+    graphql-tag: ^2.12.6
+  languageName: unknown
+  linkType: soft
+
 "@scaife-viewer/widget-toc@workspace:packages/widget-toc":
   version: 0.0.0-use.local
   resolution: "@scaife-viewer/widget-toc@workspace:packages/widget-toc"

From 549c92843edf8709b6cd8d971af1f060d43d75df Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Tue, 2 Jan 2024 16:11:15 -0600
Subject: [PATCH 2/6] Switch TextualNotesWidget over to textualnotes endpoint

---
 .../widget-textual-notes/src/TextualNotesWidget.vue  | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/widget-textual-notes/src/TextualNotesWidget.vue b/packages/widget-textual-notes/src/TextualNotesWidget.vue
index 03bcd40..2dbf8c2 100644
--- a/packages/widget-textual-notes/src/TextualNotesWidget.vue
+++ b/packages/widget-textual-notes/src/TextualNotesWidget.vue
@@ -88,7 +88,7 @@
 
   export default {
     scaifeConfig: {
-      displayName: 'Textual Notes'
+      displayName: 'Textual Notes',
     },
     name: 'TextualNotesWidget',
     // TODO: Provide attribution functionality
@@ -326,12 +326,8 @@
     apollo: {
       lines: {
         query: gql`
-          query Commentaries($urn: String!, $collectionUrn: ID) {
-            textAnnotations(
-              reference: $urn
-              collection_Urn: $collectionUrn
-              kind: "commentary"
-            ) {
+          query TextualNotes($urn: String!, $collectionUrn: ID) {
+            textualNotes(reference: $urn, collection_Urn: $collectionUrn) {
               edges {
                 node {
                   id
@@ -349,7 +345,7 @@
           };
         },
         update(data) {
-          const annotations = data.textAnnotations.edges.map(e => ({
+          const annotations = data.textualNotes.edges.map(e => ({
             id: e.node.id,
             idx: e.node.idx,
             data: e.node.data,

From 76f7be1b7055cb7280ec187f778bdb708ab778cf Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Tue, 2 Jan 2024 16:16:01 -0600
Subject: [PATCH 3/6] Add support for textual notes display mode

---
 packages/store/src/constants.js            | 1 +
 packages/store/src/index.js                | 2 ++
 packages/store/src/store.js                | 4 ++++
 packages/widget-reader/src/ReaderToken.vue | 7 ++++++-
 src/main.js                                | 3 +++
 5 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/store/src/constants.js b/packages/store/src/constants.js
index d83e33b..f8ee224 100644
--- a/packages/store/src/constants.js
+++ b/packages/store/src/constants.js
@@ -49,6 +49,7 @@ export const DISPLAY_MODE_METRICAL = 'metrical';
 export const DISPLAY_MODE_DICTIONARY_ENTRIES = 'dictionary-entries';
 export const DISPLAY_MODE_NAMED_ENTITIES = 'named-entities';
 export const DISPLAY_MODE_COMMENTARIES = 'commentaries';
+export const DISPLAY_MODE_TEXTUAL_NOTES = 'textual-notes';
 export const DISPLAY_MODE_SYNTAX_TREES = 'syntax-trees';
 export const DISPLAY_MODE_GRAMMATICAL_ENTRIES = 'grammatical-entries';
 export const DISPLAY_MODE_FALLBACK = 'fallback';
diff --git a/packages/store/src/index.js b/packages/store/src/index.js
index d8bee09..5b615f4 100644
--- a/packages/store/src/index.js
+++ b/packages/store/src/index.js
@@ -38,6 +38,7 @@ import {
   DISPLAY_MODE_DICTIONARY_ENTRIES,
   DISPLAY_MODE_NAMED_ENTITIES,
   DISPLAY_MODE_COMMENTARIES,
+  DISPLAY_MODE_TEXTUAL_NOTES,
   DISPLAY_MODE_SYNTAX_TREES,
   DISPLAY_MODE_GRAMMATICAL_ENTRIES,
   DISPLAY_MODE_FALLBACK,
@@ -107,6 +108,7 @@ export {
   DISPLAY_MODE_DICTIONARY_ENTRIES,
   DISPLAY_MODE_NAMED_ENTITIES,
   DISPLAY_MODE_COMMENTARIES,
+  DISPLAY_MODE_TEXTUAL_NOTES,
   DISPLAY_MODE_SYNTAX_TREES,
   DISPLAY_MODE_GRAMMATICAL_ENTRIES,
   DISPLAY_MODE_FALLBACK,
diff --git a/packages/store/src/store.js b/packages/store/src/store.js
index a8cb212..3a759bb 100644
--- a/packages/store/src/store.js
+++ b/packages/store/src/store.js
@@ -37,6 +37,7 @@ import {
   DISPLAY_MODE_DICTIONARY_ENTRIES,
   DISPLAY_MODE_NAMED_ENTITIES,
   DISPLAY_MODE_COMMENTARIES,
+  DISPLAY_MODE_TEXTUAL_NOTES,
   DISPLAY_MODE_DEFAULT,
   DISPLAY_MODE_FALLBACK,
   SENSE_EXPANSION_PASSAGE,
@@ -147,6 +148,9 @@ const createStore = client => {
         commentariesMode: (_, getters) => {
           return getters.displayMode === DISPLAY_MODE_COMMENTARIES;
         },
+        textualNotesMode: (_, getters) => {
+          return getters.displayMode === DISPLAY_MODE_TEXTUAL_NOTES;
+        },
         fallbackMode: (_, getters) => {
           return getters.displayMode === DISPLAY_MODE_FALLBACK;
         },
diff --git a/packages/widget-reader/src/ReaderToken.vue b/packages/widget-reader/src/ReaderToken.vue
index caa03cc..85e7c2f 100644
--- a/packages/widget-reader/src/ReaderToken.vue
+++ b/packages/widget-reader/src/ReaderToken.vue
@@ -164,7 +164,11 @@
       },
       // TODO: Splat from store; revisit docs
       commentariesMode() {
-        return this.$store.getters[`${MODULE_NS}/commentariesMode`];
+        // TODO: Add textualNotesMode
+        return (
+          this.$store.getters[`${MODULE_NS}/commentariesMode`] ||
+          this.$store.getters[`${MODULE_NS}/textualNotesMode`]
+        );
       },
       entities() {
         return (this.token && this.token.entities) || [];
@@ -267,6 +271,7 @@
       //   //
       //   return this.$store.state[MODULE_NS].syncCommentary;
       // },
+      // TODO: Textual notes
       commentaries() {
         if (!this.commentary) {
           return [];
diff --git a/src/main.js b/src/main.js
index 27ff049..f852af6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@ import {
   DISPLAY_MODE_DICTIONARY_ENTRIES,
   DISPLAY_MODE_NAMED_ENTITIES,
   DISPLAY_MODE_COMMENTARIES,
+  DISPLAY_MODE_TEXTUAL_NOTES,
   DISPLAY_MODE_SYNTAX_TREES,
   DISPLAY_MODE_GRAMMATICAL_ENTRIES,
   DISPLAY_MODE_FALLBACK,
@@ -81,6 +82,8 @@ Vue.use(SkeletonPlugin, {
       [DISPLAY_MODE_DICTIONARY_ENTRIES]: DictionaryEntriesModeReader,
       [DISPLAY_MODE_NAMED_ENTITIES]: NamedEntitiesModeReader,
       [DISPLAY_MODE_COMMENTARIES]: CommentariesModeReader,
+      // TODO: Add TextualNotesModeReader
+      [DISPLAY_MODE_TEXTUAL_NOTES]: CommentariesModeReader,
       [DISPLAY_MODE_ALIGNMENTS]: AlignmentsModeReader,
       [DISPLAY_MODE_SYNTAX_TREES]: SyntaxTreesModeReader,
       [DISPLAY_MODE_GRAMMATICAL_ENTRIES]: GrammaticalEntriesModeReader,

From de5b1c264d7896411fb97c8741e571b93bbb1bb8 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Tue, 2 Jan 2024 16:46:20 -0600
Subject: [PATCH 4/6] Fix race condition between TextualNotes and
 CommentaryWidget

---
 packages/widget-commentary/src/CommentaryWidget2.vue     | 2 +-
 packages/widget-textual-notes/src/TextualNotesWidget.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/widget-commentary/src/CommentaryWidget2.vue b/packages/widget-commentary/src/CommentaryWidget2.vue
index dc78e1e..27d7ca5 100644
--- a/packages/widget-commentary/src/CommentaryWidget2.vue
+++ b/packages/widget-commentary/src/CommentaryWidget2.vue
@@ -197,7 +197,7 @@
       filteredLines: {
         immediate: true,
         handler(newVal) {
-          if (newVal) {
+          if (newVal.length) {
             // TODO: Proper mutation
             // OPTION B: Filter via selected lines
             const lookup = this.buildTokenLookup(newVal);
diff --git a/packages/widget-textual-notes/src/TextualNotesWidget.vue b/packages/widget-textual-notes/src/TextualNotesWidget.vue
index 2dbf8c2..eb4d6d6 100644
--- a/packages/widget-textual-notes/src/TextualNotesWidget.vue
+++ b/packages/widget-textual-notes/src/TextualNotesWidget.vue
@@ -194,7 +194,7 @@
       filteredLines: {
         immediate: true,
         handler(newVal) {
-          if (newVal) {
+          if (newVal.length) {
             // TODO: Proper mutation
             // OPTION B: Filter via selected lines
             const lookup = this.buildTokenLookup(newVal);

From b7b167a40378329e6f71007d50eeae21dadfc243 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Tue, 2 Jan 2024 16:52:42 -0600
Subject: [PATCH 5/6] Another attempt to fix race condition

---
 packages/widget-commentary/src/CommentaryWidget2.vue     | 2 +-
 packages/widget-textual-notes/src/TextualNotesWidget.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/widget-commentary/src/CommentaryWidget2.vue b/packages/widget-commentary/src/CommentaryWidget2.vue
index 27d7ca5..9a00f05 100644
--- a/packages/widget-commentary/src/CommentaryWidget2.vue
+++ b/packages/widget-commentary/src/CommentaryWidget2.vue
@@ -197,7 +197,7 @@
       filteredLines: {
         immediate: true,
         handler(newVal) {
-          if (newVal.length) {
+          if (newVal && newVal.length) {
             // TODO: Proper mutation
             // OPTION B: Filter via selected lines
             const lookup = this.buildTokenLookup(newVal);
diff --git a/packages/widget-textual-notes/src/TextualNotesWidget.vue b/packages/widget-textual-notes/src/TextualNotesWidget.vue
index eb4d6d6..d010e02 100644
--- a/packages/widget-textual-notes/src/TextualNotesWidget.vue
+++ b/packages/widget-textual-notes/src/TextualNotesWidget.vue
@@ -194,7 +194,7 @@
       filteredLines: {
         immediate: true,
         handler(newVal) {
-          if (newVal.length) {
+          if (newVal && newVal.length) {
             // TODO: Proper mutation
             // OPTION B: Filter via selected lines
             const lookup = this.buildTokenLookup(newVal);

From 3187f7c29f6ae202f971cd0d0c471f38886161df Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Tue, 2 Jan 2024 17:05:04 -0600
Subject: [PATCH 6/6] Update callback

---
 packages/reader-commentaries-mode/README.md                 | 2 ++
 .../reader-commentaries-mode/src/CommentariesModeReader.vue | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/reader-commentaries-mode/README.md b/packages/reader-commentaries-mode/README.md
index cc941fe..ac74704 100644
--- a/packages/reader-commentaries-mode/README.md
+++ b/packages/reader-commentaries-mode/README.md
@@ -4,4 +4,6 @@
 
 `$scaife.config.commentariesDisplayModeLabel`
 
+Callback, passed rootGetters and `$scaife` config object.
+
 Default value is `'Commentaries'`.
diff --git a/packages/reader-commentaries-mode/src/CommentariesModeReader.vue b/packages/reader-commentaries-mode/src/CommentariesModeReader.vue
index 7432f46..368c017 100644
--- a/packages/reader-commentaries-mode/src/CommentariesModeReader.vue
+++ b/packages/reader-commentaries-mode/src/CommentariesModeReader.vue
@@ -30,7 +30,11 @@
   } from '@scaife-viewer/common';
 
   const displayNameCallback = (rootGetters, $scaife) => {
-    return $scaife.config.commentariesDisplayModeLabel || 'Commentaries';
+    const callback = $scaife.config.commentariesDisplayModeLabel;
+    if (callback) {
+      return callback(rootGetters, $scaife)
+    }
+    return 'Commentaries';
   };
 
   export default {