Fix CSS issues for large column sets which trigger scroll.

finos · texodus · Jan 22, 2018 · Jan 10, 2018 · Jan 16, 2018 · Jan 16, 2018
commit 2d07b2d50804f95fcf1e5ec830bd8ee6e8bac3a7
diff --git a/packages/perspective-viewer-hypergrid/src/js/hypergrid-tree-cell-renderer.js b/packages/perspective-viewer-hypergrid/src/js/hypergrid-tree-cell-renderer.js
@@ -159,16 +159,16 @@ export function treeLineRendererPaint(gc, config) {
     gc.closePath();
 
     // render message text
-    var cellTextOffset = xOffset + lineNodeSpace + (2 * nodeRadius) + 3;
-    config.minWidth = cellTextOffset + gc.getTextWidth(value) + 15;
-    var metrics = gc.getTextWidthTruncated(value, width - cellTextOffset + (x - 3), true);
-    var yOffset = y + height / 2;
 
     gc.globalAlpha = 1.0;
     gc.fillStyle = config.isSelected ? config.foregroundSelectionColor : config.color;
     gc.textAlign = 'start';
     gc.textBaseline = 'middle';
     gc.font = config.isSelected ? config.foregroundSelectionFont : config.treeHeaderFont;
+    var cellTextOffset = xOffset + lineNodeSpace + (2 * nodeRadius) + 3;
+    config.minWidth = cellTextOffset + gc.getTextWidth(value) + 15;
+    var metrics = gc.getTextWidthTruncated(value, width - cellTextOffset + (x - 3), true);
+    var yOffset = y + height / 2;
     gc.fillText(metrics.string ? metrics.string : value, cellTextOffset, yOffset);
     gc.restore();
 }

diff --git a/packages/perspective-viewer-hypergrid/test/results/results.json b/packages/perspective-viewer-hypergrid/test/results/results.json
@@ -1,13 +1,13 @@
 {
     "superstore.html/shows a grid without any settings applied.": "45055f06b933226373579c5e3b03608f",
-    "superstore.html/pivots by a row.": "95ffdf460138b9f2aab4d9e0362d281b",
-    "superstore.html/pivots by two rows.": "2f5f9fe6a82fca7e5320d9996eeae559",
-    "superstore.html/pivots by a row and a column.": "8b46d8d101f643e1caeb21286bb88e32",
-    "superstore.html/pivots by two rows and two columns.": "570d8ffd63c3c2c7ebdd0b13e0aa5543",
+    "superstore.html/pivots by a row.": "02d1622170029c721ef995904e13330c",
+    "superstore.html/pivots by two rows.": "fd0b7398c8d49d790ffcf04f9902f3a8",
+    "superstore.html/pivots by a row and a column.": "88656add4d88bd3abf76496f4ec2f9d7",
+    "superstore.html/pivots by two rows and two columns.": "e987eee39602ed26060cbb60f7de0618",
     "superstore.html/sorts by a numeric column.": "b1cab634c6f028aadca4cb80d45da0d2",
     "superstore.html/sorts by an alpha column.": "75f2524a106af8f9f5a032561cf8ffbd",
     "superstore.html/displays visible columns.": "5e92e91cfbfa7dd864e3381bd834dfab",
-    "superstore.html/resets viewable area when the logical size expands.": "4f9d1618cff5784f37df5b2df59cb6f4",
+    "superstore.html/resets viewable area when the logical size expands.": "cde73369571f2d991f683add8b894ae3",
     "superstore.html/selecting a column does not log a context deleted error.": "2563581d3556c4576745443c8498bea9",
     "superstore.html/resets viewable area when the physical size expands.": "b5e7dffa2272e6b6daf465a9af34e2bc"
 }
diff --git a/packages/perspective-viewer/src/html/view.html b/packages/perspective-viewer/src/html/view.html
@@ -11,7 +11,7 @@
 
     <div id="app">
         <div id='side_panel' class="column fixed noselect">
-            <div>
+            <div id="vis_selector_container">
                 <div style="width:25px;margin-left:5px"></div>
                 <select id="vis_selector">
                 </select>

diff --git a/packages/perspective-viewer/src/js/view.js b/packages/perspective-viewer/src/js/view.js
@@ -295,6 +295,11 @@ async function loadTable(table) {
             this._active_columns.appendChild(active_row);
         }
     }
+    if (cols.length === shown.length) {
+        this._inactive_columns.style.display = 'none';
+    } else {
+        this._inactive_columns.style.display = 'block';
+    }
 
     this._filter_input.innerHTML = "";
     this._update();
@@ -555,6 +560,11 @@ registerElement(template, {
             this.setAttribute('columns', JSON.stringify(columns));
             let idx = 1;
             const lis = Array.prototype.slice.call(this.querySelectorAll("#inactive_columns perspective-row"));
+            if (columns.length === lis.length) {
+                this._inactive_columns.style.display = 'none';
+            } else {
+                this._inactive_columns.style.display = 'block';
+            }
             lis.forEach(x => {
                 const index = columns.indexOf(x.getAttribute('name'));
                 if (index === -1) {

diff --git a/packages/perspective-viewer/src/less/view.less b/packages/perspective-viewer/src/less/view.less
@@ -104,8 +104,15 @@ perspective-viewer {
         margin-top: 8px;
         overflow-y: auto;
     }
+
+    #inactive_columns {
+        min-height: 20%;
+        flex-shrink: 1000;
+    }
+
     #divider {
         background-color: #CCC;
+        min-height: 2px;
         height: 2px;
         margin: 15px 13px 15px 13px;
         margin-bottom: 5px;
@@ -266,6 +273,10 @@ perspective-viewer {
         display: flex;
     }
 
+    #vis_selector_container {
+        min-height: 29px;
+    }
+
     #vis_selector {
         flex-grow: 1;
         margin-top: 5px;

diff --git a/packages/perspective-viewer/test/results/results.json b/packages/perspective-viewer/test/results/results.json
@@ -1,9 +1,9 @@
 {
     "superstore.html/shows a grid without any settings applied.": "62f58d51fe9982d5ca97ec3918ccfe9d",
-    "superstore.html/pivots by a row.": "f46713763478eecb75c2e54fcf2ee9d4",
-    "superstore.html/pivots by two rows.": "c21dda81745dfa364ec73d8ee46a074a",
-    "superstore.html/pivots by a row and a column.": "4d6e52e61fbf43e6e649efaffe272c4d",
-    "superstore.html/pivots by two rows and two columns.": "d490b3e5152e3f34defb939e757e528d",
+    "superstore.html/pivots by a row.": "9d90435fb0038fd5c7b937add1b3daef",
+    "superstore.html/pivots by two rows.": "ffed18e53b9fa0037968f10995711644",
+    "superstore.html/pivots by a row and a column.": "551f259b4960e2a4bcb067396d59666a",
+    "superstore.html/pivots by two rows and two columns.": "94eb636829716456a6f3d578b66d5ab6",
     "superstore.html/sorts by a numeric column.": "d6c7644f33430b2292d9e8d59eb5604c",
     "superstore.html/sorts by an alpha column.": "449a90651fdb2b551a1bf1836c9f4b85",
     "superstore.html/displays visible columns.": "5c93ab09c5949037fda5314c56c85295"