Kirill Simonov avatar Kirill Simonov committed 9b11f01

Refactored grid rendering.

Comments (0)

Files changed (3)

src/htsql_tweak/shell/command.py

 #
 
 
+from htsql import __version__
 from htsql.util import maybe
 from htsql.context import context
 from htsql.adapter import Adapter, adapts, named
         resource = locate('/shell/index.html')
         assert resource is not None
         database_name = context.app.htsql.db.database
+        server_name = 'HTSQL ' + __version__
         server_root = context.app.tweak.shell.server_root
         if server_root is None:
             server_root = wsgiref.util.application_uri(self.action.environ)
         data = resource.data
         data = self.patch(data, 'base href', resource_root)
         data = self.patch(data, 'data-database-name', database_name)
+        data = self.patch(data, 'data-server-name', server_name)
         data = self.patch(data, 'data-server-root', server_root)
         data = self.patch(data, 'data-query-on-start', query_on_start)
         data = self.patch(data, 'data-evaluate-on-start', evaluate_on_start)

src/htsql_tweak/shell/static/index.html

   </head>
 
   <body data-database-name="HTSQL"
+        data-server-name="HTSQL"
         data-server-root="http://localhost:8080"
         data-query-on-start="/"
         data-evaluate-on-start="false"
 
     <div id="viewport">
       <div class="heading-area">
-        <span id="database">HTSQL</span>
+        <em id="database">HTSQL</em>
         <ul class="menu">
           <li><button id="schema">Schema</button></li>
           <li><button id="help">Help</button></li>

src/htsql_tweak/shell/static/shell.js

             console.log(data);
     }
 
+    function timing(point) {
+        if (!Date.now)
+            return;
+        var timestamp = Date.now();
+        if (state.lastTimestamp) {
+            var delta = (timestamp-state.lastTimestamp)/1000;
+            log("("+state.lastPoint+") -> ("+point+"): "+delta);
+        }
+        state.lastPoint = point;
+        state.lastTimestamp = timestamp;
+    }
+
     function makeConfig() {
         var $body = $('body');
         return {
             databaseName: $body.attr('data-database-name') || "",
+            serverName: $body.attr('data-server-name') || "",
             serverRoot: $body.attr('data-server-root') || "",
             queryOnStart: $body.attr('data-query-on-start') || "/",
             evaluateOnStart: ($body.attr('data-evaluate-on-start') == 'true'),
             waiting: false,
             lastQuery: null,
             lastAction: null,
-            table: null,
             marker: null,
-            expansion: 0
+            expansion: 0,
+            lastPoint: null,
+            lastTimestamp: null
         }
     }
 
     }
 
     function handleProduct(output) {
+//      timing("rendering table");
         var style = output.style;
         var head = output.head;
         var body = output.body;
         table += '<td class="dummy">&nbsp;</td>';
         table += '</tbody>';
         table += '</table>';
-        state.table = table;
-        $grid.removeAttr('style');
-        $gridHead.removeAttr('style').empty();
-        $gridBody.removeAttr('style').empty();
+        $gridHead.empty();
+        $gridBody.empty()
+            .css({ top: 0,
+                   width: ($viewport.width()+environ.screenWidth-1)+"px",
+                   right: "auto",
+                   "overflow-y": "hidden",
+                   "overflow-x": "hidden" });
         if (state.$panel)
             state.$panel.hide();
         state.$panel = $productPanel.show();
-        setTimeout(addTable, 0);
         var title = '';
         if (head.length > 0) {
             for (var i = 0; i < head[0].length; i ++) {
             }
         }
         updateTitle(title);
+        $gridBody.html(table);
+        $gridHead.scrollLeft(0);
+        $gridBody.scrollLeft(0).scrollTop(0);
+        setTimeout(configureGrid, 0);
+    }
+
+    function configureGrid() {
+        var $bodyTable = $gridBody.children('table');
+        var gridWidth = $grid.width();
+        var colWidths = [];
+        $bodyTable.find('tbody tr:first-child').children().each(function(idx) {
+            colWidths[idx] = $(this).width();
+        });
+        colWidths[colWidths.length-1] = 1;
+        var tableWidth = 0;
+        for (var i = 0; i < colWidths.length-1; i ++) {
+            tableWidth += colWidths[i];
+        }
+        if (tableWidth < gridWidth) {
+            var diff = gridWidth-tableWidth-1;
+            colWidths[colWidths.length-1] += diff;
+            tableWidth += diff;
+        }
+        var $bodyGroup = $("<colgroup></colgroup>");
+        var $headGroup = $("<colgroup></colgroup>");
+        for (var i = 0; i < colWidths.length; i ++) {
+            var width = colWidths[i];
+            $bodyGroup.append("<col style=\"width: "+width+"px\">");
+            if (i == colWidths.length-1) {
+                width += environ.screenWidth;
+            }
+            $headGroup.append("<col style=\"width: "+width+"px\">");
+        }
+        var $headTable = $("<table></table>")
+                .appendTo($gridHead)
+                .css('table-layout', 'fixed')
+                .width(tableWidth)
+                .append($headGroup)
+                .append($bodyTable.children('thead').clone());
+        var headHeight = $headTable.height();
+        $bodyTable.children('colgroup').remove();
+        $bodyTable.children('thead').remove();
+        $bodyTable.css('table-layout', 'fixed')
+                .width(tableWidth)
+                .prepend($bodyGroup);
+        $gridBody.css({ right: 0,
+                        top: headHeight,
+                        width: 'auto',
+                        'overflow-y': 'auto',
+                        'overflow-x': (tableWidth-environ.screenWidth
+                                        < gridWidth-environ.scrollbarWidth) ?
+                                        'hidden' : 'auto' });
+        setTimeout(reportTime, 0);
+    }
+
+    function reportTime() {
+//        timing("!rendering table");
     }
 
     function showWaiting() {
         state.$panel = $requestPanel.show();
     }
 
