From 40e672474a0fafca4ac9a57de32d2c8eaad4bca4 Mon Sep 17 00:00:00 2001
From: Dennis Hendriksen <d.hendriksen@umcg.nl>
Date: Mon, 18 Jan 2021 08:53:05 +0100
Subject: [PATCH] Fix #104 Abbreviate HGVS C and HGVS P values in record table

---
 src/components/RecordInfoDetailsItemValue.vue | 50 +++++++++++--------
 src/mocks/apiDataMock.ts                      |  4 +-
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/components/RecordInfoDetailsItemValue.vue b/src/components/RecordInfoDetailsItemValue.vue
index 63c56ada..cd69d2e1 100644
--- a/src/components/RecordInfoDetailsItemValue.vue
+++ b/src/components/RecordInfoDetailsItemValue.vue
@@ -34,29 +34,25 @@
     <span v-else>{{ value }}</span>
   </span>
   <span v-else-if="metadataId === 'hgvsC' || metadataId === 'HGVSc'">
-    <span v-if="details">{{ value }}</span>
-    <span v-else>
-      <Anchor
-        v-if="isRefSeqFeatureId()"
-        :href="'https://www.ncbi.nlm.nih.gov/nuccore/' + encodeURIComponent(value.substring(0, value.indexOf(':')))"
-        :text="value.substring(value.indexOf(':') + 1)"
-      />
-      <Anchor
-        v-else-if="isEnsemblFeatureId() && (genomeAssembly === 'GRCh37' || genomeAssembly === 'GRCh38')"
-        :href="
-          'http://' +
-            (genomeAssembly === 'GRCh37' ? 'grch37' : 'www') +
-            '.ensembl.org/Homo_sapiens/Transcript/Summary?db=core;t=' +
-            encodeURIComponent(value.substring(0, value.indexOf(':')))
-        "
-        :text="value.substring(value.indexOf(':') + 1)"
-      />
-      <span v-else>{{ value.indexOf(':') !== -1 ? value.substring(value.indexOf(':') + 1) : value }}</span>
-    </span>
+    <Anchor
+      v-if="isRefSeqFeatureId()"
+      :href="'https://www.ncbi.nlm.nih.gov/nuccore/' + encodeURIComponent(value.substring(0, value.indexOf(':')))"
+      :text="getHgvsText(value)"
+    />
+    <Anchor
+      v-else-if="isEnsemblFeatureId() && (genomeAssembly === 'GRCh37' || genomeAssembly === 'GRCh38')"
+      :href="
+        'http://' +
+          (genomeAssembly === 'GRCh37' ? 'grch37' : 'www') +
+          '.ensembl.org/Homo_sapiens/Transcript/Summary?db=core;t=' +
+          encodeURIComponent(value.substring(0, value.indexOf(':')))
+      "
+      :text="getHgvsText(value)"
+    />
+    <span v-else>{{ getHgvsText(value) }}</span>
   </span>
   <span v-else-if="metadataId === 'hgvsP' || metadataId === 'HGVSp'">
-    <span v-if="details">{{ value }}</span>
-    <span v-else>{{ value.indexOf(':') !== -1 ? value.substring(value.indexOf(':') + 1) : value }}</span>
+    <span>{{ getHgvsText(value) }}</span>
   </span>
   <span v-else-if="metadataId === 'gnomAD_AF'">
     <Anchor
@@ -147,6 +143,18 @@ export default Vue.extend({
         vClasses.push(vClass);
       }
       return vClasses.join('/');
+    },
+    getHgvsText(value: string): string {
+      let textValue;
+      if (this.details) {
+        textValue = value;
+      } else {
+        textValue = value.indexOf(':') !== -1 ? value.substring(value.indexOf(':') + 1) : value;
+        if (textValue.length > 29) {
+          textValue = textValue.substring(0, 26) + '...';
+        }
+      }
+      return textValue;
     }
   }
 });
diff --git a/src/mocks/apiDataMock.ts b/src/mocks/apiDataMock.ts
index 97e39289..d3433244 100644
--- a/src/mocks/apiDataMock.ts
+++ b/src/mocks/apiDataMock.ts
@@ -582,8 +582,8 @@ export const apiData: ApiData = {
                 'protein_coding',
                 '5/5',
                 null,
-                'ENST00000377205.1:c.619C>T',
-                'ENSP00000366410.1:p.Arg207Trp',
+                'ENST00000377205.1:c.619C>Tabcdefghijklmnopqrstuvwqyzabcdefghijklmnopqrstuvwqyzabcdefghijklmnopqrstuvwqyz',
+                'ENSP00000366410.1:p.Arg207Trpabcdefghijklmnopqrstuvwqyzabcdefghijklmnopqrstuvwqyzabcdefghijklmnopqrstuvwqyz',
                 '763',
                 '619',
                 '207',