Skip to content

Commit

Permalink
fixed collapse all, changed theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordanvelezbomba
jordanvelezbomba committed Jul 26, 2023
1 parent 719a777 commit cb47d69
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 151 deletions.
2 changes: 1 addition & 1 deletion screen2.0/src/app/applets/gene-expression/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
import Image from "next/image"
import { gql } from "@apollo/client"

const GENE_AUTOCOMPLETE_QUERY = gql`
const GENE_AUTOCOMPLETE_QUERY = `
query ($assembly: String!, $name_prefix: [String!], $limit: Int) {
gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit) {
name
Expand Down
17 changes: 10 additions & 7 deletions screen2.0/src/app/applets/gene-expression/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,19 @@ export function PlotGeneExpression(props: {
onClick={() => {
let c: { [id: string]: { expand: boolean } } = {}
let uncollapse: boolean = true
Object.keys(collapse).map((b: string) => {
if (collapse[b].expand) uncollapse = false
c[b] = { expand: false }
})

if (uncollapse) {
if (Object.keys(collapse).length !== 0){
Object.keys(collapse).map((b: string) => {
c[b].expand = true
if (collapse[b].expand) uncollapse = false
c[b] = { expand: false }
})

if (uncollapse) {
Object.keys(collapse).map((b: string) => {
c[b].expand = true
})
}
}
else Object.keys(tissues).map((b: string) => {c[b] = { expand: false }})
setCollapse(c)
}}
>
Expand Down
29 changes: 5 additions & 24 deletions screen2.0/src/app/search/ccredetails/gene-expression.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,9 @@ import {
Box,
Button,
debounce,
ButtonBase,
Checkbox,
FormControlLabel,
FormGroup,
Link,
ToggleButton,
ToggleButtonGroup,
Typography,
Expand All @@ -38,14 +36,15 @@ import {
} from "@mui/material"

import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
import { ThemeProvider, createTheme } from "@mui/material/styles"
import { ThemeProvider } from "@mui/material/styles"
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"
import MenuIcon from "@mui/icons-material/Menu"
import Divider from "@mui/material/Divider"
import { CheckBox, ExpandMore } from "@mui/icons-material"
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
import Image from "next/image"
import { gql } from "@apollo/client"
import { accordionTheme } from "../../../common/lib/themes"

const GENE_AUTOCOMPLETE_QUERY = gql`
query ($assembly: String!, $name_prefix: [String!], $limit: Int) {
Expand Down Expand Up @@ -230,26 +229,7 @@ export function GeneExpression(props: { accession: string, assembly: string, gen
setState(open)
}

// temp theme for toolbar color
const theme = createTheme({
palette: {
mode: "light",
// primary: {
// main: "#nnn",
// },
secondary: {
main: "#nnn",
},
},
components: {
MuiAccordion: {
defaultProps: {
elevation: 0,
},
},
},
})

// set drawer height based on window size
const drawerWidth: number = 350
let drawerHeight: number = window.screen.height
let drawerHeightTab: number = window.screen.height
Expand All @@ -267,7 +247,7 @@ export function GeneExpression(props: { accession: string, assembly: string, gen
return (
<main>
<Paper sx={{ ml: open ? `${drawerWidth}px` : 0 }} elevation={2}>
<ThemeProvider theme={theme}>
<ThemeProvider theme={accordionTheme}>
<Grid2 container spacing={3} sx={{ mt: "2rem", ml: "1.5rem", mr: "2rem" }}>
{/* hamburger with options for plot */}
<Grid2>
Expand Down Expand Up @@ -712,6 +692,7 @@ export function GeneExpression(props: { accession: string, assembly: string, gen
onChange={(event: React.ChangeEvent<HTMLInputElement>, value: string) => {
if (value != "") debounceFn(value)
setGeneID(value)
router.push
}}
onInputChange={(event: React.ChangeEvent<HTMLInputElement>, value: string) => {
if (value != "") debounceFn(value)
Expand Down
23 changes: 2 additions & 21 deletions screen2.0/src/app/search/ccredetails/rampage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import { Range2D } from "jubilant-carnival"
import { PlotActivityProfiles } from "./utils"
import Image from "next/image"
import { accordionTheme } from "../../../common/lib/themes"

export default function Rampage(props: { accession: string, assembly: string, chromosome: string }) {
const [loading, setLoading] = useState<boolean>(true)
Expand Down Expand Up @@ -81,26 +82,6 @@ export default function Rampage(props: { accession: string, assembly: string, ch
})
}

// temp theme for toolbar color
const theme = createTheme({
palette: {
mode: "light",
// primary: {
// main: "#nnn",
// },
secondary: {
main: "#nnn",
},
},
components: {
MuiAccordion: {
defaultProps: {
elevation: 0,
},
},
},
})

return error ? (
<ErrorMessage error={new Error("Error loading data")} />
) : loading ? (
Expand All @@ -110,7 +91,7 @@ export default function Rampage(props: { accession: string, assembly: string, ch
data[payload.accession] && (
<Grid2 container spacing={3} sx={{ mt: "1rem", mb: "2rem", mr: "2rem", width: `100%` }}>
{/* tool bar */}
<ThemeProvider theme={theme}>
<ThemeProvider theme={accordionTheme}>
<AppBar position="static" color="secondary">
<Toolbar style={{}}>
{/* description */}
Expand Down
198 changes: 100 additions & 98 deletions screen2.0/src/app/search/ccredetails/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,114 +2,30 @@
import React, { useState } from "react"
import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material"
import {
AppBar,
Box,
Button,
Drawer,
FormControl,
FormControlLabel,
IconButton,
InputLabel,
Link,
MenuItem,
Select,
SelectChangeEvent,
Stack,
Switch,
ThemeProvider,
Toolbar,
Typography,
createTheme,
} 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 { RIDItemList, GeneExpEntry } from "../../applets/gene-expression/types"

export const z_score = (d: any) => (d === -11.0 || d === "--" || d === undefined ? "--" : d.toFixed(2))

export const ctgroup = (group: string) => {
group = group.split(",")[0]
if (group === "CA-CTCF")
return (
<span style={{ color: "#00B0F0" }}>
<strong>chromatin accessible with ctcf</strong>
</span>
)
if (group === "CA-TF")
return (
<span style={{ color: "#be28e5" }}>
<strong>chromatin accessible with tf</strong>
</span>
)
if (group === "CA-H3K4me3")
return (
<span style={{ color: "#ffaaaa" }}>
<strong>chromatin accessible with H3K4me3</strong>
</span>
)
if (group === "TF")
return (
<span style={{ color: "#d876ec" }}>
<strong>tf only</strong>
</span>
)
if (group === "CA")
return (
<span style={{ color: "#06DA93" }}>
<strong>chromatin accessible only</strong>
</span>
)
if (group === "pELS")
return (
<span style={{ color: "#ffcd00" }}>
<strong>proximal enhancer-like signature</strong>
</span>
)
if (group === "dELS")
return (
<span style={{ color: "#ffcd00" }}>
<strong>distal enhancer-like signature</strong>
</span>
)
if (group === "PLS")
return (
<span style={{ color: "#ff0000" }}>
<strong>promoter-like signature</strong>
</span>
)
if (group === "DNase-H3K4me3")
return (
<span style={{ color: "#ffaaaa" }}>
<strong>DNase-H3K4me3</strong>
</span>
)
if (group === "ctcf")
return (
<span style={{ color: "#00b0f0" }}>
<strong>CTCF bound</strong>
</span>
)
if (group === "ylowdnase")
return (
<span style={{ color: "#8c8c8c" }}>
<strong>low DNase</strong>
</span>
)
if (group === "zunclassified")
return (
<span style={{ color: "#8c8c8c" }}>
<strong>zunclassified</strong>
</span>
)
return (
<span style={{ color: "#06da93" }}>
<strong>DNase only</strong>
</span>
)
}

/**
* Plots associated RAMPAGE signals
* @param {any} data signals to plot
* @param {Range2D} range size of plot dimensions
* @param {Range2D} dimensions size of window to plot on
* @returns plot of RAMPAGE signals
*/
export function PlotActivityProfiles(props: { data: any; range: Range2D; dimensions: Range2D }) {
const [sort, setSort] = useState<string>("byValue")
const [zeros, setZeros] = useState<boolean>(false)
Expand Down Expand Up @@ -213,16 +129,19 @@ export function PlotActivityProfiles(props: { data: any; range: Range2D; dimensi
onClick={() => {
let c: { [id: string]: { expand: boolean } } = {}
let uncollapse: boolean = true
Object.keys(collapse).map((b: string) => {
if (collapse[b].expand) uncollapse = false
c[b] = { expand: false }
})

if (uncollapse) {
if (Object.keys(collapse).length !== 0){
Object.keys(collapse).map((b: string) => {
c[b].expand = true
if (collapse[b].expand) uncollapse = false
c[b] = { expand: false }
})

if (uncollapse) {
Object.keys(collapse).map((b: string) => {
c[b].expand = true
})
}
}
else Object.keys(tissues).map((b: string) => {c[b] = { expand: false }})
setCollapse(c)
}}
>
Expand Down Expand Up @@ -294,3 +213,86 @@ export function PlotActivityProfiles(props: { data: any; range: Range2D; dimensi
</>
)
}

export const z_score = (d: any) => (d === -11.0 || d === "--" || d === undefined ? "--" : d.toFixed(2))

export const ctgroup = (group: string) => {
group = group.split(",")[0]
if (group === "CA-CTCF")
return (
<span style={{ color: "#00B0F0" }}>
<strong>chromatin accessible with ctcf</strong>
</span>
)
if (group === "CA-TF")
return (
<span style={{ color: "#be28e5" }}>
<strong>chromatin accessible with tf</strong>
</span>
)
if (group === "CA-H3K4me3")
return (
<span style={{ color: "#ffaaaa" }}>
<strong>chromatin accessible with H3K4me3</strong>
</span>
)
if (group === "TF")
return (
<span style={{ color: "#d876ec" }}>
<strong>tf only</strong>
</span>
)
if (group === "CA")
return (
<span style={{ color: "#06DA93" }}>
<strong>chromatin accessible only</strong>
</span>
)
if (group === "pELS")
return (
<span style={{ color: "#ffcd00" }}>
<strong>proximal enhancer-like signature</strong>
</span>
)
if (group === "dELS")
return (
<span style={{ color: "#ffcd00" }}>
<strong>distal enhancer-like signature</strong>
</span>
)
if (group === "PLS")
return (
<span style={{ color: "#ff0000" }}>
<strong>promoter-like signature</strong>
</span>
)
if (group === "DNase-H3K4me3")
return (
<span style={{ color: "#ffaaaa" }}>
<strong>DNase-H3K4me3</strong>
</span>
)
if (group === "ctcf")
return (
<span style={{ color: "#00b0f0" }}>
<strong>CTCF bound</strong>
</span>
)
if (group === "ylowdnase")
return (
<span style={{ color: "#8c8c8c" }}>
<strong>low DNase</strong>
</span>
)
if (group === "zunclassified")
return (
<span style={{ color: "#8c8c8c" }}>
<strong>zunclassified</strong>
</span>
)
return (
<span style={{ color: "#06da93" }}>
<strong>DNase only</strong>
</span>
)
}

0 comments on commit cb47d69

Please sign in to comment.