<commit_before><html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content='text/html;charset=UTF-8' http-equiv='content-type'>
    <title>Phylogram</title>
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.1/pure-min.css">
    <link rel="stylesheet" href="https://rawgithub.com/drublic/css-modal/master/build/modal.css">
	<script src="//d3js.org/colorbrewer.v1.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>
    <script src="js/phylogram.js"></script>
    <script src="js/datasource.js" type="text/javascript"></script>
	<script src="js/newick.js" type="text/javascript"></script>
	<script src="js/speech.js"></script>

    <script type="text/javascript">
		var fusionTable = "1I3Bq3a6HakMu2fgptnfAv9oZEMnoSpqoJDeQqLQ";
		var apiKey = "<KEY>";
		var fusionURL = "https://www.googleapis.com/fusiontables/v1/query?key="+apiKey;
		var countryURL = 'https://rawgithub.com/timeu/countries/master/countries.json';
		var the1001genomesURL = 'https://rawgithub.com/timeu/8666983/raw/533c405c2332b94ac749a688296ee08ca58af1dd/1001.json';
		var geoDataPromise = null;
		var metaInfo = {};
		var countryTranslateMap = {'GER':'DEU','BUL':'BGR','ROM':'ROU','CRO':'HRV','POR':'PRT','NED':'NLD','DEN':'DNK','UK':'GBR','SUI':'CHE','LIB':'LBY','SRV':'SRB'}
		var sp = speech();
		var speechOn = false;

		function getSelectStm(idlist) {
		  return "SELECT tg_ecotypeid,country,latitude,longitude,name  FROM "+fusionTable+" WHERE tg_ecotypeid IN ("+idlist.join(",")+")";
		}

		function load1001Data() {
		   return loadAndParseNewickFile(the1001genomesURL);
		}

		function load1001MetaData(data) {
		  var req = d3.json(fusionURL)
			  .header("Content-type", "application/x-www-form-urlencoded")
			  .post;
		  return Q.nfcall(req,"sql="+getSelectStm(data.idlist)).then(function(metaData) {
			var metaLookup =  {};
			var columns = metaData.columns;
			 metaData.rows.forEach(function(d) {
			   var item = {}
			   for (var i = 0;i<columns.length;i++) {
				 item[columns[i]] = d[i];
			   }
			   metaLookup[d[0]] = item;
			 });
			 metaLookup = d3.map(metaLookup);
			 data['metaLookup'] = metaLookup;
			 return data;
		  });
		}

		function loadGeoData(data) {
			geoDataPromise = geoDataPromise || Q.nfcall(d3.json,countryURL); 
			return geoDataPromise.then(function(geoData) {
			  var geoMap = d3.nest()
			   .key(function(d) {return d['cca3'];})
				.map(geoData,d3.map);
			 data.metaLookup.forEach(function(key,value) {
			 var geoItem = geoMap.get(value['country']) || geoMap.get(countryTranslateMap[value['country']]);
			   if (geoItem != null) {
				 value['region'] = geoItem[0]['region']
				 value['subregion'] = geoItem[0]['subregion']
			   }
			   else {
				 value['region'] = ' ';
				 value['subregion'] = '  ';
			   }
			 });
			return data;
			});
		}


		function showCustomTree() {
		  removechart();
		  var newickTxt = document.getElementById('newick').value;
		  var metaTxt = document.getElementById('meta').value;
		  var isMaster = document.getElementById('arabidopsis').checked;
		  var data = {};
		  var newick = buildNewick(newickTxt);
		  data['newickNodes'] = newick;
		  data['idlist'] = retrieveIdList(newickNodes);
		  Q(data).
		  then(function(data) {
			if (isMaster) {
			  return load1001MetaData(data);
			}
			else {
			  var metaInfo  = d3.csv.parse(metaTxt);
			  var metaLookup =  {}
			  metaInfo.forEach(function(d) {
				metaLookup[d.id] = d;
			  });
			  data.metaLookup = d3.map(metaLookup);
			  return data;
			}
		  })
		  .then(loadGeoData)
		  .then(function(data) {
			 draw(500,800,data.newickNodes,data.metaLookup);
		  }).done();
		  
		}

		function loadGenericTreeData(newickUrl,lookupUrl) {
			return loadAndParseNewickFile(newickUrl)
			  .then(function(data) {
				 return loadMetaFile(lookupUrl)
				   .then(function(metaLookup) {
					 data['metaLookup'] = metaLookup;
					 return data;
				   });
			  })
			  .then(loadGeoData);
		}

		function show1001Tree() {
		   removechart();
		   load1001Data()
		   .then(load1001MetaData)
		   .then(loadGeoData)
		   .then(function(data) {
			 draw(800,800,data.newickNodes,data.metaLookup);
		   }).done();
		}

		function draw(width,height,data,metaLookup) {
		 d3.select("#chartTypeContainer").style("display","block");
		 var container = d3.select("#container");
		 var height = $("body").height() - $("#nav").height() -70;
		 var width = $(container.node()).width();
	     var minSize = Math.min(width,height);
	     myChart = phylogram()
			.width(width).height(height).lookupMap(metaLookup);
		  container
			.datum(data)
			.call(myChart);
			
			 if (annyang) {
				d3.select(".speech").style("display","block");
				annyang.debug();
    			sp(myChart);
				annyang.addCommands(sp.commands());
			}
			
		}
		
		function changeGodMode() {
			if (!speechOn) {
				annyang.start();
			}
			else {
				annyang.abort();
			}
			speechOn = !speechOn;
			var mode = "Godmode " + (speechOn ? "ON" : "OFF");
			d3.select("#godmode").attr("value",mode);
		}

		function removechart() {
		  d3.select('#chart').remove();
		  myChart = null;
		  newickNodes= [];
		  d3.select("#chartTypeContainer").style("display","none");
		}
		function changeType() {
			isRadial = d3.select("input[name=charttype]:checked")[0][0].value == 'true';
			myChart.isRadial(isRadial);
		}
		
		function changeCheckBox() {
			var isMaster = document.getElementById('arabidopsis').checked;
			if (isMaster) {
				d3.select("#meta").attr("disabled","disabled");
			}
			else {
				d3.select("#meta").attr("disabled",null);
			}
		}
		</script>
    	
   		<style>
		body { 
		  font-family: "Helvetica Neue", Helvetica, sans-serif; 
		}
		td { 
		  
		}
		
		.menu {
		  list-style: none;
		  padding:0px;
		}
		
		.menu li {
		  display: inline-block;
		  margin-left:20px;
		}
		
		.link {
		  fill: none;
		  stroke: #ccc;
		  stroke-width: 1.5px;
		}
		
		.rootNode {
		  
		}
		
		.leafNode {
		  
		}
		
		.popup {
			color: white;
			font-size: 12px;
			background: rgba(0,0,0,0.5);
			padding: 5px 10px 5px 10px;
			-moz-border-radius: 8px 8px;
			border-radius: 8px 8px;
		}
		
		.popup ul {
			list-style: none;
			display: table;
		  padding:0px;
		}
		
		.popup ul li {
			display: table-row;
			border-bottom: 1px solid #E8E8E8;
		}
		
		.popup ul li label {
			display: table-cell;
			width: 50%; 
		}
		
		.popup ul li span {
			display: table-cell;
			width: 50%; 
		}
		</style>
  </head>
