From 182fe0f1f850b6b6529e354e0751a930c6bdce26 Mon Sep 17 00:00:00 2001
From: Eric Larson <larson.eric.d@gmail.com>
Date: Fri, 8 Jan 2021 10:27:23 -0500
Subject: [PATCH] ENH: Add toggle-all button to Report

---
 doc/changes/latest.inc                     |  4 +-
 examples/visualization/plot_make_report.py | 53 ------------
 mne/report.py                              | 93 +++++++++++++++-------
 tutorials/misc/plot_report.py              | 26 ++++--
 4 files changed, 87 insertions(+), 89 deletions(-)
 delete mode 100644 examples/visualization/plot_make_report.py

diff --git a/doc/changes/latest.inc b/doc/changes/latest.inc
index 499d297b085..a791ca728c7 100644
--- a/doc/changes/latest.inc
+++ b/doc/changes/latest.inc
@@ -19,7 +19,9 @@ Enhancements
 ~~~~~~~~~~~~
 - Update the ``notebook`` 3d backend to use ``ipyvtk_simple`` for a better integration within ``Jupyter`` (:gh:`8503` by `Guillaume Favelier`_)
 
-- Speed up :func:`mne.inverse_sparse.tf_mixed_norm` using STFT/ISTFT linearity by `Eric Larson`_
+- Add toggle-all button to :class:`mne.Report` HTML (:gh:`8723` by `Eric Larson`_)
+
+- Speed up :func:`mne.inverse_sparse.tf_mixed_norm` using STFT/ISTFT linearity (:gh:`8697` by `Eric Larson`_)
 
 Bugs
 ~~~~
