使用 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屬性hidden ：

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 ，鑒於當前所選節點的狀態（S）（ 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回調和事件