working on the compas

index.html

@@ -6,6 +6,13 @@
 	<!-- lib CSS -->
 	<link rel="stylesheet" type="text/css" href="./lib/css/qlobbe.css">
 
+	<!-- lib JS -->
+	<script type="text/javascript" src="./lib/js/d3.min.js"></script>
+	<script type="text/javascript" src="./lib/js/viz.js"></script>
+	<script type="text/javascript" src="./lib/js/full.render.js"></script>
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+
+
 	<title>Mèmiescape</title>
 
 </head>
@@ -14,26 +21,147 @@
 	<div class="title font-bold">Mèmiescape</div>
 
 	<div class="folder">
-		<form>
-			<input type="file"id="input-file">
-			<label for="input-file">Load a phylomemy ...</label>
-			<input type="submit" value="Draw"></input>
-		</form>
-
-		<!-- Nous avons ici notre label et l'input afférent -->
-<label for="file" class="label-file">Choisir une image</label>
-<input id="file" class="input-file" type="file">
+		<label for="file-path" class="input-file">load a phylomemy →</label>
+		<input type="file" id="file-path">
+  		<label id="file-name" class="input-name"></label>
+  		<button id="draw" class="input-draw">draw</button>
 	</div>
 
 	<div class="info"></div>
-	<div class="timeline">Timeline</div>	
+	<div class="timeline">Timeline</div>
+
+	<div class="counter font-small">
+		<div id="count" class="inline"></div>
+		<div id="branch-name" class="inline"></div>
+	</div>
+	<div id="selector" class="branch-selector"></div>
+	<div class="compass"></div>
+
 
-	<div class="compass">Compass</div>
-	<div class="phylomemy">Phylomemy</div>
+	<div class="phylomemy" id="#phylo">Phylomemy</div>
 		
 	<div class="focus">Focus</div>
 
 	<div class="footer font-bold font-small">iscpif // cnrs // 2019</div>
 
 </body>
+
+<script type="text/javascript">
+
+	// display the Draw button after loading a phylo
+	document.querySelector("#file-path").onchange = function(){
+  		document.querySelector("#file-name").textContent = this.files[0].name;
+  		document.querySelector("#draw").style.display    = "inline-block";
+	}
+
+	// draw the phylo 
+	document.querySelector("#draw").onclick = function() {
+		var file   = document.getElementById("file-path").files[0];
+		var reader = new FileReader();
+		reader.onload = (function(f) {
+			return function(e) {
+				var viz = new Viz();
+				viz.renderJSONObject(e.target.result).then(function(json) {
+	     			draw(json)
+	    		});
+			};
+		})(file);
+		reader.readAsText(file, "UTF-8");		
+	}
+
+
+
+	
+
+
+	function drawCompass(peaks,groups,periods) {
+
+		/*
+		 * branch selector
+		 */
+
+	 	ReactDOM.render(React.createElement(counter, { 
+	 			branchCount: peaks.length, 
+	 		  	groupCount: groups.length, 
+	 		  	from: periods[0].from, 
+	 		  	to: periods[periods.length -1].to
+	 		}), document.getElementById('count'));
+
+		var $container = $('#selector'),
+				 width = $container.width(),
+        		height = $container.height();
+
+	 	var svg1 = d3.select("#selector")
+	 	             .append("svg")
+	 				 .attr("width",'100%')
+	 			     .attr("height",'100%')
+					 .attr('preserveAspectRatio','xMinYMin')	 
+					 .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
+					 .append("g");
+
+		var w = 0.004 * width,
+			p = 0.5 * w;
+
+		while (peaks.length * (w + p) > width) {
+			w = w - 1;
+		}
+
+		for (var i = 0; i < peaks.length; i++) {
+			svg1.append("rect")
+			    .attr("x", i * (w + p))
+			    .attr("y", 0)
+			    .attr("width",w)
+			    .attr("height","100%")
+			    .attr("class","branch-rect")
+			    .attr("label",peaks[i].label.replace("|","//"))
+			    .attr("groups",Math.floor(peaks[i].nbGroups))
+			    .on("mouseover", function(d) {
+				 	ReactDOM.render(React.createElement(branchName, {
+				 		name: " • " + d3.select(this).attr("label"),
+				 		groups: " • " + d3.select(this).attr("groups") + " groups "
+				 	}), document.getElementById('branch-name'));
+		        })				
+		        .on("mouseout", function(d) {		
+				 	ReactDOM.render(React.createElement(branchName, {
+				 		name: ''
+				 	}), document.getElementById('branch-name'));
+		        });
+		}
+
+		svg1.append("text")
+		    .attr("id","branch-name")
+		    .attr("class","font-small")
+			.attr("x",peaks.length * (w + p) + p)
+			.attr("y","50%")
+			.attr("dy","3px");
+
+		/*
+		 * compass
+		 */
+
+
+
+		
+	}
+
+
+	function draw(dotData) {
+
+	 	var peaks   = dotData.objects.filter(node => node.nodeType == "peak")
+	 	var groups  = dotData.objects.filter(node => node.nodeType == "group")
+	 	var periods = dotData.objects.filter(node => node.nodeType == "period")
+
+
+	 	drawCompass(peaks,groups,periods)
+
+
+	}
+
+</script>
+
+<!-- lib react -->
+<script src="./lib/js/react.development.js"></script>
+<script src="./lib/js/react-dom.development.js"></script>
+<script src="react-elements.js"></script> 	
+
 </html>
