add the colors by dynamics

index.html

@@ -34,6 +34,7 @@
   		<button id="draw" class="button draw">
   			draw
   		</button>
+      <!-- <span id="focus" class="phylo-focus">▸ focus</span> -->
 	</div>
 
 	<!-- row 2 & 3 -->
@@ -49,12 +50,17 @@
 	<div class="phylo-isoline" id="phyloIsoLine"></div>
 
   <div class="phylo-isoline-info" id="phyloIsolineInfo">
-    <button id="reset" class="button reset">
-      <i class="fas fa-expand-arrows-alt"></i>
-    </button>
-    <button id="label" class="button label">
-      <i class="fas fa-align-center"></i>      
-    </button>  
+    <div class="btn-group">
+      <button id="reset" class="button reset">
+        <i class="fas fa-expand-arrows-alt"></i>
+      </button>
+      <button id="label" class="button label">
+        <i class="fas fa-dot-circle"></i>      
+      </button>  
+      <button id="heading" class="button heading">
+        <i class="fas fa-sort-alpha-down"></i>      
+      </button>       
+    </div>     
   </div>  
 
 	<!-- row 4 -->
@@ -86,6 +92,7 @@
         try {
           document.querySelector("#reset").style.visibility = "visible"
           document.querySelector("#label").style.visibility = "visible"
+          document.querySelector("#heading").style.visibility = "visible"
           json = JSON.parse(e.target.result);
           draw(json)
         } catch (error) {
@@ -125,6 +132,14 @@
 
     // draw PhyloInfo
 
+    window.freq = {};
+    var jsonFreq = (json.phyloTermsFreq).slice(2,-2).split("),(");
+
+    jsonFreq.forEach(function(elem){
+      let arr = elem.split(',')
+      window.freq[arr[0]] = parseFloat(arr[1])
+    })
+
     window.nbDocs     = parseFloat(json.phyloDocs);
     window.nbBranches = parseFloat(json.phyloBranches);
     window.nbGroups   = parseFloat(json.phyloGroups);
@@ -165,7 +180,8 @@
                 gId  : parseInt(g._gvid)  ,
                size  : parseInt(g.support),
                label : (g.label.slice(1, g.label.length - 1)).split('|'),
-               foundation : (g.foundation.slice(1, g.foundation.length - 1)).split('|') }
+               foundation : (g.foundation.slice(1, g.foundation.length - 1)).split('|'),
+               role : ((g.role.slice(1, g.role.length - 1)).split('|')).map(e => parseInt(e.trim()))}
     });    
 
     var links = json.edges.filter(edges => edges.edgeType == "link").map(function(l){
@@ -239,9 +255,9 @@
     class phyloPhyloInfo extends React.Component {
         render() {
           return   <div className="phylo-phylo-info" id="phyloPhyloInfo">
-                      <span><b>{this.props.nbTerms}</b> terms</span>
-                      <span><b>{this.props.nbGroups}</b> groups</span>
-                      <span><b>{this.props.nbBranches}</b> branches</span>
+                      <span><b id="phyloTerms">{this.props.nbTerms}</b> terms</span>
+                      <span><b id="phyloGroups">{this.props.nbGroups}</b> groups</span>
+                      <span><b id="phyloBranches">{this.props.nbBranches}</b> branches</span>
                    </div> 
         }
     }          

lib/css/qlobbe.css

@@ -42,7 +42,7 @@ body {
 
 .phylo-folder {
   grid-row: 1;
-  grid-column: 2 / 16;
+  grid-column: 2 / 10;
 }
 
 /* -------------------- */
@@ -102,8 +102,8 @@ body {
 .phylo-isoline-info {
   grid-row: 2 / 4;
   grid-column: 15 / 16;  
-  padding-top: 50%;
-  padding-bottom: 50%;
+  padding-top: 30%;
+  padding-bottom: 30%;
 }
 
 /* -------------------- */
@@ -203,6 +203,10 @@ i.how:hover span {
   font-size: 12px;
 }
 
+.header {
+  font-weight: bold;
+}
+
 /* ---------- input ---------- */
 
 .button {
@@ -216,10 +220,22 @@ i.how:hover span {
   color: white;
 }
 
+.btn-group button{
+  margin-top: 1px;
+  margin-bottom: 1px;
+  display: block;
+  width: 40px;
+}
+
 .draw {
   display: none;
 }
 
+.phylo-focus {
+  fill: #f8381f;
+  color: #f8381f;
+}
+
 .reset {
   visibility: hidden;
 }
@@ -228,6 +244,15 @@ i.how:hover span {
   visibility: hidden;
 }
 
+.heading {
+  visibility: hidden;
+}
+
+.headed {
+  background-color: #0d1824;
+  color: white;  
+}
+
 .labeled {
   background-color: #0d1824;
   color: white;
@@ -273,6 +298,14 @@ i.how:hover span {
   stroke: #fff;
 }
 
+.x-mark-over {
+  fill: #f3be54;
+}
+
+.x-mark-focus {
+  fill: #f8381f;
+}
+
 .tick text {
   font-family: "Inter-Regular";
 }
@@ -320,28 +353,29 @@ i.how:hover span {
 /* ---------- group ---------- */
 
 .group-outer {
-  stroke-width: 1px;
+  stroke-width: 0.8px;
   stroke: #fff;
   fill: #fff;
 }
 
 .group-inner {
-  stroke-width: 1px;
+  stroke-width: 0.8px;
   stroke: #0d1824;
   fill: #0d1824;
   /*cursor: pointer;*/ 
   z-index: 10;
 }
 
-.group-inner-focus {
-  stroke: #f8381f;
+.group-heading {
+  fill: #fff;
+  stroke: #A9A9A9;
 }
 
-.group-inner-unfocus {
-  stroke: #A9A9A9;
+.group-focus {
+  stroke: #f8381f;
 }
 
-.group-path-focus {
+.group-unfocus {
   stroke: #A9A9A9;
 }
 
@@ -357,13 +391,46 @@ i.how:hover span {
 
 .term:hover {
   font-weight: bold;
+  fill: #f8381f;  
+}
+
+.term-unfocus {
+  /*fill: #A9A9A9;*/
+}
+
+.term-focus {
+  /*fill: black;*/
 }
 
 .term-path {
   fill: none;
-  stroke: #f8381f;
+  stroke: #F0684D;
   stroke-width: 1.5px;
-  z-index: 1;
+}
+
+.emerging {
+  /*text-decoration: underline #F0684D;*/
+  /*fill:#5AA350;*/
+  fill: #5AA350;
+}
+
+.decreasing {
+  /*text-decoration: underline #74B5FF;*/
+  fill: #11638F;
+}
+
+.path-focus {
+  fill: none;
+  stroke: #F0684D;
+  stroke-width: 1.5px;
+}
+
+.path-unfocus {
+  stroke: #A9A9A9;
+}
+
+.path-heading {
+  stroke: #A9A9A9;
 }
 
 /* ---------- phylo ---------- */
@@ -406,6 +473,13 @@ i.how:hover span {
   z-index: 100;
 }
 
+.peak-focus {
+  font-size: 18px;
+  stroke-width: 2px;
+  stroke: #F0684D;
+}
+
+
 .peak-label {
   text-align: center;
   font-family: "Inter-Regular";