Skip to content

Commit

Permalink
Add SuperDendrix Results
Browse files Browse the repository at this point in the history
  • Loading branch information
mdml committed Jun 10, 2020
1 parent 59b4de8 commit f88ea43
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 12 deletions.
8 changes: 6 additions & 2 deletions src/layout/Navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
} from "react-router-dom"


import {About, Credits, DataExplorer} from '../pages'
import {About, Credits, DataExplorer, SuperDendrixResults} from '../pages'

const useStyles = makeStyles(theme => ({
appbar: {
Expand Down Expand Up @@ -59,6 +59,7 @@ const Navbar = ({
<Grid item>
<List component="nav" className={classes.navbar}>
<ListItem component="div"><ListItemText inset><Link to="/">Explorer</Link></ListItemText></ListItem>
<ListItem component="div"><ListItemText inset><Link to="/superdendrix-results">SuperDendrix</Link></ListItemText></ListItem>
<ListItem component="div"><ListItemText inset><Link to="/about">About</Link></ListItemText></ListItem>
<ListItem component="div"><ListItemText inset><Link to="/credits">Credits</Link></ListItemText></ListItem>
</List>
Expand All @@ -74,7 +75,10 @@ const Navbar = ({
<Route path="/credits">
<Credits />
</Route>
<Route path="/">
<Route path="/superdendrix-results">
<SuperDendrixResults />
</Route>
<Route path="/" exact>
<DataExplorer />
</Route>
</Switch>
Expand Down
21 changes: 20 additions & 1 deletion src/pages/About.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,30 @@
import React from 'react';
import { Link } from 'react-router-dom';
import Container from '@material-ui/core/Container'
import Typography from '@material-ui/core/Typography'

const About = () => {
return (
<Container fluid maxWidth="lg">
<Container maxWidth="sm">
<Typography variant="h5">About</Typography>
This web application is for exploring genetic dependencies <i>profiles </i>
and <i>alterations</i> in cancer cell line data (Park et al. <i>in submission</i>).
(See <Link to="/credits">Credits</Link> for details on the data.)
Users select a profile and set of alterations to view, and the web application
creates a waterfall plot of the dependency scores and alterations.
<br/><br/>
SuperDendrix refers to a computational pipeline for identifying sets of alterations
and cancer types that are significantly associated with genetic dependencies.
These results are available in <Link to="/superdendrix-results">SuperDendrix Results</Link>.
<br/><br/>
<Typography variant="overline">Contributors*</Typography>
<ul style={{ marginTop: '0px' }}>
<li><a href="https://www.ceplas.eu/en/research/principal-investigators/prof-dr-gunnar-w-klau/" target="_new">Gunnar Klau</a> (Heinrich Heine U.)</li>
<li><a href="https://lsi.princeton.edu/tyler-park" target="_new">Tyler Park</a> (Princeton U.)</li>
<li><a href="https://lsi.princeton.edu/ben-raphael" target="_new">Ben Raphael</a> (Princeton U.)</li>
<li><a href="https://lrgr.io/people/max-leiserson" target="_new">Max Leiserson</a> (U. Maryland)</li>
</ul>
<i>*Strict random order</i>
</Container>
)
}
Expand Down
19 changes: 18 additions & 1 deletion src/pages/Credits.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,28 @@
import React from 'react';
import { Link } from 'react-router-dom';
import Container from '@material-ui/core/Container'
import Typography from '@material-ui/core/Typography'

const Credits = () => {
return (
<Container fluid maxWidth="lg">
<Container maxWidth="sm">
<Typography variant="h5">Credits</Typography>
<Typography variant="overline">Technology</Typography><br/>
This web application was built with open-source tools, including:
<ul>
<li><a href="https://d3js.org/" target="_new">D3</a></li>
<li><a href="https://material-ui.com/" target="_new">Material UI</a></li>
<li><a href="https://reactjs.org/" target="_new">React</a></li>
</ul>
It is hosted on Heroku and GitHub Pages, and is <a href="https://github.com/lrgr/superdendrix-explorer" target="_new">open-source</a>.
<br/><br/>
<Typography variant="overline">Data</Typography><br/>
This web application uses public data from two projects from the Broad Institute:
<ul>
<li><a href="https://portals.broadinstitute.org/ccle" target="_new">Cancer Cell Line Encylopedia (CCLE)</a></li>
<li><a href="https://depmap.org/portal/" target="_new">DepMap</a></li>
</ul>
For more details on this project, see the <Link to="/about">About</Link> page.
</Container>
)
}
Expand Down
125 changes: 125 additions & 0 deletions src/pages/SuperDendrixResults.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import React, { useState, useEffect } from 'react';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import {json as d3Json} from 'd3-fetch';
import {ascending} from 'd3-array';
import queryString from 'query-string';
import {withRouter} from 'react-router';

const SuperDendrixResults = withRouter(({
history,
location,
}) => {
// Load the manifest with the list of datasets
const dataURL = `${process.env.REACT_APP_SUPERDENDRIX_DATA_URL}/manifest.json`;
const [datasets, setDatasets] = useState([]);
const [selectedDataset, setSelectedDataset] = useState('19Q1');
useEffect( () => {
d3Json(dataURL)
.then((jsonData) => setDatasets(jsonData.datasets))
.catch((error) => {
console.error(error)
})
}, [dataURL]);

// Load the SuperDendrix results
const superDendrixResultsURL = `${process.env.REACT_APP_SUPERDENDRIX_DATA_URL}/${selectedDataset}/superdendrix-results.json`;
const [superDendrixResults, setSuperDendrixResults] = useState([]);
useEffect(() => {
d3Json(superDendrixResultsURL)
.then((jsonData) => setSuperDendrixResults(jsonData.sets))
.catch( (error) => {
console.error(error)
})
}, [selectedDataset, superDendrixResultsURL, setSuperDendrixResults]);

return (
<Container maxWidth="md" style={{ height: 'calc(100% - 64px)'}}>
<Grid container direction="column" style={{ height: '100%', flexWrap: 'nowrap' }}>
<Grid item>
<Typography variant="h5">SuperDendrix Results</Typography>
</Grid>
<Grid item>
<FormControl fullWidth>
<InputLabel id="dataset-select">Dataset</InputLabel>
<Select
labelId="dataset-select"
value={selectedDataset}
onChange={(e) => setSelectedDataset(e.target.value)}
>
{
datasets.map((dataset) => (
<MenuItem value={dataset} key={dataset}>DepMap { dataset }</MenuItem>
))
}
</Select>
</FormControl>
</Grid>
<Grid item style={{ marginTop: '10px' }}>
Click on the row to view the set in the Explorer!
</Grid>
<Grid item style={{ marginTop: '10px' }}>
<TableContainer component="div">
<Table aria-label="superdendrix results table" size="small">
<TableHead>
<TableRow>
<TableCell><b>Profile Name</b></TableCell>
<TableCell><b>Alterations</b></TableCell>
<TableCell align="right"><b>Weight <i>W(M)</i></b></TableCell>
<TableCell align="right"><b>FDR</b></TableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
</Grid>
<Grid item style={{ overflowY: 'scroll', flexGrow: 1, flexShrink: 1 }}>
<TableContainer component="div">
<Table aria-label="superdendrix results table" size="small">
<TableBody>
{
superDendrixResults.map(({
profile,
alterations,
weight,
fdr,
}, i) => (
<TableRow
key={i}
onClick={() => {
history.push({
pathname: '/',
search: queryString.stringify({
alterations: alterations.sort(ascending),
profileName: profile,
})
})
}}
style={{ cursor: 'pointer' }}
>
<TableCell>{profile}</TableCell>
<TableCell>{alterations.join(', ')}</TableCell>
<TableCell align="right">{ weight }</TableCell>
<TableCell align="right">{ fdr }</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Grid>
</Container>
);
});

export default SuperDendrixResults;
21 changes: 16 additions & 5 deletions src/pages/explorer/charts/Chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,21 @@ const Chart = ({
// THRESHOLD SCORE LOGIC
//////////////////////////////////////////////////////////////////////////////
const thresholdXIndex = useMemo( () => {
// Handle the increased dependency
if (direction === 'increased_dependency'){
let index = -1;
sortedSamples.forEach((sample, i) => {
if (scores[sample] > thresholdScore && index === -1){
index = i - 1;
}
});
return index === -1 ? null : sortedSamples[index];
}
// Handle the decreased dependency
let index = -1;
sortedSamples.forEach((sample, i) => {
if (direction === 'increased_dependency' && scores[sample] > thresholdScore && index === -1){
index = i - 1;
[...sortedSamples].reverse().forEach((sample, i) => {
if (scores[sample] < thresholdScore && index === -1){
index = sortedSamples.length - (i - 1);
}
});
return index === -1 ? null : sortedSamples[index];
Expand Down Expand Up @@ -224,9 +235,9 @@ const Chart = ({

const sampleOpacity = useCallback((s) => {
if (direction === 'increased_dependency'){
return scores[s] < thresholdScore ? 1 : 0.5
return scores[s] < thresholdScore ? 1 : 1;
}
return scores[s] > thresholdScore ? 1 : 0.5
return scores[s] > thresholdScore ? 1 : 1;
}, [scores, thresholdScore, direction]);

//////////////////////////////////////////////////////////////////////////////
Expand Down
8 changes: 5 additions & 3 deletions src/pages/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import About from './About.js'
import Credits from './Credits.js'
import DataExplorer from './explorer'
import About from './About.js';
import Credits from './Credits.js';
import DataExplorer from './explorer';
import SuperDendrixResults from './SuperDendrixResults';
export {
About,
Credits,
DataExplorer,
SuperDendrixResults,
}

0 comments on commit f88ea43

Please sign in to comment.