From f14b89b6dbf5077dd9d604f6d5aa4a1974e56e8d Mon Sep 17 00:00:00 2001
From: tomolopolis <tsearle88@gmail.com>
Date: Fri, 12 Jul 2024 19:49:44 +0100
Subject: [PATCH 1/2] 8694rrpje: a ConceptFilter component, to search across a
 configured project filter. Also swapped out all the loading-overlay with
 bootstrap-vue versions of the same component

---
 webapp/api/api/views.py                       |  18 ++
 webapp/api/core/urls.py                       |   9 +-
 .../src/components/common/ClinicalText.vue    |  11 +-
 .../src/components/common/ConceptFilter.vue   | 189 ++++++++++++++++++
 .../src/components/common/LoadingOverlay.vue  |  54 -----
 .../frontend/src/components/common/Modal.vue  |   4 +-
 .../src/components/common/ProjectList.vue     |  13 +-
 .../components/models/ConceptDatabaseViz.vue  |  12 +-
 webapp/frontend/src/styles/_common.scss       |   5 +
 webapp/frontend/src/views/Home.vue            |   2 -
 webapp/frontend/src/views/Metrics.vue         |  12 +-
 webapp/frontend/src/views/MetricsHome.vue     |  12 +-
 .../frontend/src/views/TrainAnnotations.vue   | 140 +++++++------
 13 files changed, 334 insertions(+), 147 deletions(-)
 create mode 100644 webapp/frontend/src/components/common/ConceptFilter.vue
 delete mode 100644 webapp/frontend/src/components/common/LoadingOverlay.vue

diff --git a/webapp/api/api/views.py b/webapp/api/api/views.py
index a98ffed8..5f2b0682 100644
--- a/webapp/api/api/views.py
+++ b/webapp/api/api/views.py
@@ -820,6 +820,24 @@ def generate_concept_filter(request):
     return HttpResponseBadRequest('Missing either cuis or cdb_id param. Cannot generate filter.')
 
 
+@api_view(http_method_names=['POST'])
+def cuis_to_concepts(request):
+    cuis = request.data.get('cuis')
+    cdb_id = request.data.get('cdb_id')
+    if cdb_id is not None:
+        if cuis is not None:
+            cdb = get_cached_cdb(cdb_id, CDB_MAP)
+            concept_list = [{'cui': cui, 'name': cdb.cui2preferred_name[cui]} for cui in cuis]
+            resp = {'concept_list': concept_list}
+            return Response(resp)
+        else:
+            cdb = get_cached_cdb(cdb_id, CDB_MAP)
+            concept_list = [{'cui': cui, 'name': cdb.cui2preferred_name[cui]} for cui in cdb.cui2preferred_name.keys()]
+            resp = {'concept_list': concept_list}
+            return Response(resp)
+    return HttpResponseBadRequest('Missing either cuis or cdb_id param. Cannot produce concept list.')
+
+
 @api_view(http_method_names=['GET'])
 def project_progress(request):
     projects = [int(p) for p in request.GET.get('projects', []).split(',')]
diff --git a/webapp/api/core/urls.py b/webapp/api/core/urls.py
index 1f6bc754..0b58b88e 100644
--- a/webapp/api/core/urls.py
+++ b/webapp/api/core/urls.py
@@ -54,9 +54,10 @@
     path('api/concept-path/', api.views.cdb_concept_path),
     path('api/generate-concept-filter-json/', api.views.generate_concept_filter_flat_json),
     path('api/generate-concept-filter/', api.views.generate_concept_filter),
-    path('reset_password/', api.views.ResetPasswordView.as_view(), name ='reset_password'),
-    path('reset_password_sent/', pw_views.PasswordResetDoneView.as_view(), name ='password_reset_done'),
-    path('reset/<uidb64>/<token>', pw_views.PasswordResetConfirmView.as_view(), name ='password_reset_confirm'),
-    path('reset_password_complete/', pw_views.PasswordResetCompleteView.as_view(), name ='password_reset_complete'),
+    path('api/cuis-to-concepts/', api.views.cuis_to_concepts),
+    path('reset_password/', api.views.ResetPasswordView.as_view(), name='reset_password'),
+    path('reset_password_sent/', pw_views.PasswordResetDoneView.as_view(), name='password_reset_done'),
+    path('reset/<uidb64>/<token>', pw_views.PasswordResetConfirmView.as_view(), name='password_reset_confirm'),
+    path('reset_password_complete/', pw_views.PasswordResetCompleteView.as_view(), name='password_reset_complete'),
     re_path('^.*$', api.views.index, name='index'),  # Match everything else to home
 ]
