如何在仪表板上显示/隐藏 dash-cytoscape 对象？

如何解决如何在仪表板上显示/隐藏 dash-cytoscape 对象？

我目前正在开发一个 Plotly Dash 网络应用程序，我想在其中使用父 div 上的显示样式或通过重绘它来显示/隐藏细胞景观图（我也对其他解决方案开放），我尝试过的所有方法都不起作用.
有什么我遗漏的吗？

以下是显示此问题的代码示例：

import json

import dash
import dash_bootstrap_components as dbc
import dash_cytoscape as cyto
import dash_html_components as html
import requests
from dash.dependencies import Input,Output


def load_json(st):
    if 'http' in st:
        return requests.get(st).json()
    else:
        with open(st,'rb') as f:
            x = json.load(f)
        return x


app = dash.Dash(__name__)
server = app.server


# Load Data
elements = load_json('https://js.cytoscape.org/demos/colajs-graph/data.json')
stylesheet = load_json('https://js.cytoscape.org/demos/colajs-graph/cy-style.json')

# App
app.layout = html.Div(
    children=[
        dbc.Button("display",id="btn_display"),dbc.Button("redraw",id="btn_redraw"),html.Div(
            [
                cyto.Cytoscape(
                    id='cytoscape-responsive-layout',elements=elements,stylesheet=stylesheet,layout={
                        'name': 'cose',},responsive=True
                )
            ],id="div",style={"display": "inherit"}
        )
    ]
)

# callbacks
@app.callback(Output("div","style"),Input("btn_display","n_clicks"))
def style_toggle(n: int):
    disp = {"display": "none" if (n is not None and n % 2 == 1) else "inherit"}
    return disp


@app.callback(Output("div","children"),Input("btn_redraw","n_clicks"))
def redraw(_):
    return [
        cyto.Cytoscape(
            id='cytoscape-responsive-layout',layout={
                'name': 'cose',responsive=True
        )
    ]


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

style_toggle 回调正确隐藏了 div，但是当它将显示样式设置为 inherit 时，图表不会重新出现。

redraw 回调似乎没有效果。

这是我的环境：

$ python -m pip list | grep dash
dash                      1.20.0              
dash-bootstrap-components 0.11.1              
dash-core-components      1.16.0              
dash-cytoscape            0.2.0               
dash-daq                  0.5.0               
dash-extensions           0.0.51              
dash-html-components      1.1.3               
dash-renderer             1.9.1               
dash-table                4.11.3              
jupyter-dash              0.4.0 

编辑：事实证明 responsive=True 参数是原因，我已经重新组织了我的仪表板以使其在没有...的情况下工作...

解决方法

RadaKk，这是一种可能的解决方法，将 cytoscape 元素返回为空或已填充以显示或不显示：

import json

import dash
import dash_bootstrap_components as dbc
import dash_cytoscape as cyto
import dash_html_components as html
import requests
from dash.dependencies import Input,Output,State
from dash.exceptions import PreventUpdate


def load_json(st):
    if 'http' in st:
        return requests.get(st).json()
    else:
        with open(st,'rb') as f:
            x = json.load(f)
        return x


app = dash.Dash(__name__)
server = app.server


# Load Data
default_elements = load_json('https://js.cytoscape.org/demos/colajs-graph/data.json')
stylesheet = load_json('https://js.cytoscape.org/demos/colajs-graph/cy-style.json')

# App
app.layout = html.Div(
    children=[
        dbc.Button("display",id="btn_display"),dbc.Button("redraw",id="btn_redraw"),html.Div(
            [
                cyto.Cytoscape(
                    id='cytoscape-responsive-layout',elements=default_elements,stylesheet=stylesheet,layout={
                        'name': 'cose',},responsive=True
                )
            ],id="div",style={"display": "block"}
        )
    ]
)


@app.callback(Output("cytoscape-responsive-layout","elements"),Input("btn_display","n_clicks"),prevent_initial_call=True)
def redraw(n:int):
    if (n is not None and n % 2 == 1):
        elements=[]
    else:
        elements=default_elements
    return elements


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