-    function addTable() {
-        $gridBody.css({ width: ($grid.width()+environ.screenWidth-1)+"px",
-                        right: "auto" });
-        $gridBody.html(state.table);
-        setTimeout(splitTable, 0);
-    }
-
-    function splitTable() {
-        var colWidths = [];
-        var headHeight = $gridBody.find('thead').height();
-        $gridBody.find('tbody').find('tr:first-child').children().each(function(idx) {
-            colWidths[idx] = $(this).width();
-        });
-        colWidths[colWidths.length-1] = 1;
-        $gridBody.find('colgroup').remove()
-        $("<table></table>").appendTo($gridHead).append($gridBody.find('thead'));
-        var tableWidth = 0;
-        for (var i = 0; i < colWidths.length-1; i ++) {
-            tableWidth += colWidths[i];
-        }
-        var panelWidth = $productPanel.width();
-        if (tableWidth < panelWidth) {
-            var diff = panelWidth-tableWidth-1;
-            colWidths[colWidths.length-1] += diff;
-            tableWidth += diff;
-        }
-        var $bodyTable = $gridBody.children('table');
-        var $headTable = $gridHead.children('table');
-        var $bodyGroup = $("<colgroup></colgroup>");
-        var $headGroup = $("<colgroup></colgroup>");
-        for (var i = 0; i < colWidths.length; i ++) {
-            var width = colWidths[i];
-            $bodyGroup.append("<col style=\"width: "+width+"px\">");
-            if (i == colWidths.length-1)
-                width += environ.screenWidth;
-            $headGroup.append("<col style=\"width: "+width+"px\">");
-        }
-        $bodyTable.prepend($($bodyGroup))
-            .width(tableWidth)
-            .css('table-layout', 'fixed');
-        $headTable.prepend($($headGroup))
-            .width(tableWidth+environ.screenWidth)
-            .css('table-layout', 'fixed');
-        $gridBody.css({ right: 0, top: headHeight, width: 'auto' });
-        setTimeout(adjustGrid);
-    }
-
-    function adjustGrid() {
-        var $table = $gridBody.children('table');
-        var $cell = $table.children('tbody')
-                        .children('tr:first-child')
-                        .children('td:last-child');
-        var tableWidth = $table.width()-$cell.width();
-        $gridBody.css({
-            top: $gridHead.height(),
-            'overflow-y': 'auto',
-            'overflow-x': (tableWidth < $gridBody.width()-environ.scrollbarWidth) ?
-                            'hidden' : 'auto'
-        });
-    }
-
     var config = makeConfig();
     var environ = makeEnviron();
     var state = makeState();
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.