Add upper and lower range sliders.

Author: AhmedBasem20

dashboard_website/index.html

@@ -40,12 +40,21 @@ <h1 class="bar-title">IVIM MRI Algorithm Fitting Dashboard</h1>
         </select>
 
         <div class="slider-container">
-          <span class="slider-label">Range:</span>
+          <span class="slider-label">Upper Range:</span>
+          <span class="slider-value">0</span>
           <button id="decrement-range" class="slider-button">-</button>
-          <input type="range" id="range-slider" class="slider" min="2" max="100" step="2" value="2">
+          <input type="range" id="range-slider" class="slider" min="2" max="100" step="1" value="2">
           <button id="increment-range" class="slider-button">+</button>
-          <span id="range-value" class="slider-value">2</span><span>x</span>
+          <span id="range-value" class="slider-value">2</span>
       </div>
+      <div class="slider-container">
+        <span class="slider-label">Lower Range:</span>
+        <span class="slider-value">0</span>
+        <button id="decrement-lower-range" class="slider-button">-</button>
+        <input type="range" id="lower-range-slider" class="slider" min="2" max="100" step="2" value="2">
+        <button id="increment-lower-range" class="slider-button">+</button>
+        <span id="lower-range-value" class="slider-value">2</span>
+    </div>
       </div>
       <div class="chart-card" id="myDiv">
         <!-- Chart will be rendered here -->
@@ -72,12 +81,20 @@ <h1 class="bar-title">IVIM MRI Algorithm Fitting Dashboard</h1>
         </select>
 
         <div class="slider-container">
-          <span class="slider-label">Range:</span>
+          <span class="slider-label">Upper Range:</span>
           <button id="decrement-range-region" class="slider-button">-</button>
           <input type="range" id="range-slider-region" class="slider" min="2" max="100" step="2" value="2">
           <button id="increment-range-region" class="slider-button">+</button>
-          <span id="range-value-region" class="slider-value">2</span><span>x</span>
+          <span id="range-value-region" class="slider-value">2</span>
       </div>
+    <div class="slider-container">
+      <span class="slider-label">Lower Range:</span>
+      <span class="slider-value">0</span>
+      <button id="decrement-lower-range-region" class="slider-button">-</button>
+      <input type="range" id="lower-range-slider-region" class="slider" min="2" max="100" step="2" value="2">
+      <button id="increment-lower-range-region" class="slider-button">+</button>
+      <span id="lower-range-value-region" class="slider-value">2</span>
+  </div>
       </div>
       <div class="chart-card" id="regionDiv">
         <!-- New chart will be rendered here -->

dashboard_website/index.js

