>>> continue

dist/styles/sass.css

@@ -1138,4 +1138,585 @@ select.form-control {
   width: 100%;
 }
 
+/* memiescape v2.0
+   contact : quentin.lobbe@iscpif.fr */
+/* fonts */
+@font-face {
+  font-family: "Inter-Regular";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/phylo/Inter-Regular.woff2") format("woff2"), url("../fonts/phylo/Inter-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter-Bold";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../fonts/phylo/Inter-Bold.woff2") format("woff2"), url("../fonts/phylo/Inter-Bold.woff") format("woff");
+}
+/* grid */
+.phylo {
+  font-family: "Inter-Regular";
+  font-size: 16px;
+  display: grid;
+  grid-template-columns: repeat(15, 1fr);
+  grid-template-rows: 2% 7% 7% auto 1%;
+  grid-gap: 10px;
+  height: calc(100vh - 20px);
+  color: #0d1824;
+}
+
+/* ---- row 1 ---- */
+.phylo-title {
+  grid-row: 1;
+  grid-column: 1/2;
+  align-items: center;
+  text-align: right;
+  margin-top: 0.5px;
+}
+
+.phylo-folder {
+  grid-row: 1;
+  grid-column: 2/16;
+  align-items: center;
+}
+
+/* -------------------- */
+.phylo-corpus {
+  grid-row: 2/3;
+  grid-column: 1/2;
+  /*background : #3E75B3;*/
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+
+.phylo-phylo {
+  grid-row: 3/4;
+  grid-column: 1/2;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+
+.phylo-corpus-info {
+  grid-row: 2/3;
+  grid-column: 2/4;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.phylo-phylo-info {
+  grid-row: 3/4;
+  grid-column: 2/4;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.phylo-how {
+  grid-row: 2/4;
+  grid-column: 1/2;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+
+.phylo-isoline {
+  grid-row: 2/4;
+  grid-column: 3/15;
+  /*background: rgba(223,216,200,0.25);  */
+}
+
+.phylo-isoline-info {
+  grid-row: 2/4;
+  grid-column: 15/16;
+  padding-top: 20%;
+  padding-bottom: 20%;
+  padding-left: 15px;
+}
+
+/* -------------------- */
+.phylo-scape {
+  grid-row: 4;
+  grid-column: 1/15;
+  /*background: #FFCC73;*/
+}
+
+.phylo-timeline {
+  grid-row: 4;
+  grid-column: 1/2;
+}
+
+.phylo-graph {
+  grid-row: 4;
+  grid-column: 15/16;
+  /*background: #FFCC73;*/
+}
+
+/* -------------------- */
+.phylo-footer {
+  grid-row: 5;
+  grid-column: 2/16;
+}
+
+/* classes */
+/* ---------- icons ---------- */
+a {
+  color: inherit;
+  cursor: pointer;
+}
+
+.how {
+  cursor: pointer;
+  position: relative;
+}
+
+.tooltip {
+  font-family: "Inter-Regular";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+i.how span {
+  position: absolute;
+  width: 300px;
+  color: #FFFFFF;
+  background: #0d1824;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  visibility: hidden;
+  border-radius: 6px;
+}
+
+i.how span:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -8px;
+  width: 0;
+  height: 0;
+  border-right: 8px solid #0d1824;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+}
+
+i.how:hover span {
+  visibility: visible;
+  left: 100%;
+  top: 50%;
+  margin-top: -15px;
+  margin-left: 15px;
+  z-index: 999;
+}
+
+.switch > .far + .fa,
+.switch:hover > .far {
+  display: none;
+}
+
+.switch:hover > .far + .fa {
+  display: inherit;
+  color: #0d1824;
+}
+
+/* ---------- fonts ---------- */
+.font-bold {
+  font-family: "Inter-Bold";
+  text-transform: uppercase;
+}
+
+.font-small {
+  color: #0d1824;
+  font-size: 12px;
+}
+
+.header {
+  /*font-weight: bold;*/
+  /*text-transform: uppercase;*/
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.header:hover {
+  font-weight: bold;
+}
+
+/* ---------- input ---------- */
+.button {
+  background-color: white;
+  border: 1.5px solid #0d1824;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #0d1824;
+  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;
+}
+
+.label {
+  visibility: hidden;
+}
+
+.heading {
+  visibility: hidden;
+}
+
+.export {
+  visibility: hidden;
+}
+
+.headed {
+  background-color: #0d1824;
+  color: white;
+}
+
+.labeled {
+  background-color: #0d1824;
+  color: white;
+}
+
+.input-file {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.input-file:hover {
+  border-bottom: 1.5px solid #0d1824;
+}
+
+.input-name {
+  font-style: italic;
+  opacity: 0.7;
+  font-size: 14px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+/* ---------- axis ---------- */
+.x-axis path {
+  stroke: #EBE4DD;
+  stroke-width: 1.5px;
+}
+
+.y-axis path {
+  stroke: #EBE4DD;
+  stroke-width: 1.5px;
+}
+
+.y-highlight {
+  stroke: #f3be54;
+  stroke-width: 1.5px;
+}
+
+.x-mark {
+  fill: #4A5C70;
+  stroke-width: 1px;
+  stroke: #fff;
+}
+
+.x-mark-over {
+  fill: #f3be54;
+}
+
+.x-mark-focus {
+  fill: #f8381f;
+}
+
+.tick text {
+  font-family: "Inter-Regular";
+}
+
+.tick text:hover {
+  cursor: pointer;
+}
+
+.y-label {
+  font-size: 10px;
+  font-family: "Inter-Regular";
+  font-weight: normal;
+}
+
+.y-label-bold {
+  font-size: 12px;
+  font-family: "Inter-Bold";
+  font-weight: bold;
+}
+
+.y-mark-year-inner {
+  fill: #4A5C70;
+}
+
+.y-mark-year-inner-highlight {
+  fill: #f3be54;
+}
+
+.y-mark-year-outer {
+  fill: #fff;
+  stroke: #4A5C70;
+  stroke-width: 1px;
+}
+
+.y-mark-year-outer-highlight {
+  fill: #fff;
+  stroke: #f3be54;
+  stroke-width: 3px;
+}
+
+.y-mark-month {
+  fill: #4A5C70;
+}
+
+/* ---------- group ---------- */
+.group-outer {
+  stroke-width: 0.8px;
+  stroke: #fff;
+  fill: #fff;
+}
+
+.group-inner {
+  stroke-width: 0.8px;
+  stroke: #0d1824;
+  fill: #0d1824;
+  /*cursor: pointer;*/
+  z-index: 10;
+}
+
+.group-heading {
+  fill: #fff;
+  stroke: #B5B5B5;
+}
+
+.group-focus {
+  stroke: #f8381f;
+}
+
+.source-focus {
+  stroke: #67a9cf;
+}
+
+.group-unfocus {
+  stroke: #A9A9A9;
+}
+
+.group-path {
+  cursor: pointer;
+}
+
+/* ---------- labels ---------- */
+.ngrams {
+  visibility: hidden;
+}
+
+.term {
+  cursor: pointer;
+}
+
+.term:hover {
+  font-weight: bold;
+  fill: #f8381f;
+}
+
+.term-unfocus {
+  /*fill: #A9A9A9;*/
+}
+
+.term-focus {
+  /*fill: black;*/
+}
+
+.term-path {
+  fill: none;
+  stroke: #F0684D;
+  stroke-width: 1.5px;
+}
+
+.emerging {
+  /*text-decoration: underline #F0684D;*/
+  /*fill:#5AA350;*/
+  /*fill: #5AA350;*/
+  fill: #F8381F;
+}
+
+.decreasing {
+  /*text-decoration: underline #74B5FF;*/
+  fill: #11638F;
+}
+
+.path-focus {
+  fill: none;
+  stroke: #F0684D;
+  stroke-width: 1.5px;
+}
+
+.path-unfocus {
+  stroke: #A9A9A9;
+}
+
+.path-heading {
+  stroke: #B5B5B5;
+}
+
+/* ---------- phylo ---------- */
+.branch-hover {
+  fill: #f3be54;
+  opacity: 0.5;
+}
+
+/* elements */
+#file-path {
+  display: none;
+}
+
+/* axis */
+.axisRight {
+  font-family: "Inter-Regular";
+  font-size: 10px;
+}
+
+/* isoline */
+.peak {
+  stroke: white;
+  stroke-width: 1px;
+  font-family: "Inter-Regular";
+  font-size: 14px;
+  text-anchor: middle;
+  visibility: visible;
+}
+
+.peak-over {
+  font-size: 18px;
+  stroke-width: 2px;
+  cursor: pointer;
+  stroke: #f3be54;
+  z-index: 100;
+}
+
+.peak-focus {
+  font-size: 18px;
+  stroke-width: 2px;
+  stroke: #F0684D;
+}
+
+.peak-focus-source {
+  font-size: 18px;
+  stroke-width: 2px;
+  stroke: #67a9cf;
+}
+
+.peak-label {
+  text-align: center;
+  font-family: "Inter-Regular";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  color: #FFFFFF;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: white;
+  background: #0d1824;
+  padding: 5px;
+  z-index: 10;
+  position: absolute;
+  visibility: hidden;
+}
+
+.word-cloud {
+  font-family: "Inter-Regular";
+  font-size: 12px;
+}
+
+.search {
+  margin-left: 10px;
+  visibility: hidden;
+  position: absolute;
+  z-index: 7;
+  font-size: 14px;
+  background-color: transparent;
+  outline: 0;
+  border-width: 0 0 2px;
+  border-color: #0d1824;
+}
+
+.search-label {
+  visibility: hidden;
+  margin-left: 5px;
+}
+
+.search:focus {
+  border-color: #F0684D;
+}
+
+.autocomplete {
+  margin-left: 10px;
+  visibility: hidden;
+  position: absolute;
+  z-index: 7;
+  font-size: 14px;
+  background-color: transparent;
+  color: silver;
+  z-index: 1;
+  border: none;
+}
+
+.loading {
+  visibility: hidden;
+}
+
+.phylo-name {
+  visibility: hidden;
+  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;
+}
+
 /*# sourceMappingURL=sass.css.map */

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

@@ -6,23 +6,27 @@ import Gargantext.Prelude
 
 import Affjax as AX
 import Affjax.ResponseFormat as ResponseFormat
+import DOM.Simple (window)
 import DOM.Simple.Console (log2)
 import Data.Either (Either(..))
 import Data.HTTP.Method (Method(..))
 import Data.Maybe (Maybe(..))
 import Effect.Aff (Aff, launchAff_)
 import Effect.Class (liftEffect)
+import FFI.Simple ((.=))
 import Gargantext.Components.PhyloExplorer.JSON (PhyloJSONSet(..))
 import Gargantext.Components.PhyloExplorer.Layout (layout)
 import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet, parsePhyloJSONSet)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (NodeID)
 import Gargantext.Utils.Reactix as R2
+import Graphics.D3.Base (d3)
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Simple.JSON as JSON
 import Toestand as T
 
+
 here :: R2.Here
 here = R2.here "Gargantext.Components.Nodes.Corpus.Phylo"
 
@@ -40,6 +44,9 @@ phyloLayoutCpt = here.component "phyloLayout" cpt where
     fetchedDataBox <- T.useBox (Nothing :: Maybe PhyloDataSet)
     fetchedData    <- T.useLive T.unequal fetchedDataBox
 
+    R.useEffectOnce' $
+      pure $ (window .= "d3") d3
+
     R.useEffectOnce' $ launchAff_ do
       result <- fetchPhyloJSON
       liftEffect $ case result of

src/Gargantext/Components/PhyloExplorer/Draw.js

-'use strict';
-
 exports._drawPhylo = drawPhylo;
 
 // set javascript date from a string year
@@ -12,39 +10,39 @@ function yearToDate(year) {
 }
 
 function stringToDate(str) {
-  var arr = (str.replace('"','')).split('-');
-  var d = new Date();
-  d.setYear(parseInt(arr[0]));
-  d.setMonth(parseInt(arr[1]));
-  d.setMonth(d.getMonth() - 1);
-  d.setDate(parseInt(arr[2]));
-  return d;
+var arr = (str.replace('"','')).split('-');
+var d = new Date();
+d.setYear(parseInt(arr[0]));
+d.setMonth(parseInt(arr[1]));
+d.setMonth(d.getMonth() - 1);
+d.setDate(parseInt(arr[2]));
+return d;
 }
 
 function utcStringToDate(str) {
-  var arr = ((str.replace('"','')).replace(' UTC','')).split(/[\s-:]+/);
-  var d = new Date();
-  d.setYear(parseInt(arr[0]));
-  d.setMonth(parseInt(arr[1]));
-  d.setDate(parseInt(arr[2]));
-  d.setHours(parseInt(arr[3]),parseInt(arr[4]),parseInt(arr[5]))
-  return d;
+var arr = ((str.replace('"','')).replace(' UTC','')).split(/[\s-:]+/);
+var d = new Date();
+d.setYear(parseInt(arr[0]));
+d.setMonth(parseInt(arr[1]));
+d.setDate(parseInt(arr[2]));
+d.setHours(parseInt(arr[3]),parseInt(arr[4]),parseInt(arr[5]))
+return d;
 }
 
 function stringArrToArr(str) {
-  var arr = ((str.replace('["','')).replace('"]','')).split('","');
-  return arr;
+var arr = ((str.replace('["','')).replace('"]','')).split('","');
+return arr;
 }
 
 function intArrToArr(int) {
-  var arr = ((int.replace('[','')).replace(']','')).split(',');
-  return arr;
+var arr = ((int.replace('[','')).replace(']','')).split(',');
+return arr;
 }
 
 function yearToDateHacked(w) {
-  var d = new Date(2020,0,0);
-  d.setDate(d.getDate() + (w * 7));
-  return d
+var d = new Date(2020,0,0);
+d.setDate(d.getDate() + (w * 7));
+return d
 }
 
 function toCoord(id) {
@@ -118,7 +116,6 @@ function xOverFlow(ticks,arr) {
 
 var branchFocus = [];
 
-
 function addMarkX(ticks,ws,ids) {
   ticks.each(function(t,i){
       d3.select(this)
@@ -142,7 +139,6 @@ function setMarkYLabel(labels) {
   })
 }
 
-
 function addMarkY(ticks) {
   ticks.each(function(d,i){
       if (d3.timeYear(d) < d) {
@@ -172,12 +168,11 @@ function removeDays(date, days) {
   return result;
 }
 
-
 function setYDomain(labels) {
 
   var ts = ["week","month","day","year","epoch"];
 
-  console.log(labels)
+  //console.log(labels)
 
   if (ts.includes(window.timeScale)) {
     labels = labels.sort(function(d1,d2){return d1.from - d2.from;})
@@ -212,11 +207,10 @@ function setYDomain(labels) {
   return [inf,sup];
 }
 
-
 function groupTermsBy(elements, attr) {
-  let grouped = {},
+let grouped = {},
     curr = "";
-  for (var i = 0; i < elements.length; i++) {
+for (var i = 0; i < elements.length; i++) {
   let from = elements[i].getAttribute(attr)
   if (curr != from) {
     grouped[from] = [[(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]];
@@ -224,9 +218,9 @@ function groupTermsBy(elements, attr) {
   } else {
     grouped[from].push([(elements[i]).getAttribute("gx"),(elements[i]).getAttribute("gy"),(elements[i]).getAttribute("bid")]);
   }
-  }
-  return Object.values(grouped);
-  };
+}
+return Object.values(grouped);
+};
 
 
 function findValueByPrefix(prefix) {
@@ -241,7 +235,6 @@ function findValueByPrefix(prefix) {
   return null;
 }
 
-
 function highlightSource() {
   let checkSource = document.getElementById("checkSource");
   let value = checkSource.options[checkSource.selectedIndex].value;
@@ -273,9 +266,9 @@ function highlightSource() {
         .classed("peak-focus-source", true);
     })
   }
-}
+ }
 
-function drawWordCloud (groups) {
+ function drawWordCloud (groups) {
 
     let labels = {},
         count  = 0;
@@ -313,7 +306,7 @@ function drawWordCloud (groups) {
           .style("opacity", opacity(Math.log(l.freq)))
           .text(l.label);
     })
-}
+  }
 
 
 function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
@@ -424,7 +417,6 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
       wo = w - xo - m.r,
       ho = h - yo - m.b;
 
-
   /* *** draw the graph *** */
 
   var div3 = d3.select('#phyloGraph')
@@ -437,6 +429,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
           .attr("height",div3.height)
         .append("g");
 
+
   /* labels */
 
   var firstDate = Math.min(...groups.map(g => (g.from).getFullYear()))
@@ -459,7 +452,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
   var xScale = d3.scaleLinear().domain([0,frame[2]]).range([xo + m.t,wo + xo]),
       yScale = d3.scaleTime().domain(setYDomain(yLabels)).range([m.t + yo, ho + yo]);
 
-  /* panel and mask */
+  /* panel and& mask */
 
   var mask = svg
       .append("defs")
@@ -650,7 +643,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
   groups.forEach(function(g){
     // is a term in many branches ?
     for (var i = 0; i < (g.foundation).length; i++) {
-      var fdt = parseInt(((g.foundation)[i]).trim());
+      var fdt = (g.foundation)[i];
       if (fdt in branchByGroup) {
         (branchByGroup[fdt]).push(g.bId);
       } else {
@@ -661,7 +654,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
     if ((g.role).includes(0)) {
       for (var i = 0; i < (g.role).length; i++) {
         if ((g.role)[i] == 0) {
-          var gf = parseInt(((g.foundation)[i]).trim())
+          var gf = (g.foundation)[i];
           if (gf in emergences) {
             (emergences[gf].x).push(xScale(g.x));
             (emergences[gf].y).push(yScale(g.to));
@@ -722,7 +715,6 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
          });
   });
 
-
   function landingView() {
     window.ldView = true;
     doubleClick()
@@ -805,8 +797,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
 
   function findFreq(fdt) {
     let freq = 0;
-    if (window.freq[fdt.trim()] != null) {
-      freq = window.freq[fdt.trim()]
+    if (window.freq[fdt] != null) {
+      freq = window.freq[fdt]
     }
     return freq;
   }
@@ -870,8 +862,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
             fdt    = lines[i].fdt,
             roles  = lines[i].role,
             terms  = mergeLists(words,fdt,roles)
-            toSpan = (acc, w) => acc + "<tspan fdt=" + (w[1]).trim()
-                                     + " class='term fdt-" + (w[1]).trim() + " " + "g-" + g.gId + findRole(w[2]) + "'"
+            toSpan = (acc, w) => acc + "<tspan fdt=" + w[1]
+                                     + " class='term fdt-" + w[1] + " " + "g-" + g.gId + findRole(w[2]) + "'"
                                      + " gy=" + yScale(g.to)
                                      + " gx=" + xScale(g.x)
                                      + " freq=" + findFreq(w[1])
@@ -911,6 +903,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
 
   d3.selectAll(".header").raise();
 
+
   function findRole(r) {
     if (r == 0) {
       return " emerging";
@@ -1056,6 +1049,8 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
       }
     }
 
+  }
+
   function termClick (txt,idx,nodeId,typeNode) {
 
     // remove old focus
@@ -1297,15 +1292,15 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
 
   function exportViz() {
 
-    const xmlns = "http://www.w3.org/2000/xmlns/";
-    const xlinkns = "http://www.w3.org/1999/xlink";
-    const svgns = "http://www.w3.org/2000/svg";
 
-    var time = new Date();
+const xmlns = "http://www.w3.org/2000/xmlns/";
+const xlinkns = "http://www.w3.org/1999/xlink";
+const svgns = "http://www.w3.org/2000/svg";
 
-    serialize(svg.node(),"phylomemy-" + Date.parse(time.toString())  + ".svg")
+var time = new Date();
 
-    function serialize(graph,name) {
+serialize(svg.node(),"phylomemy-" + Date.parse(time.toString())  + ".svg")
+function serialize(graph,name) {
   graph = graph.cloneNode(true);
   const fragment = window.location.href + "#";
   const walker = document.createTreeWalker(graph, NodeFilter.SHOW_ELEMENT, null, false);
@@ -1332,10 +1327,10 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
   document.body.appendChild(downloadLink);
   downloadLink.click();
   document.body.removeChild(downloadLink);
-    };
+};
 
 
-    function getCSSStyles( parentElement ) {
+function getCSSStyles( parentElement ) {
   var selectorTextArr = [];
 
   // Add Parent element Id and Classes to the list
@@ -1383,16 +1378,15 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
     return arr.indexOf( str ) === -1 ? false : true;
   }
 
-    }
+}
 
-    function appendCSS( cssText, element ) {
+function appendCSS( cssText, element ) {
   var styleElement = document.createElement("style");
   styleElement.setAttribute("type","text/css");
   styleElement.innerHTML = cssText;
   var refNode = element.hasChildNodes() ? element.children[0] : null;
   element.insertBefore( styleElement, refNode );
-    }
-  }
-  }
+}
+}
 
 }

src/Gargantext/Components/PhyloExplorer/Draw.purs

@@ -2,11 +2,11 @@ module Gargantext.Components.PhyloExplorer.Draw where
 
 import Gargantext.Prelude
 
-import Data.Function.Uncurried (Fn7, runFn7)
 import Effect (Effect)
+import Effect.Uncurried (EffectFn7, runEffectFn7)
 import Gargantext.Components.PhyloExplorer.Types (AncestorLink, Branch, BranchLink, Group, Link, Period)
 
-foreign import _drawPhylo :: Fn7
+foreign import _drawPhylo :: EffectFn7
   (Array Branch)
   (Array Period)
   (Array Group)
@@ -14,7 +14,7 @@ foreign import _drawPhylo :: Fn7
   (Array AncestorLink)
   (Array BranchLink)
   (Array Number)
-  (Effect Unit)
+  (Unit)
 
 drawPhylo ::
      Array Branch
@@ -25,4 +25,4 @@ drawPhylo ::
   -> Array BranchLink
   -> Array Number
   -> Effect Unit
-drawPhylo = runFn7 _drawPhylo
+drawPhylo = runEffectFn7 _drawPhylo

src/Gargantext/Components/PhyloExplorer/Types.purs

@@ -35,7 +35,7 @@ foreign import stringToDate     :: String -> Date.Date
 foreign import utcStringToDate  :: String -> Date.Date
 
 
-newtype PhyloDataSet = PhyloDataSet
+data PhyloDataSet = PhyloDataSet
   { ancestorLinks :: Array AncestorLink
   , bb            :: Array Number
   , branchLinks   :: Array BranchLink
@@ -90,7 +90,7 @@ parsePhyloJSONSet (PhyloJSONSet o) = PhyloDataSet
 
 -----------------------------------------------------------
 
-data Branch = Branch
+newtype Branch = Branch
   { bId     :: Int
   , gvid    :: Int
   , label   :: String
@@ -122,7 +122,7 @@ parseBranches
 
 -----------------------------------------------------------
 
-data Period = Period
+newtype Period = Period
   { from    :: Date.Date
   , to      :: Date.Date
   , y       :: Number
@@ -148,7 +148,7 @@ parsePeriods epoch
 
 -----------------------------------------------------------
 
-data Group = Group
+newtype Group = Group
   { bId           :: Int
   , foundation    :: Array Int -- @WIP: Array String ???
   , from          :: Date.Date
@@ -192,7 +192,7 @@ parseGroups epoch
 
 -----------------------------------------------------------
 
-data Link = Link
+newtype Link = Link
   { from    :: Int
   , lId     :: Int
   , label   :: String -- @WIP: undefined in Mèmiescape v2, still needed?
@@ -227,7 +227,7 @@ parseLinks
 
 -----------------------------------------------------------
 
-data AncestorLink = AncestorLink
+newtype AncestorLink = AncestorLink
   { from    :: Int
   , lId     :: Int
   , label   :: String -- @WIP: undefined in Mèmiescape v2, still needed?
@@ -262,7 +262,7 @@ parseAncestorLinks
 
 -----------------------------------------------------------
 
-data BranchLink = BranchLink
+newtype BranchLink = BranchLink
   { from    :: Int
   , to      :: Int
   }
@@ -293,7 +293,7 @@ parseBranchLinks
 
 -----------------------------------------------------------
 
-data GlobalTerm = GlobalTerm
+newtype GlobalTerm = GlobalTerm
   { label :: String
   , fdt   :: String
   }

src/Main.purs

@@ -9,7 +9,6 @@ import Effect (Effect)
 import FFI.Simple ((...))
 import Gargantext.Components.App (app)
 import Gargantext.Utils.Reactix as R2
-import Graphics.D3.Base (D3, d3)
 import Prelude (Unit, ($))
 
 main :: Effect Unit
@@ -18,7 +17,3 @@ main = paint $ toMaybe (document ... "getElementById" $ [ "app" ])
 paint :: Maybe Element -> Effect Unit
 paint Nothing = log "[main] Container not found"
 paint (Just c) = R2.render (app {} []) c
-
--- @WIP
-d3charge :: D3
-d3charge = d3

src/sass/_phylo.scss

+/* memiescape v2.0
+   contact : quentin.lobbe@iscpif.fr */
+
+/* fonts */
+
+@font-face {
+  font-family: 'Inter-Regular';
+  font-style:  normal;
+  font-weight: 400;
+  src: url("../fonts/phylo/Inter-Regular.woff2") format("woff2"),
+       url("../fonts/phylo/Inter-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter-Bold';
+  font-style:  normal;
+  font-weight: 700;
+  src: url("../fonts/phylo/Inter-Bold.woff2") format("woff2"),
+       url("../fonts/phylo/Inter-Bold.woff") format("woff");
+}
+
+/* grid */
+
+.phylo {
+  font-family: "Inter-Regular";
+  font-size: 16px;
+  display: grid;
+  grid-template-columns: repeat(15, 1fr);
+  grid-template-rows: 2% 7% 7% auto 1%;
+  grid-gap: 10px;
+  height: calc(100vh - 20px);
+  color: #0d1824;
+}
+
+/* ---- row 1 ---- */
+
+.phylo-title {
+  grid-row: 1;
+  grid-column: 1 / 2;
+  align-items: center;
+  text-align: right;
+  margin-top: 0.5px;
+}
+
+.phylo-folder {
+  grid-row: 1;
+  grid-column: 2 / 16;
+  align-items: center;
+}
+
+/* -------------------- */
+
+.phylo-corpus {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  /*background : #3E75B3;*/
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+
+.phylo-phylo {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+
+.phylo-corpus-info {
+  grid-row: 2 / 3;
+  grid-column: 2 / 4;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.phylo-phylo-info {
+  grid-row: 3 / 4;
+  grid-column: 2 / 4;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.phylo-how {
+  grid-row: 2 / 4;
+  grid-column: 1 / 2;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+
+.phylo-isoline {
+  grid-row: 2 / 4;
+  grid-column: 3 / 15;
+  /*background: rgba(223,216,200,0.25);  */
+}
+
+.phylo-isoline-info {
+  grid-row: 2 / 4;
+  grid-column: 15 / 16;
+  padding-top: 20%;
+  padding-bottom: 20%;
+  padding-left: 15px;
+}
+
+/* -------------------- */
+
+.phylo-scape {
+  grid-row: 4;
+  grid-column: 1 / 15;
+  /*background: #FFCC73;*/
+}
+
+.phylo-timeline {
+  grid-row: 4;
+  grid-column: 1 / 2;
+}
+
+.phylo-graph {
+  grid-row: 4;
+  grid-column: 15 / 16;
+  /*background: #FFCC73;*/
+}
+
+/* -------------------- */
+
+.phylo-footer {
+  grid-row: 5;
+  grid-column: 2 / 16;
+}
+
+
+/* classes */
+
+
+/* ---------- icons ---------- */
+
+a {
+  color: inherit;
+  cursor: pointer;
+}
+
+.how {
+  cursor: pointer;
+  position: relative;
+}
+
+.tooltip {
+  font-family: "Inter-Regular";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+i.how span {
+    position: absolute;
+    width:300px;
+    color: #FFFFFF;
+    background: #0d1824;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    visibility: hidden;
+    border-radius: 6px;
+}
+
+i.how span:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    margin-top: -8px;
+    width: 0; height: 0;
+    border-right: 8px solid #0d1824;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+}
+
+i.how:hover span {
+    visibility: visible;
+    left: 100%;
+    top: 50%;
+    margin-top: -15px;
+    margin-left: 15px;
+    z-index: 999;
+}
+
+.switch > .far + .fa,
+.switch:hover > .far {
+  display: none;
+}
+.switch:hover > .far + .fa {
+  display: inherit;
+  color: #0d1824;
+}
+
+
+
+/* ---------- fonts ---------- */
+
+
+.font-bold {
+  font-family: "Inter-Bold";
+  text-transform: uppercase;
+}
+
+.font-small {
+  color: #0d1824;
+  font-size: 12px;
+}
+
+.header {
+  /*font-weight: bold;*/
+  /*text-transform: uppercase;*/
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.header:hover {
+  font-weight: bold;
+}
+
+/* ---------- input ---------- */
+
+.button {
+  background-color: white;
+  border: 1.5px solid #0d1824;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #0d1824;
+  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;
+}
+
+.label {
+  visibility: hidden;
+}
+
+.heading {
+  visibility: hidden;
+}
+
+.export {
+  visibility: hidden;
+}
+
+.headed {
+  background-color: #0d1824;
+  color: white;
+}
+
+.labeled {
+  background-color: #0d1824;
+  color: white;
+}
+
+.input-file {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.input-file:hover {
+  border-bottom: 1.5px solid #0d1824;
+}
+
+.input-name {
+  font-style: italic;
+  opacity: 0.7;
+  font-size: 14px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+/* ---------- axis ---------- */
+
+.x-axis path {
+  stroke: #EBE4DD;
+  stroke-width: 1.5px;
+}
+
+.y-axis path {
+  stroke: #EBE4DD;
+  stroke-width: 1.5px;
+}
+
+.y-highlight {
+  stroke: #f3be54;
+  stroke-width: 1.5px;
+}
+
+.x-mark {
+  fill: #4A5C70;
+  stroke-width: 1px;
+  stroke: #fff;
+}
+
+.x-mark-over {
+  fill: #f3be54;
+}
+
+.x-mark-focus {
+  fill: #f8381f;
+}
+
+.tick text {
+  font-family: "Inter-Regular";
+}
+
+.tick text:hover {
+  cursor: pointer;
+}
+
+.y-label {
+  font-size: 10px;
+  font-family: "Inter-Regular";
+  font-weight: normal;
+}
+
+.y-label-bold {
+  font-size: 12px;
+  font-family: "Inter-Bold";
+  font-weight: bold;
+}
+
+.y-mark-year-inner {
+  fill: #4A5C70;
+}
+
+.y-mark-year-inner-highlight {
+  fill: #f3be54;
+}
+
+.y-mark-year-outer {
+  fill: #fff;
+  stroke: #4A5C70;
+  stroke-width: 1px;
+}
+
+.y-mark-year-outer-highlight {
+  fill: #fff;
+  stroke: #f3be54;
+  stroke-width: 3px;
+}
+
+.y-mark-month {
+  fill: #4A5C70;
+}
+
+/* ---------- group ---------- */
+
+.group-outer {
+  stroke-width: 0.8px;
+  stroke: #fff;
+  fill: #fff;
+}
+
+.group-inner {
+  stroke-width: 0.8px;
+  stroke: #0d1824;
+  fill: #0d1824;
+  /*cursor: pointer;*/
+  z-index: 10;
+}
+
+.group-heading {
+  fill: #fff;
+  stroke: #B5B5B5;
+}
+
+.group-focus {
+  stroke: #f8381f;
+}
+
+.source-focus {
+  stroke: #67a9cf;
+}
+
+.group-unfocus {
+  stroke: #A9A9A9;
+}
+
+.group-path {
+  cursor: pointer;
+}
+
+/* ---------- labels ---------- */
+
+.ngrams {
+  visibility:  hidden;
+}
+
+.term {
+  cursor: pointer;
+}
+
+.term:hover {
+  font-weight: bold;
+  fill: #f8381f;
+}
+
+.term-unfocus {
+  /*fill: #A9A9A9;*/
+}
+
+.term-focus {
+  /*fill: black;*/
+}
+
+.term-path {
+  fill: none;
+  stroke: #F0684D;
+  stroke-width: 1.5px;
+}
+
+.emerging {
+  /*text-decoration: underline #F0684D;*/
+  /*fill:#5AA350;*/
+  /*fill: #5AA350;*/
+  fill: #F8381F;
+}
+
+.decreasing {
+  /*text-decoration: underline #74B5FF;*/
+  fill: #11638F;
+}
+
+.path-focus {
+  fill: none;
+  stroke: #F0684D;
+  stroke-width: 1.5px;
+}
+
+.path-unfocus {
+  stroke: #A9A9A9;
+}
+
+.path-heading {
+  stroke: #B5B5B5;
+}
+
+/* ---------- phylo ---------- */
+
+.branch-hover {
+  fill: #f3be54;
+  opacity: 0.5;
+}
+
+/* elements */
+
+#file-path {
+  display:  none;
+}
+
+
+/* axis */
+
+.axisRight {
+  font-family: "Inter-Regular";
+  font-size: 10px;
+}
+
+/* isoline */
+
+.peak {
+  stroke: white;
+  stroke-width: 1px;
+  font-family: "Inter-Regular";
+  font-size: 14px;
+  text-anchor: middle;
+  visibility: visible;
+}
+
+.peak-over {
+  font-size: 18px;
+  stroke-width: 2px;
+  cursor: pointer;
+  stroke: #f3be54;
+  z-index: 100;
+}
+
+.peak-focus {
+  font-size: 18px;
+  stroke-width: 2px;
+  stroke: #F0684D;
+}
+
+.peak-focus-source {
+  font-size: 18px;
+  stroke-width: 2px;
+  stroke: #67a9cf;
+}
+
+
+.peak-label {
+  text-align: center;
+  font-family: "Inter-Regular";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  color: #FFFFFF;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: white;
+  background: #0d1824;
+  padding: 5px;
+  z-index: 10;
+  position: absolute;
+  visibility: hidden;
+}
+
+.word-cloud {
+  font-family: "Inter-Regular";
+  font-size: 12px;
+}
+
+.search {
+  margin-left: 10px;
+  visibility: hidden;
+  position: absolute;
+  z-index: 7;
+  font-size: 14px;
+  background-color: transparent;
+  outline: 0;
+  border-width: 0 0 2px;
+  border-color: #0d1824
+}
+
+.search-label {
+  visibility: hidden;
+  margin-left: 5px;
+}
+
+.search:focus {
+  border-color: #F0684D
+}
+
+.autocomplete {
+  margin-left: 10px;
+  visibility: hidden;
+  position: absolute;
+  z-index: 7;
+  font-size: 14px;
+  background-color: transparent;
+  color: silver;
+  z-index: 1;
+  border: none;
+}
+
+.loading {
+  visibility: hidden;
+}
+
+.phylo-name {
+  visibility:hidden;
+  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;
+}

src/sass/sass.sass

@@ -8,3 +8,4 @@
 @use "_range_slider.sass"
 @use "_annotation.sass"
 @use "_folder_view.sass"
+@use "_phylo.scss"