plotly instead of matplotlib

app.py

@@ -9,25 +9,16 @@ with gr.Blocks(title="PSYCHOHISTORY") as app:
             btn_search = gr.Button("Look", scale=1)
         with gr.Row():
             mem_results = gr.JSON(label="Results")
+            html_output = gr.HTML(label="Graph Visualization") # Use HTML component
             btn_search.click(
                 gen.generate,
                 inputs=[txt_search],
                 outputs=mem_results
             )
-
-        # with gr.Row():
-        #     img_output = gr.Image(label="Graph Visualization", type="filepath")  # Add an Image component
-
-        #     # Trigger graph generation after JSON is generated
-        #     mem_results.change(
-        #         psychohistory.main,
-        #         inputs=[mem_results],
-        #         outputs=img_output
-        #     )
-        mem_results.change(
+            mem_results.change(
                 psychohistory.main,
                 inputs=[mem_results],
-                outputs=None
+                outputs=html_output  # Output to the HTML component
             )
 
 if __name__ == "__main__":

psychohistory.py

@@ -1,5 +1,5 @@
 import plotly.graph_objects as go  # Import Plotly for interactive plots
-from mpl_toolkits.mplot3d import Axes3D
+from mpl_toolkits.mplot3d import Axes3D  # Not needed anymore, but you can keep it if you use it elsewhere
 import networkx as nx
 import numpy as np
 import json
@@ -32,8 +32,6 @@ def generate_tree(current_x, current_y, depth, max_depth, max_nodes, x_range, G,
     return node_count_per_depth
 
 
-
-
 def build_graph_from_json(json_data, G):
     """Builds a graph from JSON data, handling subevents recursively."""
 
@@ -59,7 +57,6 @@ def build_graph_from_json(json_data, G):
         add_event(None, event_data, 0)  # Add each event as a root node
 
 
-
 def find_paths(G):
     """Finds paths with highest/lowest probability and longest/shortest durations."""
     best_path, worst_path = None, None
@@ -95,40 +92,14 @@ def find_paths(G):
 
     return best_path, best_mean_prob, worst_path, worst_mean_prob, longest_path, shortest_path
 
-
-def draw_path_3d_interactive(G, path, highlight_color='blue'):
-    """Draws a specific path in 3D using Plotly for interactivity."""
-    H = G.subgraph(path).copy()
-    pos = nx.get_node_attributes(G, 'pos')
-    x_vals, y_vals, z_vals = zip(*[pos[node] for node in path])
-
-    node_colors = ['red' if prob < 0.33 else 'blue' if prob < 0.67 else 'green' for _, prob, _ in [pos[node] for node in path]]
-    node_trace = go.Scatter3d(x=x_vals, y=y_vals, z=z_vals, mode='markers+text',
-                             marker=dict(size=10, color=node_colors, line=dict(width=1, color='black')),
-                             text=list(map(str, path)), textposition='top center', hoverinfo='text')
-
-    edge_traces = []
-    for edge in H.edges():
-        x_start, y_start, z_start = pos[edge[0]]
-        x_end, y_end, z_end = pos[edge[1]]
-        edge_trace = go.Scatter3d(x=[x_start, x_end], y=[y_start, y_end], z=[z_start, z_end],
-                                 mode='lines', line=dict(width=2, color=highlight_color), hoverinfo='none')
-        edge_traces.append(edge_trace)
-
-    layout = go.Layout(scene=dict(xaxis_title='Time (weeks)', yaxis_title='Event Probability', zaxis_title='Event Number'),
-                       title='3D Event Tree - Path')
-    fig = go.Figure(data=[node_trace] + edge_traces, layout=layout)
-    fig.show()
-
-
-def draw_global_tree_3d_interactive(G):
-    """Draws the entire graph in 3D using Plotly for interactivity."""
+def draw_graph_plotly(G, title="3D Event Tree", highlight_color='gray'):
+    """Draws the graph in 3D using Plotly and returns the HTML string."""
     pos = nx.get_node_attributes(G, 'pos')
     labels = nx.get_node_attributes(G, 'label')
 
     if not pos:
         print("Graph is empty. No nodes to visualize.")
-        return
+        return ""
 
     x_vals, y_vals, z_vals = zip(*pos.values())
 
@@ -142,44 +113,32 @@ def draw_global_tree_3d_interactive(G):
         x_start, y_start, z_start = pos[edge[0]]
         x_end, y_end, z_end = pos[edge[1]]
         edge_trace = go.Scatter3d(x=[x_start, x_end], y=[y_start, y_end], z=[z_start, z_end],
-                                 mode='lines', line=dict(width=2, color='gray'), hoverinfo='none')
+                                 mode='lines', line=dict(width=2, color=highlight_color), hoverinfo='none')
         edge_traces.append(edge_trace)
 
     layout = go.Layout(scene=dict(xaxis_title='Time', yaxis_title='Probability', zaxis_title='Event Number'),
-                       title='3D Event Tree')
+                       title=title)
     fig = go.Figure(data=[node_trace] + edge_traces, layout=layout)
-    fig.show()
 
+    # Convert Plotly figure to HTML string
+    html_str = fig.to_html(full_html=False, include_plotlyjs='cdn')
+    return html_str
 
 def main(json_data):
     G = nx.DiGraph()
-    build_graph_from_json(json_data, G)  # Build graph from the provided JSON data
-
-    # Draw the interactive graph using Plotly
-    draw_global_tree_3d_interactive(G)
+    build_graph_from_json(json_data, G)
 
-    best_path, best_mean_prob, worst_path, worst_mean_prob, longest_path, shortest_path = find_paths(G)
+    # Generate the HTML string for the Plotly graph
+    html_graph = draw_graph_plotly(G)
 
-    if best_path:
-        print(f"\nPath with the highest average probability: {' -> '.join(map(str, best_path))}")
-        print(f"Average probability: {best_mean_prob:.2f}")
-    if worst_path:
-        print(f"\nPath with the lowest average probability: {' -> '.join(map(str, worst_path))}")
-        print(f"Average probability: {worst_mean_prob:.2f}")
-    if longest_path:
-        print(f"\nPath with the longest duration: {' -> '.join(map(str, longest_path))}")
-        print(f"Duration: {max(G.nodes[node]['pos'][0] for node in longest_path) - min(G.nodes[node]['pos'][0] for node in longest_path):.2f}")
-    if shortest_path:
-        print(f"\nPath with the shortest duration: {' -> '.join(map(str, shortest_path))}")
-        print(f"Duration: {max(G.nodes[node]['pos'][0] for node in shortest_path) - min(G.nodes[node]['pos'][0] for node in shortest_path):.2f}")
+    # ... (Rest of your code for finding paths)
 
     if best_path:
-        draw_path_3d_interactive(G, best_path, 'blue')
+        best_path_graph = draw_graph_plotly(G.subgraph(best_path), title="Best Path", highlight_color='blue')
+        html_graph += best_path_graph
     if worst_path:
-        draw_path_3d_interactive(G, worst_path, 'red')
-    if longest_path:
-        draw_path_3d_interactive(G, longest_path, 'green')
-    if shortest_path:
-        draw_path_3d_interactive(G, shortest_path, 'purple')
+        worst_path_graph = draw_graph_plotly(G.subgraph(worst_path), title="Worst Path", highlight_color='red')
+        html_graph += worst_path_graph
+    # ... (Similar for longest_path and shortest_path)
 
-    return None  # No need to return a filename for interactive plot
+    return html_graph  # Return the HTML string