clear table selection if not matched by filter

skrub-data · Jun 27, 2024 · 9a68b61 · 9a68b61
1 parent 9def553
commit 9a68b61
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/skrubview/_data/templates/dataframe-sample.html b/src/skrubview/_data/templates/dataframe-sample.html
@@ -7,7 +7,7 @@
     {% include "top-bar.html" %}
 
     <div class="skrubview-horizontal-scroll">
-        <table class="pure-table pure-table-striped" id="{{ table_id }}" data-top-bar-id="{{ top_bar_display_id }}" data-report-id="{{ report_id }}">
+        <table class="pure-table pure-table-striped skrubview-dataframe-sample-table" id="{{ table_id }}" data-top-bar-id="{{ top_bar_display_id }}" data-report-id="{{ report_id }}">
             <thead>
                 <tr>
                     {% for idx in range(summary.head.header.__len__()) %}

diff --git a/src/skrubview/_data/templates/skrubview.js b/src/skrubview/_data/templates/skrubview.js
@@ -115,17 +115,18 @@ function updateSiblingBarContents(event) {
 function displayValue(event) {
     const elem = event.target;
     const table = document.getElementById(elem.dataset.parentTableId);
+    table.setAttribute("data-selected-column", elem.dataset.colNameStr);
     table.querySelectorAll(".skrubview-table-cell").forEach(cell => {
         cell.removeAttribute("data-is-selected");
     });
     elem.setAttribute("data-is-selected", "");
 
     const topBarId = table.dataset.topBarId;
     const bar = document.getElementById(topBarId);
-    bar.setAttribute(`data-content-table-cell-value`, elem.dataset.valueStr);
-    bar.setAttribute(`data-content-table-cell-repr`, elem.dataset.valueRepr);
-    bar.setAttribute(`data-content-table-column-name`, elem.dataset.colNameStr);
-    bar.setAttribute(`data-content-table-column-name-repr`, elem.dataset.colNameRepr);
+    bar.setAttribute("data-content-table-cell-value", elem.dataset.valueStr);
+    bar.setAttribute("data-content-table-cell-repr", elem.dataset.valueRepr);
+    bar.setAttribute("data-content-table-column-name", elem.dataset.colNameStr);
+    bar.setAttribute("data-content-table-column-name-repr", elem.dataset.colNameRepr);
 
     const snippet = filterSnippet(elem.dataset.columnNameRepr,
         elem.dataset.valueRepr,
@@ -138,6 +139,19 @@ function displayValue(event) {
     updateBarContent(topBarId);
 }
 
+function clearTableCellSelection(tableElem){
+    tableElem.querySelectorAll(".skrubview-table-cell").forEach(cell => {cell.removeAttribute("data-is-selected");});
+    tableElem.removeAttribute("data-selected-cell");
+    const topBarId = tableElem.dataset.topBarId;
+    const bar = document.getElementById(topBarId);
+    bar.removeAttribute("data-content-table-cell-value");
+    bar.removeAttribute("data-content-table-cell-repr");
+    bar.removeAttribute("data-content-table-column-name");
+    bar.removeAttribute("data-content-table-column-name-repr");
+    bar.removeAttribute("data-content-table-cell-filter");
+    updateBarContent(topBarId);
+}
+
 function displayFirstCellValue(event){
     const header = event.target;
     const idx = header.dataset.columnIdx;
@@ -189,4 +203,8 @@ function onFilterChange(colFilterId) {
         }
     })
     document.getElementById(`${reportId}_display_n_columns`).textContent = acceptedCols.length.toString();
+    const tableElem = reportElem.querySelector(".skrubview-dataframe-sample-table");
+    if (!acceptedCols.includes(tableElem.dataset.selectedColumn)){
+        clearTableCellSelection(tableElem);
+    }
 }