Ticket #4056: Profiler2.patch

source/ps/Profiler2.cpp

@@ -80 +80 @@
         std::stringstream stream;
 
         std::string uri = request_info->uri;
-        if (uri == "/overview")
+
+        if (uri == "/download")
         {
+            profiler->SaveToFile();
+        }
+        else if (uri == "/overview")
+        {
             profiler->ConstructJSONOverview(stream);
         }
         else if (uri == "/query")
@@ -191 +196 @@
 void CProfiler2::ShutDownHTTP()
 {
     LOGMESSAGERENDER("Shutting down profiler2 HTTP server");
+
     if (m_MgContext)
     {
         mg_stop(m_MgContext);
@@ -219 +225 @@
 
     ENSURE(!m_GPU); // must shutdown GPU before profiler
 
+    SaveToFile();
+
     if (m_MgContext)
     {
         mg_stop(m_MgContext);
@@ -301 +309 @@
 }
 
 CProfiler2::ThreadStorage::ThreadStorage(CProfiler2& profiler, const std::string& name) :
-    m_Profiler(profiler), m_Name(name), m_BufferPos0(0), m_BufferPos1(0), m_LastTime(timer_Time())
+m_Profiler(profiler), m_Name(name), m_BufferPos0(0), m_BufferPos1(0), m_LastTime(timer_Time()), m_HeldDepth(0)
 {
     m_Buffer = new u8[BUFFER_SIZE];
     memset(m_Buffer, ITEM_NOP, BUFFER_SIZE);
@@ -355 +363 @@
     Write(ITEM_ATTRIBUTE, buffer, 4 + len);
 }
 
+size_t CProfiler2::ThreadStorage::HoldLevel()
+{
+    return m_HeldDepth;
+}
 
+void CProfiler2::ThreadStorage::PutOnHold()
+{
+    m_HeldDepth++;
+    m_HoldBuffers[m_HeldDepth - 1].clear();
+}
+
+void CProfiler2::ThreadStorage::HoldToBuffer()
+{
+    if (m_HeldDepth > 1)
+    {
+        // copy onto buffer below
+        HoldBuffer& copied = m_HoldBuffers[m_HeldDepth - 1];
+        HoldBuffer& target = m_HoldBuffers[m_HeldDepth - 2];
+        if (target.pos + copied.pos > HOLD_BUFFER_SIZE)
+            return; // too much data, too bad
+
+        memcpy(&target.buffer[target.pos], copied.buffer, copied.pos);
+
+        target.pos += copied.pos;
+    }
+    else if (m_HeldDepth)
+    {
+        u32 size = m_HoldBuffers[m_HeldDepth - 1].pos;
+        u32 start = m_BufferPos0;
+        if (start + size > BUFFER_SIZE)
+        {
+            m_BufferPos0 = size;
+            COMPILER_FENCE;
+            memset(m_Buffer + start, 0, BUFFER_SIZE - start);
+            start = 0;
+        }
+        else
+        {
+            m_BufferPos0 = start + size;
+            COMPILER_FENCE; // must write m_BufferPos0 before m_Buffer
+        }
+        memcpy(&m_Buffer[start], m_HoldBuffers[m_HeldDepth - 1].buffer, size);
+        COMPILER_FENCE; // must write m_BufferPos1 after m_Buffer
+        m_BufferPos1 = start + size;
+    }
+    m_HeldDepth--;
+}
+void CProfiler2::ThreadStorage::ThrowawayHoldBuffer()
+{
+    if (!m_HeldDepth)
+        return;
+    m_HeldDepth--;
+}
+
 void CProfiler2::ConstructJSONOverview(std::ostream& stream)
 {
     TIMER(L"profile2 overview");
@@ -438 +499 @@
             pos += sizeof(item);
             if (lastTime >= 0)
             {
-                lastTime = lastTime + (double)item.dt;
-                visitor.OnEvent(lastTime, item.id);
+                //lastTime = lastTime + (double)item.dt;
+                visitor.OnEvent(lastTime + (double)item.dt, item.id);
             }
             break;
         }
@@ -450 +511 @@
             pos += sizeof(item);
             if (lastTime >= 0)
             {
-                lastTime = lastTime + (double)item.dt;
-                visitor.OnEnter(lastTime, item.id);
+                //lastTime = lastTime + (double)item.dt;
+                visitor.OnEnter(lastTime + (double)item.dt, item.id);
             }
             break;
         }
@@ -462 +523 @@
             pos += sizeof(item);
             if (lastTime >= 0)
             {
-                lastTime = lastTime + (double)item.dt;
-                visitor.OnLeave(lastTime, item.id);
+                //lastTime = lastTime + (double)item.dt;
+                visitor.OnLeave(lastTime + (double)item.dt, item.id);
             }
             break;
         }
