python - 使用 Dash Cytoscape 在回调中更改节点的标签

Question

我用 Dash Cytoscapes 创建了一些节点。我的最终目标是点击节点后应该出现一个滑块。通过使用此滑块选择一个值，节点的标签应使用所选值更新。由于单击节点后我无法显示滑块，因此我将其永久显示在节点下方。希望你有一些想法来实现我的愿望。

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

app = dash.Dash(__name__)

app.layout = html.Div([
        cyto.Cytoscape(  
        id='node-callback-event',
        layout={'name': 'preset'},
        style={'width': '100%', 'height': '2000px', 'display': 'block'},
        elements=[
            {
                'data': {'id': 'root', 'label': 'test label'},
                'position': {'x': 750, 'y': 750},
                'locked': True
            }
        ]
    ),
        html.Label('Slider'),
        dcc.Slider(
            id='slider-update-value',
            min=0,
            max=100,
            value=0,
            step=0.01,
            tooltip = {"placement": "bottom", 'always_visible': False },
            included=False,
            updatemode='drag',
        ),
    ], 
    style={'padding': 1, 'flex': 1})

@app.callback(Output('node-callback-event', 'elements'),
              Input('node-callback-event', 'tapNodeData'),
              Input('slider-update-value', 'value'))
def displayTapNodeData(node, probability):
    if node:
        node['label'] += str(probability)


# how to assign the value to the nodes label? 

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

Answer 1

您可以将滑块包裹在 div 中元素，默认情况下您可以使用 hidden 隐藏该元素属性(property) :

html.Div(id='slider', hidden=True, children=[
    html.Label('Slider'),
    dcc.Slider(
        id='slider-update-value',
        # options...
    )
])

然后在使用 tapNodeData 选择节点时更新该属性或 selectedNodeData事件，我在这里使用 selectedNodeData 是因为当您取消选择一个节点时，另一个不会被触发(即，如果您想隐藏滑块):

@app.callback(
    Output('slider', 'hidden'),
    Input('node-callback-event', 'selectedNodeData'))
def displaySlider(data):
    return False if data else True

现在，给定输入 value的滑块，您要更新 Cytoscape 的输出 elements ，给定当前选定节点的状态(再次 tapNodeData 或 selectedNodeData):

@app.callback(Output('node-callback-event', 'elements'),
            Input('slider-update-value', 'value'),
            State('node-callback-event', 'elements'),
            State('node-callback-event', 'selectedNodeData'))
def updateNodeLabel(value, elements, selected):
    if selected:
        # Update only the selected element(s)
        ids = [nodeData['id'] for nodeData in selected]
        nodes = ((i,n) for i,n in enumerate(elements) if n['data']['id'] in ids)
        for i, node in nodes:
            elements[i]['data']['label'] = 'test-' + str(value)
    return elements

@see Cytoscape callbacks和 events