Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FIX] make masker report tables horizontally scrollable and not overlap with masker report images #4308

Merged
merged 12 commits into from
Mar 9, 2024
Merged

[FIX] make masker report tables horizontally scrollable and not overlap with masker report images #4308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f117ae8
extract table folding and overlapping
Remi-Gau Mar 4, 2024
df90b19
update changelog
Remi-Gau Mar 4, 2024
e8016d2
Update doc/changes/latest.rst
Remi-Gau Mar 5, 2024
2a119c8
FIX] fixes several plotting details in glm reports (#4266)
Remi-Gau Feb 29, 2024
062f006
[FIX] force views in surface plotting to be pairs of `int` or `float`…
Remi-Gau Feb 29, 2024
b2ceeaf
[FIX] fix cut position in nifti maps maskers (#4304)
Remi-Gau Mar 4, 2024
0529608
[FIX] remove conftest for externals (#4306)
Remi-Gau Mar 5, 2024
187b12b
[MAINT] add script to check duration of test suite (#4231)
Remi-Gau Mar 5, 2024
90dbee6
[DOC] display all masker reports in the doc (#4295)
Remi-Gau Mar 5, 2024
88e50d8
[full doc] request full build
Remi-Gau Mar 5, 2024
02efeff
[full doc] request full build
Remi-Gau Mar 5, 2024
9487957
Merge remote-tracking branch 'upstream/main' into fix/4301
Remi-Gau Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions doc/changes/latest.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ Fixes
- :bdg-dark:`Code` Fix plotting of carpet plot due to a change in the coming version of matplolib (3.9.0) (:gh:`4279` by `Rémi Gau`_).
- :bdg-dark:`Code` Fix errant warning when using ``stat_type`` in :func:`nilearn.glm.compute_contrast` (:gh:`4257` by `Eric Larson`_).
- :bdg-dark:`Code` Fix when thresholding is applied to images by GLM reports (:gh:`4258` by `Rémi Gau`_).
- :bdg-dark:`Code` Make masker report tables horizontally scrollable (:gh:`4308` by `Rémi Gau`_).
- :bdg-dark:`Code` Masker reports tables do not overlap with report image (:gh:`4308` by `Rémi Gau`_).
- :bdg-dark:`Code` Fix color bar handling with color map with only 1 level (:gh:`4255` by `Rémi Gau`_).
- :bdg-dark:`Code` Check that the ``view`` parameter in surface plotting functions is a pair of ``int`` or ``float`` when it is not a ``string`` (:gh:`4297` by `Rémi Gau`_).
- :bdg-dark:`Code` Fix positions of the markers on the images on the sphere masker reports (:gh:`4285` by `Rémi Gau`_).
Expand Down
88 changes: 43 additions & 45 deletions nilearn/reporting/data/html/report_body_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,7 @@
}

div.nilearn_report table {
max-width: 100%;
border-collapse: collapse;
margin:50px auto;
float: right;
margin:50px auto;
}

div.nilearn_report thead th {
Expand All @@ -114,13 +111,8 @@
background-color: #ddd;
}

div.nilearn_report details {
overflow-x: visible;
}

div.nilearn_report div.raise {
z-index: 1;

}

/* Tooltip container */
Expand Down Expand Up @@ -184,53 +176,59 @@
font-weight: bold;
}

.scrollit {
overflow-x:scroll;
}

</style>

<div class="nilearn_report">
<h1 class="withtooltip">
{{title}}
<span class="tooltiptext">{{docstring}}</span>
</h1>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-3">
<div class="image">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{content}}" alt="image"/>
{{if overlay}}
<div class="overlay">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{overlay}}" alt="overlay"/>
</div>
<div class="pure-u-1 pure-u-md-2-3">
<div class="image">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{content}}" alt="image"/>
{{if overlay}}
<div class="overlay">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{overlay}}" alt="overlay"/>
</div>
{{endif}}
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 raise">
{{if warning_message}}
<p class="elem-warn">{{warning_message}}</p>
{{endif}}
{{if description}}
<p class="elem-desc">{{description}}</p>
{{endif}}
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 raise">
{{if warning_message}}
<p class="elem-warn">{{warning_message}}</p>
{{endif}}
{{if description}}
<p class="elem-desc">{{description}}</p>
{{endif}}
<p></p>
<details>
<summary class="pure-button">Parameters</summary>
<table class="pure-table">
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
</tr>
</thead>

<tbody>
{{py: params = parameters.items()}}
{{for p, v in params}}
<div class="pure-g">
<div class="pure-u-1 pure-u-md-3-3 scrollit">
<details>
<summary class="pure-button">Parameters</summary>
<table class="pure-table">
<thead>
<tr>
<td data-column="Parameter">{{p}}</td>
<td data-column="Value">{{v}}</td>
<th>Parameter</th>
<th>Value</th>
</tr>
{{endfor}}
</tbody>
</table>

</details>
</thead>
<tbody>
{{py: params = parameters.items()}}
{{for p, v in params}}
<tr>
<td data-column="Parameter">{{p}}</td>
<td data-column="Value">{{v}}</td>
</tr>
{{endfor}}
</tbody>
</table>
</details>
</div>
</div>
</div>
164 changes: 88 additions & 76 deletions nilearn/reporting/data/html/report_body_template_niftilabelsmasker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,7 @@
}

div.nilearn_report table {
max-width: 100%;
border-collapse: collapse;
margin:50px auto;
float: right;
margin:50px auto;
}

div.nilearn_report thead th {
Expand All @@ -114,10 +111,6 @@
background-color: #ddd;
}

