<!DOCTYPE html>
<meta charset="utf-8">
<style>

html, body {
    width: 95%;
    height: 95%;
}

.link {
    stroke-width: 1px;
    fill: none;
}

.backlink {
    stroke-dasharray: 2 2;
}

.brush {
    fill: lightgrey;
    opacity: 0.1;
}
.selection {
    fill: lightgrey;
    opacity: 0.4;
}
.disabledSelection {
    fill: lightgrey;
    opacity: 0;
}

.node {
    fill: #ccc;
    stroke: white;
    stroke-width: 0px;
}

.node.fixed {
    fill: #f00;
}

.tooltip {
    border: 1px solid navy;
    margin: 10px;        
    background-color: rgba(240, 230, 140, 0.3);    
}    

#controls {
    width: 100%;
}

#main {
    height: 90%;
    width: 100%;
}
 
</style>

<body>

<fieldset id="controls">
    <legend>View Type</legend>

    <input type="radio" name="layoutType" id="layoutTypeCalls" value="calls">Calls</input>
    <input type="radio" name="layoutType" id="layoutTypeInternal" value="internal">Internal time</input>
    <input type="radio" name="layoutType" id="layoutTypeTotal" value="total">Total time</input>

    <span id="callsStuff">
        <input type="checkbox" name="fisheye" id="fisheye" value="total">Fisheye</input>
        
        <input type="radio" name="edges" id="edgesSplines" value="spline">Spline edges</input>
        <input type="radio" name="edges" id="edgesStraight" value="straight">Straight edges</input>
    </span>

</fieldset>

<div id = "main"></div>

<script>
{{ d3 }} 
</script>

<script>
{{ fisheye }} 
</script>

<script>
{{ profileEye }}
</script>

<script>

var data =  JSON.parse({{ data|safe }});
var nodes = data.nodes,
    links = data.edges;

d3
    .select("#main")
    .datum({"nodes": nodes,
        "links": links})
    .call(profileEye);
</script>    