pyviz

app.py

@@ -1,4 +1,3 @@
-import networkx as nx
 import matplotlib.pyplot as plt
 import gradio as gr
 import io
@@ -7,10 +6,90 @@ import requests
 import json
 import os
 
+from pyvis.network import Network
+import networkx as nx
+
 # Env Vars
 METABASE_USERNAME = os.getenv('METABASE_USERNAME')
 METABASE_PASSWORD = os.getenv('METABASE_PASSWORD')
 
+# Original elements
+elements = [
+    {'data': {'id': 'jnc-4-05-1-1', 'label': '真分數、假分數與帶分數的命名及說、讀、聽、寫、做'}},
+    {'data': {'id': 'jnc-4-05-2-1', 'label': '假分數與帶分數的互換'}},
+    {'data': {'id': 'jnc-4-05-3-1', 'label': '同分母分數的大小比較'}},
+    {'data': {'id': 'jnc-4-05-3-2', 'label': '同分母分數的加減'}},
+    {'data': {'id': 'jnc-4-05-3-3', 'label': '分數的整數倍'}},
+    {'data': {'id': 'jnc-4-06-1-1', 'label': '認識等值分數'}},
+    {'data': {'id': 'jnc-4-06-1-2', 'label': '找出等值分數'}},
+    {'data': {'id': 'jnc-4-06-2-1', 'label': '簡單異分母分數的比較'}},
+    {'data': {'id': 'jnc-4-06-2-2', 'label': '簡單異分母分數的加減'}},
+    {'data': {'id': 'jnc-4-06-3-1', 'label': '分數與一位小數的互換'}},
+    {'data': {'id': 'jnc-4-06-3-2', 'label': '分數與二位小數的互換'}},
+    {'data': {'id': 'jnc-4-08-2-1', 'label': '認識分數數線'}},
+    {'data': {'id': 'jnc-4-08-2-2', 'label': '數線的整數、分數、小數'}},
+    {'data': {'source': 'jnc-4-05-1-1', 'target': 'jnc-4-05-2-1'}},
+    {'data': {'source': 'jnc-4-05-1-1', 'target': 'jnc-4-05-3-1'}},
+    {'data': {'source': 'jnc-4-05-2-1', 'target': 'jnc-4-05-3-1'}},
+    {'data': {'source': 'jnc-4-05-1-1', 'target': 'jnc-4-05-3-2'}},
+    {'data': {'source': 'jnc-4-05-2-1', 'target': 'jnc-4-05-3-2'}},
+    {'data': {'source': 'jnc-4-05-2-1', 'target': 'jnc-4-05-3-3'}},
+    {'data': {'source': 'jnc-4-05-3-2', 'target': 'jnc-4-05-3-3'}},
+    {'data': {'source': 'jnc-4-05-1-1', 'target': 'jnc-4-06-1-1'}},
+    {'data': {'source': 'jnc-4-06-1-1', 'target': 'jnc-4-06-1-2'}},
+    {'data': {'source': 'jnc-4-06-1-1', 'target': 'jnc-4-06-2-1'}},
+    {'data': {'source': 'jnc-4-06-1-2', 'target': 'jnc-4-06-2-1'}},
+    {'data': {'source': 'jnc-4-06-1-1', 'target': 'jnc-4-06-2-2'}},
+    {'data': {'source': 'jnc-4-06-1-2', 'target': 'jnc-4-06-2-2'}},
+    {'data': {'source': 'jnc-4-06-3-1', 'target': 'jnc-4-06-3-2'}},
+    {'data': {'source': 'jnc-4-05-1-1', 'target': 'jnc-4-08-2-1'}},
+    {'data': {'source': 'jnc-4-08-2-1', 'target': 'jnc-4-08-2-2'}},
+    {'data': {'source': 'jnc-4-05-1-1', 'target': 'jnc-4-06-3-1'}}
+]
+
+
+# Create a NetworkX graph
+nx_graph = nx.DiGraph()
+
+# Add nodes and edges
+for element in elements:
+    if 'source' not in element['data']:  # It's a node
+        nx_graph.add_node(element['data']['id'], title=element['data']['label'])
+    else:  # It's an edge
+        nx_graph.add_edge(element['data']['source'], element['data']['target'])
+
+# Function to generate the graph in hierarchical layout
+def needs_analysis():
+    nt = Network(directed=True)
+    nt.from_nx(nx_graph)
+    nt.repulsion(node_distance=120, central_gravity=0.0, spring_length=100, spring_strength=0.05, damping=0.09)
+    nt.set_options("""
+    {
+        "layout": {
+            "hierarchical": {
+                "enabled": false,
+                "levelSeparation": 150,
+                "nodeSpacing": 200,
+                "treeSpacing": 500,
+                "blockShifting": true,
+                "edgeMinimization": true,
+                "parentCentralization": true,
+                "direction": "UD",
+                "sortMethod": "directed"
+            }
+        }
+    }
+    """)
+    html = nt.generate_html()
+    # Replace single quotes with double quotes in HTML
+    html = html.replace("'", "\"")
+    return f"""<iframe style="width: 100%; height: 600px;margin:0 auto" name="result" allow="midi; geolocation; microphone; camera;
+    display-capture; encrypted-media;" sandbox="allow-modals allow-forms
+    allow-scripts allow-same-origin allow-popups
+    allow-top-navigation-by-user-activation allow-downloads" allowfullscreen=""
+    allowpaymentrequest="" frameborder="0" srcdoc='{html}'></iframe>"""
+
+
 def query_metabase(username, password, class_code, card_id, user_id):
     try:
         # 获取会话令牌
