index.html 2.89 KB
Newer Older
Alexandre Delanoë's avatar
Alexandre Delanoë committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- lib CSS -->
	<link rel="stylesheet" type="text/css" href="./lib/css/qlobbe.css">

	<!-- lib JS -->
	<script type="text/javascript" src="./lib/js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./lib/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="./lib/js/d3.min.js"></script>

	<title>Mèmiescape</title>

</head>
<body>
	<div id="main">
		<div id="viz"></div>
	</div>

	<script type="text/javascript">

		/*
		 * Draw functions
		 */		

		function draw(phyloData) {

			// set up margin 

			var margin = {t:0, r:30, b:15, l:0};
			var w = document.getElementById("viz").offsetWidth - margin.l - margin.r,
				h = $(window).height() - margin.t - margin.b;

			// draw svg view			

			var svg = d3.select("#viz").append("svg")
				.attr("width",w)
				.attr("height",h);			

			var g = svg.append("g").attr("id","svg-view");

			// draw phylomemy from an url

			d3.xml(phyloData).then(data => {
				var newNodes = document.importNode(data.documentElement,true);
				svg.attr("viewBox", newNodes.getAttribute("viewBox"));
				g.each(function(){
					this.appendChild(newNodes);
				})
				svg.call(zoom)

				d3.select("#viz")
					.append('button')
					.attr("type","button")
					.attr("id","btn_reset")
					.attr("class","btn btn-light")
					.text("reset");	

				d3.select("#btn_reset").on("click", reset);								
			})				

			// set up d3 zoom

			var transform = d3.zoomIdentity;

			zoom = d3.zoom()
				.scaleExtent([1, 50])
				.on("zoom", zoomed);

			function zoomed() {
				g.attr("transform", d3.event.transform);
			}

			function reset() {
				svg.transition().call(zoom.transform, d3.zoomIdentity);
			}

		}

		/*
		 * Control functions
		 */

		window.onload = function() {
			clean()
      var url = window.location.href;
      // console.log(url);
			readUrl(url)

		};


		/* Get a Phylo file from an URL */
		function readUrl(url) {

			var node = url.match(/nodeId=(.*)/);
			if (node != null) {
				fetch("http://localhost:8008" + "/api/v1.0/node/" + node[1] + "/phylo")
				//fetch("https://dev.gargantext.org" + "/api/v1.0/node/" + node[1] + "/phylo")
				//fetch(window.location.origin + "/api/v1.0/node/" + node[1] + "/phylo")
				  .then(res => res.blob()) 
				  .then(blob => {

					var reader = new FileReader();
					reader.onload = (function(phyloFile) {
						return function(e) {
								draw(e.target.result)
						};
					})(blob);
					reader.readAsDataURL(blob);
				});	
			} else {
				try {
				    throw new Error("Unable to find a nodeId");
				} catch (e) {
				    console.log(e.name + ": " + e.message);
				}				
			}
		}

		/* Clean the view each time you load a new phylomemy */
		function clean() {
			d3.select("svg").remove();
			d3.select("#btn_reset").remove();
		}
	
	</script>
</body>
</html>