diff --git a/webapp/frontend/src/components/common/ClinicalText.vue b/webapp/frontend/src/components/common/ClinicalText.vue
index b06fe68a..bda03094 100644
--- a/webapp/frontend/src/components/common/ClinicalText.vue
+++ b/webapp/frontend/src/components/common/ClinicalText.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="note-container">
-    <loading-overlay :loading="loading !== null">
-      <div slot="message">{{loading}}</div>
-    </loading-overlay>
+    <b-overlay :show="loading !== null" no-wrap opacity="0.2">
+      <template #overlay>
+        <b-spinner :variant="'primary'"></b-spinner>
+        <span class="overlay-message">{{loading}}</span>
+      </template>
+    </b-overlay>
     <div v-if="!loading" class="clinical-note">
       <v-runtime-template ref="clinicalText" :template="formattedText"></v-runtime-template>
     </div>
@@ -18,13 +21,11 @@
 <script>
 import VRuntimeTemplate from 'v-runtime-template'
 import VueSimpleContextMenu from 'vue-simple-context-menu'
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import _ from 'lodash'
 
 export default {
   name: 'ClinicalText',
   components: {
-    LoadingOverlay,
     VRuntimeTemplate,
     VueSimpleContextMenu
   },
diff --git a/webapp/frontend/src/components/common/ConceptFilter.vue b/webapp/frontend/src/components/common/ConceptFilter.vue
new file mode 100644
index 00000000..14174799
--- /dev/null
+++ b/webapp/frontend/src/components/common/ConceptFilter.vue
@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <b-overlay :show="loading" no-wrap opacity="0.5">
+      <template #overlay>
+        <b-spinner :variant="'primary'"></b-spinner>
+      </template>
+    </b-overlay>
+    <div>
+      <div class="search-bar">
+        <b-input v-model="filter" type="search" placeholder="Search for concepts..."></b-input>
+        <span v-if="filter === ''">Project Concept Filter: {{(allItems || []).length}}</span>
+        <span v-if="filter !== ''">Found {{allFilteredItems.length}} - showing first {{items.length}}</span>
+      </div>
+
+      <b-table ref="concept-table" id="table-id"
+               :items="items"
+               :fields="fields"
+               sticky-header
+               show-empty
+               small>
+        <template #cell(name)="data">
+          <span v-html="data.item.name"></span>
+        </template>
+      </b-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+
+const ROW_LIMIT = 100
+
+export default {
+  name: "ConceptFilter",
+  props: {
+    cuis: String,
+    cdb_id: Number
+  },
+  data () {
+    return {
+      rowLimit: ROW_LIMIT,
+      currentPage: 1,
+      loading: false,
+      items: null,
+      allItems: null,
+      allFilteredItems: null,
+      fields: [
+        { key: 'cui', label: 'CUI', sortable: true },
+        { key: 'name', label: 'Name', sortable: true }
+      ],
+      filter: '',
+    }
+  },
+  created () {
+    this.loading = true
+    let payload = {
+      cuis: this.cuis !== '' ? this.cuis.split(',') : null,
+      cdb_id: this.cdb_id
+    }
+    this.$http.post('/api/cuis-to-concepts/', payload).then(resp => {
+      const items = resp.data.concept_list.sort((a,b) => a.name.localeCompare(b.name))
+      if (items.length > ROW_LIMIT) {
+        this.items = items.slice(0, ROW_LIMIT)
+        this.allItems = items
+      } else {
+        this.items = items
+        this.allItems = this.items
+      }
+      this.loading = false
+    })
+  },
+  mounted () {
+    const tableScrollBody = this.$refs["concept-table"].$el;
+    /* Consider debouncing the event call */
+    tableScrollBody.addEventListener("scroll", this.onScroll);
+  },
+  beforeDestroy() {
+    /* Clean up just to be sure */
+    const tableScrollBody = this.$refs["concept-table"].$el;
+    tableScrollBody.removeEventListener("scroll", this.onScroll);
+  },
+  methods: {
+    onScroll (event) {
+      if (
+        event.target.scrollTop + event.target.clientHeight >=
+        event.target.scrollHeight
+      ) {
+        // fetch more items
+        if (this.allFilteredItems !== null && this.items.length !== this.allFilteredItems.length) {
+          window.setTimeout(() => {
+            if (this.filter.length !== 0) {
+              if (this.items.length < this.allFilteredItems.length) {
+                this.items = this.allFilteredItems.slice(0, ROW_LIMIT * this.currentPage)
+                this.currentPage ++
+                this.loading = false
+              }
+            } else if (this.items.length !== this.allItems.length) {
+              this.items = this.allItems.slice(0, ROW_LIMIT * this.currentPage)
+              this.currentPage ++
+              this.loading = false
+            } else {
+              this.loading = false
+            }
+          }, 200)
+          this.loading = true
+        }
+      }
+    },
+    filterItems: _.debounce(function(filterStr) {
+      filterStr = filterStr.toLowerCase()
+      function highlightCUINames(concepts, query) {
+        const lowercaseQuery = query.toLowerCase();
+        return concepts.map(concept => {
+          const name = concept.name
+          let lowercaseStr = name.toLowerCase();
+          let result = '';
+          let lastIndex = 0;
+
+          while (true) {
+            const index = lowercaseStr.indexOf(lowercaseQuery, lastIndex);
+            if (index === -1) break;
+
+            result += name.slice(lastIndex, index);
+            result += `<span class="highlight">${name.slice(index, index + query.length)}</span>`;
+
+            lastIndex = index + query.length;
+          }
+          result += name.slice(lastIndex);
+          return {...concept, ...{ name: result }}
+        });
+      }
+      let filteredItems = this.allItems.filter((v) => v.name.toLowerCase().includes(filterStr))
+      filteredItems = filteredItems.sort((a,b) => {
+        const aStartsWith = a.name.toLowerCase().startsWith(filterStr)
+        const bStartsWith = b.name.toLowerCase().startsWith(filterStr)
+        if (aStartsWith !== bStartsWith) {
+          return aStartsWith ? -1 : 1
+        }
+        return a.name.length - b.name.length
+
+      })
+      filteredItems = highlightCUINames(filteredItems, filterStr)
+
+      if (filteredItems.length > ROW_LIMIT) {
+        this.allFilteredItems = filteredItems
+        this.items = this.allFilteredItems.slice(0, ROW_LIMIT)
+      } else {
+        this.items = filteredItems
+        this.allFilteredItems = []
+      }
+      this.currentPage = 0
+      this.loading = false
+    }, 300)
+  },
+  watch: {
+    filter (newVal, oldVal) {
+      if (newVal.length > 0) {
+        this.filterItems(newVal)
+      } else {
+        this.items = this.allItems.slice(0, ROW_LIMIT)
+        this.allFilteredItems = null
+        this.currentPage = 0
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.search-bar {
+  margin: 10px 0;
+  width: calc(100% - 300px);
+
+  input {
+    display: inline-block;
+    width: calc(100% - 300px);
+  }
+
+  span {
+    float: right;
+  }
+}
+
+.highlight {
+  font-weight: bold;
+}
+</style>
diff --git a/webapp/frontend/src/components/common/LoadingOverlay.vue b/webapp/frontend/src/components/common/LoadingOverlay.vue
deleted file mode 100644
index c54e0e21..00000000
--- a/webapp/frontend/src/components/common/LoadingOverlay.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <transition name="fade">
-    <div v-if="loading" class="loading">
-      <h3 class="loading-message">
-        <slot name="message">
-        </slot>
-      </h3>
-      <div class="spinner">
-        <font-awesome-icon icon="spinner" size="1x" spin></font-awesome-icon>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'LoadingOverlay',
-  props: {
-    loading: Boolean
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.loading {
-  background: $loading-background-color;
-  height: 100%;
-  position: relative;
-  z-index: 10000;
-
-  .loading-message {
-    position: absolute;
-    top: 45%;
-    left: 35%;
-    opacity: 0.25;
-  }
-
-  .spinner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    font-size: 64px;
-    opacity: 0.25;
-  }
-}
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .3s;
-}
-
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/webapp/frontend/src/components/common/Modal.vue b/webapp/frontend/src/components/common/Modal.vue
index 53056028..1b53c1f4 100644
--- a/webapp/frontend/src/components/common/Modal.vue
+++ b/webapp/frontend/src/components/common/Modal.vue
@@ -84,11 +84,13 @@ export default {
 
 .modal-header h3 {
   margin-top: 0;
-  text-align: center;
+  text-align: left;
+  margin-left: 0;
 }
 
 .modal-header h4 {
   display: inline-block;
+  margin-left: 0;
 }
 
 .modal-header .close {
diff --git a/webapp/frontend/src/components/common/ProjectList.vue b/webapp/frontend/src/components/common/ProjectList.vue
index 51770804..8d2d0ae4 100644
--- a/webapp/frontend/src/components/common/ProjectList.vue
+++ b/webapp/frontend/src/components/common/ProjectList.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="full-height project-table">
     <div class="table-container">
-      <loading-overlay :loading="loadingProjects">
-        <p slot="message">Loading Projects...</p>
-      </loading-overlay>
+      <b-overlay :show="loadingProjects">
+        <template #overlay>
+          <b-spinner :variant="'primary'"></b-spinner>
+          <span class="overlay-message">Loading Projects...</span>
+        </template>
+      </b-overlay>
       <b-table id="projectTable" hover small :items="projectItems"
                :fields="isAdmin ? projects.fields : projects.fields.filter(f => projects.adminOnlyFields.indexOf(f.key) === -1)"
                :select-mode="'single'"
@@ -169,12 +172,10 @@
 
 <script>
 import Modal from "@/components/common/Modal.vue"
-import LoadingOverlay from "@/components/common/LoadingOverlay.vue"
-import _ from "lodash"
 
 export default {
   name: "ProjectList",
-  components: {LoadingOverlay, Modal},
+  components: { Modal},
   props: {
     projectItems: Array,
     isAdmin: Boolean,
diff --git a/webapp/frontend/src/components/models/ConceptDatabaseViz.vue b/webapp/frontend/src/components/models/ConceptDatabaseViz.vue
index d3e3278d..4e4f2a0c 100644
--- a/webapp/frontend/src/components/models/ConceptDatabaseViz.vue
+++ b/webapp/frontend/src/components/models/ConceptDatabaseViz.vue
@@ -5,9 +5,12 @@
       <button  class="btn btn-default" @click="zoomOut"><font-awesome-icon icon="minus"></font-awesome-icon></button>
       <button class="btn btn-default" @click="resetZoom">1:1</button>
     </div>
-    <loading-overlay :loading="loading">
-      <div slot="message">Retrieving Concept Tree...</div>
-    </loading-overlay>
+    <b-overlay :show="loading">
+      <template #overlay>
+        <b-spinner :variant="'primary'"></b-spinner>
+        <span class="overlay-message">Retrieving Concept Tree...</span>
+      </template>
+    </b-overlay>
     <div class="mc-tree-view">
       <vue-tree
         style="width: 1500px; height: 1000px;"
@@ -30,13 +33,12 @@
 </template>
 
 <script>
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VueTree from '@/components/models/VueTree.vue'
 import _ from 'lodash'
 
 export default {
   name: 'ConceptDatabaseViz',
-  components: { LoadingOverlay, VueTree },
+  components: { VueTree },
   props: {
     cdb: Object,
     selectedCui: String
diff --git a/webapp/frontend/src/styles/_common.scss b/webapp/frontend/src/styles/_common.scss
index 46463bb8..b1c7ed09 100644
--- a/webapp/frontend/src/styles/_common.scss
+++ b/webapp/frontend/src/styles/_common.scss
@@ -69,3 +69,8 @@ $blur-radius: 10px;
   opacity: 0;
 }
 
+.overlay-message {
+  padding-left: 10px;
+  opacity: 0.5;
+}
+
diff --git a/webapp/frontend/src/views/Home.vue b/webapp/frontend/src/views/Home.vue
index cfb98231..5aef66bf 100644
--- a/webapp/frontend/src/views/Home.vue
+++ b/webapp/frontend/src/views/Home.vue
@@ -40,7 +40,6 @@ import _ from 'lodash'
 import Modal from '@/components/common/Modal.vue'
 import Login from '@/components/common/Login.vue'
 import EventBus from '@/event-bus'
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import ProjectList from "@/components/common/ProjectList.vue"
 
 
@@ -48,7 +47,6 @@ export default {
   name: 'Home',
   components: {
     ProjectList,
-    LoadingOverlay,
     Login,
     Modal
   },
diff --git a/webapp/frontend/src/views/Metrics.vue b/webapp/frontend/src/views/Metrics.vue
index 3cd32f83..a23356c7 100644
--- a/webapp/frontend/src/views/Metrics.vue
+++ b/webapp/frontend/src/views/Metrics.vue
@@ -14,9 +14,12 @@
 
     </div>
     <div class="viewport-full-height">
-      <loading-overlay :loading="loading">
-        <span slot="message">Loading metrics report...</span>
-      </loading-overlay>
+      <b-overlay :show="loading">
+        <template #overlay>
+          <b-spinner variant="'primary'"></b-spinner>
+          <span class="overlay-message">Loading metrics report...</span>
+        </template>
+      </b-overlay>
       <b-tabs class="viewport">
         <b-tab title="User Stats" class="user-stats">
           <b-table striped hover small :items="userStats.items" :fields="userStats.fields"></b-table>
@@ -194,11 +197,10 @@
 <script>
 import Modal from '@/components/common/Modal.vue'
 import AnnoResult from '@/components/anns/AnnoResult.vue'
-import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 
 export default {
   name: 'Metrics.vue',
-  components: { AnnoResult, Modal, LoadingOverlay },
+  components: { AnnoResult, Modal },
   props: {
     reportId: Number
   },
diff --git a/webapp/frontend/src/views/MetricsHome.vue b/webapp/frontend/src/views/MetricsHome.vue
index 56f670a8..78b867d1 100644
--- a/webapp/frontend/src/views/MetricsHome.vue
+++ b/webapp/frontend/src/views/MetricsHome.vue
@@ -1,8 +1,5 @@
 <template>
   <div class="full-height metrics-reports-table">
-    <loading-overlay :loading="loadingReports">
-      <p slot="message">Loading Metrics Reports...</p>
-    </loading-overlay>
     <b-table id="metrics-jobs-table" hover small selectable
              :items="reports.items"
              :fields="reports.fields"
@@ -30,6 +27,12 @@
         </button>
       </template>
     </b-table>
+    <b-overlay :show="loadingReports">
+      <template #overlay>
+        <b-spinner :variant="'primary'"></b-spinner>
+        <span class="overlay-message">Loading Metrics Reports...</span>
+      </template>
+    </b-overlay>
     <modal v-if="confDeleteReportModal" :closable="true" @modal:close="confDeleteReportModal = null">
       <h3 slot="header">Confirm Delete Metrics Report</h3>
       <div slot="body">
@@ -50,12 +53,11 @@
 
 <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, VRuntimeTemplate,},
+  components: {Modal, VRuntimeTemplate,},
   props: {
   },
   data () {
diff --git a/webapp/frontend/src/views/TrainAnnotations.vue b/webapp/frontend/src/views/TrainAnnotations.vue
index 3bae644d..a1149d31 100644
--- a/webapp/frontend/src/views/TrainAnnotations.vue
+++ b/webapp/frontend/src/views/TrainAnnotations.vue
@@ -91,82 +91,100 @@
 
     <modal v-if="helpModal" class="help-modal" :closable="true" @modal:close="helpModal = false">
       <h3 slot="header">{{ project.name }} Annotation Help</h3>
+
       <div slot="body" class="help-modal-body">
+
+
         <div v-if="project.annotation_guideline_link">
           <h4>Annotation Guidelines: <a :href="'' + project.annotation_guideline_link + ''">Guideline</a></h4>
         </div>
+
         <br>
-        <h4>Keyboard Shortcuts</h4>
-        <table class="table">
-          <thead>
+
+        <div>
+          <h4 v-b-toggle.concepts>Concepts Annotated</h4>
+          <b-collapse id="concepts">
+            <concept-filter :cuis="project.cuis" :cdb_id="project.concept_db"></concept-filter>
+          </b-collapse>
+
+        </div>
+
+        <br>
+        <h4 v-b-toggle.shortcuts>Keyboard Shortcuts</h4>
+        <b-collapse id="shortcuts">
+          <table class="table">
+            <thead>
             <tr>
               <th>Shortcut Key</th>
               <th>Key Name</th>
               <th>Description</th>
             </tr>
-          </thead>
-          <tbody>
-          <tr>
-            <td><font-awesome-icon icon="arrow-up"></font-awesome-icon></td>
-            <td>Up Arrow</td>
-            <td>Previous Document</td>
-          </tr>
-          <tr>
-            <td><font-awesome-icon icon="arrow-down"></font-awesome-icon></td>
-            <td>Down Arrow</td>
-            <td>Next Document</td>
-          </tr>
-          <tr>
-            <td><font-awesome-icon icon="arrow-left"></font-awesome-icon></td>
-            <td>Left Arrow</td>
-            <td>Previous Concept</td>
-          </tr>
-          <tr>
-            <td><font-awesome-icon icon="arrow-right"></font-awesome-icon> or space</td>
-            <td>Right Arrow or Space bar</td>
-            <td>Next Concept</td>
-          </tr>
-          <tr>
-            <td><font-awesome-icon icon="level-down-alt" :transform="{ rotate: 90 }"></font-awesome-icon></td>
-            <td>Enter Key</td>
-            <td>Submit / Submit Confirm (on submit summary)</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>1 Key</td>
-            <td>Correct</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>2 Key</td>
-            <td>Incorrect</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>3 Key (if set on your project)</td>
-            <td>Terminate</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>4 Key</td>
-            <td>Alternative</td>
-          </tr>
-          <tr>
-            <td></td>
-            <td>5 Key (if set on your project)</td>
-            <td>Irrelevant</td>
-          </tr>
-          </tbody>
-        </table>
-        <div>
-          <h4>Experimental Features</h4>
+            </thead>
+            <tbody>
+            <tr>
+              <td><font-awesome-icon icon="arrow-up"></font-awesome-icon></td>
+              <td>Up Arrow</td>
+              <td>Previous Document</td>
+            </tr>
+            <tr>
+              <td><font-awesome-icon icon="arrow-down"></font-awesome-icon></td>
+              <td>Down Arrow</td>
+              <td>Next Document</td>
+            </tr>
+            <tr>
+              <td><font-awesome-icon icon="arrow-left"></font-awesome-icon></td>
+              <td>Left Arrow</td>
+              <td>Previous Concept</td>
+            </tr>
+            <tr>
+              <td><font-awesome-icon icon="arrow-right"></font-awesome-icon> or space</td>
+              <td>Right Arrow or Space bar</td>
+              <td>Next Concept</td>
+            </tr>
+            <tr>
+              <td><font-awesome-icon icon="level-down-alt" :transform="{ rotate: 90 }"></font-awesome-icon></td>
+              <td>Enter Key</td>
+              <td>Submit / Submit Confirm (on submit summary)</td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>1 Key</td>
+              <td>Correct</td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>2 Key</td>
+              <td>Incorrect</td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>3 Key (if set on your project)</td>
+              <td>Terminate</td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>4 Key</td>
+              <td>Alternative</td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>5 Key (if set on your project)</td>
+              <td>Irrelevant</td>
+            </tr>
+            </tbody>
+          </table>
+        </b-collapse>
+
+        <br>
+        <h4 v-b-toggle.exp>Experimental Features</h4>
+        <b-collapse id="exp">
           <button class="btn btn-primary" :disabled="resubmittingAllDocs" @click="submitAll">
             <span v-if="!resubmittingAllDocs">Re-Submit All Validated Documents</span>
             <span v-if="resubmittingAllDocs">Submitting...</span>
           </button>
           <transition name="alert"><span v-if="resubmitSuccess" class="alert alert-info">
             Successfully Re-submitted</span></transition>
-        </div>
+        </b-collapse>
       </div>
       <div slot="footer">
         <button class="btn btn-primary" @click="helpModal = false">Close</button>
@@ -248,6 +266,7 @@ import MetaAnnotationTaskContainer from '@/components/usecases/MetaAnnotationTas
 import RelationAnnotationTaskContainer from '@/components/usecases/RelationAnnotationTaskContainer.vue'
 import AnnotationSummary from '@/components/common/AnnotationSummary.vue'
 import { Multipane, MultipaneResizer } from 'vue-multipane'
+import ConceptFilter from "@/components/common/ConceptFilter.vue"
 
 const TASK_NAME = 'Concept Annotation'
 const CONCEPT_CORRECT = 'Correct'
@@ -263,6 +282,7 @@ let LOAD_NUM_DOC_PAGES = 10 // 100 docs per page, 1000 documents
 export default {
   name: 'TrainAnnotations',
   components: {
+    ConceptFilter,
     ConceptSummary,
     DocumentSummary,
     Modal,

From 860d2a385763016e2c4305fa7674e51d6c63f3aa Mon Sep 17 00:00:00 2001
From: tomolopolis <tsearle88@gmail.com>
Date: Fri, 19 Jul 2024 11:21:54 +0100
Subject: [PATCH 2/2] 8694rrpje: better styling on accordion on help dialog,
 rename concept filter size label

---
 .../src/components/common/ConceptFilter.vue   |  2 +-
 .../frontend/src/views/TrainAnnotations.vue   | 20 ++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/webapp/frontend/src/components/common/ConceptFilter.vue b/webapp/frontend/src/components/common/ConceptFilter.vue
index 14174799..4fc49e05 100644
--- a/webapp/frontend/src/components/common/ConceptFilter.vue
+++ b/webapp/frontend/src/components/common/ConceptFilter.vue
@@ -8,7 +8,7 @@
     <div>
       <div class="search-bar">
         <b-input v-model="filter" type="search" placeholder="Search for concepts..."></b-input>
-        <span v-if="filter === ''">Project Concept Filter: {{(allItems || []).length}}</span>
+        <span v-if="filter === ''">Project concept filter size: {{(allItems || []).length}}</span>
         <span v-if="filter !== ''">Found {{allFilteredItems.length}} - showing first {{items.length}}</span>
       </div>
 
diff --git a/webapp/frontend/src/views/TrainAnnotations.vue b/webapp/frontend/src/views/TrainAnnotations.vue
index a1149d31..624e4d28 100644
--- a/webapp/frontend/src/views/TrainAnnotations.vue
+++ b/webapp/frontend/src/views/TrainAnnotations.vue
@@ -94,15 +94,17 @@
 
       <div slot="body" class="help-modal-body">
 
-
         <div v-if="project.annotation_guideline_link">
-          <h4>Annotation Guidelines: <a :href="'' + project.annotation_guideline_link + ''">Guideline</a></h4>
+          <h4 class="help-heading" v-b-toggle.annoguide>Annotation Guidelines:</h4>
+          <b-collapse id="annoguide">
+            Link to guideline <a :href="'' + project.annotation_guideline_link + ''">here</a>
+          </b-collapse>
         </div>
 
         <br>
 
         <div>
-          <h4 v-b-toggle.concepts>Concepts Annotated</h4>
+          <h4 class="help-heading" v-b-toggle.concepts>Concepts Annotated</h4>
           <b-collapse id="concepts">
             <concept-filter :cuis="project.cuis" :cdb_id="project.concept_db"></concept-filter>
           </b-collapse>
@@ -110,7 +112,7 @@
         </div>
 
         <br>
-        <h4 v-b-toggle.shortcuts>Keyboard Shortcuts</h4>
+        <h4 class="help-heading" v-b-toggle.shortcuts>Keyboard Shortcuts</h4>
         <b-collapse id="shortcuts">
           <table class="table">
             <thead>
@@ -176,7 +178,7 @@
         </b-collapse>
 
         <br>
-        <h4 v-b-toggle.exp>Experimental Features</h4>
+        <h4 class="help-heading" v-b-toggle.exp>Experimental Features</h4>
         <b-collapse id="exp">
           <button class="btn btn-primary" :disabled="resubmittingAllDocs" @click="submitAll">
             <span v-if="!resubmittingAllDocs">Re-Submit All Validated Documents</span>
@@ -810,6 +812,14 @@ $app-header-height: 60px;
   display: inline-block;
 }
 
+.help-heading {
+  border-bottom: 1px solid transparent;
+
+  &:hover {
+    border-bottom: 1px solid $color-1;
+  }
+}
+
 .meta {
   flex: 1 1 auto;
   text-align: right;