Skip to content

Commit f3e7b54

Browse files
hpratthpratt
committed
update motif view
1 parent 4deb10e commit f3e7b54

2 files changed

Lines changed: 61 additions & 14 deletions

File tree

‎website/ui/src/apps/search/config/details.js‎

Lines changed: 60 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
77

8+
import { MOTIFS } from '../../../common/all-motifs';
89
import { ENTEX } from './entex';
910
import Ztable from '../../../common/components/ztable/ztable';
1011
import * as ApiClient from '../../../common/api_client';
@@ -25,7 +26,7 @@ import loading from '../../../common/components/loading';
2526

2627
import * as Render from '../../../common/zrenders';
2728
import { GraphQLImportanceTrack } from 'bpnet-ui';
28-
import { WrappedRulerTrack, DenseBigBed, EmptyTrack, WrappedTrack, GraphQLTranscriptTrack, GraphQLTrackSet, StackedTracks, WrappedSquishTranscriptTrack, RulerTrack, SquishTranscriptTrack, WrappedFullBigWig, WrappedDenseBigBed, UCSCControls, GenomeBrowser, PackTranscriptTrack } from 'umms-gb';
29+
import { WrappedRulerTrack, DenseBigBed, EmptyTrack, WrappedTrack, GraphQLTranscriptTrack, GraphQLTrackSet, StackedTracks, WrappedSquishTranscriptTrack, RulerTrack, SquishTranscriptTrack, WrappedFullBigWig, WrappedDenseBigBed, UCSCControls, GenomeBrowser, PackTranscriptTrack, SquishBigBed } from 'umms-gb';
2930
import { Loader, Menu, Checkbox, Modal, Button, Icon, Message, Header } from 'semantic-ui-react';
3031
import { associateBy, groupBy } from "queryz";
3132
import { linearTransform } from 'jubilant-carnival';
@@ -34,6 +35,7 @@ import { ApolloClient, ApolloProvider, gql, InMemoryCache, useQuery } from '@apo
3435
import { capRange, expandCoordinates, QUERY } from '../components/results_table_container';
3536
import CytobandView from '../components/Cytobands';
3637
import { ENTEXTracks, etracks } from '../components/DefaultTracks';
38+
import { DNALogo } from 'logots-react';
3739

3840
const DATASETS = {
3941
"Kevin White": [{"biosample_summary": "HCT116 genetically modified using transient transfection", "accession": "ENCSR064KUD", "replicates": 2}, {"biosample_summary": "K562 genetically modified using transient transfection", "accession": "ENCSR858MPS", "replicates": 2}, {"biosample_summary": "DNA cloning sample", "accession": "ENCSR316NSE", "replicates": 1}, {"biosample_summary": "MCF-7 genetically modified using transient transfection", "accession": "ENCSR547SBZ", "replicates": 2}, {"biosample_summary": "A549 genetically modified using transient transfection", "accession": "ENCSR895FDL", "replicates": 2}, {"biosample_summary": "DNA cloning sample", "accession": "ENCSR002ZDU", "replicates": 1}, {"biosample_summary": "SH-SY5Y genetically modified using transient transfection", "accession": "ENCSR983SZZ", "replicates": 2}, {"biosample_summary": "HepG2 genetically modified using transient transfection", "accession": "ENCSR135NXN", "replicates": 2}, {"biosample_summary": "DNA cloning sample", "accession": "ENCSR024WBS", "replicates": 1}],
@@ -351,14 +353,14 @@ class ReTabBase extends React.Component{
351353
}
352354
}
353355