@@ -3,11 +3,18 @@ document.addEventListener('DOMContentLoaded', function() {
     let selectedAlgorithm = 'ETP_SRI_LinearFitting';
     let selectedSNR = '10';
     let selectedType = 'D_fitted';
-    let selectedRange = 2;
+    let selectedRange = 10;
+    let selectedRangeLower = 2;
     let selectedRegion = 'Liver';
     let selectedSNRRegion = '10';
     let selectedTypeRegion = 'D_fitted';
-    let selectedRangeRegion = 2;
+    let selectedRangeRegion = 10;
+    let selectedRangeLowerRegion = 2;
+    const type = {
+            "D_fitted": "Diffusion",
+            "Dp_fitted": "Perfusion",
+            "f_fitted": "Perfusion Fraction"
+        };
 
     const loadingOverlay = document.getElementById('loadingOverlay');
     const mainContent = document.getElementsByTagName('main')[0];
@@ -25,24 +32,27 @@ document.addEventListener('DOMContentLoaded', function() {
     const algorithmSelect = document.getElementById('algorithm-select');
     algorithmSelect.addEventListener('change', function(event) {
         selectedAlgorithm = event.target.value;
-        updateRange('2')
-        drawBoxPlot(data, selectedAlgorithm, selectedSNR, selectedType, selectedRange);
+        updateRange('10')
+        updateRangeLower('2')
+        drawBoxPlot();
     });
 
     // Add event listener to SNR select
     const snrSelect = document.getElementById('snr-select');
     snrSelect.addEventListener('change', function(event) {
         selectedSNR = event.target.value;
-        updateRange('2')
-        drawBoxPlot(data, selectedAlgorithm, selectedSNR, selectedType, selectedRange);
+        updateRange('10')
+        updateRangeLower('2')
+        drawBoxPlot();
     });
 
     // Add event listener to type select
     const typeSelect = document.getElementById('type-select');
     typeSelect.addEventListener('change', function(event) {
         selectedType = event.target.value;
-        updateRange('2')
-        drawBoxPlot(data, selectedAlgorithm, selectedSNR, selectedType, selectedRange);
+        updateRange('10')
+        updateRangeLower('2')
+        drawBoxPlot();
     });
 
     // Add event listeners to range slider and buttons
@@ -52,9 +62,9 @@ document.addEventListener('DOMContentLoaded', function() {
     const incrementRange = document.getElementById('increment-range');
     function updateRange(value) {
         selectedRange = value;
-        rangeValue.textContent = value;
+        //rangeValue.textContent = value;
         rangeSlider.value = value
-        drawBoxPlot(data, selectedAlgorithm, selectedSNR, selectedType, selectedRange);
+        drawBoxPlot();
     }
 
     rangeSlider.addEventListener('input', function(event) {
@@ -77,28 +87,63 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+    // Add event listeners to range slider and buttons
+    const rangeSliderLower = document.getElementById('lower-range-slider');
+    const rangeValueLower = document.getElementById('lower-range-value');
+    const decrementRangeLower = document.getElementById('decrement-lower-range');
+    const incrementRangeLower = document.getElementById('increment-lower-range');
+    function updateRangeLower(value) {
+        selectedRangeLower = value;
+        //rangeValue.textContent = value;
+        rangeSliderLower.value = value
+        drawBoxPlot();
+    }
+
+    rangeSliderLower.addEventListener('input', function(event) {
+        updateRangeLower(event.target.value);
+    });
+
+    decrementRangeLower.addEventListener('click', function() {
+        let newValue = parseInt(rangeSlider.value) - 2;
+        if (newValue >= 2) {
+            rangeSliderLower.value = newValue;
+            updateRangeLower(newValue);
+        }
+    });
+
+    incrementRangeLower.addEventListener('click', function() {
+        let newValue = parseInt(rangeSliderLower.value) + 2;
+        if (newValue <= rangeSliderLower.max) {
+            rangeSliderLower.value = newValue;
+            updateRangeLower(newValue);
+        }
+    });
+
     // Add event listener to region select
     const regionSelect = document.getElementById('region-select');
     regionSelect.addEventListener('change', function(event) {
         selectedRegion = event.target.value;
-        updateRangeRegion('2')
-        drawRegionBoxPlot(data, selectedRegion, selectedSNRRegion, selectedTypeRegion, selectedRangeRegion);
+        updateRangeRegion('10')
+        updateRangeLowerRegion('2')
+        drawRegionBoxPlot();
     });
 
     // Add event listener to SNR select
     const snrRegionSelect = document.getElementById('snr-region-select');
     snrRegionSelect.addEventListener('change', function(event) {
         selectedSNRRegion = event.target.value;
-        updateRangeRegion('2')
-        drawRegionBoxPlot(data, selectedRegion, selectedSNRRegion, selectedTypeRegion, selectedRangeRegion);
+        updateRangeRegion('10')
+        updateRangeLowerRegion('2')
+        drawRegionBoxPlot();
     });
 
     // Add event listener to type select
     const typeRegionSelect = document.getElementById('type-region-select');
     typeRegionSelect.addEventListener('change', function(event) {
         selectedTypeRegion = event.target.value;
-        updateRangeRegion('2')
-        drawRegionBoxPlot(data, selectedRegion, selectedSNRRegion, selectedTypeRegion, selectedRangeRegion);
+        updateRangeRegion('10')
+        updateRangeLowerRegion('2')
+        drawRegionBoxPlot();
     });
 
     // Add event listeners to range region slider and buttons
@@ -109,9 +154,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
     function updateRangeRegion(value) {
         selectedRangeRegion = value;
-        rangeValueRegion.textContent = value;
+        //rangeValueRegion.textContent = value;
         rangeSliderRegion.value = value
-        drawRegionBoxPlot(data, selectedRegion, selectedSNRRegion, selectedTypeRegion, selectedRangeRegion);
+        drawRegionBoxPlot();
     }
 
     rangeSliderRegion.addEventListener('input', function(event) {
@@ -134,6 +179,38 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
+    // Add event listeners to range slider and buttons for region
+    const rangeSliderLowerRegion = document.getElementById('lower-range-slider-region');
+    const rangeValueLowerRegion = document.getElementById('lower-range-value-region');
+    const decrementRangeLowerRegion = document.getElementById('decrement-lower-range-region');
+    const incrementRangeLowerRegion = document.getElementById('increment-lower-range-region');
+    function updateRangeLowerRegion(value) {
+        selectedRangeLowerRegion = value;
+        //rangeValue.textContent = value;
+        rangeSliderLowerRegion.value = value
+        drawRegionBoxPlot();
+    }
+
+    rangeSliderLowerRegion.addEventListener('input', function(event) {
+        updateRangeLowerRegion(event.target.value);
+    });
+
+    decrementRangeLowerRegion.addEventListener('click', function() {
+        let newValue = parseInt(rangeSliderRegion.value) - 2;
+        if (newValue >= 2) {
+            rangeSliderLowerRegion.value = newValue;
+            updateRangeLowerRegion(newValue);
+        }
+    });
+
+    incrementRangeLowerRegion.addEventListener('click', function() {
+        let newValue = parseInt(rangeSliderLowerRegion.value) + 2;
+        if (newValue <= rangeSliderLowerRegion.max) {
+            rangeSliderLowerRegion.value = newValue;
+            updateRangeLowerRegion(newValue);
+        }
+    });
+
     showLoading();
 
     Papa.parse('test_output.csv', {
@@ -143,8 +220,8 @@ document.addEventListener('DOMContentLoaded', function() {
             data = results;
             hideLoading();
             populateOptions(data);
-            drawBoxPlot(data, selectedAlgorithm, selectedSNR, selectedType, selectedRange);
-            drawRegionBoxPlot(data, selectedRegion, selectedSNRRegion, selectedTypeRegion, selectedRangeRegion);
+            drawBoxPlot();
+            drawRegionBoxPlot();
 
         }
     });
@@ -194,32 +271,37 @@ document.addEventListener('DOMContentLoaded', function() {
 
     }
 
-    function drawBoxPlot(data, selectedAlgorithm, selectedSNR, selectedType, selectedRange) {
+    function drawBoxPlot() {
         let jsonData = data.data.filter(obj => obj.Algorithm === selectedAlgorithm);
-        const type = {
-            "D_fitted": "Diffusion",
-            "Dp_fitted": "Perfusion",
-            "f_fitted": "Perfusion Fraction"
-        };
 
         const allD_fittedValues = jsonData
             .filter(obj => obj.SNR === selectedSNR)
             .map(obj => obj[selectedType]);
 
-        const maxValue = Math.max(...allD_fittedValues.map(Math.abs));
+        const maxValue = Math.max(...allD_fittedValues);
+        const minValue = Math.min(...allD_fittedValues);
         const groundTruthList = jsonData
-            .filter(obj => obj.SNR === selectedSNR)
-            .map(obj => obj[selectedType.slice(0, -7)]);
+        .filter(obj => obj.SNR === selectedSNR)
+        .map(obj => obj[selectedType.slice(0, -7)]);
         let estimatedRange = Math.abs(maxValue) / Math.min(...groundTruthList)
-        rangeSlider.max = Math.round(estimatedRange / 2) * 2        
+        let estimatedRangeLower = Math.abs(minValue) / Math.min(...groundTruthList)
+        if (minValue < 0) {
+            rangeValueLower.textContent = minValue.toFixed(4)
+        }
+        else {
+            rangeValueLower.textContent = '0.0000'
+            selectedRangeLower = 0;
+        }
+        rangeValue.textContent = maxValue.toFixed(4)
+        rangeSlider.max = Math.round(estimatedRange / 2) * 2    
+        rangeSliderLower.max = Math.round(estimatedRangeLower / 2) * 2        
         let plots = [];
         const regions = new Set(jsonData.map(obj => obj.Region));
         const uniqueRegionsArray = Array.from(regions);
         uniqueRegionsArray.forEach(region => {
             const D_fittedValues = jsonData
                 .filter(obj => obj.Region === region)
                 .filter(obj => obj.SNR === selectedSNR)
-                .filter(obj => Math.abs(obj[selectedType]) < (Math.abs(obj[selectedType.slice(0, -7)]) * selectedRange))
                 .map(obj => obj[selectedType]);
             var plot = {
                 y: D_fittedValues,
@@ -250,54 +332,65 @@ document.addEventListener('DOMContentLoaded', function() {
         });
 
         var layout = {
-            title: `${type[selectedType]} Box Plots for ${selectedAlgorithm} algorithm with ${selectedSNR} SNR`
+            title: `${type[selectedType]} Box Plots for ${selectedAlgorithm} algorithm with ${selectedSNR} SNR`,
+            yaxis: {
+                autorange: false,
+                range: [-Math.min(...groundTruthList) * selectedRangeLower, Math.min(...groundTruthList) * selectedRange],
+                type: 'linear'
+              }
         };
 
         Plotly.newPlot('myDiv', plots, layout);
     }
 
-    function drawRegionBoxPlot(data, selectedRegion, selectedSNR, selectedType, selectedRange) {
+    function drawRegionBoxPlot() {
         let jsonData = data.data.filter(obj => obj.Region === selectedRegion);
-        const type = {
-            "D_fitted": "Diffusion",
-            "Dp_fitted": "Perfusion",
-            "f_fitted": "Perfusion Fraction"
-        };
 
         const allD_fittedValues = jsonData
-            .filter(obj => obj.SNR === selectedSNR)
-            .map(obj => obj[selectedType]);
+            .filter(obj => obj.SNR === selectedSNRRegion)
+            .map(obj => obj[selectedTypeRegion]);
+
+        const maxValue = Math.max(...allD_fittedValues);
+        const minValue = Math.min(...allD_fittedValues);
 
-        const maxValue = Math.max(...allD_fittedValues.map(Math.abs));
         const groundTruthList = jsonData
-            .filter(obj => obj.SNR === selectedSNR)
-            .map(obj => obj[selectedType.slice(0, -7)]);
+            .filter(obj => obj.SNR === selectedSNRRegion)
+            .map(obj => obj[selectedTypeRegion.slice(0, -7)]);
         let estimatedRange = Math.abs(maxValue) / Math.min(...groundTruthList)
-        rangeSliderRegion.max = Math.round(estimatedRange / 2) * 2        
+        let estimatedRangeLower = Math.abs(minValue) / Math.min(...groundTruthList)
+        if (minValue < 0) {
+            rangeValueLowerRegion.textContent = minValue.toFixed(4)
+        }
+        else {
+            rangeValueLowerRegion.textContent = '0.0000'
+            selectedRangeLowerRegion = 0;
+        }
+        rangeValueRegion.textContent = maxValue.toFixed(4)
+        rangeSliderRegion.max = Math.round(estimatedRange / 2) * 2    
+        rangeSliderLowerRegion.max = Math.round(estimatedRangeLower / 2) * 2
 
         let plots = [];
         const algorithms = new Set(jsonData.map(obj => obj.Algorithm));
         const uniqueAlgorithmsArray = Array.from(algorithms);
         uniqueAlgorithmsArray.forEach(algorithm => {
             const D_fittedValues = jsonData
                 .filter(obj => obj.Algorithm === algorithm)
-                .filter(obj => obj.SNR === selectedSNR)
-                .filter(obj => Math.abs(obj[selectedType]) < (Math.abs(obj[selectedType.slice(0, -7)]) * selectedRange))
-                .map(obj => obj[selectedType]);
+                .filter(obj => obj.SNR === selectedSNRRegion)
+                .map(obj => obj[selectedTypeRegion]);
             var plot = {
                 y: D_fittedValues,
                 type: 'box',
                 name: algorithm,
                 marker: {
-                    outliercolor: 'white)',
+                    outliercolor: 'white',
                 },
                 boxpoints: 'Outliers'
             };
             plots.push(plot);
             const groundTruth = jsonData
                 .filter(obj => obj.Algorithm === algorithm)
-                .filter(obj => obj.SNR === selectedSNR)
-                .map(obj => obj[selectedType.slice(0, -7)]);
+                .filter(obj => obj.SNR === selectedSNRRegion)
+                .map(obj => obj[selectedTypeRegion.slice(0, -7)]);
             var constantPoint = {
                 x: [algorithm],
                 y: groundTruth,
@@ -313,7 +406,12 @@ document.addEventListener('DOMContentLoaded', function() {
         });
 
         var layout = {
-            title: `${type[selectedType]} Box Plots for ${selectedRegion} region with ${selectedSNR} SNR`
+            title: `${type[selectedTypeRegion]} Box Plots for ${selectedRegion} region with ${selectedSNR} SNR`,
+            yaxis: {
+                autorange: false,
+                range: [-Math.min(...groundTruthList) * selectedRangeLowerRegion, Math.min(...groundTruthList) * selectedRangeRegion],
+                type: 'linear'
+              }
         };
 
         Plotly.newPlot('regionDiv', plots, layout);