Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Manhattan improve app #67

Merged
merged 6 commits into from
Dec 6, 2018
Merged

Manhattan improve app #67

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
217b193
Changed the labels of the legend and set the hovermode to closest
Bachibouzouk Dec 3, 2018
a43fccc
added a slider for the suggestive line, rearranged the layout of the app
Bachibouzouk Dec 3, 2018
4e52c31
Merge branch 'master' into manhattan_improve_app
Bachibouzouk Dec 3, 2018
9c80041
added header colors and changed the graph height in the css
Bachibouzouk Dec 3, 2018
d9148af
Merge branch 'master' into manhattan_improve_app
Bachibouzouk Dec 4, 2018
ceb799d
wrapped the infodiv in a border
Bachibouzouk Dec 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 39 additions & 15 deletions assets/manhattanplot-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,61 @@
#mhp-page-content {
width: 100%;
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
align-content: space-evenly;
align-content: space-between;
}

#mhp-controls-div {
width: 90%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
margin-bottom: 20px;
margin-top: 20px;
#mhp-info-div {
width: 40%;
flex-grow: 1;
overflow-y: visible;
margin: 5px;
}

#mhp-slider-div {
width: 50%;
margin: 2px;
.mhp-slider-div {
flex-grow: 1;
width: 20%;
margin-left: 15px;
margin-right: 15px;
}

#mhp-graph{
height: 650px;
width: 100%;
}

#mhp-graph-div{
width: 90%;
height: 600px;
width: 60%;
margin: 5px;
}

.mph-control-div {
margin-top: 15px;
}

.mhp-vertical-style {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

.mhp-horizontal-style {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}

.mhp-text {
width: 300px;
color: #506784;
}

.mhp-intro {
font-size: 1.3em;
width: 60%;
width: 100%;
align-items: center;
}
10 changes: 6 additions & 4 deletions dash_bio/component_factory/_manhattan.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -507,7 +507,7 @@ def figure(
color=highlight_color,
size=point_size
),
name="of interest"
name="Point(s) of interest"
)
)

Expand All @@ -530,7 +530,8 @@ def figure(
'showgrid': showgrid,
'range': [xmin, xmax],
},
yaxis={'title': ylabel}
yaxis={'title': ylabel},
hovermode='closest'
)

hover_text = _get_hover_text(
Expand Down Expand Up @@ -568,7 +569,8 @@ def figure(
'ticktext': self.ticksLabels,
'ticks': "outside"
},
yaxis={'title': ylabel}
yaxis={'title': ylabel},
hovermode='closest'
)

icol = 0
Expand Down Expand Up @@ -598,7 +600,7 @@ def figure(
else tmp[self.pName].values,
mode="markers",
showlegend=showlegend,
name="chr%i" % chromo,
name="Chr%i" % chromo,
marker={
'color': col[icol],
'size': point_size
Expand Down
103 changes: 71 additions & 32 deletions tests/dash/app_manhattan_plot.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,42 +27,76 @@ def layout():
id='mhp-page-content',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mostly moving divs around

children=[
html.Div(
id='mhp-text',
className='mhp-text mhp-intro',
children="Visualize genome wide association studies ("
"GWAS) with efficient manhattan plots. Using "
"WebGL under the hood, interactively explore "
"hundred of thousands of points at once or "
"individually hover over them.",
id='mhp-graph-div',
className='seven columns',
children=dcc.Graph(
figure=fig,
id='mhp-graph',
config={'scrollZoom': True},
)
),
html.Div(
id='mhp-controls-div',
id='mhp-info-div',
className='four columns',
children=[
html.H5(
"Threshold value (red line)",
className='mhp-text',
html.Div(
id='mhp-text',
className='row mhp-text mhp-intro',
children="Visualize genome wide association studies ("
"GWAS) with efficient manhattan plots. Using "
"WebGL under the hood, interactively explore "
"hundred of thousands of points at once or "
"individually hover over them.",
),
html.Div(
className='mhp-horizontal-style mph-control-div',
id='mhp-slider-genome-div',
children=[
html.H5(
"Threshold value (red line)",
className='mhp-text',
),
html.Div(

className='mhp-slider-div',
children=dcc.Slider(
id='mhp-slider-genome',
vertical=False,
updatemode='mouseup',
max=9,
min=1,
value=7,
marks={i + 1: '{}'.format(i + 1) for i in range(9)},
step=0.05
),
)
]
),
html.Div(
id='mhp-slider-div',
children=dcc.Slider(
id='mhp-slider',
vertical=False,
updatemode='mouseup',
max=9,
min=1,
value=7,
marks={i + 1: '{}'.format(i + 1) for i in range(9)}
),
)
className='mhp-horizontal-style mph-control-div',
id='mhp-slider-indic-div',
children=[
html.H5(
"Suggestive line (purple)",
className='mhp-text',
),
html.Div(
className='mhp-slider-div',
children=dcc.Slider(
id='mhp-slider-indic',
vertical=False,
updatemode='mouseup',
max=9,
min=1,
value=6,
marks={i + 1: '{}'.format(i + 1) for i in range(9)},
step=0.05
),
)
]
),
]
),
html.Div(
id='mhp-graph-div',
children=dcc.Graph(
figure=fig,
id='mhp-graph'
)
)
]
)

Expand All @@ -71,9 +105,14 @@ def callbacks(app):
@app.callback(
Output('mhp-graph', 'figure'),
[
Input('mhp-slider', 'value'),
Input('mhp-slider-genome', 'value'),
Input('mhp-slider-indic', 'value'),
]
)
def update_graph(slider_val):
def update_graph(slider_genome, slider_indic):
"""update the data sets upon change the genomewideline value"""
return dash_bio.ManhattanPlot(df, genomewideline_value=float(slider_val))
return dash_bio.ManhattanPlot(
df,
genomewideline_value=float(slider_genome),
suggestiveline_value=float(slider_indic),
)