Dash Cytoscape - incorrect fonts display during initial load

[plotly]

Dash Cytoscape - incorrect fonts display during initial load

[xhluca]

In order to load the custom font, you will need to directly load it inside the source file Cytoscape.react.js located in src/lib/components, and build the project it. This means you will likely need a custom version of Dash Cytoscape, which should be very straightforward to do. Please check the development section of the readme for more information.

I presume in this case you are not using a custom font? If you are not, then this might be a bug with either Dash Cytoscape or react-cytoscapejs. In this case, would it be possible for you to create a minimal functioning dash app or react app (without external data if possible) where the problem would appear?

[vivekvs1]

Hi @xhlulu , oh yes, sorry- when I mentioned custom font, I did not mean my own font, but making use of Roboto Condensed. I shall create a minimal example and post here. Thanks.

[xhluca]

I tried using sans-serif font in the following simple app:

import dash
import dash_cytoscape as cyto
import dash_html_components as html

app = dash.Dash(__name__)

stylesheet = [
  {
    "selector": "node",
    "style": {
      "content": "",
      "width": 25,
      "height": 25,
      "background-color": "#999999",
      "background-blacken": 0,
      "background-opacity": 1,
      "shape": "ellipse",
      "border-width": 0,
      "border-style": "solid",
      "border-color": "#999999",
      "border-opacity": 1,
      "padding": "0px",
      "padding-relative-to": "width",
      "compound-sizing-wrt-labels": "include",
      "min-width": 0,
      "min-width-bias-left": 0,
      "min-width-bias-right": 0,
      "min-height": 0,
      "min-height-bias-top": 0,
      "min-height-bias-bottom": 0,
      "background-width": "auto",
      "background-height": "auto",
      "label": "data(label)",
      "color": "black",
      "text-opacity": 1,
      "font-family": "sans-serif",
      "font-style": "italic",
      "font-weight": "normal",
      "text-transform": "none",
      "text-wrap": "none",
      "text-halign": "center",
      "text-valign": "center",
    }
  },
  {
    "selector": "edge",
    "style": {
      "curve-style": "haystack",
      "line-color": "#999999",
      "line-style": "solid",
      "loop-direction": "-45deg",
      "loop-sweep": "-90deg",
      "label": "",
      "source-label": "",
      "target-label": "",
      "color": "black",
      "text-opacity": 1,
      "font-style": "normal",
      "font-weight": "normal",
      "text-transform": "none",
      "text-wrap": "none"
    }
  }
]

elements = [
  {
    "data": {
      "id": "one",
      "label": "Node 1"
    },
    "position": {
      "x": 50,
      "y": 50
    }
  },
  {
    "data": {
      "id": "two",
      "label": "Node 2"
    },
    "position": {
      "x": 200,
      "y": 200
    }
  },
  {
    "data": {
      "id": "three",
      "label": "Node 3"
    },
    "position": {
      "x": 100,
      "y": 150
    }
  },
  {
    "data": {
      "id": "four",
      "label": "Node 4"
    },
    "position": {
      "x": 400,
      "y": 50
    }
  },
  {
    "data": {
      "id": "five",
      "label": "Node 5"
    },
    "position": {
      "x": 250,
      "y": 100
    }
  },
  {
    "data": {
      "id": "six",
      "label": "Node 6",
      "parent": "three"
    },
    "position": {
      "x": 150,
      "y": 150
    }
  },
  {
    "data": {
      "source": "one",
      "target": "two",
      "label": "Edge from Node1 to Node2",
      "id": "d34c14c8-3208-4b66-aa68-a37b10581975"
    }
  },
  {
    "data": {
      "source": "one",
      "target": "five",
      "label": "Edge from Node 1 to Node 5",
      "id": "d95efc5e-1ca5-4ae0-a1df-12f4faec91ad"
    }
  },
  {
    "data": {
      "source": "two",
      "target": "four",
      "label": "Edge from Node 2 to Node 4",
      "id": "f2611d60-66af-41a1-8d97-5459ac6487f1"
    }
  },
  {
    "data": {
      "source": "three",
      "target": "five",
      "label": "Edge from Node 3 to Node 5",
      "id": "dc2fbc41-0da7-427b-a3ab-522db77f98b8"
    }
  },
  {
    "data": {
      "source": "three",
      "target": "two",
      "label": "Edge from Node 3 to Node 2",
      "id": "006c239f-8cd5-4266-a791-bd6474366441"
    }
  },
  {
    "data": {
      "source": "four",
      "target": "four",
      "label": "Edge from Node 4 to Node 4",
      "id": "3adec106-1529-4def-827c-b66993ab310a"
    }
  },
  {
    "data": {
      "source": "four",
      "target": "six",
      "label": "Edge from Node 4 to Node 6",
      "id": "7ea0399a-36bf-4307-8feb-5c40bfa67ca5"
    }
  },
  {
    "data": {
      "source": "five",
      "target": "one",
      "label": "Edge from Node 5 to Node 1",
      "id": "29cd6af3-78bc-4246-a432-df2052968f0b"
    }
  }
]

app.layout = html.Div([
    cyto.Cytoscape(
        id='cytoscape',
        elements=elements,
        style={
            'height': '65vh',
            'width': 'calc(100% - 300px)'
        },
        stylesheet=stylesheet
    )
])


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

Here's what it looks like:

[vivekvs1]

Okay, I think I figured out when the bug is happening, except I dont understand why its happening.

So for my project, I have a folder called assets where I have my.cssfiles. In my base.css file I have

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

to import the font for rendering in the Dash page. Weirdly, if I remove that line from the css, the font font is loading fine in Cytoscape without any issues.

[vivekvs1]

Here is my code:

import dash
import dash_cytoscape as cyto
import dash_html_components as html


APP = dash.Dash(__name__)
SERVER = APP.server


elements = [
    #
    # Nodes
    {
        "data": {"id": "FAN", "label": "FAN \n Sound Power Level"},
        "classes": "FAN",
        "user_data": {"id": "fan", "units": "metric", "IL": [0, 0, 0, 0, 0, 0, 0]},
    },
    {"data": {"id": "DUCT", "label": "DUCT\n 240mm x 300mm x 1mm"}, "classes": "DUCT"},
    {"data": {"id": "ELBOW", "label": "ELBOW"}, "classes": "ELBOW"},
    {"data": {"id": "ERL", "label": "END REFLECTION"}, "classes": "ERL"},
    {"data": {"id": "FLEX_DUCT", "label": "FLEX DUCT"}, "classes": "FLEX_DUCT"},
    {"data": {"id": "ROOM_EFFECT", "label": "ROOM EFFECT"}, "classes": "ROOM_EFFECT"},
    {"data": {"id": "BRANCH", "label": "BRANCH"}, "classes": "BRANCH"},
    #
    # branches
    {"data": {"source": "DUCT", "target": "BRANCH"}},
    {"data": {"source": "FAN", "target": "DUCT", "label": "Edge from Node1 to Node2"}},
    {"data": {"source": "BRANCH", "target": "ELBOW"}},
    {"data": {"source": "BRANCH", "target": "ERL"}},
    {"data": {"source": "BRANCH", "target": "FLEX_DUCT"}},
    {"data": {"source": "BRANCH", "target": "ROOM_EFFECT"}},
]


# Object declaration
cytoscape_stylesheet = [
    {
        "selector": "node",
        "style": {
            "background-color": "BFD7B5",
            "label": "data(label)",
            "font-family": "Roboto Condensed",
            "font-size": "9px",
            "text-wrap": "wrap",
            "text-max-width": 100,
            "height": 50,
            "width": 100,
            "shape": "roundrectangle",
            "text-halign": "center",
            "text-valign": "center",
        },
    },
    {
        "selector": "edge",
        "style": {
            "curve-style": "haystack",
            "line-color": "grey",
            "mid-target-arrow-color": "red",
            # change to source to flip direction of arrow
            "mid-target-arrow-shape": "triangle",
        },
    },
    {
        "selector": ".FAN",
        "style": {
            "background-color": "#5b7297",
            "font-family": "Roboto Condensed",
            "color": "white",
            "font-size": "9px",
            "height": 50,
            "width": 100,
            "label": "data(label)",
            "text-wrap": "wrap",
            "text-max-width": 100,
            "shape": "roundrectangle",
            "text-halign": "center",
            "text-valign": "center",
        },
    },
    {
        "selector": ".ROOM_EFFECT",
        "style": {
            "background-color": "#F64C72",
            "font-family": "Roboto Condensed",
            "color": "white",
            "font-size": "9px",
            "height": 50,
            "width": 100,
            "label": "data(label)",
            "text-wrap": "wrap",
            "text-max-width": 100,
            "shape": "roundrectangle",
            "text-halign": "center",
            "text-valign": "center",
        },
    },
    {
        "selector": ".DUCT",
        "style": {
            "background-color": "#96d1e5",
            "color": "black",
            "font-family": "Roboto Condensed",
            "font-size": "9px",
            "text-wrap": "wrap",
            "text-max-width": 100,
            "height": 50,
            "width": 100,
            "label": "data(label)",
            "shape": "roundrectangle",
            "text-halign": "center",
            "text-valign": "center",
        },
    },
    {
        "selector": ".BRANCH",
        "style": {
            "background-color": "#e27d60",
            "color": "white",
            "font-size": "9px",
            "font-family": "Roboto Condensed",
            "sans-serif" "height": 60,
            "width": 80,
            "label": "data(label)",
            "shape": "diamond",
            "text-halign": "center",
            "text-valign": "center",
        },
    },
    {
        "selector": "node:selected",
        "style": {
            "border-width": "4px",
            "border-style": "double",
            "border-color": "red",
            "label": "data(label)",
        },
    },
]


