Refactor ExternalLink and ExternalReference components (#1084)

Ensembl · Feb 8, 2024 · 561a307 · 561a307
1 parent 1ad0716
commit 561a307
Show file tree

Hide file tree

Showing 30 changed files with 206 additions and 289 deletions.
diff --git a/...ts/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.module.css b/...ts/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.module.css
@@ -89,7 +89,6 @@
 
 .externalRefLink {
   font-weight: var(--font-weight-normal);
-  font-size: 12px;
 }
 
 .downloadLink {

diff --git a/...omponents/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx b/...omponents/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx
@@ -176,25 +176,25 @@ export const TranscriptsListItemInfo = (
           <div className={styles.moreInfoColumn}>
             {!!transcriptNCBI && (
               <ExternalReference
-                classNames={{
-                  link: styles.externalRefLink
-                }}
-                label={'RefSeq match'}
+                label="RefSeq match"
                 to={transcriptNCBI.url}
-                linkText={transcriptNCBI.id}
                 onClick={() => handleExternalReferenceClick('RefSeq match')}
-              />
+              >
+                <span className={styles.externalRefLink}>
+                  {transcriptNCBI.id}
+                </span>
+              </ExternalReference>
             )}
             {transcriptCCDS?.url && (
               <ExternalReference
-                classNames={{
-                  link: styles.externalRefLink
-                }}
-                label={'CCDS'}
+                label="CCDS"
                 to={transcriptCCDS.url}
-                linkText={transcriptCCDS.accession_id}
                 onClick={() => handleExternalReferenceClick('CCDS')}
-              />
+              >
+                <span className={styles.externalRefLink}>
+                  {transcriptCCDS.accession_id}
+                </span>
+              </ExternalReference>
             )}
           </div>
         )}

diff --git a/...e-view/components/gene-view-sidebar/external-references/GeneExternalReferences.module.css b/...e-view/components/gene-view-sidebar/external-references/GeneExternalReferences.module.css
@@ -22,10 +22,6 @@
 }
 
 .showHide,
-.externalReferenceContainer {
+.externalReference {
   margin-bottom: 10px;
 }
-
-.externalReferenceLink {
-  font-size: 12px;
-}
diff --git a/...wer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.tsx b/...wer/gene-view/components/gene-view-sidebar/external-references/GeneExternalReferences.tsx
@@ -183,13 +183,11 @@ const ExternalReferencesGroup = (props: {
             : entry.description
         }
         to={entry.url}
-        linkText={entry.accession_id}
         key={key}
-        classNames={{
-          container: styles.externalReferenceContainer,
-          link: styles.externalReferenceLink
-        }}
-      />
+        className={styles.externalReference}
+      >
+        {entry.accession_id}
+      </ExternalReference>
     ) : null
   );
 
@@ -263,13 +261,11 @@ const renderExternalReferencesGroups = (
             <ExternalReference
               label={externalReferencesGroup.source.name}
               to={externalReferencesGroup.references[0].url}
-              linkText={externalReferencesGroup.references[0].accession_id}
               onClick={() => onClick(externalReferencesGroup.source.name)}
-              classNames={{
-                container: styles.externalReferenceContainer,
-                link: styles.externalReferenceLink
-              }}
-            />
+              className={styles.externalReference}
+            >
+              {externalReferencesGroup.references[0].accession_id}
+            </ExternalReference>
           ) : null
         ) : (
           <ExternalReferencesGroup

diff --git a/...app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.module.css b/...app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.module.css
@@ -2,14 +2,10 @@
   font-size: 13px;
 }
 
