From 261afb848f8ee6f6e36f20b709468aecfbccf172 Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Tue, 24 Sep 2019 16:49:04 +0200
Subject: [PATCH 1/2] feat: highlight selected rows, columns or both

---
 ipysheet/sheet.py |  2 ++
 js/src/sheet.ts   | 11 ++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ipysheet/sheet.py b/ipysheet/sheet.py
index 5e17f01..e95151d 100644
--- a/ipysheet/sheet.py
+++ b/ipysheet/sheet.py
@@ -101,6 +101,8 @@ class Sheet(widgets.DOMWidget):
     column_resizing = Bool(True).tag(sync=True)
     row_resizing = Bool(True).tag(sync=True)
     search_token = Unicode('').tag(sync=True)
+    highlight_selected_rows = Bool(False).tag(sync=True)
+    highlight_selected_columns = Bool(False).tag(sync=True)
 
     layout = LayoutTraitType(kw=dict(height='auto', width='auto')).tag(sync=True, **widgets.widget_serialization)
 
diff --git a/js/src/sheet.ts b/js/src/sheet.ts
index cd8a178..cf8049b 100644
--- a/js/src/sheet.ts
+++ b/js/src/sheet.ts
@@ -285,6 +285,13 @@ let SheetView = widgets.DOMWidgetView.extend({
             this.model.on('change:column_headers change:row_headers', this._update_hot_settings, this);
             this.model.on('change:stretch_headers change:column_width', this._update_hot_settings, this);
             this.model.on('change:column_resizing change:row_resizing', this._update_hot_settings, this);
+            this.model.on('change:highlight_selected_rows change:highlight_selected_columns', () => {
+                [...this.hot.selection.highlight.headers.values()].forEach(highlight => {
+                    highlight.settings.highlightRowClassName = this.model.get('highlight_selected_rows')  ? 'area' : undefined;
+                    highlight.settings.highlightColumnClassName = this.model.get('highlight_selected_columns')  ? 'area' : undefined;
+                });
+                this.hot.render();
+            });
             this.model.on('change:search_token', this._search, this);
             this._search()
         });
@@ -404,7 +411,9 @@ let SheetView = widgets.DOMWidgetView.extend({
             stretchH: this.model.get('stretch_headers'),
             colWidths: this.model.get('column_width') || undefined,
             manualColumnResize: this.model.get('column_resizing'),
-            manualRowResize: this.model.get('row_resizing')
+            manualRowResize: this.model.get('row_resizing'),
+            currentRowClassName: this.model.get('highlight_selected_rows')    ? 'area' : undefined,
+            currentColClassName: this.model.get('highlight_selected_columns') ? 'area' : undefined
         };
     },
     _search: function(render=true, ignore_empty_string=false) {

From ddc3c51bf608fa09f241229787cdf3acb80c876d Mon Sep 17 00:00:00 2001
From: "Maarten A. Breddels" <maartenbreddels@gmail.com>
Date: Tue, 24 Sep 2019 16:50:04 +0200
Subject: [PATCH 2/2] fix(css): change selection color and opacity to have
 better visibility in dark theme

---
 js/css/custom.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/js/css/custom.css b/js/css/custom.css
index 28ba866..b6c7887 100644
--- a/js/css/custom.css
+++ b/js/css/custom.css
@@ -94,7 +94,7 @@
 .p-Widget .handsontable td.area-5:before,
 .p-Widget .handsontable td.area-6:before,
 .p-Widget .handsontable td.area-7:before {
-  background-color: var(--jp-brand-color2);
+  background-color: var(--jp-brand-color1);
 }
 
 .p-Widget .handsontable tbody th.ht__highlight,
@@ -164,6 +164,10 @@
   border-color: var(--jp-layout-color0) !important;
 }
 
+.p-Widget .handsontable td.area::before {
+  opacity: .2;
+}
+
 /* Pikaday styling */
 .pika-single {
     color: var(--jp-content-font-color0);