Collapsible html repr for raw/info (#12064)

Co-buthored-by: Valerii Chirkov <[email protected]>

Author: drammock

mne/_fiff/meas_info.py

@@ -14,6 +14,7 @@
 import operator
 from textwrap import shorten
 import string
+import uuid
 
 import numpy as np
 
@@ -1884,7 +1885,7 @@ def _get_chs_for_repr(self):
         return good_channels, bad_channels, ecg, eog
 
     @repr_html
-    def _repr_html_(self, caption=None):
+    def _repr_html_(self, caption=None, duration=None, filenames=None):
         """Summarize info for HTML representation."""
         if isinstance(caption, str):
             html = f"<h4>{caption}</h4>"
@@ -1916,7 +1917,11 @@ def _repr_html_(self, caption=None):
             projs = None
 
         info_template = _get_html_template("repr", "info.html.jinja")
+        sections = ("General", "Channels", "Data")
+        section_ids = [f"section_{str(uuid.uuid4())}" for _ in sections]
         return html + info_template.render(
+            sections=sections,
+            section_ids=section_ids,
             caption=caption,
             meas_date=meas_date,
             projs=projs,
@@ -1930,6 +1935,8 @@ def _repr_html_(self, caption=None):
             highpass=self.get("highpass"),
             sfreq=self.get("sfreq"),
             experimenter=self.get("experimenter"),
+            duration=duration,
+            filenames=filenames,
         )
 
     def save(self, fname):

mne/conftest.py

@@ -158,7 +158,7 @@ def pytest_configure(config):
     # h5py
     ignore:`product` is deprecated as of NumPy.*:DeprecationWarning
     # pandas
-    ignore:.*np\.find_common_type is deprecated.*:DeprecationWarning
+    ignore:In the future `np.long`.*:FutureWarning
     # https://github.com/joblib/joblib/issues/1454
     ignore:.*`byte_bounds` is dep.*:DeprecationWarning
     # numpy distutils used by SciPy

mne/html_templates/repr/info.html.jinja

@@ -1,22 +1,65 @@
+<style>
+label { cursor: pointer; }
+#{{ section_ids[0] }} ~ table [for="{{ section_ids[0] }}"]::before,
+#{{ section_ids[1] }} ~ table [for="{{ section_ids[1] }}"]::before,
+#{{ section_ids[2] }} ~ table [for="{{ section_ids[2] }}"]::before {
+    display: inline-block;
+    content: "►";
+    font-size: 11px;
+    width: 15px;
+    text-align: left;
+}
+
+#{{ section_ids[0] }}:checked ~ table [for="{{ section_ids[0] }}"]::before,
+#{{ section_ids[1] }}:checked ~ table [for="{{ section_ids[1] }}"]::before,
+#{{ section_ids[2] }}:checked ~ table [for="{{ section_ids[2] }}"]::before {
+    content: "▼";
+}
+
+#{{ section_ids[0] }} ~ table tr.{{ section_ids[0] }},
+#{{ section_ids[1] }} ~ table tr.{{ section_ids[1] }},
+#{{ section_ids[2] }} ~ table tr.{{ section_ids[2] }} {
+    visibility: collapse;
+}
+
+#{{ section_ids[0] }}:checked ~ table tr.{{ section_ids[0] }},
+#{{ section_ids[1] }}:checked ~ table tr.{{ section_ids[1] }},
+#{{ section_ids[2] }}:checked ~ table tr.{{ section_ids[2] }} {
+    visibility: visible;
+}
+</style>
+
+<input type="checkbox" id="{{ section_ids[0] }}" hidden aria-hidden="true"/>
+<input type="checkbox" id="{{ section_ids[1] }}" hidden aria-hidden="true"/>
+<input type="checkbox" id="{{ section_ids[2] }}" hidden aria-hidden="true"/>
+
 <table class="table table-hover table-striped table-sm table-responsive small">
     <tr>
+        <th class="collapsible_header" colspan="2" style="font-weight: bold; text-align: left;">
+            <label for={{ section_ids[0] }}>
+                {{sections[0]}}
+            </label>
+        </th>
+    </tr>
+    <tr class="{{ section_ids[0] }}">
         <th>Measurement date</th>
         {% if meas_date is not none %}
         <td>{{ meas_date }}</td>
         {% else %}
         <td>Unknown</td>
         {% endif %}
     </tr>
-    <tr>
+    <tr class="{{ section_ids[0] }}">
         <th>Experimenter</th>
         {% if experimenter is not none %}
         <td>{{ experimenter }}</td>
         {% else %}
         <td>Unknown</td>
         {% endif %}
     </tr>
+    <tr class="{{ section_ids[0] }}">
         <th>Participant</th>
-        {% if subject_info is not none %}
+        {% if subject_info is defined and subject_info is not none %}
             {% if 'his_id' in subject_info.keys() %}
             <td>{{ subject_info['his_id'] }}</td>
             {% endif %}
@@ -25,50 +68,77 @@
         {% endif %}
     </tr>
     <tr>
