flm01/server/api/webmachine/trace/wmtrace.js

var HIGHLIGHT = '#cc00cc';
var REGULAR = '#666666';

var cols = {
    'a':173,
    'b':325,
    'c':589,
    'd':797,
    'e':1005,
    'f':1195,
    'g':1402,
    'gg':1515,
    'h':1572,
    'i':1799,
    'j':1893,
    'k':1988,
    'l':2157,
    'll':2346,
    'm':2403,
    'mm':2535,
    'n':2554,
    'o':2649,
    'oo':2781,
    'ooo':2801,
    'p':2894,
    'q':3007
};

var rows = {
    '1':221,
    '2':298,
    '3':373,
    '4':448,
    '5':524,
    '6':599,
    '7':675,
    '8':751,
    '9':826,
    '10':902,
    '11':977,
    '12':1053,
    '13':1129,
    '14':1204,
    '15':1280,
    '16':1355,
    '17':1431,
    '18':1506,
    '19':1583,
    '20':1658,
    '21':1734,
    '22':1809,
    '23':1885,
    '24':1961,
    '25':2036,
    '26':2112
};

var edges = {
    'b14b13':['b14','b13'],

    'b13b12':['b13','b12'],
    'b13503':['b13','503'],

    'b12b11':['b12','b11'],
    'b12501':['b12','501'],

    'b11b10':['b11','b10'],
    'b11414':['b11','414'],

    'b10b9':['b10','b9'],
    'b10405':['b10','405'],

    'b9b8':['b9','b8'],
    'b9400':['b9','400'],

    'b8b7':['b8','b7'],
    'b8401':['b8','401'],

    'b7b6':['b7','b6'],
    'b7403':['b7','403'],

    'b6b5':['b6','b5'],
    'b6501':['b6','501a'],

    'b5b4':['b5','b4'],
    'b5415':['b5','415'],

    'b4b3':['b4','b3'],
    'b4413':['b4','b4'],

    'b3c3':['b3','c3'],
    'b3200':['b3','200'],

    'c3c4':['c3','c4'],
    'c3d4':['c3','d3','d4'],

    'c4d4':['c4','d4'],
    'c4406':['c4','406'],

    'd4d5':['d4','d5'],
    'd4e5':['d4','e4','e5'],

    'd5e5':['d5','e5'],
    'd5406':['d5','d7','406'],

    'e5e6':['e5','e6'],
    'e5f6':['e5','f5','f6'],

    'e6f6':['e6','f6'],
    'e6406':['e6','e7','406'],

    'f6f7':['f6','f7'],
    'f6g7':['f6','g6','g7'],

    'f7g7':['f7','g7'],
    'f7406':['f7','406'],

    'g7g8':['g7','g8'],
    'g7h7':['g7','h7'],

    'g8g9':['g8','g9'],
    'g8h10':['g8','h8','h10'],

    'g9g11':['g9','g11'],
    'g9h10':['g9','gg9','gg10','h10'],

    'g11h10':['g11','gg11','gg10','h10'],
    'g11412':['g11','g18','412a'],

    'h7i7':['h7','i7'],
    'h7412':['h7','412'],

    'h10h11':['h10','h11'],
    'h10i12':['h10','i10','i12'],

    'h11h12':['h11','h12'],
    'h11i12':['h11','i11','i12'],

    'h12i12':['h12','i12'],
    'h12412':['h12','412a'],

    'i4p3':['i4','i3','p3'],
    'i4301':['i4','301'],

    'i7i4':['i7','i4'],
    'i7k7':['i7','k7'],

    'i12l13':['i12','l12','l13'],
    'i12i13':['i12','i13'],

    'i13k13':['i13','k13'],
    'i13j18':['i13','i17','j17','j18'],

    'j18412':['j18','412a'],
    'j18304':['j18','304'],

    'k5l5':['k5','l5'],
    'k5301':['k5','301'],

    'k7k5':['k7','k5'],
    'k7l7':['k7','l7'],

    'k13j18':['k13','k17','j17','j18'],
    'k13l13':['k13','l13'],

    'l5m5':['l5','m5'],
    'l5307':['l5','307'],

    'l7m7':['l7','m7'],
    'l7404':['l7','l8','404'],

    'l13l14':['l13','l14'],
    'l13m16':['l13','m13','m16'],

    'l14l15':['l14','l15'],
    'l14m16':['l14','m14','m16'],

    'l15l17':['l15','l17'],
    'l15m16':['l15','ll15','ll16','m16'],

    'l17m16':['l17','ll17','ll16','m16'],
    'l17304':['l17','304'],

    'm5n5':['m5','n5'],
    'm5410':['m5','m4','410'],

    'm7n11':['m7','n7','n11'],
    'm7404':['m7','404'],

    'm16m20':['m16','m20'],
    'm16n16':['m16','n16'],

    'm20o20':['m20','o20'],
    'm20202':['m20','202'],

    'n5n11':['n5','n11'],
    'n5410':['n5','410'],

    'n11p11':['n11','p11'],
    'n11303':['n11','303'],

    'n16n11':['n16','n11'],
    'n16o16':['n16','o16'],

    'o14p11':['o14','o11','p11'],
    'o14409':['o14','409a'],

    'o16o14':['o16','o14'],
    'o16o18':['o16','o18'],

    'o18200':['o18','200a'],
    'o18300':['o18','oo18','300'],

    'o20o18':['o20','o18'],
    'o20204':['o20','204'],

    'p3p11':['p3','p11'],
    'p3409':['p3','409'],

    'p11o20':['p11','p20','o20'],
    'p11201':['p11','q11','201']
};