<body>
<section id="nav">
  <ul class="menu">
    <li><a href="javascript:var nop;" onclick="show1001Tree()">1001 genomes</a></li>
    <li><a href="#customdata">Custom data</a></li>
	<li><div class="speech"  style="display:none;"><input type="button" id="godmode" value="Godmode OFF" onclick="changeGodMode();" /> <span id="speechstate"></span></div></li>
  </ul>
  <ul class="menu" id="chartTypeContainer" style="display:none;">
	<li><input type="radio" name ="charttype" value="false" onclick="changeType();" checked  /> Normal</li>
	<li><input type="radio" name = "charttype" value="true" onclick="changeType();" /> Radial</li>
  </ul>
</section>
<section>
  <div id ="container">
  </div>
</section>
  <section class="modal--show" id="customdata" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    
    <div class="modal-inner">
        <header id="modal-label"></header>
        <div class="modal-content">
         <div id="customDataPopup">
     <form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Custom Data</legend>

        <label for="newick">Tree data (newick)</label>
        <textarea id="newick" cols="50" rows="10" ></textarea>

        <label for="meta">Meta information (csv)</label>
        <textarea id="meta" cols="50" rows="10" ></textarea>

 
        <label for="arabidopsis" class="pure-checkbox">
            <input id="arabidopsis" type="checkbox" onclick="changeCheckBox();"> Retrieve Meta information from Master Table (A.thaliana)
        </label>
        <a href="#" class="pure-button pure-button-primary" onclick="showCustomTree()">Draw</a>
    </fieldset>
</form>
  </div>
          
        </div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">×</a>
