diff --git a/app/db.sqlite3 b/app/db.sqlite3
index 7f8d4124..64d58851 100644
Binary files a/app/db.sqlite3 and b/app/db.sqlite3 differ
diff --git a/app/server/static/bundle/document_classification.js b/app/server/static/bundle/document_classification.js
index afb136c7..6add9b73 100644
--- a/app/server/static/bundle/document_classification.js
+++ b/app/server/static/bundle/document_classification.js
@@ -161,7 +161,7 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ \"./static/js/mixin.js\");\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\n\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(__webpack_require__(/*! vue-shortkey */ \"./node_modules/vue-shortkey/dist/index.js\"), {\n  prevent: ['input', 'textarea'],\n});\n\n\nconst vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  el: '#mail-app',\n  delimiters: ['[[', ']]'],\n  mixins: [_mixin__WEBPACK_IMPORTED_MODULE_1__[\"default\"]],\n\n  methods: {\n    isIn(label) {\n      for (let i = 0; i < this.annotations[this.cur].length; i++) {\n        const a = this.annotations[this.cur][i];\n        if (a.label === label.id) {\n          return a;\n        }\n      }\n      return false;\n    },\n\n    async addLabel(label) {\n      const a = this.isIn(label);\n      if (a) {\n        this.removeLabel(a);\n      } else {\n        const docId = this.items[this.cur].id;\n        const payload = {\n          label: label.id,\n        };\n        await _http__WEBPACK_IMPORTED_MODULE_2__[\"default\"].post(`docs/${docId}/annotations/`, payload).then((response) => {\n          this.annotations[this.cur].push(response.data);\n        });\n      }\n    },\n  },\n});\n\n//# sourceURL=webpack:///./static/js/document_classification.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm.js\");\n/* harmony import */ var _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ \"./static/js/mixin.js\");\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\n\n\nvue__WEBPACK_IMPORTED_MODULE_0__[\"default\"].use(__webpack_require__(/*! vue-shortkey */ \"./node_modules/vue-shortkey/dist/index.js\"), {\n  prevent: ['input', 'textarea'],\n});\n\n\nconst vm = new vue__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n  el: '#mail-app',\n  delimiters: ['[[', ']]'],\n  mixins: [_mixin__WEBPACK_IMPORTED_MODULE_1__[\"default\"]],\n\n  methods: {\n    isIn(label) {\n      for (let i = 0; i < this.annotations[this.pageNumber].length; i++) {\n        const a = this.annotations[this.pageNumber][i];\n        if (a.label === label.id) {\n          return a;\n        }\n      }\n      return false;\n    },\n\n    async addLabel(label) {\n      const a = this.isIn(label);\n      if (a) {\n        this.removeLabel(a);\n      } else {\n        const docId = this.docs[this.pageNumber].id;\n        const payload = {\n          label: label.id,\n        };\n        await _http__WEBPACK_IMPORTED_MODULE_2__[\"default\"].post(`docs/${docId}/annotations/`, payload).then((response) => {\n          this.annotations[this.pageNumber].push(response.data);\n        });\n      }\n    },\n  },\n});\n\n//# sourceURL=webpack:///./static/js/document_classification.js?");
 
 /***/ }),
 