diff --git a/examples/visualization/plot_make_report.py b/examples/visualization/plot_make_report.py
deleted file mode 100644
index 256c279f1b0..00000000000
--- a/examples/visualization/plot_make_report.py
+++ /dev/null
@@ -1,53 +0,0 @@
-"""
-.. _ex-report:
-
-================================
-Make an MNE-Report with a Slider
-================================
-
-In this example, MEG evoked data are plotted in an HTML slider.
-"""
-
-# Authors: Teon Brooks <teon.brooks@gmail.com>
-#          Eric Larson <larson.eric.d@gmail.com>
-#
-# License: BSD (3-clause)
-
-from mne.report import Report
-from mne.datasets import sample
-from mne import read_evokeds
-from matplotlib import pyplot as plt
-
-
-data_path = sample.data_path()
-meg_path = data_path + '/MEG/sample'
-subjects_dir = data_path + '/subjects'
-evoked_fname = meg_path + '/sample_audvis-ave.fif'
-
-###############################################################################
-# Do standard folder parsing (this can take a couple of minutes):
-
-report = Report(image_format='png', subjects_dir=subjects_dir,
-                info_fname=evoked_fname, subject='sample',
-                raw_psd=False)  # use False for speed here
-report.parse_folder(meg_path, on_error='ignore', mri_decim=10)
-
-###############################################################################
-# Add a custom section with an evoked slider:
-
-# Load the evoked data
-evoked = read_evokeds(evoked_fname, condition='Left Auditory',
-                      baseline=(None, 0), verbose=False)
-evoked.crop(0, .2)
-times = evoked.times[::4]
-# Create a list of figs for the slider
-figs = list()
-for t in times:
-    figs.append(evoked.plot_topomap(t, vmin=-300, vmax=300, res=100,
-                                    show=False))
-    plt.close(figs[-1])
-report.add_slider_to_section(figs, times, 'Evoked Response',
-                             image_format='png')  # can also use 'svg'
-
-# Save the report
-report.save('my_report.html', overwrite=True)
diff --git a/mne/report.py b/mne/report.py
index 675f11a780e..d0dc542a939 100644
--- a/mne/report.py
+++ b/mne/report.py
@@ -526,32 +526,60 @@ def _build_html_slider(slices_range, slides_klass, slider_id,
 {{include}}
 <script type="text/javascript">
 
-        var toggle_state = false;
+        function getAllOnOff() {
+            const all = $('.has_toggle');
+            const on = all.parent('.active').children('.has_toggle');
+            const off = all.not(on);
+            return [all, on, off];
+        }
+
+        function toggleAll(){
+            const [all, on, off] = getAllOnOff();
+            if (all.length == on.length)
+                on.trigger('click');
+            else
+                off.trigger('click');
+            updateToggleAllButton();
+        }
+
+        function updateToggleAllButton() {
+            const [all, on, off] = getAllOnOff();
+            const a = $('.mnetoggleall-btn').children();
+            if (all.length == on.length)
+                a.html('☒')
+            else
+                a.html('☑')
+        }
+
         $(document).on('keydown', function (event) {
             if (event.which == 84){
-                if (!toggle_state)
-                    $('.has_toggle').trigger('click');
-                else if (toggle_state)
-                    $('.has_toggle').trigger('click');
-            toggle_state = !toggle_state;
+                toggleAll();
             }
         });
 
-        function togglebutton(class_name){
-            $(class_name).toggle();
-
-            if ($(class_name + '-btn').hasClass('active'))
-                $(class_name + '-btn').removeClass('active');
-            else
-                $(class_name + '-btn').addClass('active');
+        function toggleButton(class_name){
+            if (class_name.includes('mnetoggleall'))
+                toggleAll();
+            else {
+                $(class_name).toggle();
+                if ($(class_name + '-btn').hasClass('active'))
+                    $(class_name + '-btn').removeClass('active');
+                else
+                    $(class_name + '-btn').addClass('active');
+                updateToggleAllButton();
+            }
         }
 
-        /* Scroll down on click to #id so that caption is not hidden
-        by navbar */
+        /* Scroll down on click to #id so that caption is not hidden by navbar */
         var shiftWindow = function() { scrollBy(0, -60) };
         if (location.hash) shiftWindow();
         window.addEventListener("hashchange", shiftWindow);
 
+        /* Update things when document is ready */
+        $( document ).ready(function() {
+            updateToggleAllButton();
+        });
+
         </script>
 <style type="text/css">
 
@@ -628,6 +656,13 @@ def _build_html_slider(slices_range, slides_klass, slider_id,
     text-align: right;
 }
 
+.navbar-toggle:after {
+    content: "▲";
+}
+.navbar-toggle.collapsed:after {
+    content: "▼";
+}
+
 </style>
 </head>
 <body>
@@ -636,30 +671,30 @@ def _build_html_slider(slices_range, slides_klass, slider_id,
     <div class="container-fluid">
         <div class="navbar-header navbar-left">
             <ul class="nav nav-pills"><li class="active">
-                <a class="navbar-btn" data-toggle="collapse"
-                data-target="#viewnavbar" href="javascript:void(0)">
-                ></a></li></ul>
+                <a class="navbar-toggle" data-toggle="collapse" data-target="#viewnavbar" href="javascript:void(0)"></a>
+            </li></ul>
     </div>
         <h3 class="navbar-text" style="color:white">{{title}}</h3>
-        <ul class="nav nav-pills navbar-right" style="margin-top: 7px;"
-        id="viewnavbar">
+        <ul class="nav nav-pills navbar-right in" style="margin-top: 7px;" id="viewnavbar">
 
         {{for section in sections}}
 
         <li class="active {{sectionvars[section]}}-btn">
-           <a href="javascript:void(0)"
-           onclick="togglebutton('.{{sectionvars[section]}}')"
-           class="has_toggle">
-    {{section if section != 'mri' else 'MRI'}}
+           <a href="javascript:void(0)" onclick="toggleButton('.{{sectionvars[section]}}')" class="has_toggle">
+               {{section}}
            </a>
         </li>
 
         {{endfor}}
 
+        <li class="active mnetoggleall-btn">
+           <a href="javascript:void(0)" onclick="toggleButton('.mnetoggleall')"> </a>
+        </li>
+
         </ul>
     </div>
 </nav>
-""")
+""")  # noqa: E501
 
 footer_template = HTMLTemplate(u"""
 </div></body>
@@ -871,9 +906,7 @@ class Report(object):
 
     Notes
     -----
-    See :ref:`tut-report` for an introduction to using ``mne.Report``, and
-    :ref:`this example <ex-report>` for an example of customizing the report
-    with a slider.
+    See :ref:`tut-report` for an introduction to using ``mne.Report``.
 
     .. versionadded:: 0.8.0
     """
@@ -1723,9 +1756,11 @@ def _render_toc(self, verbose=None):
         self._sectionlabels = sectionlabels
 
         lang = getattr(self, 'lang', 'en-us')
+        sections = [section if section != 'mri' else 'MRI'
+                    for section in self.sections]
         html_header = header_template.substitute(
             title=self.title, include=self.include, lang=lang,
-            sections=self.sections, sectionvars=self._sectionvars)
+            sections=sections, sectionvars=self._sectionvars)
         self.html.insert(0, html_header)  # Insert header at position 0
         self.html.insert(1, html_toc)  # insert TOC
 
diff --git a/tutorials/misc/plot_report.py b/tutorials/misc/plot_report.py
index 2127c8b4ad6..95e38d53ba9 100644
--- a/tutorials/misc/plot_report.py
+++ b/tutorials/misc/plot_report.py
@@ -16,6 +16,7 @@
 """
 
 import os
+import matplotlib.pyplot as plt
 import mne
 
 ###############################################################################
@@ -176,7 +177,8 @@
 #
 # The python interface has greater flexibility compared to the :ref:`command
 # line interface <mne report>`. For example, custom plots can be added via
-# the :meth:`~mne.Report.add_figs_to_section` method:
+# the :meth:`~mne.Report.add_figs_to_section` method, and sliders with the
+# :meth:`~mne.Report.add_slider_to_section`:
 
 # generate a custom plot:
 fname_evoked = os.path.join(path, 'MEG', 'sample', 'sample_audvis-ave.fif')
@@ -188,6 +190,17 @@
 
 # add the custom plot to the report:
 report.add_figs_to_section(fig, captions='Left Auditory', section='evoked')
+
+# Add a custom section with an evoked slider:
+figs = list()
+times = evoked.times[::30]
+for t in times:
+    figs.append(evoked.plot_topomap(t, vmin=-300, vmax=300, res=100,
+                                    show=False))
+    plt.close(figs[-1])
+report.add_slider_to_section(figs, times, 'Evoked Response',
+                             image_format='png')  # can also use 'svg'
+
 report.save('report_custom.html', overwrite=True)
 
 ###############################################################################
@@ -200,13 +213,14 @@
 # :meth:`~mne.Report.add_figs_to_section` command. Each section is identified
 # by a toggle button in the top navigation bar of the report which can be used
 # to show or hide the contents of the section. To toggle the show/hide state of
-# all sections in the HTML report, press :kbd:`t`.
+# all sections in the HTML report, press :kbd:`t`, or press the toggle-all
+# button in the upper right.
 #
-# .. note::
+# .. sidebar:: Structure
 #
-#    Although we've been generating separate reports in each example, you could
-#    easily create a single report for all :file:`.fif` files (raw, evoked,
-#    covariance, etc) by passing ``pattern='*.fif'``.
+#    Although we've been generating separate reports in each of these examples,
+#    you could easily create a single report for all :file:`.fif` files (raw,
+#    evoked, covariance, etc) by passing ``pattern='*.fif'``.
 #
 #
 # Editing a saved report