put_path_trace/put_path.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Put Path Visualization</title>
<style>
body {background-image:url(img/concrete_seamless.png)}
* {font-family:Verdana;}
div.labels { position:absolute; }
div.process-label { position:absolute; margin-left:5px; font-size:12px}
#process-diagram {
    position:relative;
    border:1px solid #999; 
    overflow:hidden; padding:0; background-color:white }
#process-diagram > svg { position:absolute;left:200px}
.proc-header { }
rect.pblock { fill:#5AD8E6; stroke: black; stroke-width:1px;}
line.msg {stroke:black; stroke-width:2px;}
g.process-label text {font-size:14px}
.t-axis path, .t-axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.node rect {
    cursor: pointer;
    fill: #fff;
    fill-opacity: .5;
    stroke: #3182bd;
    stroke-width: 1.5px;
}

.node text {
    font: 10px sans-serif;
    pointer-events: none;
}

path.link {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
}

span.spawned-process:after { content:","}
span.spawned-process:last-child:after { content:""}
#calls-header {display:none; margin-top:15px; margin-bottom:15px}
</style>
</head>

<body>
    <h1>Put Path Visualization</h1>
    <div id="file-selection"></div>
    <div id="spawned-processes"></div>
    <div id="process-diagram"></div>
    <div id="calls-header">
        Call hierarchy. Click on nodes to toggle them. Shift-Click to 
        expand or collapse recursively.
    </div>
    <div id="calls"></div>

<script src="../d3/d3.min.js"></script>
<script type="text/javascript">


var margin = {top: 30, right: 20, bottom: 30, left: 20},
    width = 960 - margin.left - margin.right,
    barHeight = 20,
    barWidth = width * .8;

var i = 0,
    duration = 400,
    call_root;

var tree = d3.layout.tree()
    .nodeSize([0, 8]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var call_svg = d3.select("#calls").append("svg")
    .attr("width", width + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function update_calls(source) {

    var nodes = tree.nodes(call_root);

    var height = Math.max(500, nodes.length * barHeight + margin.top + margin.bottom);

    d3.select("#calls > svg").transition()
        .duration(duration)
        .attr("height", height);

    // Compute the "layout".
    nodes.forEach(function(n, i) {
        n.x = i * barHeight;
    });

    // Update the nodes…
    var node = call_svg.selectAll("g.node")
        .data(nodes, function(d) { return d.id || (d.id = ++i); });

    var nodeEnter = node.enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
        .style("opacity", 1e-6);

    // Enter any new nodes at the parent's previous position.
    nodeEnter.append("rect")
        .attr("y", -barHeight / 2)
        .attr("height", barHeight)
        .attr("width", barWidth)
        .style("fill", color)
        .on("click", click);

    nodeEnter.append("text")
        .attr("dy", 3.5)
        .attr("dx", 5.5)
        .text(function(d) {
            return d.name + " ( "+d3.format(".3f")(d.end - d.start)+"msecs )";
        });

    // Transition nodes to their new position.
    nodeEnter.transition()
        .duration(duration)
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
        .style("opacity", 1);

    node.transition()
        .duration(duration)
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
        .style("opacity", 1)
        .select("rect")
        .style("fill", color);

    // Transition exiting nodes to the parent's new position.
    node.exit().transition()
        .duration(duration)
        .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
        .style("opacity", 1e-6)
        .remove();

    // Update the links…
    var link = call_svg.selectAll("path.link")
        .data(tree.links(nodes), function(d) { return d.target.id; });

    // Enter any new links at the parent's previous position.
    link.enter().insert("path", "g")
        .attr("class", "link")
        .attr("d", function(d) {
            var o = {x: source.x0, y: source.y0};
            return diagonal({source: o, target: o});
        })
    .transition()
        .duration(duration)
        .attr("d", diagonal);

    // Transition links to their new position.
    link.transition()
        .duration(duration)
        .attr("d", diagonal);

    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
        .duration(duration)
        .attr("d", function(d) {
            var o = {x: source.x, y: source.y};
            return diagonal({source: o, target: o});
        })
    .remove();

    // Stash the old positions for transition.
    nodes.forEach(function(d) {
        d.x0 = d.x;
        d.y0 = d.y;
    });
}

function expand_recursive(d) {
    if (d.calls) {
        d.children = d.calls;
        d.calls = null;
    }

    if (d.children && d.children.length)
        d.children.forEach(expand_recursive);
}

function collapse_recursive(d) {
    if (d.children) {
        d.calls = d.children;
        d.children = null;
    }

    if (d.calls && d.calls.length)
        d.calls.forEach(collapse_recursive);
}

// Toggle children on click.
// Shift will do expand or collapse recursively.
function click(d) {
    if (d3.event.shiftKey) {
        if (d.children) {
            collapse_recursive(d);
        } else {
            expand_recursive(d);
        }
    } else {
        if (d.children) {
            d.calls = d.children;
            d.children = null;
        } else {
            d.children = d.calls;
            d.calls = null;
        }
    }
    update_calls(d);
}

function pblock_click(d) {
    call_root = d;
    call_root.x0 = 0;
    call_root.y0 = 0;
    if (call_root.calls) {
        call_root.children = call_root.calls;
        call_root.calls = null;
    }
    d3.select("#calls-header").style("display", "block");
    d3.selectAll("rect.pblock").style("fill", "#5AD8E6");
    d3.select(this).style("fill", "red");
    update_calls(call_root);
}

function color(d) {
    return "#3182bd";
     // return d.calls ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}


d3.json("data_files.json", function(err, data) {
    if (err) {
        alert("Error trying to load list of data files: " + err.toString());
        return;
    }
    var fileSelect = d3.select("#file-selection").append("select");

    fileSelect.selectAll("option").data(data.data_files)
        .enter().append("option").attr("value", function(d){return d.name;})
        .text(function(d){return d.label;});

    var fileOptions = d3.selectAll("select option");

    fileSelect.on("change", function() {
        var selectedIndex = this.selectedIndex;
        if (selectedIndex > 0) {
            var filename = this.options[selectedIndex].value;
            load_data(filename);
        }
    });
    if (data.data_files && data.data_files.length)
        load_data(data.data_files[0].name);
});

function load_data(filename) {

d3.json(filename, function(err, data) {
    if (err) {
        alert(err.toString());
        return;
    }
data.duration = data.end - data.start;

var panExtent = [data.start-data.duration/10.0, data.end+data.duration/10.0];
var lw = 250, w = 900, tw = lw + w;
var axis_height = 20;
var pblock_height = 12;
var sh = 30, th = sh * data.processes.length + axis_height;
d3.select("#process-diagram").style("height", th+"px");
var tScale = d3.scale.linear()
        .domain([0, data.duration])
        .range([0, w]);
var visPanel = d3.select("#process-diagram");
visPanel.selectAll(".labels").remove();
visPanel.selectAll("svg").remove();
var label_container = visPanel.append("div").classed("labels", true).style("width", lw + "px");
var labels = label_container.selectAll("div.process-label")
    .data(data.processes)
    .enter()
    .append("div").classed("process-label", true)
    .style("top", function(d, i) {
        var val = proc2height(d, i);
        return (val - 10) + "px";
    })
    .text(function(d){ return d.label + " : " + d.pid; });

function fmtTime(t) {
    return t + "s";
}

var tAxis = d3.svg.axis().scale(tScale).orient("top")
    .ticks(10).tickFormat(fmtTime)
    .tickFormat(d3.format(".3f"))
    .tickSize(2, 5);

var zoom = d3.behavior.zoom()
    .scaleExtent([1,1000])
    .x(tScale)
    .on("zoom", draw);

var canvas = visPanel
    .append("svg:svg")
    .attr("id", "main-svg")
    .attr("width", w)
    .attr("height", th)
    .call(zoom)
    ;

var axisG = canvas.append("g").classed("t-axis", true).attr("transform", "translate(0, "+(th)+")");

// build the arrow.
canvas.append("svg:defs").selectAll("marker")
    .data(["end"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 8)
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var content = canvas.append("g")
    .classed("diagram", true)
    ;
function proc2height(d, i) { return (i + 0.5) * sh; }

var procs = content.append("g").attr("class", "processes")
    .selectAll("g.process")
    .data(data.processes)
    .enter()
    .append("g")
    .classed("process", true)
    .attr("transform", function(d,i){return "translate(0,"+((i+.5)*sh-pblock_height/2.0)+")";})
    ;

var plines = procs.append("line")
    .attr("stroke", "black").attr("stroke-width", "1px")
    .attr("stroke-dasharray", "1,1")
   .attr("x1", 0).attr("y1", pblock_height / 2.0) 
   .attr("x2", tScale(data.duration)).attr("y2", pblock_height / 2.0); 
var idFun = function(d) { return d;};

var pblocks = procs.selectAll("rect.pblock")
    .data(function(d){return d.runs;})
    .enter().append("rect")
    .attr("height", pblock_height)
    .classed("pblock", true)
    .on("click", pblock_click)
    ;

var msg_container = content.append("g").classed("msgs", true);

function time2x(d) { return tScale(d.time); };
function to_proc_y(msg) {
    return proc2height(null, msg.to);
}

function from_proc_y(msg) {
    var ofs = msg.from > msg.to ? -pblock_height / 2.0 : pblock_height / 2.0;
    return proc2height(null, msg.from) + ofs;
}

if (data.spawned && data.spawned.length) {
    var spawned_container = d3.select("#spawned-processes");
    spawned_container.append("span").text("Spawned processes: ");
    var spawned = spawned_container.selectAll("span.spawned-process")
        .data(data.spawned).enter()
        .append("span").classed("spawned-process", true)
        .text(function(d) {return d});
}

var msgs = msg_container.selectAll("line.msg")
    .data(data.messages)
    .enter()
    .append("line")
    .classed("msg", true)
    .attr("marker-end", "url(#end)")
    ;

    /* Add msg payload to arrow's tooltip */
    msgs.append("title").text(function(d){return d.payload;})
;

draw();

function draw() {
    zoom.translate(panLimit());
    tAxis(axisG);
    pblocks.attr("width", function(d){return tScale(d.end) - tScale(d.start);})
    .attr("x", function(d){return tScale(d.start);});

    msgs.attr("x1", time2x)
    .attr("x2", time2x)
    .attr("y1", from_proc_y)
    .attr("y2", to_proc_y);
}

function panLimit() {
    var x = tScale,
    omin = data.start, omax = data.end,
    xdom = x.domain(),
    dmin = xdom[0], dmax = xdom[1], dlength = dmax - dmin,
    emin = panExtent[0], emax = panExtent[1],
    zscale = zoom.scale(),
    factor = w / dlength,
    xmin = (omin - emin) * factor, 
    xmax = (omax - emax) * factor - w * (zscale - 1),
    tx = dmin < emin ?  xmin : (dmax > emax ?  xmax : zoom.translate()[0]),
    ty = zoom.translate()[1]
        ;

    console.log("emin = "+emin+", emax = "+emax+", factor = "+factor);
    console.log("dmin = "+dmin+", dmax = "+dmax+", zscale = "+zscale);
    console.log("xmin = "+xmin+", xmax = "+xmax+", tr = "+zoom.translate());
    return [tx,ty];
}
});
}
</script>
</body>
</html>