@@ -596 +657 @@
     }
     stream << "\n]});\n";
 }
+
+CProfile2SpikeRegion::CProfile2SpikeRegion(const char* name, double spikeLimit) : m_Name(name), m_Limit(spikeLimit)
+{
+    g_Profiler2.HoldMessages();
+    COMPILER_FENCE;
+    g_Profiler2.RecordRegionEnter(m_Name);
+    m_StartTime = g_Profiler2.GetTime();
+}
+CProfile2SpikeRegion::~CProfile2SpikeRegion()
+{
+    double time = g_Profiler2.GetTime();
+    g_Profiler2.RecordRegionLeave(m_Name);
+    bool shouldWrite = time - m_StartTime > m_Limit;
+
+    g_Profiler2.StopHoldingMessages(shouldWrite);
+}

source/ps/Profiler2.h

@@ -124 +124 @@
     // TODO: what's a good size?
     // TODO: different threads might want different sizes
     static const size_t BUFFER_SIZE = 1024*1024;
+    static const size_t HOLD_BUFFER_SIZE = 16 * 1024;
 
     /**
      * Class instantiated in every registered thread.
@@ -153 +154 @@
             // (to save memory) without suffering from precision problems
             SItem_dt_id item = { (float)(t - m_LastTime), id };
             Write(type, &item, sizeof(item));
-            m_LastTime = t;
+            //m_LastTime = t;
         }
 
         void RecordFrameStart(double t)
@@ -172 +173 @@
             va_end(argp);
         }
 
+        size_t HoldLevel();
+        void PutOnHold();
+        void HoldToBuffer();
+        void ThrowawayHoldBuffer();
+
         CProfiler2& GetProfiler()
         {
             return m_Profiler;
@@ -195 +201 @@
          */
         void Write(EItem type, const void* item, u32 itemSize)
         {
+            if (m_HeldDepth > 0)
+            {
+                WriteHold(type, item, itemSize);
+                return;
+            }
             // See m_BufferPos0 etc for comments on synchronisation
 
             u32 size = 1 + itemSize;
@@ -224 +235 @@
             m_BufferPos1 = start + size;
         }
 
+        void WriteHold(EItem type, const void* item, u32 itemSize)
+        {
+            u32 size = 1 + itemSize;
+            if (m_HoldBuffers[m_HeldDepth-1].pos+ size > HOLD_BUFFER_SIZE)
+                return; // we held on too much data, ignore the rest
+        
+            m_HoldBuffers[m_HeldDepth-1].buffer[m_HoldBuffers[m_HeldDepth-1].pos] = (u8)type;
+            memcpy(&m_HoldBuffers[m_HeldDepth-1].buffer[m_HoldBuffers[m_HeldDepth-1].pos+ 1], item, itemSize);
+
+            m_HoldBuffers[m_HeldDepth-1].pos += size;
+        }
+
         CProfiler2& m_Profiler;
         std::string m_Name;
 
         double m_LastTime; // used for computing relative times
 
+        bool m_Hold; // are we holding messages until release/scrap?;
+
         u8* m_Buffer;
 
+        struct HoldBuffer
+        {
+            friend class ThreadStorage;
+        public:
+            HoldBuffer()
+            {
+                buffer = new u8[HOLD_BUFFER_SIZE];
+                memset(buffer, ITEM_NOP, HOLD_BUFFER_SIZE);
+                pos = 0;
+            }
+            ~HoldBuffer()
+            {
+                delete[] buffer;
+            }
+            void clear()
+            {
+                pos = 0;
+            }
+            u8* buffer;
+            u16 pos;
+        };
+
+        HoldBuffer m_HoldBuffers[8];
+        size_t m_HeldDepth;
+
         // To allow hopefully-safe reading of the buffer from a separate thread,
         // without any expensive synchronisation in the recording thread,
         // two copies of the current buffer write position are stored.
@@ -327 +377 @@
         GetThreadStorage().Record(ITEM_ENTER, GetTime(), id);
     }
 
