Unverified Commit afaaebb2 authored by Jyothish's avatar Jyothish Committed by GitHub
Browse files

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

parent 5bd9d046
Pipeline #193614 passed with stages
in 6 minutes and 42 seconds
...@@ -44,7 +44,6 @@ export type ZmenuProps = ZmenuData & { ...@@ -44,7 +44,6 @@ export type ZmenuProps = ZmenuData & {
const Zmenu = (props: ZmenuProps) => { const Zmenu = (props: ZmenuProps) => {
const anchorRef = useRefWithRerender<HTMLDivElement>(null); const anchorRef = useRefWithRerender<HTMLDivElement>(null);
const onOutsideClick = () => const onOutsideClick = () =>
browserMessagingService.send('bpane', { browserMessagingService.send('bpane', {
id: props.id, id: props.id,
......
...@@ -15,14 +15,15 @@ ...@@ -15,14 +15,15 @@
*/ */
import React from 'react'; 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 { InstantDownloadTranscript } from 'src/shared/components/instant-download';
import { CircleLoader } from 'src/shared/components/loader/Loader'; 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'; import styles from './Zmenu.scss';
...@@ -30,20 +31,37 @@ type Props = { ...@@ -30,20 +31,37 @@ type Props = {
id: string; 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 ZmenuInstantDownload = (props: Props) => {
const genomeId = getGenomeId(props.id); const { genomeId, objectId: transcriptId } = parseFeatureId(props.id);
const transcriptId = getStableId(props.id);
const params = { const { data, loading } = useQuery<{
endpoint: `/lookup/id/${transcriptId}?content-type=application/json;expand=1`, transcript: Transcript;
host: 'https://rest.ensembl.org' }>(TRANSCRIPT_QUERY, {
}; variables: {
const { loadingState, data, error } = genomeId,
useApiService<TranscriptInResponse>(params); transcriptId
}
});
if ( if (loading) {
loadingState === LoadingState.NOT_REQUESTED ||
loadingState === LoadingState.LOADING
) {
return ( return (
<div className={styles.zmenuInstantDowloadLoading}> <div className={styles.zmenuInstantDowloadLoading}>
<CircleLoader /> <CircleLoader />
...@@ -51,38 +69,27 @@ const ZmenuInstantDownload = (props: Props) => { ...@@ -51,38 +69,27 @@ const ZmenuInstantDownload = (props: Props) => {
); );
} }
if (error) { if (!data) {
// TODO: decide how we handle errors in this case
return null; return null;
} }
return ( const payload = {
<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 {
transcript: { transcript: {
id: transcriptId, id: transcriptId,
biotype biotype: data.transcript.metadata.biotype.value
}, },
gene: { gene: {
id: geneId id: data.transcript.gene.stable_id
} }
}; };
return (
<InstantDownloadTranscript
genomeId={genomeId}
{...payload}
layout="vertical"
/>
);
}; };
export default ZmenuInstantDownload; export default ZmenuInstantDownload;
...@@ -199,6 +199,7 @@ const TranscriptSection = (props: TranscriptSectionProps) => { ...@@ -199,6 +199,7 @@ const TranscriptSection = (props: TranscriptSectionProps) => {
transcriptOptionsOrder, transcriptOptionsOrder,
Object.keys(options) Object.keys(options)
); );
const checkboxes = orderedOptionKeys.map((key) => ( const checkboxes = orderedOptionKeys.map((key) => (
<Checkbox <Checkbox
key={key} key={key}
......
...@@ -20,6 +20,7 @@ import { FullProductGeneratingContext } from './productGeneratingContext'; ...@@ -20,6 +20,7 @@ import { FullProductGeneratingContext } from './productGeneratingContext';
import { LocationWithinRegion } from './location'; import { LocationWithinRegion } from './location';
import { ExternalReference } from './externalReference'; import { ExternalReference } from './externalReference';
import { TranscriptMetadata } from './metadata'; import { TranscriptMetadata } from './metadata';
import { FullGene } from './gene';
export type FullTranscript = { export type FullTranscript = {
type: 'Transcript'; type: 'Transcript';
...@@ -33,4 +34,5 @@ export type FullTranscript = { ...@@ -33,4 +34,5 @@ export type FullTranscript = {
product_generating_contexts: FullProductGeneratingContext[]; product_generating_contexts: FullProductGeneratingContext[];
external_references: ExternalReference[]; external_references: ExternalReference[];
metadata: TranscriptMetadata; metadata: TranscriptMetadata;
gene: FullGene;
}; };
...@@ -19,14 +19,20 @@ import times from 'lodash/times'; ...@@ -19,14 +19,20 @@ import times from 'lodash/times';
import { scaleLinear } from 'd3'; import { scaleLinear } from 'd3';
import { createSlice } from './slice'; import { createSlice } from './slice';
import { createTranscript } from './transcript'; import { createTranscript, ProteinCodingTranscript } from './transcript';
import { FullGene } from 'src/shared/types/thoas/gene'; import { FullGene } from 'src/shared/types/thoas/gene';
import { TicksAndScale } from 'src/content/app/entity-viewer/gene-view/components/base-pairs-ruler/BasePairsRuler'; 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 geneSlice = createSlice();
const transcript = createTranscript(); const transcripts = fragment.transcripts || [createTranscript()];
const unversionedStableId = faker.datatype.uuid(); const unversionedStableId = faker.datatype.uuid();
const version = 1; const version = 1;
...@@ -40,7 +46,7 @@ export const createGene = (fragment: Partial<FullGene> = {}): FullGene => { ...@@ -40,7 +46,7 @@ export const createGene = (fragment: Partial<FullGene> = {}): FullGene => {
symbol: faker.lorem.word(), symbol: faker.lorem.word(),
name: faker.lorem.words(), name: faker.lorem.words(),
slice: geneSlice, slice: geneSlice,
transcripts: [transcript], transcripts,
alternative_symbols: [], alternative_symbols: [],
external_references: [], external_references: [],
metadata: { metadata: {
......
...@@ -37,8 +37,8 @@ type ProteinCodingProductGeneratingContext = Omit< ...@@ -37,8 +37,8 @@ type ProteinCodingProductGeneratingContext = Omit<
'cds' 'cds'
> & { cds: FullCDS }; > & { cds: FullCDS };
type ProteinCodingTranscript = Omit< export type ProteinCodingTranscript = Omit<
FullTranscript, Omit<FullTranscript, 'gene'>,
'product_generating_contexts' 'product_generating_contexts'
> & { > & {
product_generating_contexts: ProteinCodingProductGeneratingContext[]; product_generating_contexts: ProteinCodingProductGeneratingContext[];
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment