QmlProfiler: Draw Overview in multiple passes

If there are too many events it takes too long to draw the overview.
By drawing only part of the events in each paint callback and
scheduling multiple paints we can mitigate that. The result is that a
rough outline is visible immediately and the details are filled in bit
by bit.

Task-number: QTCREATORBUG-12341
Change-Id: Id94d914e2926be01cb1635fbd8814c4d2f57d23b
Reviewed-by: Kai Koehne <kai.koehne@digia.com>

src/plugins/qmlprofiler/qml/Overview.js

@@ -32,16 +32,16 @@
 var qmlProfilerModelProxy = 0;
 
 //draw background of the graph
-function drawGraph(canvas, ctxt, region)
+function drawGraph(canvas, ctxt)
 {
     ctxt.fillStyle = "#eaeaea";
     ctxt.fillRect(0, 0, canvas.width, canvas.height);
 }
 
 //draw the actual data to be graphed
-function drawData(canvas, ctxt, region)
+function drawData(canvas, ctxt)
 {
-    if ((!qmlProfilerModelProxy) || qmlProfilerModelProxy.count() == 0)
+    if ((!qmlProfilerModelProxy) || qmlProfilerModelProxy.count() === 0)
         return;
 
     var width = canvas.width;
@@ -54,17 +54,15 @@ function drawData(canvas, ctxt, region)
     var spacing = width / qmlProfilerModelProxy.traceDuration();
 
     var modelRowStart = 0;
-    for (var modelIndex = 0; modelIndex < qmlProfilerModelProxy.modelCount(); modelIndex++) {
+
-        for (var ii = 0; ii < qmlProfilerModelProxy.count(modelIndex); ++ii) {
+    for (var modelIndex = 0; modelIndex < qmlProfilerModelProxy.modelCount(); ++modelIndex) {
+        for (var ii = canvas.offset; ii < qmlProfilerModelProxy.count(modelIndex);
+             ii += canvas.increment) {
 
             var xx = (qmlProfilerModelProxy.getStartTime(modelIndex,ii) -
                       qmlProfilerModelProxy.traceStartTime()) * spacing;
-            if (xx > region.x + region.width)
-                continue;
 
             var eventWidth = qmlProfilerModelProxy.getDuration(modelIndex,ii) * spacing;
-            if (xx + eventWidth < region.x)
-                continue;
 
             if (eventWidth < 1)
                 eventWidth = 1;
@@ -88,8 +86,9 @@ function drawData(canvas, ctxt, region)
     ctxt.lineWidth = 2;
     var radius = 1;
     modelRowStart = 0;
-    for (modelIndex = 0; modelIndex < qmlProfilerModelProxy.modelCount(); modelIndex++) {
+    for (modelIndex = 0; modelIndex < qmlProfilerModelProxy.modelCount(); modelIndex += 10) {
-        for (ii = 0; ii < qmlProfilerModelProxy.count(modelIndex); ++ii) {
+        for (ii = canvas.offset; ii < qmlProfilerModelProxy.count(modelIndex);
+             ii += canvas.increment) {
             if (qmlProfilerModelProxy.getBindingLoopDest(modelIndex,ii) >= 0) {
                 var xcenter = Math.round(qmlProfilerModelProxy.getStartTime(modelIndex,ii) +
                                          qmlProfilerModelProxy.getDuration(modelIndex,ii) -
@@ -107,7 +106,7 @@ function drawData(canvas, ctxt, region)
 
 }
 
-function drawTimeBar(canvas, ctxt, region)
+function drawTimeBar(canvas, ctxt)
 {
     if (!qmlProfilerModelProxy)
         return;
@@ -172,11 +171,3 @@ function prettyPrintTime( t )
     t = Math.floor(t - m*60);
     return m+"m"+t+"s";
 }
-
-function plot(canvas, ctxt, region)
-{
-    drawGraph(canvas, ctxt, region);
-    drawData(canvas, ctxt, region);
-    drawTimeBar(canvas, ctxt, region);
-
-}

src/plugins/qmlprofiler/qml/Overview.qml

@@ -36,6 +36,10 @@ Canvas {
     objectName: "Overview"
     contextType: "2d"
 
+    property int eventsPerPass: 4096
+    property int increment: -1
+    property int offset: -1
+
     // ***** properties
     height: 50
     property bool dataReady: false
@@ -43,10 +47,14 @@ Canvas {
     property double endTime : 0
     property bool recursionGuard: false
 
+    onWidthChanged: offset = -1
+
     // ***** functions
     function clear()
     {
         dataReady = false;
+        increment = -1;
+        offset = -1;
         requestPaint();
     }
 
@@ -88,23 +96,40 @@ Canvas {
     Connections {
         target: qmlProfilerModelProxy
         onDataAvailable: {
-                dataReady = true;
+            dataReady = true;
-                requestPaint();
+            increment = Math.ceil(qmlProfilerModelProxy.count() / eventsPerPass);
+            offset = -1;
+            requestPaint();
         }
     }
 
+    Timer {
+        id: paintTimer
+        onTriggered: canvas.requestPaint();
+    }
 
     // ***** slots
     onPaint: {
         if (context === null)
             return; // canvas isn't ready
 
-        context.reset();
         Plotter.qmlProfilerModelProxy = qmlProfilerModelProxy;
-        if (dataReady) {
+
-            Plotter.plot(canvas, context, region);
+        if (offset < 0) {
-        } else {
+            context.reset();
-            Plotter.drawGraph(canvas, context, region)    //just draw the background
+            Plotter.drawGraph(canvas, context);
+            if (dataReady) {
+                Plotter.drawTimeBar(canvas, context);
+                offset = 0;
+                // Larger initial delay to avoid flickering on resize
+                paintTimer.interval = 1000;
+                paintTimer.start();
+            }
+        } else if (offset < increment) {
+            Plotter.drawData(canvas, context);
+            ++offset;
+            paintTimer.interval = 1;
+            paintTimer.start();
         }
     }