Improved and simplified nearby-tooltip code and used on y-scatter

It turns out we don't actually need to use copies of the scales, and therefore can avoid decorating the chart object to get the "measure" (though this approach does require calling the "toolTip" component after the chart has been rendered. This allows us to simplify the code quite a lot. Also: * rebind `settings` and other properties from base tooltip component * added `size` option for controlling highlight sizing (though the "range" has to be modified because the symbol size behaviour isn't the same as the circle radius behaviour) * Use nearby-tooltip for the y-scatter chart, since it's a better experience
finos · texodus · Mar 25, 2019 · Mar 8, 2019 · Mar 8, 2019 · Mar 11, 2019
commit f78c4198142d412de52ae04d3d84f5836e167805
diff --git a/packages/perspective-viewer-d3fc/src/js/charts/area.js b/packages/perspective-viewer-d3fc/src/js/charts/area.js
@@ -66,16 +66,15 @@ function areaChart(container, settings) {
         .xScale(xScale);
 
     const toolTip = nearbyTip()
-        .chart(chart)
         .settings(settings)
         .xScale(xScale)
         .yScale(yScale)
         .color(color)
         .data(data);
-    container.call(toolTip);
 
     // render
     container.datum(data).call(zoomChart);
+    container.call(toolTip);
     container.call(legend);
 }
 areaChart.plugin = {

diff --git a/packages/perspective-viewer-d3fc/src/js/charts/line.js b/packages/perspective-viewer-d3fc/src/js/charts/line.js
@@ -64,16 +64,15 @@ function lineChart(container, settings) {
         .xScale(xScale);
 
     const toolTip = nearbyTip()
-        .chart(chart)
         .settings(settings)
         .xScale(xScale)
         .yScale(yScale)
         .color(color)
         .data(data);
-    container.call(toolTip);
 
     // render
     container.datum(data).call(zoomChart);
+    container.call(toolTip);
     container.call(legend);
 }
 

diff --git a/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js b/packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js
@@ -70,19 +70,19 @@ function xyScatter(container, settings) {
         .canvas(true);
 
     const toolTip = nearbyTip()
-        .chart(chart)
         .settings(settings)
         .canvas(true)
         .xScale(xScale)
         .xValueName("x")
         .yValueName("y")
         .yScale(yScale)
         .color(useGroupColors && color)
+        .size(size)
         .data(data);
-    container.call(toolTip);
 
     // render
     container.datum(data).call(zoomChart);
+    container.call(toolTip);
     if (legend) container.call(legend);
 }
 xyScatter.plugin = {

diff --git a/packages/perspective-viewer-d3fc/src/js/charts/y-scatter.js b/packages/perspective-viewer-d3fc/src/js/charts/y-scatter.js
@@ -17,6 +17,7 @@ import {filterData} from "../legend/filter";
 import {withGridLines} from "../gridlines/gridlines";
 import {hardLimitZeroPadding} from "../d3fc/padding/hardLimitZero";
 import zoomableChart from "../zoom/zoomableChart";
+import nearbyTip from "../tooltip/nearbyTip";
 
 function yScatter(container, settings) {
     const data = groupData(settings, filterData(settings));
@@ -40,11 +41,12 @@ function yScatter(container, settings) {
     const xDomain = crossAxis.domain(settings)(data);
     const xScale = crossAxis.scale(settings);
     const xAxis = crossAxis.axisFactory(settings).domain(xDomain)();
+    const yScale = mainAxis.scale(settings);
 
     const chart = fc
         .chartSvgCartesian({
             xScale,
-            yScale: mainAxis.scale(settings),
+            yScale,
             xAxis
         })
         .xDomain(xDomain)
@@ -65,8 +67,16 @@ function yScatter(container, settings) {
         .settings(settings)
         .xScale(xScale);
 
+    const toolTip = nearbyTip()
+        .settings(settings)
+        .xScale(xScale)
+        .yScale(yScale)
+        .color(color)
+        .data(data);
+
     // render
     container.datum(data).call(zoomChart);
+    container.call(toolTip);
     if (legend) {
         container.call(legend);
     }

diff --git a/packages/perspective-viewer-d3fc/src/js/series/barSeries.js b/packages/perspective-viewer-d3fc/src/js/series/barSeries.js
@@ -13,7 +13,7 @@ export function barSeries(settings, color) {
     let series = settings.mainValues.length > 1 ? fc.seriesSvgGrouped(fc.seriesSvgBar()) : fc.seriesSvgBar();
 
     series = series.decorate(selection => {
-        tooltip()(selection, settings);
+        tooltip().settings(settings)(selection);
         if (color) {
             selection.style("fill", d => color(d.key));
         }

diff --git a/packages/perspective-viewer-d3fc/src/js/series/categoryPointSeries.js b/packages/perspective-viewer-d3fc/src/js/series/categoryPointSeries.js
@@ -7,7 +7,6 @@
  *
  */
 import * as fc from "d3fc";
-import {tooltip} from "../tooltip/tooltip";
 import {withOpacity, withoutOpacity} from "./seriesColors";
 import {fromDomain} from "./seriesSymbols";
 
@@ -19,7 +18,6 @@ export function categoryPointSeries(settings, seriesKey, color, symbols) {
     }
 
     series.decorate(selection => {
-        tooltip()(selection, settings);
         if (color) {
             selection.style("stroke", d => withoutOpacity(color(d.colorValue || seriesKey))).style("fill", d => withOpacity(color(d.colorValue || seriesKey)));
         }

diff --git a/packages/perspective-viewer-d3fc/src/js/series/heatmapSeries.js b/packages/perspective-viewer-d3fc/src/js/series/heatmapSeries.js
@@ -14,7 +14,9 @@ export function heatmapSeries(settings, color) {
     let series = fc.seriesSvgHeatmap();
 
     series.decorate(selection => {
-        tooltip().generateHtml(generateHtmlForHeatmap)(selection, settings);
+        tooltip()
+            .generateHtml(generateHtmlForHeatmap)
+            .settings(settings)(selection);
     });
 
     return fc

diff --git a/packages/perspective-viewer-d3fc/src/js/tooltip/nearbyTip.js b/packages/perspective-viewer-d3fc/src/js/tooltip/nearbyTip.js
@@ -7,28 +7,23 @@
  *
  */
 
-import * as d3 from "d3";
 import * as fc from "d3fc";
-import {chainCallback} from "../utils/utils";
 import {tooltip} from "./tooltip";
 import {withOpacity} from "../series/seriesColors.js";
 import {findBestFromData} from "../data/findBest";
 
 export default () => {
-    let chart = null;
-    let settings = null;
+    const base = tooltip().alwaysShow(true);
+
     let xScale = null;
-    let xCopy = null;
     let yScale = null;
-    let yCopy = null;
     let color = null;
+    let size = null;
     let canvas = false;
     let data = null;
     let xValueName = "crossValue";
     let yValueName = "mainValue";
 
-    const showTooltip = tooltip().alwaysShow(true);
-
     function nearbyTip(selection) {
         const chartPlotArea = `d3fc-${canvas ? "canvas" : "svg"}.plot-area`;
         if (xScale || yScale) {
@@ -38,14 +33,10 @@ export default () => {
                 renderTip(selection, tooltipData);
             });
 
-            chainCallback(chart.decorate, sel => {
-                sel.select(chartPlotArea)
-                    .on("measure.nearby-tip", () => {
-                        if (xCopy) xCopy.range([0, d3.event.detail.width]);
-                        if (yCopy) yCopy.range([0, d3.event.detail.height]);
-                    })
-                    .call(pointer);
-            });
+            selection
+                .select(chartPlotArea)
+                .on("measure.nearbyTip", () => renderTip(selection, []))
+                .call(pointer);
         }
     }
 
@@ -59,13 +50,13 @@ export default () => {
         tips.enter()
             .append("circle")
             .attr("class", "nearbyTip")
-            .attr("r", 10)
             .merge(tips)
+            .attr("r", d => (size ? Math.sqrt(size(d.size)) : 10))
             .attr("transform", d => `translate(${xScale(d[xValueName])},${yScale(d[yValueName])})`)
             .style("stroke", "none")
             .style("fill", d => color && withOpacity(color(d.key)));
 
-        showTooltip(tips, settings);
+        base(tips);
     };
 
     const getClosestDataPoint = pos => {
@@ -80,28 +71,11 @@ export default () => {
         );
     };
 
-    nearbyTip.chart = (...args) => {
-        if (!args.length) {
-            return chart;
-        }
-        chart = args[0];
-        return nearbyTip;
-    };
-
-    nearbyTip.settings = (...args) => {
-        if (!args.length) {
-            return settings;
-        }
-        settings = args[0];
-        return nearbyTip;
-    };
-
     nearbyTip.xScale = (...args) => {
         if (!args.length) {
             return xScale;
         }
         xScale = args[0];
-        xCopy = xScale ? xScale.copy() : null;
         return nearbyTip;
     };
 
@@ -110,7 +84,6 @@ export default () => {
             return yScale;
         }
         yScale = args[0];
-        yCopy = yScale ? yScale.copy() : null;
         return nearbyTip;
     };
 
@@ -122,6 +95,14 @@ export default () => {
         return nearbyTip;
     };
 
+    nearbyTip.size = (...args) => {
+        if (!args.length) {
+            return size;
+        }
+        size = args[0] ? args[0].copy().range([40, 4000]) : null;
+        return nearbyTip;
+    };
+
     nearbyTip.canvas = (...args) => {
         if (!args.length) {
             return canvas;
@@ -154,5 +135,6 @@ export default () => {
         return nearbyTip;
     };
 
+    fc.rebindAll(nearbyTip, base);
     return nearbyTip;
 };
diff --git a/packages/perspective-viewer-d3fc/src/js/tooltip/tooltip.js b/packages/perspective-viewer-d3fc/src/js/tooltip/tooltip.js
@@ -8,8 +8,9 @@ export const tooltip = () => {
     let generateHtml = generateHtmlDefault;
     let alwaysShow = false;
     let tooltipDiv = null;
+    let settings = null;
 
-    const _tooltip = (selection, settings) => {
+    const _tooltip = selection => {
         const node = selection.node();
 
         if (!node || !node.isConnected) {
@@ -56,6 +57,14 @@ export const tooltip = () => {
         return _tooltip;
     };
 
+    _tooltip.settings = (...args) => {
+        if (!args.length) {
+            return settings;
+        }
+        settings = args[0];
+        return _tooltip;
+    };
+
     return _tooltip;
 };
 

diff --git a/packages/perspective-viewer-d3fc/src/js/utils/utils.js b/packages/perspective-viewer-d3fc/src/js/utils/utils.js
@@ -15,11 +15,3 @@ export function getOrCreateElement(container, selector, createCallback) {
     let element = container.select(selector);
     return element.size() > 0 ? element : createCallback();
 }
-
-export const chainCallback = (property, fn) => {
-    const oldFn = property();
-    property((...args) => {
-        if (oldFn) oldFn(...args);
-        fn(...args);
-    });
-};
diff --git a/packages/perspective-viewer-d3fc/src/js/zoom/zoomableChart.js b/packages/perspective-viewer-d3fc/src/js/zoom/zoomableChart.js
@@ -10,7 +10,6 @@
 import * as d3 from "d3";
 import {getOrCreateElement} from "../utils/utils";
 import template from "../../html/zoom-controls.html";
-import {chainCallback} from "../utils/utils";
 
 export default () => {
     let chart = null;
@@ -46,7 +45,7 @@ export default () => {
                     });
             });
 
-            chainCallback(chart.decorate, sel => {
+            chart.decorate(sel => {
                 if (!bound) {
                     bound = true;
                     // add the zoom interaction on the enter selection