add terms paths

index.html

@@ -52,7 +52,10 @@
     <button id="reset" class="button reset">
       <i class="fas fa-expand-arrows-alt"></i>
     </button>
-  </div>
+    <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) {
@@ -153,13 +157,15 @@
     });
 
     var groups = json.objects.filter(node => node.nodeType == "group").map(function(g){
-      return { from : yearToDate(g.from) ,
-                 to : yearToDate(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) }
+      return { from  : yearToDate(g.from) ,
+                 to  : yearToDate(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),
+               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

@@ -103,7 +103,7 @@ body {
   grid-row: 2 / 4;
   grid-column: 15 / 16;  
   padding-top: 50%;
-  padding-bottom: 50%; 
+  padding-bottom: 50%;
 }
 
 /* -------------------- */
@@ -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 ---------- */
@@ -378,4 +422,5 @@ i.how:hover span {
   z-index: 10;
   position: absolute;
   visibility: hidden;
-}
+}
\ No newline at end of file
+