ENH: Improve report usability (#12901)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Daniel McCloy <dan@mccloy.info>

Author: 3 people

doc/changes/devel/12901.bugfix.rst

@@ -0,0 +1 @@
+:class:`mne.Report` HDF5 files are now written in ``mode='a'`` (append) to allow users to store other data in the HDF5 files, by `Eric Larson`_.

doc/changes/devel/12901.newfeature.rst

@@ -0,0 +1,8 @@
+Improved reporting and plotting options:
+
+- :meth:`mne.Report.add_projs` can now plot with :func:`mne.viz.plot_projs_joint` rather than :func:`mne.viz.plot_projs_topomap`
+- :class:`mne.Report` now has attributes ``img_max_width`` and ``img_max_res`` that can be used to control image scaling.
+- :class:`mne.Report` now has an attribute ``collapse`` that allows collapsing sections and/or subsections by default.
+- :func:`mne.viz.plot_head_positions` now has a ``totals=True`` option to show the total distance and angle of the head.
+
+Changes by `Eric Larson`_.

mne/html_templates/report/html.html.jinja

@@ -1,7 +1,6 @@
 <div class="accordion-item {{ div_klass }}" id="{{ id }}" data-mne-tags="{% for tag in tags %} {{ tag }} {% endfor %}">
   <div class="accordion-header" id="accordion-header-{{id}}">
-    <button class="accordion-button pt-1 pb-1" type="button" data-bs-toggle="collapse"
-      data-bs-target="#accordion-collapse-{{ id }}" aria-expanded="true" aria-controls="accordion-collapse-{{id}}">
+    <button class="accordion-button pt-1 pb-1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-{{ id }}" aria-expanded="true" aria-controls="accordion-collapse-{{id}}">
       <div class="w-100">
         <span class="me-auto"><a href="#{{ id }}" class="text-decoration-none">{{ title }}</a></span>
         {% for tag in tags %}
@@ -12,10 +11,7 @@
       </div>
     </button>
   </div>
-
-
-  <div id="accordion-collapse-{{ id }}" class="accordion-collapse collapse show"
-    aria-labelledby="accordion-header-{{ id }}">
+  <div id="accordion-collapse-{{ id }}" class="accordion-collapse collapse {{ show }}" aria-labelledby="accordion-header-{{ id }}">
     <div class="accordion-body">
       {{ html | safe }}
     </div>

mne/html_templates/report/image.html.jinja

@@ -1,17 +1,17 @@
 {% extends "section.html.jinja" %}
 {% block html_content %}
-<figure class="figure mx-auto d-block">
-  {% if image_format == 'svg' %}
-  <div class="d-flex justify-content-center">
-    {{ img|safe }}
-  </div>
-  {% else %}
-  <img class="figure-img img-fluid rounded mx-auto my-0 d-block" alt="{{ title }}"
-    src="data:image/{{ image_format }};base64,{{ img }}">
-  {% endif %}
+      <figure class="figure mx-auto d-block">
+        {% if image_format == 'svg' %}
+        <div class="d-flex justify-content-center">
+          {{ img|safe }}
+        </div>
+        {% else %}
+        <img class="figure-img img-fluid rounded mx-auto my-0 d-block" alt="{{ title }}"
+          src="data:image/{{ image_format }};base64,{{ img }}">
+        {% endif %}
 
-  {% if caption is not none %}
-  <figcaption class="figure-caption text-center">{{ caption }}</figcaption>
-  {% endif %}
-</figure>
+        {% if caption is not none %}
+        <figcaption class="figure-caption text-center">{{ caption }}</figcaption>
+        {% endif %}
+      </figure>
 {% endblock html_content %}

mne/html_templates/report/section.html.jinja

@@ -1,7 +1,6 @@
 <div class="accordion-item {{ div_klass }}" id="{{ id }}" data-mne-tags="{% for tag in tags %} {{ tag }} {% endfor %}">
   <div class="accordion-header" id="accordion-header-{{id}}">
-    <button class="accordion-button pt-1 pb-1" type="button" data-bs-toggle="collapse"
-      data-bs-target="#accordion-collapse-{{ id }}" aria-expanded="true" aria-controls="accordion-collapse-{{id}}">
+    <button class="accordion-button pt-1 pb-1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-{{ id }}" aria-expanded="true" aria-controls="accordion-collapse-{{id}}">
       <div class="w-100">
         <span class="me-auto"><a href="#{{ id }}" class="text-decoration-none">{{ title }}</a></span>
         {% for tag in tags %}
@@ -12,10 +11,7 @@
       </div>
     </button>
   </div>
-
-
-  <div id="accordion-collapse-{{ id }}" class="accordion-collapse collapse show"
-    aria-labelledby="accordion-header-{{ id }}">
+  <div id="accordion-collapse-{{ id }}" class="accordion-collapse collapse {{ show }}" aria-labelledby="accordion-header-{{ id }}">
     <div class="accordion-body">
       {% block html_content %}
       {% for html in htmls %}

mne/html_templates/report/slider.html.jinja

@@ -1,8 +1,7 @@
 <div class="accordion-item slider {{ klass }}" id="{{ id }}"
   data-mne-tags="{% for tag in tags %} {{ tag }} {% endfor %}">
   <div class="accordion-header" id="accordion-header-{{ id }}">
-    <button class="accordion-button pt-1 pb-1" type="button" data-bs-toggle="collapse"
-      data-bs-target="#accordion-collapse-{{ id }}" aria-expanded="true" aria-controls="accordion-collapse-{{ id }}">
+    <button class="accordion-button pt-1 pb-1" type="button" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-{{ id }}" aria-expanded="true" aria-controls="accordion-collapse-{{ id }}">
       <div class="w-100">
         <span class="me-auto"><a href="#{{ id }}" class="text-decoration-none">{{ title }}</a></span>
         {% for tag in tags %}
@@ -13,9 +12,7 @@
       </div>
     </button>
   </div>
-
-  <div id="accordion-collapse-{{ id }}" class="accordion-collapse collapse show"
-    aria-labelledby="accordion-header-{{ id }}">
+  <div id="accordion-collapse-{{ id }}" class="accordion-collapse collapse {{ show }}" aria-labelledby="accordion-header-{{ id }}">
     <div class=" accordion-body">
       <div class="mx-auto d-block w-75">
         <label for="slider-{{ id }}" class="form-label small">
@@ -24,9 +21,7 @@
         <input type="range" class="form-range" min="0" max="{{ images|length - 1 }}" value="{{ start_idx }}"
           id="slider-{{id}}">
       </div>
-
-      <div id="corousel-{{ id }}" class="carousel carousel-dark" data-bs-interval="false" data-bs-wrap="false"
-        data-bs-keyboard="true">
+      <div id="corousel-{{ id }}" class="carousel carousel-dark" data-bs-interval="false" data-bs-wrap="false" data-bs-keyboard="true">
         <div class="carousel-inner">
           {% for idx, img, caption in range(images|length)|zip(images, captions) %}
           <div class="carousel-item {% if idx == start_idx %}active{% endif %}">
@@ -40,7 +35,6 @@
           </div>
           {% endfor %}
         </div>
-
         {# <button class="carousel-control-prev" type="button" data-bs-target="#corousel-{{id}}" data-bs-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="visually-hidden">Previous</span>