Update app.py

app.py

@@ -10,6 +10,29 @@ logger = logging.getLogger(__name__)
 
 def load_and_display_json(file):
     try:
+        # Function to format tools list as HTML with each tool on a separate line
+        def format_tools_list(tools):
+            if not tools or not isinstance(tools, list) or len(tools) == 0:
+                return "<span style='color: #888;'>No tools used</span>"
+            
+            html_list = "<ul style='margin: 0; padding-left: 20px;'>"
+            for tool in tools:
+                # Handle different possible formats of tool information
+                if isinstance(tool, dict):
+                    # If tool is a dictionary, format it nicely
+                    tool_name = tool.get('name', 'Unknown Tool')
+                    tool_details = json.dumps(tool, indent=2)
+                    html_list += f"""<li style='margin-bottom: 8px;'>
+                        <strong>{html.escape(str(tool_name))}</strong>
+                        <pre style='margin: 5px 0 0 10px; padding: 5px; background-color: #f8f8f8; border-radius: 3px; font-size: 12px; max-height: 150px; overflow-y: auto;'>{html.escape(tool_details)}</pre>
+                    </li>"""
+                else:
+                    # Simple string or other type
+                    html_list += f"<li style='margin-bottom: 5px;'>{html.escape(str(tool))}</li>"
+            
+            html_list += "</ul>"
+            return html_list
+        
         # Read the uploaded JSON file
         with open(file.name, 'r', encoding='utf-8') as f:
             data = json.load(f)
@@ -51,7 +74,7 @@ def load_and_display_json(file):
                 'Eval Scores': eval_scores,
                 'Response': item.get('chat_response', 'N/A'),
                 'Source': item.get('source', 'N/A'),
-                'Tools': ', '.join(item.get('tools', [])),
+                'Tools': item.get('tools', []),  # Keep as a list
                 'Retrieval Context': item.get('retrieval_context', 'N/A'),
                 'Ground Truth': item.get('ground_truth', 'N/A'),
                 'Evaluation Metrics': eval_metrics,
