Skip to content

Commit aafeac2

Browse files
AhmedBasem20AhmedBasem20
committed
Add Algorithm comparison and visualization dashboard
1 parent 12f42cb commit aafeac2

File tree

6 files changed

+590
-60
lines changed

6 files changed

+590
-60
lines changed

‎.github/workflows/analysis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,4 +170,4 @@ jobs:
170170
name: Comparison
171171
path: |
172172
test_reference.csv
173-
test_results.csv
173+
test_results.csv

‎.github/workflows/documentation.yml

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
1-
name: Build & Deploy Documentation
1+
# name: Build & Deploy Documentation
22

3-
on:
4-
workflow_run:
5-
workflows: [Algorithm Analysis]
6-
types:
7-
- completed
8-
permissions:
9-
contents: read
10-
pages: write
11-
id-token: write
12-
jobs:
13-
build:
14-
runs-on: ubuntu-latest
15-
steps:
16-
- uses: actions/checkout@v4
17-
- name: Setup Pages
18-
uses: actions/configure-pages@v4
19-
- name: Set up Python
20-
id: setup_python
21-
uses: actions/setup-python@v5
22-
with:
23-
python-version: "3.11"
24-
- name: Cache pip
25-
uses: actions/cache@v3
26-
id: pip-cache
27-
with:
28-
key: ${{ runner.os }}-${{ env.pythonLocation }}-pip-${{ hashFiles('**/requirements.txt') }}
29-
path: ${{ env.pythonLocation }}
30-
if: steps.pip-cache.outputs.cache-hit != 'true'
3+
# on:
4+
# workflow_run:
5+
# workflows: [Algorithm Analysis]
6+
# types:
7+
# - completed
8+
# permissions:
9+
# contents: read
10+
# pages: write
11+
# id-token: write
12+
# jobs:
13+
# build:
14+
# runs-on: ubuntu-latest
15+
# steps:
16+
# - uses: actions/checkout@v4
17+
# - name: Setup Pages
18+
# uses: actions/configure-pages@v4
19+
# - name: Set up Python
20+
# id: setup_python
21+
# uses: actions/setup-python@v5
22+
# with:
23+
# python-version: "3.11"
24+
# - name: Cache pip
25+
# uses: actions/cache@v3
26+
# id: pip-cache
27+
# with:
28+
# key: ${{ runner.os }}-${{ env.pythonLocation }}-pip-${{ hashFiles('**/requirements.txt') }}
29+
# path: ${{ env.pythonLocation }}
30+
# if: steps.pip-cache.outputs.cache-hit != 'true'
3131

32-
- name: Install dependencies
33-
run: |
34-
pip install -r requirements.txt
32+
# - name: Install dependencies
33+
# run: |
34+
# pip install -r requirements.txt
3535

36-
# Action to download artifacts from a different workflow (analysis.yml)
37-
- name: 'Download artifact'
38-
if: ${{ github.event.workflow_run.conclusion == 'success' }}
39-
uses: ./.github/actions/download-artifact
40-
with:
41-
name: 'Figures'
36+
# # Action to download artifacts from a different workflow (analysis.yml)
37+
# - name: 'Download artifact'
38+
# if: ${{ github.event.workflow_run.conclusion == 'success' }}
39+
# uses: ./.github/actions/download-artifact
40+
# with:
41+
# name: 'Figures'
4242

43-
- name: Build html
44-
run: |
45-
mkdir docs/_static
46-
mv *.pdf docs/_static/
47-
sphinx-apidoc -o docs src
48-
cd docs/
49-
make html
43+
# - name: Build html
44+
# run: |
45+
# mkdir docs/_static
46+
# mv *.pdf docs/_static/
47+
# sphinx-apidoc -o docs src
48+
# cd docs/
49+
# make html
5050

51-
- name: Upload docs artifact
52-
uses: actions/upload-pages-artifact@v3
53-
with:
54-
path: 'docs/_build/html'
51+
# - name: Upload docs artifact
52+
# uses: actions/upload-pages-artifact@v3
53+
# with:
54+
# path: 'docs/_build/html'
5555

