highlight column corresponding to selected cell

Author: jeromedockes

src/skrubview/_data/templates/base.css

@@ -4,6 +4,7 @@
     --skrubview-large: 1.2rem;
     --skrubview-huge: 1.5rem;
     --skrubview-max-content-width: 45rem;
+    --skrubview-yellowish: #ffffaa;
 }
 
 {{ report_id_selector }}.skrubview-report summary > * {
@@ -212,7 +213,7 @@
 }
 
 {{ report_id_selector }}.skrubview-report .skrubview-table-cell[data-is-selected] {
-    background-color: #ffffaa;
+    background-color: var(--skrubview-yellowish);
     border: 1px solid black;
 }
 

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

@@ -1,5 +1,11 @@
 {% from "utils.j2" import compact_id, collapse_const_id with context %}
 
+{{ report_id_selector }}.skrubview-report .skrubview-column-summary[data-is-highlighted] .skrubview-card-header {
+    --header-color: var(--skrubview-yellowish);
+}
+
+
+
 {{ report_id_selector }}.skrubview-report .skrubview-float-end {
     margin-inline-start: auto;
     padding-inline-start: var(--skrubview-tiny);

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

@@ -2,7 +2,7 @@
 
 <article class="skrubview-wrapper">
     <div class="skrubview-horizontal-scroll">
-        <table class="pure-table pure-table-striped" id="{{ table_id }}" data-powerbar-id="{{ powerbar_display_id }}">
+        <table class="pure-table pure-table-striped" id="{{ table_id }}" data-powerbar-id="{{ powerbar_display_id }}" data-report-id="{{ report_id }}">
             <thead>
                 <tr>
                     {% for column_name in summary.head.header %}
@@ -14,7 +14,7 @@
                 {% for row in summary.head.data %}
                 <tr>
                     {% for idx in range(row.__len__()) %}
-                    <td class="skrubview-table-cell skrubview-ellided-short" data-parent-table-id="{{ table_id }}" data-display-box-id="{{ table_id }}_value_box" data-filter-snippet-box-id="{{ table_id }}_filter_snippet_box" data-value-repr-box-id="{{ table_id }}_value_repr_box" data-column-name-repr="{{ summary.head.header[idx].__repr__() }}" data-value-str="{{ row[idx].__str__() }}" data-value-repr="{{ row[idx].__repr__() }}" {%- if row[idx] is none -%} data-value-is-none="" {%- endif -%} data-dataframe-module="{{ summary.dataframe_module }}" onclick="displayValue(event)">
+                    <td class="skrubview-table-cell skrubview-ellided-short" data-parent-table-id="{{ table_id }}" data-display-box-id="{{ table_id }}_value_box" data-filter-snippet-box-id="{{ table_id }}_filter_snippet_box" data-value-repr-box-id="{{ table_id }}_value_repr_box" data-column-idx="{{ idx }}" data-column-name-repr="{{ summary.head.header[idx].__repr__() }}" data-value-str="{{ row[idx].__str__() }}" data-value-repr="{{ row[idx].__repr__() }}" {%- if row[idx] is none -%} data-value-is-none="" {%- endif -%} data-dataframe-module="{{ summary.dataframe_module }}" onclick="displayValue(event)">
                         {%- if row[idx] is not none -%}
                         {{ row[idx] }}
                         {%- endif -%}
@@ -34,7 +34,7 @@
                 {% for row in summary.tail.data %}
                 <tr>
                     {% for idx in range(row.__len__()) %}
-                    <td class="skrubview-table-cell skrubview-ellided-short" data-parent-table-id="{{ table_id }}" data-display-box-id="{{ table_id }}_value_box" data-filter-snippet-box-id="{{ table_id }}_filter_snippet_box" data-value-repr-box-id="{{ table_id }}_value_repr_box" data-column-name-repr="{{ summary.head.header[idx].__repr__() }}" data-value-str="{{ row[idx].__str__() }}" data-value-repr="{{ row[idx].__repr__() }}" {%- if row[idx] is none -%} data-value-is-none="" {%- endif -%} data-dataframe-module="{{ summary.dataframe_module }}" onclick="displayValue(event)">
+                    <td class="skrubview-table-cell skrubview-ellided-short" data-parent-table-id="{{ table_id }}" data-display-box-id="{{ table_id }}_value_box" data-filter-snippet-box-id="{{ table_id }}_filter_snippet_box" data-value-repr-box-id="{{ table_id }}_value_repr_box" data-column-idx="{{ idx }}" data-column-name-repr="{{ summary.head.header[idx].__repr__() }}" data-value-str="{{ row[idx].__str__() }}" data-value-repr="{{ row[idx].__repr__() }}" {%- if row[idx] is none -%} data-value-is-none="" {%- endif -%} data-dataframe-module="{{ summary.dataframe_module }}" onclick="displayValue(event)">
                         {%- if row[idx] is not none -%}
                         {{ row[idx] }}
                         {%- endif -%}

src/skrubview/_data/templates/skrubview.js

@@ -1,3 +1,12 @@
+function highlightColCard(reportId, colIdx){
+    const reportElem = document.getElementById(reportId);
+    const allCols = reportElem.querySelectorAll(".skrubview-column-summary");
+    allCols.forEach(col => {col.removeAttribute("data-is-highlighted");});
+    const targetCol = document.getElementById(`${reportId}_col_${colIdx}`);
+    targetCol.dataset.isHighlighted = "";
+}
+
+
 function updateColSelection(event) {
     updateSelectedColsSnippet(event.target.dataset.reportId);
 }
@@ -125,7 +134,6 @@ function updateSiblingBarContents(event) {
 }
 
 
-
 function displayValue(event) {
     const elem = event.target;
     const table = document.getElementById(elem.dataset.parentTableId);
@@ -147,4 +155,6 @@ function displayValue(event) {
 
     selectOneOf(powerbarId, ["table-cell-value", "table-cell-repr", "table-cell-filter"]);
     updateBarContent(powerbarId);
+
+    highlightColCard(table.dataset.reportId, elem.dataset.columnIdx);
 }