Adding Isoline.js and PhyloGraph.js for ffi import

src/Phylo/Components/Isoline.js

+"use strict";
+
+exports.drawIsoline = function(phyloBranches){
+    return function (el){
+    /* ** draw the isoline ** */
+        var branches = phyloBranches.value0.map(function (b) {
+            return {
+              x1: b.branch_x,
+              y: b.branch_y,
+              x2: parseFloat(b.pos.split(",")[0]),
+              label: b.label,
+              bId: parseInt(b.bId),
+              gvid: parseInt(b._gvid)
+            };
+          });
+
+        d3.select(el).style("background", "#EBE4DD");
+        var div0 = d3.select(el).node().getBoundingClientRect(),
+          m0 = { t: 5, r: 5, b: 5, l: 5 },
+          w0 = div0.width,
+          h0 = div0.height;
+      
+        var svg0 = d3
+          .select(el)
+          .append("svg")
+          .attr("width", w0)
+          .attr("height", h0)
+          .append("g");
+      
+        var xScale0 = d3
+            .scaleLinear()
+            .domain([0, Math.max(...branches.map((b) => b.x1))])
+            .range([2 * m0.l, w0 - 2 * m0.l]),
+          yScale0 = d3
+            .scaleLinear()
+            .domain(d3.extent(branches, (b) => b.y))
+            .nice()
+            .range([2 * m0.t, h0 - 2 * m0.t]);
+      
+        var density = d3
+          .contourDensity()
+          .x(function (b) {
+            return xScale0(b.x1);
+          })
+          .y(function (b) {
+            return yScale0(b.y);
+          })
+          .size([w0, h0])
+          .thresholds(Math.round(branches.length / 2))(branches);
+      
+        /* shadows and lights */
+      
+        svg0
+          .append("g")
+          .selectAll("circle")
+          .data(branches)
+          .enter()
+          .append("circle")
+          .attr("cx", (b) => xScale0(b.x1))
+          .attr("cy", (b) => yScale0(b.y))
+          .attr("r", "55")
+          .attr("id", (b) => "peak-shadow" + b.bId)
+          .attr("visibility", "visible")
+          .style("fill", "#f5eee6");
+      
+        svg0
+          .selectAll("path")
+          .data(density)
+          .enter()
+          .append("path")
+          .attr("d", d3.geoPath())
+          .attr("fill", "none")
+          .attr("stroke", "#74B5FF")
+          .attr("stroke-width", (d, i) => (i % 2 ? 0.25 : 1))
+          .attr("stroke-linejoin", "round");
+      
+        var label = d3
+          .select(el)
+          .append("div")
+          .attr("class", "peak-label");
+      
+        svg0
+          .append("g")
+          .selectAll("text")
+          .data(branches)
+          .enter()
+          .append("text")
+          .attr("x", (b) => xScale0(b.x1))
+          .attr("y", (b) => yScale0(b.y) + 4)
+          .attr("class", "peak")
+          .attr("id", (b) => "peak-" + b.bId)
+          .style("fill", "#0d1824")
+          .attr("visibility", "visible")
+          .text("▲");
+        };
+  };
\ No newline at end of file

src/Phylo/Components/PhyloGraph.js

