Unable to load MultiQC reports using streamlit components

Using Streamlit
1

Hey

I’m trying to load the MultiQC report that can be found here: Upload Files | Free File Upload and Transfer Up To 20 GB. However, whenever I use streamlit components to load it, I can’t seem to open it.

These are the steps I’m going through - I’m first downloading the html file from azure and then loading into html


                report_content = azure_storage.download_file(selected_report_path)

                report_content_str = report_content.decode("utf-8")
                encoded_html = base64.b64encode(report_content_str.encode()).decode()

                object_html = f"""
                <div style="width: 100%; height: 100vh; overflow: auto;">
                    <object type="text/html" data="data:text/html;base64,{encoded_html}" style="width: 100%; height: 100%;"></object>
                </div>
                """
                st.components.v1.html(object_html, height=1000)

The “report_content” should just be the same of the actual report HTML loaded locally

How can I make this report show in streamlit?

Currently just shows blank:

image
image1009×438 6.38 KB

Other reports work, like FastQC from Nextflow, but this one doesn’t

If I upload just the “report_content” wrapped under the object_html variable it’s like this:

image
image1009×437 21.9 KB

Thanks!

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.