<!DOCTYPE html>
<html>
<head>
<link href="static/images/title.ico" rel="icon">
<title>anakin dash board</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/bootstraptest/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/static/style.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/static/cytoscape/qtip2/jquery.qtip.css"/>
<script src="/static/bootstraptest/jquery.min.js"></script>
<script src="/static/bootstraptest/js/bootstrap.min.js"></script>
<script src="/static/echart/echarts.min.js"></script> 
<script src="/static/cytoscape/cytoscape.min.js"></script>
<script src="/static/cytoscape/dagre.js"></script>
<script src="/static/cytoscape/cytoscape-dagre.js"></script>
<script src="/static/cytoscape/qtip2/jquery.qtip.js"></script>
<script src="/static/cytoscape/cytoscape-qtip.js"></script>
<script src="/static/cytoscape/cytoscape-node-html-label.min.js"></script>
</head>
<body>

<div id=nav>
	<a href="#"><h1>Anakin Graph Board</h1></a>
	<strong></strong>

  <ul>
	<li><a href="/">Home</a>
    <li><a class=active data-default="true" href="/optimization">After Optimizer</a>
	<li><a href="https://github.com/PaddlePaddle/Anakin" target="_blank"> Anakin source </a>
    <li><a href="https://github.com/PaddlePaddle/Anakin/tree/master/tools/external_converter_v2" target="_blank">Anakin Parser</a>
  </ul>
  <ul>
    <li><a href="#configuration">Configuration</a>
	<li><a href="#graph">Graph</a>
    <li><a href="#analysis">Analysis</a>
    <li><a href="#about"> About </a>
  </ul>
</div>
	
<board>
	<section id=configuration class=first>
	<h1> Dash Board </h1>
	</section>
	<section id=configuration>
		<h2> Configuration </h2>
     	<table class="table field" style="font:bold 15px verdana,arial,sans-serif;">
      	<thead>
        	<tr>
          		<th class="title" style="width:25%">Flags</th>
          		<th class="title" style="width:40%">Config Value</th>
          		<th class="title" style="width:35%">Doc</th>
        	</tr>
		</thead>
		<tbody>
        {% for item in parser_config %}
        	<tr>
          	<td class="item">{{item[0] | safe}}</td>
          	<td class="item">{{item[1] | safe}}</td>
			<td class="item">{{item[2] | safe}}</td>
			<!--<td class="item"><a class="btn btn-danger btn-xs" id="deletearticle" role="button" href="/download/{{item[2]}}"><span class="glyphicon glyphicon-download-alt " aria-hidden="true"></span></a></td>-->
        	</tr>
        	{% endfor %}
      	</tbody>
		</table>
	</section>

	<section id=graph>
		<h2> Graph 
			<div class="btn-group" role="group" aria-label="..."> 
				<button type="button" class="btn btn-sm btn-success" onclick="download();"> 
					<span class="glyphicon glyphicon-download-alt " aria-hidden="true"></span> 
				</button> 
			</div>
		</h2>
		<div style="width: 697px; height: 4000px;" class="field" id="graph_board"></div>
	</section>

	<section id=analysis>
		<h2> Analysis </h2>

		<section_content id=memory>
		<h2> Memory Optimization</h2> 
		<div id="memory_bar" style="width: 700px;height:400px;">
		</div> 
		</section_content>

		<section_content id=other>
			<h2> other </h2>
			<p>...</p>
		</section_content>

	</section>

	<section id=about>
		<h2> About </h2>
		<p>Anakin external converter designed by hac for parsing external DL model and analysing the execution of the graph generated by anakin<i>(version 2)</i> inference framework. The external framework of the following are supported:
        </p>
        <table style="margin-bottom: 1em">
            <tbody>
                <tr>
                    <th>Caffe</th>
                    <td>Version (latest)</td>
                </tr>
                <tr>
                    <th>paddle</th>
                    <td>Version (latest)</td>
                </tr>
                <tr>
                    <th>lego</th>
                    <td>Version (latest)</td>
                </tr>
            </tbody>
        </table>
	</section>

</board>