354-
loadCRE = ({assembly, cre_accession_detail}) => {
356+
loadCRE = ({assembly, cre_accession_detail, active_cre}) => {
355357
if(!this.loadData){
356358
return;
357359
}
358360
if(!cre_accession_detail || cre_accession_detail in this.state){
359361
return;
360362
}
361-
var q = {assembly, "accession" : cre_accession_detail};
363+
var q = {assembly, "accession" : cre_accession_detail, "chromosome": active_cre.chrom };
362364
var jq = JSON.stringify(q);
363365
if(this.state.jq === jq){
364366
// http://www.mattzeunert.com/2016/01/28/javascript-deep-equal.html
@@ -530,6 +532,19 @@ const ENTEX_COLUMNS = [{
530532
render: x => x.allele_specific ? "yes" : "no"
531533
}];
532534

535+
const MotifTooltip = props => {
536+
const rc = x => [ ...x ].map(xx => [ ...xx ].reverse()).reverse();
537+
return (
538+
<div style={{ border: "1px solid", borderColor: "#000000", backgroundColor: "#ffffff", padding: "5px" }}>
539+
<Header as="h2">{props.rectname.split("$")[2]}</Header>
540+
<DNALogo
541+
ppm={props.rectname.split("$")[1] === '-' ? rc(MOTIFS[props.rectname.split("$")[2]]) : MOTIFS[props.rectname.split("$")[2]]}
542+
width={MOTIFS[props.rectname.split("$")[2]].length * 10}
543+
/>
544+
</div>
545+
);
546+
}
547+
533548
const EBrowser = props => {
534549
const [ highlight, setHighlight ] = useState(null);
535550
const expandedCoordinates = useMemo( () => expandCoordinates(props.coordinates), [ props.coordinates ]);
@@ -926,6 +941,8 @@ query q($requests: [BigRequest!]!) {
926941
const TFMotifTab = props => {
927942
const [ data, setData ] = useState([]);
928943
const [ loading, setLoading ] = useState(true);
944+
const [ mousedOver, setMousedOver ] = useState(null);
945+
const svgRef = useRef(null);
929946
useEffect( () => {
930947
fetch("https://ga.staging.wenglab.org/graphql", {
931948
method: "POST",
@@ -934,46 +951,65 @@ const TFMotifTab = props => {
934951
'Accept': 'application/json',
935952
},
936953
body: JSON.stringify({ "query": DATA_QUERY, variables: { requests: [{
937-
url: "gs://gcp.wenglab.org/all-conserved-motifs.merged.bigBed",
954+
url: "gs://gcp.wenglab.org/SCREEN/all-sites.sorted.formatted.bigBed",
938955
chr1: props.active_cre.chrom,
939956
start: props.active_cre.start,
940957
chr2: props.active_cre.chrom,
941958
end: props.active_cre.start + props.active_cre.len
942959
}]} })
943960
}).then(x => x.json()).then(x => {
944-
setData(x.data.bigRequests[0].data);
961+
setData(x.data.bigRequests[0].data.filter(x => x.name.split("$")[3] === 'True'));
945962
setLoading(false);
946963
});
947964
}, []);
948965
return loading ? <Loader active>Loading...</Loader> : (
949-
<svg width="100%" viewBox="0 0 1000 600">
966+
<GenomeBrowser innerWidth={1000} svgRef={svgRef}>
950967
<RulerTrack
951968
width={1000}
952969
height={30}
953970
domain={{ chromosome: props.active_cre.chrom, start: props.active_cre.start, end: props.active_cre.start + props.active_cre.len }}
954971
/>
972+
<GraphQLTranscriptTrack
973+
assembly={props.assembly}
974+
endpoint="https://ga.staging.wenglab.org/graphql"
975+
id=""
976+
transform=""
977+
domain={{ chromosome: props.active_cre.chrom, start: props.active_cre.start, end: props.active_cre.start + props.active_cre.len }}
978+
>
979+
<SquishTranscriptTrack
980+
title="GENCODE genes"
981+
rowHeight={15}
982+
titleSize={10}
983+
width={1000}
984+
domain={{ chromosome: props.active_cre.chrom, start: props.active_cre.start, end: props.active_cre.start + props.active_cre.len }}
985+
id=""
986+
transform=""
987+
/>
988+
</GraphQLTranscriptTrack>
955989
<EmptyTrack
956990
width={1000}
957-
height={30}
991+
height={20}
958992
text="TF Motif Occurrences"
959-
transform="translate(0,40)"
960993
id=""
961994
/>
962-
<DenseBigBed
995+
<SquishBigBed
996+
svgRef={svgRef}
963997
domain={{ chromosome: props.active_cre.chrom, start: props.active_cre.start, end: props.active_cre.start + props.active_cre.len }}
964998
width={1000}
965-
height={20}
966-
transform="translate(0,70)"
999+
rowHeight={12}
9671000
data={data}
1001+
tooltipContent={MotifTooltip}
1002+
onMouseOver={setMousedOver}
1003+
onMouseOut={() => setMousedOver(null)}
1004+
onClick={x => window.open(`https://factorbook.org/tf/human/${x.rectname.split("$")[2]}/motif`, "_blank")}
9681005
/>
9691006
<EmptyTrack
9701007
width={1000}
9711008
height={30}
9721009
text="Sequence Scaled by PhyloP 100-way"
973-
transform="translate(0,110)"
9741010
id=""
9751011
/>
976-
<g transform="translate(0,140)">
1012+
<g>
9771013
<GraphQLImportanceTrack
9781014
width={1000}
9791015
height={100}
@@ -983,7 +1019,17 @@ const TFMotifTab = props => {
9831019
coordinates={{ chromosome: props.active_cre.chrom, start: props.active_cre.start, end: props.active_cre.start + props.active_cre.len }}
9841020
/>
9851021
</g>
986-
</svg>
1022+
{ mousedOver && (
1023+
<rect
1024+
y={0}
1025+
x={mousedOver.start}
1026+
height={500}
1027+
width={mousedOver.end - mousedOver.start}
1028+
fill="#297eb3"
1029+
fillOpacity={0.5}
1030+
/>
1031+
)}
1032+
</GenomeBrowser>
9871033
);
9881034
};
9891035

‎website/ui/src/common/all-motifs.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)