+    void RecordRegionEnter(const char* id, double time)
+    {
+        GetThreadStorage().Record(ITEM_ENTER, time, id);
+    }
+
     void RecordRegionLeave(const char* id)
     {
         GetThreadStorage().Record(ITEM_LEAVE, GetTime(), id);
@@ -346 +401 @@
     void RecordGPURegionLeave(const char* id);
 
     /**
+    * Hold onto messages until a call to release or write the held messages.
+    */
+    size_t HoldLevel()
+    {
+        return GetThreadStorage().HoldLevel();
+    }
+
+    void HoldMessages()
+    {
+        GetThreadStorage().PutOnHold();
+    }
+
+    void StopHoldingMessages(bool writeToBuffer)
+    {
+        if (writeToBuffer)
+            GetThreadStorage().HoldToBuffer();
+        else
+            GetThreadStorage().ThrowawayHoldBuffer();
+    }
+
+    /**
      * Call in any thread to produce a JSON representation of the general
      * state of the application.
      */
@@ -424 +500 @@
     {
         g_Profiler2.RecordRegionLeave(m_Name);
     }
+protected:
+    const char* m_Name;
+};
+
+/**
+* Scope-based enter/leave helper.
+*/
+class CProfile2SpikeRegion
+{
+public:
+    CProfile2SpikeRegion(const char* name, double spikeLimit);
+    ~CProfile2SpikeRegion();
 private:
     const char* m_Name;
+    double m_Limit;
+    double m_StartTime;
 };
 
 /**
@@ -455 +545 @@
  */
 #define PROFILE2(region) CProfile2Region profile2__(region)
 
