st.graphviz_chart examples not rendering

[andfanilo]

Summary

Was working on providing a small example of using graphviz to render Decision Tree in streamlit/streamlit#1330 but code did not work. Then tried the 2 examples from API reference and none worked on my machine. Then tried this one. All got the same errors about viz not being defined 🤔 is it only me ?

Steps to reproduce

graph = graphviz.Digraph()
graph.edge('run', 'intr')
graph.edge('intr', 'runbl')
graph.edge('runbl', 'run')
graph.edge('run', 'kernel')
graph.edge('kernel', 'zombie')
graph.edge('kernel', 'sleep')
graph.edge('kernel', 'runmem')
graph.edge('sleep', 'swap')
graph.edge('swap', 'runswap')
graph.edge('runswap', 'new')
graph.edge('runswap', 'runmem')
graph.edge('new', 'runmem')
graph.edge('sleep', 'runmem')
st.graphviz_chart(graph)

st.graphviz_chart('''
    digraph {
        run -> intr
        intr -> runbl
        runbl -> run
        run -> kernel
        kernel -> zombie
        kernel -> sleep
        kernel -> runmem
        sleep -> swap
        swap -> runswap
        runswap -> new
        runswap -> runmem
        new -> runmem
        sleep -> runmem
    }
''')

Expected behavior:

Displays graph

Actual behavior:

Frontend logs for me

Loading script from “http://localhost:8501/vendor/viz/viz-1.8.0.min.js” with importScripts() was blocked because of a disallowed MIME type (“text/plain”).
NetworkError: WorkerGlobalScope.importScripts: Failed to load worker script at http://localhost:8501/vendor/viz/viz-1.8.0.min.js
uncaught exception: Viz is not defined

Is this a regression?

Probably

Debug info

• Streamlit 0.57.4.dev20200408 and 0.57.3
• Python 3.7
• Conda, Windows 7 64 bit, Firefox

[jrhone]

Hmm it works for me locally

• Mac, Firefox
• Python 3.7.4
• Streamlit 0.57.3

And on my Windows VM

• Windows 10, Firefox
• Python 3.8
• Streamlit 0.57.3

[arraydude]

It is working fine also for me:

• Mac, Chrome & Firefox
• Python 3.8.2
• Streamlit 0.57.3

[jrhone]

@andfanilo Can you run the following in your terminal and share the output?
python -c "import mimetypes; print (mimetypes.guess_type('lunr.js'))"

It should return ('application/javascript', None)

If not, can you try the instructions here? But create the mime type for javascript not for pdf

[andfanilo]

Works like a charm, thanks @jrhone ! Guess one of my IDEs wanted to have fun with file extensions...

[jrhone]

Well, seems like Firefox added some new security features and your OS didn't have Mime Types configured correctly.

I wonder if we should add this to the documentation somewhere or automate this check if possible and provide a warning to the user.

Going to re-open for now so we can address the scenario fully.

Thanks for confirming the fix!

[andfanilo]

This may explain things, so for other readers I was on Firefox 75 here and python -c "import mimetypes; print (mimetypes.guess_type('lunr.js'))" returned text/plain.

[randyzwitch]

Going to close this, since it hasn't come up again since I've been at the company. Obviously, if people start mentioning this again, we can add a note to the docs

[GuyYeates]

Graphviz not showing in Chrome (Version 80.0.3987.132 (Official Build) (64-bit) ).

Code built from Visual Studio Code on Windows 10 machine.

Code used was from https://docs.streamlit.io/en/stable/api.html#streamlit.graphviz_chart
Running python -c "import mimetypes; print (mimetypes.guess_type('lunr.js'))" in console returned "text/plain"

Registry changes
.js node was present under "HKEY_LOCAL_MACHINE" at Computer\HKEY_LOCAL_MACHINE\SOFTWARE\Classes.js
I added "ContentType" key with a value of 'application/javascript'

Re-tested with no effect. Opened a new command prompt and re-ran python -c "import mimetypes; print (mimetypes.guess_type('lunr.js'))" which returned "text/plain"

.js node was present in "HKEY_CURRENT_USER" at Checked Computer\HKEY_CURRENT_USER\SOFTWARE\Classes.js
and it had these values "ContentType" = 'text/plain' and "PerceivedType" = 'text'
Changed the ContentType value to 'application/javascript'
Re-tested with no effect. Opened a new command prompt and re-ran python -c "import mimetypes; print (mimetypes.guess_type('lunr.js'))" which returned "text/plain"

Re-set the registry back to the initial position
I ran the app in (chromium) version of Edge and the graph(s) shows as expected

addendum...

Please note in the change in the registry to set .js files to "application/javascript" will allow .js files to run on a machine on a double-click and this has security issues (which is why the mime type for .js files is to "plain text" on my machine). My home laptop has no mimetype set for .js and the graph displays as expected in Chrome (unsure if its version however). If that helps.

Update
Now I find that despite root, local machine and user class entries in registry have .js set to 'application/javascript' Microsoft Edge and Chrome no longer displays the GraphViz graphs

[johnpyrce]

This failed for me with the above symptoms as well.

Windows 10 PC
streamlit 0.76.0

The HKEY_LOCAL_MACHINE/Software/Classes/.js key was correct, but a HKEY_CURRENT_USER/Software/Classes/.js key was "text/plain". I changed this in the registry.

Now the python script reports "('application/javascript', None)". Chrome and Firefox display the chart. But this still fails in the same way in Microsoft Edge (which is what I use by default).
Edge 88.0.705.63
Chrome Version 88.0.4324.150

Javascript console errors in Edge are:

4fc2c1f8-4a0c-487a-8f3f-1c1cc2f7ae8c:4 Refused to execute script from 'http://localhost:8501/vendor/viz/viz-1.8.0.min.js' because its MIME type ('text/plain') is not executable.
onmessage @ 4fc2c1f8-4a0c-487a-8f3f-1c1cc2f7ae8c:4
4fc2c1f8-4a0c-487a-8f3f-1c1cc2f7ae8c:4 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8501/vendor/viz/viz-1.8.0.min.js' failed to load.
at onmessage (blob:http://localhost:8501/4fc2c1f8-4a0c-487a-8f3f-1c1cc2f7ae8c:4:21)
15.4f7ab330.chunk.js:1 Uncaught Viz is not defined

[snehankekre]

Closing this issue as one already exists in the Streamlit library repo: streamlit/streamlit#3887