Made side-panel resizable

Author: texodus

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'>

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);

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

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;
+    }
 }