def test_dbid003_click_rotation_disabled(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(simple_app_layout(
dash_bio.Ideogram(
id=_COMPONENT_ID
)
))
simple_app_callback(
app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='rotatable',
test_prop_value=str(False),
prop_value_type='bool',
validation_fn=lambda x: x is False
)
WebDriverWait(dash_duo.driver, 1).until(
lambda _: 'rotate(90)' in dash_duo.find_element(
'#chr1-9606-chromosome-set').get_attribute('transform'))
# click to rotate and ensure that the correct chromosome is rotated
dash_duo.find_element('#chr1-9606-chromosome-set').click()
WebDriverWait(dash_duo.driver, 1)
assert 'rotate(90)' in dash_duo.find_element(
'#chr1-9606-chromosome-set').get_attribute('transform')
def test_dbid002_click_rotation(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(simple_app_layout(
dash_bio.Ideogram(
id=_COMPONENT_ID
)
))
simple_app_callback(
app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='rotatable',
test_prop_value=str(True),
prop_value_type='bool',
validation_fn=lambda x: x is True
)
# ensure that it loads un-rotated
WebDriverWait(dash_duo.driver, 1).until(
lambda _: 'rotate(90)' in dash_duo.find_element(
'#chr1-9606-chromosome-set').get_attribute('transform'))
# click to rotate and ensure that the correct chromosome is rotated
dash_duo.find_element('#chr1-9606-chromosome-set').click()
# rotation shouldn't take more than 1-2 seconds
WebDriverWait(dash_duo.driver, 1).until(
lambda _: 'rotate(0)' in dash_duo.find_element(
'#chr1-9606-chromosome-set').get_attribute('transform'))
def test_dbid001_displayed_chromosomes(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(simple_app_layout(
dash_bio.Ideogram(
id=_COMPONENT_ID
)
))
chromosome_set_new = [str(i+1) for i in range(5)]
simple_app_callback(
app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='chromosomes',
test_prop_value=json.dumps(chromosome_set_new),
prop_value_type='dict',
validation_fn=lambda x: json.dumps(x) == json.dumps(chromosome_set_new)
)
WebDriverWait(dash_duo.driver, 1).until(
lambda _:
len(dash_duo.find_elements('g.chromosome-set-container')) == 5
)
def update_ideogram(ideo_custom, ideo_homology, brush_ideo,
ideo_annotations, selected_ideo):
ideograms = {
'custom': ideo_custom,
'homology': ideo_homology,
'brush': brush_ideo,
'annotations': ideo_annotations
}
return dash_bio.Ideogram(**ideograms[selected_ideo])
def layout():
return html.Div([
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(
label="Custom",
children=[
html.Div(
[
html.Div(
[
html.H5("Options",
id="ideogram-options"),
html.Div([
html.P("Organism"),
dcc.Dropdown(
id="organism-change",
options=[
{
"label": "Human",
"value": "human",
},
{
"label":
"Drosophila-Melanogaster",
"value":
"drosophila-melanogaster",
},
{
"label": "Zea-mays",
"value": "zea-mays",
},
{
"label":
"Pan-troglodytes",
"value":
"pan-troglodytes",
},
{
"label":
"Macaca-fascicularis",
"value":
"macaca-fascicularis",
},
],
value="human",
),
html.Div([
html.P("Orientation"),
dcc.Dropdown(
id="orientation-switch",
options=[
{
"label":
"Vertical",
"value":
"vertical",
},
{
"label":
"Horizontal",
"value":
"horizontal",
},
],
value="horizontal",
),
html.P("Bandlabel"),
dcc.Dropdown(
id="bandlabel-switch",
options=[
{
"label":
"Label On",
"value": True,
},
{
"label":
"Label Off",
"value": False,
},
],
value=True,
),
html.P("Chromosome label"),
dcc.Dropdown(
id="chromlabel-switch",
options=[
{
"label":
"Label On",
"value": True,
},
{
"label":
"Label Off",
"value": False,
},
],
value=True,
),
html.P("Rotatable"),
dcc.Dropdown(
id="rotatable-switch",
options=[
{
"label":
"Rotate Enable",
"value": True,
},
{
"label":
"Rotate Disable",
"value": False,
},
],
value=True,
),
html.P("Sex"),
dcc.Dropdown(
id="sex-switch",
options=[
{
"label": "Male",
"value": "male",
},
{
"label": "Female",
"value": "female",
},
],
value="male",
),
]),
html.P("Resolution (Human only)"),
dcc.Dropdown(
id="resolution-select",
options=[
{
"label": "550 bphs",
"value": 550,
},
{
"label": "650 bphs",
"value": 850,
},
{
"label": "Off",
"value": 1,
},
],
value=1,
),
html.P("Chr Margin"),
dcc.Input(
id="chr-margin-input",
placeholder="Enter a value...",
type="number",
value=10,
className=
"ideogram-column-content",
),
html.P("Chr Height"),
dcc.Input(
id="chr-height-input",
placeholder="Enter a value...",
type="number",
value=300,
className=
"ideogram-column-content",
),
html.P("Chr Width"),
dcc.Input(
id="chr-width-input",
placeholder="Enter a value...",
type="number",
value=8,
className=
"ideogram-column-content",
),
]),
],
className="two columns ideogram-column",
),
html.Div(
[
dash_bio.Ideogram(
id="ideo-custom",
dataDir=
"https://unpkg.com/[email protected]/"
"dist/data/bands/native/",
orientation="horizontal",
organism="human",
chrHeight=300,
chrMargin=10,
chrWidth=8,
rotatable=True,
)
],
className="ten columns ideogram-custom",
),
],
className="row",
)
],
),
dcc.Tab(
label="Homology",
children=[
html.Div(
[
html.Div(
[
html.H5("Options"),
html.P("Select Two Chromosomes"),
dcc.Input(
id="chr-select",
placeholder="Ex: 1,2",
type="text",
value="",
className=
"ideogram-homology-inputs",
),
chromosome_div(
id_tag="chrone",
name_tag="Chr 1",
startone=50000,
stopone=900000,
starttwo=155701383,
stoptwo=156030895,
),
chromosome_div(
id_tag="chrtwo",
name_tag="Chr 2",
startone=10001,
stopone=2781479,
starttwo=56887903,
stoptwo=57217415,
),
],
className="two columns ideogram-column",
),
html.Div(
[
dash_bio.Ideogram(
id="ideo-homology",
localOrganism=rat_data,
orientation="vertical",
showBandLabels=True,
showChromosomeLabels=True,
showFullyBanded=True,
fullChromosomeLabels=True,
chrHeight=400,
chrMargin=200,
rotatable=False,
perspective="comparative",
chromosomes=["1", "2"],
homology={
"chrOne": {
"organism": "9606",
"start":
[10001, 155101383],
"stop":
[2781479, 156030895],
},
"chrTwo": {
"organism": "9606",
"start":
[50000, 155101383],
"stop":
[900000, 156130895],
},
},
)
],
className="ten columns",
),
],
className="row",
)
],
),
dcc.Tab(
label="Brush",
children=[
html.Div(
[
html.H5("Options"),
html.P("Enter Chromosome Value"),
dcc.Input(
id="chr-brush",
placeholder="Ex: (1 - 22 , X, Y)",
type="text",
value="",
className="ideogram-column-content",
),
html.Div(
children=[
"Start: ",
html.Span(
"",
id="brush-print-start",
style={"color": "#0D76BF"},
),
html.Br(),
"Extent: ",
html.Span(
"",
id="brush-print-extent",
style={"color": "#0D76BF"},
),
html.Br(),
"End: ",
html.Span(
"",
id="brush-print-end",
style={"color": "#0D76BF"},
),
],
className="ideogram-databox-parameters",
),
],
className="two columns ideogram-column",
),
html.Div(
[
dash_bio.Ideogram(
id="brush-ideo",
dataDir="https://unpkg.com/[email protected]/"
"dist/data/bands/native/",
organism="human",
chromosomes=["1"],
brush="chr1:1-10000000",
chrHeight=900,
resolution=550,
orientation="horizontal",
)
],
className="ten columns",
),
],
),
dcc.Tab(
label="Annotations",
children=[
html.Div(
[
html.H6("Annotations"),
html.Div([
html.P("Select Annotation"),
dcc.Dropdown(
id="annotation-select",
options=[
{
"label": "Histogram",
"value": "histogram",
},
{
"label": "Overlay-1",
"value": "overlay-1",
},
{
"label": "Overlay-2",
"value": "overlay-2",
},
],
value="histogram",
),
html.P("Annotation Color (Histogram)"),
dcc.Input(
id="color-input",
placeholder="Annotation Color",
type="text",
value="#FF0000",
className="ideogram-column-content",
),
html.P("Bar Width (Histogram)"),
dcc.Input(
id="bar-input",
placeholder="Annotation Height",
type="number",
value=3,
min=1,
className="ideogram-column-content",
),
html.P("Annotation Height"),
dcc.Input(
id="height-input",
placeholder="Annotation Height",
type="text",
value="3",
className="ideogram-column-content",
),
html.P("Orientation"),
dcc.Dropdown(
id="orientation-anote",
options=[
{
"label": "Vertical",
"value": "vertical",
},
{
"label": "Horizontal",
"value": "horizontal",
},
],
value="horizontal",
),
html.P("Hover Data (Overlay-1/2)"),
html.Div(
children=[
html.Span(
"None",
id="annote-data",
style={"color": "#0D76BF"},
)
],
className="ideogram-databox-parameters",
),
]),
],
className="two columns ideogram-column",
),
html.Div(
[
dash_bio.Ideogram(
id="ideo-annotations",
dataDir="https://unpkg.com/[email protected]/"
"dist/data/bands/native/",
organism="human",
assembly="GRCh37",
orientation="horizontal",
showBandLabels=True,
chrHeight=275,
chrMargin=28,
rotatable=True,
filterable=True,
className="ideogram-custom",
)
],
className="ten columns",
),
],
),
],
)
])
import dash_bio as dashbio
import dash_html_components as html
import base64
component = dashbio.Ideogram(id='my-dashbio-ideogram', chrHeight=250)
component_image = html.Img(src='data:image/png;base64,{}'.format(
base64.b64encode(open('./images/pic_ideogram.png', 'rb').read()).decode()),
style={
'width': '780px',
'float': 'left'
})
def callbacks(app):
return
import dash_core_components as dcc
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
'Select which chromosomes to display on the ideogram below:',
dcc.Dropdown(
id='displayed-chromosomes',
options=[{'label': str(i), 'value': str(i)} for i in range(1, 23)],
multi=True,
value=[str(i) for i in range(1, 23)]
),
dashbio.Ideogram(
id='my-dashbio-ideogram'
),
html.Div(id='ideogram-rotated')
])
@app.callback(
dash.dependencies.Output('my-dashbio-ideogram', 'chromosomes'),
[dash.dependencies.Input('displayed-chromosomes', 'value')]
)
def update_ideogram(value):
return value
@app.callback(
dash.dependencies.Output('ideogram-rotated', 'children'),