added type

app.py

@@ -2,20 +2,19 @@ import utils
 import gradio as gr
 import parameters
 
-with gr.Blocks() as demo:
-    # gr.Tab(label="Error Metrics Dashboard")
+with gr.Blocks(title="Opik Error Dashboard") as demo: 
     gr.Markdown("# Error Metrics Dashboard")
     with gr.Row():
-        project = gr.Textbox("Project Name", value= parameters.project)
+        project = gr.Textbox(value=parameters.project, interactive=True)
         start_date = gr.Textbox(label="Start Date (YYYY-MM-DD)", value="2025-02-20")
         end_date = gr.Textbox(label="End Date (YYYY-MM-DD)", value="2025-02-21")
     submit_btn = gr.Button("Process")
-    output = gr.Textbox(label="Results", lines=10)
+    output = gr.HTML(label="Results", min_height="200px")
     
     submit_btn.click(
         fn=utils.process_dates,
-        inputs=[start_date, end_date,project],
+        inputs=[start_date, end_date, project],
         outputs=output
     )
 
-demo.launch(share = True)
+demo.launch(share=True)

utils.py

@@ -139,23 +139,26 @@ def find_errors_and_metrics(traces, spans):
         error_spans = []
         error_metrics = defaultdict(list)
 
-        
         for span in spans:
             content = span['content']
             output = content.get("output")
+            error_info = content.get("error_info", {})  
+
             if isinstance(output, dict) and 'output' in output:
-                output_value = output.get("output")  
+                output_value = output.get("output")
             else:
                 output_value = output
-            # print(f"Span output_value: {output_value}")
-            if (output_value is None or  (isinstance(output, list) and len(output) ==0)):
-                # print(output_value)
+
+            if ((output_value is None or (isinstance(output, list) and len(output) == 0)) and len(error_info) > 0):
+                error_type = error_info.get("exception_type", "unknown_error")
                 error_spans.append({
                     "trace_id": span["trace_id"],
                     "span_id": span["span_id"],
-                    "error_content": output
+                    "error_content": output, 
+                    "exception_type": error_type
                 })
-                error_metrics["empty_output"].append(span["trace_id"])
+                
+                error_metrics[error_type].append({"trace_id": span["trace_id"], "span_id": span["span_id"]})
 
         print(f"Found {len(error_spans)} outputs with errors (empty/null)")
 
@@ -175,40 +178,102 @@ def find_errors_and_metrics(traces, spans):
         print("Step 10: Calculating metrics")
         metrics = {
             "total_errors": len(error_spans),
-            "unique_error_types": {
+            "error_types": {
                 error_type: {
-                    "count": len(set(trace_ids)),
-                    "trace_ids": list(set(trace_ids))
+                    "count": len(entries),
+                    "instances": [
+                        {"trace_id": entry["trace_id"], "span_id": entry["span_id"]}
+                        for entry in entries
+                    ]
                 }
-                for error_type, trace_ids in error_metrics.items()
+                for error_type, entries in error_metrics.items()
             }
         }
-        print(f"Metrics calculated: {len(metrics['unique_error_types'])} unique error types")
+        print(f"Metrics calculated: {len(metrics['error_types'])} error types")
+        for error_type, data in metrics["error_types"].items():
+            print(f"Error Type: {error_type}, Count: {data['count']}")
+            for instance in data["instances"]:
+                print(f"  Trace ID: {instance['trace_id']}, Span ID: {instance['span_id']}")
         return metrics
 
     except Exception as e:
         print(f"Error in find_errors_and_metrics: {e}")
         return {}
 
-def process_dates(start_date, end_date,project):
+def process_dates(start_date, end_date, project):
     try:
         print("Pipeline Start: Processing dates")
         traces, spans = get_traces_on_date(start_date, end_date, project, parameters.api_key)
         metrics = find_errors_and_metrics(traces, spans)
         
-        output = f"Total Empty/Null Outputs Found: {metrics.get('total_errors', 0)}\n\n"
-        output += f"Total Traces Found: {len(traces)}\n"
-        output += f"Total Spans Processed: {len(spans)}\n\n"
-        output += "Error Metrics:\n"
-        if metrics.get('unique_error_types', {}):
-            for error_type, data in metrics.get('unique_error_types', {}).items():
-                output += f"{error_type.replace('_', ' ').title()}: {data['count']} unique occurrences\n"
-                output += f"Trace IDs: {', '.join(data['trace_ids'][:5])}{'...' if len(data['trace_ids']) > 5 else ''}\n\n"
-        else:
-            output += "No empty or null outputs detected.\n"
+        html_output = """
+        <div style='font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; border-radius: 10px;'>
+            <h2 style='color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 5px;'>Metrics Report</h2>
+            
+            <div style='margin: 15px 0;'>
+                <span style='color: #e74c3c; font-weight: bold;'>Total Empty/Null Outputs Found: </span>
+                <span style='color: #2980b9'>{empty_count}</span>
+            </div>
+            
+            <div style='margin: 15px 0;'>
+                <span style='color: #27ae60; font-weight: bold;'>Total Traces Found: </span>
+                <span style='color: #2980b9'>{traces_count}</span>
+                <br>
+                <span style='color: #27ae60; font-weight: bold;'>Total Spans Processed: </span>
+                <span style='color: #2980b9'>{spans_count}</span>
+            </div>
             
+            <h3 style='color: #8e44ad; margin-top: 20px;'>Error Metrics</h3>
+            {error_section}
+        </div>
+        """
+
+        if metrics.get('error_types', {}):
+            error_html = "<div style='background-color: #fff; padding: 15px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);'>"
+            for error_type, data in metrics.get('error_types', {}).items():
+                error_html += f"""
+                <div style='margin: 10px 0;'>
+                    <span style='color: #d35400; font-weight: bold;'>{error_type.replace('_', ' ').title()}: </span>
+                    <span style='color: #2980b9'>{data['count']} occurrences</span>
+                    <div style='margin-left: 20px;'>
+                        <span style='color: #7f8c8d;'>Instances:</span>
+                        <ul style='list-style-type: none; padding-left: 10px;'>
+                """
+                for instance in data['instances'][:5]:
+                    error_html += f"""
+                    <li style='color: #34495e;'>
+                        Trace ID: <span style='color: #16a085'>{instance['trace_id']}</span>, 
+                        Span ID: <span style='color: #16a085'>{instance['span_id']}</span>
+                    </li>
+                    """
+                if len(data['instances']) > 5:
+                    error_html += "<li style='color: #7f8c8d;'>... (and more)</li>"
+                error_html += "</ul></div></div>"
+            error_html += "</div>"
+        else:
+            error_html = """
+            <div style='color: #27ae60; background-color: #ecf0f1; padding: 10px; border-radius: 5px;'>
+                No empty or null outputs with exceptions detected.
+            </div>
+            """
+
+        formatted_output = html_output.format(
+            empty_count=metrics.get('total_errors', 0),
+            traces_count=len(traces),
+            spans_count=len(spans),
+            error_section=error_html
+        )
+        
         print("Pipeline End: Results formatted")
-        return output
+        return formatted_output
+        
     except Exception as e:
         print(f"Error processing dates: {e}")
-        return f"Error processing dates: {e}"
+        error_html = f"""
+        <div style='font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; border-radius: 10px;'>
+            <h2 style='color: #e74c3c;'>Error Occurred</h2>
+            <p style='color: #c0392b;'>Error processing dates: {str(e)}</p>
+        </div>
+        """
+        return error_html
+