def test_dbci001_graph_type(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(simple_app_layout(
dash_bio.Circos(
id=_COMPONENT_ID,
layout=_data['GRCh37'],
)
))
histogram_layout = [
{'type': 'HISTOGRAM', 'data': _data['histogram'][:5]}
]
simple_app_callback(
app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='tracks',
test_prop_value=json.dumps(histogram_layout),
prop_value_type='dict',
validation_fn=lambda x: json.dumps(x) == json.dumps(histogram_layout)
)
# there should be five bins in the histogram
assert len(dash_duo.find_elements('path.bin')) == 5
def test_dbci002_inner_outer_radii(dash_duo):
app = dash.Dash(__name__)
app.layout = html.Div(simple_app_layout(
dash_bio.Circos(
id=_COMPONENT_ID,
layout=_data['GRCh37']
)
))
change_radii_config = {'innerRadius': 20, 'outerRadius': 100}
simple_app_callback(
app,
dash_duo,
component_id=_COMPONENT_ID,
test_prop_name='config',
test_prop_value=json.dumps(change_radii_config),
prop_value_type='dict',
validation_fn=lambda x:
x['innerRadius'] == change_radii_config['innerRadius']
and x['outerRadius'] == change_radii_config['outerRadius']
)
chr_one_div = dash_duo.find_element('path#chr1')
assert int(chr_one_div.size['width']) == 41
assert int(chr_one_div.size['height']) == 81
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/sample_data/circos_graph_data.json').read()
circos_graph_data = json.loads(data)
app.layout = html.Div([
dashbio.Circos(
id='my-dashbio-circos',
layout=circos_graph_data['GRCh37'],
selectEvent={"0": "hover", "1": "click", "2": "both"},
tracks=[{
'type': 'CHORDS',
'data': circos_graph_data['chords'],
'config': {
'tooltipContent': {
'source': 'source',
'sourceID': 'id',
'target': 'target',
'targetID': 'id',
'targetEnd': 'end'
}
}
}]
),
"Graph type:",
dcc.Dropdown(
id='histogram-chords',
options=[
{'label': x, 'value': x}
for x in ['histogram', 'chords']
],
dashbio.Circos(
id='my-dashbio-circos',
layout=j2['GRCh37'],
style={'fontWeight': 100},
selectEvent={
"0": "hover",
"1": "click",
"2": "both"
},
config={
'innerRadius': 650 / 2 - 80,
'outerRadius': 650 / 2 - 40,
'ticks': {
'display': False,
'labelDenominator': 1000000
},
'labels': {
'position': 'center',
'display': True,
'size': 11,
'color': '#fff',
'radialOffset': 75,
},
},
tracks=[{
'type': 'HIGHLIGHT',
'data': j4['cytobands'],
'config': {
'innerRadius': 650 / 2 - 80,
'outerRadius': 650 / 2 - 40,
'opacity': 0.3,
'tooltipContent': {
"name": "name"
},
'color': {
'name': 'color'
},
},
}],
),
# copy docs code here
data = urlreq.urlopen(
"https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/dash-circos/data/graph_data.json"
).read().decode("utf-8")
circos_graph_data = json.loads(data)
component = html.Div(dashbio.Circos(id='my-dashbio-circos',
layout=circos_graph_data['GRCh37'],
tracks=[{
'type': 'CHORDS',
'data': circos_graph_data['chords'],
'opacity': 0.7,
'color': {
'name': 'color'
},
'config': {
'tooltipContent': {
'source': 'source',
'sourceID': 'id',
'target': 'target',
'targetID': 'id',
'targetEnd': 'end'
}
}
}]),
style={
'transform': 'scale(0.5)',
'width': '200vw',
'margin-left': '-50vw',
'margin-top': '-150px',
'text-align': 'center'
html.Div(
[
# ➊ グラフの種類を選択するRadioItemsコンポーネント
dcc.RadioItems(
id="radio-value",
options=[
{"label": "ヒストグラム外側表示", "value": "ヒストグラム外側表示"},
{"label": "ヒストグラム内側表示", "value": "ヒストグラム内側表示"},
],
value="ヒストグラム外側表示",
)
],
style={"textAlign": "center"},
),
# ➋ Circosコンポーネント
dashbio.Circos(id="circos", layout=circos_graph_data["GRCh37"]),
],
style={"width": "60%", "margin": "5% auto"},
)
# ➌ 選択されたグラフのtracksを返り値とするコールバック
@app.callback(Output("circos", "tracks"), Input("radio-value", "value"))
def update_graph(selected_value):
if selected_value == "ヒストグラム外側表示":
return [
{
# ➍ グラフの種類の設定。外側にヒストグラム表示
"type": "HISTOGRAM",
# ➎ 表示グラフ用データ
"data": circos_graph_data["histogram"],
}
dashbio.Circos(
# ➊ グラフの円枠を作成する
layout=[
{"id": "1", "label": "1", "color": "lime", "len": 100},
{"id": "2", "label": "2", "color": "pink", "len": 200},
{"id": "3", "label": "3", "color": "purple", "len": 150},
{"id": "4", "label": "4", "color": "skyblue", "len": 70},
{"id": "5", "label": "5", "color": "yellow", "len": 180},
],
# ➋ 円枠以外のグラフを作成する
tracks=[
{
# ➌ 作成するグラフの種類を設定する
"type": "CHORDS",
# ➍ グラフのデータを渡す
"data": [
{
"source": {"id": "1", "start": 50, "end": 100},
"target": {"id": "3", "start": 30, "end": 50},
},
{
"source": {"id": "1", "start": 30, "end": 50},
"target": {"id": "4", "start": 0, "end": 70},
},
{
"source": {"id": "2", "start": 100, "end": 200},
"target": {"id": "5", "start": 30, "end": 50},
},
{
"source": {"id": "3", "start": 100, "end": 150},
"target": {"id": "3", "start": 0, "end": 30},
},
],
"opacity": 0.7,
"color": {"name": "color"},
"config": {
# マウスホバー時に表示するデータを設定する
"tooltipContent": {
"source": "source",
"sourceID": "id",
"target": "target",
"targetID": "id",
"targetEnd": "end",
}
},
}
],
)
"label": disease,
"value": disease
} for disease in df[cols[0]]],
value=df[cols[0]].iloc[0]),
dcc.Graph(id="barplot")
]),
html.Div([
html.H3("Circos Graph"),
dashbio.Circos(id="circos",
layout=layout_data,
tracks=[{
'type': 'CHORDS',
'data': circos_data,
'config': {
'tooltipContent': {
'source': 'source',
'sourceID': 'id',
'target': 'target',
'targetID': 'id',
'targetEnd': 'end'
}
}
}])
])
])
])
layout_page_1 = html.Div([
html.H2('Circos Graph'), #Header of page
#specify Circos graph layout
def get_circos(atlas=None, data=None):
C_DATA, COLOR = get_circos_data(data)
if atlas != None:
for i in range(len(C_DATA['chords'])):
if C_DATA['chords'][i]['id'] == atlas:
C_DATA['chords'][i]['color'] = '#000000ff'
else:
C_DATA['chords'][i]['color'] = '#00000022'
c = copy.deepcopy(COLOR)
for i in range(66):
p = excel_file['Module number'][i]
C_DATA['cytobands'][i]['color'] = c[p - 1][0]
if i == atlas:
C_DATA['cytobands'][i]['color'] = C_DATA['GRCh37'][p -
1]['color']
del c[p - 1][0]
return dash_bio.Circos(
id='main-circos',
selectEvent={
'0': 'hover',
'1': 'click'
},
layout=C_DATA['GRCh37'],
config={
'innerRadius': 240,
'outerRadius': 300,
'ticks': {
'display': False,
'labelDenominator': 10000
},
'labels': {
'position': 'center',
'display': False,
'size': 6,
'color': '#000',
'radialOffset': 70,
},
},
tracks=[
{
'type': 'HIGHLIGHT',
'data': C_DATA['cytobands'],
'config': {
'innerRadius': 240,
'outerRadius': 270,
#'opacity': 0.3,
'color': {
'name': 'color'
},
'tooltipContent': {
'name': 'Name'
},
},
},
{
'type': 'HIGHLIGHT',
'data': C_DATA['cytobands_out'],
'config': {
'innerRadius': 270,
'outerRadius': 300,
#'opacity': 0.3,
'color': {
'name': 'color'
},
'tooltipContent': {
'name': "Name"
},
},
},
{
'type': 'CHORDS',
'data': C_DATA['chords'],
'config': {
'tooltipContent': {
'source': 'source',
'sourceID': 'id',
'target': 'target',
'targetID': 'id',
'targetEnd': 'end',
},
'logScale': False,
#'opacity': {'value' : 'opacity'},
'color': {
'name': 'color'
},
},
},
],
size=750,
)
