diff --git a/screen2.0/src/app/search/ccredetails/ccredetails.tsx b/screen2.0/src/app/search/ccredetails/ccredetails.tsx index 1dacf0ea..50984b5a 100644 --- a/screen2.0/src/app/search/ccredetails/ccredetails.tsx +++ b/screen2.0/src/app/search/ccredetails/ccredetails.tsx @@ -9,6 +9,7 @@ import { NearByGenomicFeatures } from "./nearbygenomicfeatures" import { LinkedGenes } from "./linkedgenes" import { Ortholog } from "./linkedccres" import { TfIntersection } from "./tfintersection" +import {FunctionData} from "./functionaldata" import Rampage from "./rampage" import MenuIcon from "@mui/icons-material/Menu" @@ -90,6 +91,7 @@ export const CcreDetails: React.FC = ({ accession, region, glo + @@ -161,8 +163,9 @@ export const CcreDetails: React.FC = ({ accession, region, glo /> )} {value === 5 && } - {value === 6 && } + {value === 6 && } {value === 7 && } + {value === 8 && } diff --git a/screen2.0/src/app/search/ccredetails/functionaldata.tsx b/screen2.0/src/app/search/ccredetails/functionaldata.tsx new file mode 100644 index 00000000..673af1c3 --- /dev/null +++ b/screen2.0/src/app/search/ccredetails/functionaldata.tsx @@ -0,0 +1,64 @@ +"use client" +import React from "react" +import { client } from "./client" +import { useQuery } from "@apollo/client" +import { FUNCTIONAL_DATA_QUERY } from "./queries" +import Grid2 from "@mui/material/Unstable_Grid2/Grid2" +import { DataTable } from "@weng-lab/psychscreen-ui-components" +import { LoadingMessage, ErrorMessage } from "../../../common/lib/utility" + +export const FunctionData = ({ coordinates , assembly }) => { + const { loading, error, data } = useQuery(FUNCTIONAL_DATA_QUERY, { + variables: { + assembly: assembly === "GRCh38" ? "grch38" : "mm10", + coordinates, + }, + fetchPolicy: "cache-and-network", + nextFetchPolicy: "cache-first", + client, + }) + + + return loading ? ( + + ) : error ? ( + + ) : ( + + + row.chromosome, + }, + { + header: "Start", + value: (row) => row.start, + }, + { + header: "Stop", + value: (row) => row.stop, + }, + { + header: "Element Id", + value: (row) => row.element_id, + }, + { + header: "Assay Result", + value: (row) => row.assay_result, + }, + { + header: "Tissues [number of embryos positive/number of embryos negative]", + value: (row) => row.tissues, + } + ]} + rows={data.functionalCharacterizationQuery || []} + sortColumn={3} + itemsPerPage={5} + /> + + + ) +} diff --git a/screen2.0/src/app/search/ccredetails/queries.ts b/screen2.0/src/app/search/ccredetails/queries.ts index f3498f54..cd8b6076 100644 --- a/screen2.0/src/app/search/ccredetails/queries.ts +++ b/screen2.0/src/app/search/ccredetails/queries.ts @@ -41,6 +41,19 @@ export const LINKED_GENES = gql` } ` +export const FUNCTIONAL_DATA_QUERY= gql` +query ($coordinates: [GenomicRangeInput!],$assembly: String!) { + functionalCharacterizationQuery(assembly: $assembly, coordinates: $coordinates) { + tissues + element_id + assay_result + chromosome + stop + start + } +} + +` export const GENE_NAME = gql` query ($assembly: String!, $name_prefix: [String!]) { gene(assembly: $assembly, name_prefix: $name_prefix) { diff --git a/screen2.0/src/app/search/ccredetails/rampage.tsx b/screen2.0/src/app/search/ccredetails/rampage.tsx index b55710ff..fa9c246e 100644 --- a/screen2.0/src/app/search/ccredetails/rampage.tsx +++ b/screen2.0/src/app/search/ccredetails/rampage.tsx @@ -17,7 +17,7 @@ import { Tooltip, Typography, } from "@mui/material" - +import Config from "../../../config.json" import { Range2D } from "jubilant-carnival" import { PlotActivityProfiles } from "./utils" import Image from "next/image" @@ -27,113 +27,127 @@ import { RampageToolTipInfo } from "./const" import { gql, useQuery } from "@apollo/client" import { client } from "./client" -const RAMPAGE_QUERY = gql` - query rampageQuery($transcript_ids: [String!]) { - rampageQuery(transcript_ids: $transcript_ids) { - value - type - geneId - transcriptId - biosampleType - name - lifeStage - expAccession - fileAccession +const GENE_QUERY = gql`query ($assembly: String!, $name_prefix: [String!], $limit: Int) { + gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit) { + name + id + coordinates { start - organ - strand - tissue + chromosome + end } } +} ` +const TSS_RAMPAGE_QUERY = ` + query tssRampage($gene: String!) { + tssrampageQuery(genename: $gene) { + start + geneName + organ + locusType + strand + peakId + biosampleName + biosampleType + biosampleSummary + col1 + col2 + expAccession + value + start + end + chrom + } +} ` - -export default function Rampage(props: { accession: string; assembly: string; chromosome: string }) { - const [loading, setLoading] = useState(true) - const [error, setError] = useState(false) - const [data, setData] = useState() - const [transcript, setTranscript] = useState("") - const [transcripts, setTranscripts] = useState([""]) - - const [payload, setPayload] = useState<{ accession: string; assembly: string; chromosome: string }>({ - accession: props.accession, - assembly: props.assembly, - chromosome: props.chromosome, - }) - - const [range, setRange] = useState({ - x: { start: 0, end: 4 }, - y: { start: 0, end: 0 }, - }) - - const [dimensions, setDimensions] = useState({ - x: { start: 125, end: 650 }, - y: { start: 4900, end: 100 }, - }) - +export type RampagePeak ={ + value: number, + peakId: string, + biosampleType: string, + name: string, + locusType: string, + expAccession: string, + start: string, + end: string, + chrom: string, + col1: string, + col2: string, + organ: string, + strand: string, + tissue: string +} +export default function Rampage(props: { gene: string; }) { + const [loading, setLoading] = useState(true) + const [data, setData] = useState([]) + const [peak, setPeak] = useState("") + const [peaks, setPeaks] = useState([""]) // fetch rampage data useEffect(() => { - fetch("https://screen-beta-api.wenglab.org/dataws/re_detail/rampage", { - headers: { - Accept: "application/json", - "Content-Type": "application/json", - }, - method: "POST", - body: JSON.stringify({ - accession: payload.accession, - assembly: payload.assembly, - chromosome: payload.chromosome, - }), - }) - .then((response) => { - if (!response.ok) { - setError(true) - return - } - return response.json() - }) - .then((data) => { - setData(data) - setTranscript(data[payload.accession]["sortedTranscripts"][0]) - setTranscripts(data[payload.accession]["sortedTranscripts"]) - setLoading(false) + + fetch( Config.API.CcreAPI, { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ query: TSS_RAMPAGE_QUERY, variables: { + gene: props.gene + } }), }) - .catch((error: Error) => { - return - }) - setLoading(true) - }, [payload]) + .then((x) => x.json()) + .then((x) => { + if(x.data && x.data.tssrampageQuery.length>0) + { + const peaks = x.data.tssrampageQuery.map(t=>t.peakId) + const uniquePeaks: string[] = [...new Set(peaks as string[])]; + const d = x.data.tssrampageQuery.map(t=>{ + return { + value: t.value, + peakId: t.peakId, + biosampleType: t.biosampleType, + name: t.biosampleName, + locusType: t.locusType, + expAccession: t.expAccession, + start: t.start, + end: t.end, + chrom: t.chrom, + col1: t.col1, + col2: t.col2, + organ: t.organ, + strand: t.strand, + tissue: t.organ + } + }) + setPeak(uniquePeaks[0]) + setPeaks(uniquePeaks) + setData(d) + setLoading(false) + } else if(x.data && x.data.tssrampageQuery.length==0){ + setLoading(false) + } + }) + }, [props.gene]) + + const { - loading: loading_rampage, - error: error_rampage, - data: data_rampage, - } = useQuery(RAMPAGE_QUERY, { + data: data_gene, + } = useQuery(GENE_QUERY, { variables: { - transcript_ids: transcripts, + assembly: "grch38", + name_prefix: [props.gene] }, fetchPolicy: "cache-and-network", nextFetchPolicy: "cache-first", client, }) - - function transcriptItems(transcripts: string[]) { - return Object.values(transcripts).map((t: string) => { - return ( - - {t} - - ) - }) - } - - return error || error_rampage ? ( - - ) : loading || loading_rampage ? ( + const peakDetails = data && data?.find(d=>d.peakId===peak) + + return loading ? ( - ) : ( - data && - data[payload.accession] && - data_rampage && ( + ) : data && data.length==0 ? (<>'No data available'): ( + + data && data.length>0 && ( @@ -150,41 +164,39 @@ export default function Rampage(props: { accession: string; assembly: string; ch - {data[payload.accession]["gene"]["name"]} - - {data[payload.accession]["gene"]["ensemblid_ver"] + - " (" + - parseInt(data[payload.accession]["gene"]["distance"]).toLocaleString("en-US") + - " bases from cCRE)"} - + {props.gene} + { + {data_gene && data_gene.gene[0].id+" ("+peakDetails.locusType+")"} + } - {"Transcript: "}{" "} + {"Peaks: "}{" "} - + - {payload.chromosome + - ":" + - parseInt(data[payload.accession]["gene"]["start"]).toLocaleString("en-US") + - "-" + - parseInt(data[payload.accession]["gene"]["stop"]).toLocaleString("en-US") + - " unprocessed pseudogene"} + { peakDetails.chrom+":"+peakDetails.start.toLocaleString()+"-"+peakDetails.end.toLocaleString()+" ("+peakDetails.col1+" "+peakDetails.col2+")"} @@ -196,7 +208,7 @@ export default function Rampage(props: { accession: string; assembly: string; ch