Replace protein description placeholder with uniprot protein description (#368)

src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.tsx

@@ -125,6 +125,13 @@ const QUERY = gql`
           product {
             stable_id
             unversioned_stable_id
+            external_references {
+              accession_id
+              description
+              source {
+                id
+              }
+            }
           }
         }
       }

src/ensembl/src/content/app/entity-viewer/gene-view/components/proteins-list/proteins-list-item-info/ProteinsListItemInfo.tsx

@@ -71,10 +71,7 @@ const ProteinsListItemInfo = (props: Props) => {
 
     Promise.all([
       fetchProteinDomains(proteinId, abortController.signal),
-      fetchProteinSummary(
-        transcript.unversioned_stable_id,
-        abortController.signal
-      )
+      fetchProteinSummary(proteinId, abortController.signal)
     ]).then(([proteinDomains, proteinSummaryData]) => {
       if (!abortController.signal.aborted) {
         setTranscriptWithProteinDomains(

src/ensembl/src/content/app/entity-viewer/gene-view/components/proteins-list/proteins-list-item/ProteinsListItem.tsx

@@ -31,6 +31,8 @@ import { Transcript } from 'src/content/app/entity-viewer/types/transcript';
 import transcriptsListStyles from 'src/content/app/entity-viewer/gene-view/components/default-transcripts-list/DefaultTranscriptsList.scss';
 import styles from './ProteinsListItem.scss';
 
+const UNIPROT_SOURCE = 'Uniprot';
+
 type Props = {
   transcript: Transcript;
   trackLength: number;
@@ -48,13 +50,20 @@ const ProteinsListItem = (props: Props) => {
 
   const midStyles = classNames(transcriptsListStyles.middle, styles.middle);
 
+  const getProteinDescription = () => {
+    const uniprotReference = product.external_references.find((reference) =>
+      reference.source.id.includes(UNIPROT_SOURCE)
+    );
+    return uniprotReference?.description;
+  };
+
   return (
     <>
       <div className={transcriptsListStyles.row}>
         <div className={transcriptsListStyles.left}></div>
         <div onClick={toggleListItemInfo} className={midStyles}>
           <div>{getProductAminoAcidLength(transcript)} aa</div>
-          <div>Protein description from UniProt</div>
+          <div>{getProteinDescription()}</div>
           <div>{product?.stable_id}</div>
         </div>
         <div

src/ensembl/src/content/app/entity-viewer/shared/rest/rest-data-fetchers/proteinData.ts

@@ -18,8 +18,6 @@ import apiService from 'src/services/api-service';
 
 import { restProteinSummaryAdaptor } from '../rest-adaptors/rest-protein-adaptor';
 
-import { TranscriptInResponse } from './transcriptData';
-
 export type Xref = {
   display_id: string;
 };
@@ -33,6 +31,14 @@ export type ProteinStatsInResponse = {
   annotations: number;
 };
 
+export type ProteinAcessionInResponse = {
+  protein: {
+    recommendedName: {
+      fullName: string;
+    };
+  };
+};
+
 export type UniProtSummaryStats = {
   [key: string]: ProteinStatsInResponse;
 };
@@ -50,24 +56,10 @@ export type ProteinSummary = {
 };
 
 export const fetchProteinSummary = async (
-  transcriptId: string,
+  proteinId: string,
   signal?: AbortSignal
 ): Promise<ProteinSummary | null> => {
-  const transcriptUrl = `https://rest.ensembl.org/lookup/id/${transcriptId}?expand=1;content-type=application/json`;
-
-  // if the fetch is aborted, apiService.fetch will return undefined
-  const transcript: TranscriptInResponse | undefined = await apiService.fetch(
-    transcriptUrl,
-    {
-      signal
-    }
-  );
-
-  if (!transcript) {
-    return null;
-  }
-
-  const xrefsUrl = `https://rest.ensembl.org/xrefs/id/${transcript.Translation?.id}?content-type=application/json;external_db=Uniprot/SWISSPROT`;
+  const xrefsUrl = `https://rest.ensembl.org/xrefs/id/${proteinId}?content-type=application/json;external_db=Uniprot/SWISSPROT`;
   const xrefsData: XrefsInResponse | undefined = await apiService.fetch(
     xrefsUrl,
     {
@@ -81,8 +73,8 @@ export const fetchProteinSummary = async (
 
   if (xrefsData[0]) {
     const pdbeId = xrefsData[0].display_id;
-
     const proteinStatsUrl = `https://www.ebi.ac.uk/pdbe/graph-api/uniprot/summary_stats/${pdbeId}`;
+
     const proteinStatsData:
       | UniProtSummaryStats
       | undefined = await apiService.fetch(proteinStatsUrl, {

src/ensembl/src/content/app/entity-viewer/types/externalReference.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 { Source } from './source';
+
+export type ExternalReference = {
+  accession_id: string;
+  description: string;
+  source: Source;
+};

src/ensembl/src/content/app/entity-viewer/types/product.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { ExternalReference } from './externalReference';
 import { LocationWithinRegion } from './location';
 
 export type ProteinDomainsResources = {
@@ -51,6 +52,7 @@ export type Product = {
   so_term: string;
   length: number;
   protein_domains: ProteinDomain[];
+  external_references: ExternalReference[];
 };
 
 export type ProteinDomain = {