Rampagefixes

screen2.0/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@apollo/client": "alpha",
+    "bpnet-ui": "^0.2.9",
     "@apollo/experimental-nextjs-app-support": "^0.4.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -65,7 +66,8 @@
     "tailwindcss": "3.3.5",
     "typescript": "5.2.2",
     "umms-gb": "^3.10.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "logots-react": "latest"
   },
   "devDependencies": {
     "file-loader": "^6.2.0",

screen2.0/src/app/search/ccredetails/ccredetails.tsx

@@ -10,6 +10,7 @@ import { TfIntersection } from "./tfintersection"
 import { FunctionData } from "./functionaldata"
 import Rampage from "./rampage"
 import { GeneExpression } from "./gene-expression"
+import { TfSequenceFeatures} from "../gbview/tfsequencefeatures"
 
 //Passing these props through this file could be done with context to reduce prop drilling
 type CcreDetailsProps = {
@@ -22,6 +23,7 @@ type CcreDetailsProps = {
 }
 
 export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, globals, assembly, genes, page }) => {
+  console.log("region", region)
   return (
     <>
       <Stack direction="row" justifyContent={"space-between"} alignItems={"baseline"}>
@@ -52,10 +54,11 @@ export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, glo
           }}
         />
       )}
-      {page === 5 && <Ortholog accession={accession} assembly={assembly} />}
-      {page === 6 && <Rampage gene={genes.distancePC[0].name} />}
-      {page === 7 && <GeneExpression assembly={assembly} genes={genes} />}
-      {page === 8 && <FunctionData accession={accession} coordinates={{ chromosome: region.chrom, start: +region.start.toString().replace(/\D/g, ""), end: +region.end.toString().replace(/\D/g, "") }} assembly={assembly} />}
+      {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, "")) }} />}
+      {assembly!=="mm10" && page === 8 && <Rampage gene={genes.distancePC[0].name} />}
     </>
   )
 }

screen2.0/src/app/search/ccredetails/gene-expression.tsx

@@ -12,7 +12,7 @@ import { client } from "./client"
 import { HUMAN_GENE_EXP, MOUSE_GENE_EXP } from "../../applets/gene-expression/const"
 import { LinkedGenesData } from "../types"
 import { GENE_EXP_QUERY, GENE_QUERY } from "../../applets/gene-expression/queries"
-import { Download } from "@mui/icons-material"
+
 
 //Replace this when Gene Autocomplete extracted into componenet
 import GeneAutoComplete from "../../applets/gene-expression/gene-autocomplete"

screen2.0/src/app/search/ccredetails/linkedgenes.tsx

@@ -4,7 +4,6 @@ import { client } from "./client"
 import { useQuery } from "@apollo/client"
 import { LINKED_GENES, GENE_NAME } from "./queries"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
-import { CircularProgress } from "@mui/material"
 import { DataTable } from "@weng-lab/psychscreen-ui-components"
 import { LoadingMessage, createLink } from "../../../common/lib/utility"
 

screen2.0/src/app/search/ccredetails/nearbygenomicfeatures.tsx

@@ -4,7 +4,7 @@ import { client } from "./client"
 import { useQuery } from "@apollo/client"
 import { NEARBY_GENOMIC_FEATURES_QUERY, NEARBY_GENOMIC_FEATURES_NOSNPS_QUERY } from "./queries"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
-import { CircularProgress, Typography } from "@mui/material"
+import { Typography } from "@mui/material"
 import { DataTable } from "@weng-lab/psychscreen-ui-components"
 import { LoadingMessage, createLink } from "../../../common/lib/utility"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"

screen2.0/src/app/search/ccredetails/rampage.tsx

@@ -1,7 +1,7 @@
 "use client"
 import React, { useState, useEffect } from "react"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
