Update app.py

app.py

@@ -22,89 +22,193 @@ except Exception as e:
   raise
 
 def create_interactive_graph(nodes):
-  """Create an interactive graph visualization using networkx and plotly"""
-  G = nx.DiGraph()
-  
-  # Add nodes
-  for node in nodes:
-      G.add_node(
-          node['id'],
-          title=node['title'],
-          description=node['description'],
-          depth=node['depth']
-      )
-  
-  # Add edges
-  for node in nodes:
-      for conn in node.get('connections', []):
-          G.add_edge(
-              node['id'],
-              conn['target_id'],
-              weight=conn.get('relevance_score', 1)
-          )
-  
-  # Create layout
-  pos = nx.spring_layout(G, k=1, iterations=50)
-  
-  # Create node traces
-  node_x = []
-  node_y = []
-  node_text = []
-  node_color = []
-  
-  for node in G.nodes():
-      x, y = pos[node]
-      node_x.append(x)
-      node_y.append(y)
-      node_text.append(f"{G.nodes[node]['title']}<br>{G.nodes[node]['description']}")
-      node_color.append(['#FF9999', '#99FF99', '#9999FF'][G.nodes[node]['depth'] % 3])
-  
-  node_trace = go.Scatter(
-      x=node_x,
-      y=node_y,
-      mode='markers+text',
-      hoverinfo='text',
-      text=[G.nodes[node]['title'] for node in G.nodes()],
-      hovertext=node_text,
-      marker=dict(
-          color=node_color,
-          size=30,
-          line=dict(width=2)
-      )
-  )
-  
-  # Create edge traces
-  edge_x = []
-  edge_y = []
-  
-  for edge in G.edges():
-      x0, y0 = pos[edge[0]]
-      x1, y1 = pos[edge[1]]
-      edge_x.extend([x0, x1, None])
-      edge_y.extend([y0, y1, None])
-  
-  edge_trace = go.Scatter(
-      x=edge_x,
-      y=edge_y,
-      line=dict(width=1, color='#888'),
-      hoverinfo='none',
-      mode='lines'
-  )
-  
-  # Create figure
-  fig = go.Figure(
-      data=[edge_trace, node_trace],
-      layout=go.Layout(
-          showlegend=False,
-          hovermode='closest',
-          margin=dict(b=0, l=0, r=0, t=0),
-          xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
-          yaxis=dict(showgrid=False, zeroline=False, showticklabels=False)
-      )
-  )
-  
-  return fig
+  """Create an interactive graph visualization using D3.js"""
+  html_content = """
+  <div id="network-container" style="width: 100%; height: 600px; border: 1px solid #ddd; border-radius: 4px; background-color: #ffffff;"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
+  <style>
+      .node { cursor: pointer; }
+      .node text {
+          font-size: 12px;
+          font-family: Arial, sans-serif;
+      }
+      .link {
+          stroke: #999;
+          stroke-opacity: 0.6;
+      }
+      .node-tooltip {
+          position: absolute;
+          padding: 8px;
+          background: rgba(0, 0, 0, 0.8);
+          color: #fff;
+          border-radius: 4px;
+          font-size: 12px;
+          pointer-events: none;
+      }
+  </style>
+  <script>
+      (function() {
+          // Convert Python data to JavaScript
+          const data = {
+              nodes: """ + json.dumps([{
+                  'id': node['id'],
+                  'title': node['title'],
+                  'description': node['description'],
+                  'depth': node['depth']
+              } for node in nodes]) + """,
+              links: """ + json.dumps([{
+                  'source': node['id'],
+                  'target': conn['target_id'],
+                  'value': conn.get('relevance_score', 1)
+              } for node in nodes for conn in node.get('connections', [])]) + """
+          };
 
+          // Clear any existing visualization
+          const container = document.getElementById('network-container');
+          container.innerHTML = '';
+          
+          const width = container.clientWidth;
+          const height = container.clientHeight;
+          
+          const svg = d3.select("#network-container")
+              .append("svg")
+              .attr("width", width)
+              .attr("height", height);
+          
+          // Add zoom behavior
+          const g = svg.append("g");
+          svg.call(d3.zoom()
+              .scaleExtent([0.1, 4])
+              .on("zoom", (event) => {
+                  g.attr("transform", event.transform);
+              }));
+          
+          // Create the force simulation
+          const simulation = d3.forceSimulation(data.nodes)
+              .force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
+              .force("charge", d3.forceManyBody().strength(-300))
+              .force("center", d3.forceCenter(width / 2, height / 2))
+              .force("collision", d3.forceCollide().radius(50));
+          
+          // Create the links
+          const link = g.append("g")
+              .selectAll("line")
+              .data(data.links)
+              .join("line")
+              .attr("class", "link")
+              .attr("stroke-width", d => Math.sqrt(d.value || 1));
+          
+          // Create the nodes
+          const node = g.append("g")
+              .selectAll(".node")
+              .data(data.nodes)
+              .join("g")
+              .attr("class", "node")
+              .call(d3.drag()
+                  .on("start", dragstarted)
+                  .on("drag", dragged)
+                  .on("end", dragended));
+          
+          // Add circles to nodes
+          node.append("circle")
+              .attr("r", 20)
+              .attr("fill", d => ['#FF9999', '#99FF99', '#9999FF'][d.depth % 3]);
+          
+          // Add text labels
+          node.append("text")
+              .attr("dy", 30)
+              .attr("text-anchor", "middle")
+              .text(d => d.title)
+              .call(wrap, 60);
+          
+          // Create tooltip
+          const tooltip = d3.select("body")
+              .append("div")
+              .attr("class", "node-tooltip")
+              .style("opacity", 0);
+          
+          // Add hover effects
+          node.on("mouseover", function(event, d) {
+              tooltip.transition()
+                  .duration(200)
+                  .style("opacity", .9);
+              tooltip.html(`Title: ${d.title}<br/>Description: ${d.description}`)
+                  .style("left", (event.pageX + 10) + "px")
+                  .style("top", (event.pageY - 10) + "px");
+          })
+          .on("mouseout", function(d) {
+              tooltip.transition()
+                  .duration(500)
+                  .style("opacity", 0);
+          });
+          
+          // Add click handler
+          node.on("click", function(event, d) {
+              if (window.gradio_client) {
+                  window.gradio_client.dispatch("select", d);
+              }
+          });
+          
+          // Update positions on each tick
+          simulation.on("tick", () => {
+              link
+                  .attr("x1", d => d.source.x)
+                  .attr("y1", d => d.source.y)
+                  .attr("x2", d => d.target.x)
+                  .attr("y2", d => d.target.y);
+              
+              node
+                  .attr("transform", d => `translate(${d.x},${d.y})`);
+          });
+          
+          // Drag functions
+          function dragstarted(event) {
+              if (!event.active) simulation.alphaTarget(0.3).restart();
+              event.subject.fx = event.subject.x;
+              event.subject.fy = event.subject.y;
+          }
+          
+          function dragged(event) {
+              event.subject.fx = event.x;
+              event.subject.fy = event.y;
+          }
+          
+          function dragended(event) {
+              if (!event.active) simulation.alphaTarget(0);
+              event.subject.fx = null;
+              event.subject.fy = null;
+          }
+          
+          // Text wrapping function
+          function wrap(text, width) {
+              text.each(function() {
+                  const text = d3.select(this);
+                  const words = text.text().split(/\s+/).reverse();
+                  let word;
+                  let line = [];
+                  let lineNumber = 0;
+                  const lineHeight = 1.1;
+                  const y = text.attr("y");
+                  const dy = parseFloat(text.attr("dy"));
+                  let tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "px");
+                  
+                  while (word = words.pop()) {
+                      line.push(word);
+                      tspan.text(line.join(" "));
+                      if (tspan.node().getComputedTextLength() > width) {
+                          line.pop();
+                          tspan.text(line.join(" "));
+                          line = [word];
+                          tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "px").text(word);
+                      }
+                  }
+              });
+          }
+      })();
+  </script>
+  """
+  return html_content
+    
 def summarize_node(node_data: Dict[str, Any]) -> str:
   """Generate a summary for a selected node"""
   summary = f"""
@@ -215,7 +319,7 @@ def create_interface() -> gr.Blocks:
               with gr.Accordion("Exploration Result", open=False):
                   text_output = gr.JSON(label="Raw Result")
               
-              graph_output = gr.Plot(label="Interactive Exploration Graph")
+              graph_output = gr.HTML(label="Interactive Exploration Graph")
               node_summary = gr.Textbox(
                   label="Node Details",
                   lines=5,
@@ -228,19 +332,13 @@ def create_interface() -> gr.Blocks:
           outputs=[text_output, graph_output, node_summary]
       )
 
-      gr.Markdown("""
-      ### Examples
-      Click an example to load it into the interface.
-      """)
-
-      examples = [
-          ["Explore the evolution of Renaissance painting techniques", "[]", "{}", 5, "Renaissance"],
-          ["Investigate the influence of Japanese art on Impressionism", "[]", "{}", 7, "Impressionism"],
-          ["Analyze the development of Cubism through Picasso's work", "[]", "{}", 6, "Cubism"]
-      ]
-
+      # Add examples
       gr.Examples(
-          examples=examples,
+          examples=[
+              ["Explore the evolution of Renaissance painting techniques", "[]", "{}", 5, "Renaissance"],
+              ["Investigate the influence of Japanese art on Impressionism", "[]", "{}", 7, "Impressionism"],
+              ["Analyze the development of Cubism through Picasso's work", "[]", "{}", 6, "Cubism"]
+          ],
           inputs=[query_input, path_history, parameters, depth, domain]
       )