UI update: Minimalistic diagnosis bars and sample info

app.py

@@ -49,6 +49,22 @@ SAMPLE_DESCRIPTIONS = {
     "Sample 3": "Ventricular Tachycardia - A fast heart rhythm originating from the ventricles, potentially life-threatening.",
 }
 
+# Reverse mapping: display name to real condition info for analysis results
+DISPLAY_TO_CONDITION = {
+    "Sample 1": {
+        "name": "Atrial Flutter",
+        "description": "A rapid but regular atrial rhythm, typically around 250-350 bpm in the atria."
+    },
+    "Sample 2": {
+        "name": "Normal Sinus Rhythm",
+        "description": "A healthy heart rhythm with regular beats originating from the sinus node."
+    },
+    "Sample 3": {
+        "name": "Ventricular Tachycardia",
+        "description": "A fast heart rhythm originating from the ventricles, potentially life-threatening."
+    },
+}
+
 
 def load_inference_engine():
     """Load the inference engine on startup."""
@@ -83,13 +99,14 @@ def get_sample_ecgs():
     return samples
 
 
-def analyze_ecg(ecg_signal: np.ndarray, filename: str = "ECG Analysis"):
+def analyze_ecg(ecg_signal: np.ndarray, filename: str = "ECG Analysis", condition_info: dict = None):
     """
     Analyze an ECG signal and return all visualizations.
 
     Args:
         ecg_signal: ECG signal array
         filename: Name to display
+        condition_info: Optional dict with 'name' and 'description' for the condition
 
     Returns:
         Tuple of (ecg_plot, diagnosis_plot, risk_plot, summary_text)
@@ -137,23 +154,44 @@ def analyze_ecg(ecg_signal: np.ndarray, filename: str = "ECG Analysis"):
             else:
                 severity_class = "severity-high"
 
+            # Create segmented bar with 10 segments
+            total_segments = 10
+            filled_segments = int(prob_pct / 10)
+            segments_html = ""
+            for s in range(total_segments):
+                if s < filled_segments:
+                    segments_html += '<div class="bar-segment"></div>'
+                else:
+                    segments_html += '<div class="bar-segment empty"></div>'
+
             diagnosis_html += f"""
-            <div class="diagnosis-card">
-                <div class="diagnosis-header">
-                    <span class="diagnosis-rank">#{i}</span>
-                    <span class="diagnosis-name">{class_names[idx]}</span>
-                    <span class="diagnosis-percent {severity_class}">{prob_pct:.1f}%</span>
-                </div>
-                <div class="progress-container">
-                    <div class="progress-bar {severity_class}" style="width: {prob_pct}%;"></div>
+            <div class="diagnosis-row {severity_class}">
+                <span class="diagnosis-rank">#{i}</span>
+                <span class="diagnosis-name" title="{class_names[idx]}">{class_names[idx]}</span>
+                <div class="diagnosis-bar-container">
+                    <div class="diagnosis-bar-segments">{segments_html}</div>
+                    <div class="diagnosis-bar-track">
+                        <div class="diagnosis-bar-fill" style="width: {prob_pct}%;"></div>
+                    </div>
                 </div>
+                <span class="diagnosis-percent">{prob_pct:.1f}%</span>
             </div>
             """
 
+    # Determine display title and description
+    if condition_info:
+        display_title = condition_info.get("name", filename)
+        condition_desc = condition_info.get("description", "")
+        condition_html = f'<p style="color: #666; font-size: 0.95em; margin: 8px 0 16px 0; font-style: italic;">{condition_desc}</p>' if condition_desc else ""
+    else:
+        display_title = filename
+        condition_html = ""
+
     summary = f"""
 <div style="padding: 10px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;">
 
-<h2 style="margin: 0 0 16px 0; color: #333;">Analysis Results: {filename}</h2>
+<h2 style="margin: 0 0 8px 0; color: #333;">Analysis Results: {display_title}</h2>
+{condition_html}
 
 <div style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.9em; margin-bottom: 20px;">
 Inference Time: {inference_time:.1f} ms
@@ -222,7 +260,9 @@ def analyze_sample_by_name(sample_name: str):
         if sample["name"] == sample_name:
             try:
                 ecg_signal = np.load(sample["path"])
-                return analyze_ecg(ecg_signal, sample["name"])
+                # Get the real condition info for display
+                condition_info = DISPLAY_TO_CONDITION.get(sample_name)
+                return analyze_ecg(ecg_signal, sample["name"], condition_info)
             except Exception as e:
                 logger.error(f"Error loading sample: {e}")
                 return None, None, None, f"<p style='color: #dc3545;'>Error loading sample: {str(e)}</p>"