-import { LoadingMessage, ErrorMessage } from "../../../common/lib/utility"
+import { LoadingMessage } from "../../../common/lib/utility"
 import {
   AppBar,
   Box,
@@ -18,7 +18,6 @@ import {
   Typography,
 } from "@mui/material"
 import Config from "../../../config.json"
-import { Range2D } from "jubilant-carnival"
 import { PlotActivityProfiles } from "./utils"
 import Image from "next/image"
 import { defaultTheme } from "../../../common/lib/themes"

screen2.0/src/app/search/ccredetails/tfintersection.tsx

@@ -5,7 +5,6 @@ import { client } from "./client"
 import { useQuery } from "@apollo/client"
 import { TF_INTERSECTION_QUERY, CRE_TF_DCC_QUERY } from "./queries"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
-import { CircularProgress } from "@mui/material"
 import { DataTable } from "@weng-lab/psychscreen-ui-components"
 import { LoadingMessage } from "../../../common/lib/utility"
 
@@ -116,7 +115,7 @@ export const TfIntersection: React.FC<{ assembly: string; coordinates: { chromos
                   setFactor(row.name)
                   setFactorHighlight(row)
                 }}
-                sortColumn={0}
+                sortColumn={1}
                 itemsPerPage={5}
                 highlighted={factorHighlight}
               />

screen2.0/src/app/search/ccredetails/utils.tsx

@@ -1,25 +1,20 @@
 "use client"
 import React, { useState } from "react"
-import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material"
 import {
   Box,
-  Button,
   FormControl,
-  FormControlLabel,
   InputLabel,
   MenuItem,
   Select,
-  SelectChangeEvent,
-  Switch,
-  Typography,
+  SelectChangeEvent
 } from "@mui/material"
 import { Point2D, Range2D, linearTransform2D } from "jubilant-carnival"
 import { Fragment } from "react"
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import { GeneExpEntry } from "../../applets/gene-expression/types"
 import { tissueColors } from "../../../common/lib/colors"
 import { RampagePeak } from "./rampage"
+import { Stack } from "@mui/material"
 
 export const stringToColour = (str: string) => {
   let hash = 0;
@@ -47,9 +42,6 @@ export function PlotActivityProfiles(props: {
   peakID: string
 }) {
   const [sort, setSort] = useState<string>("byValue")
-  const [zeros, setZeros] = useState<boolean>(false)
-  const [collapse, setCollapse] = useState<{ [id: string]: boolean }>({})
-
   let tissues: { [id: string]: { sum: number; values: GeneExpEntry[] } } = {} // dict of ftissues
   let byValueTissues: { [id: string]: { sum: number; values: GeneExpEntry[] } } = {} // dict of ftissues
   let byTissueMaxTissues: { [id: string]: { sum: number; values: GeneExpEntry[] } } = {} // dict of ftissues
@@ -59,7 +51,7 @@ export function PlotActivityProfiles(props: {
 
 
   Object.values(props.data).map((biosample) => {
-    if (!zeros && biosample["value"] === 0) return
+    if (biosample["value"] === 0) return
     else if (biosample["peakId"] === props.peakID) {
       if (!tissues[biosample["tissue"]]) tissues[biosample["tissue"]] = { sum: 0, values: [] }
       tissues[biosample["tissue"]].sum += biosample["value"]
@@ -91,30 +83,49 @@ export function PlotActivityProfiles(props: {
       return (
         <Fragment key={i}>
           <rect
-            x={90}
-            width={p1.x + 90}
+            x={150}
+            width={p1.x + 150}
             y={y + i * 20}
             height={18}
             fill={item.color}
             onMouseOver={() => {
               {
-                ;<rect x={90} width={p1.x + 90} y={y + i * 20} height={18} fill="white" />
+                ;<rect x={150} width={p1.x + 150} y={y + i * 20} height={18} fill="white" />
               }
             }}
           >
             <title>
-              <rect x={90} width={p1.x + 90} y={y + i * 20} height={18} fill="white" />
+              <rect x={150} width={p1.x + 150} y={y + i * 20} height={18} fill="white" />
               {item.value.toFixed(2)} {" " + item.biosample_term} 
             {" (" + item.strand + ")"}
             </title>
           </rect>
-          <text x={p1.x + 40 + 150} y={y + i * 20 + 12.5} style={{ fontSize: 12 }}>
+          <text x={p1.x + 40 + 270} y={y + i * 20 + 12.5} style={{ fontSize: 12 }}>
             {Number(item.value.toFixed(2)) + " "}
             <a href={"https://www.encodeproject.org/experiments/" + item.expID}>{item.expID}</a>
              {" " + item.biosample_term} 
             {" (" + item.strand + ")"}
           </text>
-          <line x1={90} x2={90} y1={y + i * 20} y2={y + (i * 20 + 18)} stroke="black" />
+          {(sort === 'byValue' || sort === 'byTissueMax') &&
+            <text
+              text-anchor="end"
+              x={140}
+              y={y + (i * 20 + 15)}
+            >
+              {entry[0].split("-")[0]}
+            </text>
+          }
+          {sort=== 'byTissue' && i === Math.floor(Object.values(info.values).length / 2) &&
+            <text
+              text-anchor="end"
+              x={140}
+              // If the tissue has an even number of values, bump up a little
+              y={y + (i * 20 + 15) - (((Object.values(info.values).length % 2) !== 0) ? 0 : 12)}
+            >
+              {entry[0].split("-")[0]}
+            </text>
+          }
+          <line x1={150} x2={150} y1={y + i * 20} y2={y + (i * 20 + 18)} stroke="black" />
         </Fragment>
       )
     })
@@ -169,91 +180,25 @@ const tissueValues = sort==="byValue" ? byValueTissues: sort==="byTissueMax" ? b
           </FormControl>
         </Box>
       </Grid2>
-      <Grid2 xs={3} sx={{ alignItems: "right", justifyContent: "right", display: "flex", ml: 0, mr: 0, mt: 2 }}>
-        <Button
-          onClick={() => {
-            let c: { [id: string]: boolean } = {}
-            let uncollapse: boolean = true
-            if (Object.keys(collapse).length !== 0) {
-              Object.keys(collapse).map((b: string) => {
-                if (collapse[b]) uncollapse = false
-                c[b] = false
-              })
-
-              if (uncollapse) {
-                Object.keys(collapse).map((b: string) => {
-                  c[b] = true
-                })
-              }
-            } else
-              Object.keys(tissueValues).map((b: string) => {
-                c[b] = false
-              })
-            setCollapse(c)
-          }}
-        >
-          Collapse All
-        </Button>
-        <Box ml={5}>
-          <FormControl key={sort}>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={zeros}
-                  onChange={() => {
-                    if (zeros) setZeros(false)
-                    else setZeros(true)
-                  }}
-                />
-              }
-              label="display 0's"
-            />
-          </FormControl>
-        </Box>
-      </Grid2>
       {/* rampage plot */}
       <Grid2 xs={12}>
         <Box>
+        {Object.keys(tissueValues).length === 0 ? <span>{'No Data Available'}</span> : 
+           <Stack>
           {Object.entries(tissueValues).map((entry, index: number) => {
             let info = entry[1]
             y += info.values.length * 20 + 20 + 25
-            let view: string = "0 0 1200 " + (info.values.length * 20 + 20)
+            let view: string = "0 0 1200 " + (info.values.length * 20 +10)
             return (
-              <Accordion
-                key={index}
-                expanded={Object.keys(collapse).length !== 0 ? collapse[entry[0]] : true}
-                disableGutters={true}
-                sx={{ padding: 0, mr: 0 }}
-              >
-                <AccordionSummary
-                  expandIcon={<ExpandMoreIcon />}
-                  sx={{ padding: 0, margin: 0 }}
-                  onClick={() => {
-                    let tmp: { [id: string]: boolean } = {}
-                    Object.entries(tissueValues).map((x) => {
-                      if (x[0] === entry[0]) {
-                        if (collapse[entry[0]] === undefined || collapse[entry[0]]) tmp[entry[0]] = false
-                        else tmp[entry[0]] = true
-                      } else {
-                        tmp[x[0]] = collapse[x[0]] !== undefined ? collapse[x[0]] : true
-                      }
-                    })
-                    setCollapse(tmp)
-                  }}
-                >
-                  <Typography variant="h5">{entry[0].split("-")[0]}</Typography>
-                </AccordionSummary>
-                <AccordionDetails sx={{ padding: 0 }}>
-                  <svg className="graph" aria-labelledby="title desc" role="img" viewBox={view}>
+               <svg className="graph" aria-labelledby="title desc" role="img" viewBox={view} key={index}>
                     <g className="data" data-setname="gene expression plot">
-                      <line x1={0} x2={900} y1={1} y2={1} stroke="black" />
+
                       {plotGeneExp(entry, 5)}
                     </g>
                   </svg>
-                </AccordionDetails>
-              </Accordion>
             )
           })}
+          </Stack>}
         </Box>
       </Grid2>
     </Box>

screen2.0/src/app/search/ccresearch.tsx

@@ -1,7 +1,7 @@
 "use client"
-import React, { startTransition, useCallback, useEffect, useLayoutEffect, useState } from "react"
+import React, { startTransition, useCallback, useEffect, useState } from "react"
 import { styled } from '@mui/material/styles';
-import { Divider, IconButton, Tab, Tabs, Typography, Box, Stack } from "@mui/material"
+import { Divider, IconButton, Tab, Tabs, Typography, Box } from "@mui/material"
 import MainResultsTable from "../../common/components/MainResultsTable"
 import MainResultsFilters from "../../common/components/MainResultsFilters"
 import { CcreDetails } from "./ccredetails/ccredetails"
@@ -299,11 +299,16 @@ export const CcreSearch = (props: { mainQueryParams: MainQueryParams, globals })
             <StyledTab label="Linked Genes" sx={{ alignSelf: "start" }} />
             <StyledTab label="Nearby Genomic Features" sx={{ alignSelf: "start" }} />
             <StyledTab label="TF and His-mod Intersection" sx={{ alignSelf: "start" }} />
-            <StyledTab label="TF Motifs and Sequence Features" sx={{ alignSelf: "start" }} />
+           { /*
+           //Disabling this feature (temporary)
+           <StyledTab label="TF Motifs and Sequence Features" sx={{ alignSelf: "start" }} />
+           */}
             <StyledTab label="Linked cCREs in other Assemblies" sx={{ alignSelf: "start" }} />
-            <StyledTab label="Associated RAMPAGE Signal" sx={{ alignSelf: "start" }} />
+
             <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" }} />}
+            {props.mainQueryParams.assembly!=="mm10" && <StyledTab label="Associated RAMPAGE Signal" sx={{ alignSelf: "start" }} />}
           </Tabs>
         }
       </Drawer>

screen2.0/src/app/search/gbview/genomebrowserview.tsx

@@ -182,7 +182,7 @@ export const GenomeBrowserView: React.FC<GenomeBrowserViewProps> = (props) => {
       <Grid2 container spacing={3} sx={{ mt: "1rem", mb: "1rem" }}>
         <Grid2 xs={12} lg={12}>
           <br />
-          <CytobandView innerWidth={1000} height={15} chromosome={coordinates.chromosome!} assembly={"hg38"} position={coordinates} />
+          <CytobandView innerWidth={1000} height={15} chromosome={coordinates.chromosome!} assembly={props.assembly!=="mm10" ?"hg38" : "mm10"} position={coordinates} />
           <br />
           <div style={{ textAlign: "center" }}>
             <Controls onDomainChanged={onDomainChanged} domain={coordinates || props.coordinates} />

screen2.0/src/app/search/gbview/tfmotiftrack.tsx

@@ -27,11 +27,11 @@ export const TfMotifTrack = (props) => {
 
   return (
     <g>
-      <EmptyTrack height={40} width={props.width || 1400} text="TF Motif Occurences" transform="" id="" />
+      <EmptyTrack height={40} width={props.width || 1000} text="TF Motif Occurences" transform="" id="" />
       <SquishBigBed
         domain={props.coordinates}
         svgRef={props.svgRef}
-        width={1000}
+        width={props.width}
         rowHeight={20}
         onHeightChanged={(x) => {
           setHeight(x + 40)
@@ -52,7 +52,7 @@ export const TfMotifTrack = (props) => {
         }}
       />
       {settingsMousedOver && (
-        <rect width={props.width || 1400} height={height} transform="translate(0,0)" fill="#194023" fillOpacity={0.1} />
+        <rect width={props.width || 1000} height={height} transform="translate(0,0)" fill="#194023" fillOpacity={0.1} />
       )}
       <rect transform="translate(0,0)" height={height} width={40} fill="#ffffff" />
       <rect