如何将Plotly Dash点击Cytoscape节点返回的文本转为可跳转URL超链接

核心修改点 #

• 修正回调输出ID不匹配问题：原点击节点回调的输出指向不存在的page-content组件，改为布局中已定义的cytoscape-tapNodeData-output
• 纯文本转可点击超链接：回调返回值从字符串改为html.A组件，配置href属性为NCBI查询地址，新增target="_blank"属性实现点击后新标签页打开
• 修复函数重名问题：原代码中点击、悬浮事件的回调函数重名，调整函数名避免运行报错

完整可运行代码 #

import dash
from dash import dcc
from dash import html
import dash_cytoscape as cyto
from dash.dependencies import Input, Output
import plotly.express as px

dash_elements = [{'data': {'id': '6840', 'label': '6840'}, 'classes': 'black'}, {'data': {'id': '7431', 'label': '7431'}, 'classes': 'red'}, {'data': {'source': '6840', 'target': '7431'}}, {'data': {'id': '6640', 'label': '6640'}, 'classes': 'black'}, {'data': {'id': '5217', 'label': '5217'}, 'classes': 'black'}, {'data': {'source': '6640', 'target': '5217'}}, {'data': {'id': '823', 'label': '823'}, 'classes': 'black'}, {'data': {'id': '7431', 'label': '7431'}, 'classes': 'red'}, {'data': {'source': '823', 'target': '7431'}}]

app = dash.Dash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

default_stylesheet=[
    # Class Selectors
    {
        'selector':'.black',
        'style': {
            'background-color': '#000000',
            'label': 'data(label)'
        },
    },
    {
        'selector':'.red',
        'style': {
            'background-color': '#FF0000',
            'label': 'data(label)'
        },
    },
]

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape-event-callbacks-2',
        elements = dash_elements,
        layout={'name': 'breadthfirst'},
        style={'width': '1000px', 'height': '1000px'},
        stylesheet = default_stylesheet
    ),
    html.P(id='cytoscape-tapNodeData-output'),
    html.P(id='cytoscape-tapEdgeData-output'),
    html.P(id='cytoscape-mouseoverNodeData-output'),
    html.P(id='cytoscape-mouseoverEdgeData-output')
])

# 点击节点回调，返回可点击超链接
@app.callback(Output('cytoscape-tapNodeData-output', 'children'),
              Input('cytoscape-event-callbacks-2', 'tapNodeData'))
def display_tap_node_data(data):
    if data:
        gene_url = f"https://www.ncbi.nlm.nih.gov/gene/{str(data['label'])}"
        return html.A(gene_url, href=gene_url, target="_blank")

# 点击边回调
@app.callback(Output('cytoscape-tapEdgeData-output', 'children'),
              Input('cytoscape-event-callbacks-2', 'tapEdgeData'))
def display_tap_edge_data(data):
    if data:
        return f"There is a physical interaction between {str(data['source'])} and {str(data['target'])}"

# 悬浮节点回调，如需悬浮也显示超链接可参照点击回调修改
@app.callback(Output('cytoscape-mouseoverNodeData-output', 'children'),
              Input('cytoscape-event-callbacks-2', 'mouseoverNodeData'))
def display_mouseover_node_data(data):
    if data:
        return f"https://www.ncbi.nlm.nih.gov/gene/{str(data['label'])}"

# 悬浮边回调
@app.callback(Output('cytoscape-mouseoverEdgeData-output', 'children'),
              Input('cytoscape-event-callbacks-2', 'mouseoverEdgeData'))
def display_mouseover_edge_data(data):
    if data:
        return f"There is a physical interaction between {str(data['source'])} and {str(data['target'])}"

if __name__ == '__main__':
   app.run_server()

可选调整 #

如果需要鼠标悬浮节点时也显示可点击超链接，只需把display_mouseover_node_data函数的返回值改为和点击节点回调一致的html.A组件即可。

内容的提问来源于stack exchange，提问作者Slowat_Kela