✨ Feat: Added html component and tested in streamlit and quarto reports

sayalaruano · sayalaruano · commit b899159a7c98 · 2025-01-24T17:12:49.000+01:00
diff --git a/docs/example_data/MicW2Graph/1_Exploratory_Data_Analysis/3_Extra_info/plot.html b/docs/example_data/MicW2Graph/1_Exploratory_Data_Analysis/3_Extra_info/plot.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Interactive Chart Example</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <h1>Interactive Chart</h1>
+    <canvas id="myChart" width="400" height="200"></canvas>
+    <script>
+        var ctx = document.getElementById('myChart').getContext('2d');
+        var myChart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                datasets: [{
+                    label: 'Sample Data',
+                    data: [12, 19, 3, 5, 2, 3, 9],
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/docs/example_data/MicW2Graph/MicW2Graph_config.yaml b/docs/example_data/MicW2Graph/MicW2Graph_config.yaml
@@ -67,6 +67,10 @@ sections:
       title: Test Md
       file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/MicW2Graph/1_Exploratory_Data_Analysis/3_Extra_info/1_test_md.md
       description: ''
+    - component_type: html
+      title: Plot
+      file_path: /Users/asaru/Documents/DTU/MoNA/vuegen/docs/example_data/MicW2Graph/1_Exploratory_Data_Analysis/3_Extra_info/plot.html
+      description: ''
 - title: Microbial Association Networks
   description: ''
   subsections:
diff --git a/vuegen/config_manager.py b/vuegen/config_manager.py
@@ -5,7 +5,7 @@
 from typing import Dict, List, Optional, Tuple, Union
 
 from . import report as r
-from .utils import assert_enum_value, get_logger
+from .utils import assert_enum_value, get_logger, is_pyvis_html
 
 
 class ConfigManager:
@@ -80,6 +80,12 @@ def _create_component_config_fromfile(self, file_path: Path) -> Dict[str, str]:
         elif file_ext in [fmt.value_with_dot for fmt in r.DataFrameFormat if fmt not in [r.DataFrameFormat.CSV, r.DataFrameFormat.TXT]]:
             component_config ["component_type"] = r.ComponentType.DATAFRAME.value
             component_config ["file_format"] = next(fmt.value for fmt in r.DataFrameFormat if fmt.value_with_dot == file_ext)
+        elif file_ext == ".html":
+            if is_pyvis_html(file_path):
+                component_config["component_type"] = r.ComponentType.PLOT.value
+                component_config["plot_type"] = r.PlotType.INTERACTIVE_NETWORK.value
+            else:
+                component_config["component_type"] = r.ComponentType.HTML.value
         # Check for network formats
         elif file_ext in [fmt.value_with_dot for fmt in r.NetworkFormat]:
             component_config ["component_type"] = r.ComponentType.PLOT.value
@@ -370,6 +376,8 @@ def _create_component(self, component_data: dict) -> r.Component:
             return self._create_dataframe_component(component_data)
         elif component_type == r.ComponentType.MARKDOWN:
             return self._create_markdown_component(component_data)
+        elif component_type == r.ComponentType.HTML:
+            return self._create_html_component(component_data)
         elif component_type == r.ComponentType.APICALL:
             return self._create_apicall_component(component_data)
         elif component_type == r.ComponentType.CHATBOT:
@@ -450,6 +458,27 @@ def _create_markdown_component(self, component_data: dict) -> r.Markdown:
             caption = component_data.get('caption')
         )
     
+    def _create_html_component(self, component_data: dict) -> r.Html:
+        """
+        Creates an Html component.
+
+        Parameters
+        ----------
+        component_data : dict
+            A dictionary containing hml component metadata.
+
+        Returns
+        -------
+        Html
+            An Html object populated with the provided metadata.
+        """
+        return r.Html(
+            title = component_data['title'],
+            logger = self.logger,
+            file_path = component_data['file_path'],
+            caption = component_data.get('caption')
+        )
+    
     def _create_apicall_component(self, component_data: dict) -> r.APICall:
         """
         Creates an APICall component.
diff --git a/vuegen/quarto_reportview.py b/vuegen/quarto_reportview.py
@@ -237,12 +237,12 @@ def _generate_subsection(self, subsection, is_report_static, is_report_revealjs)
 
             if component.component_type == r.ComponentType.PLOT:
                 subsection_content.extend(self._generate_plot_content(component, is_report_static))
-            
             elif component.component_type == r.ComponentType.DATAFRAME:
                 subsection_content.extend(self._generate_dataframe_content(component, is_report_static))
-            
             elif component.component_type == r.ComponentType.MARKDOWN:
                 subsection_content.extend(self._generate_markdown_content(component))
+            elif component.component_type == r.ComponentType.HTML and not is_report_static:
+                subsection_content.extend(self._generate_html_content(component))
             else:
                 self.report.logger.warning(f"Unsupported component type '{component.component_type}' in subsection: {subsection.title}")
         
@@ -489,6 +489,41 @@ def _generate_markdown_content(self, markdown) -> List[str]:
         self.report.logger.info(f"Successfully generated content for Markdown: '{markdown.title}'")
         return markdown_content
 
+    def _generate_html_content(self, html) -> List[str]:
+        """
+        Adds an HTML component to the report.
+
+        Parameters
+        ----------
+        html : Html
+            The HTML component to add to the report. This could be a local file path or a URL.
+
+        Returns
+        -------
+        list : List[str]
+            The list of content lines for embedding the HTML.
+        """
+        html_content = []
+        
+        # Add title
+        html_content.append(f'### {html.title}')
+        
+        try:
+            # Embed the HTML in an iframe
+            iframe_src = html.file_path if is_url(html.file_path) else os.path.join("..", html.file_path)
+            iframe_code = f"""
+<div style="text-align: center;">
+<iframe src="{iframe_src}" alt="{html.title}" width="800px" height="630px"></iframe>
+</div>\n"""
+            html_content.append(iframe_code)
+
+        except Exception as e:
+            self.report.logger.error(f"Error generating content for HTML: {html.title}. Error: {str(e)}")
+            raise
+        
+        self.report.logger.info(f"Successfully generated content for HTML: '{html.title}'")
+        return html_content
+
     def _generate_image_content(self, image_path: str, alt_text: str = "", width: int = 650, height: int = 400) -> str:
         """
         Adds an image to the content list in an HTML format with a specified width and height.
diff --git a/vuegen/report.py b/vuegen/report.py
@@ -35,6 +35,7 @@ class ComponentType(StrEnum):
     PLOT = auto()
     DATAFRAME = auto()
     MARKDOWN = auto()
+    HTML = auto()
     APICALL = auto()
     CHATBOT = auto()
 
@@ -380,10 +381,21 @@ class Markdown(Component):
     """
     def __init__(self, title: str, logger: logging.Logger, file_path: str=None, caption: str=None):
         """
-        Initializes a DataFrame object.
+        Initializes a Markdown object.
         """
         super().__init__(title = title, logger = logger, component_type=ComponentType.MARKDOWN, 
                          file_path=file_path, caption=caption)
+        
+class Html(Component):
+    """
+    An html component within a subsection of a report.
+    """
+    def __init__(self, title: str, logger: logging.Logger, file_path: str=None, caption: str=None):
+        """
+        Initializes an html object.
+        """
+        super().__init__(title = title, logger = logger, component_type=ComponentType.HTML, 
+                         file_path=file_path, caption=caption)
 
 class APICall(Component):
     """
diff --git a/vuegen/streamlit_reportview.py b/vuegen/streamlit_reportview.py
@@ -298,6 +298,8 @@ def _generate_subsection(self, subsection) -> tuple[List[str], List[str]]:
                 subsection_content.extend(self._generate_dataframe_content(component))
             elif component.component_type == r.ComponentType.MARKDOWN:
                 subsection_content.extend(self._generate_markdown_content(component))
+            elif component.component_type == r.ComponentType.HTML:
+                subsection_content.extend(self._generate_html_content(component))
             elif component.component_type == r.ComponentType.APICALL:
                 subsection_content.extend(self._generate_apicall_content(component))
             elif component.component_type == r.ComponentType.CHATBOT:
@@ -517,6 +519,52 @@ def _generate_markdown_content(self, markdown) -> List[str]:
         self.report.logger.info(f"Successfully generated content for Markdown: '{markdown.title}'")
         return markdown_content
     
+    def _generate_html_content(self, html) -> List[str]:
+        """
+        Generate content for an HTML component in a Streamlit app.
+
+        Parameters
+        ----------
+        html : HTML
+            The HTML component to generate content for.
+
+        Returns
+        -------
+        list : List[str]
+            The list of content lines for the HTML display.
+        """
+        html_content = []
+
+        # Add title
+        html_content.append(self._format_text(text=html.title, type='header', level=4, color='#2b8cbe'))
+
+        try:
+            if is_url(html.file_path):  
+                # If it's a URL, fetch content dynamically
+                html_content.append(f"""
+response = requests.get('{html.file_path}')
+response.raise_for_status()
+html_content = response.text\n""")
+            else:
+                # If it's a local file
+                html_content.append(f"""
+with open('{os.path.join("..", html.file_path)}', 'r', encoding='utf-8') as html_file:
+    html_content = html_file.read()\n""")
+
+            # Display HTML content using Streamlit
+            html_content.append("st.components.v1.html(html_content, height=600, scrolling=True)\n")
+
+        except Exception as e:
+            self.report.logger.error(f"Error generating content for HTML: {html.title}. Error: {str(e)}")
+            raise
+
+        # Add caption if available
+        if html.caption:
+            html_content.append(self._format_text(text=html.caption, type='caption', text_align="left"))
+
+        self.report.logger.info(f"Successfully generated content for HTML: '{html.title}'")
+        return html_content
+    
     def _generate_apicall_content(self, apicall) -> List[str]:
         """
         Generate content for a Markdown component.
diff --git a/vuegen/utils.py b/vuegen/utils.py
@@ -108,6 +108,43 @@ def is_url(filepath: str) -> bool:
     return bool(parsed_url.scheme and parsed_url.netloc)
 
 
+import os
+from bs4 import BeautifulSoup
+
+def is_pyvis_html(filepath: str) -> bool:
+    """
+    Check if the provided HTML file is a Pyvis network visualization.
+
+    Parameters
+    ----------
+    filepath : str
+        The path to the HTML file to check.
+
+    Returns
+    -------
+    bool
+        True if the input HTML file is a Pyvis network, meaning:
+        - It contains a `<div>` element with `id="mynetwork"`.
+        - The `<body>` only contains `<div>` and `<script>` elements.
+        Returns False otherwise.
+
+    """
+    # Parse the HTML file
+    with open(filepath, "r", encoding="utf-8") as f:
+        soup = BeautifulSoup(f, "html.parser")
+
+    # Validate both conditions
+    pyvis_identifier_valid = bool(soup.find("div", {"id": "mynetwork"}))
+    
+    # Count top-level elements inside <body>
+    body_children = [tag.name for tag in soup.body.find_all(recursive=False)]
+    
+    # A pure Pyvis file should contain only "div" and "script" elements in <body>
+    body_structure_valid = set(body_children) <= {"div", "script"}
+
+    # Both conditions must be true
+    return pyvis_identifier_valid and body_structure_valid
+
 ## FILE_SYSTEM
 def create_folder(directory_path: str, is_nested: bool = False) -> bool:
     """