var ends = {
    '200': {col:'a', row:'3', width:190},
    '200a': {col:'mm', row:'18', width:116},
    '201': {col:'q', row:'12', width:154},
    '202': {col:'m', row:'21', width:116},
    '204': {col:'o', row:'21', width:152},

    '300': {col:'oo', row:'19', width:152},
    '301': {col:'k', row:'4', width:154},
    '303': {col:'m', row:'11', width:116},
    '304': {col:'l', row:'18', width:116},
    '307': {col:'l', row:'4', width:154},

    '400': {col:'a', row:'9', width:190},
    '401': {col:'a', row:'8', width:190},
    '403': {col:'a', row:'7', width:190},
    '404': {col:'m', row:'8', width:116},
    '405': {col:'a', row:'10', width:190},
    '406': {col:'c', row:'7', width:152},
    '409': {col:'p', row:'2', width:116},
    '409a': {col:'oo', row:'14', width:116},
    '410': {col:'n', row:'4', width:116},
    '412': {col:'h', row:'6', width:152},
    '412a': {col:'h', row:'18', width:152},
    '413': {col:'a', row:'4', width:190},
    '414': {col:'a', row:'11', width:190},
    '415': {col:'a', row:'5', width:190},

    '501a': {col:'a', row:'6', width:190},
    '501': {col:'a', row:'12', width:190},
    '503': {col:'a', row:'13', width:190}
};

var canvas;

function decorateTrace() {
    trace[0].x = cols[trace[0].d[0]];
    trace[0].y = rows[trace[0].d.slice(1)];
    trace[0].previewCalls = previewCalls(trace[0]);

    for (var i = 1; i < trace.length; i++) {
        trace[i].x = cols[trace[i].d[0]];
        trace[i].y = rows[trace[i].d.slice(1)];
        trace[i].previewCalls = previewCalls(trace[i]);
        
        var path = edges[trace[i-1].d+trace[i].d];
        if (path) {
            trace[i].path = [path.length-1];
            for (var p = 1; p < path.length; p++) {
                trace[i].path[p-1] = getSeg(path[p-1], path[p], p == path.length-1);
            }
        } else {
            trace[i].path = [];
        }
    }
    
    var path = edges[trace[i-1].d+response.code];
    if (path) {
        var end = ends[path[path.length-1]];
        response.x = cols[end.col];
        response.y = rows[end.row];
        response.width = end.width;
        response.type = 'normal';

        response.path = [path.length-1];
        for (var p = 1; p < path.length; p++) {
            response.path[p-1] = getSeg(path[p-1], path[p], p == path.length-1);
        }
    } else {
        var ld = trace[trace.length-1];
        response.x = ld.x+50;
        response.y = ld.y-50;
        response.width = 38;
        response.type = 'other';

        response.path = [
            {x1: ld.x+10, y1: ld.y-10,
             x2: ld.x+36, y2: ld.y-36}
        ];
    }
};

