From 288382ccfbd7342f1fe54b4fad0b5f7cd7574626 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 15 Oct 2026 20:33:26 +0000
Subject: [PATCH 1/6] fix(medcat-trainer): open FP/FN/TP example dialogs
 reliably

Clicking a concept count failed when the metrics table did not hand back
the original row, so the example dialog never opened. Current MedCAT stats
examples also use snake_case fields, which left the dialog unable to show
or link those occurrences, and unescaped clinical text could break rendering.

Resolve examples without object identity, accept both key styles, escape
note text, and mount the dialog on document.body.

Co-authored-by: tomolopolis <tomolopolis@users.noreply.github.com>
---
 medcat-trainer/webapp/api/api/metrics.py      |  76 ++++++++---
 .../webapp/api/api/tests/test_metrics.py      |  76 +++++++++++
 .../src/components/anns/AnnoResult.vue        |  74 ++++++++---
 .../src/components/metrics/ConceptSummary.vue |  70 +++++++---
 .../src/components/metrics/exampleFields.js   |  35 +++++
 .../src/tests/components/AnnoResult.spec.ts   | 107 +++++++++++++++
 .../components/MetricsConceptSummary.spec.ts  | 125 ++++++++++++++++++
 7 files changed, 505 insertions(+), 58 deletions(-)
 create mode 100644 medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
 create mode 100644 medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
 create mode 100644 medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts

diff --git a/medcat-trainer/webapp/api/api/metrics.py b/medcat-trainer/webapp/api/api/metrics.py
index b421e8381..5c989635a 100644
--- a/medcat-trainer/webapp/api/api/metrics.py
+++ b/medcat-trainer/webapp/api/api/metrics.py
@@ -173,31 +173,63 @@ def concept_summary(self, extra_cui_filter=None):
 
     def enrich_medcat_metrics(self, examples):
         """
-        Add the user prop to the medcat output metrics. Can potentially add more later for each of the categories
+        Add the user prop to the medcat output metrics. Can potentially add more later for each of the categories.
+
+        get_stats examples use snake_case keys (document_id). Older payloads used
+        spaced keys ("document id"). Accept both so FP/FN/TP dialogs can be enriched.
         """
-        for tp in [i for e_i in examples['tp'].values() for i in e_i]:
-            try:
-                ann = AnnotatedEntity.objects.get(project_id=tp['project id'], document_id=tp['document id'],
-                                                  start_ind=tp['start'], end_ind=tp['end'])
-                tp['user'] = ann.user.username
-            except:
-                tp['user'] = None
-        for fp in (i for e_i in examples['fp'].values() for i in e_i):
-            try:
-                ann = AnnotatedEntity.objects.get(project_id=fp['project id'], document_id=fp['document id'],
-                                                  start_ind=fp['start'], end_ind=fp['end'])
-                fp['user'] = ann.user.username
-            except:
-                fp['user'] = None
-        for fn in (i for e_i in examples['fn'].values() for i in e_i):
-            try:
-                ann = AnnotatedEntity.objects.get(project_id=fn['project id'], document_id=fn['document id'],
-                                                  start_ind=fn['start'], end_ind=fn['end'])
-                fn['user'] = ann.user.username
-            except:
-                fn['user'] = None
+        if not isinstance(examples, dict):
+            return examples
+        for kind in ('tp', 'fp', 'fn'):
+            grouped = examples.get(kind) or {}
+            if not isinstance(grouped, dict):
+                continue
+            for example_list in grouped.values():
+                if not isinstance(example_list, list):
+                    continue
+                for example in example_list:
+                    if isinstance(example, dict):
+                        self._attach_example_user(example)
         return examples
 
+    @staticmethod
+    def _example_value(example, *keys):
+        for key in keys:
+            if key in example and example[key] is not None:
+                return example[key]
+        return None
+
+    @classmethod
+    def _normalize_example_keys(cls, example):
+        """Expose both legacy spaced keys and current snake_case keys on one example."""
+        aliases = (
+            ('project id', 'project_id'),
+            ('project name', 'project_name'),
+            ('document id', 'document_id'),
+            ('document name', 'document_name'),
+            ('source value', 'source_value'),
+        )
+        for legacy, modern in aliases:
+            if legacy not in example and modern in example:
+                example[legacy] = example[modern]
+            elif modern not in example and legacy in example:
+                example[modern] = example[legacy]
+        if 'acc' not in example and example.get('confidence') is not None:
+            example['acc'] = example['confidence']
+        return example
+
+    def _attach_example_user(self, example):
+        self._normalize_example_keys(example)
+        project_id = self._example_value(example, 'project id', 'project_id')
+        document_id = self._example_value(example, 'document id', 'document_id')
+        try:
+            ann = AnnotatedEntity.objects.get(project_id=project_id, document_id=document_id,
+                                              start_ind=example.get('start'), end_ind=example.get('end'))
+            example['user'] = ann.user.username if getattr(ann, 'user', None) else None
+        except Exception:
+            example['user'] = None
+        return example
+
     def user_stats(self, by_user: bool = True):
         """
         Summary of user annotation work done
diff --git a/medcat-trainer/webapp/api/api/tests/test_metrics.py b/medcat-trainer/webapp/api/api/tests/test_metrics.py
index f938d529e..8bc5681c2 100644
--- a/medcat-trainer/webapp/api/api/tests/test_metrics.py
+++ b/medcat-trainer/webapp/api/api/tests/test_metrics.py
@@ -5,6 +5,8 @@
 are exercised by passing cat=None.
 """
 
+from unittest.mock import MagicMock, patch
+
 import pandas as pd
 from django.test import TestCase
 
@@ -154,6 +156,80 @@ def test_rename_meta_value_when_specified(self):
         self.assertEqual(pm.annotations[0]['Existence'], 'Yes')
 
 
