diff --git a/app/server/static/bundle/document_classification.js b/app/server/static/bundle/document_classification.js
index 89848b22..eb16d47f 100644
--- a/app/server/static/bundle/document_classification.js
+++ b/app/server/static/bundle/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      cur: 0,\n      items: [{\n        id: null,\n        text: '',\n        labels: [],\n      }],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n      annotations: [],\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.cur += 1;\n      if (this.cur === this.items.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.cur = 0;\n        } else {\n          this.cur = this.items.length - 1;\n        }\n      }\n      this.showMessage(this.cur);\n    },\n\n    async prevPage() {\n      this.cur -= 1;\n      if (this.cur === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.cur = this.items.length - 1;\n        } else {\n          this.cur = 0;\n        }\n      }\n      this.showMessage(this.cur);\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.items = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.items.length; i++) {\n        const docId = this.items[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    showMessage(index) {\n      this.cur = index;\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.cur = 0;\n    },\n\n    removeLabel(label) {\n      const docId = this.items[this.cur].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${label.id}`).then((response) => {\n        const index = this.annotations[this.cur].indexOf(response.data);\n        this.annotations[this.cur].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    items() {\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      items: [{\n        id: null,\n        text: '',\n        labels: [],\n      }],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n      annotations: [],\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.items.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.items.length - 1;\n        }\n      }\n      this.showMessage(this.pageNumber);\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.items.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n      this.showMessage(this.pageNumber);\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.items = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.items.length; i++) {\n        const docId = this.items[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    showMessage(index) {\n      this.pageNumber = index;\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.items[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    items() {\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 25b8d93f..e8894486 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      cur: 0,\n      items: [{\n        id: null,\n        text: '',\n        labels: [],\n      }],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n      annotations: [],\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.cur += 1;\n      if (this.cur === this.items.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.cur = 0;\n        } else {\n          this.cur = this.items.length - 1;\n        }\n      }\n      this.showMessage(this.cur);\n    },\n\n    async prevPage() {\n      this.cur -= 1;\n      if (this.cur === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.cur = this.items.length - 1;\n        } else {\n          this.cur = 0;\n        }\n      }\n      this.showMessage(this.cur);\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.items = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.items.length; i++) {\n        const docId = this.items[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    showMessage(index) {\n      this.cur = index;\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.cur = 0;\n    },\n\n    removeLabel(label) {\n      const docId = this.items[this.cur].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${label.id}`).then((response) => {\n        const index = this.annotations[this.cur].indexOf(response.data);\n        this.annotations[this.cur].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    items() {\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      items: [{\n        id: null,\n        text: '',\n        labels: [],\n      }],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n      annotations: [],\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.items.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.items.length - 1;\n        }\n      }\n      this.showMessage(this.pageNumber);\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.items.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n      this.showMessage(this.pageNumber);\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.items = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.items.length; i++) {\n        const docId = this.items[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    showMessage(index) {\n      this.pageNumber = index;\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.items[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    items() {\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 480a0a76..f5efba66 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      cur: 0,\n      items: [{\n        id: null,\n        text: '',\n        labels: [],\n      }],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n      annotations: [],\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.cur += 1;\n      if (this.cur === this.items.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.cur = 0;\n        } else {\n          this.cur = this.items.length - 1;\n        }\n      }\n      this.showMessage(this.cur);\n    },\n\n    async prevPage() {\n      this.cur -= 1;\n      if (this.cur === -1) {\n        if (this.prev) {\n          this.url = this.prev;\n          await this.search();\n          this.cur = this.items.length - 1;\n        } else {\n          this.cur = 0;\n        }\n      }\n      this.showMessage(this.cur);\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.items = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.items.length; i++) {\n        const docId = this.items[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    showMessage(index) {\n      this.cur = index;\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.cur = 0;\n    },\n\n    removeLabel(label) {\n      const docId = this.items[this.cur].id;\n      _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].delete(`docs/${docId}/annotations/${label.id}`).then((response) => {\n        const index = this.annotations[this.cur].indexOf(response.data);\n        this.annotations[this.cur].splice(index, 1);\n      });\n    },\n  },\n\n  watch: {\n    picked() {\n      this.submit();\n    },\n\n    items() {\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      items: [{\n        id: null,\n        text: '',\n        labels: [],\n      }],\n      labels: [],\n      guideline: '',\n      total: 0,\n      remaining: 0,\n      searchQuery: '',\n      url: '',\n      picked: 'all',\n      annotations: [],\n    };\n  },\n\n  methods: {\n    async nextPage() {\n      this.pageNumber += 1;\n      if (this.pageNumber === this.items.length) {\n        if (this.next) {\n          this.url = this.next;\n          await this.search();\n          this.pageNumber = 0;\n        } else {\n          this.pageNumber = this.items.length - 1;\n        }\n      }\n      this.showMessage(this.pageNumber);\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.items.length - 1;\n        } else {\n          this.pageNumber = 0;\n        }\n      }\n      this.showMessage(this.pageNumber);\n    },\n\n    async search() {\n      await _http__WEBPACK_IMPORTED_MODULE_0__[\"default\"].get(this.url).then((response) => {\n        this.items = response.data.results;\n        this.next = response.data.next;\n        this.prev = response.data.previous;\n      });\n      for (let i = 0; i < this.items.length; i++) {\n        const docId = this.items[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    showMessage(index) {\n      this.pageNumber = index;\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.items[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    items() {\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/mixin.js b/app/server/static/js/mixin.js
index 89295410..7fe33a7e 100644
--- a/app/server/static/js/mixin.js
+++ b/app/server/static/js/mixin.js
@@ -3,7 +3,7 @@ import HTTP from './http';
 const annotationMixin = {
   data() {
     return {
-      cur: 0,
+      pageNumber: 0,
       items: [{
         id: null,
         text: '',
@@ -22,31 +22,31 @@ const annotationMixin = {
 
   methods: {
     async nextPage() {
-      this.cur += 1;
-      if (this.cur === this.items.length) {
+      this.pageNumber += 1;
+      if (this.pageNumber === this.items.length) {
         if (this.next) {
           this.url = this.next;
           await this.search();
-          this.cur = 0;
+          this.pageNumber = 0;
         } else {
-          this.cur = this.items.length - 1;
+          this.pageNumber = this.items.length - 1;
         }
       }
-      this.showMessage(this.cur);
+      this.showMessage(this.pageNumber);
     },
 
     async prevPage() {
-      this.cur -= 1;
-      if (this.cur === -1) {
+      this.pageNumber -= 1;
+      if (this.pageNumber === -1) {
         if (this.prev) {
           this.url = this.prev;
           await this.search();
-          this.cur = this.items.length - 1;
+          this.pageNumber = this.items.length - 1;
         } else {
-          this.cur = 0;
+          this.pageNumber = 0;
         }
       }
-      this.showMessage(this.cur);
+      this.showMessage(this.pageNumber);
     },
 
     async search() {
@@ -64,7 +64,7 @@ const annotationMixin = {
     },
 
     showMessage(index) {
-      this.cur = index;
+      this.pageNumber = index;
     },
 
     getState() {
@@ -81,14 +81,14 @@ const annotationMixin = {
       const state = this.getState();
       this.url = `docs/?q=${this.searchQuery}&is_checked=${state}`;
       await this.search();
-      this.cur = 0;
+      this.pageNumber = 0;
     },
 
     removeLabel(label) {
-      const docId = this.items[this.cur].id;
+      const docId = this.items[this.pageNumber].id;
       HTTP.delete(`docs/${docId}/annotations/${label.id}`).then((response) => {
-        const index = this.annotations[this.cur].indexOf(response.data);
-        this.annotations[this.cur].splice(index, 1);
+        const index = this.annotations[this.pageNumber].indexOf(response.data);
+        this.annotations[this.pageNumber].splice(index, 1);
       });
     },
   },
diff --git a/app/server/templates/annotation/annotation_base.html b/app/server/templates/annotation/annotation_base.html
index 521b0fe7..04be1c4b 100644
--- a/app/server/templates/annotation/annotation_base.html
+++ b/app/server/templates/annotation/annotation_base.html
@@ -48,7 +48,7 @@
             </div>
 
             <div class="main">
-                <a href="#" class="item" v-for="(msg, index) in items" v-bind:class="{ active: index == cur }" v-on:click="showMessage(index)"
+                <a href="#" class="item" v-for="(msg, index) in items" v-bind:class="{ active: index == pageNumber }" v-on:click="showMessage(index)"
                     v-bind:data-preview-id="index">
                     <span class="icon">
                         <i class="fa fa-check" v-show="annotations[index] && annotations[index].length"></i>
diff --git a/app/server/templates/annotation/document_classification.html b/app/server/templates/annotation/document_classification.html
index 60fc9369..fe39983c 100644
--- a/app/server/templates/annotation/document_classification.html
+++ b/app/server/templates/annotation/document_classification.html
@@ -24,7 +24,7 @@
 
     <div class="card-content">
         <div class="field is-grouped is-grouped-multiline">
-            <div class="control" v-for="(annotation, index) in annotations[cur]">
+            <div class="control" v-for="(annotation, index) in annotations[pageNumber]">
                 <div class="tags has-addons">
                     <span class="tag is-medium"
                           v-bind:style="{ color: id2label[annotation.label].text_color, 'background-color': id2label[annotation.label].background_color }">
@@ -36,7 +36,7 @@
         </div>
         <hr>
         <div class="content">
-            [[ items[cur].text ]]
+            [[ items[pageNumber].text ]]
         </div>
     </div>
 </div>