\ No newline at end of file

lib/css/qlobbe.css

@@ -21,20 +21,48 @@
 
 /* classes */
 
+.branch-rect {
+  fill: #0d1824;
+  cursor: pointer;
+}
+
+.branch-rect:hover {
+  fill:#f8381f;
+}
+
+.branch-selector {
+  /*background: #409C78;*/
+  grid-column: 2 / 16;
+  grid-row: 3;
+}
+
 .compass {
-  background: #55A26C;
+  grid-column: 2 / 16;
+  grid-row: 4;
+}
+/*
+.compass:before {
+    content: "";
+    height: 1px;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+    display: block;
+}*/
+
+.counter {
+  /*background: #409C78;*/
   grid-column: 2 / 16;
   grid-row: 2;
+  text-align: left;
 }
 
 .focus {
   background: #55A26C;
   grid-column: 2 / 16;  
-  grid-row: 4;  
+  grid-row: 6;  
 }
 
 .folder {
-  grid-column: 4 / 16;
+  grid-column: 2 / 16;
   grid-row: 1;
 }
 
@@ -44,43 +72,100 @@
 }
 
 .font-small {
+  color: #0d1824;
   font-size: 12px;
 }
 
 .footer {
   grid-column: 2 / 16;
-  grid-row: 5;   
+  grid-row: 7;   
+}
+
+.inline {
+  display: inline-block;
+}
+
+.input-draw {
+  background-color: white;
+  border: 1.5px solid #0d1824;
+  display: none;
+  cursor: pointer; 
+}
+
+.input-draw:hover {
+  background-color: #0d1824;
+  color: white;
+}
+
+.input-file {
+  border-bottom: 1.5px solid #0d1824;
+  display: inline-block;
+  cursor: pointer; 
+}
+
+.input-name {
+  font-style: italic;
+  opacity: 0.7;
+  font-size: 14px;   
+  padding-left: 6px; 
+  padding-right: 6px; 
 }
 
 .phylomemy {
   background: #2B9087;
   grid-column: 2 / 16;  
-  grid-row: 3; 
+  grid-row: 5; 
 }
 
 .timeline {
   background: #409C78;
   grid-column: 1 / 2;
-  grid-row: 3; 
+  grid-row: 5; 
 }
 
 .title {
-  grid-column: 2 / 3;
+  grid-column: 1 / 2;
   grid-row: 1;
   /*background: #B9AE49;*/  
 }
 
-
 /* elements */
 
 body {
   font-family: "Inter-Regular";
   font-size: 16px;
-  /*margin: 1%;*/
   display: grid;
   grid-template-columns: repeat(15, 1fr);
-  grid-template-rows: 3% 10% 70% auto 3%;
-  grid-gap:10px;
+  grid-template-rows: 2% 1% 3% 5% 70% auto 2%;
+  grid-gap: 10px;
   height: calc(100vh - 20px);
   color: #0d1824;
 }
+
+/*hr {
+    border: 0;
+    height: 1px;
+    background: #333;
+    background-image: linear-gradient(to right, #ccc, #333, #ccc);
+}*/
+
+hr.style-two {
+    border: 0;
+    height: 1px;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
+
+hr.style-one {
+    border: 0;
+    height: 1px;
+    background: #333;
+    background-image: linear-gradient(to right, #ccc, #333, #ccc);
+}
+
+#branch-name {
+  color: #f8381f;
+}
+
+#file-path {
+  display:  none;
+}

lib/js/utils.js

-/*
- * Utils functions
- */
-
-/* Normalize the value of the input file element */
-function processInput(ele) {
-	var fileName = ele.val();
-	fileName = fileName.replace("C:\\fakepath\\", "");
-	ele.next('.custom-file-label').html(fileName);
-	document.getElementById("btn_draw").disabled = false;
-}
-
-
-/* Read an svg file from the input element */
-function readFile(callback) {
-	var file = document.getElementById("get_file").files[0];
-	var reader = new FileReader();
-	reader.onload = (function(theFile) {
-		return function(e) {
-				callback(e.target.result)
-		};
-	})(file);
-	reader.readAsDataURL(file);
-}
-
-
-/* Toggle a div after a click */
-function toggleDiv(id,to) {
-	var e = document.getElementById(id);
-	if(e.style.display == 'block')
-		e.style.display = 'none';
-	else
-		setTimeout(function (){
-			e.style.display = 'block';
-		}, to);
-}
-
-/* Clean the view each time you load a new phylomemy */
-function clean() {
-	d3.select("svg").remove();
-	d3.select("#btn_reset").remove();
-}
\ No newline at end of file

react-elements.js

+class counter extends React.Component {
+  render() {
+    return React.createElement(
+      "div", null,
+      "↱ ", this.props.branchCount, " branches • ", this.props.groupCount, " groups • from ", this.props.from, " to ", this.props.to
+    );
+  }
+}
+
+
+class branchName extends React.Component {
+  render() {
+    return React.createElement(
+      "div", null,
+      this.props.name, this.props.groups
+    );
+  }
+}
\ No newline at end of file