def test_dbop002_colorscale(dash_duo):
app = dash.Dash(__name__)
new_colorscale = {
'AMP': 'rgb(10, 200, 100)',
'FUSION': 'rgb(100, 10, 20)',
'HOMDEL': 'rgb(200, 50, 60)'
}
# fusion deep del amp
app.layout = html.Div(
simple_app_layout(dash_bio.OncoPrint(id=_COMPONENT_ID, data=_data)))
simple_app_callback(
app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='colorscale',
test_prop_value=json.dumps(new_colorscale),
prop_value_type='dict',
validation_fn=lambda x: json.dumps(x) == json.dumps(new_colorscale),
take_snapshot=True)
fus = dash_duo.find_elements(
'g.cartesianlayer g.plot g.trace.bars:nth-child(2) g.point > path')
for point in fus:
match = re.search(r'.*fill: ([\w\s,\(\)]+);.*',
point.get_attribute('style'))
assert match.group(1) == 'rgb(100, 10, 20)'
deep_del = dash_duo.find_elements(
'g.cartesianlayer g.plot g.trace.bars:nth-child(3) g.point > path')
for point in deep_del:
match = re.search(r'.*fill: ([\w\s,\(\)]+);.*',
point.get_attribute('style'))
assert match.group(1) == 'rgb(200, 50, 60)'
amp = dash_duo.find_elements(
'g.cartesianlayer g.plot g.trace.bars:nth-child(4) g.point > path')
for point in amp:
match = re.search(r'.*fill: ([\w\s,\(\)]+);.*',
point.get_attribute('style'))
assert match.group(1) == 'rgb(10, 200, 100)'
def test_dbop001_background_color(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(
simple_app_layout(dash_bio.OncoPrint(id=_COMPONENT_ID, data=_data)))
simple_app_callback(app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='backgroundcolor',
test_prop_value='rgb(25, 211, 243)',
prop_value_type='string',
take_snapshot=True)
background = dash_duo.find_elements(
'g.cartesianlayer g.plot g.trace.bars:nth-child(1) g.point > path')
for point in background:
match = re.search(r'.*fill: ([\w\s,\(\)]+);.*',
point.get_attribute('style'))
assert match.group(1) == 'rgb(25, 211, 243)'
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
data = urlreq.urlopen(
'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
'oncoprint_dataset3.json').read()
if PY3:
data = data.decode('utf-8')
data = json.loads(data)
app.layout = html.Div([
dashbio.OncoPrint(id='my-dashbio-oncoprint', data=data),
html.Div(id='oncoprint-output')
])
@app.callback(dash.dependencies.Output('oncoprint-output', 'children'),
[dash.dependencies.Input('my-dashbio-oncoprint', 'eventDatum')])
def update_output(event_data):
if event_data is None or len(event_data) == 0:
return 'There are no event data. Hover over or click on a part \
of the graph to generate event data.'
event_data = json.loads(event_data)
return [
html.Div('{}: {}'.format(key,
def layout():
return html.Div(
id='oncoprint-body',
children=[
html.Div([
html.Div([
dash_bio.OncoPrint(id='oncoprint-chart', data=dataset3),
],
className='oncoprint-card eight columns'),
html.Div([
dcc.Tabs(
id='oncoprint-tabs',
value='oncoprint-tab-select',
children=[
dcc.Tab(
label='Select',
value='oncoprint-tab-select',
children=[
html.Div([
html.H4("Select Dataset"),
dcc.Dropdown(
id='oncoprint-dropdown',
className='oncoprint-select',
options=[{
'label':
'{}.json'.format(ds),
'value':
ds
} for ds in DATASETS],
value='dataset3',
),
],
className='oncoprint-subcard'),
html.Div([
html.H4("Hover/Click/Event Data"),
dcc.Textarea(
id="oncoprint-events",
placeholder=
"Hover or click on data to see it here.",
value=
"Hover or click on data to see it here.",
className="oncoprint-events",
),
],
className='oncoprint-subcard'),
html.Div([
html.H4("What is OncoPrint?"),
html.P("""
The OncoPrint component is used to view multiple genetic
alteration events through an interactive and zoomable
heatmap. It is a React/Dash port of the popular
oncoPrint() function from the BioConductor R
package. Under the hood, the rendering is done using
Plotly.js built upon D3. Plotly's interactivity allows
the user to bind clicks and hovers to genetic events,
allowing the user to create complex bioinformatic apps
or workflows that rely on crossfiltering.
"""),
html.P("""
Read more about the component here:
https://github.com/plotly/react-oncoprint
"""),
],
className='oncoprint-subcard'),
],
),
dcc.Tab(
label='Customize',
value='oncoprint-tab-customize',
children=[
html.Div([
html.H4('Layout'),
html.Hr(
className='oncoprint-separator'),
html.Div(
className='oncoprint-settings',
children=[
html.H6("Overview"),
dcc.RadioItems(
id=
'oncoprint-show-overview-radio',
className='oncoprint-radio',
options=[
{
'label': 'Show',
'value': True
},
{
'label': 'Hide',
'value': False
},
],
value=True,
labelStyle={
'display':
'inline-block',
'margin-right': '8px',
},
),
],
),
html.Div(
className='oncoprint-settings',
children=[
html.H6("Legend"),
dcc.RadioItems(
id=
'oncoprint-show-legend-radio',
className='oncoprint-radio',
options=[
{
'label': 'Show ',
'value': True
},
{
'label': 'Hide ',
'value': False
},
],
value=True,
labelStyle={
'display':
'inline-block',
'margin-right': '8px',
},
),
],
),
html.Div(
className='oncoprint-settings',
children=[
html.H6("Padding"),
html.
P('Adjust the padding (as percentage) '
'between two tracks.'),
dcc.Slider(
className=
'oncoprint-slider',
id=
'oncoprint-padding-input',
value=0.05,
min=0,
max=0.1,
step=0.01,
marks={
'0': '0',
'0.02': '0.02',
'0.04': '0.04',
'0.06': '0.06',
'0.08': '0.08',
'0.1': '0.1',
},
),
],
),
],
className='oncoprint-subcard'),
html.Div([
html.H4('Colorscale'),
html.Hr(
className='oncoprint-separator'),
html.Div(
className='oncoprint-settings',
children=[
html.H6("Track color"),
html.
P('Change the default background '
'color for the tracks.'),
dcc.Dropdown(
id=
'oncoprint-tracks-color-dropdown',
options=[{
'label': col_code,
'value': col_code
} for col_code in
TRACKS_COLORS_OPT
],
value=TRACKS_COLORS_OPT[0],
),
],
),
html.Hr(
className='oncoprint-separator'),
html.H6("Mutation colors"),
html.
P("Select a mutation type and a color "
"to customize its look."),
html.Div(
className=
'oncoprint-half-container',
children=[
html.Div(
className=
'oncoprint-half-settings',
children=[
html.H6(
"Mutation type"),
dcc.Dropdown(
id=
'oncoprint-colorscale-mutation-dropdown',
options=[
{
'label':
mut_type,
'value':
mut_type
}
for mut_type in
COLORSCALE_MUTATIONS_OPT
],
value=
COLORSCALE_MUTATIONS_OPT[
0],
),
],
),
html.Div(
className=
'oncoprint-half-settings',
children=[
html.H6("Color"),
dcc.Dropdown(
id=
'oncoprint-colorscale-color-dropdown',
options=[
{
'label':
col_code,
'value':
col_code
}
for col_code in
COLORSCALE_COLORS_OPT
],
value=
COLORSCALE_COLORS_OPT[
0],
),
],
),
],
),
],
className='oncoprint-subcard'),
],
),
],
),
],
className='oncoprint-card four columns'),
],
className='oncoprint-wrapper row'),
dcc.Store(id='oncoprint-store'),
])
def layout():
return html.Div(
id='oncoprint-body',
className='app-body',
children=[
dcc.Loading(className='dashbio-loading',
children=dash_bio.OncoPrint(id='oncoprint-chart',
height=550,
data=[])),
html.Div(
id='oncoprint-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='oncoprint-tabs',
value='what-is',
children=[
dcc.Tab(label='About',
value='what-is',
children=html.Div(
className='control-tab',
children=[
html.H4(
className='what-is',
children='What is OncoPrint?'),
html.P("""
The OncoPrint component is used to view multiple genomic
alteration events through an interactive and zoomable
heatmap. It is a React/Dash port of the popular
oncoPrint() function from the Bioconductor R
package. Under the hood, the rendering is done with
D3 via Plotly.js. Plotly's interactivity allows
you to bind clicks and hovers to genetic events,
letting you create complex bioinformatics apps
or workflows that leverage crossfiltering.
"""),
html.P("""
Read more about the component here:
https://github.com/plotly/react-oncoprint
""")
])),
dcc.Tab(
label='Data',
value='data',
children=html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children='Select dataset'),
dcc.Dropdown(
id='oncoprint-dropdown',
className=
'oncoprint-select',
options=[{
'label':
'{}.json'.format(ds),
'value':
ds
} for ds in DATASETS],
value='cBioPortalData',
),
]),
html.Hr(
className='oncoprint-separator'),
html.Div([
html.H4('Event metadata'),
html.Div(id='oncoprint-events'),
])
])),
dcc.Tab(
label='View',
value='view',
children=html.Div(
className='control-tab',
children=[
html.H4('Layout'),
html.Div(
className='app-controls-block',
children=[
html.Div(className=
'app-controls-name',
children='Overview'),
daq.ToggleSwitch(
id=
'oncoprint-show-overview',
label=['hide', 'show'],
color='#009DFF',
size=35,
value=True),
]),
html.Div(
className='app-controls-block',
children=[
html.Div(className=
'app-controls-name',
children='Legend'),
daq.ToggleSwitch(
id='oncoprint-show-legend',
label=['hide', 'show'],
color='#009DFF',
size=35,
value=True),
]),
html.Div(
className='app-controls-block',
children=[
html.Div(className=
'app-controls-name',
children='Padding'),
dcc.Slider(
className='control-slider',
id=
'oncoprint-padding-input',
value=0.05,
min=0,
max=0.1,
step=0.01,
marks={
'0': '0',
'0.02': '0.02',
'0.04': '0.04',
'0.06': '0.06',
'0.08': '0.08',
'0.1': '0.1',
},
),
html.Div(
className=
'app-controls-desc',
children=
'Adjust padding (as percentage) '
'between two tracks.'),
]),
html.Hr(
className='oncoprint-separator'),
html.Div([
html.H4('Colors'),
html.P('Change default background '
'color for the tracks.'),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children='Track color'
),
daq.ColorPicker(
id=
'oncoprint-tracks-color',
value={
'hex': '#AAAAAA'
})
]),
html.Hr(
className='oncoprint-separator'
),
html.H6("Mutation colors"),
html.
P("Select a mutation type and a color "
"to customize its look."),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children='Mutation type'
),
dcc.Dropdown(
id=
'oncoprint-colorscale-mutation-dropdown',
options=[
{
'label':
mut_type,
'value':
mut_type
} for mut_type in
COLORSCALE_MUTATIONS_OPT
],
value=
COLORSCALE_MUTATIONS_OPT[
0],
),
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children=
'Mutation color'),
daq.ColorPicker(
id=
'oncoprint-mutation-color',
value={
'hex':
COLORSCALE_COLORS_OPT[
0]
})
])
])
]))
])
]),
dcc.Store(id='oncoprint-store'),
]),
import dash_html_components as html
import dash_bio as dashbio
import json
import urllib.request as urlreq
import base64
data = urlreq.urlopen(
"https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/dash-onco-print/data/dataset3.json"
).read().decode("utf-8")
data = json.loads(data)
component = dashbio.OncoPrint(id='my-dashbio-oncoprint', data=data, width=800)
component_image = html.Img(src='data:image/png;base64,{}'.format(
base64.b64encode(open('./images/pic_oncoprint.png',
'rb').read()).decode()),
style={
'width': '800px',
'float': 'left'
})
def callbacks(app):
return
