Added annotation precision selection. Closes #53.

src/components/AnnotationPage.vue

@@ -75,6 +75,7 @@ export default {
       "currentIndex",
       "inputSentences",
       "enableKeyboardShortcuts",
+      "annotationPrecision",
     ]),
   },
   watch: {
@@ -89,6 +90,9 @@ export default {
     },
     classes() {
       this.tokenizeCurrentSentence();
+    },
+    annotationPrecision() {
+      this.tokenizeCurrentSentence();
     }
   },
   created() {
@@ -124,8 +128,19 @@ export default {
       this.currentSentence = this.inputSentences[this.currentIndex];
       this.currentAnnotation = this.annotations[this.currentIndex];
 
-      let tokens = this.tokenizer.tokenize(this.currentSentence.text);
-      let spans = this.tokenizer.span_tokenize(this.currentSentence.text);
+      let tokens, spans;
+
+      if (this.$store.state.annotationPrecision == "char") {
+        tokens = this.currentSentence.text.split('');
+        spans = []
+        for (let i = 0; i < this.currentSentence.text.length; i++) {
+          spans.push([i, i + 1]);
+        }
+      } else {
+        tokens = this.tokenizer.tokenize(this.currentSentence.text);
+        spans = this.tokenizer.span_tokenize(this.currentSentence.text);
+      }
+
       let combined = tokens.map((t, i) => [spans[i][0], spans[i][1], t]);
 
       this.tm = new TokenManager(this.classes);

src/components/AnnotationSidebar.vue

@@ -1,6 +1,7 @@
 <template>
   <nav class="px-3">
     <split-type-selector class="mt-4 mb-5" />
+    <annotation-precision-selector class="mt-4 mb-5" />
     <progress-bar
       class="mb-5"
       :completed="currentIndex"
@@ -14,13 +15,15 @@
 import { mapState } from "vuex";
 import ProgressBar from "./sidebar/ProgressBar.vue";
 import SplitTypeSelector from "./sidebar/SplitTypeSelector.vue";
+import AnnotationPrecisionSelector from "./sidebar/AnnotationPrecisionSelector.vue";
 import KeyboardShortcuts from "./sidebar/KeyboardShortcuts.vue";
 
 export default {
   name: "AnnotationSidebar",
   components: {
     ProgressBar,
     SplitTypeSelector,
+    AnnotationPrecisionSelector,
     KeyboardShortcuts,
   },
   computed: {

src/components/Token.vue

@@ -1,6 +1,11 @@
 <template>
-  <span v-if="token.type === 'token'" :id="'t' + token.start" class="token">
-    {{ token.text }}
+  <span 
+  v-if="token.type === 'token'"
+  :id="'t' + token.start"
+  class="token"
+  :style="{'padding': this.$store.state.annotationPrecision == 'char' ? '0.25rem 0rem' : '0.25rem'}"
+  >
+    {{ token.text == " " ? "&nbsp;" : token.text }}
   </span>
 </template>
 <script>
@@ -18,7 +23,6 @@ export default {
   .token {
     font-size: large;
     display: inline-block;
-    padding: 0.25rem;
     line-height: 3;
   }
 </style>

src/components/sidebar/AnnotationPrecisionSelector.vue

@@ -0,0 +1,56 @@
+<template>
+  <section>
+    <div class="q-px-md q-pb-md">
+      <q-select
+        outlined
+        bg-color="white"
+        v-model="precisionType"
+        :options="precisionOptions"
+        :map-options="true"
+        label="Annotation Precision"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "AnnotationPrecisionSelector",
+  data() {
+    return {
+      precisionOptions: [
+        { label: "Word Level", value: "word" },
+        { label: "Character Level", value: "char" },
+      ],
+    };
+  },
+  computed: {
+    precisionType: {
+      get() {
+        switch (this.$store.state.annotationPrecision) {
+          case "word":
+            return "word";
+          case "char":
+            return "char";
+          default:
+            return "word";
+        }
+      },
+      set(option) {
+        switch (option.value) {
+          case "word":
+            this.$store.commit("setAnnotationPrecision", "word");
+            break;
+          case "char":
+            this.$store.commit("setAnnotationPrecision", "char");
+            break;
+          default:
+            this.$store.commit("setAnnotationPrecision", "word");
+            break;
+        }
+      },
+    },
+  },
+};
+</script>

src/store/index.js

@@ -70,6 +70,9 @@ export const mutations = {
     const sentences = state.originalText.split(state.separator);
     state.inputSentences = sentences.map((s, i) => ({ id: i, text: s }));
   },
+  setAnnotationPrecision(state, payload) {
+    state.annotationPrecision = payload;
+  },
   setKeyboardShortcuts(state, payload) {
     state.enableKeyboardShortcuts = payload;
   },
@@ -175,6 +178,7 @@ export default {
       originalText: "",
       separator: "\n",
       enableKeyboardShortcuts: false,
+      annotationPrecision: "word",
       // current state
       currentAnnotation: {},
       currentClass: tags && tags[0] || {},