title: How to show/hide a dash-cytoscape object on a dashboard?
body: <p>I am currently working on a Plotly Dash webapp where I want to show/hide a cytoscape graph using either display style on a parent div or by redrawing it (I am also opened to other solutions), none of what I tried worked.<br />
  Is there something I am missing?</p>
  <p>Here is a code example showing this issue:</p>
  <pre class="lang-python prettyprint-override"><code>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(&quot;display&quot;, id=&quot;btn_display&quot;),
          dbc.Button(&quot;redraw&quot;, id=&quot;btn_redraw&quot;),
          html.Div(
              [
                  cyto.Cytoscape(
                      id='cytoscape-responsive-layout',
                      elements=elements,
                      stylesheet=stylesheet,
                      layout={
                          'name': 'cose',
                      },
                      responsive=True
                  )
              ],
              id=&quot;div&quot;,
              style={&quot;display&quot;: &quot;inherit&quot;}
          )
      ]
  )
  
  # callbacks
  @app.callback(Output(&quot;div&quot;, &quot;style&quot;),
                Input(&quot;btn_display&quot;, &quot;n_clicks&quot;))
  def style_toggle(n: int):
      disp = {&quot;display&quot;: &quot;none&quot; if (n is not None and n % 2 == 1) else &quot;inherit&quot;}
      return disp
  
  
  @app.callback(Output(&quot;div&quot;, &quot;children&quot;),
                Input(&quot;btn_redraw&quot;, &quot;n_clicks&quot;))
  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)
  
  </code></pre>
  <p>The <code>style_toggle</code> callback correctly hide the div but when it set back the display style to <code>inherit</code> the graph does not reappear.</p>
  <p>The <code>redraw</code> callback seems to have no effect.</p>
  <p>And here is my env:</p>
  <pre><code>$ 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 
  </code></pre>
  <p>EDIT: It turns out the <code>responsive=True</code> parameter was the cause, I have reorganized my dashboard to work without... If someone has a workaround which keeps the responsiveness that would be great.</p>