@@ -104,20 +127,20 @@ def load_and_display_json(file):
             }
             .expandable {
                 cursor: pointer;
-                color: #1a73e8;
+                color: white;
                 font-weight: bold;
                 text-decoration: none;
                 display: inline-block;
                 padding: 8px;
-                transition: color 0.2s;
-                background-color: #e8f0fe;
+                transition: all 0.2s;
                 border-radius: 4px;
-                border: 1px solid #c6dafc;
+                border: none;
                 position: relative;
+                text-align: center;
             }
             .expandable:hover {
-                color: #1557b0;
-                background-color: #d4e6fc;
+                filter: brightness(110%);
+                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
             }
             .details {
                 display: none;
@@ -264,45 +287,51 @@ def load_and_display_json(file):
             /* Column width adjustments */
             table th:nth-child(1), 
             table td:nth-child(1) {
+                width: 5%;
+                text-align: center;
+                font-weight: bold;
+            }
+            table th:nth-child(2), 
+            table td:nth-child(2) {
                 width: 15%;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
-            table th:nth-child(2), 
-            table td:nth-child(2) {
+            table th:nth-child(3), 
+            table td:nth-child(3) {
                 width: 25%;
                 max-width: 350px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
-            table th:nth-child(3),
-            table td:nth-child(3),
             table th:nth-child(4),
             table td:nth-child(4),
             table th:nth-child(5),
-            table td:nth-child(5) {
+            table td:nth-child(5),
+            table th:nth-child(6),
+            table td:nth-child(6) {
                 width: 8%;
                 min-width: 70px;
                 text-align: center;
             }
-            table th:nth-child(6),
-            table td:nth-child(6) {
-                width: 21%;
-            }
             table th:nth-child(7),
             table td:nth-child(7) {
-                width: 15%;
+                width: 21%;
+            }
+            table th:nth-child(8),
+            table td:nth-child(8) {
+                width: 20%;
                 text-align: center;
             }
             /* Add tooltips for truncated content */
-            table td:nth-child(1),
-            table td:nth-child(2) {
+            table td:nth-child(2),
+            table td:nth-child(3) {
                 position: relative;
             }
-            table td:nth-child(1):hover::after,
-            table td:nth-child(2):hover::after {
+            table td:nth-child(2):hover::after,
+            table td:nth-child(3):hover::after {
                 content: attr(title);
                 position: absolute;
                 left: 0;
@@ -338,6 +367,9 @@ def load_and_display_json(file):
             </div>
         </div>
         
+        <style>
+
+        </style>
         <script>
             document.addEventListener('keydown', function(event) {
                 if (event.key === 'Escape') {
@@ -350,9 +382,73 @@ def load_and_display_json(file):
         </script>
         """
         
+        # Calculate statistics for each row type
+        total_rows = len(df)
+        send_to_human_count = 0
+        low_coverage_count = 0
+        medium_coverage_count = 0
+        high_coverage_count = 0
+        
+        for _, row in df.iterrows():
+            # Check for metrics to determine row type
+            is_send_to_human = row['Send to Human'] is True
+            
+            # Extract coverage score
+            coverage_score = None
+            if row['Evaluation Metrics']:
+                for metric in row['Evaluation Metrics']:
+                    if metric.get('name') == 'Information Coverage (GEval)':
+                        try:
+                            coverage_score = float(metric.get('score', 0))
+                        except (ValueError, TypeError):
+                            pass
+            
+            # Count row types (in order of priority for display)
+            if is_send_to_human:
+                send_to_human_count += 1
+            elif coverage_score is not None:
+                if coverage_score < 0.5:
+                    low_coverage_count += 1
+                elif coverage_score >= 0.8:
+                    high_coverage_count += 1
+                else:  # Between 0.5 and 0.8
+                    medium_coverage_count += 1
+        
+        # Calculate percentages
+        send_to_human_percent = (send_to_human_count / total_rows * 100) if total_rows > 0 else 0
+        low_coverage_percent = (low_coverage_count / total_rows * 100) if total_rows > 0 else 0
+        medium_coverage_percent = (medium_coverage_count / total_rows * 100) if total_rows > 0 else 0
+        high_coverage_percent = (high_coverage_count / total_rows * 100) if total_rows > 0 else 0
+        
+        # Add statistics summary at the top
+        html_output += """
+        <div style="margin-bottom: 20px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 5px; background-color: #f9f9f9;">
+            <h3>Row Type Statistics</h3>
+            <div style="display: flex; flex-wrap: wrap; gap: 15px;">
+                <div style="background-color: #ffcccc; padding: 10px; border-radius: 5px; min-width: 200px;">
+                    <strong>Send to Human:</strong> {:.1f}% ({} of {} rows)
+                </div>
+                <div style="background-color: #e0e0e0; padding: 10px; border-radius: 5px; min-width: 200px;">
+                    <strong>Low Coverage:</strong> {:.1f}% ({} of {} rows)
+                </div>
+                <div style="background-color: #a9dfbf; padding: 10px; border-radius: 5px; min-width: 200px;">
+                    <strong>Medium Coverage:</strong> {:.1f}% ({} of {} rows)
+                </div>
+                <div style="background-color: #1e8449; color: white; padding: 10px; border-radius: 5px; min-width: 200px;">
+                    <strong>High Coverage:</strong> {:.1f}% ({} of {} rows)
+                </div>
+            </div>
+        </div>
+        """.format(
+            send_to_human_percent, send_to_human_count, total_rows,
+            low_coverage_percent, low_coverage_count, total_rows,
+            medium_coverage_percent, medium_coverage_count, total_rows,
+            high_coverage_percent, high_coverage_count, total_rows
+        )
+        
         # Add table
         html_output += "<table>"
-        html_output += "<tr>" + "".join(f"<th>{col}</th>" for col in ['User ID', 'Question', 'Confidence', 'Send to Human', 'Time Spent', 'Eval Scores', 'Details']) + "</tr>"
+        html_output += "<tr>" + "".join(f"<th>{col}</th>" for col in ['#', 'User ID', 'Question', 'Confidence', 'Send to Human', 'Time Spent', 'Eval Scores', 'Details']) + "</tr>"
         for _, row in df.iterrows():
             # Check for scores
             low_validity = False
@@ -424,6 +520,7 @@ def load_and_display_json(file):
                 logger.info(f"Row {row['Index']} marked as 'Medium Information Coverage'")
             
             html_output += f"<tr{row_class}>"
+            html_output += f"<td style='text-align: center;'>{row['Index'] + 1}</td>"
             html_output += f"<td title=\"{html.escape(str(row['User ID']))}\">{html.escape(str(row['User ID']))}</td>"
             html_output += f"<td title=\"{html.escape(str(row['Question']))}\">{html.escape(str(row['Question']))}</td>"
             html_output += f"<td>{row['Confidence']}</td>"
@@ -474,31 +571,60 @@ def load_and_display_json(file):
             else:
                 eval_metrics_json = "N/A"
             
-            # Add details in the same row
+            # Add buttons for different popups in the same row
             html_output += f"""
                 <td class="detail-container">
-                    <input type='checkbox' id='toggle_{row["Index"]}'>
-                    <label for='toggle_{row["Index"]}' class='expandable'>Show Details</label>
-                    <div class='overlay' onclick="document.getElementById('toggle_{row["Index"]}').checked = false;"></div>
-                    <div class='details' onclick="event.stopPropagation();">
-                        <button class="close-details" onclick="document.getElementById('toggle_{row["Index"]}').checked = false;">×</button>
-                        <strong>Question:</strong>
-                        <p>{html.escape(str(row['Question']))}</p>
-                        <strong>Ground Truth:</strong>
-                        <p>{html.escape(str(row['Ground Truth']))}</p>
-                        <strong>Response:</strong>
-                        <p>{html.escape(str(row['Response']))}</p>
-                        <strong>Source:</strong>
-                        <p>{html.escape(str(row['Source']))}</p>
-                        <strong>Tools:</strong>
-                        <p>{html.escape(str(row['Tools']))}</p>
-                        {f"<strong style='color: #d32f2f;'>Call Human Message:</strong><p style='color: #d32f2f; white-space: pre-wrap;'>{html.escape(formatted_message)}</p>" if row['Send to Human'] is True else ""}
-                        <strong>Information to Check:</strong>
-                        <p>{html.escape(str(row['Information to Check']))}</p>
-                        <strong>Evaluation Metrics:</strong>
-                        <div class='json-viewer'><pre>{html.escape(eval_metrics_json)}</pre></div>
-                        <strong>Retrieval Context:</strong>
-                        <div class='json-viewer'><pre>{retrieval_context_json}</pre></div>
+                    <div style="display: flex; flex-direction: row; justify-content: space-around; gap: 3px;">
+                        <!-- Details Button -->
+                        <div style="flex: 1;">
+                            <input type='checkbox' id='toggle_{row["Index"]}'>
+                            <label for='toggle_{row["Index"]}' class='expandable' style="width: 100%; box-sizing: border-box; margin: 0; padding: 5px 2px; font-size: 12px; background-color: #4CAF50;">Details</label>
+                            <div class='overlay' onclick="document.getElementById('toggle_{row["Index"]}').checked = false;"></div>
+                            <div class='details' onclick="event.stopPropagation();">
+                            <button class="close-details" onclick="document.getElementById('toggle_{row["Index"]}').checked = false;">×</button>
+                            <strong>Question:</strong>
+                            <p>{html.escape(str(row['Question']))}</p>
+                            <strong>Ground Truth:</strong>
+                            <p>{html.escape(str(row['Ground Truth']))}</p>
+                            <strong>Response:</strong>
+                            <p>{html.escape(str(row['Response']))}</p>
+                            <strong>Source:</strong>
+                            <p>{html.escape(str(row['Source']))}</p>
+                            <strong>Tools:</strong>
+                            <div style="margin-top: 5px; margin-bottom: 10px;">
+                                {format_tools_list(row['Tools'])}
+                            </div>
+                            {f"<strong style='color: #d32f2f;'>Call Human Message:</strong><p style='color: #d32f2f; white-space: pre-wrap;'>{html.escape(formatted_message)}</p>" if row['Send to Human'] is True else ""}
+                            <strong>Information to Check:</strong>
+                            <p>{html.escape(str(row['Information to Check']))}</p>
+                        </div>
+                    </div>
+                    
+                    <!-- Evaluation Metrics Button -->
+                        <div style="flex: 1;">
+                            <input type='checkbox' id='metrics_toggle_{row["Index"]}'>
+                            <label for='metrics_toggle_{row["Index"]}' class='expandable' style="width: 100%; box-sizing: border-box; margin: 0; padding: 5px 2px; font-size: 12px; background-color: #2196F3;">Metrics</label>
+                            <div class='overlay' onclick="document.getElementById('metrics_toggle_{row["Index"]}').checked = false;"></div>
+                            <div class='details' onclick="event.stopPropagation();">
+                            <button class="close-details" onclick="document.getElementById('metrics_toggle_{row["Index"]}').checked = false;">×</button>
+                            <strong>Information to Check:</strong>
+                            <p style="margin-bottom: 15px; padding: 8px; background-color: #f5f5f5; border-left: 4px solid #2196F3; border-radius: 3px;">{html.escape(str(row['Information to Check']))}</p>
+                            <strong>Evaluation Metrics:</strong>
+                            <div class='json-viewer'><pre>{html.escape(eval_metrics_json)}</pre></div>
+                        </div>
+                    </div>
+                    
+                    <!-- Retrieval Context Button -->
+                        <div style="flex: 1;">
+                            <input type='checkbox' id='context_toggle_{row["Index"]}'>
+                            <label for='context_toggle_{row["Index"]}' class='expandable' style="width: 100%; box-sizing: border-box; margin: 0; padding: 5px 2px; font-size: 12px; background-color: #FF9800;">Context</label>
+                            <div class='overlay' onclick="document.getElementById('context_toggle_{row["Index"]}').checked = false;"></div>
+                            <div class='details' onclick="event.stopPropagation();">
+                            <button class="close-details" onclick="document.getElementById('context_toggle_{row["Index"]}').checked = false;">×</button>
+                            <strong>Retrieval Context:</strong>
+                            <div class='json-viewer'><pre>{retrieval_context_json}</pre></div>
+                        </div>
+                        </div>
                     </div>
                 </td>
             """