CODEWITHSUNDEEP
htmlpython-3.xjupyter-notebookipywidgetsvoila
marv722
marv722

Reputation: 67

Jupyter Notebook Voila Extension not displaying modal popup containing HTML Content

I am creating a dashboard using ipywidgets v7.7 with Python v3.6.8. Everything is working great. I have a widget.Button (labeled "Help") that, when pressed, loads a markdown file containing a user guide for my dashboard, creates a modal popup with the markdown content converted to HTML, and then displays it. This works great in a standalone Jupyter notebook, but when I display my dashboard using the Voila extension, nothing gets displayed when I press the Help button.

I found this post from last year, and implemented the solution as the suggested code with one difference: the src variable in the IFrame constructor is not a file with the HTML extension; it is the modal content converted to HTML. My function is a class function, while the variable, iframe_out, is a global variable defined outside the scope of the class definition. The variable, out, for my dashboard, is of type widgets.interactive_output, and I tried using that variable first - didn't work - so, then I just did exactly as the code snippet suggests, and instantiated a widget of type widgets.Output and assign it to the variable, iframe_out.

However, nothing continues to be displayed when I press the Help button. The code is enclosed, can someone help me figure out what the problem is? Thank you.

@iframe_out.capture()
def display_help(self, button):
    with open("help.md", "r") as f:
        help_markdown = f.read()

        # Convert Markdown to HTML with table of contents
        help_html = markdown.markdown(help_markdown, extensions=["extra", "toc"])

        # Create HTML content for the modal
        modal_content = f"""
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Modal</title>
        </head>
        <body>
            <div id="helpModal" style="position: fixed; z-index: 1000; left: 0; top: 110px; width: 100%; height: 100%; 
            background-color: rgba(255, 255, 255, 1); display: none;">
                <div style="position: relative; margin: 1% auto; padding: 20px; width: 95%; background-color: antiquewhite; 
                border-radius: 10px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0);">
                    <div style="text-align: left; overflow-y: scroll; max-height: 400px;">
                        {help_html}
                    </div>
                    <button onclick="closeModal()" style="background-color: #4CAF50; color: white; padding: 10px 20px; 
                    border: none; border-radius: 5px; cursor: pointer; margin-top: 20px;">Close</button>
                </div>
            </div>
        </body>
        <script>
            function openModal() {{
                document.getElementById('helpModal').style.display = 'block';
            }}
            function closeModal() {{
                document.getElementById('helpModal').style.display = 'none';
            }}
            openModal();                
        </script>
        """
        
        # Display the HTML content
        display(IFrame(src=modal_content, width=700, height=600))

Upvotes: 0

Views: 186

Answers (0)

Related Questions