function previewCalls(dec) {
    var prev = '';
    for (var i = 0; i < dec.calls.length; i++) {
        if (dec.calls[i].output != "wmtrace_not_exported")
            prev += '<li>'+dec.calls[i].module+':'+dec.calls[i]['function']+'</li>';
    }
    return prev;
};

function drawTrace() {
    drawDecision(trace[0]);
    for (var i = 1; i < trace.length; i++) {
        drawPath(trace[i].path);
        drawDecision(trace[i]);
    }

    drawPath(response.path);
    drawResponse();
};

function drawResponse() {
    if (response.type == 'normal') {
        var context = canvas.getContext('2d');
        context.strokeStyle=HIGHLIGHT;
        context.lineWidth=4;

        context.beginPath();
        context.rect(response.x-(response.width/2),
                     response.y-19,
                     response.width,
                     38);
        context.stroke();
    } else {
        var context = canvas.getContext('2d');
        context.strokeStyle='#ff0000';
        context.lineWidth=4;

        context.beginPath();
        context.arc(response.x, response.y, 19,
                    0, 2*3.14159, false);
        context.stroke();

    }
};

function drawDecision(dec) {
    var context = canvas.getContext('2d');

    if (dec.previewCalls == '')
        context.strokeStyle=REGULAR;
    else
        context.strokeStyle=HIGHLIGHT;
    context.lineWidth=4;

    context.beginPath();
    context.moveTo(dec.x,    dec.y-19);
    context.lineTo(dec.x+19, dec.y);
    context.lineTo(dec.x,    dec.y+19);
    context.lineTo(dec.x-19, dec.y);
    context.closePath();
    context.stroke();
};

function drawPath(path) {
    var context = canvas.getContext('2d');
    context.strokeStyle=REGULAR;
    context.lineWidth=4;

    context.beginPath();
    context.moveTo(path[0].x1, path[0].y1);
    for (var p = 0; p < path.length; p++) {
        context.lineTo(path[p].x2, path[p].y2);
    }
    context.stroke();
};

function getSeg(p1, p2, last) {
    var seg = {
        x1:cols[p1[0]],
        y1:rows[p1.slice(1)]
    };
    if (ends[p2]) {
        seg.x2 = cols[ends[p2].col];
        seg.y2 = rows[ends[p2].row];
    } else {
        seg.x2 = cols[p2[0]];
        seg.y2 = rows[p2.slice(1)];
    }

    if (seg.x1 == seg.x2) {
        if (seg.y1 < seg.y2) {
            seg.y1 = seg.y1+19;
            if (last) seg.y2 = seg.y2-19;
        } else {
            seg.y1 = seg.y1-19;
            if (last) seg.y2 = seg.y2+19;
        }
    } else {
        //assume seg.y1 == seg.y2
        if (seg.x1 < seg.x2) {
            seg.x1 = seg.x1+19;
            if (last) seg.x2 = seg.x2-(ends[p2] ? (ends[p2].width/2) : 19);
        } else {
            seg.x1 = seg.x1-19;
            if (last) seg.x2 = seg.x2+(ends[p2] ? (ends[p2].width/2) : 19);
        }
    }
    return seg;
};

function traceDecision(name) {
    for (var i = trace.length-1; i >= 0; i--)
        if (trace[i].d == name) return trace[i];
};

var detailPanels = {};
function initDetailPanels() {
    var windowWidth = document.getElementById('sizetest').clientWidth;
    var infoPanel = document.getElementById('infopanel');
    var panelWidth = windowWidth-infoPanel.offsetLeft;

    var panels = {
        'request': document.getElementById('requestdetail'),
        'response': document.getElementById('responsedetail'),
        'decision': document.getElementById('decisiondetail')
    };

    var tabs = {
        'request': document.getElementById('requesttab'),
        'response': document.getElementById('responsetab'),
        'decision': document.getElementById('decisiontab')
    };

    var decisionId = document.getElementById('decisionid');
    var decisionCalls = document.getElementById('decisioncalls');
    var callInput = document.getElementById('callinput');
    var callOutput = document.getElementById('calloutput');

    var lastUsedPanelWidth = windowWidth-infoPanel.offsetLeft;

    var setPanelWidth = function(width) {
        infoPanel.style.left = (windowWidth-width)+'px';
        canvas.style.marginRight = (width+20)+'px';
        panelWidth = width;
    };
    setPanelWidth(panelWidth);

    var ensureVisible = function() {
        if (windowWidth-infoPanel.offsetLeft < 10)
            setPanelWidth(lastUsedPanelWidth);
    };

    var decChoices = '';
    for (var i = 0; i < trace.length; i++) {
        decChoices += '<option value="'+trace[i].d+'">'+trace[i].d+'</option>';
    }
    decisionId.innerHTML = decChoices;
    decisionId.selectedIndex = -1;

    decisionId.onchange = function() {
        detailPanels.setDecision(traceDecision(decisionId.value));
    }

    detailPanels.setDecision = function(dec) {
        decisionId.value = dec.d;

        var calls = [];
        for (var i = 0; i < dec.calls.length; i++) {
            calls.push('<option value="'+dec.d+'-'+i+'">');
            calls.push(dec.calls[i].module+':'+dec.calls[i]['function']);
            calls.push('</option>');
        }
        decisionCalls.innerHTML = calls.join('');
        decisionCalls.selectedIndex = 0;

        decisionCalls.onchange();
    };

    detailPanels.show = function(name) {
        for (p in panels) {
            if (p == name) {
                panels[p].style.display = 'block';
                tabs[p].className = 'selectedtab';
            }
            else {
                panels[p].style.display = 'none';
                tabs[p].className = '';
            }
        }
        ensureVisible();
    };

    detailPanels.hide = function() {
        setPanelWidth(0);
    }

    decisionCalls.onchange = function() {
        var val = decisionCalls.value;
        if (val) {
            var dec = traceDecision(val.substring(0, val.indexOf('-')));
            var call = dec.calls[parseInt(val.substring(val.indexOf('-')+1, val.length))];

            if (call.output != "wmtrace_not_exported") {
                callInput.style.color='#000000';
                callInput.innerHTML = call.input;
                if (call.output != null) {
                    callOutput.style.color = '#000000';
                    callOutput.innerHTML = call.output;
                } else {
                    callOutput.style.color = '#ff0000';
                    callOutput.textContent = 'Error: '+call.module+':'+call['function']+' never returned';
                }
            } else {
                callInput.style.color='#999999';
                callInput.textContent = call.module+':'+call['function']+' was not exported';
                callOutput.textContent = '';
            }
        } else {
            callInput.textContent = '';
            callOutput.textContent = '';
        }
    };

    var headersList = function(headers) {
        var h = '';
        for (n in headers) h += '<li>'+n+': '+headers[n];
        return h;
    };

    document.getElementById('requestmethod').innerHTML = request.method;
    document.getElementById('requestpath').innerHTML = request.path;
    document.getElementById('requestheaders').innerHTML = headersList(request.headers);
    document.getElementById('requestbody').innerHTML = request.body;

    document.getElementById('responsecode').innerHTML = response.code;
    document.getElementById('responseheaders').innerHTML = headersList(response.headers);
    document.getElementById('responsebody').innerHTML = response.body;


    var infoControls = document.getElementById('infocontrols');
    var md = false;
    var dragged = false;
    var msoff = 0;
    infoControls.onmousedown = function(ev) {
        md = true;
        dragged = false;
        msoff = ev.clientX-infoPanel.offsetLeft;
    };

    infoControls.onclick = function(ev) {
        if (dragged) {
            lastUsedPanelWidth = panelWidth;
        }
        else if (panelWidth < 10) {
            switch(ev.target.id) {
            case 'requesttab': detailPanels.show('request'); break;
            case 'responsetab': detailPanels.show('response'); break;
            case 'decisiontab': detailPanels.show('decision'); break;
            default: ensureVisible();
            }
        } else {
            var name = 'none';
            switch(ev.target.id) {
            case 'requesttab': name = 'request'; break;
            case 'responsetab': name = 'response'; break;
            case 'decisiontab': name = 'decision'; break;
            }

            if (panels[name] && panels[name].style.display != 'block')
                detailPanels.show(name);
            else
                detailPanels.hide();
        }

        return false;
    };

    document.onmousemove = function(ev) {
        if (md) {
            dragged = true;
            panelWidth = windowWidth-(ev.clientX-msoff);
            if (panelWidth < 0) {
                panelWidth = 0;
                infoPanel.style.left = windowWidth+"px";
            }
            else if (panelWidth > windowWidth-21) {
                panelWidth = windowWidth-21;
                infoPanel.style.left = '21px';
            }
            else
                infoPanel.style.left = (ev.clientX-msoff)+"px";

            canvas.style.marginRight = panelWidth+20+"px";
            return false;
        }
    };

    document.onmouseup = function() { md = false; };

    window.onresize = function() {
        windowWidth = document.getElementById('sizetest').clientWidth;
        infoPanel.style.left = windowWidth-panelWidth+'px';
    };
};