@@ -63,70 +142,6 @@ def query_metabase(username, password, class_code, card_id, user_id):
         print(f"Error: {str(e)}")
         return {"error": str(e)}
 
-# 创建一个DAG
-def create_knowledge_dag():
-    G = nx.DiGraph()
-    
-    # 添加节点
-    G.add_node("jnc-4-05-1-1", label="真分數、假分數與帶分數的命名及說、讀、聽、寫、做")
-    G.add_node("jnc-4-05-2-1", label="假分數與帶分數的互換")
-    G.add_node("jnc-4-05-3-1", label="同分母分數的大小比較")
-    G.add_node("jnc-4-05-3-2", label="同分母分數的加減")
-    G.add_node("jnc-4-05-3-3", label="分數的整數倍")
-    G.add_node("jnc-4-06-1-1", label="認識等值分數")
-    G.add_node("jnc-4-06-1-2", label="找出等值分數")
-    G.add_node("jnc-4-06-2-1", label="簡單異分母分數的比較")
-    G.add_node("jnc-4-06-2-2", label="簡單異分母分數的加減")
-    G.add_node("jnc-4-06-3-1", label="分數與一位小數的互換")
-    G.add_node("jnc-4-06-3-2", label="分數與二位小數的互換")
-    G.add_node("jnc-4-08-2-1", label="認識分數數線")
-    G.add_node("jnc-4-08-2-2", label="數線的整數、分數、小數")
-    
-    # 添加边
-    G.add_edge("jnc-4-05-1-1", "jnc-4-05-2-1")
-    G.add_edge("jnc-4-05-1-1", "jnc-4-05-3-1")
-    G.add_edge("jnc-4-05-2-1", "jnc-4-05-3-1")
-    G.add_edge("jnc-4-05-1-1", "jnc-4-05-3-2")
-    G.add_edge("jnc-4-05-2-1", "jnc-4-05-3-2")
-    G.add_edge("jnc-4-05-2-1", "jnc-4-05-3-3")
-    G.add_edge("jnc-4-05-3-2", "jnc-4-05-3-3")
-    G.add_edge("jnc-4-05-1-1", "jnc-4-06-1-1")
-    G.add_edge("jnc-4-06-1-1", "jnc-4-06-1-2")
-    G.add_edge("jnc-4-06-1-1", "jnc-4-06-2-1")
-    G.add_edge("jnc-4-06-1-2", "jnc-4-06-2-1")
-    G.add_edge("jnc-4-06-1-1", "jnc-4-06-2-2")
-    G.add_edge("jnc-4-06-1-2", "jnc-4-06-2-2")
-    G.add_edge("jnc-4-06-3-1", "jnc-4-06-3-2")
-    G.add_edge("jnc-4-05-1-1", "jnc-4-08-2-1")
-    G.add_edge("jnc-4-08-2-1", "jnc-4-08-2-2")
-    G.add_edge("jnc-4-05-1-1", "jnc-4-06-3-1")
-    
-    return G
-
-# 绘制DAG并返回图像数据
-def plot_knowledge_dag():
-    G = create_knowledge_dag()
-    
-    plt.figure(figsize=(10, 8))
-    pos = nx.spring_layout(G)
-    nx.draw(G, pos, with_labels=True, node_color='skyblue', node_size=2000, edge_color='gray', linewidths=2, font_size=10, font_weight='bold')
-    labels = nx.get_node_attributes(G, 'label')
-    nx.draw_networkx_labels(G, pos, labels, font_size=8, font_color='black')
-    
-    buf = io.BytesIO()
-    plt.savefig(buf, format='png')
-    buf.seek(0)
-    
-    return base64.b64encode(buf.read()).decode('utf-8')
-
-# 定义Gradio接口
-def show_knowledge_dag(result):
-    if 'error' in result:
-        return result['error']
-    
-    image_data = plot_knowledge_dag()
-    return f'<img src="data:image/png;base64,{image_data}"/>'
-
 with gr.Blocks() as app:
     gr.Markdown("# Metabase Query and Visualization")
 
@@ -143,6 +158,7 @@ with gr.Blocks() as app:
     graph_html = gr.HTML()
 
     query_button = gr.Button("Fetch Data")
+    graph_btn = gr.Button("Generate Graph")
 
     query_button.click(
         fn=query_metabase,
@@ -150,9 +166,9 @@ with gr.Blocks() as app:
         outputs=result
     )
 
-    result.change(
-        fn=show_knowledge_dag,
-        inputs=result,
+    graph_btn.click(
+        needs_analysis,
+        inputs=None,
         outputs=graph_html
     )