Update frequencies tooltips and include projection pivot

src/components/frequencies/functions.js

@@ -74,6 +74,10 @@ const removeYAxis = (svg) => {
   svg.selectAll(".y.axis").remove();
 };
 
+const removeProjectionPivot = (svg) => {
+  svg.selectAll(".projection-pivot").remove();
+};
+
 export const drawXAxis = (svg, chartGeom, scales) => {
   removeXAxis(svg);
   svg.append("g")
@@ -83,6 +87,7 @@ export const drawXAxis = (svg, chartGeom, scales) => {
     .style("font-size", "12px")
     .call(axisBottom(scales.x).ticks(scales.numTicksX, ".1f"));
 };
+
 export const drawYAxis = (svg, chartGeom, scales) => {
   removeYAxis(svg);
   svg.append("g")
@@ -93,6 +98,23 @@ export const drawYAxis = (svg, chartGeom, scales) => {
     .call(axisLeft(scales.y).ticks(scales.numTicksY));
 };
 
+export const drawProjectionPivot = (svg, scales, projection_pivot) => {
+  if (projection_pivot) {
+    removeProjectionPivot(svg);
+    svg.append("g")
+      .attr("class", "projection-pivot")
+      .append("line")
+      .attr("x1", scales.x(parseFloat(projection_pivot)))
+      .attr("x2", scales.x(parseFloat(projection_pivot)))
+      .attr("y1", scales.y(1))
+      .attr("y2", scales.y(0))
+      .style("visibility", "visible")
+      .style("stroke", "rgba(55,55,55,0.9)")
+      .style("stroke-width", "2")
+      .style("stroke-dasharray", "4 4");
+  }
+};
+
 const turnMatrixIntoSeries = (categories, nPivots, matrix) => {
   /*
   WHAT IS A SERIES?
@@ -216,20 +238,35 @@ export const drawStream = (
     const date = scales.x.invert(mousex);
     const pivotIdx = pivots.reduce((closestIdx, val, idx, arr) => Math.abs(val - date) < Math.abs(arr[closestIdx] - date) ? idx : closestIdx, 0);
     const freqVal = Math.round((d[pivotIdx][1] - d[pivotIdx][0]) * 100) + "%";
-    const xvalueOfPivot = scales.x(pivots[pivotIdx]);
+    const xValueOfPivot = scales.x(pivots[pivotIdx]);
+    const y1ValueOfPivot = scales.y(d[pivotIdx][1]);
+    const y2ValueOfPivot = scales.y(d[pivotIdx][0]);
 
     select("#vline")
       .style("visibility", "visible")
-      .attr("x1", xvalueOfPivot)
-      .attr("x2", xvalueOfPivot);
+      .attr("x1", xValueOfPivot)
+      .attr("x2", xValueOfPivot)
+      .attr("y1", y1ValueOfPivot)
+      .attr("y2", y2ValueOfPivot);
 
-    const left = mousex > 0.5 * scales.x.range()[1] ? "" : `${mousex + 4}px`;
-    const right = mousex > 0.5 * scales.x.range()[1] ? `${scales.x.range()[1] - mousex - 4}px` : "";
+    const left = xValueOfPivot > 0.5 * scales.x.range()[1] ? "" : `${xValueOfPivot + 25}px`;
+    const right = xValueOfPivot > 0.5 * scales.x.range()[1] ? `${scales.x.range()[1] - xValueOfPivot + 25}px` : "";
+    const top = y1ValueOfPivot > 0.5 * scales.y(0) ? `${scales.y(0) - 50}px` : `${y1ValueOfPivot + 25}px`;
     select("#freqinfo")
       .style("left", left)
       .style("right", right)
-      .style("top", `${70}px`)
+      .style("top", top)
+      .style("padding-left", "10px")
+      .style("padding-right", "10px")
+      .style("padding-top", "0px")
+      .style("padding-bottom", "0px")
       .style("visibility", "visible")
+      .style("background-color", "rgba(55,55,55,0.9)")
+      .style("color", "white")
+      .style("font-family", "Lato, Helvetica Neue, Helvetica, sans-serif")
+      .style("font-size", 18)
+      .style("line-height", 1)
+      .style("font-weight", 300)
       .html(`<p>${parseColorBy(colorBy, colorOptions)}: ${prettyString(labels[i])}</p>
         <p>Time point: ${pivots[pivotIdx]}</p>
         <p>Frequency: ${freqVal}</p>`);
@@ -248,15 +285,13 @@ export const drawStream = (
     .on("mouseout", handleMouseOut)
     .on("mousemove", handleMouseMove);
 
-  /* the vertical line to indicate the pivot point */
+  /* the vertical line to indicate the highlighted frequency interval */
   svgStreamGroup.append("line")
     .attr("id", "vline")
-    .attr("y1", scales.y(1))
-    .attr("y2", scales.y(0))
     .style("visibility", "hidden")
     .style("pointer-events", "none")
-    .style("stroke", "hsla(0,0%,100%,.9)")
-    .style("stroke-width", "5");
+    .style("stroke", "rgba(55,55,55,0.9)")
+    .style("stroke-width", 4);
 
   drawLabelsOverStream(svgStreamGroup, series, pivots, labels, scales);
 };

src/components/frequencies/index.js

@@ -3,8 +3,8 @@ import { select } from "d3-selection";
 import 'd3-transition'
 import { connect } from "react-redux";
 import Card from "../framework/card";
-import { calcXScale, calcYScale, drawXAxis, drawYAxis, areListsEqual,
-  drawStream, processMatrix, parseColorBy } from "./functions";
+import { calcXScale, calcYScale, drawXAxis, drawYAxis, drawProjectionPivot,
+  areListsEqual, drawStream, processMatrix, parseColorBy } from "./functions";
 import "../../css/entropy.css";
 
 @connect((state) => {
@@ -13,6 +13,7 @@ import "../../css/entropy.css";
     pivots: state.frequencies.pivots,
     ticks: state.frequencies.ticks,
     matrix: state.frequencies.matrix,
+    projection_pivot: state.frequencies.projection_pivot,
     version: state.frequencies.version,
     browserDimensions: state.browserDimensions.browserDimensions,
     colorBy: state.controls.colorBy,
@@ -40,6 +41,7 @@ class Frequencies extends React.Component {
     drawXAxis(newState.svg, chartGeom, scalesX);
     drawYAxis(newState.svg, chartGeom, scalesY);
     drawStream(newState.svgStreamGroup, newState.scales, data, {...props});
+    drawProjectionPivot(newState.svg, newState.scales, props.projection_pivot);
   }
   recomputeRedrawPartial(oldState, oldProps, newProps) {
     /* we don't have to check width / height changes here - that's done in componentDidUpdate */
@@ -59,6 +61,9 @@ class Frequencies extends React.Component {
     }
     /* if !catChange we could transition the streams instead of redrawing them... */
     drawStream(oldState.svgStreamGroup, newScales, data, {...newProps});
+    if (maxYChange) {
+      drawProjectionPivot(oldState.svg, newScales, newProps.projection_pivot);  
+    }
     return {...oldState, scales: newScales, maxY: data.maxY, categories: data.categories};
   }
   componentDidMount() {

src/reducers/frequencies.js

@@ -7,6 +7,7 @@ const frequencies = (state = {
   pivots: undefined,
   ticks: undefined,
   matrix: undefined,
+  projection_pivot: undefined,
   version: 0
 }, action) => {
   switch (action.type) {
@@ -17,7 +18,7 @@ const frequencies = (state = {
       return Object.assign({}, state, {loaded: true, matrix: action.matrix, version: state.version + 1});
     }
     case types.DATA_INVALID: {
-      return {loaded: false, data: undefined, pivots: undefined, ticks: undefined, matrix: undefined, version: 0};
+      return {loaded: false, data: undefined, pivots: undefined, ticks: undefined, matrix: undefined, projection_pivot: undefined, version: 0};
     }
     default:
       return state;

src/util/processFrequencies.js

@@ -74,6 +74,10 @@ export const processFrequenciesJSON = (rawJSON, tree, controls) => {
   while (ticks[ticks.length - 1] < pivots[pivots.length - 1]) {
     ticks.push((ticks[ticks.length - 1] + tick_step) * 10 / 10);
   }
+  let projection_pivot = null;
+  if ("projection_pivot" in rawJSON) {
+    projection_pivot = Math.round(parseFloat(rawJSON.projection_pivot) * 100) / 100;
+  }
   if (!tree.loaded) {
     throw new Error("tree not loaded");
   }
@@ -101,6 +105,7 @@ export const processFrequenciesJSON = (rawJSON, tree, controls) => {
     data,
     pivots,
     ticks,
-    matrix
+    matrix,
+    projection_pivot
   };
 };