added sequence track

weng-lab · Oct 31, 2023 · 01ea6cd · 01ea6cd
1 parent 54d84d7
commit 01ea6cd
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 12 deletions.
diff --git a/screen2.0/package.json b/screen2.0/package.json
@@ -67,7 +67,9 @@
     "typescript": "5.2.2",
     "umms-gb": "^3.10.0",
     "uuid": "^9.0.0",
-    "logots-react": "latest"
+    "logots-react": "latest",
+    "semantic-ui-react": "latest",
+    "umap-js": "1.3.3"
   },
   "devDependencies": {
     "file-loader": "^6.2.0",

diff --git a/screen2.0/src/app/search/ccredetails/ccredetails.tsx b/screen2.0/src/app/search/ccredetails/ccredetails.tsx
@@ -57,7 +57,7 @@ export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, glo
       {page === 4 && <Ortholog accession={accession} assembly={assembly} />}      
       {page === 5 && <GeneExpression assembly={assembly} genes={genes} />}
       {page === 6 && <FunctionData accession={accession} coordinates={{ chromosome: region.chrom, start: +region.start.toString().replace(/\D/g, ""), end: +region.end.toString().replace(/\D/g, "") }} assembly={assembly} />}
-      {assembly!=="mm10" && page === 7 && <TfSequenceFeatures assembly={assembly} coordinates = {{ chromosome: region.chrom, start: +(region.start.replace(/\D/g, "")), end: +(region.end.replace(/\D/g, "")) }} />}
+      { page === 7 && <TfSequenceFeatures assembly={assembly} coordinates = {{ chromosome: region.chrom, start: +(region.start.replace(/\D/g, "")), end: +(region.end.replace(/\D/g, "")) }} />}
       {assembly!=="mm10" && page === 8 && <Rampage gene={genes.distancePC[0].name} />}
     </>
   )

diff --git a/screen2.0/src/app/search/ccresearch.tsx b/screen2.0/src/app/search/ccresearch.tsx
@@ -309,7 +309,7 @@ export const CcreSearch = (props: { mainQueryParams: MainQueryParams, globals })
 
             <StyledTab label="Associated Gene Expression" sx={{ alignSelf: "start" }} />
             <StyledTab label="Functional Data" sx={{ alignSelf: "start" }} />
-            {props.mainQueryParams.assembly!=="mm10" && <StyledTab label="TF Motifs" sx={{ alignSelf: "start" }} />}
+            <StyledTab label="TF Motifs and Sequence Features" sx={{ alignSelf: "start" }} />
             {props.mainQueryParams.assembly!=="mm10" && <StyledTab label="Associated RAMPAGE Signal" sx={{ alignSelf: "start" }} />}
           </Tabs>
         }

