✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Display image produced by JS code in Dash

Dear readers,

I want to display an image on a Dash page that is generated by some JS code. See the description here: https://www.altmetric.com/assets/Getting_Started_Altmetric_Badges.pdf

In a static HTML page I include this script “<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>” and this DIV will show me the image:
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>

Now I want to display this image after calling a callback that gives me the hover position on a graph:

Here the variable badgelink contains a text like “<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>”. By default the DIV with ID text-content is empty: html.Div(id='text-content',children=[html.Div("Thing 1")]),

Unfortunately this image is never shown. I have the impression the JS file is never loaded. I tried many ways to solve this: inclusing the JS file in the ASSETS directory in Visual Studio; or serve scripts locally (app.scripts.config.serve_locally) with TRUE or FALSE; and include the script with:

external_scripts = ['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']
app = dash.Dash(__name__, external_scripts=external_scripts)

But None of this works…

What I observe when inspecting the generated HTML code (by Visual Studio) I see that the SCRIPT code is a bit altered to something like this: <script type="text/javascript" src="Research%20Performance%20Report_files/embed.js"></script> but when I manually edit this code to what it should be: <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>like in the documentation and save the local HTML file, the badge/image is shown ! Thus, the problem seems to be that Visual Studio makes the JS file a local file and then the badge (or function that generates the badge) is not working anymore… :frowning:

Any suggestions or someone who has been working with Altmetric badges before in Dash ?

Kind regards,
IvoB