-.externalRefContainer {
+.externalReference {
   margin-top: 6px;
 }
 
-.externalRefLink {
-  font-size: 12px;
-}
-
 .sectionHead {
   color: var(--color-black);
   font-size: 12px;

diff --git a/...t/app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.test.tsx b/...t/app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.test.tsx
@@ -132,15 +132,15 @@ describe('<GeneOverview />', () => {
     });
 
     it('renders all data correctly', () => {
-      const { container, queryByTestId } = render(<GeneOverview />);
+      const { container, queryByTestId, queryByText } = render(
+        <GeneOverview />
+      );
 
       const geneSymbolElement = container.querySelector('.geneSymbol');
       const stableIdElement = queryByTestId('stableId');
       const geneNameElement = container.querySelector('.geneName');
       const synonymsElement = container.querySelector('.synonyms');
-      const xrefElement = container.querySelector(
-        '.externalLinkContainer .link'
-      );
+      const xrefElement = queryByText(metadata.name.accession_id);
       const biotypeValueElement = container.querySelector('.biotypeValue');
 
       // child components
@@ -149,7 +149,7 @@ describe('<GeneOverview />', () => {
       expect(geneSymbolElement?.textContent).toMatch(geneSymbol);
       expect(stableIdElement?.textContent).toMatch(stableId);
       expect(geneNameElement?.textContent).toMatch(geneName);
-      expect(xrefElement?.textContent).toMatch(metadata.name.accession_id);
+      expect(xrefElement).toBeTruthy();
       expect(synonymsElement?.textContent).toMatch(
         alternativeSymbols.join(', ')
       );

diff --git a/...ontent/app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.tsx b/...ontent/app/entity-viewer/gene-view/components/gene-view-sidebar/overview/GeneOverview.tsx
@@ -97,14 +97,12 @@ const GeneOverview = () => {
           <div className={styles.geneName}>{getGeneName(gene.name)}</div>
           {geneNameMetadata?.accession_id && geneNameMetadata?.url && (
             <ExternalReference
-              classNames={{
-                container: styles.externalRefContainer,
-                link: styles.externalRefLink
-              }}
+              className={styles.externalReference}
               to={geneNameMetadata.url}
-              linkText={geneNameMetadata.accession_id}
               onClick={trackLink}
-            />
+            >
+              {geneNameMetadata.accession_id}
+            </ExternalReference>
           )}
         </div>
       </section>

diff --git a/...pp/entity-viewer/gene-view/components/gene-view-sidebar/publications/GenePublications.tsx b/...pp/entity-viewer/gene-view/components/gene-view-sidebar/publications/GenePublications.tsx
@@ -53,13 +53,7 @@ const GenePublications = (props: Props) => {
       <div className={geneOverviewStyles.sectionHead}>Publications</div>
 
       <div className={geneOverviewStyles.sectionContent}>
-        <ExternalReference
-          to={linkToEuroPMC}
-          linkText="Europe PMC"
-          classNames={{
-            link: geneOverviewStyles.externalRefLink
-          }}
-        />
+        <ExternalReference to={linkToEuroPMC}>Europe PMC</ExternalReference>
       </div>
     </section>
   );

diff --git a/...ontent/app/entity-viewer/gene-view/components/protein-domain-image/ProteinDomainImage.tsx b/...ontent/app/entity-viewer/gene-view/components/protein-domain-image/ProteinDomainImage.tsx
@@ -316,7 +316,7 @@ const ProteinDomainInfoTooltip = (props: {
               <span className={styles.tooltipFieldLabel}>
                 {domainInfo.resourceName}
               </span>
-              <ExternalLink linkText={domainInfo.name} to={domainInfo.url} />
+              <ExternalLink to={domainInfo.url}>{domainInfo.name}</ExternalLink>
             </div>
           )}
           {domainInfo.closestDataProviderName &&
@@ -326,10 +326,9 @@ const ProteinDomainInfoTooltip = (props: {
                 <span className={styles.tooltipFieldLabel}>
                   {domainInfo.closestDataProviderName}
                 </span>
-                <ExternalLink
-                  linkText={domainInfo.accessionIdInClosestDataProvider}
-                  to={domainInfo.urlForClosestDataProvider}
-                />
+                <ExternalLink to={domainInfo.urlForClosestDataProvider}>
+                  {domainInfo.accessionIdInClosestDataProvider}
+                </ExternalLink>
               </div>
             )}
           <div className={styles.tooltipRow}>

diff --git a/...ene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.module.css b/...ene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.module.css
@@ -28,15 +28,11 @@
   grid-column: download;
 }
 
-.externalRefContainer {
+.externalReference {
   font-weight: var(--font-weight-normal);
   margin-right: 16px;
 }
 
-.externalRefLink {
-  font-size: 12px;
-}
-
 .proteinFeaturesCountWrapper {
   display: inline-block;
 }

diff --git a/.../gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.test.tsx b/.../gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.test.tsx
@@ -104,9 +104,11 @@ describe('<ProteinsListItemInfo /', () => {
 
         expect(getByText(props.xrefs[1].accession_id)).toBeTruthy();
         expect(getAllByText(props.source)).toHaveLength(4);
-        expect(
-          container.querySelectorAll('.externalLinkContainer')
-        ).toHaveLength(4);
+
+        for (const xrefData of tremblXrefs) {
+          const link = getByText(xrefData.accession_id);
+          expect(link).toBeTruthy();
+        }
       });
     });
   });

diff --git a/...iewer/gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.tsx b/...iewer/gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.tsx
@@ -226,15 +226,13 @@ const ProteinExternalReference = (props: ProteinExternalReferenceProps) => {
   return (
     <div className={styles.proteinExternalReference}>
       <ExternalReference
-        classNames={{
-          container: styles.externalRefContainer,
-          link: styles.externalRefLink
-        }}
+        className={styles.externalReference}
         label={props.source}
         to={url}
-        linkText={props.accessionId}
         onClick={onClick}
-      />
+      >
+        {props.accessionId}
+      </ExternalReference>
     </div>
   );
 };

diff --git a/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.tsx b/src/content/app/entity-viewer/variant-view/variant-view-sidebar/overview/VariantOverview.tsx
@@ -103,10 +103,9 @@ const VariantOverview = () => {
         <div className={styles.externalLink}>
           {currentVariantType &&
             (currentVariantType.url ? (
-              <ExternalLink
-                to={currentVariantType.url}
-                linkText={currentVariantType.so_accession_id}
-              />
+              <ExternalLink to={currentVariantType.url}>
+                {currentVariantType.so_accession_id}
+              </ExternalLink>
             ) : (
               <span>{currentVariantType.so_accession_id}</span>
             ))}

diff --git a/src/content/app/genome-browser/components/drawer/drawer-views/gene-summary/GeneSummary.tsx b/src/content/app/genome-browser/components/drawer/drawer-views/gene-summary/GeneSummary.tsx
@@ -174,10 +174,11 @@ const GeneSummary = () => {
           {getGeneName(gene.name)}
           {geneNameMetadata?.accession_id && geneNameMetadata?.url && (
             <ExternalReference
-              classNames={{ container: styles.marginTop }}
+              className={styles.marginTop}
               to={geneNameMetadata.url}
-              linkText={geneNameMetadata.accession_id}
-            />
+            >
+              {geneNameMetadata.accession_id}
+            </ExternalReference>
           )}
         </div>
       </div>

diff --git a/src/content/app/genome-browser/components/drawer/drawer-views/track-details/TrackDetails.tsx b/src/content/app/genome-browser/components/drawer/drawer-views/track-details/TrackDetails.tsx
@@ -85,7 +85,7 @@ const TrackDetails = (props: Props) => {
         <div key={source.name} className={styles.standardLabelValue}>
           <div className={styles.value}>
             {source.url ? (
-              <ExternalLink to={source.url} linkText={source.name} />
+              <ExternalLink to={source.url}>{source.name}</ExternalLink>
             ) : (
               <span>{source.name}</span>
             )}

diff --git a/...pp/genome-browser/components/drawer/drawer-views/transcript-summary/TranscriptSummary.tsx b/...pp/genome-browser/components/drawer/drawer-views/transcript-summary/TranscriptSummary.tsx
@@ -254,10 +254,11 @@ const TranscriptSummary = (props: Props) => {
             )}
             {uniprotXref?.url && (
               <ExternalReference
-                label={'UniProtKB/Swiss-Prot'}
+                label="UniProtKB/Swiss-Prot"
                 to={uniprotXref.url}
-                linkText={uniprotXref.accession_id}
-              />
+              >
+                {uniprotXref.accession_id}
+              </ExternalReference>
             )}
           </div>
         </div>
@@ -266,12 +267,9 @@ const TranscriptSummary = (props: Props) => {
       {ccdsXref?.url && (
         <div className={`${styles.row} ${styles.spaceAbove}`}>
           <div className={styles.value}>
-            <ExternalReference
-              classNames={{ label: styles.lightText }}
-              label={'CCDS'}
-              to={ccdsXref.url}
-              linkText={ccdsXref.accession_id}
-            />
+            <ExternalReference label="CCDS" to={ccdsXref.url}>
+              {ccdsXref.accession_id}
+            </ExternalReference>
           </div>
         </div>
       )}

diff --git a/...genome-browser/components/drawer/drawer-views/variant-group-legend/VariantGroupLegend.tsx b/...genome-browser/components/drawer/drawer-views/variant-group-legend/VariantGroupLegend.tsx
@@ -71,10 +71,9 @@ const VariantGroupLegend = (props: Props) => {
                 <td className={styles.variantTypeLabel}>{variantType.label}</td>
                 <td className={styles.value}>
                   {variantType.url ? (
-                    <ExternalLink
-                      to={variantType.url}
-                      linkText={variantType.so_accession_id}
-                    />
+                    <ExternalLink to={variantType.url}>
+                      {variantType.so_accession_id}
+                    </ExternalLink>
                   ) : (
                     <span>{variantType.so_accession_id}</span>
                   )}

diff --git a/...tent/app/genome-browser/components/drawer/drawer-views/variant-summary/VariantSummary.tsx b/...tent/app/genome-browser/components/drawer/drawer-views/variant-summary/VariantSummary.tsx
@@ -207,10 +207,9 @@ export const VariantDB = (props: {
     dbElement = <span>{primary_source.source.name}</span>;
   } else {
     dbElement = (
-      <ExternalLink
-        to={primary_source.url}
-        linkText={primary_source.source.name}
-      />
+      <ExternalLink to={primary_source.url}>
+        {primary_source.source.name}
+      </ExternalLink>
     );
   }
 
@@ -240,11 +239,9 @@ const VariantSynonyms = (props: { variant: VariantQueryResult['variant'] }) => {
     (reference, index) => {
       if (reference.url) {
         return (
-          <ExternalLink
-            key={index}
-            to={reference.url}
-            linkText={reference.name}
-          />
+          <ExternalLink key={index} to={reference.url}>
+            {reference.name}
+          </ExternalLink>
         );
       } else {
         return <span key={index}>{reference.name}</span>;

diff --git a/...pp/species-selector/components/species-search-results-table/SpeciesSearchResultsTable.tsx b/...pp/species-selector/components/species-search-results-table/SpeciesSearchResultsTable.tsx
@@ -171,10 +171,9 @@ const SpeciesSearchResultsTable = (props: Props) => {
             <td className={styles.assemblyName}>{searchMatch.assembly.name}</td>
             <td>
               {!shouldDisableRow(searchMatch, canAddToStaged) ? (
-                <ExternalLink
-                  to={searchMatch.assembly.url}
-                  linkText={searchMatch.assembly.accession_id}
-                />
+                <ExternalLink to={searchMatch.assembly.url}>
+                  {searchMatch.assembly.accession_id}
+                </ExternalLink>
               ) : (
                 <DisabledExternalLink>
                   {searchMatch.assembly.accession_id}

diff --git a/src/content/app/species/components/species-page-sidebar/SpeciesPageSidebar.tsx b/src/content/app/species/components/species-page-sidebar/SpeciesPageSidebar.tsx
@@ -54,11 +54,9 @@ const SpeciesPageSidebar = (props: Props) => {
         <div className={styles.fieldsGroup}>
           <div className={styles.assemblyName}>{data.assembly.name}</div>
           <div className={styles.assemblySource}>
-            <ExternalReference
-              label="INSDC"
-              linkText={data.assembly.accession_id}
-              to={data.assembly.url}
-            />
+            <ExternalReference label="INSDC" to={data.assembly.url}>
+              {data.assembly.accession_id}
+            </ExternalReference>
           </div>
         </div>