div.nilearn_report details {
overflow-x: visible;
}

div.nilearn_report div.raise {
z-index: 1;

Expand Down Expand Up @@ -183,85 +176,104 @@
font-weight: bold;
}

.table-section {
display: flex;
flex-direction: column;
}

.scrollit {
overflow-x:scroll;
}

</style>

<div class="nilearn_report">
<h1 class="withtooltip">
{{title}}
<span class="tooltiptext">{{docstring}}</span>
</h1>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-3">
<div class="image">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{content}}" alt="image"/>
{{if overlay}}
<div class="overlay">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{overlay}}" alt="overlay"/>
</div>
<div class="pure-u-1 pure-u-md-2-3">
<div class="image">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{content}}" alt="image"/>
{{if overlay}}
<div class="overlay">
<img class="pure-img" width="100%" src="data:image/svg+xml;base64,{{overlay}}" alt="overlay"/>
</div>
{{endif}}
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 raise">
{{if warning_message}}
<p class="elem-warn">{{warning_message}}</p>
{{endif}}
</div>
{{if description}}
<p class="elem-desc">{{description}}</p>
{{endif}}
{{if number_of_regions}}
<p class="elem-desc">The masker has <b>{{number_of_regions}}</b> different non-overlapping regions.</p>
{{endif}}
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 raise">
{{if warning_message}}
<p class="elem-warn">{{warning_message}}</p>
{{endif}}
{{if description}}
<p class="elem-desc">{{description}}</p>
{{endif}}
{{if number_of_regions}}
<p class="elem-desc">The masker has <b>{{number_of_regions}}</b> different non-overlapping regions.</p>
{{endif}}
<p></p>
<p></p>
<details>
{{if summary}}
<summary class="pure-button">Regions summary</summary>
<table class="pure-table">
<thead>
<tr>
{{py: region = summary.items()}}
{{for k, v in region}}
<th>{{k}}</th>
{{endfor}}
</tr>
</thead>
<tbody>
{{for idx in range(number_of_regions)}}
<tr>
{{for k, v in region}}
<td data-column={{k}}>{{v[idx]}}</td>
{{endfor}}
</tr>
{{endfor}}
</tbody>
</table>
</details>
{{endif}}
{{if parameters}}
<details>
<summary class="pure-button">Parameters</summary>
<table class="pure-table">
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
</tr>
</thead>

<tbody>
{{py: params = parameters.items()}}
{{for p, v in params}}
<tr>
<td data-column="Parameter">{{p}}</td>
<td data-column="Value">{{v}}</td>
</tr>
{{endfor}}
</tbody>
</table>
{{endif}}
</details>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-3-3">
<div class="table-section">
{{if summary}}
<div class="scrollit">
<details>
<summary class="pure-button">Regions summary</summary>
<table class="pure-table">
<thead>
<tr>
{{py: region = summary.items()}}
{{for k, v in region}}
<th>{{k}}</th>
{{endfor}}
</tr>
</thead>
<tbody>
{{for idx in range(number_of_regions)}}
<tr>
{{for k, v in region}}
<td data-column={{k}}>{{v[idx]}}</td>
{{endfor}}
</tr>
{{endfor}}
</tbody>
</table>
</details>
</div>
{{endif}}
{{if parameters}}
<div class="scrollit">
<details>
<summary class="pure-button">Parameters</summary>
<table class="pure-table">
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
</tr>
</thead>

<tbody>
{{py: params = parameters.items()}}
{{for p, v in params}}
<tr>
<td data-column="Parameter">{{p}}</td>
<td data-column="Value">{{v}}</td>
</tr>
{{endfor}}
</tbody>
</table>
</details>
</div>
{{endif}}
</div>
</div>
</div>
<div class="note">
<p>This report was generated based on information provided at instantiation and fit time. Note that the masker can potentially perform resampling at transform time.</p>
<p>This report was generated based on information provided at instantiation and fit time.
Note that the masker can potentially perform resampling at transform time.</p>
</div>
</div>
22 changes: 15 additions & 7 deletions nilearn/reporting/data/html/report_body_template_niftimapsmasker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,7 @@
}

div.nilearn_report table {
max-width: 100%;
border-collapse: collapse;
margin:50px auto;
float: right;
}

div.nilearn_report thead th {
Expand All @@ -115,10 +112,6 @@
background-color: #ddd;
}

div.nilearn_report details {
overflow-x: visible;
}

div.nilearn_report div.raise {
z-index: 1;

Expand Down Expand Up @@ -206,7 +199,12 @@
height: 60px;
}

.scrollit {
overflow-x:scroll;
}

</style>

<div class="nilearn_report">
<h1 class="withtooltip">
{{title}}
Expand Down Expand Up @@ -266,7 +264,12 @@ <h3 class="comp-title">Component <span id="comp"></span></h3>
{{if not warning_message}}
<div class="empty"></div>
{{endif}}
</div>
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-3-3">
{{if parameters}}
<div class="scrollit">
<details>
<summary class="pure-button">Parameters</summary>
<table class="pure-table">
Expand All @@ -287,9 +290,14 @@ <h3 class="comp-title">Component <span id="comp"></span></h3>
</tbody>
</table>
</details>
</div>
{{endif}}
</div>
</div>
<div class="note">
<p>This report was generated based on information provided at instantiation and fit time.
Note that the masker can potentially perform resampling at transform time.</p>
</div>
</div>
<script>
document.getElementById("comp").innerHTML=displayed_maps[current_map_idx];
Expand Down