Live update while moving cursors and cursor order update

inverse_classifier.html

@@ -16,18 +16,6 @@
         <div class="floating-controls" id="floatingControls">
             <div class="controls-title" id="controlsTitle">🎛️ Result Controls</div>
             <div class="matrix-grid">
-                <div class="control-group">
-                    <div class="control-label">True Negatives (TN) <span class="lock-toggle" data-param="tn">🔓</span>
-                    </div>
-                    <input type="range" min="0" max="200" value="80" class="slider" id="tnSlider">
-                    <div class="slider-value" id="tnValue">80</div>
-                </div>
-                <div class="control-group">
-                    <div class="control-label">False Positives (FP) <span class="lock-toggle" data-param="fp">🔓</span>
-                    </div>
-                    <input type="range" min="0" max="200" value="20" class="slider" id="fpSlider">
-                    <div class="slider-value" id="fpValue">20</div>
-                </div>
                 <div class="control-group">
                     <div class="control-label">False Negatives (FN) <span class="lock-toggle" data-param="fn">🔓</span>
                     </div>
@@ -40,6 +28,18 @@
                     <input type="range" min="0" max="200" value="70" class="slider" id="tpSlider">
                     <div class="slider-value" id="tpValue">70</div>
                 </div>
+                <div class="control-group">
+                    <div class="control-label">True Negatives (TN) <span class="lock-toggle" data-param="tn">🔓</span>
+                    </div>
+                    <input type="range" min="0" max="200" value="80" class="slider" id="tnSlider">
+                    <div class="slider-value" id="tnValue">80</div>
+                </div>
+                <div class="control-group">
+                    <div class="control-label">False Positives (FP) <span class="lock-toggle" data-param="fp">🔓</span>
+                    </div>
+                    <input type="range" min="0" max="200" value="20" class="slider" id="fpSlider">
+                    <div class="slider-value" id="fpValue">20</div>
+                </div>
             </div>
         </div>
 
@@ -78,4 +78,4 @@
     <script src="src/js/inverse_classifier.js"></script>
 </body>
 
-</html>
+</html>

src/js/inverse_classifier.js

@@ -33,8 +33,8 @@ const metricExplanations = {
     }
 };
 let lockState = { tp: false, fp: false, tn: false, fn: false };
-let currentState = { tp: 70, fp: 20, tn: 80, fn: 30 };
-const TOTAL_SAMPLES = 200;
+let currentState = { tp: 40, fp: 10, tn: 45, fn: 5 };
+const TOTAL_SAMPLES = 100;
 
 // --- SIMULATION & CALCULATIONS ---
 function randomGaussian(mean = 0, stdDev = 1) {
@@ -271,8 +271,10 @@ window.addEventListener('load', function () {
     initCharts();
     Object.keys(currentState).forEach(param => {
         const slider = document.getElementById(`${param}Slider`);
-        slider.addEventListener('input', () => document.getElementById(`${param}Value`).textContent = slider.value);
-        slider.addEventListener('change', () => adjustValues(param, parseInt(slider.value)));
+        slider.addEventListener('input', () => {
+            document.getElementById(`${param}Value`).textContent = slider.value;
+            adjustValues(param, parseInt(slider.value));
+        });
     });
     document.querySelectorAll('.lock-toggle').forEach(lock => {
         lock.addEventListener('click', function () {