Genome browser zmenu should use thoas instead of REST (#555)

src/ensembl/src/content/app/browser/zmenu/Zmenu.tsx

@@ -44,7 +44,6 @@ export type ZmenuProps = ZmenuData & {
 
 const Zmenu = (props: ZmenuProps) => {
   const anchorRef = useRefWithRerender<HTMLDivElement>(null);
-
   const onOutsideClick = () =>
     browserMessagingService.send('bpane', {
       id: props.id,

src/ensembl/src/content/app/browser/zmenu/ZmenuInstantDownload.tsx

@@ -15,14 +15,15 @@
  */
 
 import React from 'react';
+import { gql, useQuery } from '@apollo/client';
+import { Pick2 } from 'ts-multipick';
 
-import useApiService from 'src/shared/hooks/useApiService';
+import { parseFeatureId } from '../browserHelper';
 
 import { InstantDownloadTranscript } from 'src/shared/components/instant-download';
 import { CircleLoader } from 'src/shared/components/loader/Loader';
-import { TranscriptInResponse } from 'src/content/app/entity-viewer/shared/rest/rest-data-fetchers/transcriptData';
 
-import { LoadingState } from 'src/shared/types/loading-state';
+import { FullTranscript } from 'src/shared/types/thoas/transcript';
 
 import styles from './Zmenu.scss';
 
@@ -30,20 +31,37 @@ type Props = {
   id: string;
 };
 
+const TRANSCRIPT_QUERY = gql`
+  query Transcript($genomeId: String!, $transcriptId: String!) {
+    transcript(byId: { genome_id: $genomeId, stable_id: $transcriptId }) {
+      metadata {
+        biotype {
+          value
+        }
+      }
+      gene {
+        stable_id
+      }
+    }
+  }
+`;
+
+type Transcript = Pick2<FullTranscript, 'metadata', 'biotype'> &
+  Pick2<FullTranscript, 'gene', 'stable_id'>;
+
 const ZmenuInstantDownload = (props: Props) => {
-  const genomeId = getGenomeId(props.id);
-  const transcriptId = getStableId(props.id);
-  const params = {
-    endpoint: `/lookup/id/${transcriptId}?content-type=application/json;expand=1`,
-    host: 'https://rest.ensembl.org'
-  };
-  const { loadingState, data, error } =
-    useApiService<TranscriptInResponse>(params);
+  const { genomeId, objectId: transcriptId } = parseFeatureId(props.id);
+
+  const { data, loading } = useQuery<{
+    transcript: Transcript;
+  }>(TRANSCRIPT_QUERY, {
+    variables: {
+      genomeId,
+      transcriptId
+    }
+  });
 
-  if (
-    loadingState === LoadingState.NOT_REQUESTED ||
-    loadingState === LoadingState.LOADING
-  ) {
+  if (loading) {
     return (
       <div className={styles.zmenuInstantDowloadLoading}>
         <CircleLoader />
@@ -51,38 +69,27 @@ const ZmenuInstantDownload = (props: Props) => {
     );
   }
 
-  if (error) {
-    // TODO: decide how we handle errors in this case
+  if (!data) {
     return null;
   }
 
-  return (
-    <InstantDownloadTranscript
-      genomeId={genomeId}
-      {...preparePayload(data as TranscriptInResponse)}
-      layout="vertical"
-    />
-  );
-};
-
-// TODO: we may want to move this to a common helper file that deals with messaging with Genome Browser
-const getGenomeId = (id: string) => id.split(':').shift();
-const getStableId = (id: string) => id.split(':').pop();
-
-const preparePayload = (transcript: TranscriptInResponse) => {
-  const geneId = transcript.Parent;
-  const transcriptId = transcript.id;
-  const biotype = transcript.biotype;
-
-  return {
+  const payload = {
     transcript: {
       id: transcriptId,
-      biotype
+      biotype: data.transcript.metadata.biotype.value
     },
     gene: {
-      id: geneId
+      id: data.transcript.gene.stable_id
     }
   };
+
+  return (
+    <InstantDownloadTranscript
+      genomeId={genomeId}
+      {...payload}
+      layout="vertical"
+    />
+  );
 };
 
 export default ZmenuInstantDownload;

src/ensembl/src/shared/components/instant-download/instant-download-transcript/InstantDownloadTranscript.tsx

@@ -199,6 +199,7 @@ const TranscriptSection = (props: TranscriptSectionProps) => {
     transcriptOptionsOrder,
     Object.keys(options)
   );
+
   const checkboxes = orderedOptionKeys.map((key) => (
     <Checkbox
       key={key}

src/ensembl/src/shared/types/thoas/transcript.ts

@@ -20,6 +20,7 @@ import { FullProductGeneratingContext } from './productGeneratingContext';
 import { LocationWithinRegion } from './location';
 import { ExternalReference } from './externalReference';
 import { TranscriptMetadata } from './metadata';
+import { FullGene } from './gene';
 
 export type FullTranscript = {
   type: 'Transcript';
@@ -33,4 +34,5 @@ export type FullTranscript = {
   product_generating_contexts: FullProductGeneratingContext[];
   external_references: ExternalReference[];
   metadata: TranscriptMetadata;
+  gene: FullGene;
 };

src/ensembl/tests/fixtures/entity-viewer/gene.ts

@@ -19,14 +19,20 @@ import times from 'lodash/times';
 import { scaleLinear } from 'd3';
 
 import { createSlice } from './slice';
-import { createTranscript } from './transcript';
+import { createTranscript, ProteinCodingTranscript } from './transcript';
 
 import { FullGene } from 'src/shared/types/thoas/gene';
 import { TicksAndScale } from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler';
 
-export const createGene = (fragment: Partial<FullGene> = {}): FullGene => {
+type GeneFixture = Omit<FullGene, 'transcripts'> & {
+  transcripts: ProteinCodingTranscript[];
+};
+
+export const createGene = (
+  fragment: Partial<GeneFixture> = {}
+): GeneFixture => {
   const geneSlice = createSlice();
-  const transcript = createTranscript();
+  const transcripts = fragment.transcripts || [createTranscript()];
 
   const unversionedStableId = faker.datatype.uuid();
   const version = 1;
@@ -40,7 +46,7 @@ export const createGene = (fragment: Partial<FullGene> = {}): FullGene => {
     symbol: faker.lorem.word(),
     name: faker.lorem.words(),
     slice: geneSlice,
-    transcripts: [transcript],
+    transcripts,
     alternative_symbols: [],
     external_references: [],
     metadata: {

src/ensembl/tests/fixtures/entity-viewer/transcript.ts

@@ -37,8 +37,8 @@ type ProteinCodingProductGeneratingContext = Omit<
   'cds'
 > & { cds: FullCDS };
 
-type ProteinCodingTranscript = Omit<
-  FullTranscript,
+export type ProteinCodingTranscript = Omit<
+  Omit<FullTranscript, 'gene'>,
   'product_generating_contexts'
 > & {
   product_generating_contexts: ProteinCodingProductGeneratingContext[];