Merge pull request #175 from jpmorganchase/responsive-sidebar

texodus · web-flow · commit 9be3d2b385cc · 2018-07-31T22:02:11.000-04:00
Responsive sidebar
diff --git a/packages/perspective-examples/src/css/demo.css b/packages/perspective-examples/src/css/demo.css
@@ -14,3 +14,18 @@ perspective-viewer {
     right: 0;
     bottom: 0;
 }
+
+@media (max-width: 600px) {
+    html {
+        overflow: hidden;
+    }
+
+    body {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+        touch-action: none;
+    }
+}
diff --git a/packages/perspective-examples/src/html/citibike.html b/packages/perspective-examples/src/html/citibike.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="mobile_fix.js"></script>
         <script src="perspective.view.js"></script>
diff --git a/packages/perspective-examples/src/html/coincap.html b/packages/perspective-examples/src/html/coincap.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="mobile_fix.js"></script>
         <script src="perspective.view.js"></script>
diff --git a/packages/perspective-examples/src/html/csv.html b/packages/perspective-examples/src/html/csv.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="mobile_fix.js"></script>
         <script src="perspective.view.js"></script>
diff --git a/packages/perspective-examples/src/html/node.html b/packages/perspective-examples/src/html/node.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="mobile_fix.js"></script>
         <script src="perspective.view.js"></script>
diff --git a/packages/perspective-examples/src/html/streaming.html b/packages/perspective-examples/src/html/streaming.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="mobile_fix.js"></script>
         <script src="perspective.view.js"></script>
diff --git a/packages/perspective-examples/src/html/superstore-arrow.html b/packages/perspective-examples/src/html/superstore-arrow.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="perspective.view.js" preload></script>
         <script src="hypergrid.plugin.js"></script>
diff --git a/packages/perspective-examples/src/html/superstore.html b/packages/perspective-examples/src/html/superstore.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="mobile_fix.js"></script>
         <script src="perspective.view.js"></script>
diff --git a/packages/perspective-examples/src/html/theme-material-dark.html b/packages/perspective-examples/src/html/theme-material-dark.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="perspective.view.js" preload></script>
         <script src="hypergrid.plugin.js"></script>
diff --git a/packages/perspective-examples/src/html/theme-material.html b/packages/perspective-examples/src/html/theme-material.html
@@ -11,7 +11,7 @@
 <html>
     <head>
 
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 
         <script src="perspective.view.js" preload></script>
         <script src="hypergrid.plugin.js"></script>
diff --git a/packages/perspective-viewer/src/html/row.html b/packages/perspective-viewer/src/html/row.html
@@ -15,7 +15,7 @@
             <span id="sort_order"></span>
             <select id="column_aggregate" class="string"></select>
             <select id="filter_operator"></select>
-            <input id="filter_operand" placeholder="Value"></input>
+            <input id="filter_operand" placeholder="Value"/>
             <span id='row_close'>&#x2715;</span>                
         </div>
     </div>
diff --git a/packages/perspective-viewer/src/html/view.html b/packages/perspective-viewer/src/html/view.html
@@ -15,9 +15,11 @@
                 <select id="vis_selector">
                 </select>
             </div>
-            <ul id='active_columns' ondragenter="dragEnter(event)"></ul>
-            <div id='divider'></div>
-            <ul id='inactive_columns'></ul>
+            <div id="columns_container">
+                <ul id='active_columns' ondragenter="dragEnter(event)"></ul>
+                <div id='divider'></div>
+                <ul id='inactive_columns'></ul>
+            </div>
         </div>
         <div class="column noselect">
             <div id='top_panel'>
