Skip to content

Commit

Permalink
Dev (#157)
Browse files Browse the repository at this point in the history
  • Loading branch information
Alfredo Miranda authored Jun 24, 2021
1 parent f715b11 commit 5071fe8
Show file tree
Hide file tree
Showing 35 changed files with 1,057 additions and 276 deletions.
15 changes: 8 additions & 7 deletions src/components/AssociatedIndexVariantsTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -115,13 +115,14 @@ const tableColumns = variantId => [
{
id: 'studyLocus',
label: 'View',
renderCell: rowData => (
<StudyLocusLink
indexVariantId={rowData.indexVariantId}
studyId={rowData.studyId}
hasSumsStats={rowData.hasSumsStats}
/>
),
renderCell: rowData => {
return (
<StudyLocusLink
indexVariantId={rowData.indexVariantId}
studyId={rowData.studyId}
/>
);
},
},
];

Expand Down
1 change: 0 additions & 1 deletion src/components/AssociatedStudiesTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,6 @@ const tableColumns = ({
renderCell: rowData => {
return (
<StudyLocusLink
hasSumsStats={rowData.study.hasSumsStats}
indexVariantId={rowData.variant.id}
studyId={rowData.study.studyId}
label="Gene prioritisation"
Expand Down
1 change: 0 additions & 1 deletion src/components/ColocForGeneTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,6 @@ const tableColumns = ({
label: 'View',
renderCell: d => (
<StudyLocusLink
hasSumsStats={d.study.hasSumsStats}
indexVariantId={d.leftVariant.id}
studyId={d.study.studyId}
/>
Expand Down
3 changes: 1 addition & 2 deletions src/components/ColocGWASTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,9 @@ const tableColumns = [
id: 'locus',
label: 'View',
comparator: (a, b) =>
d3.ascending(a.study.hasSumsStats, b.study.hasSumsStats),
d3.ascending(a.study.hasSumstats, b.study.hasSumstats),
renderCell: d => (
<StudyLocusLink
hasSumsStats={d.study.hasSumsStats}
indexVariantId={d.indexVariant.id}
studyId={d.study.studyId}
/>
Expand Down
120 changes: 120 additions & 0 deletions src/components/CredibleSet.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import React, { Component } from 'react';
import * as d3 from 'd3';
import sizeMe from 'react-sizeme';

import theme from './theme';

const significantFigures = d3.format('.2g');

const OUTER_HEIGHT = 40;
const HEIGHT =
OUTER_HEIGHT - theme.margin.credibleSetTop - theme.margin.credibleSetBottom;

class CredibleSet extends Component {
state = {};

static getDerivedStateFromProps(props) {
const { label, data, start, end, size } = props;
const { width: outerWidth = 0 } = size;
const width =
outerWidth === 0
? 0
: outerWidth - theme.margin.left - theme.margin.right;

const xScale = d3
.scaleLinear()
.domain([start, end])
.range([0, width]);

const posteriorProbabilityScale = d3
.scaleLinear()
.domain([0, 1])
.range(['cyan', 'darkblue']);

if (data.length === 0) {
console.log(`Empty credible set for ${label}`);
}

const bars = data.map(d => {
return {
x: xScale(d.position),
color: posteriorProbabilityScale(d.posteriorProbability),
};
});

return { width, bars, xScale };
}

render() {
const { label, h4, logH4H3, size } = this.props;
const { width, bars } = this.state;
const { width: outerWidth } = size;

return (
<div style={{ width: '100%' }}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={`${outerWidth}px`}
height={OUTER_HEIGHT}
>
<g
transform={`translate(${theme.margin.left}, ${
theme.margin.credibleSetTop
})`}
>
<text
fontSize={14}
fontWeight="bold"
dy={-5}
fill={theme.axis.color}
>
{label}
</text>
{logH4H3 && h4 ? (
<text
fontSize={14}
fontWeight="bold"
textAnchor="end"
dx={width}
dy={-5}
fill={theme.axis.color}
>
log(H4/H3): {significantFigures(logH4H3)}, H4:{' '}
{significantFigures(h4)}
</text>
) : null}
<rect
stroke={theme.track.background}
fill={theme.track.backgroundAlternate}
x={0}
y={0}
width={width}
height={HEIGHT}
/>
</g>
<g
transform={`translate(${theme.margin.left}, ${
theme.margin.credibleSetTop
})`}
>
{bars.map((bar, i) => {
return (
<rect
stroke="none"
fill={bar.color}
key={i}
x={bar.x}
y={0}
width={2}
height={HEIGHT}
/>
);
})}
</g>
</svg>
</div>
);
}
}

export default sizeMe()(CredibleSet);
3 changes: 2 additions & 1 deletion src/components/CredibleSetWithRegional.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Checkbox from '@material-ui/core/Checkbox';

import { CredibleSet, Regional } from 'ot-charts';
import CredibleSet from './CredibleSet';
import Regional from './Regional';

const styles = () => ({
container: {
Expand Down
14 changes: 0 additions & 14 deletions src/components/GnomADTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,6 @@ const GnomADTable = ({ classes, data, variantId }) => (
{data.rsId}
</Link>
</Typography>
<Typography variant="subtitle2">
<strong>gnomAD:</strong>{' '}
{data.idB37 ? (
<Link
external
to={`http://gnomad.broadinstitute.org/variant/${data.idB37.replace(
/_/g,
'-'
)}`}
>
{data.idB37.replace(/_/g, '-')}
</Link>
) : null}
</Typography>
<br />

<Typography variant="subtitle1">Neighbourhood</Typography>
Expand Down
1 change: 0 additions & 1 deletion src/components/LocusTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,6 @@ export const tableColumns = ({
label: 'View',
renderCell: rowData => (
<StudyLocusLink
hasSumsStats={rowData.study.hasSumsStats}
indexVariantId={rowData.indexVariantId}
studyId={rowData.studyId}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ManhattanContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ class ManhattanContainer extends React.Component {
}

render() {
const { data, loading, error, studyId, hasSumsStats } = this.props;
const { data, loading, error, studyId, hasSumstats } = this.props;
const { associations, start, end } = this.state;

const significantLociCount = significantLoci(data);
Expand Down Expand Up @@ -137,7 +137,7 @@ class ManhattanContainer extends React.Component {
return start <= assoc.globalPosition && assoc.globalPosition <= end;
})}
studyId={studyId}
hasSumsStats={hasSumsStats}
hasSumstats={hasSumstats}
filenameStem={`${studyId}-independently-associated-loci`}
/>
</React.Fragment>
Expand Down
7 changes: 3 additions & 4 deletions src/components/ManhattanTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import StudyLocusLink from './StudyLocusLink';
import { pvalThreshold } from '../constants';
import variantIdComparator from '../logic/variantIdComparator';

export const tableColumns = (studyId, hasSumsStats) => [
export const tableColumns = studyId => [
{
id: 'indexVariantId',
label: 'Lead Variant',
Expand Down Expand Up @@ -136,7 +136,6 @@ export const tableColumns = (studyId, hasSumsStats) => [
renderCell: rowData => (
<React.Fragment>
<StudyLocusLink
hasSumsStats={hasSumsStats}
indexVariantId={rowData.indexVariantId}
studyId={studyId}
/>
Expand Down Expand Up @@ -183,7 +182,7 @@ function ManhattanTable({
error,
data,
studyId,
hasSumsStats,
hasSumstats,
filenameStem,
}) {
const dataWithCytoband = data.map(d => {
Expand All @@ -193,7 +192,7 @@ function ManhattanTable({
cytoband: getCytoband(chromosome, position),
};
});
const columns = tableColumns(studyId, hasSumsStats);
const columns = tableColumns(studyId, hasSumstats);
const downloadColumns = getDownloadColumns(columns);
const downloadData = getDownloadData(dataWithCytoband);

Expand Down
13 changes: 7 additions & 6 deletions src/components/NavBar/NavBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const NavBar = ({
api,
downloads,
docs,
community,
contact,
homepage,
items,
Expand All @@ -86,12 +87,6 @@ const NavBar = ({
)}
<div className={classes.flex} />
{search ? search : null}
<MenuExternalLink
classes={classes}
href="https://genetics-docs.opentargets.org/#overview"
>
About
</MenuExternalLink>
{docs ? (
<MenuExternalLink classes={classes} href={docs}>
Documentation
Expand All @@ -110,6 +105,12 @@ const NavBar = ({
</MenuExternalLink>
) : null}

{community ? (
<MenuExternalLink classes={classes} href={community}>
Community
</MenuExternalLink>
) : null}

{contact ? (
<MenuExternalLink classes={classes} href={contact}>
Contact
Expand Down
Loading

0 comments on commit 5071fe8

Please sign in to comment.