56-
deploy:
57-
needs: build
58-
environment:
59-
name: github-pages
60-
url: ${{ steps.deployment.outputs.page_url }}
56+
# deploy:
57+
# needs: build
58+
# environment:
59+
# name: github-pages
60+
# url: ${{ steps.deployment.outputs.page_url }}
6161

62-
runs-on: ubuntu-latest
63-
steps:
64-
- name: Deploy to GitHub Pages
65-
id: deployment
66-
uses: actions/deploy-pages@v4
62+
# runs-on: ubuntu-latest
63+
# steps:
64+
# - name: Deploy to GitHub Pages
65+
# id: deployment
66+
# uses: actions/deploy-pages@v4

‎.github/workflows/website.yml

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
name: Deploy dashboard website
2+
3+
on:
4+
workflow_run:
5+
workflows: [Algorithm Analysis]
6+
types:
7+
- completed
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
jobs:
13+
build:
14+
runs-on: ubuntu-latest
15+
steps:
16+
- uses: actions/checkout@v4
17+
- name: Setup Pages
18+
uses: actions/configure-pages@v4
19+
- name: Set up Python
20+
id: setup_python
21+
uses: actions/setup-python@v5
22+
with:
23+
python-version: "3.11"
24+
- name: Cache pip
25+
uses: actions/cache@v3
26+
id: pip-cache
27+
with:
28+
key: ${{ runner.os }}-${{ env.pythonLocation }}-pip-${{ hashFiles('**/requirements.txt') }}
29+
path: ${{ env.pythonLocation }}
30+
if: steps.pip-cache.outputs.cache-hit != 'true'
31+
32+
- name: Install dependencies
33+
run: |
34+
pip install -r requirements.txt
35+
36+
# Action to download artifacts from a different workflow (analysis.yml)
37+
- name: 'Download artifact'
38+
if: ${{ github.event.workflow_run.conclusion == 'success' }}
39+
uses: ./.github/actions/download-artifact
40+
with:
41+
name: 'Data'
42+
43+
- name: move data to the website folder
44+
run: |
45+
mv test_output.csv website/
46+
47+
- name: Upload website artifact
48+
uses: actions/upload-pages-artifact@v3
49+
with:
50+
path: 'website'
51+
52+
deploy:
53+
needs: build
54+
environment:
55+
name: github-pages
56+
url: ${{ steps.deployment.outputs.page_url }}
57+
58+
runs-on: ubuntu-latest
59+
steps:
60+
- name: Deploy to GitHub Pages
61+
id: deployment
62+
uses: actions/deploy-pages@v4

‎website/index.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
:root {
2+
--primary-color: #072A6A;
3+
--accent-color: #62D58A;
4+
--primary-white: #fff;
5+
--background-color: #f4f4f9;
6+
--shadow: rgba(0, 0, 0, 0.2);
7+
}
8+
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
font-family: 'Inter', 'Atkinson Hyperlegible', sans-serif;
13+
background-color: var(--background-color);
14+
}
15+
16+
header {
17+
padding: 1rem 2rem;
18+
background-color: var(--primary-color);
19+
color: var(--primary-white);
20+
}
21+
22+
.bar-title {
23+
margin: 0;
24+
font-size: 2rem;
25+
font-weight: 600;
26+
}
27+
28+
.divider {
29+
margin: 0.5rem 0;
30+
border: none;
31+
border-top: 2px solid var(--accent-color);
32+
}
33+
34+
main {
35+
padding: 2rem;
36+
}
37+
38+
.filter-wrapper {
39+
margin: 2rem;
40+
font-size: x-large;
41+
font-weight: bold;
42+
}
43+
44+
.filter-menu {
45+
padding: 0.5rem 1rem;
46+
border: none;
47+
border-radius: 5px;
48+
background-color: var(--primary-color);
49+
color: var(--primary-white);
50+
font-size: 1rem;
51+
cursor: pointer;
52+
transition: background-color 0.3s ease, color 0.3s ease;
53+
}
54+
55+
.filter-menu:hover {
56+
background-color: var(--accent-color);
57+
}
58+
59+
.chart-card {
60+
padding: 2rem;
61+
border-radius: 1rem;
62+
box-shadow: 0px 8px 16px var(--shadow);
63+
background-color: var(--primary-white);
64+
transition: transform 0.3s ease, box-shadow 0.3s ease;
65+
}
66+
67+
.chart-card:hover {
68+
transform: translateY(-5px);
69+
box-shadow: 0px 12px 24px var(--shadow);
70+
}
71+
72+
.slider-container {
73+
display: flex;
74+
align-items: center;
75+
margin: 20px 0;
76+
width: 30%;
77+
}
78+
.slider-label {
79+
margin-right: 10px;
80+
font-weight: bold;
81+
color: #333;
82+
}
83+
.slider {
84+
margin: 0 10px;
85+
flex-grow: 1;
86+
height: 16px;
87+
background: #ddd;
88+
outline: none;
89+
opacity: 0.9;
90+
transition: opacity 1.2s;
91+
}
92+
.slider:hover {
93+
opacity: 1;
94+
width: 25px;
95+
height: 25px;
96+
cursor: pointer;
97+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
98+
}
99+
100+
.slider-value {
101+
margin-left: 10px;
102+
font-weight: bold;
103+
color: #333;
104+
}
105+

