diff --git a/src/skrubview/_data/templates/column-filters.html b/src/skrubview/_data/templates/column-filters.html index c7989d9..e40b74b 100644 --- a/src/skrubview/_data/templates/column-filters.html +++ b/src/skrubview/_data/templates/column-filters.html @@ -1,12 +1,17 @@ + {% set col_filter_id = "{}_col_filter".format(report_id) %} +
- {% for filter_name in column_filters %} - + {% endfor %}
diff --git a/src/skrubview/_data/templates/no-filter-matches.html b/src/skrubview/_data/templates/no-filter-matches.html index c65afed..a4c10c6 100644 --- a/src/skrubview/_data/templates/no-filter-matches.html +++ b/src/skrubview/_data/templates/no-filter-matches.html @@ -1 +1,6 @@ -No columns match the selected filter: . Change the column filter in the dropdown menu above to display some columns. +

+No columns match the selected filter: . You can change the column filter in the dropdown menu above. +

+

+ . +

diff --git a/src/skrubview/_data/templates/skrubview.js b/src/skrubview/_data/templates/skrubview.js index abd0b1a..54ed20c 100644 --- a/src/skrubview/_data/templates/skrubview.js +++ b/src/skrubview/_data/templates/skrubview.js @@ -233,7 +233,7 @@ function onFilterChange(colFilterId) { } else { elem.dataset.isExcludedByFilter = ""; } - }) + }); document.getElementById(`${reportId}_display_n_columns`).textContent = acceptedCols .length.toString(); const tableElem = reportElem.querySelector(".skrubview-dataframe-sample-table"); @@ -250,3 +250,10 @@ function onFilterChange(colFilterId) { filterDisplay.textContent = '"' + colFilters[filterName]["display_name"] + '"'; } } + +function clearColFilter(event){ + const reportElem = event.target.closest(".skrubview-report"); + const selectElem = reportElem.querySelector(".skrubview-col-filter-select"); + selectElem.value = "all()"; + onFilterChange(selectElem.id); +}