Update gene name dynamically

- display "None" if gene name is "novel transcript"
- remove the "Source" in square brackets

(ENSWBSITES-1037)

src/ensembl/src/content/app/browser/drawer/drawer-views/gene-summary/GeneSummary.tsx

@@ -23,6 +23,7 @@ import classNames from 'classnames';
 import * as urlFor from 'src/shared/helpers/urlHelper';
 import { getFormattedLocation } from 'src/shared/helpers/formatters/regionFormatter';
 import { getStrandDisplayName } from 'src/shared/helpers/formatters/strandFormatter';
+import { getGeneName } from 'src/shared/helpers/formatters/geneFormatter';
 import {
   buildFocusIdForUrl,
   getDisplayStableId
@@ -130,7 +131,7 @@ const GeneSummary = () => {
 
       <div className={rowClasses}>
         <div className={styles.label}>Gene name</div>
-        <div className={styles.value}>{gene.name}</div>
+        <div className={styles.value}>{getGeneName(gene.name)}</div>
       </div>
 
       {gene.alternative_symbols.length > 0 && (

src/ensembl/src/content/app/browser/drawer/drawer-views/transcript-summary/TranscriptSummary.scss

@@ -65,6 +65,10 @@
   font-weight: $light;
 }
 
+.geneSymbol {
+  margin-right: 12px;
+}
+
 
 .downloadLink{
   color: $blue;

src/ensembl/src/content/app/browser/drawer/drawer-views/transcript-summary/TranscriptSummary.tsx

@@ -27,6 +27,7 @@ import {
 } from 'src/shared/state/ens-object/ensObjectHelpers';
 import { getBrowserActiveEnsObject } from 'src/content/app/browser/browserSelectors';
 import { getCommaSeparatedNumber } from 'src/shared/helpers/formatters/numberFormatter';
+import { getGeneName } from 'src/shared/helpers/formatters/geneFormatter';
 
 // TODO: check if this can be moved to a common place
 import {
@@ -313,15 +314,15 @@ const TranscriptSummary = () => {
         <div className={styles.label}>Gene</div>
         <div className={styles.value}>
           <div>
-            {gene.symbol && <span>{gene.symbol}</span>}
-            {gene.symbol !== stableId && <span>{stableId}</span>}
+            {gene.symbol && <span className={styles.geneSymbol}>{gene.symbol}</span>}
+            {gene.symbol !== stableId && <span>{gene.stable_id}</span>}
           </div>
         </div>
       </div>
 
       <div className={styles.row}>
         <div className={styles.label}>Gene name</div>
-        <div className={styles.value}>{gene.name}</div>
+        <div className={styles.value}>{getGeneName(gene.name)}</div>
       </div>
 
       <div className={`${styles.row} ${styles.spaceAbove}`}>

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery, gql } from '@apollo/client';
 import { parseEnsObjectIdFromUrl } from 'src/shared/state/ens-object/ensObjectHelpers';
+import { getGeneName } from 'src/shared/helpers/formatters/geneFormatter';
 
 import GenePublications from '../publications/GenePublications';
 import MainAccordion from './MainAccordion';
@@ -80,7 +81,7 @@ const GeneOverview = () => {
       </div>
 
       <div className={styles.sectionHead}>Gene name</div>
-      <div className={styles.geneName}>{gene.name || 'None'}</div>
+      <div className={styles.geneName}>{getGeneName(gene.name)}</div>
 
       <div className={styles.sectionHead}>Synonyms</div>
       <div className={styles.synonyms}>

src/ensembl/src/shared/helpers/formatters/geneFormatter.test.ts

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+ import { getGeneName } from './geneFormatter';
+  
+ describe('getGeneName', () => {
+   it('returns the correct gene display name', () => {
+     expect(getGeneName('novel transcript')).toBe('None');
+     expect(getGeneName('')).toBe('None');
+     expect(getGeneName(null)).toBe('None');
+     expect(getGeneName('Heat shock protein 101 [Source:UniProtKB/TrEMBL;Acc:Q9SPH4]')).toBe('Heat shock protein 101');
+   });
+ });

src/ensembl/src/shared/helpers/formatters/geneFormatter.ts

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function getGeneName(geneName: string | null) {
+  if(geneName && geneName !== 'novel transcript') {
+    return geneName.replace(/\[Source:.*\]/,'').trim();
+  } else {
+    return 'None';
+  }
+}