arrow key navigation in sample table

CHANGES.rst

@@ -37,6 +37,9 @@ Minor changes
   ``pandas.info()`` ) in a table.
   :pr:`1056` by :user:`Jérôme Dockès <jeromedockes>`.
 
+* The selection in the TableReport's sample table can now be manipulated with
+  the keyboard. :pr:`1065` by :user:`Jérôme Dockès <jeromedockes>`.
+
 Release 0.3.0
 =============
 

examples/00_getting_started.py

@@ -6,6 +6,7 @@
 This guide showcases the features of ``skrub``, an open-source package that aims at
 bridging the gap between tabular data sources and machine-learning models.
 
+
 Much of ``skrub`` revolves around vectorizing, assembling, and encoding tabular data,
 to prepare data in a format that shallow or classic machine-learning models understand.
 """

skrub/_reporting/_data/templates/dataframe-sample.css

@@ -8,10 +8,6 @@
 /* The column containing the selected cell has green stripes. */
 /* The rest of the table has gray stripes added by pure.css */
 
-th[data-is-in-active-column] {
-    background-color: var(--darkgreen);
-}
-
 tr:nth-child(2n -1) .table-cell[data-is-in-active-column] {
     background-color: var(--mediumgreen);
 }
@@ -20,6 +16,9 @@ tr:nth-child(2n -1) .table-cell[data-is-in-active-column] {
     background-color: var(--lightgreen);
 }
 
+tr:nth-child(2n -1) th.table-cell[data-is-in-active-column] {
+    background-color: var(--darkgreen);
+}
 
 .table-cell[data-is-active] {
     outline: 2px dotted black;
@@ -53,3 +52,45 @@ tr:nth-child(2n -1) .table-cell[data-is-in-active-column] {
     justify-content: center;
     margin-bottom: var(--micro);
 }
+
+/* Information below the table: dimensions and keyboard shortcuts */
+
+.table-footer {
+    display: flex;
+    justify-content: space-between;
+    padding-top: var(--micro);
+}
+
+.keyboard-hints  {
+    display: none;
+    flex-basis: max(0px, min(50%, calc((50% - 35ch) * 99999)));
+    flex-shrink: 0;
+    min-width: 0px;
+    height: 2rem;
+    margin-bottom: -1.5rem;
+    margin-right: var(--micro);
+    overflow: hidden;
+    text-align: right;
+    vertical-align: center;
+}
+
+:has(.table-with-selectable-cells:focus-within) ~ .table-footer .keyboard-hints {
+    display: block;
+}
+
+.keyboard-key {
+    font-size: 0.75em;
+    font-family: var(--fontStack-monospace);
+    padding: 0 0.5em;
+    line-height: 1.8;
+    color: #444444;
+    border: 1px solid #cccccc;
+    border-bottom: 1px solid #bbbbbb;
+    box-shadow: inset 0 -1px 0 #bbbbbb;
+    border-radius: 0.2em;
+    min-width: 1em;
+    text-align: center;
+    margin: 0.1em;
+    display: inline-block;
+    vertical-align: center;
+}

skrub/_reporting/_data/templates/dataframe-sample.html

@@ -1,18 +1,32 @@
+{% macro kbd(text) %}
+<span class="keyboard-key">{{ text }}</span>
+{% endmacro %}
+
 <article class="wrapper" data-show-on="NON_EMPTY_COLUMN_FILTER_SELECTED"
     data-hide-on="EMPTY_COLUMN_FILTER_SELECTED">
     {% include "table-bar.html" %}
 
     <div class="horizontal-scroll">
-        <table class="pure-table pure-table-striped table-with-selectable-cells">
+        <table class="pure-table pure-table-striped table-with-selectable-cells"
+               data-manager="SampleTable"
+               data-n-head-rows="{{ summary['head']['data'].__len__() }}"
+               data-n-tail-rows="{{ summary['tail']['data'].__len__() }}"
+               data-n-cols="{{ summary.head.header.__len__() }}">
             <thead>
                 <tr>
                     {% for idx in range(summary.head.header.__len__()) %}
                     {% set column_name = summary.head.header[idx] %}
 
-                    <th scope="col" class="clickable ellided"
-                        data-manager="SampleTableHeader FilterableColumn"
+                    <th scope="col" class="clickable ellided table-cell"
+                        id="sample-table-cell-head-header-{{ idx }}"
+                        data-manager="SampleTableCell FilterableColumn"
                         data-column-name="{{ column_name }}"
-                        data-column-idx="{{ idx }}">{{ column_name }}</th>
+                        data-column-idx="{{ idx }}"
+                        data-row-idx-in-table-part="{{ -1 }}"
+                        data-table-part="head"
+                        data-value-str="{{ column_name.__str__() }}"
+                        data-value-repr="{{ column_name.__repr__() }}"
+                    >{{ column_name }}</th>
                     {% endfor %}
                 </tr>
             </thead>
@@ -35,11 +49,23 @@
         </table>
     </div>
 
-    <p>
+    <div class="table-footer">
+    <div>
         <strong>{{ summary.n_rows | format_number }}</strong> rows ✕
         <strong data-manager="ColumnFilterMatchCount"
             data-test="n-columns-display">{{ summary.n_columns | format_number }}</strong> columns.
-    </p>
+    </div>
+    <div class="keyboard-hints">
+        <div>
+            {{ kbd("Ctrl-C") }}
+            {{ kbd("←") }}
+            {{ kbd("↑") }}
+            {{ kbd("↓") }}
+            {{ kbd("→") }}
+            {{ kbd("Esc") }}
+        </div>
+    </div>
+    </div>
 
 
     <div class="column-summary-group columns-in-sample-tab">