window.onload = function() {
    canvas = document.getElementById('v3map');

    initDetailPanels();

    var scale = 0.25;
    var coy = canvas.offsetTop;
    function findDecision(ev) {
        var x = (ev.clientX+window.pageXOffset)/scale;
        var y = (ev.clientY+window.pageYOffset-coy)/scale;

        for (var i = trace.length-1; i >= 0; i--) {
            if (x >= trace[i].x-19 && x <= trace[i].x+19 &&
                y >= trace[i].y-19 && y <= trace[i].y+19)
                return trace[i];
        }
    };

    var preview = document.getElementById('preview');
    var previewId = document.getElementById('previewid');
    var previewCalls = document.getElementById('previewcalls');
    function previewDecision(dec) {
        preview.style.left = (dec.x*scale)+'px';
        preview.style.top = (dec.y*scale+coy+15)+'px';
        preview.style.display = 'block';
        previewId.textContent = dec.d;

        previewCalls.innerHTML = dec.previewCalls;
    };

    function overResponse(ev) {
        var x = (ev.clientX+window.pageXOffset)/scale;
        var y = (ev.clientY+window.pageYOffset-coy)/scale;
        
        return (x >= response.x-(response.width/2)
                && x <= response.x+(response.width/2)
                && y >= response.y-19 && y <= response.y+19);
    };

    decorateTrace();

    var bg = new Image(3138, 2184);

    function drawMap() {
        var ctx = canvas.getContext("2d");

        ctx.save();
        ctx.scale(1/scale, 1/scale);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, 3138, 2184);
        ctx.restore();

        ctx.drawImage(bg, 0, 0);
        drawTrace();
    };

    bg.onload = function() {
        canvas.getContext("2d").scale(scale, scale);
        drawMap(scale);

        canvas.onmousemove = function(ev) {
            if (findDecision(ev)) {
                canvas.style.cursor = 'pointer';
                previewDecision(findDecision(ev));
            }
            else {
                preview.style.display = 'none';
                if (overResponse(ev))
                    canvas.style.cursor = 'pointer';
                else
                    canvas.style.cursor = 'default';
            }
        };

        canvas.onclick = function(ev) {
            var dec = findDecision(ev);
            if (dec) {
                detailPanels.setDecision(dec);
                detailPanels.show('decision');
            } else if (overResponse(ev)) {
                detailPanels.show('response');
            }
        };

        document.getElementById('zoomin').onclick = function() {
            scale = scale*2;
            canvas.getContext("2d").scale(2, 2);
            drawMap();
        };
 
        document.getElementById('zoomout').onclick = function() {
            scale = scale/2;
            canvas.getContext("2d").scale(0.5, 0.5);
            drawMap();
        };
    };

    bg.onerror = function() {
        alert('Failed to load background image.');
    };

    bg.src = 'static/map.png';
};