<div id="tooltipbox"></div>
<script type="text/javascript">
	// Create the graph
	var cy_graph = cytoscape({
		container: document.getElementById('graph_board'),

		boxSelectionEnabled: false,
  		autounselectify: true,
		panningEnabled: true,
		zoom: 0.8,
		minZoom: 0.1,
		maxZoom: 1,
		style: cytoscape.stylesheet()
    		.selector('node')
    	    .css({
					'width': 'label',
					'height': 'label',
					'padding': 30,
					'content': 'data(name)',
					'text-valign': 'center',
					'font-family': 'sans-serif',
					'font-size': 34,
					'color': 'white',
					'text-outline-width': 3,
					'text-outline-color': '#333333',
					'shape':'roundrectangle',
					'background-color': '#eeeeee',
					'border-width': 1,
					'border-color': 'gray',
				      })
		    .selector('edge')
			.css({ 
					'curve-style': 'bezier',
				    'target-arrow-shape': 'triangle',
				    'width': 8,
				    'line-color': '#ddd',
				    'target-arrow-color': '#aaa'
			        }),

  		elements: {{ graph_def | tojson | safe }},

  		layout: {
			name: 'dagre',
			nodeSep: undefined, // the separation between adjacent nodes in the same rank
			edgeSep: undefined, // the separation between adjacent edges in the same rank
			rankSep: undefined, // the separation between adjacent nodes in the same rank
			rankDir: 'TB', // 'TB' for top to bottom flow, 'LR' for left to right,
			ranker: 'longest-path', // Type of algorithm to assign a rank to each node in the input graph. Possible values: 'network-simplex', 'tight-tree' or 'longest-path'
			minLen: function( edge ){ return 1.5; },

			fit: true,
    		directed: true,
			avoidOverlap: true,
			animate: false,
			spacingFactor: 0,
			padding: 0 
		}
	});
	// fit the field
	cy_graph.fit();
	// fix the graph
	cy_graph.autolock( true );

	// set node tips label(lane / exec order / sync flags)
	cy_graph.nodeHtmlLabel([
		{
			query: 'node',
			halign: 'left',
			valign: 'center',
			halignBox: 'left', 
			valignBox: 'center', 
			cssClass: '',
			tpl: function(data){
				if(!data.need_wait){
					return '<h1><span class="label label-info">exec( ' + data.exec_count + ' )</span></h1>' + 
				   	   	   '<h1><span class="label label-success">lane( ' + data.lane + ' )</span></h1>';
				} else {
					return '<h1><span class="label label-info">exec ' + data.exec_count + '</span></h1>' +
						   '<h1><span class="label label-success">lane ' + data.lane + '</span></h1>' +
						   '<h1><span class="label label-danger">SYNC</span></h1>';
				}
			}
		}
	]);

	var graph_attrs = {{ attrs | tojson | safe }};
	// launch qtips for node
	cy_graph.on('mouseover', 'node', function(evt){
		var node = evt.target;
		var inner_html = "";
		// get attrs of target node
		var len = graph_attrs.length;
		for(var i=0; i < len; i++) {
			if(graph_attrs[i].key_name === node.id()) {
				var have_tensor = 'false';
				inner_html = "<head_><b>Parameter</b></head_>" + "<area_>";
				var inner_len = graph_attrs[i].key_attrs.length;
				for(var j=0; j < inner_len; j++) {
					if(graph_attrs[i].key_attrs[j].id.indexOf("weight") === -1){
						inner_html += "<key>"+ graph_attrs[i].key_attrs[j].id + " ( <i>" + graph_attrs[i].key_attrs[j].type + "</i> ): </key> <value>" + graph_attrs[i].key_attrs[j].value + "</value><br>";
					} else {
						have_tensor = 'true';
					}
				}
				if(have_tensor == 'true') {
					inner_html += "</area_>";
					inner_html += "<head_><b>Tensor shape</b></head_>" + "<area_>";
					for(var j=0; j < inner_len; j++) {
						if(graph_attrs[i].key_attrs[j].id.indexOf("weight") !== -1){
							inner_html += "<key>"+ graph_attrs[i].key_attrs[j].id + "( <i>" + graph_attrs[i].key_attrs[j].type + "</i> ): </key> <value>" + graph_attrs[i].key_attrs[j].value + "</value><br>";
						}
					}
					inner_html += "</area_>";
				}
				break;
			}
		}
		document.getElementById('tooltipbox').innerHTML = inner_html;
		node.qtip({ 
			show: {
				solo: true,
				ready: true,
				effect: function() { $(this).fadeTo(500, 1); }
			},
			hide: {
				effect: function() { $(this).slideUp(); }
			},
			content: { 
				text: function(api) {
					return document.getElementById('tooltipbox').innerHTML;
				},
				title: "name: " + node.id()
			}, 
			position: {
				my: 'left top',
				at: 'right top',
				target: node,
				adjust: {
					x: 1,
					y: 2
				}
			},
			style: { 
				classes: 'qtip-dark qtip-rounded qtip-shadow' 
			}
		});
		//console.log( 'tapped ' + node.id() );
	});
	var mem_info = {{ mem_info | tojson | safe }};
</script>
<script src="/static/js/cytoscape_functional.js"></script>
<script src="/static/js/cytoscape_functional_for_optimization.js"> </script>

<script type="text/javascript"> 
</script>

</body>
</html>
