Merge pull request #165 from lucasimi/feature/finalize-pyvis-plot

lucasimi · web-flow · commit 357bc77ea455 · 2024-11-19T23:11:32.000+01:00
Feature/finalize pyvis plot
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ For further details, please refer to the
 
 - **Interactive App**: Interactive tool for quick, in-depth data exploration.
 
-## Background
+### Background
 
 The Mapper algorithm is a well-known technique in the field of topological
 data analysis that allows data to be represented as a graph.
@@ -43,7 +43,7 @@ read
 | ![Step 1](https://github.com/lucasimi/tda-mapper-python/raw/main/resources/mapper_1.png) | ![Step 2](https://github.com/lucasimi/tda-mapper-python/raw/main/resources/mapper_2.png) | ![Step 3](https://github.com/lucasimi/tda-mapper-python/raw/main/resources/mapper_3.png) | ![Step 2](https://github.com/lucasimi/tda-mapper-python/raw/main/resources/mapper_4.png) |
 | Chose lens | Cover image | Run clustering | Build graph |
 
-## Citations
+### Citations
 
 If you use **tda-mapper** in your work, please consider citing both the
 [library](https://doi.org/10.5281/zenodo.10642381), archived in a permanent
@@ -100,7 +100,7 @@ fig.show(config={'scrollZoom': True})
 More examples can be found in the
 [documentation](https://tda-mapper.readthedocs.io/en/main/examples.html).
 
-## Interactive App
+### Interactive App
 
 You can explore a live demo of **tda-mapper** directly on
 [Streamlit Cloud](https://tda-mapper-app.streamlit.app/),
diff --git a/src/tdamapper/_plot_pyvis.py b/src/tdamapper/_plot_pyvis.py
@@ -2,20 +2,139 @@
 This module provides functionalities to visualize the Mapper graph based on
 pyvis.
 """
+import math
 
 from pyvis.network import Network
 
 import matplotlib.pyplot as plt
 import matplotlib.colors as mcolors
 
+import plotly.graph_objects as go
+import plotly.io as pio
+import plotly.colors as pc
+
 from tdamapper.core import (
     aggregate_graph,
 )
 
 
+_EDGE_WIDTH = 0.75
+
+_EDGE_COLOR = '#777'
+
+_TICKS_NUM = 10
+
+
+def __fmt(x, max_len=3):
+    fmt = f'.{max_len}g'
+    return f'{x:{fmt}}'
+
+
+def _colorbar(height, cmap, cmin, cmax, title):
+    colorbar_fig = go.Figure()
+    colorbar_fig.add_trace(go.Scatter(
+        x=[None], y=[None],
+        mode='markers',
+        marker=dict(
+            showscale=True,
+            reversescale=False,
+            line_colorscale=cmap,
+            colorscale=cmap,
+            cmin=cmin,
+            cmax=cmax,
+            colorbar=dict(
+                showticklabels=True,
+                outlinewidth=1,
+                borderwidth=0,
+                orientation='v',
+                thickness=20,
+                thicknessmode='fraction',
+                xanchor='left',
+                titleside='right',
+                tickwidth=1,
+                tickformat='.2g',
+                nticks=_TICKS_NUM,
+                tickmode='auto',
+                title=title,
+            ),
+        ),
+    ))
+    colorbar_fig.update_layout(
+        xaxis=dict(visible=False),
+        yaxis=dict(visible=False),
+        margin=dict(l=0, r=100, t=0, b=0),
+        width=80,
+        height=height,
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='rgba(0,0,0,0)',
+    )
+    return colorbar_fig
+
+
+def _combine(network, colorbar):
+    network_html = network.generate_html()
+    colorbar_html = pio.to_html(
+        colorbar,
+        include_plotlyjs='cdn',
+        full_html=False,
+        config={
+            'displayModeBar': False
+        },
+    )
+    combined_html = f"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <title>Network with Colorbar</title>
+        <style>
+            body {{
+                margin: 0;
+                height: 100vh;
+                display: flex;
+            }}
+
+            .combined {{
+                display: flex;
+                flex-direction: row;
+                margin: 0;
+            }}
+
+            .network {{
+                display: flex;
+                align-items: start;
+            }}
+
+            .colorbar {{
+                display: flex;
+                align-items: start;
+            }}
+
+            .network .card {{
+                border-width: 0;
+            }}
+
+            .network #mynetwork {{
+                border-width: 0;
+            }}
+        </style>
+    </head>
+    <body>
+        <div class="combined">
+            <div class="network">
+                {network_html}
+            </div>
+            <div class="colorbar">
+                {colorbar_html}
+            </div>
+        </div>
+    </body>
+    </html>
+    """
+    return combined_html
+
+
 def plot_pyvis(
     mapper_plot,
-    notebook,
     output_file,
     colors,
     agg,
@@ -24,39 +143,47 @@ def plot_pyvis(
     height,
     cmap,
 ):
-    net = _compute_net(
+    net, cmin, cmax = _compute_net(
         mapper_plot=mapper_plot,
         width=width,
         height=height,
         colors=colors,
         agg=agg,
         cmap=cmap,
-        notebook=notebook,
     )
-    net.show(output_file, notebook=notebook)
+    colorbar = _colorbar(
+        height=height,
+        cmap=cmap,
+        cmin=cmin,
+        cmax=cmax,
+        title=title
+    )
+    combined_html = _combine(net, colorbar)
+    with open(output_file, 'w') as file:
+        file.write(combined_html)
 
 
 def _compute_net(
     mapper_plot,
-    notebook,
     colors,
     agg,
     width,
     height,
     cmap,
 ):
     net = Network(
-        height=height,
-        width=width,
+        height=f'{height}px',
+        width=f'{width}px',
         directed=False,
-        notebook=notebook,
-        select_menu=True,
-        filter_menu=True,
+        notebook=True,
+        select_menu=False,
+        filter_menu=False,
         neighborhood_highlight=True,
     )
     net.toggle_physics(False)
     graph = mapper_plot.graph
     nodes = graph.nodes
+    cmap_colorscale = pc.get_colorscale(cmap)
 
     min_node_size = float('inf')
     max_node_size = -float('inf')
@@ -81,10 +208,10 @@ def _compute_net(
 
     def _size(node):
         if max_node_size == min_node_size:
-            node_size_norm = 12
+            node_size_norm = 25.0
         else:
             node_size = int(nodes[node]['size'])
-            node_size_norm = (node_size - min_node_size) / (max_node_size - min_node_size) * 25
+            node_size_norm = 25.0 * math.sqrt(node_size / max_node_size)
         return int(round(node_size_norm))
 
     def _color(node):
@@ -93,39 +220,33 @@ def _color(node):
         else:
             node_color = node_colors[node]
             node_color = (node_color - min_node_color) / (max_node_color - min_node_color)
-        node_color = colormap(node_color)
-        return mcolors.to_hex(node_color)
-
-    def _blend_color(source, target):
-        if max_node_color == min_node_color:
-            blend_color = 0.5
-        else:
-            source_color = node_colors[source]
-            source_color = (source_color - min_node_color) / (max_node_color - min_node_color)
-            target_color = node_colors[target]
-            target_color = (target_color - min_node_color) / (max_node_color - min_node_color)
-            blend_color = (source_color + target_color) / 2.0
-        blend_color = colormap(blend_color)
-        return mcolors.to_hex(blend_color)
+        node_color = max(0.0, min(1.0, node_color))
+        node_color_hex = pc.sample_colorscale(cmap_colorscale, node_color)[0]
+        return node_color_hex
 
     for node in nodes:
         node_id = int(node)
         node_size = _size(node)
         node_color = _color(node)
+        node_stats = __fmt(node_colors[node])
+        node_label = f'color: {node_stats}\nnode: {node_id}\nsize: {node_size}'
         node_pos = mapper_plot.positions[node]
         net.add_node(
             node_id,
             label=node_id,
             size=node_size,
             color=node_color,
-            x=node_pos[0] * 1000.0,
-            y=node_pos[1] * 1000.0,
+            title=node_label,
+            x=node_pos[0] * width,
+            y=-node_pos[1] * height,
         )
 
     for edge in graph.edges:
         source_id = int(edge[0])
         target_id = int(edge[1])
-        edge_color = _blend_color(edge[0], edge[1])
-        net.add_edge(source_id, target_id, color=edge_color)
+        edge_color = _EDGE_COLOR
+        edge_width = _EDGE_WIDTH
+        edge_width = 1.5
+        net.add_edge(source_id, target_id, color=edge_color, width=edge_width)
 
-    return net
+    return net, min_node_color, max_node_color
diff --git a/src/tdamapper/plot.py b/src/tdamapper/plot.py
@@ -201,7 +201,6 @@ def plot_plotly_update(
 
     def plot_pyvis(
         self,
-        notebook,
         output_file,
         colors,
         agg=np.nanmean,
@@ -213,8 +212,6 @@ def plot_pyvis(
         """
         Draw an interactive HTML plot using PyVis.
 
-        :param notebook: Set to true when running inside Jupyter notebooks.
-        :type notebook: bool
         :param output_file: The path where the html file is written.
         :type output_file: str
         :type colors: array-like of shape (n,) or list-like of size n
@@ -242,7 +239,6 @@ def plot_pyvis(
         """
         return plot_pyvis(
             self,
-            notebook=notebook,
             output_file=output_file,
             colors=colors,
             agg=agg,
