dash-cytoscape icon indicating copy to clipboard operation
dash-cytoscape copied to clipboard

Cannot replicate documentation example

Open anfoss opened this issue 3 years ago • 0 comments

I am trying to obtain a two column layout as shown here https://github.com/plotly/dash-cytoscape/blob/master/usage-stylesheet.py, where the network is on 8 cols and the tabs are on 4 cols. However, even when I copy paste and the provided example the network overflows to more than 8 columns. Is the example code still working with Dash >2?

Screen Shot 2022-06-02 at 11 06 58 AM

Description

Steps/Code to Reproduce

Example:

from dash import Dash, html, Output, Input, dcc, dash_table
import json
import pandas as pd
import dash_bootstrap_components as dbc
import dash_cytoscape as cyto
import networkx as nx

app = Dash(__name__)
server = app.server

# ###################### DATA PREPROCESSING ######################


with open('sample.txt', 'r') as f:
    network_data = f.read().split('\n')

# We select the first 750 edges and associated nodes for an easier visualization
edges = network_data[:750]
nodes = set()

cy_edges = []
cy_nodes = []

for network_edge in edges:
    source, target = network_edge.split(" ")

    if source not in nodes:
        nodes.add(source)
        cy_nodes.append({"data": {"id": source, "label": "User #" + source[-5:]}})
    if target not in nodes:
        nodes.add(target)
        cy_nodes.append({"data": {"id": target, "label": "User #" + target[-5:]}})

    cy_edges.append({
        'data': {
            'source': source,
            'target': target
        }
    })

default_stylesheet = [
    {
        "selector": 'node',
        'style': {
            "opacity": 0.65,
        }
    },
    {
        "selector": 'edge',
        'style': {
            "curve-style": "bezier",
            "opacity": 0.65
        }
    },
]

# ################################# APP LAYOUT ################################
styles = {
    'json-output': {
        'overflow-y': 'scroll',
        'height': 'calc(50% - 25px)',
        'border': 'thin lightgrey solid'
    },
    'tab': {'height': 'calc(98vh - 80px)'}
}

app.layout = html.Div([
    html.Div(className='eight columns', children=[
        cyto.Cytoscape(
             id='cytoscape',
             elements=cy_edges + cy_nodes,
            style={
                'height': '95vh',
                'width': '100%'
            }
        )
    ]),

    html.Div(className='four columns', children=[
        dcc.Tabs(id='tabs', children=[
            dcc.Tab(label='Control Panel', children=[
                html.H1(
                        "Something",
                        className="text-center",
                    ),
            ]),

            dcc.Tab(label='JSON', children=[
                html.Div(style=styles['tab'], children=[
                    html.H1(
                        "Something else",
                        className="text-center",
                    ),
                ])
            ])
        ]),

    ])
])


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

I removed all callbacks and most of the components to shorten it.

conda list | grep dash
dash                      2.3.1                    pypi_0    pypi
dash-bio                  1.0.1                    pypi_0    pypi
dash-bootstrap-components 1.1.0                    pypi_0    pypi
dash-core-components      2.0.0                    pypi_0    pypi
dash-cytoscape            0.2.0                    pypi_0    pypi
dash-extensions           0.1.0                    pypi_0    pypi
dash-html-components      2.0.0                    pypi_0    pypi
dash-table                5.0.0                    pypi_0    pypi`

Expected Results

Replicate the layout obtained in the example.

conda list | grep dash
dash                      2.3.1                    pypi_0    pypi
dash-bio                  1.0.1                    pypi_0    pypi
dash-bootstrap-components 1.1.0                    pypi_0    pypi
dash-core-components      2.0.0                    pypi_0    pypi
dash-cytoscape            0.2.0                    pypi_0    pypi
dash-extensions           0.1.0                    pypi_0    pypi
dash-html-components      2.0.0                    pypi_0    pypi
dash-table                5.0.0                    pypi_0    pypi`

anfoss avatar Jun 02 '22 18:06 anfoss