Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot replicate documentation example #177

Open
anfoss opened this issue Jun 2, 2022 · 0 comments
Open

Cannot replicate documentation example #177

anfoss opened this issue Jun 2, 2022 · 0 comments

Comments

@anfoss
Copy link

anfoss commented Jun 2, 2022

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 anfoss changed the title Cannot replicate example. Cannot replicate documentation example Jun 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant