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.

Sign up for GitHub

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

Jump to bottom

Nothing display on app when using st.graphviz_chart() #3887

Closed
usuixingyili opened this issue Oct 8, 2021 · 12 comments
Closed

Nothing display on app when using st.graphviz_chart() #3887

usuixingyili opened this issue Oct 8, 2021 · 12 comments
Labels
status:awaiting-user-response Issue requires clarification from submitter type:bug Something isn't working

Comments

@usuixingyili
Copy link

streamlit version 1.0.0
graphviz version 0.17

steps to reproduce the bug:

import streamlit as st
from graphviz import Digraph
graph = Digraph()
graph.edge('run', 'intr')
graph.edge('intr', 'runbl')
graph.edge('runbl', 'run')
graph.view()
st.graphviz_chart(graph)

or:

st.graphviz_chart('''
digraph {
run -> intr
intr -> runbl
runbl -> run
}
''')
@usuixingyili usuixingyili added type:bug Something isn't working status:needs-triage Has not been triaged by the Streamlit team labels Oct 8, 2021
@willhuang1997
Copy link
Collaborator

Hi @usuixingyili ,

Thanks for submitting an issue.

Screen Shot 2021-11-01 at 2 47 52 PM

Can you share more information? I tried reproducing it on my local system with streamlit 1.0 and streamlit 1.1.0 and I could not reproduce it. I am getting the above image displaying for me. I also have graphviz .17 so I am a little confused what is the difference in environment to cause this.

Let me know!

@willhuang1997 willhuang1997 added status:awaiting-user-response Issue requires clarification from submitter and removed status:needs-triage Has not been triaged by the Streamlit team labels Nov 1, 2021
@snehankekre snehankekre mentioned this issue Nov 22, 2021
Closed
@kmcgrady
Copy link
Collaborator

kmcgrady commented Dec 7, 2021

Closing due to inactivity.

@kmcgrady kmcgrady closed this as completed Dec 7, 2021
@ayhaidar
Copy link

ayhaidar commented Jul 7, 2022

For me, chrome was not rendering Graphviz graphs, worked properly with Edge.

@mkaut
Copy link

mkaut commented Jul 20, 2022 •
edited

Does not work for me on streamlit 1.11.0 on python 3.9.1 on Windows - st.graphviz_chart() does not seem to do anything.
I tried Firefox and Edge, same result.

I do not think it is a browser issue though, as online examples (such as Streamlit documentation of st.graphviz_chart()) work fine in the same browser.

@kmcgrady Can you re-open the issue, or should I open a new one?

@kmcgrady
Copy link
Collaborator

Hey @ayhaidar and @mkaut .

Confirming, so you are saying you cannot see any of these? These come from our e2e tests that work, so I want to see if these work. We will have to figure out the root cause (we work on Mac/Linux), but some questions that could help.

If you open the Chrome Developer tools, do any logs indicate an error occurred? I have doubts this is a problem on the Python side.

import streamlit as st

import graphviz as graphviz

# basic graph
hello = graphviz.Digraph("Hello World")
hello.edge("Hello", "World")

# styled graph
styled = graphviz.Graph("G", filename="g_c_n.gv")
styled.attr(bgcolor="purple:pink", label="agraph", fontcolor="white")

with styled.subgraph(name="cluster1") as c:
    c.attr(
        fillcolor="blue:cyan",
        label="acluster",
        fontcolor="white",
        style="filled",
        gradientangle="270",
    )
    c.attr(
        "node", shape="box", fillcolor="red:yellow", style="filled", gradientangle="90"
    )
    c.node("anode")

# complex graph
finite = graphviz.Digraph("finite_state_machine", filename="fsm.gv")
finite.attr(rankdir="LR", size="8,5")

finite.attr("node", shape="doublecircle")
finite.node("LR_0")
finite.node("LR_3")
finite.node("LR_4")
finite.node("LR_8")

finite.attr("node", shape="circle")
finite.edge("LR_0", "LR_2", label="SS(B)")
finite.edge("LR_0", "LR_1", label="SS(S)")
finite.edge("LR_1", "LR_3", label="S($end)")
finite.edge("LR_2", "LR_6", label="SS(b)")
finite.edge("LR_2", "LR_5", label="SS(a)")
finite.edge("LR_2", "LR_4", label="S(A)")
finite.edge("LR_5", "LR_7", label="S(b)")
finite.edge("LR_5", "LR_5", label="S(a)")
finite.edge("LR_6", "LR_6", label="S(b)")
finite.edge("LR_6", "LR_5", label="S(a)")
finite.edge("LR_7", "LR_8", label="S(b)")
finite.edge("LR_7", "LR_5", label="S(a)")
finite.edge("LR_8", "LR_6", label="S(b)")
finite.edge("LR_8", "LR_5", label="S(a)")

# draw graphs
st.graphviz_chart(hello)

st.graphviz_chart(styled)

st.graphviz_chart(finite)

# draw graphs in columns

left_graph = graphviz.Digraph("Left")
left_graph.edge("Left", "Graph")

right_graph = graphviz.Digraph("Right")
right_graph.edge("Right", "Graph")

col1, col2 = st.columns([1, 1])

with col1:
    st.graphviz_chart(left_graph)

with col2:
    st.graphviz_chart(right_graph)

@mkaut
Copy link

mkaut commented Jul 20, 2022 via email

@kmcgrady
Copy link
Collaborator

@mkaut This is super helpful. The good news is this helps with diagnosis. The bad news is that we will likely have to diagnose it on your computer. It looks like, it's refusing to run the script /vendor/viz/viz-1.8.0.min.js.

I see This comment has a suggestion here.

Try running: python -c "import mimetypes; print (mimetypes.guess_type('lunr.js'))"

Based on this, this seems like a Python challenge for Windows. See this bug. It seems like Python is inferring a mimetype of the javascript file, but it relies on its setting in the Windows registry.

The issue above has a suggestion that involves registry entries. I wish I could offer more guidance here. This seems like an annoying bug.

@mkaut
Copy link

mkaut commented Jul 20, 2022 •
edited

Thanks, that's what I was afraid of.
I knew about the bug you mentioned - I found that one first, but as you can see it has been closed as a duplicate of this one.
So yes, the python snippet above returns ('text/plain', None) on this machine...

I can confirm that fixing the registry entry HKEY_CLASSES_ROOT\.js solved the issue.
Unfortunately, registry hacking is not an option if I want to make something that also my colleagues can use...

@kmcgrady
Copy link
Collaborator

I'm glad @mkaut that helps you solve the problem if that's not the ideal solution.

I should note that the problem manifests on the client side, BUT the problem is on the server side. Essentially, the Python server, Tornado, is using mimetypes (which is looking at the Windows Registry) and informing the browser the wrong mimetype, which leads to the browser failures. This means that it should not be a problem for users accessing the streamlit app from a different computer as long as the server the app is running on has the correct info set. Perhaps that might handle this issue. :-(

This would be true to developers as well. Anyone developing the streamlit app would need to correct the registry, and the deployed host would need the correct registry.

Hope that helps!

@ghost
Copy link

ghost commented Jul 26, 2022

After changing registry entry HKEY_LOCAL_MACHINE\Software\Classes.js Content Type to text/javascript I still receive console error for MIME type text/plain unfortunately.

@kmcgrady
Copy link
Collaborator

@trevorsweeney I believe it should be application/javascript, but l remember from streamlit/docs#90 (comment) There's two "spaces" the user space and all spaces? Might need to modify it in two places.

I'm not an expert in Windows so if someone knows how to solve it. Please do! :-)

@mkaut
Copy link

mkaut commented Jul 26, 2022 •
edited

@trevorsweeney I found (in different fora online) two additional registry keys that could have an effect: HKEY_CLASSES_ROOT\.js and HKEY_CURRENT_USER\SOFTWARE\Classes\.js.
And I used text/javascript for ContentType.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status:awaiting-user-response Issue requires clarification from submitter type:bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@kmcgrady @mkaut @willhuang1997 @ayhaidar @usuixingyili