Skip to content

fix HTML repr table rendering #12788

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

Merged
larsoner merged 10 commits into from
Sep 23, 2024
Merged

fix HTML repr table rendering #12788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4dc1f62
make it look good in website docs
drammock Aug 13, 2024
acd5984
touch a couple tutorials
drammock Aug 13, 2024
9e932eb
unrelated tutorial formatting fix
drammock Aug 13, 2024
7e0b6f2
updates for jupyter notebook
drammock Aug 13, 2024
dbfa9b0
handle vscode; some refactors
drammock Aug 14, 2024
45a7df3
Merge branch 'main' into tables
drammock Aug 14, 2024
f842507
more DRY; fix toggle chevron direction
drammock Sep 20, 2024
b9f4d01
typo in CSS comment
drammock Sep 20, 2024
9ccfcf0
Merge branch 'main' into tables
drammock Sep 20, 2024
7919d2c
fix reports
drammock Sep 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 35 additions & 10 deletions doc/_static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,20 +161,45 @@ iframe.sg_report {
top: 0;
}

/* TODO: Either pydata-sphinx-theme (for using Bootstrap) or sphinx-gallery (for adding table formatting) should fix this */
.table-striped-columns>:not(caption)>tr>:nth-child(2n),.table-striped>tbody>tr:nth-of-type(odd)>* {
--bs-table-accent-bg: var(--bs-table-striped-bg);
/* ******************************************************** HTML repr tables */

/* make table responsive to pydata-sphinx-theme's light/dark mode */
.table > :not(caption) > * > * {
color: var(--pst-color-text-base);
}
.table-hover>tbody>tr:hover>* {
--bs-table-accent-bg: var(--bs-table-hover-bg);
color: var(--pst-color-text-base);
.mne-repr-table tbody tr:hover {
background-color: var(--pst-color-table-row-hover-bg);
}
.rendered_html table {
color: var(--pst-color-text-base);
.mne-repr-section-toggle > button > svg > path {
fill: var(--pst-color-text-base);
}


/* make the expand/collapse button look nicer */
.mne-repr-section-toggle > button {
padding: 20%;
}
/* make section header rows more distinct (and harmonize with pydata-sphinx-theme table
style in the process). Color copied from pydata-sphinx-theme; 2px copied from bootstrap.
*/
.mne-repr-table th {
border-bottom: 2px solid var(--pst-color-primary);
}
/* harmonize the channel names buttons with the rest of the table */
.mne-ch-names-btn {
font-size: inherit;
padding: 0.25rem;
min-width: 1.5rem;
font-weight: bold;
}
/*
.mne-ch-names-btn:hover {
background-color: var(--pst-color-);
text-decoration: underline;
}
.mne-ch-names-btn:focus-visible {
outline: 0.1875rem solid var(--pst-color-accent);
outline-offset: 0.1875rem;
}
*/
/* ***************************************************** sphinx-design fixes */
p.btn a {
color: unset;
Expand Down
36 changes: 13 additions & 23 deletions mne/html_templates/repr/_acquisition.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,23 @@

{# Collapse content during documentation build. #}
{% if collapsed %}
{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
{% set collapsed_row_class = "mne-repr-collapsed" %}
{% else %}
{% set collapsed_row_class = "" %}
{% endif %}

<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %}
title="Hide section" {% endif %} onclick="toggleVisibility('{{ section_class_name }}')">
<th class="repr-section-toggle-col">
<button>
{# This span is for the background SVG icon #}
<span class="collapse-uncollapse-caret"></span>
</button>
</th>
<th colspan="2">
<strong>{{ section }}</strong>
</th>
</tr>
{%include 'static/_section_header_row.html.jinja' %}

{% if duration %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Duration</td>
<td>{{ duration }} (HH:MM:SS)</td>
</tr>
{% endif %}
{% if inst is defined and inst | has_attr("kind") and inst | has_attr("nave") %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Aggregation</td>
{% if inst.kind == "average" %}
<td>average of {{ inst.nave }} epochs</td>
Expand All @@ -42,21 +32,21 @@
{% endif %}
{% if inst is defined and inst | has_attr("comment") %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Condition</td>
<td>{{inst.comment}}</td>
</tr>
{% endif %}
{% if inst is defined and inst | has_attr("events") %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Total number of events</td>
<td>{{ inst.events | length }}</td>
</tr>
{% endif %}
{% if event_counts is defined %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Events counts</td>
{% if events is not none %}
<td>
Expand All @@ -72,35 +62,35 @@
{% endif %}
{% if inst is defined and inst | has_attr("tmin") and inst | has_attr("tmax") %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Time range</td>
<td>{{ inst | format_time_range }}</td>
</tr>
{% endif %}
{% if inst is defined and inst | has_attr("baseline") %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Baseline</td>
<td>{{ inst | format_baseline }}</td>
</tr>
{% endif %}
{% if info["sfreq"] is defined and info["sfreq"] is not none %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Sampling frequency</td>
<td>{{ "%0.2f" | format(info["sfreq"]) }} Hz</td>
</tr>
{% endif %}
{% if inst is defined and inst.times is defined %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Time points</td>
<td>{{ inst.times | length | format_number }}</td>
</tr>
{% endif %}
{% if inst is defined and inst | has_attr("metadata") %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Metadata</td>
<td>{{ inst | format_metadata }}</td>
</tr>
Expand Down
24 changes: 7 additions & 17 deletions mne/html_templates/repr/_channels.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,26 @@

{# Collapse content during documentation build. #}
{% if collapsed %}
{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
{% set collapsed_row_class = "mne-repr-collapsed" %}
{% else %}
{% set collapsed_row_class = "" %}
{% endif %}

<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
onclick="toggleVisibility('{{ section_class_name }}')">
<th class="repr-section-toggle-col">
<button>
{# This span is for the background SVG icon #}
<span class="collapse-uncollapse-caret"></span>
</button>
</th>
<th colspan="2">
<strong>{{ section }}</strong>
</th>
</tr>
{%include 'static/_section_header_row.html.jinja' %}

{% for channel_type, channels in (info | format_channels).items() %}
{% set channel_names_good = channels["good"] | map(attribute='name_html') | join(', ') %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>{{ channel_type }}</td>
<td>
<button class="channel-names-btn" onclick="alert('Good {{ channel_type}}:\n\n{{ channel_names_good | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_good | safe }}">
<button class="mne-ch-names-btn sd-sphinx-override sd-btn sd-btn-info sd-text-wrap sd-shadow-sm" onclick="alert('Good {{ channel_type}}:\n\n{{ channel_names_good | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_good | safe }}">
{{ channels["good"] | length}}
</button>

{% if channels["bad"] %}
{% set channel_names_bad = channels["bad"] | map(attribute='name_html') | join(', ') %}
and <button class="channel-names-btn" onclick="alert('Bad {{ channel_type}}:\n\n{{ channel_names_bad | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_bad | safe }}">
and <button class="mne-ch-names-btn sd-sphinx-override sd-btn sd-btn-info sd-text-wrap sd-shadow-sm" onclick="alert('Bad {{ channel_type}}:\n\n{{ channel_names_bad | safe }}')" title="(Click to open in popup)&#13;&#13;{{ channel_names_bad | safe }}">
{{ channels["bad"] | length}} bad
</button>
{% endif %}
Expand All @@ -41,7 +31,7 @@
{% endfor %}

<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Head & sensor digitization</td>
{% if info["dig"] is not none %}
<td>{{ info["dig"] | length }} points</td>
Expand Down
22 changes: 6 additions & 16 deletions mne/html_templates/repr/_filters.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,30 @@

{# Collapse content during documentation build. #}
{% if collapsed %}
{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
{% set collapsed_row_class = "mne-repr-collapsed" %}
{% else %}
{% set collapsed_row_class = "" %}
{% endif %}

<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
onclick="toggleVisibility('{{ section_class_name }}')">
<th class="repr-section-toggle-col">
<button>
{# This span is for the background SVG icon #}
<span class="collapse-uncollapse-caret"></span>
</button>
</th>
<th colspan="2">
<strong>{{ section }}</strong>
</th>
</tr>
{%include 'static/_section_header_row.html.jinja' %}

{% if info["highpass"] is defined and info["highpass"] is not none %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Highpass</td>
<td>{{ "%0.2f" | format(info["highpass"]) }} Hz</td>
</tr>
{% endif %}
{% if info["lowpass"] is defined and info["lowpass"] is not none %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Lowpass</td>
<td>{{ "%0.2f" | format(info["lowpass"]) }} Hz</td>
</tr>
{% endif %}
{% if info.projs is defined and info.projs %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Projections</td>
<td>
{% for p in (info | format_projs) %}
Expand Down
26 changes: 8 additions & 18 deletions mne/html_templates/repr/_general.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,16 @@

{# Collapse content during documentation build. #}
{% if collapsed %}
{% set collapsed_row_class = "repr-element-faded repr-element-collapsed" %}
{% set collapsed_row_class = "mne-repr-collapsed" %}
{% else %}
{% set collapsed_row_class = "" %}
{% endif %}

<tr class="repr-section-header {{ section_class_name }}" {% if collapsed %} title="Show section" {% else %} title="Hide section" {% endif %}
onclick="toggleVisibility('{{ section_class_name }}')">
<th class="repr-section-toggle-col">
<button>
{# This span is for the background SVG icon #}
<span class="collapse-uncollapse-caret"></span>
</button>
</th>
<th colspan="2">
<strong>{{ section }}</strong>
</th>
</tr>
{%include 'static/_section_header_row.html.jinja' %}

{% if filenames %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Filename(s)</td>
<td>
{% for f in filenames %}
Expand All @@ -33,12 +23,12 @@
</tr>
{% endif %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>MNE object type</td>
<td>{{ inst | data_type }}</td>
</tr>
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Measurement date</td>
{% if info["meas_date"] is defined and info["meas_date"] is not none %}
<td>{{ info["meas_date"] | dt_to_str }}</td>
Expand All @@ -47,7 +37,7 @@
{% endif %}
</tr>
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Participant</td>
{% if info["subject_info"] is defined and info["subject_info"] is not none %}
{% if info["subject_info"]["his_id"] is defined %}
Expand All @@ -58,7 +48,7 @@
{% endif %}
</tr>
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<td class="repr-section-toggle-col"></td>
<td class="mne-repr-section-toggle"></td>
<td>Experimenter</td>
{% if info["experimenter"] is defined and info["experimenter"] is not none %}
<td>{{ info["experimenter"] }}</td>
Expand Down
2 changes: 1 addition & 1 deletion mne/html_templates/repr/epochs.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% set info = inst.info %}

<table class="repr table table-hover table-striped table-sm table-responsive small">
<table class="table mne-repr-table">
{%include '_general.html.jinja' %}
{%include '_acquisition.html.jinja' %}
{%include '_channels.html.jinja' %}
Expand Down
2 changes: 1 addition & 1 deletion mne/html_templates/repr/evoked.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% set info = inst.info %}

<table class="repr table table-hover table-striped table-sm table-responsive small">
<table class="table mne-repr-table">
{%include '_general.html.jinja' %}
{%include '_acquisition.html.jinja' %}
{%include '_channels.html.jinja' %}
Expand Down
6 changes: 3 additions & 3 deletions mne/html_templates/repr/forward.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
{%include '_js_and_css.html.jinja' %}

<table class="table table-hover table-striped table-sm table-responsive small">
<table class="table mne-repr-table">
{% for channel_type, channels in (info | format_channels).items() %}
{% set channel_names_good = channels["good"] | map(attribute='name_html') | join(', ') %}
<tr class="repr-element {{ section_class_name }} {{ collapsed_row_class }}">
<th>{{ channel_type }}</th>
<td>
<button class="channel-names-btn"
<button class="mne-ch-names-btn sd-sphinx-override sd-button sd-btn-info sd-text-wrap sd-shadow-sm"
onclick="alert('Good {{ channel_type}}:\n\n{{ channel_names_good | safe }}')"
title="Show good channel names">
{{ channels["good"] | length}}
</button>

{% if channels["bad"] %}
{% set channel_names_bad = channels["bad"] | map(attribute='name_html') | join(', ') %}
and <button class="channel-names-btn"
and <button class="mne-ch-names-btn sd-sphinx-override sd-button sd-btn-info sd-text-wrap sd-shadow-sm"
onclick="alert('Bad {{ channel_type}}:\n\n{{ channel_names_bad | safe }}')"
title="Show bad channel names">
{{ channels["bad"] | length}} bad
Expand Down
2 changes: 1 addition & 1 deletion mne/html_templates/repr/ica.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<table class="table table-hover table-striped table-sm table-responsive small">
<table class="table mne-repr-table">
<tr>
<th>Method</th>
<td>{{ method }}</td>
Expand Down
2 changes: 1 addition & 1 deletion mne/html_templates/repr/info.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{%set inst = info %}

<table class="repr table table-hover table-striped table-sm table-responsive small">
<table class="table mne-repr-table">
{%include '_general.html.jinja' %}
{%include '_acquisition.html.jinja' %}
{%include '_channels.html.jinja' %}
Expand Down
2 changes: 1 addition & 1 deletion mne/html_templates/repr/inverse_operator.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<table class="table table-hover table-striped table-sm table-responsive small">
<table class="table mne-repr-table">
<tr>
<th>Channels</th>
<td>{{ channels }}</td>
Expand Down
2 changes: 1 addition & 1 deletion mne/html_templates/repr/raw.html.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% set info = inst.info %}

<table class="repr table table-hover table-striped table-sm table-responsive small">
<table class="table mne-repr-table">
{%include '_general.html.jinja' %}
{%include '_acquisition.html.jinja' %}
{%include '_channels.html.jinja' %}
Expand Down
Loading