Add progress number

app/server/static/bundle/document_classification.js

@@ -495,7 +495,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axio
 /***/ (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      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    annotations() {\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      count: 0,\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        this.count = response.data.count;\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    annotations() {\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?");
 
 /***/ })
 

app/server/static/bundle/seq2seq.js

@@ -483,7 +483,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axio
 /***/ (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      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    annotations() {\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      count: 0,\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        this.count = response.data.count;\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    annotations() {\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?");
 
 /***/ }),
 

app/server/static/bundle/sequence_labeling.js

@@ -483,7 +483,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var axio
 /***/ (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      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    annotations() {\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      count: 0,\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        this.count = response.data.count;\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    annotations() {\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?");
 
 /***/ }),
 

app/server/static/css/annotation.css

@@ -37,21 +37,25 @@ body {
 
 .aside .main .item {
   display: flex;
-  padding: 10px 0;
+  /*padding: 10px 0;*/
+  padding: 10px 20px 10px 40px;
+  margin: 0 -50px;
   color: #6F7B7E;
 }
 
 .aside .main .item.active {
   background-color: #5a5e5f;
   margin: 0 -50px;
-  padding-left: 50px;
+  /*padding-left: 50px;*/
+  padding-left: 40px;
 }
 
 .aside .main .item:active,
 .aside .main .item:hover {
   background-color: #5a5e5f;
   margin: 0 -50px;
-  padding-left: 50px;
+  /*padding-left: 50px;*/
+  padding-left: 40px;
 }
 
 .aside .main .icon {
@@ -74,11 +78,6 @@ body {
   padding: 40px 20px;
 }
 
-.progress-bar {
-  margin-bottom: 20px;
-  width: 150px;
-}
-
 .pg {
   display: inline-block;
   top: 10px;

app/server/static/js/mixin.js

@@ -13,6 +13,7 @@ const annotationMixin = {
       searchQuery: '',
       url: '',
       picked: 'all',
+      count: 0,
     };
   },
 
@@ -48,6 +49,7 @@ const annotationMixin = {
         this.docs = response.data.results;
         this.next = response.data.next;
         this.prev = response.data.previous;
+        this.count = response.data.count;
       });
       this.annotations = [];
       for (let i = 0; i < this.docs.length; i++) {

app/server/templates/annotation/annotation_base.html

@@ -47,6 +47,10 @@
         </div>
       </div>
 
+      <div class="main" style="padding:0px 20px;">
+        <span>About [[ count ]] results</span>
+      </div>
+
       <div class="main">
         <a href="#" class="item" v-for="(doc, index) in docs" v-bind:class="{ active: index == pageNumber }" v-on:click="pageNumber = index"
           v-bind:data-preview-id="index">
@@ -60,8 +64,13 @@
   </aside>
   <div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">
 
-    <div class="progress-bar">
-      <progress class="progress" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
+    <div class="columns is-multiline is-gapless is-mobile">
+      <div class="column is-3">
+        <progress class="progress is-inline-block" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
+      </div>
+      <div class="column is-9">
+        <span style="margin-left:10px;"><strong>[[ total - remaining ]]</strong></span>/<span>[[ total ]]</span>
+      </div>
     </div>
 
     {% block annotation-area %} {% endblock %}