From fff4d93f8c4513f93c9960405dfdd65eb8a4d574 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Mon, 3 Jul 2023 03:57:48 -0500
Subject: [PATCH 01/12] Title --> Label

Label was chosen because of conformance within ATLAS to the CITE data model used by the [Homer Multitext project](https://github.com/homermultitext/hmt-archive).

CTS workparts are modeled as:
- groupName
- workTitle
- versionLabel
- exemplarLabel

but most other CITE2 objects refer to either label or Labelling property
---
 packages/widget-toc/src/TOC.vue     | 4 ++--
 packages/widget-toc/src/reducers.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/widget-toc/src/TOC.vue b/packages/widget-toc/src/TOC.vue
index cae8f9aa..81e69e41 100644
--- a/packages/widget-toc/src/TOC.vue
+++ b/packages/widget-toc/src/TOC.vue
@@ -1,13 +1,13 @@
 <template>
   <aside class="toc-container">
-    <h3>{{ toc.title }}</h3>
+    <h3>{{ toc.label }}</h3>
     <p class="u-legend">{{ toc.description }}</p>
     <div class="toc-grid" v-if="toc.items.length">
       <template v-for="(item, index) in toc.items">
         <span :key="`index-${index}`" class="ref">{{ index + 1 }}.</span>
         <div :key="`item-${index}`" class="item">
           <router-link :to="getPayload(item.uri)">
-            {{ item.title }}
+            {{ item.label }}
           </router-link>
           <span v-if="showURNs">
             <tt>{{ item.uri }}</tt>
diff --git a/packages/widget-toc/src/reducers.js b/packages/widget-toc/src/reducers.js
index d3f21941..dd712b7e 100644
--- a/packages/widget-toc/src/reducers.js
+++ b/packages/widget-toc/src/reducers.js
@@ -1,5 +1,5 @@
 const tocReducer = (data, query) => {
-  const lenses = { getTitle: obj => obj.title, getUri: obj => obj.uri };
+  const lenses = { getLabel: obj => obj.label, getUri: obj => obj.uri };
   return {
     ...data,
     items: data.items.filter(obj =>

From c047a244f5567f14581c2fad076bb3314815cdd2 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Mon, 3 Jul 2023 04:27:48 -0500
Subject: [PATCH 02/12] Port TOCWidget to GraphQL and fix icons

---
 packages/widget-toc/README.md         |   3 +
 packages/widget-toc/package.json      |   4 +-
 packages/widget-toc/src/TOC.vue       |   1 +
 packages/widget-toc/src/TOCWidget.vue | 200 ++++++++++++++++++++------
 packages/widget-toc/src/icons.js      |  11 ++
 packages/widget-toc/src/index.js      |   2 +
 src/main.js                           |   2 +
 7 files changed, 176 insertions(+), 47 deletions(-)
 create mode 100644 packages/widget-toc/src/icons.js

diff --git a/packages/widget-toc/README.md b/packages/widget-toc/README.md
index e69de29b..b9e57f3c 100644
--- a/packages/widget-toc/README.md
+++ b/packages/widget-toc/README.md
@@ -0,0 +1,3 @@
+# `widget-toc`
+
+Exports an iconMap for use with `$scaife.iconMap`.
diff --git a/packages/widget-toc/package.json b/packages/widget-toc/package.json
index 6ce3e241..9883827b 100644
--- a/packages/widget-toc/package.json
+++ b/packages/widget-toc/package.json
@@ -8,7 +8,9 @@
   "author": "Eldarion",
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@scaife-viewer/common": "^0.4.0",
-    "@scaife-viewer/store": "^0.5.0-beta.1"
+    "@scaife-viewer/store": "^0.5.0-beta.1",
+    "graphql-tag": "^2.12.6"
   }
 }
diff --git a/packages/widget-toc/src/TOC.vue b/packages/widget-toc/src/TOC.vue
index 81e69e41..3486724a 100644
--- a/packages/widget-toc/src/TOC.vue
+++ b/packages/widget-toc/src/TOC.vue
@@ -65,6 +65,7 @@
     flex-direction: column;
     width: 100%;
   }
+  // TODO: Retire grid due to weird wrapping issues
   .toc-grid {
     display: grid;
     align-items: baseline;
diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index bf6ff9f0..38e25f39 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -1,32 +1,39 @@
 <template>
   <div class="toc-widget" v-if="toc">
-    <div class="lookahead-container">
-      <Lookahead
-        :placeholder="placeholder"
-        :reducer="reducer"
-        :data="toc"
-        @filter-data="filterData"
+    <LoaderBall v-if="$apollo.loading" />
+    <template v-else>
+      <div class="lookahead-container">
+        <Lookahead
+          :placeholder="placeholder"
+          :reducer="reducer"
+          :data="toc"
+          @filter-data="filterData"
+        />
+        <Icon
+          @click.native="navigateToRootTOC"
+          class="icon root-toc"
+          :class="{ 'toc-disabled': showingRootToc }"
+          name="home"
+        />
+        <span @click.prevent="toggleURNs">
+          <Icon class="icon urn" name="eye" v-if="!showURNs" />
+          <Icon class="icon urn" name="eye-slash" v-else />
+        </span>
+      </div>
+      <TOC
+        :toc="filtered || toc"
+        :context="context"
+        :passage="passage"
+        :showURNs="showURNs"
       />
-      <Icon class="icon" name="home" v-if="showingRootToc" disabled />
-      <router-link class="icon" :to="returnToRootPayload" v-else>
-        <Icon name="home" />
-      </router-link>
-      <span @click.prevent="toggleURNs">
-        <Icon class="icon urn" name="eye" v-if="!showURNs" />
-        <Icon class="icon urn" name="eye-slash" v-else />
-      </span>
-    </div>
-    <TOC
-      :toc="filtered || toc"
-      :context="context"
-      :passage="passage"
-      :showURNs="showURNs"
-    />
+    </template>
   </div>
 </template>
 
 <script>
-  import { Icon, Lookahead } from '@scaife-viewer/common';
+  import gql from 'graphql-tag';
+
+  import { Icon, LoaderBall, Lookahead } from '@scaife-viewer/common';
   import { MODULE_NS } from '@scaife-viewer/store';
 
   import TOC from './TOC.vue';
@@ -37,26 +44,73 @@
     components: {
       Icon,
       Lookahead,
+      LoaderBall,
       TOC,
     },
     scaifeConfig: {
       displayName: 'Table of Contents',
     },
-    created() {
-      this.fetchData();
-    },
-    watch: {
-      $route: 'fetchData',
-      defaultTocUrn: 'fetchData',
-    },
     data() {
       return {
-        toc: null,
         filtered: null,
         showURNs: false,
       };
     },
     computed: {
+      toc() {
+        if (this.showingRootToc) {
+          // NOTE: Show the root entries
+          return {
+            label: '',
+            items: this.rootEntries ? this.rootEntries : [],
+          };
+        }
+        if (this.tocEntries) {
+          const firstEntry = this.tocEntries[0];
+          if (firstEntry.tree) {
+            const tree = firstEntry.tree[0];
+            return {
+              items: tree.children.map(child => child.data),
+              label: firstEntry.label,
+            };
+          }
+        }
+        // NOTE: Should be unreachable
+        return null;
+      },
+      entryQuery() {
+        if (this.$route.query.toc) {
+          return gql`
+            query($urn: String!) {
+              tocEntries(urn: $urn) {
+                edges {
+                  node {
+                    label
+                    uri
+                    urn
+                    tree
+                  }
+                }
+              }
+            }
+          `;
+        }
+        // Fall back to "root" entries; we may
+        // make this an explicit TOC.
+        return gql`
+          query {
+            tocEntries(depth: 1) {
+              edges {
+                node {
+                  label
+                  uri
+                  urn
+                }
+              }
+            }
+          }
+        `;
+      },
       context() {
         return this.$route.name;
       },
@@ -78,7 +132,7 @@
       returnToRootPayload() {
         return this.context === 'tocs'
           ? { path: 'tocs' }
-          : { name: 'reader', params: { urn: this.passage.absolute } };
+          : { name: 'reader', params: { urn: `${this.passage}` } };
       },
       showingRootToc() {
         if (this.context === 'tocs') {
@@ -99,6 +153,9 @@
       rootTocUrn() {
         return 'urn:cite:scaife-viewer:toc.demo-root';
       },
+      currentToc() {
+        return this.$route.query.toc ? this.$route.query.toc : null;
+      },
       url() {
         if (this.$route.query.toc) {
           return this.getTocUrl(this.$route.query.toc);
@@ -109,25 +166,69 @@
         return this.getTocUrl(this.$route.query.urn || this.rootTocUrn);
       },
     },
+    apollo: {
+      rootEntries: {
+        query: gql`
+          query {
+            tocEntries(depth: 1) {
+              edges {
+                node {
+                  label
+                  uri
+                  urn
+                }
+              }
+            }
+          }
+        `,
+        skip() {
+          return !!this.$route.query.toc;
+        },
+        update(data) {
+          return data.tocEntries.edges.map(e => e.node);
+        },
+      },
+      tocEntries: {
+        query: gql`
+          query($urn: String!) {
+            tocEntries(urn: $urn) {
+              edges {
+                node {
+                  label
+                  uri
+                  urn
+                  tree
+                }
+              }
+            }
+          }
+        `,
+        variables() {
+          return {
+            urn: this.$route.query.toc,
+          };
+        },
+        update(data) {
+          return data.tocEntries.edges.map(e => e.node);
+        },
+        skip() {
+          return !this.$route.query.toc;
+        },
+      },
+    },
     methods: {
+      navigateToRootTOC() {
+        if (this.showingRootToc) {
+          return;
+        }
+        this.$router.push(this.returnToRootPayload);
+      },
       toggleURNs() {
         this.showURNs = !this.showURNs;
       },
       filterData(data) {
         this.filtered = data;
       },
-      fetchData() {
-        fetch(this.url)
-          .then(response => response.json())
-          .then(data => {
-            this.toc = data;
-            this.filtered = null;
-          })
-          .catch(error => {
-            // eslint-disable-next-line no-console
-            console.log(error.message);
-          });
-      },
       getTocUrl(tocUrn) {
         return `${this.endpoint}/tocs/${tocUrn.split(':').slice(-1)}.json`;
       },
@@ -140,20 +241,27 @@
     flex-direction: column;
     justify-content: flex-start;
     margin: 10px;
+    width: calc(100% - 20px);
   }
   .lookahead-container {
     align-items: center;
     margin-bottom: 0.66em;
     display: flex;
     .form-group {
-      width: 90%;
+      flex-basis: 66.66%;
+      margin-inline-end: 1em;
     }
   }
   .icon {
     color: var(--sv-widget-toc-icon-text-color, black);
-    margin-left: 1.33em;
-    &.urn {
+    flex-basis: 16.66%;
+    &.urn,
+    &.root-toc {
       cursor: pointer;
     }
+    &.toc-disabled {
+      color: grey;
+      cursor: unset;
+    }
   }
 </style>
diff --git a/packages/widget-toc/src/icons.js b/packages/widget-toc/src/icons.js
new file mode 100644
index 00000000..74d32d8c
--- /dev/null
+++ b/packages/widget-toc/src/icons.js
@@ -0,0 +1,11 @@
+import {
+  faHome,
+  faEye,
+  faEyeSlash,
+} from '@fortawesome/free-solid-svg-icons';
+
+const iconMap = [faHome, faEye, faEyeSlash].reduce((map, obj) => {
+  return { ...map, [obj.iconName]: obj };
+}, {});
+
+export default iconMap;
diff --git a/packages/widget-toc/src/index.js b/packages/widget-toc/src/index.js
index cd828662..16eba64b 100644
--- a/packages/widget-toc/src/index.js
+++ b/packages/widget-toc/src/index.js
@@ -1,3 +1,5 @@
 import TOCWidget from './TOCWidget.vue';
 
+export { default as iconMap } from './icons';
+
 export default TOCWidget;
diff --git a/src/main.js b/src/main.js
index 06034366..7abce5c0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -44,6 +44,7 @@ import { iconMap as commonIconMap } from '@scaife-viewer/common';
 import { iconMap as audioIconMap } from '@scaife-viewer/widget-audio';
 import { iconMap as neIconMap } from '@scaife-viewer/widget-named-entities';
 import { iconMap as deIconMap } from '@scaife-viewer/widget-dictionary-entries';
+import { iconMap as tocIconMap } from '@scaife-viewer/widget-toc';
 
 import App from './App.vue';
 import store, { apolloProvider } from './store';
@@ -59,6 +60,7 @@ Vue.use(SkeletonPlugin, {
     ...deIconMap,
     ...namedEntitesReaderIconMap,
     ...imageModeReaderIconMap,
+    ...tocIconMap,
   },
   config: {
     endpoints: {

From 07513e6962cacda0007eafe9c5ed9edb0134d6fb Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Mon, 3 Jul 2023 05:02:14 -0500
Subject: [PATCH 03/12] Refactor to remove tocEndpoint

---
 packages/widget-toc/src/TOCWidget.vue | 27 ++++++---------------------
 src/main.js                           |  4 ----
 2 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index 38e25f39..85379be5 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -126,9 +126,6 @@
       reducer() {
         return reducers.tocReducer;
       },
-      endpoint() {
-        return this.$scaife.config.endpoints.tocEndpoint;
-      },
       returnToRootPayload() {
         return this.context === 'tocs'
           ? { path: 'tocs' }
@@ -138,33 +135,24 @@
         if (this.context === 'tocs') {
           return !this.$route.params.urn;
         }
-        if (this.$route.query.toc) {
-          return this.$route.query.toc === this.defaultTocUrn;
-        }
-        return this.defaultTocUrn
-          ? this.url === this.getTocUrl(this.defaultTocUrn)
-          : this.url === this.getTocUrl(this.rootTocUrn);
+        // TODO: Simplify this with either the explicit
+        // URN or a top-level query
+        return !this.$route.query.toc;
       },
+      // TODO: Distinguish between "root" and "default" in the UX
       defaultTocUrn() {
         return this.metadata && this.metadata.defaultTocUrn
           ? this.metadata.defaultTocUrn
           : null;
       },
+      // TODO: Simplify this with either the explicit
+      // URN or a top-level query
       rootTocUrn() {
         return 'urn:cite:scaife-viewer:toc.demo-root';
       },
       currentToc() {
         return this.$route.query.toc ? this.$route.query.toc : null;
       },
-      url() {
-        if (this.$route.query.toc) {
-          return this.getTocUrl(this.$route.query.toc);
-        }
-        if (this.context === 'reader') {
-          return this.getTocUrl(this.defaultTocUrn || this.rootTocUrn);
-        }
-        return this.getTocUrl(this.$route.query.urn || this.rootTocUrn);
-      },
     },
     apollo: {
       rootEntries: {
@@ -229,9 +217,6 @@
       filterData(data) {
         this.filtered = data;
       },
-      getTocUrl(tocUrn) {
-        return `${this.endpoint}/tocs/${tocUrn.split(':').slice(-1)}.json`;
-      },
     },
   };
 </script>
diff --git a/src/main.js b/src/main.js
index 7abce5c0..1b90248a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -63,10 +63,6 @@ Vue.use(SkeletonPlugin, {
     ...tocIconMap,
   },
   config: {
-    endpoints: {
-      // FIXME: GraphQL
-      tocEndpoint: 'http://localhost:8000',
-    },
     entityMap: {
       accessToken:
         // eslint-disable-next-line max-len

From 9a7b567a426b5d3ed6b4774210e0b3136d427680 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Mon, 3 Jul 2023 05:02:42 -0500
Subject: [PATCH 04/12] Show message if no TOC entries are found

---
 packages/widget-toc/src/TOC.vue       |  3 +--
 packages/widget-toc/src/TOCWidget.vue | 25 +++++++++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/widget-toc/src/TOC.vue b/packages/widget-toc/src/TOC.vue
index 3486724a..f1cbaeef 100644
--- a/packages/widget-toc/src/TOC.vue
+++ b/packages/widget-toc/src/TOC.vue
@@ -2,7 +2,7 @@
   <aside class="toc-container">
     <h3>{{ toc.label }}</h3>
     <p class="u-legend">{{ toc.description }}</p>
-    <div class="toc-grid" v-if="toc.items.length">
+    <div class="toc-grid">
       <template v-for="(item, index) in toc.items">
         <span :key="`index-${index}`" class="ref">{{ index + 1 }}.</span>
         <div :key="`item-${index}`" class="item">
@@ -15,7 +15,6 @@
         </div>
       </template>
     </div>
-    <h4 v-else>No results.</h4>
   </aside>
 </template>
 
diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index 85379be5..3dfc63c4 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -1,7 +1,10 @@
 <template>
-  <div class="toc-widget" v-if="toc">
+  <div class="toc-widget">
     <LoaderBall v-if="$apollo.loading" />
-    <template v-else>
+    <EmptyMessage v-else-if="!toc">
+      No tables of contents found
+    </EmptyMessage>
+    <div class="toc-entries" v-else>
       <div class="lookahead-container">
         <Lookahead
           :placeholder="placeholder"
@@ -26,14 +29,19 @@
         :passage="passage"
         :showURNs="showURNs"
       />
-    </template>
+    </div>
   </div>
 </template>
 
 <script>
   import gql from 'graphql-tag';
 
-  import { Icon, LoaderBall, Lookahead } from '@scaife-viewer/common';
+  import {
+    EmptyMessage,
+    Icon,
+    LoaderBall,
+    Lookahead,
+  } from '@scaife-viewer/common';
   import { MODULE_NS } from '@scaife-viewer/store';
 
   import TOC from './TOC.vue';
@@ -42,6 +50,7 @@
   export default {
     name: 'TOCWidget',
     components: {
+      EmptyMessage,
       Icon,
       Lookahead,
       LoaderBall,
@@ -58,7 +67,11 @@
     },
     computed: {
       toc() {
-        if (this.showingRootToc) {
+        if (
+          this.showingRootToc &&
+          this.rootEntries &&
+          this.rootEntries.length > 0
+        ) {
           // NOTE: Show the root entries
           return {
             label: '',
@@ -222,7 +235,7 @@
 </script>
 
 <style lang="scss" scoped>
-  div.toc-widget {
+  div.toc-entries {
     flex-direction: column;
     justify-content: flex-start;
     margin: 10px;

From ad977e42e7814a9f31d05ed69d7f66808f3df97b Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Mon, 3 Jul 2023 05:58:02 -0500
Subject: [PATCH 05/12] Improve styling when empty

---
 packages/widget-toc/src/TOCWidget.vue | 61 ++++++++-------------------
 1 file changed, 17 insertions(+), 44 deletions(-)

diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index 3dfc63c4..cd76f1ef 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="toc-widget">
+  <div class="toc-widget" :class="{ 'with-entries': toc }">
     <LoaderBall v-if="$apollo.loading" />
     <EmptyMessage v-else-if="!toc">
       No tables of contents found
     </EmptyMessage>
-    <div class="toc-entries" v-else>
+    <div class="toc-entries" :key="currentToc" v-else>
       <div class="lookahead-container">
         <Lookahead
           :placeholder="placeholder"
@@ -65,6 +65,13 @@
         showURNs: false,
       };
     },
+    watch: {
+      toc: {
+        handler(value) {
+          this.filtered = value;
+        },
+      },
+    },
     computed: {
       toc() {
         if (
@@ -78,7 +85,7 @@
             items: this.rootEntries ? this.rootEntries : [],
           };
         }
-        if (this.tocEntries) {
+        if (this.tocEntries && this.tocEntries.length > 0) {
           const firstEntry = this.tocEntries[0];
           if (firstEntry.tree) {
             const tree = firstEntry.tree[0];
@@ -91,39 +98,6 @@
         // NOTE: Should be unreachable
         return null;
       },
-      entryQuery() {
-        if (this.$route.query.toc) {
-          return gql`
-            query($urn: String!) {
-              tocEntries(urn: $urn) {
-                edges {
-                  node {
-                    label
-                    uri
-                    urn
-                    tree
-                  }
-                }
-              }
-            }
-          `;
-        }
-        // Fall back to "root" entries; we may
-        // make this an explicit TOC.
-        return gql`
-          query {
-            tocEntries(depth: 1) {
-              edges {
-                node {
-                  label
-                  uri
-                  urn
-                }
-              }
-            }
-          }
-        `;
-      },
       context() {
         return this.$route.name;
       },
@@ -160,9 +134,6 @@
       },
       // TODO: Simplify this with either the explicit
       // URN or a top-level query
-      rootTocUrn() {
-        return 'urn:cite:scaife-viewer:toc.demo-root';
-      },
       currentToc() {
         return this.$route.query.toc ? this.$route.query.toc : null;
       },
@@ -235,11 +206,13 @@
 </script>
 
 <style lang="scss" scoped>
-  div.toc-entries {
-    flex-direction: column;
-    justify-content: flex-start;
-    margin: 10px;
-    width: calc(100% - 20px);
+  div.toc-widget {
+    &.with-entries {
+      margin: 10px;
+      width: calc(100% - 20px);
+      flex-direction: column;
+      justify-content: flex-start;
+    }
   }
   .lookahead-container {
     align-items: center;

From 48eab6741fcb5eb0d3277c81dad7831c25574c5d Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Mon, 3 Jul 2023 06:52:30 -0500
Subject: [PATCH 06/12] Restore description field

---
 packages/widget-toc/src/TOCWidget.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index cd76f1ef..1f24bd8e 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -90,6 +90,7 @@
           if (firstEntry.tree) {
             const tree = firstEntry.tree[0];
             return {
+              description: firstEntry.description,
               items: tree.children.map(child => child.data),
               label: firstEntry.label,
             };
@@ -167,6 +168,7 @@
               edges {
                 node {
                   label
+                  description
                   uri
                   urn
                   tree

From 2d3be24bdc83da6ab66f36b134048786ec750cda Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Wed, 5 Jul 2023 07:48:57 -0500
Subject: [PATCH 07/12] Only show relevant tables of contents

---
 packages/widget-toc/src/TOCWidget.vue | 47 ++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index 1f24bd8e..a9200c06 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -2,7 +2,7 @@
   <div class="toc-widget" :class="{ 'with-entries': toc }">
     <LoaderBall v-if="$apollo.loading" />
     <EmptyMessage v-else-if="!toc">
-      No tables of contents found
+      {{ emptyMessage }}
     </EmptyMessage>
     <div class="toc-entries" :key="currentToc" v-else>
       <div class="lookahead-container">
@@ -47,6 +47,8 @@
   import TOC from './TOC.vue';
   import reducers from './reducers';
 
+  const SHOW_RELEVANT_ONLY = true;
+
   export default {
     name: 'TOCWidget',
     components: {
@@ -73,7 +75,23 @@
       },
     },
     computed: {
+      emptyMessage() {
+        return SHOW_RELEVANT_ONLY
+          ? 'No relevant tables of contents found'
+          : 'No tables of contents found';
+      },
       toc() {
+        if (
+          this.showingRootToc &&
+          this.relevantEntries &&
+          this.relevantEntries.length > 0
+        ) {
+          // NOTE: Show the root entries
+          return {
+            label: '',
+            items: this.relevantEntries ? this.relevantEntries : [],
+          };
+        }
         if (
           this.showingRootToc &&
           this.rootEntries &&
@@ -140,6 +158,30 @@
       },
     },
     apollo: {
+      relevantEntries: {
+        query: gql`
+          query($version: String!) {
+            tocEntries(depth: 1, version: $version) {
+              edges {
+                node {
+                  label
+                  uri
+                  urn
+                }
+              }
+            }
+          }
+        `,
+        skip() {
+          return !this.passage;
+        },
+        update(data) {
+          return data.tocEntries.edges.map(e => e.node);
+        },
+        variables() {
+          return { version: this.passage.version };
+        },
+      },
       rootEntries: {
         query: gql`
           query {
@@ -155,6 +197,9 @@
           }
         `,
         skip() {
+          if (SHOW_RELEVANT_ONLY) {
+            return true;
+          }
           return !!this.$route.query.toc;
         },
         update(data) {

From 24903ede305c38d77b7177f38fa66f91599a49a7 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Wed, 5 Jul 2023 08:06:25 -0500
Subject: [PATCH 08/12] fix: prevent stale entries from being shown

---
 packages/widget-toc/src/TOCWidget.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index a9200c06..fcc29e68 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -103,7 +103,7 @@
             items: this.rootEntries ? this.rootEntries : [],
           };
         }
-        if (this.tocEntries && this.tocEntries.length > 0) {
+        if (this.currentToc && this.tocEntries && this.tocEntries.length > 0) {
           const firstEntry = this.tocEntries[0];
           if (firstEntry.tree) {
             const tree = firstEntry.tree[0];

From 183983368b80ebdfe3679d4378bf12ba20ef83f8 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Wed, 5 Jul 2023 08:17:13 -0500
Subject: [PATCH 09/12] feat: change relevant scope to work

---
 packages/widget-toc/src/TOCWidget.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index fcc29e68..36552d60 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -75,6 +75,17 @@
       },
     },
     computed: {
+      passageWork() {
+        // FIXME: Fix this so we have "upTo" in URN module
+        if (this.passage) {
+          const [tgPart, workPart, ] = `${this.passage}`
+            .split(`${this.passage.nss}:`)[1]
+            .split(':')[0]
+            .split('.');
+          return `urn:cts:${this.passage.nss}:${tgPart}.${workPart}:`;
+        }
+        return '';
+      },
       emptyMessage() {
         return SHOW_RELEVANT_ONLY
           ? 'No relevant tables of contents found'
@@ -160,8 +171,8 @@
     apollo: {
       relevantEntries: {
         query: gql`
-          query($version: String!) {
-            tocEntries(depth: 1, version: $version) {
+          query($work: String!) {
+            tocEntries(depth: 1, work: $work) {
               edges {
                 node {
                   label
@@ -179,7 +190,7 @@
           return data.tocEntries.edges.map(e => e.node);
         },
         variables() {
-          return { version: this.passage.version };
+          return { work: this.passageWork };
         },
       },
       rootEntries: {

From 6dffe8b208a265c8387a3c4d0ecafff25300d70a Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Thu, 28 Dec 2023 06:03:07 -0600
Subject: [PATCH 10/12] Improve documentation for TOCs

---
 packages/widget-toc/README.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/widget-toc/README.md b/packages/widget-toc/README.md
index b9e57f3c..bfd4ef78 100644
--- a/packages/widget-toc/README.md
+++ b/packages/widget-toc/README.md
@@ -1,3 +1,15 @@
 # `widget-toc`
 
-Exports an iconMap for use with `$scaife.iconMap`.
+The tables of contents (TOC) widget displays TOC entries.
+
+Each entry has a label and a URI.
+
+The URI can resolve to:
+
+- Another TOC (e.g., a list of lists)
+- The URN of a CTS passage
+
+Possible implementations include:
+- Browse folios from the Venetus A using the canonical book / line references (e.g. [urn:cite:scaife-viewer:toc.iliad-folio-ref-root](https://github.com/scaife-viewer/beyond-translation-site/blob/main/backend/data/tocs/toc.demo-root.json))
+- Browse CTS versions using card / para milestones extracted from TEI XML (e.g. [PerseusDL](https://github.com/scaife-viewer/beyond-translation-site/tree/feature/antigone-toc/backend/data/annotations/tocs/PerseusDL))
+- Navigate between a commentary and edition in differing text groups (e.g. [Eustathius’ Commentary on the Odyssey](https://scholarlyeditions.brill.com/eooc/) and [Odyssey](https://beyond-translation.perseus.org/reader/urn:cts:greekLit:tlg0012.tlg002.perseus-grc2:1.1-1.10))

From 63852b25f1a1d729e813c9c2277d4101411965c6 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Thu, 28 Dec 2023 11:12:34 -0600
Subject: [PATCH 11/12] Refactor passageWork using URN module

---
 packages/common/src/URN.js            | 37 ++++++++++++++++++++++-----
 packages/widget-toc/src/TOCWidget.vue | 10 +-------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/common/src/URN.js b/packages/common/src/URN.js
index 4366029b..74407c9d 100644
--- a/packages/common/src/URN.js
+++ b/packages/common/src/URN.js
@@ -7,6 +7,8 @@ export default class URN {
     this.nss = null;
     this.textGroup = null;
     this.work = null;
+    this.versionPart = null;
+    this.workPart = null;
     this.reference = null;
     this.version = null;
     this.destructureUrn();
@@ -16,18 +18,19 @@ export default class URN {
   destructureUrn() {
     const split = this.absolute.split(this.delimiter);
     [this.scheme, this.nid, this.nss, this.work, this.reference] = split;
-    this.version = `${this.scheme}:${this.nid}:${this.nss}:${this.work}:`;
-    // eslint-disable-next-line prefer-destructuring
-    this.textGroup = this.version
-      .split('.')[0]
-      .split(':')
-      .slice(-1)[0];
+    this.version = `${this.urnPrefix}:${this.work}:`;
+    const versionParts = this.version.split(':').slice(-2)[0].split('.');
+    [this.textGroup, this.workPart, this.versionPart] = versionParts;
   }
 
   toString() {
     return this.absolute;
   }
 
+  get urnPrefix() {
+    return `${this.scheme}:${this.nid}:${this.nss}`;
+  }
+
   get lcp() {
     return this.reference
       ? this.reference
@@ -36,4 +39,26 @@ export default class URN {
           .slice(-1)[0]
       : null;
   }
+
+  upTo(segment) {
+    // NOTE: Backported from https://github.com/scaife-viewer/scaife-viewer/blob/59fbb4eb6bd886285eb27bf95c5ea0ce578f2b3e/static/src/js/urn.js#L32C1-L49C4
+    const segments = [this.urnPrefix, ':'];
+    if (segment === 'textGroup') {
+      segments.push(this.textGroup, ':');
+      return segments.join('');
+    }
+    if (segment === 'work') {
+      segments.push(this.textGroup, '.');
+      segments.push(this.workPart, ':');
+      return segments.join('');
+    }
+    if (segment === 'version') {
+      return this.version
+    }
+    if (segment === 'reference')  {
+      return this.absolute;
+    }
+    return null;
+  }
+
 }
diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index 36552d60..17a6639b 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -76,15 +76,7 @@
     },
     computed: {
       passageWork() {
-        // FIXME: Fix this so we have "upTo" in URN module
-        if (this.passage) {
-          const [tgPart, workPart, ] = `${this.passage}`
-            .split(`${this.passage.nss}:`)[1]
-            .split(':')[0]
-            .split('.');
-          return `urn:cts:${this.passage.nss}:${tgPart}.${workPart}:`;
-        }
-        return '';
+        return this.passage ? this.passage.upTo('work') : '';
       },
       emptyMessage() {
         return SHOW_RELEVANT_ONLY

From d6a23969605680a97e10c5cea0c0ffc5fe818139 Mon Sep 17 00:00:00 2001
From: Jake Wegner <jake.wegner@signumu.org>
Date: Thu, 28 Dec 2023 11:32:04 -0600
Subject: [PATCH 12/12] Add showRelevantTOCs config option

---
 packages/widget-toc/README.md         | 10 ++++++++++
 packages/widget-toc/src/TOCWidget.vue | 21 ++++++++++++++-------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/widget-toc/README.md b/packages/widget-toc/README.md
index bfd4ef78..9d8ca68d 100644
--- a/packages/widget-toc/README.md
+++ b/packages/widget-toc/README.md
@@ -13,3 +13,13 @@ Possible implementations include:
 - Browse folios from the Venetus A using the canonical book / line references (e.g. [urn:cite:scaife-viewer:toc.iliad-folio-ref-root](https://github.com/scaife-viewer/beyond-translation-site/blob/main/backend/data/tocs/toc.demo-root.json))
 - Browse CTS versions using card / para milestones extracted from TEI XML (e.g. [PerseusDL](https://github.com/scaife-viewer/beyond-translation-site/tree/feature/antigone-toc/backend/data/annotations/tocs/PerseusDL))
 - Navigate between a commentary and edition in differing text groups (e.g. [Eustathius’ Commentary on the Odyssey](https://scholarlyeditions.brill.com/eooc/) and [Odyssey](https://beyond-translation.perseus.org/reader/urn:cts:greekLit:tlg0012.tlg002.perseus-grc2:1.1-1.10))
+
+## Configuration options
+
+`$scaife.config.showRelevantTOCs`
+
+Default value is `true`.
+
+If `true`, only show TOCs relevant to the current passage.
+
+Set to `false` to show all TOCs.
diff --git a/packages/widget-toc/src/TOCWidget.vue b/packages/widget-toc/src/TOCWidget.vue
index 17a6639b..7a5ee536 100644
--- a/packages/widget-toc/src/TOCWidget.vue
+++ b/packages/widget-toc/src/TOCWidget.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="toc-widget" :class="{ 'with-entries': toc }">
     <LoaderBall v-if="$apollo.loading" />
-    <EmptyMessage v-else-if="!toc">
+    <EmptyMessage v-else-if="!toc || toc.items.length === 0">
       {{ emptyMessage }}
     </EmptyMessage>
     <div class="toc-entries" :key="currentToc" v-else>
@@ -47,8 +47,6 @@
   import TOC from './TOC.vue';
   import reducers from './reducers';
 
-  const SHOW_RELEVANT_ONLY = true;
-
   export default {
     name: 'TOCWidget',
     components: {
@@ -79,17 +77,18 @@
         return this.passage ? this.passage.upTo('work') : '';
       },
       emptyMessage() {
-        return SHOW_RELEVANT_ONLY
+        return this.showRelevantTOCs
           ? 'No relevant tables of contents found'
           : 'No tables of contents found';
       },
       toc() {
         if (
+          this.showRelevantTOCs &&
           this.showingRootToc &&
           this.relevantEntries &&
           this.relevantEntries.length > 0
         ) {
-          // NOTE: Show the root entries
+          // NOTE: Show the relevant entries
           return {
             label: '',
             items: this.relevantEntries ? this.relevantEntries : [],
@@ -101,9 +100,10 @@
           this.rootEntries.length > 0
         ) {
           // NOTE: Show the root entries
+          const rootEntries = this.rootEntries ? this.rootEntries : [];
           return {
             label: '',
-            items: this.rootEntries ? this.rootEntries : [],
+            items: this.showRelevantTOCs ? [] : rootEntries,
           };
         }
         if (this.currentToc && this.tocEntries && this.tocEntries.length > 0) {
@@ -200,7 +200,7 @@
           }
         `,
         skip() {
-          if (SHOW_RELEVANT_ONLY) {
+          if (this.showRelevantTOCs) {
             return true;
           }
           return !!this.$route.query.toc;
@@ -251,6 +251,13 @@
       filterData(data) {
         this.filtered = data;
       },
+      shouldShowRelevantTOCs() {
+        const configValue = this.$scaife.config.showRelevantTOCs;
+        return configValue === undefined ? true : configValue;
+      },
+    },
+    created() {
+      this.showRelevantTOCs = this.shouldShowRelevantTOCs();
     },
   };
 </script>