diff --git a/screen2.0/src/app/search/gbview/tfmotiftrack.tsx b/screen2.0/src/app/search/gbview/tfmotiftrack.tsx
@@ -67,7 +67,7 @@ export const TfMotifTrack = (props) => {
         transform="translate(20,0)"
         onClick={props.onSettingsClick}
       />
-      <text transform={`rotate(270) translate(-${height / 2 + 20},12)`} fill="#194023">
+      <text transform={`rotate(270) translate(-${height / 2 + 40},12)`} fill="#194023">
         TF Binding sites
       </text>
     </g>

diff --git a/screen2.0/src/app/search/gbview/tfsequencefeatures.tsx b/screen2.0/src/app/search/gbview/tfsequencefeatures.tsx
@@ -9,7 +9,10 @@ import EGeneTracks from "./egenetracks"
 import { client } from "../ccredetails/client"
 import { TfMotifTrack } from "./tfmotiftrack"
 import { DenseBigBed, EmptyTrack, FullBigWig } from "umms-gb"
-
+import { GraphQLImportanceTrack } from "bpnet-ui"
+import { BigQueryResponse } from "./types"
+import { BIG_QUERY } from "./queries"
+import { BigWigData } from "bigwig-reader"
 type TfSequenceFeaturesProps = {
   coordinates: {
     start: number
@@ -76,6 +79,7 @@ export const TfSequenceFeatures: React.FC<TfSequenceFeaturesProps> = (props) =>
   const svgRef = useRef<SVGSVGElement>(null)
   const expandedCoordinates = useMemo(() => expandCoordinates(props.coordinates), [props.coordinates])
   const [coordinates, setCoordinates] = useState<GenomicRange>(expandedCoordinates)
+  const [settingsMousedOver, setSettingsMousedOver] = useState(false)
   useEffect(() => {
     fetch("https://ga.staging.wenglab.org/graphql", {
       method: "POST",
@@ -104,14 +108,25 @@ export const TfSequenceFeatures: React.FC<TfSequenceFeaturesProps> = (props) =>
         setLoading(false)
       })
   }, [coordinates])
-  console.log(data,'data')
+  const url = props.assembly==="GRCh38" ?"gs://gcp.wenglab.org/241-mammalian-2020v2.bigWig" : "gs://gcp.wenglab.org/mm10.phylop.bigWig"
+  const { data: sequenceData, loading: sequenceLoading } = useQuery<BigQueryResponse>(BIG_QUERY, {
+    variables: { bigRequests: [{
+      url,
+      chr1: coordinates.chromosome,
+      start: coordinates.start,
+      chr2: coordinates.chromosome,
+      end: coordinates.end
+    }] },
+    client,
+ })
+ //sequenceData?.bigRequests array
   const snpResponse = useQuery<SNPQueryResponse>(GENE_QUERY, {
     variables: { ...coordinates, assembly: props.assembly },
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",
     client,
   })
-
+  
   const groupedTranscripts = useMemo(
     () =>
       snpResponse.data?.gene.map((x) => ({
@@ -169,6 +184,46 @@ export const TfSequenceFeatures: React.FC<TfSequenceFeaturesProps> = (props) =>
               squish={true}
             />
             {!loading && data && props.assembly!=="mm10" && <TfMotifTrack width={1400} data={data} svgRef={svgRef} coordinates={coordinates}/>}
+            <g>
+            <EmptyTrack height={40} width={1400} text={`Sequence Importance (${url})`} transform="" id="" />
+            {coordinates.end - coordinates.start < 5000  ? <g transform="translate(0,30)"><GraphQLImportanceTrack
+          width={1400}
+          height={140}
+
+          endpoint="https://ga.staging.wenglab.org"
+          signalURL={url}
+          sequenceURL={props.assembly==="GRCh38" ?"gs://gcp.wenglab.org/hg38.2bit" :"gs://gcp.wenglab.org/mm10.2bit"}
+          coordinates={{ chromosome: coordinates.chromosome!, start: coordinates.start, end: coordinates.end }}
+          key={`${coordinates.chromosome}:${coordinates.start}-${coordinates.end}-${url}`}
+        /></g>:   
+        <FullBigWig
+        width={1400}
+        height={140}
+        domain={coordinates}
+        id={url}
+        transform="translate(0,40)"        
+        data={sequenceData?.bigRequests[0].data as BigWigData[]}
+        noTransparency
+      />}
+      {settingsMousedOver && (
+        <rect width={ 1400} height={150} transform="translate(0,0)" fill="#0000ff" fillOpacity={0.1} />
+      )}
+        <rect transform="translate(0,0)" height={150} width={40} fill="#ffffff" />
+        <rect
+        height={150}
+        width={15}
+        fill="#0000ff"
+        stroke="#000000"        
+        fillOpacity={settingsMousedOver ? 1 : 0.6}
+        onMouseOver={() => setSettingsMousedOver(true)}
+        onMouseOut={() => setSettingsMousedOver(false)}
+        strokeWidth={1}
+        transform="translate(20,0)"
+      />
+      <text transform={`rotate(270) translate(-${100 / 2 + 60},12)`} fill="#0000ff">
+        Sequence
+      </text>
+      </g>
 
           </GenomeBrowser>
         </Grid2>