Skip to content

Commit

Permalink
Added buttons to select carpet plot and added some structure to the r…
Browse files Browse the repository at this point in the history 
…eports
  • Loading branch information
@eurunuela
eurunuela committed Jul 9, 2021
1 parent 181c411 commit fbe23b4
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 62 deletions.
157 changes: 139 additions & 18 deletions tedana/reporting/data/html/report_body_template.html
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,149 @@
<style type="text/css">
.content {
padding: 35px 20px 10px 20px;
margin-left: 50px;
margin-top: 50px;
height: 3100px;
}
.about {
position: relative;
top: -50px;
margin-left: 5%;
margin-right: 5%;
white-space: pre-line;
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
}
.carpet_style {
left: -810px !important;
top: 900px !important;
.content {
margin-left: 5%;
margin-right: 5%;
margin-bottom: 150px;
height: auto;
}

.about {
position: relative;
top: -50px;
margin-left: 5%;
margin-right: 5%;
white-space: pre-line;
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
}

.carpet-plots {
margin-left: 5%;
margin-right: 5%;
margin-bottom: 100px;
}

button {
margin-right: 15px;
width: auto;
border-radius: 6px;
border-top: none;
text-align: center;
color: black;
padding: 10px;
float: left;
font-size: 18px;
font-weight: 700;
}

button:hover {
opacity: 0.8;
}

button:active {
width: auto;
border-radius: 6px;
border-top: none;
text-align: center;
color: black;
padding: 10px;
margin-top: 3px;
float: left;
}

.blue {
background: #8caef9;
border-bottom: #6684c6 3px solid;
border-left: #6684c6 1px solid;
border-right: #6684c6 1px solid;
}

.blue:active {
background: #7fa5f8;
border-bottom: #6684c6 1px solid;
border-left: #6684c8 1px solid;
border-right: #6684c6 1px solid;
}

.red {
background: #ec5e57;
border-bottom: #bb3d36 3px solid;
border-left: #bb3d36 1px solid;
border-right: #bb3d36 1px solid;
}

.red:active {
background: #ea4c44;
border-bottom: #bb3d36 1px solid;
border-left: #bb3d36 1px solid;
border-right: #bb3d36 1px solid;
}

.green {
background: #74ca74;
border-bottom: #509d51 3px solid;
border-left: #509d51 1px solid;
border-right: #509d51 1px solid;
}

.green:active {
background: #64c465;
border-bottom: #509d51 1px solid;
border-left: #509d51 1px solid;
border-right: #509d51 1px solid;
}

.yellow {
background: #f7ce5f;
border-bottom: #c5a13e 3px solid;
border-left: #c5a13e 1px solid;
border-right: #c5a13e 1px solid;
}

.yellow:active {
background: #f6c94d;
border-bottom: #c5a13e 1px solid;
border-left: #c5a13e 1px solid;
border-right: #c5a13e 1px solid;
}

</style>
<script language="javascript">
function updateCarpetPlot(name) {
if (name == "optcom") {
document.getElementById("imgCarpetPlot").src = "./figures/carpet_optcom.svg";
} else if (name == "denoised") {
document.getElementById("imgCarpetPlot").src = "./figures/carpet_denoised.svg";
} else if (name == "accepted") {
document.getElementById("imgCarpetPlot").src = "./figures/carpet_accepted.svg";
} else if (name == "rejected") {
document.getElementById("imgCarpetPlot").src = "./figures/carpet_rejected.svg";
}
}
</script>
<div class="content">
<h1>ICA components</h1>
$content
</div>
<div class="carpet-plots">
<h1>Carpet plots</h1>
<div class="carpet-buttons">
<button class="blue" type="button" onClick="updateCarpetPlot('optcom')">
Optimally combined
</button>
<button class="yellow" type="button" onClick="updateCarpetPlot('denoised')">
Denoised
</button>
<button class="green" type="button" onClick="updateCarpetPlot('accepted')">
Accepted
</button>
<button class="red" type="button" onClick="updateCarpetPlot('rejected')">
Rejected
</button>
</div>
<div class="carpet-plots-image">
<img id="imgCarpetPlot" src="./figures/carpet_optcom.svg">
</div>
</div>
<div class="about">
<h1>About tedana</h1>
$about
Expand Down
48 changes: 4 additions & 44 deletions tedana/reporting/html_report.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ def generate_report(io_generator, tr):
"""
# Load the component time series
comp_ts_path = io_generator.get_name("ICA mixing tsv")
comp_ts_df = pd.read_csv(comp_ts_path, sep='\t', encoding='utf=8')
comp_ts_df = pd.read_csv(comp_ts_path, sep="\t", encoding="utf=8")
n_vols, n_comps = comp_ts_df.shape

# Load the component table
Expand All @@ -100,39 +100,6 @@ def generate_report(io_generator, tr):
for fig in figs:
df._link_figures(fig, comptable_cds, div_content, io_generator)

# Create carpet plot div
carpet_section = models.Div(
text="<span><h1>Carpet plots</h1>",
)
carpet_optcom = models.Div(
text=(
"<img src='./figures/carpet_optcom.svg' "
"alt='Optimally Combined Data' style='width: 1000px !important'><span>"
),
css_classes=["carpet_style"],
)
carpet_denoised = models.Div(
text=(
"<img src='./figures/carpet_denoised.svg' "
"alt='Denoised Data' style='width: 1000px !important'><span>"
),
css_classes=["carpet_style"],
)
carpet_accepted = models.Div(
text=(
"<img src='./figures/carpet_accepted.svg' "
"alt='High-Kappa Data' style='width: 1000px !important'><span>"
),
css_classes=["carpet_style"],
)
carpet_rejected = models.Div(
text=(
"<img src='./figures/carpet_rejected.svg' "
"alt='Low-Kappa Data' style='width: 1000px !important'><span>"
),
css_classes=["carpet_style"],
)

# Create a layout
app = layouts.gridplot(
[
Expand All @@ -143,13 +110,6 @@ def generate_report(io_generator, tr):
layouts.row(rho_sorted_plot, kappa_sorted_plot),
),
layouts.column(div_content),
),
layouts.column(
layouts.row(carpet_section),
layouts.row(carpet_optcom),
layouts.row(carpet_denoised),
layouts.row(carpet_accepted),
layouts.row(carpet_rejected),
)
]
],
Expand All @@ -160,10 +120,10 @@ def generate_report(io_generator, tr):
kr_script, kr_div = embed.components(app)

# Read in relevant methods
with open(opj(io_generator.out_dir, 'report.txt'), 'r+') as f:
with open(opj(io_generator.out_dir, "report.txt"), "r+") as f:
about = f.read()

body = _update_template_bokeh(kr_div, about, kr_script)
html = _save_as_html(body)
with open(opj(io_generator.out_dir, 'tedana_report.html'), 'wb') as f:
f.write(html.encode('utf-8'))
with open(opj(io_generator.out_dir, "tedana_report.html"), "wb") as f:
f.write(html.encode("utf-8"))

0 comments on commit fbe23b4

Please sign in to comment.