all_in_one_button = gr.Button("Fetch Data and Generate Graph")

app.py

@@ -58,8 +58,20 @@ for element in elements:
     else:  # It's an edge
         nx_graph.add_edge(element['data']['source'], element['data']['target'])
 
+def update_node_colors(result_data):
+    color_mapping = {'1': 'green', '0': 'red', 'default': 'orange'}
+    for node in nx_graph.nodes:
+        if node in result_data:
+            score = str(result_data[node])
+            color = color_mapping.get(score, color_mapping['default'])
+        else:
+            color = color_mapping['default']
+        nx_graph.nodes[node]['color'] = color
+
 # Function to generate the graph in hierarchical layout
-def needs_analysis():
+def needs_analysis(topic_result=None, exercise_quiz_result=None):
+    if topic_result:
+        update_node_colors(topic_result)
     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)
@@ -80,17 +92,22 @@ def needs_analysis():
         }
     }
     """)
-    html = nt.generate_html()
+    map_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;
+    map_html = map_html.replace("'", "\"")
+    html = 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>"""
+    allowpaymentrequest="" frameborder="0" srcdoc='{map_html}'></iframe>"""
+
+    topic_table = generate_html_table(topic_result, exercise_quiz_result)
+    html += f"<h2>Topic Table</h2>{topic_table}"
 
+    return html
 
-def query_metabase(username, password, class_code, card_id, user_id):
+
+def query_metabase_topic(username, password, class_code, topic_card_id, user_id):
     try:
         # 获取会话令牌
         session_response = requests.post(
@@ -121,20 +138,75 @@ def query_metabase(username, password, class_code, card_id, user_id):
 
         # 使用提供的 card_id 查询 Metabase 卡片
         query_response = requests.post(
-            f'https://metabase.cloud.junyiacademy.org/api/card/{card_id}/query/json',
+            f'https://metabase.cloud.junyiacademy.org/api/card/{topic_card_id}/query/json',
             headers={
                 'Content-Type': 'application/json',
                 'X-Metabase-Session': session_token
             },
             json=request_payload
         )
+    
+        query_response.raise_for_status()
+
+        # filter class_code and user_id
+        query_response = query_response.json()
+        query_response = [item for item in query_response if item['class_code'] == class_code and item['user_id'] == user_id]
+
+        return query_response[0] if query_response else {}
+    except requests.RequestException as e:
+        print(f"Failed to query Metabase card: {str(e)}")
+        return {"error": f"Failed to query Metabase card: {str(e)}"}
+    except Exception as e:
+        print(f"Error: {str(e)}")
+        return {"error": str(e)}
+
+def query_metabase_exercise_quiz(username, password, class_code, exercise_card_id, user_id):
+    try:
+        # 获取会话令牌
+        session_response = requests.post(
+            'https://metabase.cloud.junyiacademy.org/api/session',
+            headers={'Content-Type': 'application/json'},
+            json={'username': username, 'password': password}
+        )
+        session_response.raise_for_status()
+        session_token = session_response.json()['id']
+        print(f"Session token: {session_token}")
 
-        # 打印响应状态码和内容
-        print(f"Response status code: {query_response.status_code}")
-        print(f"Response content: {query_response.text}")
+        # 打印请求信息
+        request_payload = {
+            "parameters": [
+                {
+                    "type": "category",
+                    "target": ["variable", ["template-tag", "class_code"]],
+                    "value": class_code
+                },
+                {
+                    "type": "category",
+                    "target": ["variable", ["template-tag", "user_id"]],
+                    "value": user_id
+                }
+            ]
+        }
+        print(f"Request payload: {json.dumps(request_payload, indent=2)}")
 
+        # 使用提供的 card_id 查询 Metabase 卡片
+        query_response = requests.post(
+            f'https://metabase.cloud.junyiacademy.org/api/card/{exercise_card_id}/query/json',
+            headers={
+                'Content-Type': 'application/json',
+                'X-Metabase-Session': session_token
+            },
+            json=request_payload
+        )
+    
         query_response.raise_for_status()
-        return query_response.json()
+
+        # filter class_code and user_id
+        query_response = query_response.json()
+        print(f"query_response: {query_response}")
+        query_response = [item for item in query_response if item['class_code'] == class_code and item['user_id'] == user_id]
+
+        return query_response
     except requests.RequestException as e:
         print(f"Failed to query Metabase card: {str(e)}")
         return {"error": f"Failed to query Metabase card: {str(e)}"}
@@ -142,34 +214,73 @@ def query_metabase(username, password, class_code, card_id, user_id):
         print(f"Error: {str(e)}")
         return {"error": str(e)}
 
+def generate_html_table(result_data, exercise_quiz_result):
+    color_mapping = {'1': 'green', '0': 'red', 'default': 'orange'}
+    table_html = """
+    <table style='width:100%; border: 1px solid black; border-collapse: collapse;'>
+        <tr><th>ID</th><th>Name</th><th>Color</th><th>Exercise Results</th></tr>
+    """
+    
+    for node in nx_graph.nodes:
+        name = nx_graph.nodes[node].get('title', node)
+        if node in result_data:
+            score = str(result_data[node])
+            color = color_mapping.get(score, color_mapping['default'])
+        else:
+            color = color_mapping['default']
+        
+        exercise_results = [
+            f"<li>Quiz ID: {quiz['quiz_id']}, Correct: {quiz['is_correct']}, Time Taken: {quiz['total_time_taken']}, Hint Used: {quiz['is_hint_used']}</li>"
+            for quiz in exercise_quiz_result
+            if quiz['exercise_title'] == name and quiz['user_id'] == result_data['user_id'] and quiz['class_code'] == result_data['class_code']
+        ]
+        exercise_results_html = '<ul>' + ''.join(exercise_results) + '</ul>'
+        
+        row_id = f"row-{node}"
+        
+        table_html += f"""
+        <tr>
+            <td><a href='#{row_id}-details'>{node}</a></td><td>{name}</td><td style='background-color: {color};'>{color}</td><td>{exercise_results_html}</td>
+        </tr>
+        """
+    
+    table_html += "</table>"
+    return table_html
+
+
 with gr.Blocks() as app:
     gr.Markdown("# Metabase Query and Visualization")
 
     with gr.Row():
         username = gr.Textbox(label="Metabase Username", value="purpleice9765@msn.com")
         password = gr.Textbox(label="Metabase Password", type="password", value=METABASE_PASSWORD)
+        class_code = gr.Textbox(label="Class Code", value="CAFSR")
+        topic_card_id = gr.Textbox(label="Card ID", value="6267")
+        exercise_card_id = gr.Textbox(label="Card ID", value="6284")
+        user_id = gr.Textbox(label="User ID", value="emdob01")
 
-    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")
-    graph_html = gr.HTML()
+    all_in_one_button = gr.Button("Fetch Data and Generate Graph")
 
-    query_button = gr.Button("Fetch Data")
-    graph_btn = gr.Button("Generate Graph")
+    with gr.Accordion(open=False):
+        topic_result = gr.JSON(label="Query Result")
+        exercise_quiz_result = gr.JSON(label="Quiz Query Result")
 
-    query_button.click(
-        fn=query_metabase,
-        inputs=[username, password, class_code, card_id, user_id],
-        outputs=result
-    )
+    with gr.Row():
+        graph_html = gr.HTML()
 
-    graph_btn.click(
-        needs_analysis,
-        inputs=None,
+    all_in_one_button.click(
+        fn=query_metabase_topic,
+        inputs=[username, password, class_code, topic_card_id, user_id],
+        outputs=topic_result
+    ).then(
+        fn=query_metabase_exercise_quiz,
+        inputs=[username, password, class_code, exercise_card_id, user_id],
+        outputs=exercise_quiz_result
+    ).then(
+        fn=needs_analysis,
+        inputs=[topic_result, exercise_quiz_result],
         outputs=graph_html
     )
 
 app.launch()
+