Single source xrefs (#401)

- Multiple xrefs from the same group are now displayed within an accordion
- If the xref source description and accession_id matched, the label will be hidden
- If the xref source description and the xref group name matched, the label will be hidden

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.scss

@@ -13,16 +13,9 @@
 }
 
 .geneDetails {
-  display: grid;
-  grid-template-columns: [gene-symbol] min-content 10px [stable-id] auto;
-
   .geneSymbol {
-    grid-column: gene-symbol;
     font-weight: $bold;
-  }
-
-  .stableId {
-    grid-column: stable-id;
+    margin-right: 10px;
   }
 }
 
@@ -76,19 +69,6 @@
   margin: 10px 0 20px 20px;
 }
 
-.xrefGroupSourceName {
-  margin-right: 5px;
-  display: inline-block;
-}
-
-.xrefGroupWithSameLabel {
-  display: inline-block;
-}
-
-.xrefGroupLinks {
-  display: inline-grid;
-}
-
 .externalReferenceContainer{
   margin-bottom:10px;
-}
\ No newline at end of file
+}

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.tsx

@@ -43,8 +43,8 @@ import { parseEnsObjectIdFromUrl } from 'src/shared/state/ens-object/ensObjectHe
 const QUERY = gql`
   query Gene($stable_id: String!, $genome_id: String!) {
     gene(byId: { stable_id: $stable_id, genome_id: $genome_id }) {
-      name
       stable_id
+      symbol
       external_references {
         accession_id
         name
@@ -80,7 +80,7 @@ type Transcript = {
 };
 
 type Gene = {
-  name: string;
+  symbol: string;
   stable_id: string;
   transcripts: Transcript[];
   external_references: ExternalReferenceType[];
@@ -145,8 +145,8 @@ const GeneExternalReferences = () => {
   return (
     <div className={styles.xrefsContainer}>
       <div className={styles.geneDetails}>
-        <div className={styles.geneSymbol}>{data.gene.name}</div>
-        <div className={styles.stableId}>{data.gene.stable_id}</div>
+        <span className={styles.geneSymbol}>{data.gene.symbol}</span>
+        <span>{data.gene.stable_id}</span>
       </div>
 
       <div className={styles.sectionHead}>Gene</div>
@@ -169,13 +169,7 @@ const GeneExternalReferences = () => {
                 </div>
               );
             } else {
-              return externalReferencesGroup.references[0].name ===
-                externalReferencesGroup.source.name
-                ? renderXrefGroupWithSameLabels(externalReferencesGroup, key)
-                : renderXrefGroupWithDifferentLabels(
-                    externalReferencesGroup,
-                    key
-                  );
+              return renderXrefGroup(externalReferencesGroup, key);
             }
           }
         )}
@@ -186,7 +180,6 @@ const GeneExternalReferences = () => {
           {transcripts.map((transcript, key) => {
             return (
               <div key={key}>
-                {' '}
                 <RenderTranscriptXrefGroup transcript={transcript} />
               </div>
             );
@@ -228,33 +221,7 @@ const RenderTranscriptXrefGroup = (props: { transcript: Transcript }) => {
   );
 };
 
-const renderXrefGroupWithSameLabels = (
-  externalReferencesGroup: ExternalReferencesGroup,
-  key: number
-) => {
-  return (
-    <div key={key} className={styles.xrefGroupWithSameLabel}>
-      <div className={styles.xrefGroupSourceName}>
-        {externalReferencesGroup.source.name}
-      </div>
-      <div className={styles.xrefGroupLinks}>
-        {externalReferencesGroup.references.map((entry, key) => (
-          <ExternalReference
-            label={''}
-            to={entry.url}
-            linkText={entry.accession_id}
-            key={key}
-            classNames={{
-              container: styles.externalReferenceContainer
-            }}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const renderXrefGroupWithDifferentLabels = (
+const renderXrefGroup = (
   externalReferencesGroup: ExternalReferencesGroup,
   key: number
 ) => {
@@ -271,7 +238,12 @@ const renderXrefGroupWithDifferentLabels = (
             <div>
               {externalReferencesGroup.references.map((entry, key) => (
                 <ExternalReference
-                  label={entry.description}
+                  label={
+                    entry.description === entry.accession_id ||
+                    externalReferencesGroup.source.name === entry.description
+                      ? ''
+                      : entry.description
+                  }
                   to={entry.url}
                   linkText={entry.accession_id}
                   key={key}

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

@@ -48,7 +48,7 @@ const GeneOverview = (props: Props) => {
     <div className={styles.overviewContainer}>
       <div className={styles.geneDetails}>
         <span className={styles.geneSymbol}>{gene.symbol}</span>
-        <span className={styles.stableId}>{gene.id}</span>
+        <span>{gene.id}</span>
       </div>
 
       <div className={styles.sectionHead}>Gene name</div>

src/ensembl/src/content/app/entity-viewer/state/sidebar/sampleData.ts

@@ -19,7 +19,7 @@ import { DataSetType } from '../../types/dataSet';
 
 export const entityViewerWheatSampleResponse: EntityViewerSidebarPayload = {
   gene: {
-    symbol: 'TraesCS3D02G273600.1 ',
+    symbol: 'TraesCS3D02G273600.1',
     id: 'ENSG00000139618.15',
     metadata: {
       name: {
@@ -380,7 +380,7 @@ export const entityViewerHomoSapiensSampleResponse: EntityViewerSidebarPayload =
 
 export const entityViewerBacteriaSampleResponse: EntityViewerSidebarPayload = {
   gene: {
-    symbol: 'grpE ',
+    symbol: 'grpE',
     id: 'b2614',
     synonyms: ['b2614', 'ECK2610', 'JW2594'],
     metadata: {

src/ensembl/src/shared/components/external-reference/ExternalReference.scss

 @import 'src/styles/common';
 
 .label {
-  grid-column: label; // FIXME: what grid is this?
   margin-right: 5px;
 }