+        <th class="collapsible_header" colspan="2" style="font-weight: bold; text-align: left;">
+            <label for={{ section_ids[1] }}>
+                {{sections[1]}}
+            </label>
+        </th>
+    </tr>
+    <tr class="{{ section_ids[1] }}">
         <th>Digitized points</th>
         {% if dig is not none %}
         <td>{{ dig|length }} points</td>
         {% else %}
         <td>Not available</td>
         {% endif %}
     </tr>
-    <tr>
+    <tr class="{{ section_ids[1] }}">
         <th>Good channels</th>
         <td>{{ good_channels }}</td>
     </tr>
-    <tr>
+    <tr class="{{ section_ids[1] }}">
         <th>Bad channels</th>
         <td>{{ bad_channels }}</td>
     </tr>
-    <tr>
+    <tr class="{{ section_ids[1] }}">
         <th>EOG channels</th>
         <td>{{ eog }}</td>
     </tr>
-    <tr>
+    <tr class="{{ section_ids[1] }}">
         <th>ECG channels</th>
         <td>{{ ecg }}</td>
-    {% if sfreq is not none %}
+    </tr>
     <tr>
+        <th class="collapsible_header" colspan="2" style="font-weight: bold; text-align: left;">
+            <label for={{ section_ids[2] }}>
+                {{sections[2]}}
+            </label>
+        </th>
+    </tr>
+    {% if sfreq is not none %}
+    <tr class="{{ section_ids[2] }}">
         <th>Sampling frequency</th>
         <td>{{ '%0.2f'|format(sfreq) }} Hz</td>
     </tr>
     {% endif %}
     {% if highpass is not none %}
-    <tr>
+    <tr class="{{ section_ids[2] }}">
         <th>Highpass</th>
         <td>{{ '%0.2f'|format(highpass) }} Hz</td>
     </tr>
     {% endif %}
     {% if lowpass is not none %}
-    <tr>
+    <tr class="{{ section_ids[2] }}">
         <th>Lowpass</th>
         <td>{{ '%0.2f'|format(lowpass) }} Hz</td>
     </tr>
     {% endif %}
     {% if projs is not none %}
-    <tr>
+    <tr class="{{ section_ids[2] }}">
         <th>Projections</th>
         <td>{{ projs|join('<br/>') | safe }}</td>
     </tr>
     {% endif %}
+    {% if filenames %}
+    <tr class="{{section_ids[2]}}">
+        <th>Filenames</th>
+        <td>{{ filenames|join('<br>') }}</td>
+    </tr>
+    {% endif %}
+    {% if duration %}
+    <tr class="{{section_ids[2]}}">
+        <th>Duration</th>
+        <td>{{ duration }} (HH:MM:SS)</td>
+    </tr>
+    {% endif %}
 </table>

mne/html_templates/repr/raw.html.jinja

@@ -1,12 +1 @@
-{{ info_repr[:-9] | safe }}
-    {% if filenames %}
-    <tr>
-        <th>Filenames</th>
-        <td>{{ filenames|join('<br>') }}</td>
-    </tr>
-    {% endif %}
-    <tr>
-        <th>Duration</th>
-        <td>{{ duration }} (HH:MM:SS)</td>
-    </tr>
-</table>
+{{ info_repr | safe }}

mne/io/base.py

@@ -2069,9 +2069,11 @@ def _repr_html_(self, caption=None):
         duration = f"{int(hours):02d}:{int(minutes):02d}:{int(seconds):02d}"
         raw_template = _get_html_template("repr", "raw.html.jinja")
         return raw_template.render(
-            info_repr=self.info._repr_html_(caption=caption),
-            filenames=basenames,
-            duration=duration,
+            info_repr=self.info._repr_html_(
+                caption=caption,
+                filenames=basenames,
+                duration=duration,
+            )
         )
 
     def add_events(self, events, stim_channel=None, replace=False):

mne/utils/tests/test_misc.py

@@ -24,7 +24,7 @@ def test_html_repr():
     os.environ[key] = "True"  # HTML repr on
     info = mne.create_info(10, 256)
     r = info._repr_html_()
-    assert r.startswith("<table")
+    assert r.startswith("<style")
     assert r.endswith("</table>")
     os.environ[key] = "False"  # HTML repr off
     r = info._repr_html_()

tutorials/intro/30_info.py

@@ -182,7 +182,7 @@
 print(mne.pick_info(info, eeg_indices)["nchan"])
 
 # %%
-# We can also get a nice HTML representation in IPython like:
+# We can also get a nice HTML representation in IPython like this:
 
 info
 

tutorials/intro/70_report.py

@@ -17,7 +17,7 @@
 HTML pages it generates are self-contained and do not require a running Python
 environment. However, it is less flexible as you can't change code and re-run
 something directly within the browser. This tutorial covers the basics of
-building a report. As usual, we'll start by importing the modules and data we
+building a report. As usual, we will start by importing the modules and data we
 need:
 """
 

tutorials/raw/10_raw_overview.py

@@ -17,7 +17,6 @@
 """
 
 # %%
-
 import os
 import numpy as np
 import matplotlib.pyplot as plt