Improve confusion matrix layout and add metric tooltips

direct_classifier.html

@@ -40,12 +40,12 @@
             </div>
             <div class="chart-card">
                 <div class="chart-title">📋 Confusion Matrix</div>
-                <div class="matrix-wrapper">
+                <div class="confusion-matrix-layout">
                     <div class="matrix-ylabel">TRUE class</div>
-                    <div class="matrix-main">
-                        <canvas id="matrixChart" width="350" height="350"></canvas>
-                        <div class="matrix-xlabel">PREDICTED class</div>
+                    <div class="matrix-canvas-container">
+                        <canvas id="matrixChart" width="300" height="300"></canvas>
                     </div>
+                    <div class="matrix-xlabel">PREDICTED class</div>
                 </div>
             </div>
             <div class="chart-card">

inverse_classifier.html

@@ -54,12 +54,12 @@
             </div>
             <div class="chart-card">
                 <div class="chart-title">📋 Confusion Matrix</div>
-                <div class="matrix-wrapper">
+                <div class="confusion-matrix-layout">
                     <div class="matrix-ylabel">TRUE class</div>
-                    <div class="matrix-main">
-                        <canvas id="matrixChart" width="350" height="350"></canvas>
-                        <div class="matrix-xlabel">PREDICTED class</div>
+                    <div class="matrix-canvas-container">
+                        <canvas id="matrixChart" width="300" height="300"></canvas>
                     </div>
+                    <div class="matrix-xlabel">PREDICTED class</div>
                 </div>
             </div>
             <div class="chart-card">

src/css/inverse_style.css