@@ -371,81 +411,121 @@ def create_demo_interface():
         box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
     }
 
-    /* Modern Diagnosis Card Styles */
+    /* Minimalistic Diagnosis Styles */
     .diagnosis-dashboard {
-        padding: 20px;
+        padding: 12px 0;
+        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
     }
 
-    .diagnosis-card {
-        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-        border-radius: 16px;
-        padding: 20px;
-        margin: 12px 0;
-        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-        border: 1px solid rgba(0,0,0,0.05);
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .diagnosis-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
-    }
-
-    .diagnosis-header {
+    .diagnosis-row {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin-bottom: 12px;
+        padding: 8px 12px;
+        margin: 4px 0;
+        background: #fafafa;
+        border-radius: 6px;
+        transition: background 0.15s ease;
+    }
+
+    .diagnosis-row:hover {
+        background: #f0f0f0;
     }
 
     .diagnosis-rank {
-        font-size: 0.85em;
+        font-size: 0.8em;
         font-weight: 600;
-        color: #666;
-        background: #f0f0f0;
-        padding: 4px 10px;
-        border-radius: 20px;
+        color: #888;
+        width: 28px;
+        flex-shrink: 0;
     }
 
     .diagnosis-name {
-        font-size: 1.1em;
-        font-weight: 600;
+        font-size: 0.9em;
+        font-weight: 500;
         color: #333;
-        flex: 1;
-        margin-left: 12px;
+        width: 160px;
+        flex-shrink: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
-    .diagnosis-percent {
-        font-size: 1.3em;
-        font-weight: 700;
+    .diagnosis-bar-container {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        margin: 0 12px;
+        height: 16px;
+        position: relative;
     }
 
-    .progress-container {
-        height: 10px;
-        background: #e9ecef;
-        border-radius: 10px;
+    .diagnosis-bar-track {
+        width: 100%;
+        height: 3px;
+        background: #e0e0e0;
+        border-radius: 2px;
+        position: relative;
         overflow: hidden;
     }
 
-    .progress-bar {
+    .diagnosis-bar-fill {
+        height: 100%;
+        border-radius: 2px;
+        transition: width 0.5s ease;
+    }
+
+    .diagnosis-bar-segments {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        display: flex;
+        gap: 2px;
+    }
+
+    .bar-segment {
+        width: 3px;
         height: 100%;
-        border-radius: 10px;
-        transition: width 0.8s ease;
+        border-radius: 1px;
+        opacity: 0.9;
     }
 
-    .severity-low {
-        background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
-        color: #28a745;
+    .bar-segment.empty {
+        background: #e0e0e0;
+        opacity: 0.5;
     }
 
-    .severity-medium {
-        background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
-        color: #fd7e14;
+    .diagnosis-percent {
+        font-size: 0.85em;
+        font-weight: 600;
+        width: 55px;
+        text-align: right;
+        flex-shrink: 0;
+    }
+
+    /* Color classes for severity */
+    .severity-low .bar-segment:not(.empty),
+    .severity-low .diagnosis-bar-fill {
+        background: #20c997;
+    }
+    .severity-low .diagnosis-percent {
+        color: #20c997;
     }
 
-    .severity-high {
-        background: linear-gradient(90deg, #dc3545 0%, #e83e8c 100%);
-        color: #dc3545;
+    .severity-medium .bar-segment:not(.empty),
+    .severity-medium .diagnosis-bar-fill {
+        background: #f0ad4e;
+    }
+    .severity-medium .diagnosis-percent {
+        color: #e09000;
+    }
+
+    .severity-high .bar-segment:not(.empty),
+    .severity-high .diagnosis-bar-fill {
+        background: #e74c3c;
+    }
+    .severity-high .diagnosis-percent {
+        color: #e74c3c;
     }
 
     /* Footer Styles */
@@ -539,11 +619,6 @@ def create_demo_interface():
                                 info="Click on a sample to select it"
                             )
 
-                            # Sample descriptions
-                            gr.Markdown("**Sample Descriptions:**")
-                            for sample in samples:
-                                gr.Markdown(f"- **{sample['name']}**: {sample['description']}")
-
                             analyze_sample_btn = gr.Button(
                                 "🔍 Analyze Selected ECG",
                                 variant="primary",