styles = {
    "json-output": {
        "overflow-y": "scroll",
        "height": "calc(50% - 25px)",
        "border": "thin lightgrey solid",
    },
    "tab": {"height": "calc(98vh - 115px)"},
}


APP.layout = html.Div(
    [
        html.Div(
            [
                html.Div(html.Button(id="button_add", children="Add element")),
                html.Div(html.Button(id="button_remove", children="Remove element")),
                html.Div(
                    children=[
                        cyto.Cytoscape(
                            id="cytoscape",
                            elements=elements,
                            layout={
                                "name": "breadthfirst",
                                "roots": '[id = "FAN"]',
                                "spacingFactor": 0.8,
                            },
                            stylesheet=cytoscape_stylesheet,
                            style={
                                "height": "600px",
                                "width": "1000px",
                                "background-color": "#f5f5fa",
                                "overflow-x": "scroll",
                                "overflow-y": "scroll",
                            },
                            userZoomingEnabled=False,
                            autoRefreshLayout=True,
                        )
                    ]
                ),
                html.Div(id="display", children=[]),
            ]
        )
    ]
)


if __name__ == "__main__":
    APP.run_server(debug=True)

[xhluca]

I presume that when you import a font in CSS, it's the equivalent of adding a custom font (as discussed in the issue you linked). In this case this goes back to my first comment about creating your own version of dash-cytoscape.

[xhluca]

Are you also trying to import your fonts like this?

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[vivekvs1]

I see. Thanks for letting me know @xhlulu .

No I am just using:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

Why, is that a problem?

[xhluca]

I am not familiar enough in CSS to tell the difference, but in my case using @font-face to import the fonts seem to work pretty well for Cytoscape.

Furthermore, more research brought me to this thread warning about using @import. Maybe try to change your font import to @font-face and see if it makes any difference?

[vivekvs1]

Oh I see- thanks @xhlulu. I tried to use @font-face this time -

@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url(http://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(http://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(http://fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsDR-eWpsHSw83BRsAQElGgc.ttf) format('truetype'); } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url(http://fonts.gstatic.com/s/robotocondensed/v13/b9QBgL0iMZfDSpmcXcE8nDokq8qT6AIiNJ07Vf_NrVA.ttf) format('truetype'); }

Still the same issue persists. Maybe I should try to load the font in a seperate verion of cytoscape like you had suggested before.

[xhluca]

Sounds good! When you said that you remove @import, and that it works, do you mean that the font loads correctly? If so, do you know how that could be possible considering you haven't add that font in the CSS?

[vivekvs1]

Yes, I am thinking that its loading the font from my computer. I can try uninstalling the font and see if it makes any difference.

[vivekvs1]

I uninstalled my system font for Roboto Condensed. Now, same issue persists with both the methods of import. And without importing the font, it falls back to serif font.

Are you not able to reproduce the same problem?

[xhluca]

I wasn't able to reproduce the error using the sandbox app (usage-advanced). I don't know how you configured your app so it's hard for me to reproduce it. Could you create a Github repository with a minimal dash app containing the problem?

[vivekvs1]

Sure- thanks. Ill share by today. Thanks for your help :)

[xhluca]

You are welcome! Take your time.

[xhluca]

@vivekvs1 were you able to solve your problem?

[vivekvs1]

Hi @xhlulu ,

Unfortunately no :(. I have shared a simple code to demonstrate my problem. Here is the link to the repository: https://github.com/vivekvs1/Cytoscape-test

Weirdly, the font loads fine when I delete the importing of the Roboto fonts in the 'fonts.css' file.

Thanks,
Vivek

[vivekvs1]

Hi @xhlulu : Are you able to reproduce this issue? I have tried everything from deleting the local fonts etc, but still seem to have this issue :(

[daddycocoaman]

@vivekvs1 I was able to get my nodes to change to an imported font. I also have my .css file in the assets folder as well as my .ttf font files.

@font-face{
    font-family: 'Fira Mono';
    src: url('FiraMono-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

Loads without any issue. Try changing your src: local('Roboto Condensed Bold') to src: url(<RobotoFileNameWithExtension>).

Arial Font:

Imported Fira Mono:

[vivekvs1]

Hi @daddycocoaman : thanks for the input. Interestingly, if I load the elements of the cytoscape from a 'Store' component or through 'Upload', the fonts render correctly. Its only when I pre-declare the elements, when the fonts incorrectly load.

Let me try your suggestion and report back. Thanks!!

[Mellis84]

Hey @vivekvs1 I solved the same issue changing:

  node {
    font-family: 'Roboto Slab', serif;
  }

In my node styles to:

  node {
     font-family: "Roboto Slab";
  }

Could be that it screws up having the fallback font? i'm not sure.

[xhluca]

@vivekvs1 Does @Mellis84 approach solve the issue?

[xhluca]

Since this issue seems to have stalled, I'll close it for now. If the problem persists, feel free to reopen this.