@@ -185,7 +185,7 @@ eval("__webpack_require__.r(__webpack_exports__);\naxios.defaults.xsrfCookieName
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n  data() {\n    return {\n      pageNumber: 0,\n      docs: [{\n        id: null,\n        text: '',\n      }],\n      annotations: [],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.docs.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.docs.length - 1;\n        }\n      }\n    },\n\n    async prevPage() {\n      this.pageNumber -= 1;\n      if (this.pageNumber === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.pageNumber = this.docs.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.docs = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.docs.length; i++) {\n        const docId = this.docs[i].id;\n        _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(`docs/${docId}/annotations/`).then((response) => {\n          this.annotations.push(response.data);\n        });\n      }\n    },\n\n    getState() {\n      if (this.picked === 'all') {\n        return '';\n      }\n      if (this.picked === 'active') {\n        return 'true';\n      }\n      return 'false';\n    },\n\n    async submit() {\n      const state = this.getState();\n      this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n      await this.search();\n      this.pageNumber = 0;\n    },\n\n    removeLabel(label) {\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${label.id}`).then((response) => {\n        const index = this.annotations[this.pageNumber].indexOf(response.data);\n        this.annotations[this.pageNumber].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    docs() {\n      // fetch progress info.\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n        this.total = response.data.total;\n        this.remaining = response.data.remaining;\n      });\n    },\n  },\n\n  created() {\n    _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n      this.labels = response.data;\n    });\n    this.submit();\n  },\n\n  computed: {\n    achievement() {\n      const done = this.total - this.remaining;\n      const percentage = Math.round(done / this.total * 100);\n      return this.total > 0 ? percentage : 0;\n    },\n\n    id2label() {\n      let id2label = {};\n      for (let i = 0; i < this.labels.length; i++) {\n        const label = this.labels[i];\n        id2label[label.id] = label;\n      }\n      return id2label;\n    },\n\n    progressColor() {\n      if (this.achievement < 30) {\n        return 'is-danger';\n      }\n      if (this.achievement < 70) {\n        return 'is-warning';\n      }\n      return 'is-primary';\n    },\n  },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n  data() {\n    return {\n      pageNumber: 0,\n      docs: [],\n      annotations: [],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.docs.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.docs.length - 1;\n        }\n      }\n    },\n\n    async prevPage() {\n      this.pageNumber -= 1;\n      if (this.pageNumber === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.pageNumber = this.docs.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.docs = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      this.annotations = [];\n      for (let i = 0; i < this.docs.length; i++) {\n        const docId = this.docs[i].id;\n        await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(`docs/${docId}/annotations/`).then((response) => {\n          this.annotations.push(response.data);\n        });\n      }\n    },\n\n    getState() {\n      if (this.picked === 'all') {\n        return '';\n      }\n      if (this.picked === 'active') {\n        return 'true';\n      }\n      return 'false';\n    },\n\n    async submit() {\n      const state = this.getState();\n      this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n      await this.search();\n      this.pageNumber = 0;\n    },\n\n    removeLabel(annotation) {\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n        const index = this.annotations[this.pageNumber].indexOf(annotation);\n        this.annotations[this.pageNumber].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    docs() {\n      // fetch progress info.\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n        this.total = response.data.total;\n        this.remaining = response.data.remaining;\n      });\n    },\n  },\n\n  created() {\n    _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n      this.labels = response.data;\n    });\n    this.submit();\n  },\n\n  computed: {\n    achievement() {\n      const done = this.total - this.remaining;\n      const percentage = Math.round(done / this.total * 100);\n      return this.total > 0 ? percentage : 0;\n    },\n\n    id2label() {\n      let id2label = {};\n      for (let i = 0; i < this.labels.length; i++) {\n        const label = this.labels[i];\n        id2label[label.id] = label;\n      }\n      return id2label;\n    },\n\n    progressColor() {\n      if (this.achievement < 30) {\n        return 'is-danger';\n      }\n      if (this.achievement < 70) {\n        return 'is-warning';\n      }\n      return 'is-primary';\n    },\n  },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
 
 /***/ })
 
diff --git a/app/server/static/bundle/seq2seq.js b/app/server/static/bundle/seq2seq.js
index 040d426d..38cdc4f0 100644
--- a/app/server/static/bundle/seq2seq.js
+++ b/app/server/static/bundle/seq2seq.js
@@ -173,7 +173,7 @@ eval("__webpack_require__.r(__webpack_exports__);\naxios.defaults.xsrfCookieName
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n  data() {\n    return {\n      pageNumber: 0,\n      docs: [{\n        id: null,\n        text: '',\n      }],\n      annotations: [],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.docs.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.docs.length - 1;\n        }\n      }\n    },\n\n    async prevPage() {\n      this.pageNumber -= 1;\n      if (this.pageNumber === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.pageNumber = this.docs.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.docs = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.docs.length; i++) {\n        const docId = this.docs[i].id;\n        _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(`docs/${docId}/annotations/`).then((response) => {\n          this.annotations.push(response.data);\n        });\n      }\n    },\n\n    getState() {\n      if (this.picked === 'all') {\n        return '';\n      }\n      if (this.picked === 'active') {\n        return 'true';\n      }\n      return 'false';\n    },\n\n    async submit() {\n      const state = this.getState();\n      this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n      await this.search();\n      this.pageNumber = 0;\n    },\n\n    removeLabel(label) {\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${label.id}`).then((response) => {\n        const index = this.annotations[this.pageNumber].indexOf(response.data);\n        this.annotations[this.pageNumber].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    docs() {\n      // fetch progress info.\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n        this.total = response.data.total;\n        this.remaining = response.data.remaining;\n      });\n    },\n  },\n\n  created() {\n    _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n      this.labels = response.data;\n    });\n    this.submit();\n  },\n\n  computed: {\n    achievement() {\n      const done = this.total - this.remaining;\n      const percentage = Math.round(done / this.total * 100);\n      return this.total > 0 ? percentage : 0;\n    },\n\n    id2label() {\n      let id2label = {};\n      for (let i = 0; i < this.labels.length; i++) {\n        const label = this.labels[i];\n        id2label[label.id] = label;\n      }\n      return id2label;\n    },\n\n    progressColor() {\n      if (this.achievement < 30) {\n        return 'is-danger';\n      }\n      if (this.achievement < 70) {\n        return 'is-warning';\n      }\n      return 'is-primary';\n    },\n  },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n  data() {\n    return {\n      pageNumber: 0,\n      docs: [],\n      annotations: [],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.docs.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.docs.length - 1;\n        }\n      }\n    },\n\n    async prevPage() {\n      this.pageNumber -= 1;\n      if (this.pageNumber === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.pageNumber = this.docs.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.docs = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      this.annotations = [];\n      for (let i = 0; i < this.docs.length; i++) {\n        const docId = this.docs[i].id;\n        await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(`docs/${docId}/annotations/`).then((response) => {\n          this.annotations.push(response.data);\n        });\n      }\n    },\n\n    getState() {\n      if (this.picked === 'all') {\n        return '';\n      }\n      if (this.picked === 'active') {\n        return 'true';\n      }\n      return 'false';\n    },\n\n    async submit() {\n      const state = this.getState();\n      this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n      await this.search();\n      this.pageNumber = 0;\n    },\n\n    removeLabel(annotation) {\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n        const index = this.annotations[this.pageNumber].indexOf(annotation);\n        this.annotations[this.pageNumber].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    docs() {\n      // fetch progress info.\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n        this.total = response.data.total;\n        this.remaining = response.data.remaining;\n      });\n    },\n  },\n\n  created() {\n    _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n      this.labels = response.data;\n    });\n    this.submit();\n  },\n\n  computed: {\n    achievement() {\n      const done = this.total - this.remaining;\n      const percentage = Math.round(done / this.total * 100);\n      return this.total > 0 ? percentage : 0;\n    },\n\n    id2label() {\n      let id2label = {};\n      for (let i = 0; i < this.labels.length; i++) {\n        const label = this.labels[i];\n        id2label[label.id] = label;\n      }\n      return id2label;\n    },\n\n    progressColor() {\n      if (this.achievement < 30) {\n        return 'is-danger';\n      }\n      if (this.achievement < 70) {\n        return 'is-warning';\n      }\n      return 'is-primary';\n    },\n  },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
 
 /***/ }),
 
diff --git a/app/server/static/bundle/sequence_labeling.js b/app/server/static/bundle/sequence_labeling.js
index d4590a6f..5d977842 100644
--- a/app/server/static/bundle/sequence_labeling.js
+++ b/app/server/static/bundle/sequence_labeling.js
@@ -173,7 +173,7 @@ eval("__webpack_require__.r(__webpack_exports__);\naxios.defaults.xsrfCookieName
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n  data() {\n    return {\n      pageNumber: 0,\n      docs: [{\n        id: null,\n        text: '',\n      }],\n      annotations: [],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.docs.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.docs.length - 1;\n        }\n      }\n    },\n\n    async prevPage() {\n      this.pageNumber -= 1;\n      if (this.pageNumber === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.pageNumber = this.docs.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.docs = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.docs.length; i++) {\n        const docId = this.docs[i].id;\n        _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(`docs/${docId}/annotations/`).then((response) => {\n          this.annotations.push(response.data);\n        });\n      }\n    },\n\n    getState() {\n      if (this.picked === 'all') {\n        return '';\n      }\n      if (this.picked === 'active') {\n        return 'true';\n      }\n      return 'false';\n    },\n\n    async submit() {\n      const state = this.getState();\n      this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n      await this.search();\n      this.pageNumber = 0;\n    },\n\n    removeLabel(label) {\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${label.id}`).then((response) => {\n        const index = this.annotations[this.pageNumber].indexOf(response.data);\n        this.annotations[this.pageNumber].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    docs() {\n      // fetch progress info.\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n        this.total = response.data.total;\n        this.remaining = response.data.remaining;\n      });\n    },\n  },\n\n  created() {\n    _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n      this.labels = response.data;\n    });\n    this.submit();\n  },\n\n  computed: {\n    achievement() {\n      const done = this.total - this.remaining;\n      const percentage = Math.round(done / this.total * 100);\n      return this.total > 0 ? percentage : 0;\n    },\n\n    id2label() {\n      let id2label = {};\n      for (let i = 0; i < this.labels.length; i++) {\n        const label = this.labels[i];\n        id2label[label.id] = label;\n      }\n      return id2label;\n    },\n\n    progressColor() {\n      if (this.achievement < 30) {\n        return 'is-danger';\n      }\n      if (this.achievement < 70) {\n        return 'is-warning';\n      }\n      return 'is-primary';\n    },\n  },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./http */ \"./static/js/http.js\");\n\n\nconst annotationMixin = {\n  data() {\n    return {\n      pageNumber: 0,\n      docs: [],\n      annotations: [],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.docs.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.docs.length - 1;\n        }\n      }\n    },\n\n    async prevPage() {\n      this.pageNumber -= 1;\n      if (this.pageNumber === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.pageNumber = this.docs.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.docs = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      this.annotations = [];\n      for (let i = 0; i < this.docs.length; i++) {\n        const docId = this.docs[i].id;\n        await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(`docs/${docId}/annotations/`).then((response) => {\n          this.annotations.push(response.data);\n        });\n      }\n    },\n\n    getState() {\n      if (this.picked === 'all') {\n        return '';\n      }\n      if (this.picked === 'active') {\n        return 'true';\n      }\n      return 'false';\n    },\n\n    async submit() {\n      const state = this.getState();\n      this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;\n      await this.search();\n      this.pageNumber = 0;\n    },\n\n    removeLabel(annotation) {\n      const docId = this.docs[this.pageNumber].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {\n        const index = this.annotations[this.pageNumber].indexOf(annotation);\n        this.annotations[this.pageNumber].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    docs() {\n      // fetch progress info.\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('progress').then((response) => {\n        this.total = response.data.total;\n        this.remaining = response.data.remaining;\n      });\n    },\n  },\n\n  created() {\n    _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get('labels').then((response) => {\n      this.labels = response.data;\n    });\n    this.submit();\n  },\n\n  computed: {\n    achievement() {\n      const done = this.total - this.remaining;\n      const percentage = Math.round(done / this.total * 100);\n      return this.total > 0 ? percentage : 0;\n    },\n\n    id2label() {\n      let id2label = {};\n      for (let i = 0; i < this.labels.length; i++) {\n        const label = this.labels[i];\n        id2label[label.id] = label;\n      }\n      return id2label;\n    },\n\n    progressColor() {\n      if (this.achievement < 30) {\n        return 'is-danger';\n      }\n      if (this.achievement < 70) {\n        return 'is-warning';\n      }\n      return 'is-primary';\n    },\n  },\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (annotationMixin);\n\n\n//# sourceURL=webpack:///./static/js/mixin.js?");
 
 /***/ }),
 
diff --git a/app/server/static/js/document_classification.js b/app/server/static/js/document_classification.js
index 01482a6e..7e846150 100644
--- a/app/server/static/js/document_classification.js
+++ b/app/server/static/js/document_classification.js
@@ -14,8 +14,8 @@ const vm = new Vue({
 
   methods: {
     isIn(label) {
-      for (let i = 0; i < this.annotations[this.cur].length; i++) {
-        const a = this.annotations[this.cur][i];
+      for (let i = 0; i < this.annotations[this.pageNumber].length; i++) {
+        const a = this.annotations[this.pageNumber][i];
         if (a.label === label.id) {
           return a;
         }
@@ -28,12 +28,12 @@ const vm = new Vue({
       if (a) {
         this.removeLabel(a);
       } else {
-        const docId = this.items[this.cur].id;
+        const docId = this.docs[this.pageNumber].id;
         const payload = {
           label: label.id,
         };
         await HTTP.post(`docs/${docId}/annotations/`, payload).then((response) => {
-          this.annotations[this.cur].push(response.data);
+          this.annotations[this.pageNumber].push(response.data);
         });
       }
     },
diff --git a/app/server/static/js/mixin.js b/app/server/static/js/mixin.js
index 17cca3b1..831f6d75 100644
--- a/app/server/static/js/mixin.js
+++ b/app/server/static/js/mixin.js
@@ -4,10 +4,7 @@ const annotationMixin = {
   data() {
     return {
       pageNumber: 0,
-      docs: [{
-        id: null,
-        text: '',
-      }],
+      docs: [],
       annotations: [],
       labels: [],
       guideline: '',
@@ -52,9 +49,10 @@ const annotationMixin = {
         this.next = response.data.next;
         this.prev = response.data.previous;
       });
+      this.annotations = [];
       for (let i = 0; i < this.docs.length; i++) {
         const docId = this.docs[i].id;
-        HTTP.get(`docs/${docId}/annotations/`).then((response) => {
+        await HTTP.get(`docs/${docId}/annotations/`).then((response) => {
           this.annotations.push(response.data);
         });
       }
@@ -77,10 +75,10 @@ const annotationMixin = {
       this.pageNumber = 0;
     },
 
-    removeLabel(label) {
+    removeLabel(annotation) {
       const docId = this.docs[this.pageNumber].id;
-      HTTP.delete(`docs/${docId}/annotations/${label.id}`).then((response) => {
-        const index = this.annotations[this.pageNumber].indexOf(response.data);
+      HTTP.delete(`docs/${docId}/annotations/${annotation.id}`).then((response) => {
+        const index = this.annotations[this.pageNumber].indexOf(annotation);
         this.annotations[this.pageNumber].splice(index, 1);
       });
     },
diff --git a/app/server/templates/annotation/document_classification.html b/app/server/templates/annotation/document_classification.html
index 83af1d46..400a3cf3 100644
--- a/app/server/templates/annotation/document_classification.html
+++ b/app/server/templates/annotation/document_classification.html
@@ -35,7 +35,7 @@
             </div>
         </div>
         <hr>
-        <div class="content">
+        <div class="content" v-if="docs[pageNumber]">
             [[ docs[pageNumber].text ]]
         </div>
     </div>