Merge pull request #159 from CogStack/progress-on-home-page

Show progress on home page for each project

webapp/api/api/views.py

@@ -734,3 +734,23 @@ def generate_concept_filter(request):
             resp['filter'] = final_filter
         return Response(resp)
     return HttpResponseBadRequest('Missing either cuis or cdb_id param. Cannot generate filter.')
+
+
+@api_view(http_method_names=['GET'])
+def project_progress(request):
+    projects = [int(p) for p in request.GET.get('projects', []).split(',')]
+
+    projects2datasets = {p.id: (p, p.dataset) for p in [ProjectAnnotateEntities.objects.filter(id=p_id).first()
+                                                        for p_id in projects]}
+
+    out = {}
+    ds_doc_counts = {}
+    for p, (proj, ds) in projects2datasets.items():
+        val_docs = proj.validated_documents.count()
+        ds_doc_count = ds_doc_counts.get(ds.id)
+        if ds_doc_count is None:
+            ds_doc_count = Document.objects.filter(dataset=ds).count()
+            ds_doc_counts[ds.id] = ds_doc_count
+        out[p] = {'validated_count': val_docs, 'dataset_count': ds_doc_count}
+
+    return Response(out)

webapp/api/core/urls.py

@@ -57,6 +57,7 @@
     path('api/download-annos/', api.views.download_annos),
     path('api/behind-rp/', api.views.behind_reverse_proxy),
     path('api/version/', api.views.version),
+    path('api/project-progress/', api.views.project_progress),
     path('api/concept-db-search-index-created/', api.views.concept_search_index_available),
     path('api/model-loaded/', api.views.model_loaded),
     path('api/cache-model/<int:cdb_id>/', api.views.cache_model),

webapp/frontend/src/views/Home.vue

@@ -46,8 +46,8 @@
           </b-tooltip>
         </template>
         <template #head(anno_class)="">
-          <div id="dataset-header">Annotation Dataset</div>
-          <b-tooltip target="dataset-header"
+          <div id="anno-class-header">Annotation Dataset</div>
+          <b-tooltip target="anno-class-header"
                      triggers="hover"
                      container="projectTable">
             Annotation set classification.
@@ -59,6 +59,15 @@
             </div>
           </b-tooltip>
         </template>
+
+        <template #head(progress)="">
+          <div id="progress-header">Progress</div>
+          <b-tooltip target="progress-header"
+                     triggers="hover"
+                     container="projectTable">
+            Number of validated documents / total number of documents configured in the project
+          </b-tooltip>
+        </template>
         <template #cell(locked)="data">
           <font-awesome-icon v-if="data.item.project_locked" class="status-locked" icon="lock"></font-awesome-icon>
           <font-awesome-icon v-if="!data.item.project_locked" class="status-unlocked" icon="lock-open"></font-awesome-icon>
@@ -115,6 +124,9 @@
         <template #cell(save_model)="data">
           <button class="btn btn-outline-primary" :disabled="saving" @click="saveModel(data.item.id)"><font-awesome-icon icon="save"></font-awesome-icon></button>
         </template>
+        <template #cell(progress)="data">
+          <div v-html="data.value"></div>
+        </template>
       </b-table>
     </div>
     <div>
@@ -172,7 +184,8 @@ export default {
           { key: 'create_time', label: 'Create Time', sortable: true },
           { key: 'cuis', label: 'Concepts' },
           { key: 'require_entity_validation', label: 'Annotate / Validate' },
-          { key: 'status', label: 'Status' },
+          { key: 'status', label: 'Status', sortable: true },
+          { key: 'progress', label: 'Progress', formatter: this.progressFormatter },
           { key: 'anno_class', label: 'Annotation Classification'},
           { key: 'cdb_search_filter', label: 'Concepts Imported' },
           { key: 'model_loaded', label: 'Model Loaded' },
@@ -268,6 +281,7 @@ export default {
     postLoadedProjects () {
       this.fetchCDBsLoaded()
       this.fetchSearchIndexStatus()
+      this.fetchProjectProgress()
       this.loadingProjects = false
     },
     fetchCDBsLoaded () {
@@ -321,6 +335,16 @@ export default {
         console.log(err)
       })
     },
+    fetchProjectProgress () {
+      const projectIds = this.projects.items.map(p => p.id)
+      this.$http.get(`/api/project-progress/?projects=${projectIds}`).then(resp => {
+        this.projects.items = this.projects.items.map(item => {
+          item['progress'] = `${resp.data[item.id].validated_count} / ${resp.data[item.id].dataset_count}`
+          item['percent_progress'] = Math.ceil((resp.data[item.id].validated_count / resp.data[item.id].dataset_count) * 100)
+          return item
+        })
+      })
+    },
     select (projects) {
       let project = projects[0]
       if (!project.project_locked) {
@@ -358,12 +382,25 @@ export default {
           that.modelSavedError = false
         }, 5000)
       })
+    },
+    progressFormatter (value, key, item) {
+      let txtColorClass = 'good-perf'
+      if (item['percent_progress'] < 80) {
+        txtColorClass = 'bad-perf'
+      }
+      return `
+        <div class="progress-container ${txtColorClass}">
+            ${value}
+            <div class="progress-gradient-fill" style="width: calc(${item['percent_progress']}%);"></div>
+        </div>
+
+      `
     }
   }
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 h3 {
   margin: 10%
 }
@@ -447,4 +484,27 @@ h3 {
   padding: 0 5px;
 }
 
+.progress-container {
+  position: relative;
+  padding-left: 2px;
+}
+
+.progress-gradient-fill {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  height: 25px;
+  padding: 0 1px;
+  background-image: linear-gradient(to right, #32ab60, #E8EDEE);
+  box-shadow: 0 5px 5px -5px #32ab60;
+}
+
+.good-perf {
+  color: #E5EBEA;
+}
+
+.bad-perf {
+  color: #45503B;
+}
+
 </style>