+"use strict";
+
+exports.drawPhyloGraph = function(graphEl, timelineEl){
+
+    var div1 = d3.select(graphEl).node().getBoundingClientRect(),
+    div2 = d3.select(timelineEl).node().getBoundingClientRect(),
+    m = { t: 10, b: 10, l: 10, r: 10 },
+    w = div1.width,
+    h = div1.height;
+  ydiv = div1.y;
+  
+  const svg = d3
+    .select(graphEl)
+    .append("svg")
+    .attr("viewBox", [0, 0, w, h]);
+  
+  var xo = div2.width + m.l,
+    yo = 2.5 * m.t,
+    wo = w - xo - m.r,
+    ho = h - yo - m.b;
+  
+  /* *** draw the graph *** */
+  
+  var div3 = d3.select("#phyloGraph").node().getBoundingClientRect();
+  
+  window.svg3 = d3
+    .select("#phyloGraph")
+    .append("svg")
+    .attr("width", div3.width)
+    .attr("height", div3.height)
+    .append("g");
+  
+  /* labels */
+  
+  var firstDate = Math.min(...groups.map((g) => g.from.getFullYear()));
+  
+  var yLabels = periods
+    .map((p) => ({ y: p.y, from: p.from, to: p.to, label: p.from.getFullYear() }))
+    .filter((p) => p.label >= firstDate);
+  var xLabels = toXLabels(branches, groups, frame[2]);
+  
+  /* weight */
+  
+  if (window.weighted == true) {
+    var wInf = Math.min(...groups.map((g) => g.weight));
+    var wSup = Math.max(...groups.map((g) => g.weight));
+    var wScale = d3.scaleLog().domain([1, wSup]).range([3, 10]);
+  }
+  
+  /* scales */
+  
+  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 */
+  
+  var mask = svg
+    .append("defs")
+    .append("svg:clipPath")
+    .attr("id", "mask")
+    .append("svg:rect")
+    .attr("width", wo)
+    .attr("height", ho)
+    .attr("x", xo)
+    .attr("y", yo);
+  
+  const panel = svg
+    .append("g")
+    .attr("clip-path", "url(#mask)")
+    .attr("id", "panel");
+  
+  /* highlight */
+  
+  xLabels.forEach((b) =>
+    panel
+      .append("rect")
+      .attr("class", "branch-hover")
+      .attr("x", xScale(b.inf))
+      .attr("y", -10000)
+      .attr("width", xScale(b.sup) - xScale(b.inf))
+      .attr("height", 20000)
+      .attr("id", "hover-" + b.bId)
+      .style("visibility", "hidden")
+  );
+  
+  yLabels.forEach((l) =>
+    panel
+      .append("line")
+      .attr("class", "y-highlight")
+      .attr("id", "y-highlight-" + l.label)
+      .attr("x1", -10000)
+      .attr("y1", yScale(l.from))
+      .attr("x2", 10000)
+      .attr("y2", yScale(l.from))
+      .style("visibility", "hidden")
+  );
+  
+  /* links */
+  
+  function findGroup(id, xsc, ysc) {
+    var group = groups.find((g) => g.gId == id),
+      x = xsc(group.x);
+    y = ysc(group.to);
+    return [x, y];
+  }
+  
+  var linkGen = d3.linkVertical();
+  var groupLinks = links.map((l) => ({
+    source: findGroup(l.from, xScale, yScale),
+    target: findGroup(l.to, xScale, yScale),
+    from: l.from,
+    to: l.to,
+    label: l.label
+  }));
+  
+  var groupAncestors = aLinks.map((l) => ({
+    source: findGroup(l.from, xScale, yScale),
+    target: findGroup(l.to, xScale, yScale),
+    from: l.from,
+    to: l.to,
+    label: l.label
+  }));
+  
+  panel
+    .selectAll("path")
+    .data(groupLinks.concat(groupAncestors))
+    .join("path")
+    .attr("d", linkGen)
+    .attr("fill", "none")
+    .attr("stroke", "#0d1824")
+    .attr("class", "group-path")
+    .attr("source", (d) => d.from)
+    .attr("target", (d) => d.to)
+    .attr("label", (d) => d.label);
+  // .on("click", function(){
+  //   // console.log(this)
+  // })
+  
+  var colors = ["#F0684D", "#aa8c58", "#74b5ff", "#0d1824"];
+  
+  /* groups */
+  
+  groups.forEach((g) => setGroup(g));
+  
+  /* axis */
+  
+  var xAxis = svg
+      .append("g")
+      .attr("class", "x-axis")
+      .attr("transform", "translate(0," + yo + ")"),
+    yAxis = svg
+      .append("g")
+      .attr("class", "y-axis")
+      .attr("transform", "translate(" + xo + ",0)");
+  
+  setAxisX(xScale, xLabels);
+  setAxisY(yScale, yLabels);
+  
+  /* zoom */
+  
+  var zoom = d3
+    .zoom()
+    .scaleExtent([1, 50])
+    .extent([
+      [xo, yo],
+      [wo, ho]
+    ])
+    .on("zoom", onZoom);
+  
+  svg.call(zoom).on("dblclick.zoom", null).on("dblclick", doubleClick);
+  
+  d3.select("#reset").on("click", reset);
+  
+  function reset() {
+    svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+  }
+  
+}
\ No newline at end of file