From 5900941741891070fe3bca8599879a1496e94005 Mon Sep 17 00:00:00 2001
From: Tom Searle <tsearle88@gmail.com>
Date: Thu, 28 Mar 2024 14:52:43 +0000
Subject: [PATCH 1/5] 8693wuh25: Add a scroll bar to table container

---
 webapp/frontend/src/views/MetricsHome.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webapp/frontend/src/views/MetricsHome.vue b/webapp/frontend/src/views/MetricsHome.vue
index fa9905e4..8d2a65b7 100644
--- a/webapp/frontend/src/views/MetricsHome.vue
+++ b/webapp/frontend/src/views/MetricsHome.vue
@@ -113,6 +113,8 @@ export default {
   padding: 10px 0;
   width: 95%;
   margin: auto;
+  height: calc(100% - 100px);
+  overflow-y: auto;
 }
 
 .status-icon {

From c454d3589543f2b22ebd5da7360c87095f2f971e Mon Sep 17 00:00:00 2001
From: Tom Searle <tsearle88@gmail.com>
Date: Thu, 28 Mar 2024 15:37:25 +0000
Subject: [PATCH 2/5] 8693wuh25: Add project links to metrics home screen

---
 webapp/frontend/src/views/MetricsHome.vue | 31 +++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/webapp/frontend/src/views/MetricsHome.vue b/webapp/frontend/src/views/MetricsHome.vue
index 8d2a65b7..c3a04cda 100644
--- 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">
+        <div v-html="data.value"></div>
+      </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>
@@ -56,6 +60,7 @@ export default {
     return {
       loadingReports: false,
       confDeleteReportModal: null,
+      projects: {},
       reports: {
         items: [],
         fields: [
@@ -63,7 +68,7 @@ export default {
           { 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,13 +85,24 @@ 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
         })
+        this.fetchProjects()
         setTimeout(this.pollReportStatus, 10000)
       })
     },
+    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) {
       this.$router.push({
         name: 'metrics',
@@ -103,6 +119,17 @@ export default {
       }).finally(err => {
         this.confDeleteReportModal = null
       })
+    },
+    projectsFormatter (value) {
+      let outEl = ''
+      value.forEach(i => {
+        if (this.projects[i]) {
+          outEl += `<router-link to="train-annotations/${i}/">${this.projects[i].name}</router-link>`
+        } else {
+          outEl += `<div>${i}</div>`
+        }
+      })
+      return `<div>${outEl}</div>`
     }
   }
 }

From 3318cf038a090ddb01a281a27de823416474e887 Mon Sep 17 00:00:00 2001
From: Tom Searle <tsearle88@gmail.com>
Date: Fri, 29 Mar 2024 12:07:16 +0000
Subject: [PATCH 3/5] 8693wuh25: Add project links to metrics home screen

---
 webapp/api/api/views.py                   |  2 +-
 webapp/frontend/src/router.js             |  2 +-
 webapp/frontend/src/views/MetricsHome.vue | 22 ++++++++++++++++++----
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/webapp/api/api/views.py b/webapp/api/api/views.py
index de484afa..856c30e6 100644
--- 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
diff --git a/webapp/frontend/src/router.js b/webapp/frontend/src/router.js
index 4a1c54f0..ce18996b 100644
--- 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/views/MetricsHome.vue b/webapp/frontend/src/views/MetricsHome.vue
index c3a04cda..6b6f7755 100644
--- a/webapp/frontend/src/views/MetricsHome.vue
+++ b/webapp/frontend/src/views/MetricsHome.vue
@@ -9,7 +9,7 @@
              :select-mode="'single'"
              @row-selected="loadMetrics">
       <template #cell(projects)="data">
-        <div v-html="data.value"></div>
+        <v-runtime-template :template="data.value"></v-runtime-template>
       </template>
 
       <template #cell(status)="data">
@@ -48,12 +48,13 @@
 </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 () {
@@ -89,7 +90,7 @@ export default {
           return item
         })
         this.fetchProjects()
-        setTimeout(this.pollReportStatus, 10000)
+        setTimeout(this.pollReportStatus, 5000)
       })
     },
     fetchProjects () {
@@ -124,7 +125,10 @@ export default {
       let outEl = ''
       value.forEach(i => {
         if (this.projects[i]) {
-          outEl += `<router-link to="train-annotations/${i}/">${this.projects[i].name}</router-link>`
+          outEl += `
+          <div>
+            <router-link :to="{ name: 'train-annotations', params: { projectId: '${i}' }}">${this.projects[i].name}</router-link>
+          </div>`
         } else {
           outEl += `<div>${i}</div>`
         }
@@ -147,4 +151,14 @@ export default {
 .status-icon {
   padding-left: 3px;
 }
+
+.project-links {
+  color: #005EB8;
+
+  &:hover {
+    color: #fff;
+    border-bottom: 1px solid #fff;
+  }
+}
+
 </style>

From 16c52fe2ff0809b32733886df0ecb9bcbde91f90 Mon Sep 17 00:00:00 2001
From: Tom Searle <tsearle88@gmail.com>
Date: Fri, 29 Mar 2024 12:40:59 +0000
Subject: [PATCH 4/5] 8693wugha: disable removing running / pending reports.
 Fix report removal on screen

---
 webapp/api/api/views.py                   | 2 +-
 webapp/frontend/src/views/MetricsHome.vue | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/webapp/api/api/views.py b/webapp/api/api/views.py
index 856c30e6..c35afa42 100644
--- a/webapp/api/api/views.py
+++ b/webapp/api/api/views.py
@@ -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/views/MetricsHome.vue b/webapp/frontend/src/views/MetricsHome.vue
index 6b6f7755..56f670a8 100644
--- a/webapp/frontend/src/views/MetricsHome.vue
+++ b/webapp/frontend/src/views/MetricsHome.vue
@@ -24,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>
@@ -130,7 +131,10 @@ export default {
             <router-link :to="{ name: 'train-annotations', params: { projectId: '${i}' }}">${this.projects[i].name}</router-link>
           </div>`
         } else {
-          outEl += `<div>${i}</div>`
+          outEl += `
+            <div>
+              ${i} <font-awesome-icon icon="spinner" spin></font-awesome-icon>
+            </div>`
         }
       })
       return `<div>${outEl}</div>`

From 4b8ffccbfc3157ed72e275a8c7682c220852d7eb Mon Sep 17 00:00:00 2001
From: Tom Searle <tsearle88@gmail.com>
Date: Tue, 2 Apr 2024 12:28:43 +0100
Subject: [PATCH 5/5] 8693krvqw: Add a column to label status of an anno

---
 webapp/frontend/src/styles/_common.scss |  6 ++++
 webapp/frontend/src/views/Metrics.vue   | 43 ++++++++++++++++++++++---
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/webapp/frontend/src/styles/_common.scss b/webapp/frontend/src/styles/_common.scss
index bbc20924..46463bb8 100644
--- 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
index c6d5fd8d..3cd32f83 100644
--- 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,