add terms paths

index.html

@@ -52,6 +52,9 @@
     <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>  
 
 	<!-- row 4 -->
@@ -82,6 +85,7 @@
 			return function(e) {
         try {
           document.querySelector("#reset").style.visibility = "visible"
+          document.querySelector("#label").style.visibility = "visible"
           json = JSON.parse(e.target.result);
           draw(json)
         } catch (error) {
@@ -159,7 +163,9 @@
                   y  : parseFloat(((g.pos).split(','))[1])  ,
                 bId  : parseInt(g.bId)    ,
                 gId  : parseInt(g._gvid)  ,
-               size : parseInt(g.support) }
+               size  : parseInt(g.support),
+               label : (g.label.slice(1, g.label.length - 1)).split('|'),
+               foundation : (g.foundation.slice(1, g.foundation.length - 1)).split('|') }
     });    
 
     var links = json.edges.filter(edges => edges.edgeType == "link").map(function(l){

lib/css/qlobbe.css

@@ -224,6 +224,15 @@ i.how:hover span {
   visibility: hidden;
 }
 
+.label {
+  visibility: hidden;
+}
+
+.labeled {
+  background-color: #0d1824;
+  color: white;
+}
+
 .input-file {
   display: inline-block;
   cursor: pointer; 
@@ -308,18 +317,53 @@ i.how:hover span {
   fill: #4A5C70;
 }
 
-/* ---------- phylo ---------- */
+/* ---------- group ---------- */
 
 .group-outer {
-  stroke-width: 1.5px;
+  stroke-width: 1px;
   stroke: #fff;
   fill: #fff;
 }
 
 .group-inner {
+  stroke-width: 1px;
+  stroke: #0d1824;
+  fill: #0d1824;
+  /*cursor: pointer;*/ 
+  z-index: 10;
+}
+
+.group-inner-focus {
+  stroke: #f8381f;
+}
+
+.group-inner-unfocus {
+  stroke: #A9A9A9;
+}
+
+.group-path-focus {
+  stroke: #A9A9A9;
+}
+
+/* ---------- labels ---------- */
+
+.ngrams {
+  visibility:  hidden;
+}
+
+.term {
   cursor: pointer;
+}
+
+.term:hover {
+  font-weight: bold;
+}
+
+.term-path {
+  fill: none;
+  stroke: #f8381f;
   stroke-width: 1.5px;
-  fill: #0d1824;
+  z-index: 1;
 }
 
 /* ---------- phylo ---------- */
@@ -379,3 +423,4 @@ i.how:hover span {
   position: absolute;
   visibility: hidden;
 }
+