Skip to content

Commit 875b193

Browse files
AhmedBasem20AhmedBasem20
committed
Add website landing page.
1 parent 0e14d23 commit 875b193

File tree

7 files changed

+767
-4
lines changed

7 files changed

+767
-4
lines changed

‎.github/workflows/website.yml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ jobs:
4646
with:
4747
name: 'Data'
4848

49-
- name: move data to the website folder
49+
- name: move data to the dashboard folder
5050
run: |
51-
mv test_output.csv dashboard_website/
51+
mv test_output.csv website/dashboard
5252
5353
- name: Build documentation
5454
run: |
@@ -60,12 +60,12 @@ jobs:
6060
6161
- name: move data to the website folder
6262
run: |
63-
mv "docs/_build/html" "dashboard_website/documentation"
63+
mv "docs/_build/html" "website/documentation"
6464
6565
- name: Upload docs artifact
6666
uses: actions/upload-pages-artifact@v3
6767
with:
68-
path: 'dashboard_website'
68+
path: 'website'
6969

7070
deploy:
7171
needs: build

‎website/combined_report.html renamed to ‎html_report/combined_report.html

File renamed without changes.

‎website/dashboard/index.css

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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+
106+
.spinner {
107+
border: 8px solid rgba(0, 0, 0, 0.1);
108+
width: 76px;
109+
height: 76px;
110+
border-radius: 50%;
111+
border-top-color: #3498db;
112+
animation: spin 1s ease-in-out infinite;
113+
}
114+
115+
@keyframes spin {
116+
to { transform: rotate(360deg); }
117+
}
118+
119+
.loading-overlay {
120+
position: fixed;
121+
top: 0;
122+
left: 0;
123+
right: 0;
124+
bottom: 0;
125+
display: flex;
126+
align-items: center;
127+
justify-content: center;
128+
}
129+
130+
.hidden {
131+
display: none;
132+
}

‎website/dashboard/index.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
<div class="loading-overlay hidden" id="loadingOverlay">
17+
<div class="spinner"></div>
18+
</div>
19+
<header>
20+
<h1 class="bar-title">IVIM MRI Algorithm Fitting Dashboard</h1>
21+
<hr class="divider" />
22+
</header>
23+
<main>
24+
<div class="filter-wrapper">
25+
<label for="algorithm-select">Algorithm:</label>
26+
<select id="algorithm-select" class="filter-menu">
27+
<!-- Options will be populated dynamically -->
28+
</select>
29+
30+
<label for="snr-select">SNR:</label>
31+
<select id="snr-select" class="filter-menu">
32+
<!-- Options will be populated dynamically -->
33+
</select>
34+
35+
<label for="type-select">Type: </label>
36+
<select id="type-select" class="filter-menu">
37+
<option value="D_fitted">Diffusion</option>
38+
<option value="Dp_fitted">Perfusion</option>
39+
<option value="f_fitted">Perfusion Fraction</option>
40+
</select>
41+
42+
<div class="slider-container">
43+
<span class="slider-label">Upper Range:</span>
44+
<span class="slider-value">0</span>
45+
<button id="decrement-range" class="slider-button">-</button>
46+
<input type="range" id="range-slider" class="slider" min="2" max="100" step="1" value="2">
47+
<button id="increment-range" class="slider-button">+</button>
48+
<span id="range-value" class="slider-value">2</span>
49+
</div>
50+
<div class="slider-container">
51+
<span class="slider-label">Lower Range:</span>
52+
<span class="slider-value">0</span>
53+
<button id="decrement-lower-range" class="slider-button">-</button>
54+
<input type="range" id="lower-range-slider" class="slider" min="2" max="100" step="2" value="2">
55+
<button id="increment-lower-range" class="slider-button">+</button>
56+
<span id="lower-range-value" class="slider-value">2</span>
57+
</div>
58+
</div>
59+
<div class="chart-card" id="myDiv">
60+
<!-- Chart will be rendered here -->
61+
</div>
62+
63+
64+
<!-- New section for region-based plot -->
65+
<div class="filter-wrapper">
66+
<label for="region-select">Region:</label>
67+
<select id="region-select" class="filter-menu">
68+
<!-- Options will be populated dynamically -->
69+
</select>
70+
71+
<label for="snr-region-select">SNR:</label>
72+
<select id="snr-region-select" class="filter-menu">
73+
<!-- Options will be populated dynamically -->
74+
</select>
75+
76+
<label for="type-region-select">Type: </label>
77+
<select id="type-region-select" class="filter-menu">
78+
<option value="D_fitted">Diffusion</option>
79+
<option value="Dp_fitted">Perfusion</option>
80+
<option value="f_fitted">Perfusion Fraction</option>
81+
</select>
82+
83+
<div class="slider-container">
84+
<span class="slider-label">Upper Range:</span>
85+
<button id="decrement-range-region" class="slider-button">-</button>
86+
<input type="range" id="range-slider-region" class="slider" min="2" max="100" step="2" value="2">
87+
<button id="increment-range-region" class="slider-button">+</button>
88+
<span id="range-value-region" class="slider-value">2</span>
89+
</div>
90+
<div class="slider-container">
91+
<span class="slider-label">Lower Range:</span>
92+
<span class="slider-value">0</span>
93+
<button id="decrement-lower-range-region" class="slider-button">-</button>
94+
<input type="range" id="lower-range-slider-region" class="slider" min="2" max="100" step="2" value="2">
95+
<button id="increment-lower-range-region" class="slider-button">+</button>
96+
<span id="lower-range-value-region" class="slider-value">2</span>
97+
</div>
98+
</div>
99+
<div class="chart-card" id="regionDiv">
100+
<!-- New chart will be rendered here -->
101+
</div>
102+
103+
104+
</main>
105+
</div>
106+
</body>
107+
</html>

0 commit comments

Comments
 (0)