@@ -165,34 +165,41 @@ h1 {
     position: relative;
     height: 300px;
     margin-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
 
-.matrix-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    flex-direction: row;
+.confusion-matrix-layout {
+    position: relative;
+    width: 250px;
+    height: 250px;
+    margin: 0 auto; /* Center the block horizontally */
+    top: 50%;       /* Center the block vertically */
+    transform: translateY(-50%);
 }
 
-.matrix-ylabel {
-    writing-mode: vertical-rl;
-    transform: rotate(180deg);
-    text-align: center;
-    margin-right: 15px;
+.matrix-ylabel,
+.matrix-xlabel {
+    position: absolute;
+    font-weight: bold;
     color: #555;
     font-style: italic;
+    white-space: nowrap;
+}
+
+.matrix-ylabel {
+    top: 50%;
+    left: -20px; /* Position label just outside the container */
+    transform: translateY(-50%) rotate(-90deg);
 }
 
 .matrix-xlabel {
-    text-align: center;
-    margin-top: 15px;
-    color: #555;
-    font-style: italic;
+    bottom: -25px; /* Position label just outside the container */
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.matrix-canvas-container {
+    width: 100%;
+    height: 100%;
 }
 
 #matrixChart {

src/css/style.css

@@ -104,34 +104,41 @@ h1 {
     position: relative;
     height: 300px;
     margin-bottom: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
 
-.matrix-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    flex-direction: row;
+.confusion-matrix-layout {
+    position: relative;
+    width: 250px;
+    height: 250px;
+    margin: 0 auto; /* Center the block horizontally */
+    top: 50%;       /* Center the block vertically */
+    transform: translateY(-50%);
 }
 
-.matrix-ylabel {
-    writing-mode: vertical-rl;
-    transform: rotate(180deg);
-    text-align: center;
-    margin-right: 15px;
+.matrix-ylabel,
+.matrix-xlabel {
+    position: absolute;
+    font-weight: bold;
     color: #555;
     font-style: italic;
+    white-space: nowrap;
+}
+
+.matrix-ylabel {
+    top: 50%;
+    left: -20px; /* Position label just outside the container */
+    transform: translateY(-50%) rotate(-90deg);
 }
 
 .matrix-xlabel {
-    text-align: center;
-    margin-top: 15px;
-    color: #555;
-    font-style: italic;
+    bottom: -25px; /* Position label just outside the container */
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.matrix-canvas-container {
+    width: 100%;
+    height: 100%;
 }
 
 #matrixChart {

src/js/direct_classifier.js

@@ -2,6 +2,39 @@
 let dataChart, rocChart, metricsChart;
 const N_SAMPLES_PER_CLASS = 100;
 
+const metricExplanations = {
+    'AUC': {
+        description: "Measures the model's ability to distinguish between positive and negative classes. It represents the probability that a random positive instance is ranked higher than a random negative instance.",
+        range: "Ranges from 0 (worst) to 1 (best). 0.5 is random chance.",
+        formula: "Area Under the ROC Curve"
+    },
+    'Accuracy': {
+        description: "The proportion of all predictions that are correct. It's a general measure of the model's performance.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "(TP + TN) / (TP + TN + FP + FN)"
+    },
+    'Precision': {
+        description: "Of all the positive predictions made by the model, how many were actually positive. High precision indicates a low false positive rate.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "TP / (TP + FP)"
+    },
+    'Recall': {
+        description: "Of all the actual positive instances, how many did the model correctly identify. Also known as Sensitivity or True Positive Rate.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "TP / (TP + FN)"
+    },
+    'Specificity': {
+        description: "Of all the actual negative instances, how many did the model correctly identify. Also known as True Negative Rate.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "TN / (TN + FP)"
+    },
+    'F1-Score': {
+        description: "The harmonic mean of Precision and Recall. It provides a single score that balances both concerns, useful for imbalanced classes.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "2 * (Precision * Recall) / (Precision + Recall)"
+    }
+};
+
 // --- DATA GENERATION ---
 function randomGaussian(mean = 0, stdDev = 1) {
     let u = 0, v = 0;
@@ -106,8 +139,13 @@ function drawConfusionMatrix(canvasId, vp, fp, vn, fn) {
     ctx.fillStyle = '#333'; ctx.font = 'bold 14px Segoe UI';
     ctx.fillText('Negative', margin + cellW / 2, gridH + 20);
     ctx.fillText('Positive', margin + cellW + cellW / 2, gridH + 20);
-    ctx.save(); ctx.translate(20, gridH / 2); ctx.rotate(-Math.PI / 2);
-    ctx.fillText('Positive', 0, 0); ctx.fillText('Negative', -cellH, 0);
+    ctx.save();
+    ctx.translate(20, gridH / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Positive', -cellH / 2, 0);
+    ctx.fillText('Negative', cellH / 2, 0);
     ctx.restore();
 }
 
@@ -177,7 +215,42 @@ function initCharts() {
         type: 'bar',
         data: { labels: ['AUC', 'Accuracy', 'Precision', 'Recall', 'Specificity', 'F1-Score'], datasets: [{ data: [], backgroundColor: ['#673AB7', '#009688', '#1E88E5', '#388E3C', '#FB8C00', '#9C27B0'] }] },
         plugins: [customDatalabelsPlugin],
-        options: { responsive: true, maintainAspectRatio: false, indexAxis: 'x', animation: { duration: 0 }, plugins: { legend: { display: false }, tooltip: { enabled: false } }, scales: { y: { beginAtZero: true, max: 1 } } }
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            indexAxis: 'x',
+            animation: { duration: 0 },
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    enabled: true,
+                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    titleColor: '#000',
+                    bodyColor: '#000',
+                    borderColor: '#555',
+                    borderWidth: 1,
+                    padding: 15,
+                    displayColors: false,
+                    callbacks: {
+                        label: function (context) {
+                            const label = context.chart.data.labels[context.dataIndex];
+                            const value = context.raw.toFixed(3);
+                            const explanation = metricExplanations[label];
+                            let tooltipText = [`${label}: ${value}`];
+                            if (explanation) {
+                                tooltipText.push('');
+                                const roleLines = `Role: ${explanation.description}`.match(/.{1,50}(\s|$)/g) || [];
+                                roleLines.forEach(line => tooltipText.push(line.trim()));
+                                tooltipText.push(`Range: ${explanation.range}`);
+                                tooltipText.push(`Formula: ${explanation.formula}`);
+                            }
+                            return tooltipText;
+                        }
+                    }
+                }
+            },
+            scales: { y: { beginAtZero: true, max: 1 } }
+        }
     });
 }
 

src/js/inverse_classifier.js

@@ -1,5 +1,37 @@
 // --- GLOBAL VARIABLES ---
 let scoresChart, rocChart, metricsChart;
+const metricExplanations = {
+    'AUC': {
+        description: "Measures the model's ability to distinguish between positive and negative classes. It represents the probability that a random positive instance is ranked higher than a random negative instance.",
+        range: "Ranges from 0 (worst) to 1 (best). 0.5 is random chance.",
+        formula: "Area Under the ROC Curve"
+    },
+    'Accuracy': {
+        description: "The proportion of all predictions that are correct. It's a general measure of the model's performance.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "(TP + TN) / (TP + TN + FP + FN)"
+    },
+    'Precision': {
+        description: "Of all the positive predictions made by the model, how many were actually positive. High precision indicates a low false positive rate.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "TP / (TP + FP)"
+    },
+    'Recall': {
+        description: "Of all the actual positive instances, how many did the model correctly identify. Also known as Sensitivity or True Positive Rate.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "TP / (TP + FN)"
+    },
+    'Specificity': {
+        description: "Of all the actual negative instances, how many did the model correctly identify. Also known as True Negative Rate.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "TN / (TN + FP)"
+    },
+    'F1-Score': {
+        description: "The harmonic mean of Precision and Recall. It provides a single score that balances both concerns, useful for imbalanced classes.",
+        range: "Ranges from 0 (worst) to 1 (best).",
+        formula: "2 * (Precision * Recall) / (Precision + Recall)"
+    }
+};
 let lockState = { tp: false, fp: false, tn: false, fn: false };
 let currentState = { tp: 70, fp: 20, tn: 80, fn: 30 };
 const TOTAL_SAMPLES = 200;
@@ -87,8 +119,13 @@ function drawConfusionMatrix(canvasId, tp, fp, tn, fn) {
     ctx.fillStyle = '#333'; ctx.font = 'bold 14px Segoe UI';
     ctx.fillText('Negative', margin + cellW / 2, gridH + 20);
     ctx.fillText('Positive', margin + cellW + cellW / 2, gridH + 20);
-    ctx.save(); ctx.translate(20, gridH / 2); ctx.rotate(-Math.PI / 2);
-    ctx.fillText('Positive', 0, 0); ctx.fillText('Negative', -cellH, 0);
+    ctx.save();
+    ctx.translate(20, gridH / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Positive', -cellH / 2, 0);
+    ctx.fillText('Negative', cellH / 2, 0);
     ctx.restore();
 }
 
@@ -178,7 +215,42 @@ function initCharts() {
         type: 'bar',
         data: { labels: ['AUC', 'Accuracy', 'Precision', 'Recall', 'Specificity', 'F1-Score'], datasets: [{ data: [], backgroundColor: ['#673AB7', '#009688', '#1E88E5', '#388E3C', '#FB8C00', '#9C27B0'] }] },
         plugins: [customDatalabelsPlugin],
-        options: { responsive: true, maintainAspectRatio: false, indexAxis: 'x', animation: { duration: 0 }, plugins: { legend: { display: false }, tooltip: { enabled: false } }, scales: { y: { beginAtZero: true, max: 1 } } }
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            indexAxis: 'x',
+            animation: { duration: 0 },
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    enabled: true,
+                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    titleColor: '#000',
+                    bodyColor: '#000',
+                    borderColor: '#555',
+                    borderWidth: 1,
+                    padding: 15,
+                    displayColors: false,
+                    callbacks: {
+                        label: function (context) {
+                            const label = context.chart.data.labels[context.dataIndex];
+                            const value = context.raw.toFixed(3);
+                            const explanation = metricExplanations[label];
+                            let tooltipText = [`${label}: ${value}`];
+                            if (explanation) {
+                                tooltipText.push('');
+                                const roleLines = `Role: ${explanation.description}`.match(/.{1,50}(\s|$)/g) || [];
+                                roleLines.forEach(line => tooltipText.push(line.trim()));
+                                tooltipText.push(`Range: ${explanation.range}`);
+                                tooltipText.push(`Formula: ${explanation.formula}`);
+                            }
+                            return tooltipText;
+                        }
+                    }
+                }
+            },
+            scales: { y: { beginAtZero: true, max: 1 } }
+        }
     });
 }