Add default failbacks

src/reader/components/ReaderLine.vue

@@ -8,7 +8,16 @@
         <icon v-if="playingAudio" name="volume-up" />
         {{ line.ref }}
       </div>
-      <div class="line-text metrical" v-if="metrical" v-html="metricalHtml" />
+      <template v-if="metricalMode">
+        <div
+          class="line-text metrical"
+          v-if="metricalHtml"
+          v-html="metricalHtml"
+        />
+        <div v-else class="line-text">
+          There aren't any metrical annotations for this line.
+        </div>
+      </template>
       <div class="line-text" v-else>
         <ReaderToken
           v-for="token in tokens"
@@ -59,10 +68,11 @@
           this.line.metricalAnnotations[0].htmlContent
         );
       },
+      metricalMode() {
+        return this.$store.state.displayMode === 'metrical';
+      },
       metrical() {
-        return (
-          this.$store.state.displayMode === 'metrical' && this.metricalHtml
-        );
+        return this.metricalMode && this.metricalHtml;
       },
     },
   };

src/reader/components/ReaderView.vue

@@ -18,14 +18,15 @@
     TextSizeWidget,
     TextWidthWidget,
     // TOCWidget,
-    WordListWidget,
+    // WordListWidget,
   } from '@scaife-viewer/scaife-widgets';
   import ReaderWidget from '@/reader/widgets/ReaderWidget.vue';
   import TokenAnnotationWidget from '@/widgets/TokenAnnotationWidget.vue';
   import NamedEntitiesWidget from '@/widgets/NamedEntitiesWidget';
   import DisplayModeWidget from '@/widgets/DisplayModeWidget.vue';
   import ScholiaWidget from '@/widgets/ScholiaWidget.vue';
   import AudioWidget from '@/widgets/AudioWidget.vue';
+  import WordListWidget from '@/widgets/WordListWidget.vue';
   import { FETCH_METADATA, FETCH_LIBRARY } from '@/constants';
 
   export default {

src/reader/widgets/ReaderWidget.vue

@@ -14,12 +14,17 @@
             No image annotations were found for the selected passage.
           </div>
         </template>
-        <Alignments
-          v-else-if="alignmentMode"
-          :alignments="alignments"
-          :textSize="textSize"
-          :textWidth="textWidth"
-        />
+        <template v-else-if="alignmentMode">
+          <div v-if="alignments.length === 0">
+            There are no alignments for this passage.
+          </div>
+          <Alignments
+            v-else
+            :alignments="alignments"
+            :textSize="textSize"
+            :textWidth="textWidth"
+          />
+        </template>
         <Reader
           v-else
           :lines="lines"

src/widgets/AudioWidget.vue

@@ -8,7 +8,8 @@
     >
       No audio support
     </audio>
-    <small class="audio-attribution">
+    <div v-if="nowPlaying === null">No audio available</div>
+    <small v-else class="audio-attribution">
       <!-- @@@ extract attribution from audio annotations  -->
       &copy; 2016
       <a href="https://hypotactic.com/" target="_blank">David Chamberlain</a>

src/widgets/NamedEntitiesWidget/NamedEntitiesWidget.vue

@@ -1,17 +1,20 @@
 <template>
   <div class="named-entities">
-    <Lookahead
-      placeholder="Filter named entities"
-      :reducer="lookaheadReducer"
-      :data="entities"
-      @filter-data="onFilter"
-    />
-    <NamedEntity
-      v-for="entity in filteredEntities"
-      :key="entity.id"
-      :entity="entity"
-      @select="onSelect"
-    />
+    <div v-if="entities.length === 0">No named entities</div>
+    <template v-else>
+      <Lookahead
+        placeholder="Filter named entities"
+        :reducer="lookaheadReducer"
+        :data="entities"
+        @filter-data="onFilter"
+      />
+      <NamedEntity
+        v-for="entity in filteredEntities"
+        :key="entity.id"
+        :entity="entity"
+        @select="onSelect"
+      />
+    </template>
   </div>
 </template>
 

src/widgets/ScholiaWidget.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="scholia">
-    <div v-if="!lines">No commentary found.</div>
+    <div v-if="lines === null || lines.length === 0">No commentary found.</div>
     <div v-for="line in lines" :key="line.idx" class="line">
       <span class="lemma">{{ line.lemma }} </span>
       <span class="comment">{{ line.comment }}</span>

src/widgets/TokenAnnotationWidget.vue

@@ -1,6 +1,7 @@
 <template>
   <table class="selected-tokens">
-    <tr colspan="3" v-if="selectedToken">
+    <tr v-if="tokens.length === 0">No annotations</tr>
+    <tr colspan="3" v-else-if="selectedToken">
       <a href @click.prevent="onClear">Clear Filter</a>
     </tr>
     <tr v-for="token in tokens" :key="token.veRef">

src/widgets/WordListWidget.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="word-list-widget u-widget u-flex">
+    <WordList v-if="filteredWordList.length > 0" :wordList="filteredWordList" />
+    <div v-else>No words</div>
+  </div>
+</template>
+
+<script>
+  import WIDGETS_NS, { WordList } from '@scaife-viewer/scaife-widgets';
+  import { MODULE_NS } from '@/reader/constants';
+
+  export default {
+    name: 'WordListWidget',
+    scaifeConfig: {
+      displayName: 'Word List',
+    },
+    components: {
+      WordList,
+    },
+    created() {
+      if (this.enabled) {
+        this.fetchData();
+      }
+    },
+    data() {
+      return {
+        wordList: [],
+      };
+    },
+    watch: {
+      passage: 'fetchData',
+    },
+    computed: {
+      selectedToken() {
+        return this.$store.state[MODULE_NS].selectedToken;
+      },
+      filteredWordList() {
+        if (this.selectedToken === null) {
+          return this.wordList;
+        }
+        return this.wordList.filter(w => w.text === this.selectedToken.lemma);
+      },
+      enabled() {
+        // TODO: Stubbed until metadata ingestion update.
+        // return this.passage && this.metadata.lang === 'grc';
+        return this.passage;
+      },
+      metadata() {
+        return this.$store.getters[`${WIDGETS_NS}/metadata`];
+      },
+      passage() {
+        return this.$store.getters[`${WIDGETS_NS}/passage`];
+      },
+      endpoint() {
+        return 'https://vocab.perseus.org/word-list';
+      },
+      url() {
+        const params = 'page=all&amp;o=1';
+        return this.passage
+          ? `${this.endpoint}/${this.passage}/json/?${params}`
+          : null;
+      },
+    },
+    methods: {
+      fetchData() {
+        fetch(this.url)
+          .then(response => response.json())
+          .then(data => {
+            this.wordList = data.lemmas.map(lemma => ({
+              text: lemma.lemma_text,
+              shortdef: lemma.shortdef,
+              frequency: lemma.work_frequency.toFixed(2),
+            }));
+          })
+          .catch(error => {
+            // eslint-disable-next-line no-console
+            console.log(error.message);
+          });
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .word-list-widget {
+    width: 100%;
+  }
+</style>