+#define PROFILE2_IFSPIKE(region, limit) CProfile2SpikeRegion profile2__(region, limit)
+
 #define PROFILE2_GPU(region) CProfile2GPURegion profile2gpu__(region)
 
 /**

source/tools/profiler2/profiler2.html

@@ -12 +12 @@
 </style>
 
 <button onclick="refresh()">Refresh</button>
+<button onclick="SaveAsFile()">Save as File</button>
+
+<button onclick="gather_stable_data()">Condense</button>
+
 <br>
 <div id="timelines"></div>
 

source/tools/profiler2/profiler2.js

@@ -51 +51 @@
 
 var g_data;
 
+var g_last_stable_frame = 0;
+var g_stable_data = {};
+var g_statistical_data = {};
+
 function refresh()
 {
     if (1)
         refresh_live();
     else
-        refresh_jsonp('../../../binaries/system/profile2.jsonp');
+        refresh_jsonp('C:/Users/ironweb-15/AppData/Local/0ad/logs/profile2.jsonp');
 }
 
 function concat_events(data)
@@ -109 +113 @@
             threads.forEach(function(thread) {
                 refresh_thread(thread, callback_data);
             });
+            setTimeout(refresh, 2000);
         },
         error: function (jqXHR, textStatus, errorThrown) {
             alert('Failed to connect to server ("'+textStatus+'")');
+            refresh=refresh_jsonp
         }
     });
 }
@@ -143 +149 @@
         }
     });
 }
+function gather_stable_data()
+{
+    if (!g_stable_data.threads)
+    {
+        g_stable_data = {};
+        g_statistical_data = {};
+        for (let thread in g_data.threads)
+        {
+            g_stable_data[thread] = {"frames" : [], "events" : []}
+            g_statistical_data[thread] = {"evt_dur_avg" : {}, "evt_dur_total" : {}}
+        }
+    }
 
+    for (let thread in g_data.threads)
+    {
+        let in_data = g_data.threads[thread].processed_events;
+        if (!in_data)
+            in_data = compute_intervals(g_data.threads[thread].data.events, {})
+        if (!in_data)
+            continue;
+        let out_data = g_stable_data[thread];
+        let startTime = 0;
+
+        for (let i = 0; i < in_data.frames.length; ++i)
+            if (in_data.frames[i].t0 > g_last_stable_frame)
+            {
+                startTime = in_data.frames[i].t0;
+                out_data.frames = out_data.frames.concat(in_data.frames.slice(i));
+                break;
+            }
+        g_last_stable_frame = in_data.frames[in_data.frames.length-1].t1;
+        // get all relevant events
+        for (let evt in in_data.intervals)
+        {
+            let event = in_data.intervals[evt];
+            let time = event.t0;
+            if (time < startTime)
+                continue;
+
+            if (!out_data.events[event.id])
+            {
+                out_data.events[event.id] = [];
+                g_statistical_data[thread].evt_dur_avg[event.id] = event.duration;
+                g_statistical_data[thread].evt_dur_total[event.id] = 0;
+            }
+            g_statistical_data[thread].evt_dur_avg[event.id] = g_statistical_data[thread].evt_dur_avg[event.id] * 0.99 + event.duration * 0.01;
+            g_statistical_data[thread].evt_dur_total[event.id] += event.duration;
+
+            if (event.duration > 5e-3)
+            {
+                out_data.events.push(event);
+            }
+        }
+    }
+    var blob = new Blob([JSON.stringify(g_statistical_data)], {type: "application/json"});
+    var url  = URL.createObjectURL(blob);
+    window.open(url);
+    var blob = new Blob([JSON.stringify(g_stable_data)], {type: "application/json"});
+    var url  = URL.createObjectURL(blob);
+    window.open(url);
+}
+
+function SaveAsFile()
+{
+    $.ajax({
+        url: 'http://127.0.0.1:8000/download',
+        success: function () {
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+        }
+    });
+}
+
 function rebuild_canvases()
 {
     g_data.canvas_frames = $('<canvas width="1600" height="128"></canvas>').get(0);
-    g_data.canvas_zoom = $('<canvas width="1600" height="128"></canvas>').get(0);
+    g_data.canvas_zoom = $('<canvas width="1600" height="192"></canvas>').get(0);
+    g_data.canvas_typical = $('<canvas width="600" height="600"></canvas>').get(0);
     g_data.text_output = $('<pre></pre>').get(0);
     
     set_frames_zoom_handlers(g_data.canvas_frames);
@@ -160 +239 @@
     });
     $('#timelines').append(g_data.canvas_zoom);
     $('#timelines').append(g_data.text_output);
+    $('#timelines').append(g_data.canvas_typical);
 }
 
 function update_display(range)
@@ -190 +270 @@
         set_zoom_handlers(processed_main, processed_data, thread.canvas, g_data.canvas_zoom);
         set_tooltip_handlers(thread.canvas);
     });
+
+    var processed_main = compute_intervals(main_events, {"numframes":50});
+    display_typical_frame(processed_main, g_data.canvas_typical);
  }
 
 function display_top_items(data, output)
@@ -226 +309 @@
     var tmin, tmax;
     
     var frames = [];
-    var last_frame_time = undefined;
+    var last_frame_time_start = undefined;
+    var last_frame_time_end = undefined;
     for (var i = 0; i < data.length; ++i)
     {
         if (data[i][0] == ITEM_EVENT && data[i][2] == '__framestart')
         {
-            var t = data[i][1];
-            if (last_frame_time)
-                frames.push({'t0': last_frame_time, 't1': t});
-            last_frame_time = t;
+            if (last_frame_time_end)
+                frames.push({'t0': last_frame_time_start, 't1': last_frame_time_end});
+            last_frame_time_start = data[i][1];
         }
+        if (data[i][0] == ITEM_LEAVE && data[i][2] == 'frame')
+        {
+            last_frame_time_end = data[i][1];
+        }
     }
     
     if (range.numframes)
@@ -360 +447 @@
     var stack = [];
     var lastT = 0;
     var lastWasEvent = false;
+ 
     for (var i = start; i <= end; ++i)
     {
         if (data[i][0] == ITEM_EVENT)
@@ -372 +460 @@
         }
         else if (data[i][0] == ITEM_ENTER)
         {
-//            if (data[i][1] < lastT)
-//                console.log('Time went backwards: ' + (data[i][1] - lastT));
+            if (data[i][1] < lastT)
+                console.log('Time went backwards: ' + (data[i][1] - lastT));
 
             stack.push({'t0': data[i][1], 'id': data[i][2]});
 
@@ -382 +470 @@
         }
         else if (data[i][0] == ITEM_LEAVE)
         {
-//            if (data[i][1] < lastT)
-//                console.log('Time went backwards: ' + (data[i][1] - lastT));
+            if (data[i][1] < lastT)
+                console.log('Time went backwards: ' + (data[i][1] - lastT));
 
             lastT = data[i][1];
             lastWasEvent = false;
@@ -390 +478 @@
             
             if (!stack.length)
                 continue;
+
             var interval = stack.pop();
 
+
+
             if (data[i][2] != interval.id && data[i][2] != '(ProfileStop)')
-                alert('inconsistent interval ids ('+interval.id+' / '+data[i][2]+')');
+                console.log('inconsistent interval ids ('+interval.id+' / '+data[i][2]+')');
 
             if (!g_used_colours[interval.id])
                 g_used_colours[interval.id] = new_colour(num_colours++);
@@ -404 +495 @@
             interval.duration = interval.t1 - interval.t0;
             interval.depth = stack.length;
             
+            if (data[i][2] == "Post Message" && interval.duration < 0.001)
+            {
+                console.log("wrongtime at " + JSON.stringify(data[i]));
+                console.log("Stack level " + stack.length);
+            }
             intervals.push(interval);
         }
         else if (data[i][0] == ITEM_ATTRIBUTE)
@@ -454 +550 @@
         }
     };
     
-//    var y_per_second = 1000;
-    var y_per_second = 100;
+    // log 100 scale, skip < 15 ms (60fps) 
+    var scale = x => 1 - Math.max(0, Math.log(1 + (x-15)/10) / Math.log(100));
 
-    [16, 33, 200, 500].forEach(function(t) {
-        var y1 = canvas.height;
-        var y0 = y1 - t/1000*y_per_second;
-        var y = Math.floor(y0) + 0.5;
-
-        ctx.beginPath();
-        ctx.moveTo(xpadding, y);
-        ctx.lineTo(canvas.width - xpadding, y);
-        ctx.strokeStyle = 'rgb(255, 0, 0)';
-        ctx.stroke();
-        ctx.fillStyle = 'rgb(255, 0, 0)';
-        ctx.fillText(t+'ms', 0, y-2);
-    });
-
     ctx.strokeStyle = 'rgb(0, 0, 0)';
     ctx.fillStyle = 'rgb(255, 255, 255)';
     for (var i = 0; i < data.frames.length; ++i)
@@ -481 +563 @@
         var x0 = xpadding + dx*(frame.t0 - tmin);
         var x1 = x0 + dx*duration;
         var y1 = canvas.height;
-        var y0 = y1 - duration*y_per_second;
+        var y0 = y1 * scale(duration*1000);
         
         ctx.beginPath();
         ctx.rect(x0, y0, x1-x0, y1-y0);
@@ -504 +586 @@
         });
     }
 
+    [16, 33, 200, 500].forEach(function(t) {
+        var y1 = canvas.height;
+        var y0 = y1 * scale(t);
+        var y = Math.floor(y0) + 0.5;
+
+        ctx.beginPath();
+        ctx.moveTo(xpadding, y);
+        ctx.lineTo(canvas.width - xpadding, y);
+        ctx.strokeStyle = 'rgb(255, 0, 0)';
+        ctx.stroke();
+        ctx.fillStyle = 'rgb(255, 0, 0)';
+        ctx.fillText(t+'ms', 0, y-2);
+    });
+
     ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
     ctx.fillStyle = 'rgba(128, 128, 255, 0.2)';
     ctx.beginPath();
@@ -534 +630 @@
         
         var x = time_to_x(event.t);
         var y = 32;
+
+        if (x < 2)
+            continue;
         
         var x0 = x;
         var x1 = x;
@@ -611 +710 @@
     var precision = -3;
     while ((tmax-tmin)*Math.pow(10, 3+precision) < 25)
         ++precision;
+    if (precision > 20)
+        precision = 20;
+    if (precision < 0)
+        precision = 0;
     var ticks_per_sec = Math.pow(10, 3+precision);
     var major_tick_interval = 5;
     for (var i = 0; i < (tmax-tmin)*ticks_per_sec; ++i)
@@ -634 +737 @@
         if (interval.tmax <= tmin || interval.tmin > tmax)
             continue;
 
+        var x0 = Math.floor(time_to_x(interval.t0));
+        var x1 = Math.floor(time_to_x(interval.t1));
+        //if (x1-x0 < 1)
+        //    continue;
+        var y0 = padding_top + interval.depth * BAR_SPACING;
+        var y1 = y0 + BAR_SPACING;
+        
         var label = interval.id;
         if (interval.attrs)
         {
@@ -642 +752 @@
             else
                 label += ' [...]';
         }
-        var x0 = Math.floor(time_to_x(interval.t0));
-        var x1 = Math.floor(time_to_x(interval.t1));
-        var y0 = padding_top + interval.depth * BAR_SPACING;
-        var y1 = y0 + BAR_SPACING;
-        
+
         ctx.fillStyle = interval.colour;
         ctx.strokeStyle = 'black';
         ctx.beginPath();
@@ -713 +819 @@
     ctx.restore();
 }
 
+function display_typical_frame(in_data, canvas)
+{
+    canvas._tooltips = [];
+
+    var ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.save();
+
+    ctx.font = '12px sans-serif';
+
+    var xpadding = 8;
+    var padding_top = 40;
+    var width = canvas.width - xpadding*2;
+    var height = canvas.height - padding_top - 4;
+        
+    function time_to_x(t)
+    {
+        return xpadding + (t - tmin) / (tmax - tmin) * width;
+    }
+    
+    function x_to_time(x)
+    {
+        return tmin + (x - xpadding) * (tmax - tmin) / width;
+    }
+
+    ctx.save();
+
+    var totalTime = {};
+    var data = {};
+    var tt = 0;
+    var accrued = {};        
+    for (var i = 0; i < in_data.intervals.length; ++i)
+    {
+        var interval = in_data.intervals[i];
+        let label = interval.id; 
+        if (!totalTime[label])
+        {
+            totalTime[label] = [0,0];
+            data[label] = interval;
+            tt = 0;
+            accrued[interval.depth] = 0;
+        }
+        if (interval.depth === 0)
+            tt += interval.duration;
+        totalTime[label][0]++;
+        totalTime[label][1]+=interval.duration;
+    }
+
+    for (let i in totalTime)
+    {
+        var interval = totalTime[i];
+        var x0 = xpadding + (width/5) * data[i].depth;
+        var x1 = x0 + (width/5);
+        var y0 = padding_top + accrued[data[i].depth]/tt * height;
+        var y1 = y0 + interval[1]/tt * height;
+        accrued[data[i].depth] += interval[1];
+
+        if (interval[1]/tt[data[i].depth] * height < 1)
+            continue;
+
+        var label = i;
+
+        ctx.fillStyle = data[i].colour;
+        ctx.strokeStyle = 'black';
+        ctx.beginPath();
+        ctx.rect(x0-0.5, y0-0.5, x1-x0, y1-y0);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = 'black';
+        ctx.fillText(label, x0+2, y0+16-4, Math.max(1, x1-x0-4));
+        
+        canvas._tooltips.push({
+            'x0': x0, 'x1': x1,
+            'y0': y0, 'y1': y1,
+            'text': function(i) { return function() {
+                var t = '<b>' + data[i].id + '</b><br>';
+                t += 'Length: ' + time_label(data[i].duration) + '<br>';
+                if (data[i].attrs)
+                {
+                    data[i].attrs.forEach(function(attr) {
+                        t += attr + '<br>';
+                    });
+                }
+                return t;
+            }} (i)
+        });
+
+    }    
+    ctx.restore();
+}
+
 function set_frames_zoom_handlers(canvas0)
 {
     function do_zoom(event)
@@ -723 +920 @@
         var relativeY = event.pageY - this.offsetTop;
         
 //        var width = 0.001 + 0.5 * relativeY / canvas0.height;
-        var width = 0.001 + 5 * relativeY / canvas0.height;
+        var width = relativeY / canvas0.height;
+        width = width*width;
+        width *= zdata.x_to_t(canvas0.width)/10;
 
         var tavg = zdata.x_to_t(relativeX);
         var tmax = tavg + width/2;
@@ -759 +958 @@
         }
         
         var relativeX = event.pageX - this.offsetLeft;
-        var relativeY = event.pageY - this.offsetTop;
-        var width = 8 + 64 * relativeY / canvas0.height;
+        var relativeY = (event.pageY + this.offsetTop) / canvas0.height;
+        relativeY = relativeY - 0.5;
+        relativeY *= 10;
+        relativeY *= relativeY;
+        var width = relativeY / canvas0.height;
+        width = width*width;
+        width = 6 + width * x_to_time(canvas0.width)/10;
         var zoom = { tmin: x_to_time(relativeX-width/2), tmax: x_to_time(relativeX+width/2) };
         display_hierarchy(main_data, data, canvas0, hdata.range, zoom);
         display_hierarchy(main_data, data, canvas1, zoom, undefined);