</section>
</body>  
<commit_msg>Support loading from both fusion table and csv. API key updated<commit_after><html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content='text/html;charset=UTF-8' http-equiv='content-type'>
    <title>Phylogram</title>
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.1/pure-min.css">
    <link rel="stylesheet" href="https://rawgithub.com/drublic/css-modal/master/build/modal.css">
	<script src="//d3js.org/colorbrewer.v1.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/q.js/1.0.0/q.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>
    <script src="js/phylogram.js"></script>
    <script src="js/datasource.js" type="text/javascript"></script>
	<script src="js/newick.js" type="text/javascript"></script>
	<script src="js/speech.js"></script>

    <script type="text/javascript">
		var fusionTable = "1I3Bq3a6HakMu2fgptnfAv9oZEMnoSpqoJDeQqLQ";
		var apiKey = "<KEY>";
		var fusionURL = "https://www.googleapis.com/fusiontables/v1/query?key="+apiKey;
		var countryURL = 'data/countries.json';
		var the1001genomesURL = 'data/1001.json';
		var geoDataPromise = null;
		var metaInfo = {};
		var countryTranslateMap = {'GER':'DEU','BUL':'BGR','ROM':'ROU','CRO':'HRV','POR':'PRT','NED':'NLD','DEN':'DNK','UK':'GBR','SUI':'CHE','LIB':'LBY','SRV':'SRB'}
		var sp = speech();
		var speechOn = false;

		function getSelectStm(idlist) {
		  return "SELECT tg_ecotypeid,country,latitude,longitude,name  FROM "+fusionTable+" WHERE tg_ecotypeid IN ("+idlist.join(",")+")";
		}

		function load1001Data() {
		   return loadAndParseNewickFile(the1001genomesURL);
		}

		function load1001MetaData(data) {
		  var req = d3.json(fusionURL)
			  .header("Content-type", "application/x-www-form-urlencoded")
			  .post;
		  return Q.nfcall(req,"sql="+getSelectStm(data.idlist)).then(function(metaData) {
			var metaLookup =  data.metaLookup || {};
			var columns = metaData.columns;
			 metaData.rows.forEach(function(d) {
			   var item = {}
			   for (var i = 0;i<columns.length;i++) {
				 item[columns[i]] = d[i];
			   }
			   metaLookup[d[0]] = item;
			 });
			 metaLookup = d3.map(metaLookup);
			 data['metaLookup'] = metaLookup;
			 return data;
		  });
		}

		function loadGeoData(data) {
			geoDataPromise = geoDataPromise || Q.nfcall(d3.json,countryURL); 
			return geoDataPromise.then(function(geoData) {
			  var geoMap = d3.nest()
			   .key(function(d) {return d['cca3'];})
				.map(geoData,d3.map);
			 data.metaLookup.forEach(function(key,value) {
			 var geoItem = geoMap.get(value['country']) || geoMap.get(countryTranslateMap[value['country']]);
			   if (geoItem != null) {
				 value['region'] = geoItem[0]['region']
				 value['subregion'] = geoItem[0]['subregion']
			   }
			   else {
				 value['region'] = ' ';
				 value['subregion'] = '  ';
			   }
			 });
			return data;
			});
		}


		function showCustomTree() {
		  removechart();
		  var newickTxt = document.getElementById('newick').value;
		  var metaTxt = document.getElementById('meta').value;
		  var isMaster = document.getElementById('arabidopsis').checked;
		  var data = {};
		  var newick = buildNewick(newickTxt);
		  data['newickNodes'] = newick;
		  data['idlist'] = retrieveIdList(newickNodes);
		  Q(data).
		  then(function(data) {
			var metaInfo  = d3.csv.parse(metaTxt);
			var metaLookup =  {}
			metaInfo.forEach(function(d) {
				metaLookup[d.id] = d;
			});
			data.metaLookup = metaLookup;
			if (isMaster) {
			  return load1001MetaData(data);
			}
			else {
				data.metaLookup = d3.map(data.metaLookup);
			}
			return data;
		  })
		  .then(loadGeoData)
		  .then(function(data) {
			 draw(500,800,data.newickNodes,data.metaLookup);
		  }).done();
		  
		}

		function loadGenericTreeData(newickUrl,lookupUrl) {
			return loadAndParseNewickFile(newickUrl)
			  .then(function(data) {
				 return loadMetaFile(lookupUrl)
				   .then(function(metaLookup) {
					 data['metaLookup'] = metaLookup;
					 return data;
				   });
			  })
			  .then(loadGeoData);
		}

		function show1001Tree() {
		   removechart();
		   load1001Data()
		   .then(load1001MetaData)
		   .then(loadGeoData)
		   .then(function(data) {
			 draw(800,800,data.newickNodes,data.metaLookup);
		   }).done();
		}

		function draw(width,height,data,metaLookup) {
		 d3.select("#chartTypeContainer").style("display","block");
		 var container = d3.select("#container");
		 var height = $("body").height() - $("#nav").height() -70;
		 var width = $(container.node()).width();
	     var minSize = Math.min(width,height);
	     myChart = phylogram()
			.width(width).height(height).lookupMap(metaLookup);
		  container
			.datum(data)
			.call(myChart);
			
			 if (annyang) {
				d3.select(".speech").style("display","block");
				annyang.debug();
    			sp(myChart);
				annyang.addCommands(sp.commands());
			}
			
		}
		
		function changeGodMode() {
			if (!speechOn) {
				annyang.start();
			}
			else {
				annyang.abort();
			}
			speechOn = !speechOn;
			var mode = "Godmode " + (speechOn ? "ON" : "OFF");
			d3.select("#godmode").attr("value",mode);
		}

		function removechart() {
		  d3.select('#chart').remove();
		  myChart = null;
		  newickNodes= [];
		  d3.select("#chartTypeContainer").style("display","none");
		}
		function changeType() {
			isRadial = d3.select("input[name=charttype]:checked")[0][0].value == 'true';
			myChart.isRadial(isRadial);
		}
		
		function changeCheckBox() {
			var isMaster = document.getElementById('arabidopsis').checked;
			if (isMaster) {
				d3.select("#meta").attr("disabled","disabled");
			}
			else {
				d3.select("#meta").attr("disabled",null);
			}
		}
		</script>
    	
   		<style>
		body { 
		  font-family: "Helvetica Neue", Helvetica, sans-serif; 
		}
		td { 
		  
		}
		
		.menu {
		  list-style: none;
		  padding:0px;
		}
		
		.menu li {
		  display: inline-block;
		  margin-left:20px;
		}
		
		.link {
		  fill: none;
		  stroke: #ccc;
		  stroke-width: 1.5px;
		}
		
		.rootNode {
		  
		}
		
		.leafNode {
		  
		}
		
		.popup {
			color: white;
			font-size: 12px;
			background: rgba(0,0,0,0.5);
			padding: 5px 10px 5px 10px;
			-moz-border-radius: 8px 8px;
			border-radius: 8px 8px;
		}
		
		.popup ul {
			list-style: none;
			display: table;
		  padding:0px;
		}
		
		.popup ul li {
			display: table-row;
			border-bottom: 1px solid #E8E8E8;
		}
		
		.popup ul li label {
			display: table-cell;
			width: 50%; 
		}
		
		.popup ul li span {
			display: table-cell;
			width: 50%; 
		}
		</style>
  </head>
