also hide column summaries when empty

src/skrubview/_data/templates/dataframe-columns.html

@@ -1,6 +1,8 @@
 {% from "utils.j2" import collapse_const_id with context %}
+{% set selected_cols_id = "{}_selected_cols_box".format(report_id) %}
+
+<div class="skrubview-if-else skrubview-column-summaries-toggle" data-predicate="true">
 <article class="skrubview-wrapper">
-    {% set selected_cols_id = "{}_selected_cols_box".format(report_id) %}
     <div class="skrubview-flex skrubview-wrapper-vert">
         <div class="skrubview-box">
         <pre class="selected-columns-box" id="{{ selected_cols_id }}"></pre>
@@ -40,3 +42,7 @@ <h3>Constant columns</h3>
         {% endfor %}
     </div>
 </article>
+<div class="skrubview-text skrubview-announcement skrubview-wrapper">
+    No columns match the selected filter: <strong class="skrubview-selected-filter-display"></strong>. Change the column filter in the dropdown menu above to display some columns.
+</div>
+</div>

src/skrubview/_data/templates/skrubview.js

@@ -229,8 +229,10 @@ function onFilterChange(colFilterId) {
     if (!acceptedCols.includes(tableElem.dataset.selectedColumn)){
         clearTableCellSelection(tableElem);
     }
-    const tableToggle = reportElem.querySelector(".skrubview-table-sample-toggle");
-    tableToggle.dataset.predicate = acceptedCols.length === 0 ? "false": "true";
-    const filterDisplay = tableToggle.querySelector(".skrubview-selected-filter-display");
-    filterDisplay.textContent = '"' + colFilters[filterName]["display_name"] + '"';
+    for (let toggleSelector of [".skrubview-table-sample-toggle", ".skrubview-column-summaries-toggle"]){
+        const toggle = reportElem.querySelector(toggleSelector);
+        toggle.dataset.predicate = acceptedCols.length === 0 ? "false": "true";
+        const filterDisplay = toggle.querySelector(".skrubview-selected-filter-display");
+        filterDisplay.textContent = '"' + colFilters[filterName]["display_name"] + '"';
+    }
 }