add graph

app.py

@@ -7,6 +7,10 @@ import os
 METABASE_USERNAME = os.getenv('METABASE_USERNAME')
 METABASE_PASSWORD = os.getenv('METABASE_PASSWORD')
 
+
+
+
+
 def query_metabase(username, password, class_code, card_id, user_id):
     try:
         # 获取会话令牌
@@ -59,16 +63,252 @@ def query_metabase(username, password, class_code, card_id, user_id):
         print(f"Error: {str(e)}")
         return {"error": str(e)}
 
-iface = gr.Interface(
-    fn=query_metabase,
-    inputs=[
-        gr.Textbox(label="Metabase Username", value=METABASE_USERNAME),
-        gr.Textbox(label="Metabase Password", type="password", value=METABASE_PASSWORD),
-        gr.Textbox(label="Class Code", value="class2"),
-        gr.Textbox(label="Card ID", value="6267"),
-        gr.Textbox(label="User ID", value="stu26")
-    ],
-    outputs="json"
-)
-
-iface.launch()
+with gr.Blocks() as app:
+    gr.Markdown("# Metabase Query and Visualization")
+
+    with gr.Row():
+        username = gr.Textbox(label="Metabase Username", value=METABASE_USERNAME)
+        password = gr.Textbox(label="Metabase Password", type="password", value=METABASE_PASSWORD)
+
+    with gr.Row():
+        class_code = gr.Textbox(label="Class Code", value="class2")
+        card_id = gr.Textbox(label="Card ID", value="6267")
+        user_id = gr.Textbox(label="User ID", value="stu26")
+
+    result = gr.JSON(label="Query Result")
+
+    query_button = gr.Button("Fetch Data")
+
+    def update_graph(data):
+        script = f"""
+        <script>
+            document.addEventListener("DOMContentLoaded", function() {{
+                var knowledge_graph_json = {{
+                    "entities": [
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-05-1-1",
+                            "name": "真分數、假分數與帶分數的命名及說、讀、聽、寫、做",
+                            "color": "red",
+                            "display_name": "jnc-4-05-1-1真分數、假分數與帶分數的命名及說、讀、聽、寫、做"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-05-2-1",
+                            "name": "假分數與帶分數的互換",
+                            "color": "orange",
+                            "display_name": "jnc-4-05-2-1假分數與帶分數的互換"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-05-3-1",
+                            "name": "同分母分數的大小比較",
+                            "color": "green",
+                            "display_name": "jnc-4-05-3-1同分母分數的大小比較"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-05-3-2",
+                            "name": "同分母分數的加減",
+                            "color": "red",
+                            "display_name": "jnc-4-05-3-2同分母分數的加減"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-05-3-3",
+                            "name": "分數的整數倍",
+                            "color": "orange",
+                            "display_name": "jnc-4-05-3-3分數的整數倍"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-06-1-1",
+                            "name": "認識等值分數",
+                            "color": "green",
+                            "display_name": "jnc-4-06-1-1認識等值分數"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-06-1-2",
+                            "name": "找出等值分數",
+                            "color": "red",
+                            "display_name": "jnc-4-06-1-2找出等值分數"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-06-2-1",
+                            "name": "簡單異分母分數的比較",
+                            "color": "orange",
+                            "display_name": "jnc-4-06-2-1簡單異分母分數的比較"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-06-2-2",
+                            "name": "簡單異分母分數的加減",
+                            "color": "green",
+                            "display_name": "jnc-4-06-2-2簡單異分母分數的加減"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-06-3-1",
+                            "name": "分��與一位小數的互換",
+                            "color": "red",
+                            "display_name": "jnc-4-06-3-1分數與一位小數的互換"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-06-3-2",
+                            "name": "分數與二位小數的互換",
+                            "color": "orange",
+                            "display_name": "jnc-4-06-3-2分數與二位小數的互換"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-08-2-1",
+                            "name": "認識分數數線",
+                            "color": "green",
+                            "display_name": "jnc-4-08-2-1認識分數數線"
+                        }},
+                        {{
+                            "label": "Node",
+                            "title": "jnc-4-08-2-2",
+                            "name": "數線的整數、分數、小數",
+                            "color": "red",
+                            "display_name": "jnc-4-08-2-2數線的整數、分數、小數"
+                        }}
+                    ],
+                    "relations": [
+                        {{"source": "jnc-4-05-1-1", "target": "jnc-4-05-2-1"}},
+                        {{"source": "jnc-4-05-1-1", "target": "jnc-4-05-3-1"}},
+                        {{"source": "jnc-4-05-2-1", "target": "jnc-4-05-3-1"}},
+                        {{"source": "jnc-4-05-1-1", "target": "jnc-4-05-3-2"}},
+                        {{"source": "jnc-4-05-2-1", "target": "jnc-4-05-3-2"}},
+                        {{"source": "jnc-4-05-2-1", "target": "jnc-4-05-3-3"}},
+                        {{"source": "jnc-4-05-3-2", "target": "jnc-4-05-3-3"}},
+                        {{"source": "jnc-4-05-1-1", "target": "jnc-4-06-1-1"}},
+                        {{"source": "jnc-4-06-1-1", "target": "jnc-4-06-1-2"}},
+                        {{"source": "jnc-4-06-1-1", "target": "jnc-4-06-2-1"}},
+                        {{"source": "jnc-4-06-1-2", "target": "jnc-4-06-2-1"}},
+                        {{"source": "jnc-4-06-1-1", "target": "jnc-4-06-2-2"}},
+                        {{"source": "jnc-4-06-1-2", "target": "jnc-4-06-2-2"}},
+                        {{"source": "jnc-4-06-3-1", "target": "jnc-4-06-3-2"}},
+                        {{"source": "jnc-4-05-1-1", "target": "jnc-4-08-2-1"}},
+                        {{"source": "jnc-4-08-2-1", "target": "jnc-4-08-2-2"}},
+                        {{"source": "jnc-4-05-1-1", "target": "jnc-4-06-3-1"}}
+                    ]
+                }};
+
+                var nodes = [];
+                var edges = [];
+
+                for (const index in knowledge_graph_json['entities']) {{
+                    nodes.push({{
+                        data: {{ id: knowledge_graph_json['entities'][index]['title'], label: knowledge_graph_json['entities'][index]['label'], name: knowledge_graph_json['entities'][index]['name'], color: knowledge_graph_json['entities'][index]['color'], display_name: knowledge_graph_json['entities'][index]['display_name']
+                        }}
+                    }});
+                }}
+
+                for (const index in knowledge_graph_json['relations']) {{
+                    edges.push({{
+                        data: {{
+                            id: index,
+                            source: knowledge_graph_json['relations'][index]['source'],
+                            target: knowledge_graph_json['relations'][index]['target']
+                        }}
+                    }});
+                }}
+
+                var cy = cytoscape({{
+                    container: document.getElementById('cy'),
+                    elements: {{
+                        nodes: nodes,
+                        edges: edges
+                    }},
+                    style: [
+                        {{
+                            selector: 'node',
+                            style: {{
+                                "text-valign": "center",
+                                "text-halign": "center",
+                                "label": 'data(id)',
+                                "width": 100,
+                                "height": 100,
+                                "background-color": "data(color)",
+                                "color": "#fff",
+                                "text-wrap": "wrap",
+                                "text-max-width": 80
+                            }}
+                        }},
+                        {{
+                            selector: 'edge',
+                            style: {{
+                                'width': 4,
+                                'line-color': 'white',
+                                'target-arrow-color': 'white',
+                                'target-arrow-shape': 'triangle',
+                                'curve-style': 'bezier'
+                            }}
+                        }}
+                    ]
+                }});
+
+                cy.layout({{
+                    name: 'breadthfirst',
+                    directed: true,
+                    padding: 10
+                }}).run();
+
+                // Hover and click event handlers for nodes
+                cy.nodes().on('mouseover', function(event) {{
+                    var node = event.target;
+                    node.addClass('highlight'); // 高亮顯示節點本身
+                    document.getElementById(node.data('id')).classList.add('highlight');
+                }});
+
+                cy.nodes().on('mouseout', function(event) {{
+                    var node = event.target;
+                    node.removeClass('highlight'); // 移除節點本身的高亮顯示
+                    document.getElementById(node.data('id')).classList.remove('highlight');
+                }});
+
+                // Hover and click event handlers for right side points
+                document.querySelectorAll('.point').forEach(function(point) {{
+                    point.addEventListener('mouseover', function() {{
+                        var id = this.id;
+                        var node = cy.getElementById(id);
+                        node.addClass('highlight');
+                    }});
+
+                    point.addEventListener('mouseout', function() {{
+                        var id = this.id;
+                        var node = cy.getElementById(id);
+                        node.removeClass('highlight');
+                    }});
+                }});
+
+                // Style for highlighted nodes
+                cy.style().selector('.highlight').style({{
+                    'border-width': '10px',
+                    'border-color': '#FFD700'
+                }}).update();
+            }});
+        </script>
+        """
+        return script
+
+    query_button.click(
+        fn=query_metabase,
+        inputs=[username, password, class_code, card_id, user_id],
+        outputs=result
+    )
+
+    graph_html = gr.HTML()
+    graph_html.value = update_graph(None)
+
+    result.change(
+        fn=update_graph,
+        inputs=result,
+        outputs=graph_html
+    )
+
+app.launch()