add sources and fixe dates

index.html

@@ -31,10 +31,16 @@
  
     <!-- folder bar --> 
 		<label  id="file-label" for="file-path" class="input-file">load a phylomemy →</label>
-		<input  type="file" id="file-path">
+		<input  type="file" id="file-path" maxlength="10">
   	<label  id="file-name" class="input-name"></label>
   	<button id="draw" class="button draw">draw</button>
-    
+
+    <!-- source selector -->
+    <select id="checkSource" class="select-source" onchange="highlightSource();">
+      <option disabled selected value>select a source ↴</option>
+      <option value="unselect">unselect source ✕</option>     
+    </select>    
+ 
     <!-- search bar -->    
     <label id="search-label" class="search-label">find a term →</label>
     <input type="text" id="search-box" class="search"/>
@@ -154,9 +160,9 @@
 
 	// display the Draw button after loading a phylo
 	document.querySelector("#file-path").onchange = function(){
-  		// document.querySelector("#file-name").textContent =  (this.files[0].name).substring(0,15) + "...";
-      document.querySelector("#file-name").textContent =  this.files[0].name;
-  		document.querySelector("#draw").style.display    = "inline-block";
+  		document.querySelector("#file-name").textContent =  (this.files[0].name).substring(0,15) + "...";
+      // document.querySelector("#file-name").textContent =  this.files[0].name;
+  		document.querySelector("#draw").style.display    = "inline-block";   
 	}
 
 	// draw the phylo 
@@ -194,15 +200,7 @@
 
     window.freq  = {};
     window.terms = {};
-
-    // if (json.phyloTermsFreq != null) {
-    //     var jsonFreq = (json.phyloTermsFreq).slice(2,-2).split("),(");
-
-    //     jsonFreq.forEach(function(elem){
-    //       let arr = elem.split(',')
-    //       window.freq[arr[0]] = parseFloat(arr[1])
-    //     })
-    // }
+    window.sources = [];
 
     window.nbDocs     = parseFloat(json.phyloDocs);
     window.nbBranches = parseFloat(json.phyloBranches);
@@ -210,6 +208,30 @@
     window.nbTerms    = parseFloat(json.phyloTerms);
     window.nbPeriods  = parseFloat(json.phyloPeriods);
     window.nbFoundations = parseFloat(json.phyloFoundations);
+    window.timeScale = json.phyloTimeScale;
+
+    if (json.phyloSources != undefined) {
+      var sources = stringArrToArr(json.phyloSources);
+      var checkSource = document.getElementById("checkSource");
+      
+      for (var i = 0; i < sources.length; i++) {
+        window.sources.push({source:sources[i],index:i});
+      }
+
+      window.sources.sort(function(a, b){
+        if(a.source < b.source) { return -1; }
+        if(a.source > b.source) { return  1; }
+        return 0;
+      })
+
+      for (var i = 0; i < window.sources.length; i++) {
+        var option = document.createElement("option");
+        option.text  = window.sources[i].source;
+        option.value = window.sources[i].index;
+        checkSource.add(option);         
+      }      
+
+    }
 
     // original bounding box
 
@@ -230,15 +252,30 @@
     });
 
     var periods = json.objects.filter(node => node.nodeType == "period").map(function(p){
-      return { from : yearToDateHacked(p.from) ,
-                 to : yearToDateHacked(p.to) ,
+
+      var from = yearToDate(p.from),
+            to = yearToDate(p.to);
+
+      if (p.strFrom != undefined)
+        from = stringToDate(p.strFrom)
+
+      if (p.strTo != undefined)
+        to = stringToDate(p.strTo)   
+
+      return { from : from,
+                 to : to,
                   y : parseFloat(((p.pos).split(','))[1])}
     }); 
 
-    // groups    
+    // groups
+
+    window.weighted = false;    
 
     var groups = json.objects.filter(node => node.nodeType == "group").map(function(g){
 
+      if (g.weight != undefined)
+        window.weighted = true;
+
       var keys = (g.foundation.slice(1, g.foundation.length - 1)).split('|')
 
       var labels =  (g.lbl.slice(1, g.lbl.length - 1)).split('|')
@@ -254,19 +291,36 @@
         if (!((keys[i]).trim() in window.terms)) {
           window.terms[(keys[i]).trim()] = {label:(labels[i]).trim(),fdt:(keys[i]).trim()}
         }
-      
-      } 
-
-      return { from  : yearToDateHacked(g.from) ,
-                 to  : yearToDateHacked(g.to)   ,
-                  x  : parseFloat(((g.pos).split(','))[0])  ,
-                  y  : parseFloat(((g.pos).split(','))[1])  ,
-                bId  : parseInt(g.bId)    ,
-                gId  : parseInt(g._gvid)  ,
-               size  : parseInt(g.support),
-               weight : parseFloat((g.weight).replace("Just ","")),
-               label : labels,
-               foundation : keys,
+      }
+
+      var from = yearToDate(g.from),
+            to = yearToDate(g.to),
+            weight = 0;
+            source = [];
+
+      if (g.strFrom != undefined)
+        from = stringToDate(g.strFrom)
+
+      if (g.strTo != undefined)
+        to = stringToDate(g.strTo)  
+
+      if (g.source != undefined)
+        source =  intArrToArr(g.source);  
+
+      if (g.weight != undefined)
+        weight = parseFloat((g.weight).replace("Just ",""));    
+
+      return { from : from,
+                 to : to,
+                  x : parseFloat(((g.pos).split(','))[0])  ,
+                  y : parseFloat(((g.pos).split(','))[1])  ,
+                bId : parseInt(g.bId)    ,
+                gId : parseInt(g._gvid)  ,
+               size : parseInt(g.support),
+             source : source,
+             weight : weight,
+              label : labels,
+         foundation : keys,
                role : ((g.role.slice(1, g.role.length - 1)).split('|')).map(e => parseInt(e.trim()))}
     });    
 

lib/css/qlobbe.css

@@ -399,6 +399,10 @@ i.how:hover span {
   stroke: #f8381f;
 }
 
+.source-focus {
+  stroke: #0567F7;
+}
+
 .group-unfocus {
   stroke: #A9A9A9;
 }
@@ -508,6 +512,12 @@ i.how:hover span {
   stroke: #F0684D;
 }
 
+.peak-focus-source {
+  font-size: 18px;
+  stroke-width: 2px;
+  stroke: #0567F7; 
+}
+
 
 .peak-label {
   text-align: center;
@@ -574,3 +584,27 @@ i.how:hover span {
   text-transform: capitalize;
   font-weight: bold;
 }
+
+.select-source {
+  margin-left: 10px;
+  display: none;
+
+  border: 1.5px solid #0d1824;
+  cursor: pointer;   
+  outline: 0;
+  background: transparent;
+  border-image: none;
+  outline-offset: -2px;
+
+  outline-color: transparent;
+  box-shadow: none;
+  -webkit-appearance: none;  
+}
+
+option {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+}
+