{% extends "layout.html" %}
{% block content %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.17.1/cytoscape.min.js" integrity="sha256-uZV2wRlscgr52q3Wb3Oew0rKCPsM3g4aBTv46sF4qzg=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/file-saver@1.3.8/FileSaver.js"></script>
<script src="https://unpkg.com/cytoscape-svg/cytoscape-svg.js"></script>

<div class="row">
  <div class="column left" >

<h4> {{ message |safe}} </h4>
  </div>

  <div class="column right">
 {{ message2 |safe}} 
 <br>
 <br>

 <button style="color: #008CBA; width: 120px; height: 30px;" onclick="saveAsSvg()">Save as SVG</button>
<button style="color: #008CBA; width: 120px; height: 30px;" onclick="window.location=getSvgUrl()">View SVG</button>

</div>

 <div id="cy"></div>

	<script>
		var cy = cytoscape({
			container: document.getElementById('cy'),
			style: [
				{ selector: 'node',
					css: {
						'content': 'data(id)',
						'text-valign': 'center',
						'text-halign': 'center',
						'background-color': 'data(nodecolor)',
						'font-weight': 'data(fontweight)',
						'color':'data(fontcolor)',
						'font-size': '9%'
					}
				},
				{ selector: 'edge',
					css: {
						'content': 'data(sentCnt)',
						'line-color':'black',
			            'opacity': 'mapData(sentCnt, 1, 50, 0.3, 1)', 
			            'width': 'mapData(sentCnt, 1, 50, 0.3, 4)', 
						'font-size': '9%',
						'font-weight': 'bold',
						'color': '#117A65'
					}
				},
			{ selector: 'node.highlight',
            style: {
                'border-color': '#FFF',
                'border-width': '2px'
            }
        },
        {
            selector: 'node.semitransp',
            style:{ 'opacity': '0.5' }
        },
        {
            selector: 'edge.highlight',
            style: { 'line-color': 'red' },
        },
        {
            selector: 'edge.semitransp',
            style:{ 'opacity': '0.01' }
        }
			],
			elements:[ {{ elements | safe }} ], 
			layout: {
				name: 'concentric',
				concentric: function( node ){
				  return node.degree();
				},
				levelWidth: function( nodes ){
				  return 6;
				}
			}


		});

		cy.on('tap', 'edge', function(){
			try { // your browser may block popups
				window.open( this.data('url') );
			} catch(e){ // fall back on url change
				window.location.href = this.data('url');
			}
	  	});
		cy.on('tap', 'node', function(){
			try { // your browser may block popups
				window.open( this.data('url') );
			} catch(e){ // fall back on url change
				window.location.href = this.data('url');
			}
	  	});
		cy.on('mouseover', 'node', function(e){
			var sel = e.target;
			cy.elements().difference(sel.outgoers()).not(sel).addClass('semitransp');
			sel.addClass('highlight').outgoers().addClass('highlight');
		});
		cy.on('mouseout', 'node', function(e){
			var sel = e.target;
			cy.elements().removeClass('semitransp');
			sel.removeClass('highlight').outgoers().removeClass('highlight');
		});

		var saveAsSvg = function(filename) {
		   var svgContent = cy.svg();
		   var blob = new Blob([svgContent], {type:"image/svg+xml;charset=utf-8"});
		   saveAs(blob, "genecup_graph.svg");
	   };
	   var getSvgUrl = function() {
		   var svgContent = cy.svg({scale: 1, full: true});
		   var blob = new Blob([svgContent], {type:"image/svg+xml;charset=utf-8"});
		   var url = URL.createObjectURL(blob);
		   return url;
	   }


	</script>
	


{% endblock %}