super smooth scrolling

abc91199 · Feb 17, 2015 · c301fbe · c301fbe
1 parent 3dd9590
commit c301fbe
Show file tree

Hide file tree

Showing 18 changed files with 336 additions and 34 deletions.
diff --git a/behaviors/fin-hypergrid-behavior-qtree.html b/behaviors/fin-hypergrid-behavior-qtree.html
@@ -91,6 +91,8 @@
             this.sorted = {};
             this.ws = null;
             this.reconnect();
+            this.msgCounter = Date.now();
+            this.msgResponsesActions = {};
         },
         getFixedRowCount: function() {
             return 2;
@@ -144,15 +146,20 @@
 
                     //approxiamte line height is a 'W'
                     var size = gc.measureText('W');
-                    var textHeight = size.width * 1.4;
-                    var hoffset = Math.ceil(textHeight / 1.8);
+                    var textHeight = size.width * 1.6;
+                    var hoffset = Math.ceil(textHeight / 2.1);
 
                     if (val) {
                         for (var i = 0; i < val.length; i++)
                         {
-                            gc.fillText(val[i], 5, hoffset + (i*textHeight));
+                            gc.fillText(val[i], 4, hoffset + (i*textHeight));
                         }
                     }
+                    gc.strokeStyle = this.config.properties['lineColor'];
+                    gc.moveTo(0, height-0.5);
+                    gc.lineTo(width + 0, height-0.5);
+                    gc.moveTo(0, height+0.5);
+                    gc.lineTo(width + 0, height+0.5);
                     gc.stroke();
                 }
             }
@@ -252,7 +259,7 @@
             var startY = this.scrollPositionY || 0;
             var stopY = startY + 60;
             this.ws.send(JSON.stringify({
-                id: "abc",
+                id: this.getNextMessageId(),
                 fn: "get",
                 start: startY,
                 end: stopY
@@ -361,7 +368,7 @@
 
             //lets tell Q now
             var msg = {
-                id: "abc",
+                id: this.getNextMessageId(),
                 fn: "sorts",
                 cols: sortBlob.cols,
                 sorts: sortBlob.sorts
@@ -403,7 +410,7 @@
             var rowNum = mouse.gridCell.y - this.getFixedRowCount();
             var nodes = this.block.Z[1].n_[rowNum];
             var nodeClick = {
-                    id: "abc",
+                    id: this.getNextMessageId(),
                     fn: "node",
                     node: nodes
                 };
@@ -461,7 +468,7 @@
         closeEditor: function(div) {
             var lists = div.lists;
             var changeCols = {
-                    id: "abc",
+                    id: this.getNextMessageId(),
                     fn: "groups",
                     groups: lists.group,
                     visible: lists.visible
@@ -475,9 +482,16 @@
         isColumnReorderable: function() {
             return true;
         },
-
+        getNextMessageId: function(onResponseDo) {
+            this.msgResponsesActions
+            var id = 'js_' + this.msgCounter++;
+            if (onResponseDo) {
+              this.msgResponsesActions[id] = onResponseDo;
+            }
+            return id;
+        },
         swapColumns: function(src, tar) {
-
+            var self = this;
             var tmp = this.columnIndexes[src];
             this.columnIndexes[src] = this.columnIndexes[tar];
             this.columnIndexes[tar] = tmp;
@@ -486,8 +500,11 @@
             var t = visible[src];
             visible[src] = visible[tar];
             visible[tar] = t;
+            var msgId = this.getNextMessageId(function() {
+                self.initColumnIndexes();
+            });
             var changeCols = {
-                    id: "abc",
+                    id: msgId,
                     fn: "groups",
                     groups: this.block.G,
                     visible: visible
@@ -524,7 +541,7 @@
                     var startY = this.scrollPositionY || 0;
                     var stopY = startY + 60;
                     self.ws.send(JSON.stringify({
-                        id: "abc",
+                        id: self.getNextMessageId(),
                         fn: "get",
                         start: startY,
                         end: stopY
@@ -537,8 +554,13 @@
                 };
                 this.ws.onmessage = function(e) {
                     d = JSON.parse(e.data);
-                    self.initColumnIndexes();
                     self.block = d;
+                    var msgId = d.id;
+                    var action = self.msgResponsesActions[msgId];
+                    if (action) {
+                        action(d);
+                        self.msgResponsesActions[id] = "done";
+                    }
                     oldSize = self.block.N - 1;
 
                     if (d.rows !== oldSize) {

diff --git a/demo.html b/demo.html
@@ -207,7 +207,7 @@ <h3>To point this example to your data</h3>
 
         <div vertical layout>
           <div class="description">
-            <h3>fin-hypergrid-behavior-qtree</h3> This element is a custom Polymer web component that demonstrates a more complex interface to Q/KDB+ by kx systems.  In order for this to work you need to run either provided q scripts found in <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/s1.zip">s1.zip scripts (see s1.txt for instructions)</a>, or <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/s2.zip">s2.zip scripts (see s2.txt for instructions)</a>.  The s1 example is a +1MM row tree table with static data, while the s2 example has live updates.  These examples show the powerful dynamic analytic capabilities of an external data engine.  These example Q script are based on <a href="http://archive.vector.org.uk/art10500340">code and a paper</a> written by <a href="http://nsl.com/">Stevan Apter.</a>  Press the alt/option button for a popup to select the hierarchy columns or select/hide the visible columns.</div>
+            <h3>fin-hypergrid-behavior-qtree</h3> This element is a custom Polymer web component that demonstrates a more complex interface to Q/KDB+ by kx systems.  In order for this to work you need to run either provided q scripts found in <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/s1.zip">s1.zip scripts (see s1.txt for instructions)</a>, <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/s2.zip">s2.zip scripts (see s2.txt for instructions)</a>, or <a href="https://github.com/openfin/fin-hypergrid/blob/master/q/s3.zip">s3.zip scripts (see s32.txt for instructions)</a>.  The s1 example is a +1MM row tree table with static data, the s2 example has live updates without page caching, and the s3 example demonstrates true backend view caching delivering +1MM updates X 4 times a second push to the hypergrid.  These examples show the powerful dynamic analytic capabilities of an external data engine.  These example Q script are based on <a href="http://archive.vector.org.uk/art10500340">code and a paper</a> written by <a href="http://nsl.com/">Stevan Apter.</a>  Press the alt/option button for a popup to select the hierarchy columns or select/hide the visible columns.</div>
           <br>
           <core-splitter direction="up"></core-splitter>
           <div flex class="rel">

diff --git a/features/fin-hypergrid-feature-column-resizing.html b/features/fin-hypergrid-feature-column-resizing.html
@@ -109,7 +109,6 @@
                 var scrollValue = this.getScrollValue(grid);
                 var fixedAreaCount = this.getFixedAreaCount(grid);
                 this.dragIndex = overArea - 1;
-                console.log(this.dragIndex);
                 this.dragStart = this.getMouseValue(event)
                 if (overArea < fixedAreaCount) {
                     scrollValue = 0;

diff --git a/fin-hypergrid.min.html b/fin-hypergrid.min.html
diff --git a/q/s1.zip b/q/s1.zip
diff --git a/q/s1/t.q b/q/s1/t.q
@@ -106,14 +106,16 @@ rollups_:{[t;a]@[a;k;:;A[lower qtype[t]k],'k:cols[t]except key a]}
 / cast <- type
 qtype:{exec c!t from meta x}
 
-/ block of rows
-rows:{[r;v]take[v]. r`start`end}
-take:{[v;s;e]$[s>=count v;0#v;((1+e-s)&count z)#z:s _ v]}
-
 \d .
 
 // globals
 
+/ qtypes
+Q::.tt.qtype T
+
+/ count of Z
+N::count Z
+
 / visible order
 F::cols[T]except G
 

diff --git a/q/s1/u.q b/q/s1/u.q
@@ -24,13 +24,13 @@ T:([tradeId:til n]
  sector:n?sector;
  trader:n?trader;
  strategy:n?strategy;
- price:50+.23*n?400;
+ price:{0.01*"i"$100*x}20+n?400.;
  quantity:(100*10+n?20)-2000;
  date:2000.01.01+asc n?365;
- time:09:30:00.0+n?23000000)
+ time:09:30:00.0+n?06:30)
 
 G:`sector`trader`strategy
-F:`symbol`price`quantity
+F:`holdingId`symbol`price`quantity`date`time
 A[`price]:(avg;`price)
 A[`tradeId]:(.tt.nul;`tradeId)
 

diff --git a/q/s1/w.q b/q/s1/w.q
@@ -30,8 +30,9 @@ $[.z.K<3.3;
 .js.sym:{$[(t:abs type x)in 0 99h;.z.s each x;10=t;`$x;x]}
 .js.exe:{.js[x`fn]x}
 .js.set:{`Z set .tt.cons[T;P;A;S;G]F;.js.ret x}
-.js.sub:{flip each(1#x;.tt.rows[R]1_x)}
-.js.obj:{`Z`G`H`F`I`Q`S`R`N!(.js.sub Z;G;H;F;I;.tt.qtype T;`cols`sorts!(key S;get S);R;count Z)}
+.js.sub:{flip each(1#x;.js.row[1_x]. R`start`end)}
+.js.row:{$[y>=count x;0#x;((1+z-y)&count r)#r:y _ x]}
+.js.obj:{`Z`G`H`F`I`Q`S`R`N!(.js.sub Z;G;H;F;I;Q;`cols`sorts!(key S;get S);R;N)}
 .js.ret:{x,.js.obj[]}
 .js.upd:{if[not null W;t:.z.z;.js.snd .js.set()!();.js.log[t]`upd]}
 .js.ups:{if[not null W;t:.z.z;`Z set 0!(`n_ xkey Z)upsert`n_ xkey .tt.cons[T;P;A;S;G]x;.js.snd .js.ret()!();.js.log[t]`ups]}
diff --git a/q/s2.zip b/q/s2.zip
diff --git a/q/s2/t.q b/q/s2/t.q
@@ -106,14 +106,16 @@ rollups_:{[t;a]@[a;k;:;A[lower qtype[t]k],'k:cols[t]except key a]}
 / cast <- type
 qtype:{exec c!t from meta x}
 
-/ block of rows
-rows:{[r;v]take[v]. r`start`end}
-take:{[v;s;e]$[s>=count v;0#v;((1+e-s)&count z)#z:s _ v]}
-
 \d .
 
 // globals
 
+/ qtypes
+Q::.tt.qtype T
+
+/ count of Z
+N::count Z
+
 / visible order
 F::cols[T]except G
 

diff --git a/q/s2/u.q b/q/s2/u.q
@@ -24,18 +24,18 @@ T:([tradeId:til n]
  sector:n?sector;
  trader:n?trader;
  strategy:n?strategy;
- price:50+.23*n?400;
+ price:{0.01*"i"$100*x}20+n?400.;
  quantity:(100*10+n?20)-2000;
  date:2000.01.01+asc n?365;
- time:09:30:00.0+n?23000000)
+ time:09:30:00.0+n?06:30)
 
 G:`sector`trader`strategy
-F:`symbol`price`quantity
+F:`holdingId`symbol`price`quantity`date`time
 A[`price]:(avg;`price)
 A[`tradeId]:(.tt.nul;`tradeId)
 
 / define Z
 .js.set()!();
 
 / update
-.z.ts:{update price:price+-.5+count[T]?1.,quantity:quantity+-5+count[T]?10 from`T;.js.ups`price`quantity;}
+.z.ts:{update price:price+-.5+count[T]?1.,quantity:quantity+-5+count[T]?10 from`T;.js.ups`price`quantity;}
diff --git a/q/s2/w.q b/q/s2/w.q
@@ -18,8 +18,9 @@ W:0Ni
 .js.sym:{$[(t:abs type x)in 0 99h;.z.s each x;10=t;`$x;x]}
 .js.exe:{.js[x`fn]x}
 .js.set:{`Z set .tt.cons[T;P;A;S;G]F;.js.ret x}
-.js.sub:{flip each(1#x;.tt.rows[R]1_x)}
-.js.obj:{`Z`G`H`F`I`Q`S`R`N!(.js.sub Z;G;H;F;I;.tt.qtype T;`cols`sorts!(key S;get S);R;count Z)}
+.js.sub:{flip each(1#x;.js.row[1_x]. R`start`end)}
+.js.row:{$[y>=count x;0#x;((1+z-y)&count r)#r:y _ x]}
+.js.obj:{`Z`G`H`F`I`Q`S`R`N!(.js.sub Z;G;H;F;I;Q;`cols`sorts!(key S;get S);R;N)}
 .js.ret:{x,.js.obj[]}
 .js.upd:{if[not null W;neg[W].js.set()!()]}
 .js.ups:{if[not null W;`Z set 0!(`n_ xkey Z)upsert`n_ xkey .tt.cons[T;P;A;S;G]x;neg[W].js.ret()!()]}
diff --git a/q/s3.zip b/q/s3.zip
diff --git a/q/s3/s3.txt b/q/s3/s3.txt
@@ -0,0 +1,27 @@
+two-process treetable
+---------------------
+
+u.q     creates example table, updates price and quantity
+t.q     computes simple treetable
+w.q     qipc interface to v.q
+
+v.q     websocket interface and hypergird API + services scrolling requests (non-computational tasks)
+
+start web process (port 12345):
+
+        cd s2
+        q v.q
+
+start treetable process (port 12346):
+
+        cd s2
+        q u.q
+
+web and treetable processes can be started in either order.
+
+the two-process version decouples treetable recomputation and hypergrid interaction.
+
+
+
+
+