first cut of virtualised grid

ui/app/index.html

@@ -6,27 +6,19 @@
   ~  | |_| | |_| |  __/\__ \ |_| |_| | |_) |
   ~   \__\_\\__,_|\___||___/\__|____/|____/
   ~
-  ~ The MIT License (MIT)
+  ~ Copyright (c) 2014-2016 Appsicle
   ~
-  ~ Copyright (C) 2016 Appsicle
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
   ~
-  ~ Permission is hereby granted, free of charge, to any person obtaining a
-  ~ copy of this software and associated documentation files (the "Software"),
-  ~ to deal in the Software without restriction, including without limitation
-  ~ the rights to use, copy, modify, merge, publish, distribute, sublicense,
-  ~ and/or sell copies of the Software, and to permit persons to whom the
-  ~ Software is furnished to do so, subject to the following conditions:
+  ~ http://www.apache.org/licenses/LICENSE-2.0
   ~
-  ~ The above copyright notice and this permission notice shall be included in
-  ~ all copies or substantial portions of the Software.
-  ~
-  ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-  ~ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-  ~ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-  ~ IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR
-  ~ ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
-  ~ CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-  ~ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
 
 <!--suppress HtmlUnknownTag -->
@@ -150,7 +142,12 @@
                 <div class="col-lg-12">
                     <div class="ibox">
                         <div class="ibox-content">
-                            <div id="grid"></div>
+                            <div id="grid">
+                                <div class="qg-header-row"></div>
+                                <div class="qg-viewport">
+                                    <div class="qg-canvas"></div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>

ui/app/scripts/grid.js

@@ -5,27 +5,19 @@
  *  | |_| | |_| |  __/\__ \ |_| |_| | |_) |
  *   \__\_\\__,_|\___||___/\__|____/|____/
  *
- * The MIT License (MIT)
+ * Copyright (c) 2014-2016 Appsicle
  *
- * Copyright (C) 2016 Appsicle
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
  *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
+ * http://www.apache.org/licenses/LICENSE-2.0
  *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR
- * ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
- * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  ******************************************************************************/
 
 /*globals $:false */
@@ -39,19 +31,99 @@
         };
         var $style;
         var div = $(this);
+        var viewport;
         var canvas;
         var header;
         var colMax;
+        var data;
+
+        // viewport height
+        var vp = 400;
+        // row height in px
+        var rh = 30;
+        // virtual row count in grid
+        var r;
+        // max virtual y (height) of grid canvas
+        var yMax;
+        // current virtual y of grid canvas
+        var y;
+        // actual height of grid canvas
+        var h;
+        // last scroll top
+        var top;
+        // yMax / h - ratio between virtual and actual height
+        var M;
+        // offset to bring virtual y inline with actual y
+        var o;
+        // row div cache
+        var rows = {};
+
+        function addRows(n) {
+            r += n;
+            yMax = r * rh;
+            if (yMax < 10000000) {
+                h = yMax;
+            } else {
+                h = 10000000;
+            }
+            M = Math.ceil(yMax / h);
+            canvas.css('height', h);
+        }
 
-        function renderPermMarkup() {
-            header = $('<div class="qg-header-row"></div>');
-            header.appendTo(div);
-            canvas = $('<div class="qg-canvas"></div>');
-            canvas.appendTo(div);
+        function renderRow(row) {
+            var d = data.result[row];
+            var rowDiv = $('<div class="qg-r"/>');
+            for (var k = 0; k < d.length; k++) {
+                var str = d[k] !== null ? d[k].toString() : 'null';
+                $('<div class="qg-c qg-w' + k + '">' + str + '</div>').appendTo(rowDiv);
+            }
+            return rowDiv.css({
+                    top: row * rh - o,
+                    height: rh
+                })
+                .appendTo(canvas);
+        }
+
+        function renderViewport() {
+            // calculate the viewport + buffer
+            var t = Math.max(0, Math.floor((y - vp) / rh));
+            var b = Math.min(yMax / rh - 1, Math.ceil((y + vp + vp) / rh));
+
+            // remove rows no longer in the viewport
+            for (var i in rows) {
+                if (i < t || i > b) {
+                    rows[i].remove();
+                    delete rows[i];
+                }
+            }
+
+            // add new rows
+            for (i = t; i <= b; i++) {
+                if (!rows[i]) {
+                    rows[i] = renderRow(i);
+                }
+            }
+        }
 
-            canvas.bind('scroll', function () {
-                header.scrollLeft(canvas.scrollLeft());
-            });
+        function viewportScroll(force) {
+            header.scrollLeft(viewport.scrollLeft());
+
+            var scrollTop = viewport.scrollTop();
+            if (scrollTop !== top || force) {
+                if (Math.abs(scrollTop - top) > vp) {
+                    onJump(scrollTop);
+                } else {
+                    onNearScroll(scrollTop);
+                }
+                renderViewport();
+            }
+        }
+
+        function renderPermMarkup() {
+            header = div.find('.qg-header-row');
+            viewport = div.find('.qg-viewport');
+            viewport.scroll(viewportScroll);
+            canvas = div.find('.qg-canvas');
         }
 
         function createCss() {
@@ -65,6 +137,7 @@
                 sum += w;
             }
             rules.push('.qg-r{width:' + sum + 'px;}');
+            rules.push('.qg-canvas{width:' + sum + 'px;}');
 
             if ($style[0].styleSheet) { // IE
                 $style[0].styleSheet.cssText = rules.join(' ');
@@ -73,61 +146,85 @@
             }
         }
 
