Skip to content

Commit

Permalink
Merge pull request #67 from AhmedBasem20/dashboard-page
Browse files Browse the repository at this point in the history 
Add algorithm comparison and visualization dashboard
  • Loading branch information
@oliverchampion
oliverchampion authored Aug 7, 2024
2 parents b099579 + cae60b1 commit a55aec3
Show file tree
Hide file tree
Showing 7 changed files with 775 additions and 4 deletions.
22 changes: 18 additions & 4 deletions .github/workflows/documentation.yml → .github/workflows/website.yml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Build & Deploy Documentation
name: Build & Deploy Website

on:
workflow_run:
Expand Down Expand Up @@ -33,25 +33,39 @@ jobs:
run: |
pip install -r requirements.txt
# Action to download artifacts from a different workflow (analysis.yml)
# Action Figures artifact
- name: 'Download artifact'
if: ${{ github.event.workflow_run.conclusion == 'success' }}
uses: ./.github/actions/download-artifact
with:
name: 'Figures'
# Action analysis data artifact
- name: 'Download analysis data'
if: ${{ github.event.workflow_run.conclusion == 'success' }}
uses: ./.github/actions/download-artifact
with:
name: 'Data'

- name: Build html
- name: move data to the dashboard folder
run: |
mv test_output.csv website/dashboard
- name: Build documentation
run: |
mkdir docs/_static
mv *.pdf docs/_static/
sphinx-apidoc -o docs src
cd docs/
make html
- name: move data to the website folder
run: |
mv "docs/_build/html" "website/documentation"
- name: Upload docs artifact
uses: actions/upload-pages-artifact@v3
with:
path: 'docs/_build/html'
path: 'website'

deploy:
needs: build
Expand Down
0 website/combined_report.html → html_report/combined_report.html
View file
File renamed without changes.
131 changes: 131 additions & 0 deletions website/dashboard/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
:root {
--primary-color: #072A6A;
--accent-color: #62D58A;
--primary-white: #fff;
--background-color: #f4f4f9;
--shadow: rgba(0, 0, 0, 0.2);
}

body {
margin: 0;
padding: 0;
font-family: 'Inter', 'Atkinson Hyperlegible', sans-serif;
background-color: var(--background-color);
}

header {
padding: 1rem 2rem;
background-color: var(--primary-color);
color: var(--primary-white);
}

.bar-title {
margin: 0;
font-size: 2rem;
font-weight: 600;
}

.divider {
margin: 0.5rem 0;
border: none;
border-top: 2px solid var(--accent-color);
}

main {
padding: 2rem;
}

.filter-wrapper {
margin: 2rem;
font-size: x-large;
font-weight: bold;
}

.filter-menu {
padding: 0.5rem 1rem;
border: none;
border-radius: 5px;
background-color: var(--primary-color);
color: var(--primary-white);
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}

.filter-menu:hover {
background-color: var(--accent-color);
}

.chart-card {
padding: 2rem;
border-radius: 1rem;
box-shadow: 0px 8px 16px var(--shadow);
background-color: var(--primary-white);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 24px var(--shadow);
}

.slider-container {
display: flex;
align-items: center;
margin: 20px 0;
width: 30%;
}
.slider-label {
margin-right: 10px;
font-weight: bold;
color: #333;
}
.slider {
margin: 0 10px;
flex-grow: 1;
height: 16px;
background: #ddd;
outline: none;
opacity: 0.9;
transition: opacity 1.2s;
}
.slider:hover {
opacity: 1;
height: 25px;
cursor: pointer;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.slider-value {
margin: 0 10px;
font-weight: bold;
color: #333;
}

.spinner {
border: 8px solid rgba(0, 0, 0, 0.1);
width: 76px;
height: 76px;
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}

.hidden {
display: none;
}
104 changes: 104 additions & 0 deletions website/dashboard/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IVIM MRI Algorithm Fitting Dashboard</title>
<!-- Load Plotly.js into the DOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="https://cdn.plot.ly/plotly-2.30.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root">
<div class="loading-overlay hidden" id="loadingOverlay">
<div class="spinner"></div>
</div>
<header>
<h1 class="bar-title">IVIM MRI Algorithm Fitting Dashboard</h1>
<hr class="divider" />
</header>
<main>
<div class="filter-wrapper">
<label for="algorithm-select">Algorithm:</label>
<select id="algorithm-select" class="filter-menu">
<!-- Options will be populated dynamically -->
</select>

<label for="snr-select">SNR:</label>
<select id="snr-select" class="filter-menu">
<!-- Options will be populated dynamically -->
</select>

<label for="type-select">Type: </label>
<select id="type-select" class="filter-menu">
<option value="D_fitted">Diffusion</option>
<option value="Dp_fitted">Perfusion</option>
<option value="f_fitted">Perfusion Fraction</option>
</select>

<div class="slider-container">
<span class="slider-label">Upper Range:</span>
<button id="decrement-range" class="slider-button">-</button>
<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>
</div>
<div id="lower-slider" class="slider-container">
<span class="slider-label">Lower Range:</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 -->
</div>


<!-- New section for region-based plot -->
<div class="filter-wrapper">
<label for="region-select">Region:</label>
<select id="region-select" class="filter-menu">
<!-- Options will be populated dynamically -->
</select>

<label for="snr-region-select">SNR:</label>
<select id="snr-region-select" class="filter-menu">
<!-- Options will be populated dynamically -->
</select>

<label for="type-region-select">Type: </label>
<select id="type-region-select" class="filter-menu">
<option value="D_fitted">Diffusion</option>
<option value="Dp_fitted">Perfusion</option>
<option value="f_fitted">Perfusion Fraction</option>
</select>

<div class="slider-container">
<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>
</div>
<div id="region-lower-slider" class="slider-container">
<span class="slider-label">Lower Range:</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 -->
</div>


</main>
</div>
</body>
</html>
Loading

0 comments on commit a55aec3

Please sign in to comment.