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

Question

我目前正在开发一个 Plotly Dash webapp，我想在其中使用父 div 上的显示样式或重绘它来显示/隐藏 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


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',
            elements=elements,
            stylesheet=stylesheet,
            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 参数是原因，我已经重新组织了我的仪表板以在没有...的情况下工作...如果有人有一种解决方法可以保持良好的响应能力。

Answer 1

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)