<body>
<section id="nav">
  <ul class="menu">
    <li><a href="javascript:var nop;" onclick="show1001Tree()">1001 genomes</a></li>
    <li><a href="#customdata">Custom data</a></li>
	<li><div class="speech"  style="display:none;"><input type="button" id="godmode" value="Godmode OFF" onclick="changeGodMode();" /> <span id="speechstate"></span></div></li>
  </ul>
  <ul class="menu" id="chartTypeContainer" style="display:none;">
	<li><input type="radio" name ="charttype" value="false" onclick="changeType();" checked  /> Normal</li>
	<li><input type="radio" name = "charttype" value="true" onclick="changeType();" /> Radial</li>
  </ul>
</section>
<section>
  <div id ="container">
  </div>
</section>
  <section class="modal--show" id="customdata" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    
    <div class="modal-inner">
        <header id="modal-label"></header>
        <div class="modal-content">
         <div id="customDataPopup">
     <form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Custom Data</legend>

        <label for="newick">Tree data (newick)</label>
        <textarea id="newick" cols="50" rows="10" ></textarea>

        <label for="meta">Meta information (csv)</label>
        <textarea id="meta" cols="50" rows="10" ></textarea>

 
        <label for="arabidopsis" class="pure-checkbox">
            <input id="arabidopsis" type="checkbox" onclick="changeCheckBox();"> Retrieve Meta information from Master Table (A.thaliana)
        </label>
        <a href="#" class="pure-button pure-button-primary" onclick="showCustomTree()">Draw</a>
    </fieldset>
</form>
  </div>
          
        </div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">×</a>
</section>
</body>  

{'fraction_non_alphanumeric': 0.18554507819687213, 'fraction_numerical': 0.019606715731370745, 'mean_word_length': 3.3169520972946143, 'pattern_counts': {'":': 0, '<': 201, '<?xml version=': 0, '>': 199, 'https://': 6, 'lorem ipsum': 0, 'www.': 6, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2785381', 'n_tokens_mistral': 7296, 'n_tokens_neox': 6037, 'n_words': 989}