‎website/index.html

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>IVIM MRI Algorithm Fitting Dashboard</title>
7+
<!-- Load Plotly.js into the DOM -->
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
9+
<script src="https://cdn.plot.ly/plotly-2.30.0.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
11+
<script src="index.js"></script>
12+
<link rel="stylesheet" href="index.css">
13+
</head>
14+
<body>
15+
<div id="root">
16+
<header>
17+
<h1 class="bar-title">IVIM MRI Algorithm Fitting Dashboard</h1>
18+
<hr class="divider" />
19+
</header>
20+
<main>
21+
<div class="filter-wrapper">
22+
<label for="algorithm-select">Algorithm:</label>
23+
<select id="algorithm-select" class="filter-menu">
24+
<!-- Options will be populated dynamically -->
25+
</select>
26+
27+
<label for="snr-select">SNR:</label>
28+
<select id="snr-select" class="filter-menu">
29+
<!-- Options will be populated dynamically -->
30+
</select>
31+
32+
<label for="type-select">Type: </label>
33+
<select id="type-select" class="filter-menu">
34+
<option value="D_fitted">Diffusion</option>
35+
<option value="Dp_fitted">Perfusion</option>
36+
<option value="f_fitted">Perfusion Fraction</option>
37+
</select>
38+
39+
<div class="slider-container">
40+
<span class="slider-label">Range:</span>
41+
<button id="decrement-range" class="slider-button">-</button>
42+
<input type="range" id="range-slider" class="slider" min="2" max="100" step="2" value="2">
43+
<button id="increment-range" class="slider-button">+</button>
44+
<span id="range-value" class="slider-value">2</span><span>x</span>
45+
</div>
46+
</div>
47+
<div class="chart-card" id="myDiv">
48+
<!-- Chart will be rendered here -->
49+
</div>
50+
51+
52+
<!-- New section for region-based plot -->
53+
<div class="filter-wrapper">
54+
<label for="region-select">Region:</label>
55+
<select id="region-select" class="filter-menu">
56+
<!-- Options will be populated dynamically -->
57+
</select>
58+
59+
<label for="snr-region-select">SNR:</label>
60+
<select id="snr-region-select" class="filter-menu">
61+
<!-- Options will be populated dynamically -->
62+
</select>
63+
64+
<label for="type-region-select">Type: </label>
65+
<select id="type-region-select" class="filter-menu">
66+
<option value="D_fitted">Diffusion</option>
67+
<option value="Dp_fitted">Perfusion</option>
68+
<option value="f_fitted">Perfusion Fraction</option>
69+
</select>
70+
71+
<div class="slider-container">
72+
<span class="slider-label">Range:</span>
73+
<button id="decrement-range-region" class="slider-button">-</button>
74+
<input type="range" id="range-slider-region" class="slider" min="2" max="100" step="2" value="2">
75+
<button id="increment-range-region" class="slider-button">+</button>
76+
<span id="range-value-region" class="slider-value">2</span><span>x</span>
77+
</div>
78+
</div>
79+
<div class="chart-card" id="regionDiv">
80+
<!-- New chart will be rendered here -->
81+
</div>
82+
83+
84+
</main>
85+
</div>
86+
</body>
87+
</html>

0 commit comments

Comments
 (0)