app.py

import dash
import dash_cytoscape as cyto
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

import pandas as pd
import numpy as np
import pyodbc

import json
import sys
import os


def default(o):
    if isinstance(o, np.int64):
        return int(o)
    raise TypeError


# Dash stuff
external_stylesheets = [
    "https://fonts.googleapis.com/css?family=Roboto:300,400,500",
    "https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css",
    "https://fonts.googleapis.com/icon?family=Material+Icons",
]
app = dash.Dash(
    __name__,
    external_stylesheets=external_stylesheets,
    routes_pathname_prefix="/hh-networks/",
)
app.title = "Household networks"
app.layout = html.Div(
    className="mdc-typography",
    children=[
        html.Div(
            children=[
                html.Div(
                    className="mdc-text-field mdc-text-field--outlined mdc-text-field--no-label",
                    children=[
                        dcc.Input(
                            className="mdc-text-field__input",
                            id="group_id-textbox",
                            placeholder="Household key",
                            type="text",
                            value="1508",
                        ),
                        html.Div(
                            className="mdc-notched-outline",
                            children=[
                                html.Div(className="mdc-notched-outline__leading"),
                                html.Div(className="mdc-notched-outline__trailing"),
                            ],
                        ),
                    ],
                ),
                html.Div(
                    className="mdc-text-field-helper-line",
                    children=[
                        html.Div(
                            "Key",
                            className="mdc-text-field-helper-text mdc-text-field-helper-text--persistent",
                        )
                    ],
                ),
            ]
        ),
        dcc.Slider(
            id="date-slider",
            className="mdc-typography--button",
            min=0,
            max=9,
            step=1,
            value=0,
            marks={i: f"Label {i}" for i in range(10)},
        ),
        cyto.Cytoscape(
            id="household-network",
            layout={"name": "breadthfirst", "animate": True},
            style={"width": "100%", "height": "500px"},
            stylesheet=[
                {
                    "selector": "node",
                    "style": {
                        "content": "data(label)",
                        "text-opacity": 0.87,
                        "font-size": 20,
                        "font-family": "Roboto, HelveticaNeue, Helvetica Neue, Helvetica, Segoe UI, sans-serif",
                        "text-valign": "bottom",
                        "background-color": "#616161",
                        "width": 35,
                        "height": 35,
                    },
                },
                {
                    "selector": ".parent",
                    "style": {"background-color": "#2d907f", "text-valign": "top"},
                },
                {
                    "selector": ".edge",
                    "style": {
                        "line-color": "#afd6cf",
                        "width": "5px",
                        "curve-style": "unbundled-bezier",
                    },
                },
                {
                    "selector": ".edge-non-hh",
                    "style": {
                        "line-color": "#e0e0e0",
                        "width": "5px",
                        "curve-style": "unbundled-bezier",
                    },
                },
            ],
        ),
        # Hidden div inside the app that stores the intermediate value
        html.Div(id="intermediate-value", style={"display": "none"}),
    ],
    style={"margin": "auto", "width": "1200px"},
)


@app.callback(
    Output("intermediate-value", "children"), [Input("group_id-textbox", "value")]
)
def update_household(group_id):
    household_network = {}
    time_networks = []
    for i in range(10):
        elements = [
            {"data": {"id": "one", "label": f"Node 1{i}"}, "position": {"x": 75, "y": 75}},
            {
                "data": {"id": "two", "label": f"Node 2{i}"},
                "position": {"x": 200, "y": 200},
            },
            {"data": {"source": "one", "target": "two"}},
        ]
        time_networks.append(elements)

    household_network["time_networks"] = time_networks
    return json.dumps(household_network, default=default)


@app.callback(
    Output("household-network", "elements"),
    [Input("intermediate-value", "children"), Input("date-slider", "value")],
)
def update_date(household_network, date):

    household_network = json.loads(household_network)
    time_networks = household_network["time_networks"]

    return time_networks[date]


if __name__ == "__main__":
    app.run_server(debug=True)
    # app.run_server(host="0.0.0.0", debug=False, port=8080)