From 79ca7e948c87b15b5daacfb0c66ddcd25d3d9d59 Mon Sep 17 00:00:00 2001
From: Andrew Stein <steinlink@gmail.com>
Date: Thu, 11 Jul 2019 14:41:20 -0400
Subject: [PATCH] Made side-panel resizable

---
 packages/perspective-viewer/src/html/viewer.html    |  1 +
 .../src/js/viewer/action_element.js                 | 13 +++++++++++++
 .../perspective-viewer/src/js/viewer/dom_element.js |  1 +
 packages/perspective-viewer/src/less/viewer.less    | 10 ++++++++++
 4 files changed, 25 insertions(+)

diff --git a/packages/perspective-viewer/src/html/viewer.html b/packages/perspective-viewer/src/html/viewer.html
index 3afacd2515..5b7ba60333 100644
--- a/packages/perspective-viewer/src/html/viewer.html
+++ b/packages/perspective-viewer/src/html/viewer.html
@@ -31,6 +31,7 @@
                 </div>
                 <perspective-computed-column></perspective-computed-column>
             </div>
+            <div id="resize_bar"></div>
         </div>
         <div class="column noselect">
             <div id='top_panel'>
diff --git a/packages/perspective-viewer/src/js/viewer/action_element.js b/packages/perspective-viewer/src/js/viewer/action_element.js
index cc10fd6820..72e03f7964 100644
--- a/packages/perspective-viewer/src/js/viewer/action_element.js
+++ b/packages/perspective-viewer/src/js/viewer/action_element.js
@@ -198,6 +198,18 @@ export class ActionElement extends DomElement {
         this.setAttribute("column-pivots", row_pivots);
     }
 
+    _resize_sidepanel() {
+        const resize = event => {
+            this._side_panel.style.width = `${event.clientX}px`;
+        };
+        const stop = () => {
+            document.removeEventListener("mousemove", resize);
+            document.removeEventListener("mouseup", stop);
+        };
+        document.addEventListener("mousemove", resize);
+        document.addEventListener("mouseup", stop);
+    }
+
     // most of these are drag and drop handlers - how to clean up?
     _register_callbacks() {
         this._sort.addEventListener("drop", drop.bind(this));
@@ -236,6 +248,7 @@ export class ActionElement extends DomElement {
         this._download_button.addEventListener("click", event => this.download(event.shiftKey));
         this._transpose_button.addEventListener("click", this._transpose.bind(this));
         this._drop_target.addEventListener("dragover", dragover.bind(this));
+        this._resize_bar.addEventListener("mousedown", this._resize_sidepanel.bind(this));
 
         this._vis_selector.addEventListener("change", () => {
             this.setAttribute("plugin", this._vis_selector.value);
diff --git a/packages/perspective-viewer/src/js/viewer/dom_element.js b/packages/perspective-viewer/src/js/viewer/dom_element.js
index 54d366fcdd..62df4ef007 100644
--- a/packages/perspective-viewer/src/js/viewer/dom_element.js
+++ b/packages/perspective-viewer/src/js/viewer/dom_element.js
@@ -270,6 +270,7 @@ export class DomElement extends PerspectiveElement {
         this._plugin_information_action = this.shadowRoot.querySelector(".plugin_information__action");
         this._plugin_information_dismiss = this.shadowRoot.querySelector(".plugin_information__action--dismiss");
         this._plugin_information_message = this.shadowRoot.querySelector("#plugin_information_count");
+        this._resize_bar = this.shadowRoot.querySelector("#resize_bar");
     }
 
     // sets state, manipulates DOM
diff --git a/packages/perspective-viewer/src/less/viewer.less b/packages/perspective-viewer/src/less/viewer.less
index c4d184f455..b2684b6d5f 100644
--- a/packages/perspective-viewer/src/less/viewer.less
+++ b/packages/perspective-viewer/src/less/viewer.less
@@ -413,6 +413,7 @@
         }
     }
     #side_panel {
+        position: relative;
         flex: 0 0 auto;
         padding: var(--side_panel--padding, 10px 10px 0px 11px);
     }
@@ -438,4 +439,13 @@
             color: var(--button-hover--color, inherit);
         }
     }
+
+    #resize_bar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 8px;
+        cursor: col-resize;
+    }
 }