Merge pull request #184 from CogStack/metrics-bug-fixes

Metrics bug fixes / improvements
HDRUK · Apr 2, 2024 · f42ca0c · f42ca0c
2 parents b945746 + 4b8ffcc
commit f42ca0c
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 13 deletions.
diff --git a/webapp/api/api/views.py b/webapp/api/api/views.py
@@ -636,7 +636,7 @@ def serialize_task(task, state):
             return {
                 'report_id': task.id,
                 'report_name_generated': task.verbose_name,
-                'projects': task.verbose_name.split('-')[1].split(','),
+                'projects': task.verbose_name.split('-')[1].split('_'),
                 'created_user': task.creator.username,
                 'create_time': task.run_at.strftime(dt_fmt),
                 'status': state
@@ -698,7 +698,7 @@ def remove_metrics_job(request, report_id: int):
             pass
         task.delete()
         logger.info('Completed metrics job deleted - report ID: %s', report_id)
-        return Response(200, 'task / report deleted')
+        return Response('task / report deleted', 200)
 
 
 @api_view(http_method_names=['GET', 'PUT'])

diff --git a/webapp/frontend/src/router.js b/webapp/frontend/src/router.js
@@ -14,7 +14,7 @@ export default new Router({
   mode: 'history',
   routes: [
     {
-      path: '/train-annotations/:projectId/:docId',
+      path: '/train-annotations/:projectId/:docId?',
       name: 'train-annotations',
       component: TrainAnnotations,
       props: true,

diff --git a/webapp/frontend/src/styles/_common.scss b/webapp/frontend/src/styles/_common.scss
@@ -25,6 +25,12 @@
 
 $blur-radius: 10px;
 
+@each $i, $col in $task-colors {
+  .task-color-text-#{$i} {
+    color: $col;
+  }
+}
+
 @each $i, $col in $task-colors {
   .task-btn-#{$i} {
     border-color: $col;

diff --git a/webapp/frontend/src/views/Metrics.vue b/webapp/frontend/src/views/Metrics.vue
@@ -22,7 +22,15 @@
           <b-table striped hover small :items="userStats.items" :fields="userStats.fields"></b-table>
         </b-tab>
         <b-tab title="Annotations" class="anno-summary">
-          <b-table striped hover small :items="annoSummary.items" :fields="annoSummary.fields"></b-table>
+          <b-table striped hover small :items="annoSummary.items" :fields="annoSummary.fields">
+            <template #cell(status)="data">
+              <div id="status" :class="textColorClass(data.item.status)">
+                {{data.item.status}}
+                <font-awesome-icon icon="check-circle" v-if="['Correct', 'Manually Added', 'Alternative'].includes(data.item.status)"></font-awesome-icon>
+                <font-awesome-icon icon="times-circle" v-if="['Incorrect', 'Terminated', 'Irrelevant'].includes(data.item.status)"></font-awesome-icon>
+              </div>
+            </template>
+          </b-table>
         </b-tab>
         <b-tab title="Concept Summary" class="concept-summary">
           <b-table striped hover small :items="conceptSummary.items" :fields="conceptSummary.fields" id="concepts-sum-tbl">
@@ -203,7 +211,23 @@ export default {
         this.reportName = resp.data.results.report_name || resp.data.results.report_name_generated
         this.$set(this.userStats, 'items', resp.data.results.user_stats)
         this.$set(this.conceptSummary, 'items', resp.data.results.concept_summary)
-        this.$set(this.annoSummary, 'items', resp.data.results.annotation_summary)
+        let anno_summary = resp.data.results.annotation_summary.map(s => {
+          if (s.correct) {
+            s.status = 'Correct'
+          } else if (s.deleted) {
+            s.status = 'Incorrect'
+          } else if (s.alternative) {
+            s.status = 'Alternative'
+          } else if (s.manually_created) {
+            s.status = 'Manually Added'
+          } else if (s.killed) {
+            s.status = 'Terminated'
+          } else if (s.irrelevant) {
+            s.status = 'Irrelevant'
+          }
+          return s
+        })
+        this.$set(this.annoSummary, 'items', anno_summary)
         this.$set(this.metaAnnsSummary, 'items', resp.data.results.meta_anno_summary)
       })
     }
@@ -226,10 +250,10 @@ export default {
           { key: 'document_name', label: 'Doc. Name', sortable: true },
           { key: 'id', label: 'Annotation Id', sortable: true },
           { key: 'user', label: 'User', sortable: true },
-          { key: 'cui', label: 'CUI' },
+          { key: 'cui', label: 'CUI', sortable: true },
           { key: 'concept_name', label: 'Concept', sortable: true },
-          { key: 'value', label: 'text' }
-          // more fields for the validated, killed, correct, incorrect etc.
+          { key: 'value', label: 'text', sortable: true },
+          { key: 'status', label: 'Status', sortable: true }
         ]
       },
       conceptSummary: {
@@ -259,6 +283,15 @@ export default {
     }
   },
   methods: {
+    textColorClass (status) {
+      return {
+        'task-color-text-0': status === 'Correct' || status === 'Manually Added',
+        'task-color-text-1': status === 'Incorrect',
+        'task-color-text-2': status === 'Terminated',
+        'task-color-text-3': status === 'Alternative',
+        'task-color-text-4': status === 'Irrelevant'
+      }
+    },
     clearModalData () {
       this.modalData = {
         results: null,

diff --git a/webapp/frontend/src/views/MetricsHome.vue b/webapp/frontend/src/views/MetricsHome.vue
@@ -8,6 +8,10 @@
              :fields="reports.fields"
              :select-mode="'single'"
              @row-selected="loadMetrics">
+      <template #cell(projects)="data">
+        <v-runtime-template :template="data.value"></v-runtime-template>
+      </template>
+
       <template #cell(status)="data">
         <span v-if="data.item.status == 'pending'">Pending
           <font-awesome-icon icon="fa-regular fa-clock" class="status-icon"></font-awesome-icon>
@@ -20,7 +24,8 @@
         </span>
       </template>
       <template #cell(cleanup)="data">
-        <button class="btn btn-outline-danger" @click="confDeleteReportModal = data.item">
+        <button class="btn btn-outline-danger" @click="confDeleteReportModal = data.item"
+                :disabled="data.item.status === 'pending' || data.item.status === 'running'">
           <font-awesome-icon icon="times"></font-awesome-icon>
         </button>
       </template>
@@ -44,26 +49,28 @@
 </template>
 
 <script>
+import VRuntimeTemplate from 'v-runtime-template'
 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import Modal from '@/components/common/Modal.vue'
 
 export default {
   name: "MetricsHome",
-  components: {Modal, LoadingOverlay },
+  components: {Modal, LoadingOverlay, VRuntimeTemplate,},
   props: {
   },
   data () {
     return {
       loadingReports: false,
       confDeleteReportModal: null,
+      projects: {},
       reports: {
         items: [],
         fields: [
           { key: 'report_id', label: 'ID' },
           { key: 'report_name', label: 'Report Name' },
           { key: 'created_user', label: 'Created User' },
           { key: 'create_time', label: 'Create Time' },
-          { key: 'projects', label: 'Projects' },
+          { key: 'projects', label: 'Projects', formatter: this.projectsFormatter },
           { key: 'status', label: 'Status' },
           { key: 'cleanup', label: 'Remove' }
         ]
@@ -80,11 +87,22 @@ export default {
         this.loadingReports = false
         this.reports.items = resp.data.reports.map(i => {
           const item = {...i}
-          item.projects = item.projects.join(', ')
           item.report_name = item.report_name || item.report_name_generated
           return item
         })
-        setTimeout(this.pollReportStatus, 10000)
+        this.fetchProjects()
+        setTimeout(this.pollReportStatus, 5000)
+      })
+    },
+    fetchProjects () {
+      this.reports.items.forEach(item => {
+        item.projects.forEach(projId => {
+          if (!Object.keys(this.projects).includes(projId)) {
+            this.$http.get(`/api/project-annotate-entities/${projId}/`).then(resp => {
+              this.projects[projId] = resp.data
+            })
+          }
+        })
       })
     },
     loadMetrics (rows) {
@@ -103,6 +121,23 @@ export default {
       }).finally(err => {
         this.confDeleteReportModal = null
       })
+    },
+    projectsFormatter (value) {
+      let outEl = ''
+      value.forEach(i => {
+        if (this.projects[i]) {
+          outEl += `
+          <div>
+            <router-link :to="{ name: 'train-annotations', params: { projectId: '${i}' }}">${this.projects[i].name}</router-link>
+          </div>`
+        } else {
+          outEl += `
+            <div>
+              ${i} <font-awesome-icon icon="spinner" spin></font-awesome-icon>
+            </div>`
+        }
+      })
+      return `<div>${outEl}</div>`
     }
   }
 }
@@ -113,9 +148,21 @@ export default {
   padding: 10px 0;
   width: 95%;
   margin: auto;
+  height: calc(100% - 100px);
+  overflow-y: auto;
 }
 
 .status-icon {
   padding-left: 3px;
 }
+
+.project-links {
+  color: #005EB8;
+
+  &:hover {
+    color: #fff;
+    border-bottom: 1px solid #fff;
+  }
+}
+
 </style>