adding a pipe separator between terms per line

src/Gargantext/Components/Nodes/Corpus/Phylo.purs

@@ -119,5 +119,5 @@ nodeCpt = R2.hereComponent here "node" hCpt where
                   ]
               _ -> H.p
                 { className: "text-center pt-10" }
-                [ H.text "Phylo not generated yet, please update the node settings to see your phylonometry." ]
+                [ H.text "Phylo not generated yet, please update the node settings to see your phylomemy." ]
       }

src/Gargantext/Components/PhyloExplorer/Resources.js

@@ -2062,7 +2062,9 @@ function setGroup(g, xScale, yScale, wScale) {
         fdt    = lines[i].fdt,
         roles  = lines[i].role,
         terms  = mergeLists(words,fdt,roles),
-        toSpan = (acc, w) => acc + "<tspan fdt=" + w[1]
+        toSpan = (acc, w, index) => {
+          let separator = index < terms.length - 1 ? "<tspan class='separator'> | </tspan>" : "";
+          return acc + "<tspan fdt=" + w[1]
                                  + " class='term fdt-" + w[1] + " " + "g-" + g.gId + findRole(w[2]) + "'"
                                  + " gy=" + yScale(g.to)
                                  + " gx=" + xScale(g.x)
@@ -2071,7 +2073,9 @@ function setGroup(g, xScale, yScale, wScale) {
                                  + " gid=" + g.gId
                                  + " bid=" + g.bId
                                  + " from="   + (g.to).getFullYear()
-                                 + ">" + w[0] + "</tspan>";
+                                 + ">" + w[0] + "</tspan>"
+                                 + separator;
+        };
 
     panel
         .append("text")

src/sass/_legacy/_phylo.scss

@@ -209,7 +209,10 @@ $decreasing-color: #11638F;
   .term:hover {
     font-weight: bold;
   }
-
+  .separator {
+    fill: $graph-heading-color;
+  }
+  
   // .term-unfocus {
   //   fill: #A9A9A9;
   // }