-        function render(r) {
+        function computeColumnWidths() {
             colMax = [];
             var i, k;
-            for (i = 0; i < r.columns.length; i++) {
-                var c = r.columns[i];
+            for (i = 0; i < data.columns.length; i++) {
+                var c = data.columns[i];
                 $('<div class="qg-header qg-w' + i + '">' + c.name + '</div>').appendTo(header);
-                colMax.push(0);
+                colMax.push(c.name.length * 1.2);
             }
 
-            for (i = 0; i < r.result.length; i++) {
-                var row = r.result[i];
-                var rowDiv = $('<div class="qg-r"></div>');
+            var max = data.result.length > 100 ? 100 : data.result.length;
+
+            for (i = 0; i < max; i++) {
+                var row = data.result[i];
                 for (k = 0; k < row.length; k++) {
                     var cell = row[k];
                     var str = cell !== null ? cell.toString() : 'null';
                     colMax[k] = Math.max(str.length, colMax[k]);
-                    $('<div class="qg-c qg-w' + k + '">' + str + '</div>').appendTo(rowDiv);
                 }
-                rowDiv.appendTo(canvas);
             }
         }
 
         function clear() {
+            top = 0;
+            y = 0;
+            o = 0;
+            r = 0;
+
             if ($style) {
                 $style.remove();
             }
             header.empty();
             canvas.empty();
+            rows = {};
         }
 
-        function resizeCanvas() {
-            var top = canvas[0].getBoundingClientRect().top;
-            var h = Math.round((window.innerHeight - top));
-            h = h - 90;
-            canvas[0].style.height = h + 'px';
+        function resizeViewport() {
+            var t = viewport[0].getBoundingClientRect().top;
+            vp = Math.round((window.innerHeight - t)) - 90;
+            viewport.css('height', vp);
         }
 
         function resizeDiv() {
-            var top = div[0].getBoundingClientRect().top;
-            var h = Math.round((window.innerHeight - top));
-            h = h - 90;
-            div[0].style.height = h + 'px';
+            var t = div[0].getBoundingClientRect().top;
+            div.css('height', Math.round((window.innerHeight - t)) - 90);
         }
 
         function resize() {
-            resizeCanvas();
+            resizeViewport();
             resizeDiv();
         }
 
+        function onNearScroll(scrollTop) {
+            y += scrollTop - top;
+            top = scrollTop;
+        }
+
+        function removeAllRows() {
+            for (var i in rows) {
+                rows[i].remove();
+                delete rows[i];
+            }
+        }
+
+        function onJump(scrollTop) {
+            y = scrollTop === 0 ? 0 : Math.ceil((scrollTop + vp) * M - vp);
+            top = scrollTop;
+            o = y - top;
+            removeAllRows();
+        }
+
         //noinspection JSUnusedLocalSymbols
         function update(x, m) {
+            data = m.r;
             clear();
-            render(m.r);
+            addRows(data.result.length);
+            computeColumnWidths();
             createCss();
             resize();
+            viewportScroll(true);
         }
 
         function bind() {

ui/app/scripts/query.js

@@ -5,27 +5,19 @@
  *  | |_| | |_| |  __/\__ \ |_| |_| | |_) |
  *   \__\_\\__,_|\___||___/\__|____/|____/
  *
- * The MIT License (MIT)
+ * Copyright (c) 2014-2016 Appsicle
  *
- * Copyright (C) 2016 Appsicle
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
  *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
+ * http://www.apache.org/licenses/LICENSE-2.0
  *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR
- * ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
- * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  ******************************************************************************/
 
 /*globals $:false */
@@ -85,7 +77,7 @@
         function qq() {
             abortActive();
             requestParams.query = qry.q;
-            requestParams.limit = '0,100';
+            requestParams.limit = '0,10000';
             requestParams.withCount = false;
             time = new Date().getTime();
             hActiveRequest = $.get('/js', requestParams).done(handleServerResponse).fail(handleServerError);

ui/app/styles/_grid.scss

@@ -5,27 +5,19 @@
  *  | |_| | |_| |  __/\__ \ |_| |_| | |_) |
  *   \__\_\\__,_|\___||___/\__|____/|____/
  *
- * The MIT License (MIT)
+ * Copyright (c) 2014-2016 Appsicle
  *
- * Copyright (C) 2016 Appsicle
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
  *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
+ * http://www.apache.org/licenses/LICENSE-2.0
  *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
- * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
- * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR
- * ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
- * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  ******************************************************************************/
 
 #grid {
@@ -41,6 +33,7 @@
 
 .qg-r {
   border-bottom: 1px solid #e6e6e6;
+  position: absolute;
 }
 
 .qg-r:hover {
@@ -57,10 +50,15 @@
   text-align: right;
 }
 
-.qg-canvas {
+.qg-viewport {
   overflow: auto;
 }
 
+.qg-canvas {
+  position: relative;
+  overflow: hidden;
+}
+
 .qg-c {
   display: inline-block;
   padding: 3px;