diff --git a/packages/perspective-viewer/src/js/view.js b/packages/perspective-viewer/src/js/view.js
@@ -98,7 +98,7 @@ function calc_index(event) {
         for (let cidx in this._active_columns.children) {
             let child = this._active_columns.children[cidx];
             if (child.offsetTop + child.offsetHeight > event.offsetY + this._active_columns.scrollTop) {
-                return cidx;
+                return parseInt(cidx);
             }
         }
         return this._active_columns.children.length;
@@ -397,7 +397,7 @@ async function loadTable(table) {
             let row = new_row.call(this, x, schema[x], aggregate);
             this._inactive_columns.appendChild(row);
         }
-        this._set_column_defaults()
+        this._set_column_defaults();
         shown = JSON.parse(this.getAttribute('columns') || "[]").filter(x => cols.indexOf(x) > -1);
         for (let x in cols) {
             if (shown.indexOf(x) !== -1) {
@@ -788,6 +788,8 @@ class ViewPrivate extends HTMLElement {
         this._row_pivots = this.querySelector('#row_pivots');
         this._column_pivots = this.querySelector('#column_pivots');
         this._datavis = this.querySelector('#pivot_chart');
+        this._columns_container = this.querySelector('#columns_container');
+        this._side_panel_divider = this.querySelector('#columns_container > #divider');
         this._active_columns = this.querySelector('#active_columns');
         this._inactive_columns = this.querySelector('#inactive_columns');
         this._inner_drop_target = this.querySelector('#drop_target_inner');
@@ -863,6 +865,9 @@ class View extends ViewPrivate {
         this._register_debounce_instance();
         this._slaves = [];
         this._show_config = true;
+        const resize_handler = _.debounce(this.notifyResize, 250).bind(this);
+        window.addEventListener('load', resize_handler);
+        window.addEventListener('resize', resize_handler);
     }
 
     connectedCallback() {
@@ -1112,7 +1117,7 @@ class View extends ViewPrivate {
     /**
      * This element's `perspective` worker instance.  This property is not 
      * reflected as an HTML attribute, and is readonly;  it can be effectively 
-     * set however by calliong the `load() method with a `perspective.table` 
+     * set however by calling the `load() method with a `perspective.table`
      * instance from the preferred worker.
      * 
      * @readonly
@@ -1202,10 +1207,16 @@ class View extends ViewPrivate {
     }
       
     /**
-     * Invalidate this element's dimensions and redraw.
+     * Determine whether to reflow the viewer and redraw.
      * 
      */
     notifyResize() {
+        if (this.clientHeight < 500) {
+            this.querySelector('#app').classList.add('columns_horizontal');
+        } else {
+            this.querySelector('#app').classList.remove('columns_horizontal');
+        }
+
         if (!document.hidden && this.offsetParent && document.contains(this)) {
             this._plugin.resize.call(this);
         }
@@ -1246,6 +1257,9 @@ class View extends ViewPrivate {
         if (this._plugin.delete) {
             this._plugin.delete.call(this);
         }
+        const resize_handler = _.debounce(this.notifyResize, 250).bind(this);
+        window.removeEventListener('load', resize_handler);
+        window.removeEventListener('resize', resize_handler);
         return x;
     }
     
diff --git a/packages/perspective-viewer/src/less/default.less b/packages/perspective-viewer/src/less/default.less
@@ -122,17 +122,57 @@ perspective-viewer {
         transition: height 0.2s;
     }
 
-    #side_panel #active_columns perspective-row .row_draggable {
-        .bordered();
-        background-color: white;
+    #app.columns_horizontal {
+        #columns_container {
+            flex-direction: row-reverse;
+        }
+        #active_columns, #inactive_columns {
+            display: flex;
+            flex-direction: column;
+            flex: 1 !important;
+        }
+        #active_columns {
+            padding-right: 8px;
+            perspective-row {
+                div#psp_row {
+                    margin-right: 2px;
+                }
+            }
+        }
+
+        #side_panel #divider {
+            display: none;
+        }
     }
 
-    #side_panel perspective-row .is_visible {
-        color: #999;
+    #columns_container {
+        height: 100%;
+        flex-direction: column;
+
+        #active_columns, #inactive_columns {
+            border: none !important;
+        }
+
+        #active_columns perspective-row .row_draggable {
+            .bordered();
+            background-color: white;
+            overflow: hidden;
+        }
+
+        #active_columns perspective-row[drop-target] {
+            .row_draggable {
+                background-color: rgb(240, 240, 255) !important;
+                border: 1px solid #1078d1 !important;
+            }
+        }
+
+        #inactive_columns perspective-row .is_visible::before {
+            content: "\25CB";
+        }
     }
 
-    #side_panel #inactive_columns perspective-row .is_visible::before {
-        content: "\25CB";
+    #side_panel perspective-row .is_visible {
+        color: #999;
     }
 
     #side_panel perspective-row 
@@ -145,12 +185,7 @@ perspective-viewer {
         transition: background-color 0.2s, border-color 0.2s;
     }
 
-    #side_panel #active_columns perspective-row[drop-target] {
-        .row_draggable {
-            background-color: rgb(240, 240, 255) !important;
-            border: 1px solid #1078d1 !important;
-        }
-    }
+    #side_panel
 
     #filters perspective-row {
 
@@ -246,10 +281,6 @@ perspective-viewer {
         background-color: white;
     }
 
-    #active_columns, #inactive_columns {
-        border: none !important;
-    }
-
     #divider {
         min-height: 2px;
         height: 2px;
diff --git a/packages/perspective-viewer/src/less/material.dark.less b/packages/perspective-viewer/src/less/material.dark.less
diff --git a/packages/perspective-viewer/src/less/material.less b/packages/perspective-viewer/src/less/material.less
diff --git a/packages/perspective-viewer/test/js/responsive_tests.js b/packages/perspective-viewer/test/js/responsive_tests.js
diff --git a/packages/perspective-viewer/test/js/superstore.spec.js b/packages/perspective-viewer/test/js/superstore.spec.js
diff --git a/packages/perspective-viewer/test/js/utils.js b/packages/perspective-viewer/test/js/utils.js
diff --git a/packages/perspective-viewer/test/results/results.json b/packages/perspective-viewer/test/results/results.json
