feat: disable menu options on start page

Author: tecoholic

src/App.vue

@@ -86,13 +86,12 @@ export default {
   },
   data() {
     return {
-      currentPage: "start",
       overlayActive: false,
       pendingFileDrop: null,
     };
   },
   computed: {
-    ...mapState(["annotations", "classes"]),
+    ...mapState(["annotations", "classes", "currentPage"]),
   },
   methods: {
     ...mapMutations([
@@ -101,10 +100,8 @@ export default {
       "setInputSentences",
       "clearAllAnnotations",
       "resetIndex",
+      "switchToPage",
     ]),
-    switchToPage(page) {
-      this.currentPage = page;
-    },
     onDragEnter() {
       this.overlayActive = true;
     },

src/components/AnnotationPage.vue

@@ -131,6 +131,11 @@ export default {
       event.stopPropagation();
     },
     tokenizeCurrentSentence() {
+      if (this.currentIndex == this.inputSentences.length) {
+        // last sentence done
+        return;
+      }
+
       this.currentSentence = this.inputSentences[this.currentIndex];
       this.currentAnnotation = this.annotations[this.currentIndex];
 

src/components/StartPage.vue

@@ -14,7 +14,7 @@
             filled
             label="Load a text file"
             :color="highlightTextFileInput ? 'red-8' : 'primary'"
-            :bg-color="highlightTextFileInput && 'red-1'"
+            :bg-color="highlightTextFileInput ? 'red-1' : 'grey-3'"
             @rejected="
               fileSelectionError(
                 'Only text files (.txt) can be used for creating annotations.'

src/components/menubar/ExportAnnotations.vue

@@ -3,6 +3,7 @@
     v-close-popup
     clickable
     @click="generateJSONExport()"
+    :disable="!annotations.length"
   >
     <q-item-section>Export</q-item-section>
   </q-item>
@@ -21,10 +22,10 @@ export default {
     async generateJSONExport() {
       const output = {
         classes: this.classes.map((c) => c.name),
-        annotations: this.annotations.map((a) => ([
+        annotations: this.annotations.map((a) => [
           a.text,
-          {entities: a.entities}
-        ])),
+          { entities: a.entities },
+        ]),
       };
       const jsonStr = JSON.stringify(output);
       await exportFile(jsonStr, "annotations.json");

src/components/menubar/MenuBar.vue

@@ -33,7 +33,12 @@
         <q-menu>
           <q-list dense style="min-width: 100px">
             <export-annotations />
-            <q-item v-close-popup clickable @click="pendingClick = $refs.file">
+            <q-item
+              v-close-popup
+              clickable
+              @click="pendingClick = $refs.file"
+              :disable="currentPage === 'start'"
+            >
               <q-item-section>Import</q-item-section>
               <input
                 ref="file"
@@ -51,10 +56,20 @@
         <span> Tags </span>
         <q-menu>
           <q-list dense style="min-width: 100px">
-            <q-item v-close-popup clickable @click="exportTags()">
+            <q-item
+              v-close-popup
+              clickable
+              @click="exportTags()"
+              :disable="currentPage == 'start'"
+            >
               <q-item-section>Export</q-item-section>
             </q-item>
-            <q-item v-close-popup clickable @click="$refs.file.click()">
+            <q-item
+              v-close-popup
+              clickable
+              @click="$refs.file.click()"
+              :disable="currentPage == 'start'"
+            >
               <q-item-section>Import</q-item-section>
               <input
                 ref="file"
@@ -187,7 +202,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["annotations", "classes"]),
+    ...mapState(["annotations", "classes", "currentPage"]),
   },
   methods: {
     ...mapMutations([
@@ -196,6 +211,7 @@ export default {
       "setInputSentences",
       "clearAllAnnotations",
       "resetIndex",
+      "switchToPage",
     ]),
     // Funtion that exports the tags to a JSON file
     exportTags: async function () {
@@ -227,6 +243,9 @@ export default {
       };
       filereader.readAsText(file);
       this.resetIndex();
+      if (this.currentPage != "annotate") {
+        this.switchToPage("annotate");
+      }
     },
     importAnnotations: function (e) {
       let file = e.target.files[0];

src/store/index.js

@@ -42,7 +42,7 @@ export const mutations = {
       id: lastIndex + 1,
       name: payload,
       color: niceColors[lastIndex % niceColors.length],
-    }
+    };
     state.classes = [...state.classes, newClass];
     if (state.classes.length === 1) {
       state.currentClass = state.classes[0];
@@ -81,6 +81,10 @@ export const mutations = {
       state.currentIndex += 1;
       state.currentAnnotation = state.annotations[state.currentIndex] || {};
     } else {
+      if (state.currentIndex == state.inputSentences.length - 1) {
+        // last sentence
+        state.currentIndex += 1;
+      }
       alert("You have completed all the sentences");
     }
   },
@@ -116,9 +120,10 @@ export const mutations = {
     LocalStorage.set("tags", state.classes);
   },
   loadAnnotations(state, payload) {
-    let isValid = typeof payload === "object" &&
-    "annotations" in payload &&
-    "classes" in payload;
+    let isValid =
+      typeof payload === "object" &&
+      "annotations" in payload &&
+      "classes" in payload;
 
     if (!isValid) {
       throw new Error("loadAnnotations: payload has invalid schema");
@@ -139,19 +144,22 @@ export const mutations = {
     for (var i = 0; i < annotations.length; i++) {
       if (annotations[i] == null) continue;
       let annotation = {
-        'text': annotations[i][0],
-        'entities': annotations[i][1].entities,
-      }
+        text: annotations[i][0],
+        entities: annotations[i][1].entities,
+      };
       newAnnotations[i] = annotation;
     }
     state.annotations = newAnnotations;
     state.currentAnnotation = state.annotations[state.currentIndex];
 
-    for(let c of classes) {
+    for (let c of classes) {
       this.commit("addClass", c);
     }
     LocalStorage.set("tags", state.classes);
   },
+  switchToPage(state, payload) {
+    state.currentPage = payload;
+  },
 };
 
 export const getters = {};
@@ -174,8 +182,9 @@ const actions = {
   },
 };
 
-window.addEventListener('beforeunload', async (event) => {
-  event.returnValue = "Please make sure you export annotations before closing the file.";
+window.addEventListener("beforeunload", async (event) => {
+  event.returnValue =
+    "Please make sure you export annotations before closing the file.";
 });
 
 export default {
@@ -191,9 +200,10 @@ export default {
       annotationPrecision: "word",
       // current state
       currentAnnotation: {},
-      currentClass: tags && tags[0] || {},
+      currentClass: (tags && tags[0]) || {},
       currentIndex: 0,
       currentSentence: "",
+      currentPage: "start",
     };
   },
   getters,