Skip to content

Commit

Permalink
Add upper and lower range sliders.
Browse files Browse the repository at this point in the history
  • Loading branch information
@AhmedBasem20
AhmedBasem20 committed Jul 3, 2024
1 parent 745829b commit 0e14d23
Show file tree
Hide file tree
Showing 2 changed files with 171 additions and 56 deletions.
27 changes: 22 additions & 5 deletions dashboard_website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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 -->
Expand Down
200 changes: 149 additions & 51 deletions dashboard_website/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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
Expand All @@ -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) {
Expand All @@ -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
Expand All @@ -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) {
Expand All @@ -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', {
Expand All @@ -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();

}
});
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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);
Expand Down

0 comments on commit 0e14d23

Please sign in to comment.