Cytoscape incorrect value elements on server but working on localhost

Dash Python
1

I have a containerized dash app that I run with a long_callback and redis/celery, I have this configured with docker-compose and in the long_callback I do some work with networkx graphs and return data from a function to back to the long_callback, which updates the front-end with some data, however on the front-end there is a Cytoscape graph which some nodes + edges are sent to in order to display a graph. This all works locally and I can see the graph and other data on the front-end. But as soon as I push to the server where it is deployed into pods on kubernetes and run a simulation, I see the celery task completes successfully and the data is returned, the data for the table is displayed, however the data for the graph is not instead I get the error:

Invalid argument `elements` passed into Cytoscape with ID "graph-plot".

It shows the value provided (this is an example of edges + nodes I have abbreviated it here, the first dictionary is the edge and the latter is the node):

[
  {
    "data": {
      "id": "G_1111",
      "source": "G_1111_100",
      "target": "M_111_100",
      "width": 21,
      "label": 1
    }
  },
  {
    "data": {
      "id": "AB_111_0011",
      "label": "BP_0050_00111-260-06",
      "kind": "item"
    }
  }
]

and the create_graph function is like so:

def create_graph(id_input, elements):
    return html.Div(
        cyto.Cytoscape(
            id=id_input,
            layout={
                "name": "dagre",
                "rankDir": "LR",
                "rankSep": 200,
                "fit": False,
                "directed": True,
            },
            pan={"x": 100, "y": 100},
            style={
                "width": "100%",
                "height": "450px",
                "background-color": colors["grey3"],
            },
            stylesheet=[
                {
                    "selector": "node[kind='item']",
                    "style": {
                        "content": "data(label)",
                        "shape": "roundrectangle",
                        "background-color": colors["green1"],
                        "border-width": 1,
                        "border-color": "#2f2f2f",
                        "width": "200px",
                        "height": "80px",
                        "text-halign": "center",
                        "text-valign": "center",
                        "text-wrap": "wrap",
                        "color": "rgb(255,255,255)",
                        "font-family": "Helvetica, Arial, sans-serif",
                        "font-size": "1.0em",
                        "line-height": 1.5,
                    },
                },
                {
                    "selector": "node[kind='item_2']",
                    "style": {
                        "content": "data(label)",
                        "shape": "roundrectangle",
                        "background-color": colors["blue0"],
                        "border-width": 1,
                        "border-color": "#2f2f2f",
                        "width": "200px",
                        "height": "80px",
                        "text-halign": "center",
                        "text-valign": "center",
                        "text-wrap": "wrap",
                        "color": "rgb(255,255,255)",
                        "font-family": "Helvetica, Arial, sans-serif",
                        "font-size": "1.0em",
                        "line-height": 1.5,
                    },
                },
                {
                    "selector": "node[kind='purchase_item']",
                    "style": {
                        "content": "data(label)",
                        "shape": "roundrectangle",
                        "background-color": colors["blue1"],
                        "border-width": 1,
                        "border-color": "#2f2f2f",
                        "width": "200px",
                        "height": "80px",
                        "text-halign": "center",
                        "text-valign": "center",
                        "text-wrap": "wrap",
                        "color": "rgb(255,255,255)",
                        "font-family": "Helvetica, Arial, sans-serif",
                        "font-size": "1.0em",
                        "line-height": 1.5,
                    },
                },
                {
                    "selector": "edge",
                    "style": {
                        "target-arrow-shape": "triangle",
                        "target-arrow-color": "#808080",
                        # "source-arrow-color": "black",
                        "line-color": "#333",
                        "line-color": "#808080",
                        "width": "data(width)",
                        "curve-style": "bezier",
                        "label": "data(label)",
                    },
                },
            ],
            elements=elements,
        )
    )

These are the versions I am using:

dash==2.4.1
dash-bootstrap-components==1.1.0
dash-core-components==2.0.0
dash-cytoscape==0.3.0
dash-extensions==0.1.3
dash-html-components==2.0.0
dash-table==5.0.0

In the actual accordion the create_graph is called like so:

  dbc.Row(
      dbc.Col(
          create_graph("graph-plot", []),
      ),
  ),

Is there any reason why it works locally in my container and computer and not on the server? I should also mention I was previously using a version of dash dash==1.20.0 and it displayed the graph.

2

Using dash-cytoscape==0.2.0 fixed it, but I am still confused as to why this is? It worked locally with version 0.3.0, so it should really work on the server as well, any explanation for this?

3

Hi, apologies for a divergent question, I am trying to setup my dash application (which is dockerized) along with redis and celery for background callbacks. I have been using the documented way of setting up the celery to redis configuration in my main app.py as follows:

if "REDIS_URL" in ENV:
    # Use Redis & Celery if REDIS_URL set as an env variable
    from celery import Celery

    celery_app = Celery(
        __name__, broker=ENV["REDIS_URL"], backend=ENV["REDIS_URL"]
    )
    background_callback_manager = CeleryManager(
        celery_app, cache_by=[lambda: launch_uid], expire=60
    )

else:
    # Diskcache for non-production apps when developing locally
    import diskcache

    cache = diskcache.Cache("./cache")
    background_callback_manager = DiskcacheManager(
        cache, cache_by=[lambda: launch_uid], expire=60
    )

My docker-compose has the dash application, along with a redis container, but since I am still not getting a successful redis connection (diskcache works fine, but not celery), I am wondering: is there a need for a specific additional celery container for this to work ? Or a command to launch a celery worker in the main application container ?

Would it be at all possible for you to share some insight about you docker setup for dash + celery + redis ?