Add pyvishtml_to_networkx function in utils.py and use it to render the html networks in quarto and streamlit reports

Author: sayalaruano

vuegen/quarto_reportview.py

@@ -2,6 +2,7 @@
 import subprocess
 import report as r
 from typing import List
+import networkx as nx
 from utils import create_folder
 
 class QuartoReportView(r.ReportView):
@@ -280,22 +281,25 @@ def _generate_plot_content(self, plot, is_report_static, static_dir: str = STATI
                 else:
                     plot_content.append(f"""fig_altair\n```\n""")
             elif plot.plot_type == r.PlotType.INTERACTIVE_NETWORK:
-                network_data = plot.read_network()
+                networkx_graph = plot.read_network()
+                if isinstance(networkx_graph, tuple):
+                    # If network_data is a tuple, separate the network and html file path
+                    networkx_graph, html_plot_file = networkx_graph
+                elif isinstance(networkx_graph, nx.Graph) and not is_report_static:
+                    # Get the pyvis object and create html
+                    pyvis_graph = plot.create_and_save_pyvis_network(networkx_graph, html_plot_file)
+                
+                # Add number of nodes and edges to the plor conetnt
+                num_nodes = networkx_graph.number_of_nodes()
+                num_edges = networkx_graph.number_of_edges()
+                plot_content.append(f'**Number of nodes:** {num_nodes}\n')
+                plot_content.append(f'**Number of edges:** {num_edges}\n')
+                
+                # Add code to generate network depending on the report type
                 if is_report_static:
-                    plot.save_netwrok_image(G, static_plot_path, "png")
+                    plot.save_netwrok_image(networkx_graph, static_plot_path, "png")
                     plot_content.append(self._generate_image_content(static_plot_path))
                 else:
-                    if isinstance(network_data, str) and network_data.endswith('.html'):
-                        # If network_data is the path to an HTML file, just visualize it
-                        html_plot_file = network_data
-                    else:
-                        num_nodes = network_data.number_of_nodes()
-                        num_edges = network_data.number_of_edges()
-                        plot_content.append(f'**Number of nodes:** {num_nodes}\n')
-                        plot_content.append(f'**Number of edges:** {num_edges}\n')
-                        # Get the Network object
-                        net = plot.create_and_save_pyvis_network(network_data, html_plot_file)
-
                     plot_content.append(self._generate_plot_code(plot, html_plot_file))
             else:
                     self.report.logger.warning(f"Unsupported plot type: {plot.plot_type}")

vuegen/report.py

@@ -11,7 +11,7 @@
 import json
 import matplotlib.pyplot as plt
 from pyvis.network import Network
-from utils import cyjs2graph
+from utils import cyjs_to_networkx, pyvishtml_to_networkx
 
 class ReportType(StrEnum):
     STREAMLIT = auto()
@@ -140,7 +140,7 @@ def read_network(self) -> nx.Graph:
             NetworkFormat.GML.value_with_dot: nx.read_gml,
             NetworkFormat.GRAPHML.value_with_dot: nx.read_graphml,
             NetworkFormat.GEXF.value_with_dot: nx.read_gexf,
-            NetworkFormat.CYJS.value_with_dot: cyjs2graph
+            NetworkFormat.CYJS.value_with_dot: cyjs_to_networkx
         }
 
         # Check if the file exists
@@ -163,7 +163,8 @@ def read_network(self) -> nx.Graph:
         try:
             # Handle HTML files (for pyvis interactive networks)
             if file_extension == NetworkFormat.HTML.value_with_dot:
-                return self.file_path
+                G = pyvishtml_to_networkx(self.file_path)
+                return (G, self.file_path)
 
             # Handle .csv and .txt files with custom delimiters based on the text format (edgelist or adjlist)
             if file_extension in [NetworkFormat.CSV.value_with_dot, NetworkFormat.TXT.value_with_dot] and self.csv_network_format:
