Continuation of DataView perf work

- Reverted the batched filter functions and implemented dynamic
recompilation instead.
- Added compilation of an optimized filter loop for the
"isFilterExpanding" hint.

1 files changed, 39 insertions, 21 deletions

diff --git a/examples/example-grouping.html b/examples/example-grouping.html
index eceb485..4fe398c 100644
--- a/examples/example-grouping.html
+++ b/examples/example-grouping.html
@@ -49,19 +49,17 @@
                     <button onclick="collapseAllGroups()">Collapse all groups</button><br/>
                     <button onclick="expandAllGroups()">Expand all groups</button><br/>
                 </div>
+                <hr/>
+                <h2>Demonstrates:</h2>
+                <ul>
+                <li>
+                 Fully dynamic and interactive grouping with filtering and aggregates over <b>50'000</b> items<br>
+                 Personally, this is just the coolest slickest thing I've ever seen done with DHTML grids!
+                </li>
+                </ul>
             </div>
         </div>
 
-		<div style="margin-left:650px;margin-top:40px;;">
-			<h2>Demonstrates:</h2>
-
-			<ul>
-                <li>
-                    Fully dynamic and interactive grouping with filtering and aggregates over 10'000 items<br>
-                    Personally, this is just the coolest slickest thing I've ever seen done with DHTML grids!
-                </li>
-			</ul>
-		</div>
 
 		<script src="../lib/firebugx.js"></script>
 
@@ -103,21 +101,18 @@
 		var sortcol = "title";
 		var sortdir = 1;
 		var percentCompleteThreshold = 0;
+        var prevPercentCompleteThreshold = 0;
 		var searchString = "";
 
         function avgTotalsFormatter(totals, columnDef) {
             return "avg: " + Math.round(totals.avg[columnDef.field]) + "%";
         }
 
-		function myFilter(item) {
-			if (item["percentComplete"] < percentCompleteThreshold)
-				return false;
-
-			if (searchString != "" && item["title"].indexOf(searchString) == -1)
-				return false;
-
-			return true;
-		}
+        function myFilter(item, args) {
+            return item["percentComplete"] >= args.percentComplete &&
+                (args.searchString == "" ||
+                item["title"].indexOf(args.searchString) == -1);
+        }
 
 		function percentCompleteSort(a,b) {
 			return a["percentComplete"] - b["percentComplete"];
@@ -226,7 +221,6 @@
 
             // register the group item metadata provider to add expand/collapse group handlers
             grid.registerPlugin(groupItemMetadataProvider);
-
             grid.setSelectionModel(new Slick.CellSelectionModel());
 
 			var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
@@ -284,7 +278,7 @@
 					if (percentCompleteThreshold != ui.value)
 					{
 						window.clearTimeout(h_runfilters);
-						h_runfilters = window.setTimeout(function() { dataView.refresh() }, 10);
+						h_runfilters = window.setTimeout(filterAndUpdate, 10);
 						percentCompleteThreshold = ui.value;
 					}
 				}
@@ -304,10 +298,34 @@
 			});
 
 
+            function filterAndUpdate() {
+                var isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold;
+                var isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold;
+                var renderedRange = grid.getRenderedRange();
+
+                dataView.setFilterArgs({
+                    percentComplete: percentCompleteThreshold,
+                    searchString: searchString
+                });
+                dataView.setRefreshHints({
+                    ignoreDiffsBefore:renderedRange.top,
+                    ignoreDiffsAfter:renderedRange.bottom + 1,
+                    isFilterNarrowing:isNarrowing,
+                    isFilterExpanding:isExpanding
+                });
+                dataView.refresh();
+
+                prevPercentCompleteThreshold = percentCompleteThreshold;
+            }
+
 			// initialize the model after all the events have been hooked up
 			dataView.beginUpdate();
 			dataView.setItems(data);
 			dataView.setFilter(myFilter);
+            dataView.setFilterArgs({
+                percentComplete: percentCompleteThreshold,
+                searchString: searchString
+            });
             dataView.groupBy(
                 "duration",
                 function (g) {