+class EnrichMedcatMetricsTests(TestCase):
+    def _examples(self):
+        return {
+            'tp': {},
+            'fp': {
+                'C001': [{
+                    'project_id': 4,
+                    'document_id': 9,
+                    'project_name': 'Ward round',
+                    'document_name': 'Note 9',
+                    'source_value': 'asthma',
+                    'text': 'history of asthma today',
+                    'start': 11,
+                    'end': 17,
+                    'cui': 'C001',
+                    'acc': 0.5,
+                }]
+            },
+            'fn': {
+                'C002': [{
+                    'project id': 4,
+                    'document id': 9,
+                    'source value': 'diabetes',
+                    'text': 'diabetes mellitus',
+                    'start': 0,
+                    'end': 8,
+                    'cui': 'C002',
+                    'acc': 1,
+                }]
+            },
+        }
+
+    @patch('api.metrics.AnnotatedEntity.objects.get')
+    def test_snake_case_examples_are_normalized_and_assigned_a_user(self, mock_get):
+        ann = MagicMock()
+        ann.user.username = 'alice'
+        mock_get.return_value = ann
+        pm = ProjectMetrics(_build_export(), cat=None)
+
+        examples = pm.enrich_medcat_metrics(self._examples())
+        fp = examples['fp']['C001'][0]
+
+        self.assertEqual(fp['user'], 'alice')
+        self.assertEqual(fp['project id'], 4)
+        self.assertEqual(fp['document id'], 9)
+        self.assertEqual(fp['document name'], 'Note 9')
+        self.assertEqual(fp['source value'], 'asthma')
+        mock_get.assert_any_call(project_id=4, document_id=9, start_ind=11, end_ind=17)
+
+    @patch('api.metrics.AnnotatedEntity.objects.get')
+    def test_legacy_spaced_keys_still_resolve_the_annotation(self, mock_get):
+        ann = MagicMock()
+        ann.user.username = 'bob'
+        mock_get.return_value = ann
+        pm = ProjectMetrics(_build_export(), cat=None)
+
+        examples = pm.enrich_medcat_metrics(self._examples())
+        fn = examples['fn']['C002'][0]
+
+        self.assertEqual(fn['user'], 'bob')
+        self.assertEqual(fn['project_id'], 4)
+        self.assertEqual(fn['document_id'], 9)
+        self.assertEqual(fn['source_value'], 'diabetes')
+        mock_get.assert_any_call(project_id=4, document_id=9, start_ind=0, end_ind=8)
+
+    @patch('api.metrics.AnnotatedEntity.objects.get', side_effect=LookupError('missing'))
+    def test_missing_annotation_still_normalizes_keys(self, _mock_get):
+        pm = ProjectMetrics(_build_export(), cat=None)
+        examples = pm.enrich_medcat_metrics(self._examples())
+        fp = examples['fp']['C001'][0]
+        self.assertIsNone(fp['user'])
+        self.assertEqual(fp['source value'], 'asthma')
+
+
 class EmptyExportTests(TestCase):
     def test_handles_empty_documents_without_error(self):
         export = {'projects': [{'id': 1, 'name': 'empty', 'documents': [],
diff --git a/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue b/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
index a053e626a..9515e2d82 100644
--- a/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
+++ b/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
@@ -1,17 +1,18 @@
 <template>
   <tr class="result-container">
-    <td class="doc-name">{{result['document name']}}</td>
-    <td class="cui">{{result.cui}}</td>
-    <td class="source-value">{{result['source value']}}</td>
-    <td class="accu">{{Number(result.acc).toFixed(3)}}</td>
+    <td class="doc-name">{{ documentName }}</td>
+    <td class="cui">{{ result && result.cui }}</td>
+    <td class="source-value">{{ sourceValue }}</td>
+    <td class="accu">{{ accuracy }}</td>
     <td class="text">
-      <v-runtime-template :template="text"></v-runtime-template>
+      <v-runtime-template v-if="text" :template="text"></v-runtime-template>
     </td>
   </tr>
 </template>
 
 <script>
 import VRuntimeTemplate from 'vue3-runtime-template'
+import { escapeTemplateText, exampleField } from '@/components/metrics/exampleFields'
 
 export default {
   name: 'AnnoResult.vue',
@@ -25,34 +26,69 @@ export default {
     docText: String
   },
   computed: {
+    documentName () {
+      return exampleField(this.result, 'document name', 'document_name') || ''
+    },
+    sourceValue () {
+      return exampleField(this.result, 'source value', 'source_value') || ''
+    },
+    projectId () {
+      return exampleField(this.result, 'project id', 'project_id')
+    },
+    documentId () {
+      return exampleField(this.result, 'document id', 'document_id')
+    },
+    accuracy () {
+      const acc = this.result ? (this.result.acc ?? this.result.confidence) : undefined
+      const numeric = Number(acc)
+      return Number.isFinite(numeric) ? numeric.toFixed(3) : ''
+    },
     text () {
-      if (!this.result || !this.result.text || !this.result['source value']) {
-        return ''
-      }
-      // default to tp
+      const srcVal = this.sourceValue
+      if (!this.result || !srcVal) return ''
+
       let highlightClass = 'highlight-task-0'
       if (this.type === 'fp' || this.type === 'fn') {
         highlightClass = 'highlight-task-1'
       }
-      
-      const srcVal = this.result['source value']
-      let outText = `<span>${this.docText.slice(this.result['start'] - 60, this.result['start'])}`
-      outText += `<span class="${highlightClass}" @click="openAnno">${srcVal}</span>`
-      outText += `${this.docText.slice(this.result['end'], this.result['end'] + 60)}</span>`
-      return outText
+      const highlight = `<span class="${highlightClass}" @click="openAnno">${escapeTemplateText(srcVal)}</span>`
+      const snippet = this.snippetAround(srcVal)
+      return `<span>${snippet.before}${highlight}${snippet.after}</span>`
     }
   },
   methods: {
+    snippetAround (srcVal) {
+      const start = Number(this.result.start)
+      const end = Number(this.result.end)
+      const fullText = typeof this.docText === 'string' ? this.docText : ''
+      if (fullText && Number.isFinite(start) && Number.isFinite(end)) {
+        return {
+          before: escapeTemplateText(fullText.slice(Math.max(0, start - 60), Math.max(0, start))),
+          after: escapeTemplateText(fullText.slice(Math.max(0, end), Math.max(0, end) + 60))
+        }
+      }
+
+      const context = typeof this.result.text === 'string' ? this.result.text : ''
+      const idx = context.indexOf(srcVal)
+      if (idx === -1) {
+        return { before: escapeTemplateText(context), after: '' }
+      }
+      return {
+        before: escapeTemplateText(context.slice(0, idx)),
+        after: escapeTemplateText(context.slice(idx + srcVal.length))
+      }
+    },
     openAnno () {
+      if (this.projectId == null || this.documentId == null) return
       const routeData = this.$router.resolve(
         {
-          path: `/train-annotations/${this.result['project id']}/${this.result['document id']}`,
+          path: `/train-annotations/${this.projectId}/${this.documentId}`,
           query: {
-            annoStart: this.result['start'],
-            annoEnd: this.result['end']
+            annoStart: this.result.start,
+            annoEnd: this.result.end
           }
       })
-      window.open(routeData.href, '_blank');
+      window.open(routeData.href, '_blank')
     }
   }
 }
diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
index 65b2900af..978775b93 100644
--- a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
@@ -124,25 +124,26 @@
         </div>
       </template>
       <template #item.tps="{ item }">
-        <button class="btn btn-outline-success res-btn" :disabled="item.tps === 0"
-                @click="openExamples('tp_examples', item)">
-          {{ item.tps }}
+        <button type="button" class="btn btn-outline-success res-btn" :disabled="countValue(item, 'tps') === 0"
+                @click.stop="openExamples('tp_examples', item)">
+          {{ countValue(item, 'tps') }}
         </button>
       </template>
       <template #item.fns="{ item }">
-        <button class="btn btn-outline-warning res-btn" :disabled="item.fns === 0"
-                @click="openExamples('fn_examples', item)">
-          {{ item.fns }}
+        <button type="button" class="btn btn-outline-warning res-btn" :disabled="countValue(item, 'fns') === 0"
+                @click.stop="openExamples('fn_examples', item)">
+          {{ countValue(item, 'fns') }}
         </button>
       </template>
       <template #item.fps="{ item }">
-        <button class="btn btn-outline-danger res-btn" :disabled="item.fps === 0"
-                @click="openExamples('fp_examples', item)">
-          {{ item.fps }}
+        <button type="button" class="btn btn-outline-danger res-btn" :disabled="countValue(item, 'fps') === 0"
+                @click.stop="openExamples('fp_examples', item)">
+          {{ countValue(item, 'fps') }}
         </button>
       </template>
     </v-data-table>
 
+    <teleport to="body">
     <modal v-if="showModal" :closable="true" @modal:close="clearModalData" class="examples-modal">
       <template #header>
         <h3>{{ modalData.title }}</h3>
@@ -186,12 +187,14 @@
         </div>
       </template>
     </modal>
+    </teleport>
   </div>
 </template>
 
 <script>
 import AnnoResult from '@/components/anns/AnnoResult.vue'
 import Modal from '@/components/common/Modal.vue'
+import { documentTextForExample } from '@/components/metrics/exampleFields'
 
 export default {
   name: 'ConceptSummary',
@@ -270,20 +273,54 @@ export default {
           return '0.0'
       }
     },
+    countValue (item, field) {
+      const row = this.exampleRow(item)
+      const value = Number(row && row[field])
+      return Number.isFinite(value) ? value : 0
+    },
+    exampleRow (item) {
+      // v-data-table may pass its internal wrapper ({ type, raw }) rather than the source row.
+      if (item && item.type === 'item' && item.raw) return item.raw
+      return item
+    },
+    exampleList (row, exampleType) {
+      const direct = row && row[exampleType]
+      if (Array.isArray(direct)) return direct
+      if (direct && typeof direct === 'object') return [direct]
+
+      const items = Array.isArray(this.items) ? this.items : []
+      // Identity lookup fails when the table hands back a copy of the row.
+      const idx = row ? items.indexOf(row) : -1
+      if (idx !== -1 && Array.isArray(items[idx][exampleType])) return items[idx][exampleType]
+
+      const match = items.find(candidate =>
+        candidate && row && candidate.cui === row.cui &&
+        (row.concept_name == null || candidate.concept_name === row.concept_name)
+      )
+      const matched = match && match[exampleType]
+      if (Array.isArray(matched)) return matched
+      if (matched && typeof matched === 'object') return [matched]
+      return []
+    },
     openExamples(exampleType, item) {
+      const row = this.exampleRow(item) || {}
+      const label = row.concept_name || 'Concept'
+      const cui = row.cui || ''
       if (exampleType === 'tp_examples') {
-        this.modalData.title = `${item.concept_name} (${item.cui}) - True Positive Model Predictions`
+        this.modalData.title = `${label} (${cui}) - True Positive Model Predictions`
         this.modalData.type = 'tp'
       } else if (exampleType === 'fp_examples') {
-        this.modalData.title = `${item.concept_name} (${item.cui}) - False Positive Model Predictions`
+        this.modalData.title = `${label} (${cui}) - False Positive Model Predictions`
         this.modalData.type = 'fp'
       } else {
-        this.modalData.title = `${item.concept_name} (${item.cui}) - False Negative Model Predictions`
+        this.modalData.title = `${label} (${cui}) - False Negative Model Predictions`
         this.modalData.type = 'fn'
       }
-      const idx = this.items.indexOf(item)
-      this.modalData.results = this.items[idx][exampleType]
-      this.showModal = true
+      this.modalData.results = this.exampleList(row, exampleType)
+      // Open after this click finishes so the new dialog mask cannot receive it and close immediately.
+      this.$nextTick(() => {
+        this.showModal = true
+      })
     },
     clearModalData() {
       this.modalData = {
@@ -294,8 +331,7 @@ export default {
       this.showModal = false
     },
     textFromAnno(anno) {
-      const docId = anno['document id']
-      return this.docs2text[docId]
+      return documentTextForExample(this.docs2text, anno)
     }
   }
 }
diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js b/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
new file mode 100644
index 000000000..2cdc162b9
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
@@ -0,0 +1,35 @@
+// MedCAT stats examples have used two key styles:
+// legacy trainer payloads ("document id") and current get_stats payloads (document_id).
+export function exampleField (example, ...keys) {
+  if (!example || typeof example !== 'object') return undefined
+  for (const key of keys) {
+    const value = example[key]
+    if (value !== undefined && value !== null && value !== '') return value
+  }
+  return undefined
+}
+
+// Clinical text is compiled as a Vue template. Escape markup and mustache
+// delimiters so a note cannot break the dialog render.
+export function escapeTemplateText (value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/\{/g, '&#123;')
+    .replace(/\}/g, '&#125;')
+}
+
+export function documentTextForExample (docs2text, example) {
+  if (!docs2text || !example) return ''
+  const docId = exampleField(example, 'document id', 'document_id')
+  if (docId == null) return ''
+  if (docs2text[docId] != null) return docs2text[docId]
+  const asString = String(docId)
+  if (docs2text[asString] != null) return docs2text[asString]
+  const asNumber = Number(docId)
+  if (!Number.isNaN(asNumber) && docs2text[asNumber] != null) return docs2text[asNumber]
+  return ''
+}
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
new file mode 100644
index 000000000..5fb6ece3b
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AnnoResult from '@/components/anns/AnnoResult.vue'
+
+const runtimeStub = {
+  props: ['template'],
+  template: '<div class="runtime-template">{{ template }}</div>'
+}
+
+describe('AnnoResult.vue', () => {
+  const docText = 'before <tag> {{asthma}} after more text'
+  const start = docText.indexOf('asthma')
+  const snakeCaseResult = {
+    cui: '195967001',
+    project_id: 3,
+    document_id: 8,
+    project_name: 'Clinic',
+    document_name: 'Letter',
+    source_value: 'asthma',
+    text: 'context asthma context',
+    start,
+    end: start + 'asthma'.length,
+    acc: 0.5
+  }
+
+  const mountResult = (props: Record<string, unknown> = {}) => {
+    const resolve = vi.fn(() => ({ href: '/train-annotations/3/8' }))
+    const wrapper = mount(AnnoResult, {
+      props: {
+        type: 'fn',
+        docText,
+        result: snakeCaseResult,
+        ...props
+      },
+      global: {
+        stubs: { 'v-runtime-template': runtimeStub },
+        mocks: { $router: { resolve } }
+      }
+    })
+    return { wrapper, resolve }
+  }
+
+  it('shows snake_case example fields and escapes text compiled into the template', () => {
+    const { wrapper } = mountResult()
+    expect(wrapper.find('.doc-name').text()).toBe('Letter')
+    expect(wrapper.find('.source-value').text()).toBe('asthma')
+    expect(wrapper.find('.accu').text()).toBe('0.500')
+
+    const template = wrapper.find('.runtime-template').text()
+    expect(template).toContain('highlight-task-1')
+    expect(template).toContain('@click="openAnno"')
+    expect(template).toContain('&lt;tag&gt;')
+    expect(template).toContain('&#123;&#123;')
+    expect(template).toContain('>asthma</span>')
+    expect(template).toContain('&#125;&#125;')
+    expect(template).not.toContain('<tag>')
+    expect(template).not.toContain('{{')
+  })
+
+  it('still renders legacy spaced keys', () => {
+    const { wrapper } = mountResult({
+      type: 'tp',
+      docText: 'alpha asthma omega',
+      result: {
+        cui: 'C001',
+        'project id': 1,
+        'document id': 2,
+        'document name': 'Legacy note',
+        'source value': 'asthma',
+        text: 'alpha asthma omega',
+        start: 6,
+        end: 12,
+        acc: 1
+      }
+    })
+    expect(wrapper.find('.doc-name').text()).toBe('Legacy note')
+    expect(wrapper.find('.runtime-template').text()).toContain('highlight-task-0')
+  })
+
+  it('uses the stored context when the full document text is missing', () => {
+    const { wrapper } = mountResult({
+      docText: undefined,
+      result: {
+        ...snakeCaseResult,
+        text: 'seen <asthma> {{today}}'
+      }
+    })
+    const template = wrapper.find('.runtime-template').text()
+    expect(template).toContain('highlight-task-1')
+    expect(template).toContain('seen &lt;')
+    expect(template).toContain('>asthma</span>')
+    expect(template).toContain('&gt; &#123;&#123;today&#125;&#125;')
+    expect(template).not.toContain('<asthma>')
+  })
+
+  it('opens the annotation from snake_case project and document ids', () => {
+    const open = vi.spyOn(window, 'open').mockImplementation(() => null)
+    const { wrapper, resolve } = mountResult()
+    wrapper.vm.openAnno()
+    expect(resolve).toHaveBeenCalledWith({
+      path: '/train-annotations/3/8',
+      query: { annoStart: start, annoEnd: start + 'asthma'.length }
+    })
+    expect(open).toHaveBeenCalledWith('/train-annotations/3/8', '_blank')
+    open.mockRestore()
+  })
+})
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
new file mode 100644
index 000000000..485448c77
--- /dev/null
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import ConceptSummary from '@/components/metrics/ConceptSummary.vue'
+
+const fnExample = {
+  cui: '195967001',
+  project_id: 7,
+  document_id: '10',
+  document_name: 'Clinic letter',
+  source_value: 'asthma',
+  text: 'has asthma today',
+  start: 4,
+  end: 10,
+  acc: 0.91
+}
+
+const sourceRow = {
+  concept_name: 'Asthma',
+  cui: '195967001',
+  concept_count: 3,
+  variations: 1,
+  value: ['asthma'],
+  count_variations_ratio: 3,
+  cui_f1: 0.5,
+  cui_prec: 0.5,
+  cui_rec: 0.5,
+  tps: 0,
+  fns: 1,
+  fps: 2,
+  tp_examples: [],
+  fn_examples: [fnExample],
+  fp_examples: [fnExample, { ...fnExample, source_value: 'wheeze' }]
+}
+
+const tableStub = {
+  props: ['items'],
+  template: `
+    <div>
+      <div v-for="(item, index) in items" :key="index">
+        <slot name="item.tps" :item="item" />
+        <slot name="item.fns" :item="item" />
+        <slot name="item.fps" :item="item" />
+      </div>
+    </div>
+  `
+}
+
+const mountSummary = (items = [sourceRow]) =>
+  mount(ConceptSummary, {
+    props: {
+      items,
+      docs2text: { 10: 'xxhas asthma today and <script> {{x}}' }
+    },
+    global: {
+      stubs: {
+        'font-awesome-icon': true,
+        'v-row': { template: '<div><slot /></div>' },
+        'v-card': { template: '<div><slot /></div>' },
+        'v-card-title': { template: '<div><slot /></div>' },
+        'v-card-text': { template: '<div><slot /></div>' },
+        'v-tooltip': true,
+        'v-progress-linear': { template: '<div><slot /></div>' },
+        'v-runtime-template': {
+          props: ['template'],
+          template: '<span class="runtime-template">{{ template }}</span>'
+        },
+        'v-data-table': tableStub
+      }
+    },
+    attachTo: document.body
+  })
+
+describe('metrics ConceptSummary.vue', () => {
+  it('opens the example dialog when an FN count is clicked', async () => {
+    const wrapper = mountSummary()
+    await wrapper.find('.btn-outline-warning').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(document.body.textContent).toContain('False Negative Model Predictions')
+    expect(document.body.textContent).toContain('Clinic letter')
+    expect(document.body.textContent).toContain('asthma')
+    wrapper.unmount()
+  })
+
+  it('opens FP examples when the table row is not the same object as the source row', async () => {
+    const wrapper = mountSummary()
+    const copy = {
+      concept_name: sourceRow.concept_name,
+      cui: sourceRow.cui,
+      tps: sourceRow.tps,
+      fns: sourceRow.fns,
+      fps: sourceRow.fps
+    }
+
+    wrapper.vm.openExamples('fp_examples', copy)
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(wrapper.vm.modalData.type).toBe('fp')
+    expect(wrapper.vm.modalData.results).toHaveLength(2)
+    expect(document.body.textContent).toContain('False Positive Model Predictions')
+    wrapper.unmount()
+  })
+
+  it('reads examples from a v-data-table internal item wrapper', async () => {
+    const wrapper = mountSummary()
+    wrapper.vm.openExamples('fn_examples', { type: 'item', raw: sourceRow, columns: {} })
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(wrapper.vm.modalData.results).toEqual(sourceRow.fn_examples)
+    wrapper.unmount()
+  })
+
+  it('does not throw when the clicked row has no stored examples', async () => {
+    const wrapper = mountSummary([{ ...sourceRow, fp_examples: [], fps: 0 }])
+    wrapper.vm.openExamples('fp_examples', { cui: 'missing', concept_name: 'Missing', fps: 1 })
+    await flushPromises()
+
+    expect(wrapper.vm.showModal).toBe(true)
+    expect(wrapper.vm.modalData.results).toEqual([])
+    wrapper.unmount()
+  })
+})

From 21a685b39e6cf3efccfc32b3b3969dc6ce4a69fb Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 16 Oct 2026 21:21:49 +0000
Subject: [PATCH 2/6] fix(medcat-trainer): restore TP, FN, and FP count colors

type=button matched Vuetify's color:inherit rule and overrode the outline
button colors. Keep true positives green, false negatives grey, and false
positives red.

Co-authored-by: tomolopolis <tomolopolis@users.noreply.github.com>
---
 .../frontend/src/components/metrics/ConceptSummary.vue   | 9 ++++++++-
 .../src/tests/components/MetricsConceptSummary.spec.ts   | 5 ++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
index 978775b93..6697321ee 100644
--- a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
@@ -130,7 +130,7 @@
         </button>
       </template>
       <template #item.fns="{ item }">
-        <button type="button" class="btn btn-outline-warning res-btn" :disabled="countValue(item, 'fns') === 0"
+        <button type="button" class="btn btn-outline-secondary res-btn" :disabled="countValue(item, 'fns') === 0"
                 @click.stop="openExamples('fn_examples', item)">
           {{ countValue(item, 'fns') }}
         </button>
@@ -352,6 +352,13 @@ export default {
   border: 0 !important;
 }
 
+/* Vuetify sets `color: inherit` on [type=button], which otherwise wipes these outline colors. */
+.res-btn.btn-outline-success,
+.res-btn.btn-outline-secondary,
+.res-btn.btn-outline-danger {
+  color: var(--bs-btn-color);
+}
+
 .res-btn:hover {
   color: white !important;
 }
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
index 485448c77..2f028a8c8 100644
--- a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
@@ -73,7 +73,10 @@ const mountSummary = (items = [sourceRow]) =>
 describe('metrics ConceptSummary.vue', () => {
   it('opens the example dialog when an FN count is clicked', async () => {
     const wrapper = mountSummary()
-    await wrapper.find('.btn-outline-warning').trigger('click')
+    expect(wrapper.find('.btn-outline-success').exists()).toBe(true)
+    expect(wrapper.find('.btn-outline-secondary').exists()).toBe(true)
+    expect(wrapper.find('.btn-outline-danger').exists()).toBe(true)
+    await wrapper.find('.btn-outline-secondary').trigger('click')
     await flushPromises()
 
     expect(wrapper.vm.showModal).toBe(true)

From 5efc630df3a7563c8b4359d07fcf9e27d3874fa4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 16 Oct 2026 21:55:14 +0000
Subject: [PATCH 3/6] fix(medcat-trainer): paint non-zero TP, FN, and FP counts

Bootstrap outline colors were still lost once later button rules reset
--bs-btn-color. Set the NHS green, grey, and red on the count buttons
themselves so a non-zero number keeps its colour.

Co-authored-by: tomolopolis <tomolopolis@users.noreply.github.com>
---
 .../src/components/metrics/ConceptSummary.vue | 38 ++++++++++++++-----
 .../components/MetricsConceptSummary.spec.ts  | 31 ++++++++++++---
 2 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
index 6697321ee..ed508bad0 100644
--- a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
@@ -124,19 +124,19 @@
         </div>
       </template>
       <template #item.tps="{ item }">
-        <button type="button" class="btn btn-outline-success res-btn" :disabled="countValue(item, 'tps') === 0"
+        <button type="button" class="btn res-btn tp-count" :disabled="countValue(item, 'tps') === 0"
                 @click.stop="openExamples('tp_examples', item)">
           {{ countValue(item, 'tps') }}
         </button>
       </template>
       <template #item.fns="{ item }">
-        <button type="button" class="btn btn-outline-secondary res-btn" :disabled="countValue(item, 'fns') === 0"
+        <button type="button" class="btn res-btn fn-count" :disabled="countValue(item, 'fns') === 0"
                 @click.stop="openExamples('fn_examples', item)">
           {{ countValue(item, 'fns') }}
         </button>
       </template>
       <template #item.fps="{ item }">
-        <button type="button" class="btn btn-outline-danger res-btn" :disabled="countValue(item, 'fps') === 0"
+        <button type="button" class="btn res-btn fp-count" :disabled="countValue(item, 'fps') === 0"
                 @click.stop="openExamples('fp_examples', item)">
           {{ countValue(item, 'fps') }}
         </button>
@@ -350,17 +350,35 @@ export default {
   height: 25px;
   padding: 3px 10px !important;
   border: 0 !important;
+  background-color: transparent;
 }
 
-/* Vuetify sets `color: inherit` on [type=button], which otherwise wipes these outline colors. */
-.res-btn.btn-outline-success,
-.res-btn.btn-outline-secondary,
-.res-btn.btn-outline-danger {
-  color: var(--bs-btn-color);
+/* Vuetify sets `color: inherit` on [type=button]. Literal colors with !important keep non-zero counts visible. */
+button.res-btn.tp-count:not(:disabled) {
+  color: #009639 !important;
 }
 
-.res-btn:hover {
-  color: white !important;
+button.res-btn.fn-count:not(:disabled) {
+  color: #768692 !important;
+}
+
+button.res-btn.fp-count:not(:disabled) {
+  color: #DA291C !important;
+}
+
+button.res-btn.tp-count:not(:disabled):hover {
+  color: #fff !important;
+  background-color: #009639 !important;
+}
+
+button.res-btn.fn-count:not(:disabled):hover {
+  color: #fff !important;
+  background-color: #768692 !important;
+}
+
+button.res-btn.fp-count:not(:disabled):hover {
+  color: #fff !important;
+  background-color: #DA291C !important;
 }
 
 .v-card {
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
index 2f028a8c8..a667a17e5 100644
--- a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 import ConceptSummary from '@/components/metrics/ConceptSummary.vue'
+import conceptSummarySource from '@/components/metrics/ConceptSummary.vue?raw'
 
 const fnExample = {
   cui: '195967001',
@@ -24,7 +25,7 @@ const sourceRow = {
   cui_f1: 0.5,
   cui_prec: 0.5,
   cui_rec: 0.5,
-  tps: 0,
+  tps: 1,
   fns: 1,
   fps: 2,
   tp_examples: [],
@@ -71,12 +72,32 @@ const mountSummary = (items = [sourceRow]) =>
   })
 
 describe('metrics ConceptSummary.vue', () => {
+  it('paints non-zero TP, FN, and FP counts green, grey, and red', () => {
+    const wrapper = mountSummary()
+    const zero = mountSummary([{ ...sourceRow, tps: 0, fns: 0, fps: 0 }])
+
+    expect(wrapper.get('button.tp-count').attributes('disabled')).toBeUndefined()
+    expect(wrapper.get('button.fn-count').attributes('disabled')).toBeUndefined()
+    expect(wrapper.get('button.fp-count').attributes('disabled')).toBeUndefined()
+    expect(zero.get('button.tp-count').attributes('disabled')).toBeDefined()
+    expect(zero.get('button.fn-count').attributes('disabled')).toBeDefined()
+    expect(zero.get('button.fp-count').attributes('disabled')).toBeDefined()
+
+    // jsdom does not apply Vue SFC CSS, so lock the declarations that the browser uses.
+    expect(conceptSummarySource).toContain('button.res-btn.tp-count:not(:disabled)')
+    expect(conceptSummarySource).toContain('color: #009639 !important')
+    expect(conceptSummarySource).toContain('button.res-btn.fn-count:not(:disabled)')
+    expect(conceptSummarySource).toContain('color: #768692 !important')
+    expect(conceptSummarySource).toContain('button.res-btn.fp-count:not(:disabled)')
+    expect(conceptSummarySource).toContain('color: #DA291C !important')
+
+    wrapper.unmount()
+    zero.unmount()
+  })
+
   it('opens the example dialog when an FN count is clicked', async () => {
     const wrapper = mountSummary()
-    expect(wrapper.find('.btn-outline-success').exists()).toBe(true)
-    expect(wrapper.find('.btn-outline-secondary').exists()).toBe(true)
-    expect(wrapper.find('.btn-outline-danger').exists()).toBe(true)
-    await wrapper.find('.btn-outline-secondary').trigger('click')
+    await wrapper.find('button.fn-count').trigger('click')
     await flushPromises()
 
     expect(wrapper.vm.showModal).toBe(true)

From 9bfc786142889db2aed738bbc77924d792fe8d55 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 16 Oct 2026 22:41:52 +0000
Subject: [PATCH 4/6] fix(medcat-trainer): use theme variables for count
 colours

Non-zero TP, FN, and FP counts take --success, --warning, and --danger
from the NHS theme map instead of hardcoded hex values.

Co-authored-by: tomolopolis <tomolopolis@users.noreply.github.com>
---
 .../src/components/metrics/ConceptSummary.vue | 20 +++++++++----------
 .../components/MetricsConceptSummary.spec.ts  | 15 +++++++-------
 .../webapp/frontend/src/views/Metrics.vue     |  6 +++---
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
index ed508bad0..dbc745a2b 100644
--- a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
@@ -353,32 +353,32 @@ export default {
   background-color: transparent;
 }
 
-/* Vuetify sets `color: inherit` on [type=button]. Literal colors with !important keep non-zero counts visible. */
+/* Vuetify sets `color: inherit` on [type=button]. These variables are the NHS theme colours. */
 button.res-btn.tp-count:not(:disabled) {
-  color: #009639 !important;
+  color: var(--success) !important;
 }
 
 button.res-btn.fn-count:not(:disabled) {
-  color: #768692 !important;
+  color: var(--warning) !important;
 }
 
 button.res-btn.fp-count:not(:disabled) {
-  color: #DA291C !important;
+  color: var(--danger) !important;
 }
 
 button.res-btn.tp-count:not(:disabled):hover {
-  color: #fff !important;
-  background-color: #009639 !important;
+  color: var(--bs-white) !important;
+  background-color: var(--success) !important;
 }
 
 button.res-btn.fn-count:not(:disabled):hover {
-  color: #fff !important;
-  background-color: #768692 !important;
+  color: var(--bs-white) !important;
+  background-color: var(--warning) !important;
 }
 
 button.res-btn.fp-count:not(:disabled):hover {
-  color: #fff !important;
-  background-color: #DA291C !important;
+  color: var(--bs-white) !important;
+  background-color: var(--danger) !important;
 }
 
 .v-card {
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
index a667a17e5..dbc8752c7 100644
--- a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 import ConceptSummary from '@/components/metrics/ConceptSummary.vue'
 import conceptSummarySource from '@/components/metrics/ConceptSummary.vue?raw'
+import metricsSource from '@/views/Metrics.vue?raw'
 
 const fnExample = {
   cui: '195967001',
@@ -83,13 +84,13 @@ describe('metrics ConceptSummary.vue', () => {
     expect(zero.get('button.fn-count').attributes('disabled')).toBeDefined()
     expect(zero.get('button.fp-count').attributes('disabled')).toBeDefined()
 
-    // jsdom does not apply Vue SFC CSS, so lock the declarations that the browser uses.
-    expect(conceptSummarySource).toContain('button.res-btn.tp-count:not(:disabled)')
-    expect(conceptSummarySource).toContain('color: #009639 !important')
-    expect(conceptSummarySource).toContain('button.res-btn.fn-count:not(:disabled)')
-    expect(conceptSummarySource).toContain('color: #768692 !important')
-    expect(conceptSummarySource).toContain('button.res-btn.fp-count:not(:disabled)')
-    expect(conceptSummarySource).toContain('color: #DA291C !important')
+    // jsdom does not apply Vue SFC CSS, so lock the variable declarations the browser uses.
+    expect(metricsSource).toContain('--success: #{map-get($theme-colors, "success")}')
+    expect(metricsSource).toContain('--warning: #{map-get($theme-colors, "warning")}')
+    expect(metricsSource).toContain('--danger: #{map-get($theme-colors, "danger")}')
+    expect(conceptSummarySource).toContain('color: var(--success) !important')
+    expect(conceptSummarySource).toContain('color: var(--warning) !important')
+    expect(conceptSummarySource).toContain('color: var(--danger) !important')
 
     wrapper.unmount()
     zero.unmount()
diff --git a/medcat-trainer/webapp/frontend/src/views/Metrics.vue b/medcat-trainer/webapp/frontend/src/views/Metrics.vue
index adbc12708..6b22cf432 100644
--- a/medcat-trainer/webapp/frontend/src/views/Metrics.vue
+++ b/medcat-trainer/webapp/frontend/src/views/Metrics.vue
@@ -759,9 +759,9 @@ $metrics-header-height: 50px;
   height: 25px;
   padding: 3px 10px !important;
   border: 0 !important;
-  &:hover {
-    color: white !important;
-  }
+  --success: #{map-get($theme-colors, "success")};
+  --warning: #{map-get($theme-colors, "warning")};
+  --danger: #{map-get($theme-colors, "danger")};
 }
 .v-input--density-default {
   --v-input-control-height: 30px !important;

From a02a8c1e4401e0c23220b75d28a50a511edc3010 Mon Sep 17 00:00:00 2001
From: Tom Searle <tom@cogstack.org>
Date: Sat, 17 Oct 2026 00:02:34 +0100
Subject: [PATCH 5/6] fix(medcat-trainer): fix styling of metrics

---
 .../src/components/metrics/ConceptSummary.vue | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
index dbc745a2b..7c70c9a82 100644
--- a/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/ConceptSummary.vue
@@ -353,32 +353,49 @@ export default {
   background-color: transparent;
 }
 
-/* Vuetify sets `color: inherit` on [type=button]. These variables are the NHS theme colours. */
+button.res-btn.tp-count {
+  opacity: 0.3;
+  /* color: var(--success); */
+}
+
+button.res-btn.fn-count {
+  opacity: 0.3;
+  /* color: var(--warning); */
+}
+
+button.res-btn.fp-count {
+  opacity: 0.3;
+  /* color: var(--danger); */
+}
+
 button.res-btn.tp-count:not(:disabled) {
-  color: var(--success) !important;
+  opacity: 1;
+  color: var(--success);
 }
 
 button.res-btn.fn-count:not(:disabled) {
-  color: var(--warning) !important;
+  opacity: 1;
+  color: var(--warning);
 }
 
 button.res-btn.fp-count:not(:disabled) {
-  color: var(--danger) !important;
+  opacity: 1;
+  color: var(--danger);
 }
 
 button.res-btn.tp-count:not(:disabled):hover {
-  color: var(--bs-white) !important;
-  background-color: var(--success) !important;
+  color: var(--bs-white);
+  background-color: var(--success);
 }
 
 button.res-btn.fn-count:not(:disabled):hover {
-  color: var(--bs-white) !important;
-  background-color: var(--warning) !important;
+  color: var(--bs-white);
+  background-color: var(--warning);
 }
 
 button.res-btn.fp-count:not(:disabled):hover {
-  color: var(--bs-white) !important;
-  background-color: var(--danger) !important;
+  color: var(--bs-white);
+  background-color: var(--danger);
 }
 
 .v-card {

From 670dd3f077af18f5ca3fc643e31315fa3eb4aa7d Mon Sep 17 00:00:00 2001
From: Tom Searle <tom@cogstack.org>
Date: Sun, 18 Oct 2026 16:43:00 +0100
Subject: [PATCH 6/6] fix(medcat-trainer): fix test, fix clickable mention in
 span in modal appearing alongside the context to the right of the mention

---
 .../src/components/anns/AnnoResult.vue        | 17 +++++---
 .../src/components/metrics/exampleFields.js   | 30 ++++++++++++++
 .../src/tests/components/AnnoResult.spec.ts   | 41 +++++++++++++++++++
 .../components/MetricsConceptSummary.spec.ts  |  8 ++--
 4 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue b/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
index 9515e2d82..965f2394e 100644
--- a/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
+++ b/medcat-trainer/webapp/frontend/src/components/anns/AnnoResult.vue
@@ -12,7 +12,7 @@
 
 <script>
 import VRuntimeTemplate from 'vue3-runtime-template'
-import { escapeTemplateText, exampleField } from '@/components/metrics/exampleFields'
+import { contextMentionIndex, escapeTemplateText, exampleField, resolvedExampleEnd } from '@/components/metrics/exampleFields'
 
 export default {
   name: 'AnnoResult.vue',
@@ -61,15 +61,16 @@ export default {
       const start = Number(this.result.start)
       const end = Number(this.result.end)
       const fullText = typeof this.docText === 'string' ? this.docText : ''
-      if (fullText && Number.isFinite(start) && Number.isFinite(end)) {
+      const resolvedEnd = resolvedExampleEnd(fullText, start, end, srcVal)
+      if (resolvedEnd != null) {
         return {
-          before: escapeTemplateText(fullText.slice(Math.max(0, start - 60), Math.max(0, start))),
-          after: escapeTemplateText(fullText.slice(Math.max(0, end), Math.max(0, end) + 60))
+          before: escapeTemplateText(fullText.slice(Math.max(0, start - 60), start)),
+          after: escapeTemplateText(fullText.slice(resolvedEnd, resolvedEnd + 60))
         }
       }
 
       const context = typeof this.result.text === 'string' ? this.result.text : ''
-      const idx = context.indexOf(srcVal)
+      const idx = contextMentionIndex(context, start, srcVal)
       if (idx === -1) {
         return { before: escapeTemplateText(context), after: '' }
       }
@@ -80,12 +81,16 @@ export default {
     },
     openAnno () {
       if (this.projectId == null || this.documentId == null) return
+      const start = Number(this.result.start)
+      const end = Number(this.result.end)
+      const fullText = typeof this.docText === 'string' ? this.docText : ''
+      const resolvedEnd = resolvedExampleEnd(fullText, start, end, this.sourceValue)
       const routeData = this.$router.resolve(
         {
           path: `/train-annotations/${this.projectId}/${this.documentId}`,
           query: {
             annoStart: this.result.start,
-            annoEnd: this.result.end
+            annoEnd: resolvedEnd == null ? this.result.end : resolvedEnd
           }
       })
       window.open(routeData.href, '_blank')
diff --git a/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js b/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
index 2cdc162b9..016f86661 100644
--- a/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
+++ b/medcat-trainer/webapp/frontend/src/components/metrics/exampleFields.js
@@ -33,3 +33,33 @@ export function documentTextForExample (docs2text, example) {
   if (!Number.isNaN(asNumber) && docs2text[asNumber] != null) return docs2text[asNumber]
   return ''
 }
+
+function sameMention (slice, sourceValue) {
+  return slice === sourceValue || slice.toLowerCase() === sourceValue.toLowerCase()
+}
+
+// Stats examples often store end equal to start. The mention still begins at
+// start, so a trailing slice from end repeats it beside the clickable span.
+export function resolvedExampleEnd (fullText, start, end, sourceValue) {
+  if (typeof fullText !== 'string' || !sourceValue) return null
+  if (!Number.isFinite(start) || !Number.isFinite(end) || start < 0 || start > fullText.length) return null
+  if (end >= start && end <= fullText.length && sameMention(fullText.slice(start, end), sourceValue)) return end
+  const byLength = start + sourceValue.length
+  if (byLength <= fullText.length && sameMention(fullText.slice(start, byLength), sourceValue)) return byLength
+  return null
+}
+
+// MedCAT context windows are doc[max(0, start - 60): end + 60], so the
+// annotated mention is at min(start, 60), not the first copy in that window.
+export function contextMentionIndex (context, start, sourceValue) {
+  if (typeof context !== 'string' || !sourceValue) return -1
+  const at = (index) => index >= 0 &&
+    index + sourceValue.length <= context.length &&
+    sameMention(context.slice(index, index + sourceValue.length), sourceValue)
+  if (Number.isFinite(start) && at(Math.min(Math.max(start, 0), 60))) {
+    return Math.min(Math.max(start, 0), 60)
+  }
+  const exact = context.indexOf(sourceValue)
+  if (exact !== -1) return exact
+  return context.toLowerCase().indexOf(sourceValue.toLowerCase())
+}
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
index 5fb6ece3b..95a34a5cc 100644
--- a/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
+++ b/medcat-trainer/webapp/frontend/src/tests/components/AnnoResult.spec.ts
@@ -93,6 +93,47 @@ describe('AnnoResult.vue', () => {
     expect(template).not.toContain('<asthma>')
   })
 
+  it('does not repeat the mention when the example end equals its start', () => {
+    const doc = 'Patient is a 70-year-old female with prior history of lung cancer, status post upper lobectomy.'
+    const start = doc.indexOf('lung cancer')
+    const { wrapper } = mountResult({
+      docText: doc,
+      result: {
+        ...snakeCaseResult,
+        source_value: 'lung cancer',
+        text: doc.slice(Math.max(0, start - 60), start + 60),
+        start,
+        end: start
+      }
+    })
+    const template = wrapper.find('.runtime-template').text()
+    const marker = '>lung cancer</span>'
+    const at = template.indexOf(marker)
+    expect(at).toBeGreaterThan(-1)
+    expect(template.slice(at + marker.length)).toContain(', status post upper lobectomy.')
+    expect(template.slice(at + marker.length)).not.toContain('lung cancer')
+    expect(template.slice(0, at)).not.toContain('lung cancer')
+  })
+
+  it('highlights the centred mention when the context window repeats it', () => {
+    const left = `prior asthma ${'x'.repeat(47)}`
+    const context = `${left}asthma later`
+    const { wrapper } = mountResult({
+      docText: undefined,
+      result: {
+        ...snakeCaseResult,
+        text: context,
+        start: 80,
+        end: 80
+      }
+    })
+    const template = wrapper.find('.runtime-template').text()
+    const marker = '>asthma</span>'
+    const at = template.indexOf(marker)
+    expect(template.slice(0, at)).toContain('prior asthma ')
+    expect(template.slice(at + marker.length)).toBe(' later</span>')
+  })
+
   it('opens the annotation from snake_case project and document ids', () => {
     const open = vi.spyOn(window, 'open').mockImplementation(() => null)
     const { wrapper, resolve } = mountResult()
diff --git a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
index dbc8752c7..60ac45f5a 100644
--- a/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
+++ b/medcat-trainer/webapp/frontend/src/tests/components/MetricsConceptSummary.spec.ts
@@ -84,13 +84,13 @@ describe('metrics ConceptSummary.vue', () => {
     expect(zero.get('button.fn-count').attributes('disabled')).toBeDefined()
     expect(zero.get('button.fp-count').attributes('disabled')).toBeDefined()
 
-    // jsdom does not apply Vue SFC CSS, so lock the variable declarations the browser uses.
+    // jsdom does not apply Vue SFC CSS, so lock the declarations the browser uses.
     expect(metricsSource).toContain('--success: #{map-get($theme-colors, "success")}')
     expect(metricsSource).toContain('--warning: #{map-get($theme-colors, "warning")}')
     expect(metricsSource).toContain('--danger: #{map-get($theme-colors, "danger")}')
-    expect(conceptSummarySource).toContain('color: var(--success) !important')
-    expect(conceptSummarySource).toContain('color: var(--warning) !important')
-    expect(conceptSummarySource).toContain('color: var(--danger) !important')
+    expect(conceptSummarySource).toMatch(/button\.res-btn\.tp-count:not\(:disabled\)\s*\{[^}]*color:\s*var\(--success\)/)
+    expect(conceptSummarySource).toMatch(/button\.res-btn\.fn-count:not\(:disabled\)\s*\{[^}]*color:\s*var\(--warning\)/)
+    expect(conceptSummarySource).toMatch(/button\.res-btn\.fp-count:not\(:disabled\)\s*\{[^}]*color:\s*var\(--danger\)/)
 
     wrapper.unmount()
     zero.unmount()