@@ -232,7 +233,7 @@ def save_netwrok_image(self, G: nx.Graph, output_file: str, format: str, dpi: in
 
         try:
             # Draw the graph and save it as an image file
-            nx.draw(G, with_labels=True)
+            nx.draw(G, with_labels=False)
             plt.savefig(output_file, format=format, dpi=dpi)
             plt.clf()
             self.logger.info(f"Network image saved successfully at: {output_file}.")
@@ -275,7 +276,6 @@ def create_and_save_pyvis_network(self, G: nx.Graph, output_file: str) -> Networ
                 node_data = G.nodes[node_id]
                 node['label'] = node_data.get('name', node_id)
                 node['font'] = {'size': 12}
-                # node_data.get('name', node_id)
                 node['borderWidth'] = 2
                 node['borderWidthSelected'] = 2.5
 

vuegen/streamlit_reportview.py

@@ -312,19 +312,19 @@ def _generate_plot_content(self, plot, static_dir: str = STATIC_FILES_DIR) -> Li
             elif plot.plot_type == r.PlotType.ALTAIR:
                 plot_content.append(self._generate_plot_code(plot))
             elif plot.plot_type == r.PlotType.INTERACTIVE_NETWORK:
-                network_data = plot.read_network()
-                if isinstance(network_data, str) and network_data.endswith('.html'):
-                    # If network_data is the path to an HTML file, just visualize it
-                    html_plot_file = network_data
-                    plot_content.append(f"""with open('{html_plot_file}', 'r') as f:
-    html_data = f.read()""")
+                networkx_graph = plot.read_network()
+                if isinstance(networkx_graph, tuple):
+                    # If network_data is a tuple, separate the network and html file path
+                    networkx_graph, html_plot_file = networkx_graph
                 else:
-                    # Otherwise, create and save a new pyvis network from the graph
+                    # Otherwise, create and save a new pyvis network from the netowrkx graph
                     html_plot_file = os.path.join(static_dir, f"{plot.title.replace(' ', '_')}.html")
-                    net = plot.create_and_save_pyvis_network(network_data, html_plot_file)
-                    num_nodes = len(net.nodes)
-                    num_edges = len(net.edges)
-                    plot_content.append(f"""with open('{html_plot_file}', 'r') as f:
+                    pyvis_graph = plot.create_and_save_pyvis_network(networkx_graph, html_plot_file)
+                
+                # Generate network code for visualization 
+                num_nodes = networkx_graph.number_of_nodes()
+                num_edges = networkx_graph.number_of_edges()
+                plot_content.append(f"""with open('{html_plot_file}', 'r') as f:
     html_data = f.read()
 st.markdown(f"<p style='text-align: center; color: black;'> <b>Number of nodes:</b> {num_nodes} </p>", unsafe_allow_html=True)
 st.markdown(f"<p style='text-align: center; color: black;'> <b>Number of relationships:</b> {num_edges} </p>", unsafe_allow_html=True)""")

vuegen/utils.py

@@ -8,6 +8,7 @@
 import json
 from enum import StrEnum
 from typing import Type
+from bs4 import BeautifulSoup
 
 ## CHECKS
 def check_path(filepath: str) -> bool:
@@ -151,8 +152,7 @@ def get_args(prog_name: str, others: dict = {}) -> argparse.Namespace:
     # Parse arguments
     return parser.parse_args()
 
-
-def cyjs2graph(file_path: str, name: str = "name", ident: str = "id") -> nx.Graph:
+def cyjs_to_networkx(file_path: str, name: str = "name", ident: str = "id") -> nx.Graph:
     """
     Create a NetworkX graph from a `.cyjs` file in Cytoscape format, including all attributes present in the JSON data.
     This function is modified from the `cytoscape_graph` networkx function to handle the 'value' key explicitly and to include
@@ -170,7 +170,7 @@ def cyjs2graph(file_path: str, name: str = "name", ident: str = "id") -> nx.Grap
 
     Returns
     -------
-    G : networkx.Graph
+    graph : networkx.Graph
         The graph created from the Cytoscape JSON data, including all node and edge attributes.
 
     Raises
@@ -236,6 +236,69 @@ def cyjs2graph(file_path: str, name: str = "name", ident: str = "id") -> nx.Grap
     except KeyError as e:
         raise ValueError(f"Missing required key in data: {e}")
 
+def pyvishtml_to_networkx(html_file: str) -> nx.Graph:
+    """
+    Converts a PyVis HTML file to a NetworkX graph.
+
+    Parameters
+    ----------
+    html_file : str
+        Path to the PyVis HTML file.
+
+    Returns
+    -------
+    graph : nx.Graph
+        NetworkX graph object reconstructed from the PyVis network data.
+
+    Raises
+    ------
+    ValueError
+        If the HTML file does not contain the expected network data, or if nodes lack 'id' attribute.
+    """
+    # Load the HTML file
+    with open(html_file, 'r', encoding='utf-8') as f:
+        soup = BeautifulSoup(f, 'html.parser')
+
+    # Extract the network data from the JavaScript objects
+    script_tag = soup.find('script', text=lambda x: x and 'nodes = new vis.DataSet' in x)
+    if not script_tag:
+        raise ValueError("Could not find network data in the provided HTML file.")
+    
+    # Parse the nodes and edges
+    script_text = script_tag.string
+    nodes_json = json.loads(script_text.split('nodes = new vis.DataSet(')[1].split(');')[0])
+    edges_json = json.loads(script_text.split('edges = new vis.DataSet(')[1].split(');')[0])
+
+    # Create a NetworkX graph
+    graph = nx.Graph()
+
+    # Add nodes
+    for node in nodes_json:
+        node_id = node.pop('id', None)
+        if node_id is None:
+            raise ValueError("Node is missing an 'id' attribute.")
+        
+        graph.add_node(node_id, **node)
+
+    # Add edges
+    for edge in edges_json:
+        source = edge.pop('from')
+        target = edge.pop('to')
+        graph.add_edge(source, target, **edge)
+
+    # Relabel nodes to use 'name' as the identifier, or 'id' if 'name' is unavailable
+    mapping = {}
+    for node_id, data in graph.nodes(data=True):
+        name = data.get('name')
+        if name:
+            mapping[node_id] = name
+        else:
+            # Fallback to the original ID if no 'name' exists
+            mapping[node_id] = node_id
+    
+    graph = nx.relabel_nodes(graph, mapping)
+
+    return graph
 
 ## CONFIG
 def load_yaml_config(file_path: str) -> dict: