Merge pull request #501 from Kitware/test_trackerdash

Fix TrackerDash example and add a test

app/examples/trackerdash/index.js

@@ -1,9 +1,6 @@
-import html from './index.jade';
 import TrackerDash from '../../../components/TrackerDash';
 import '../../../components/TrackerDash/styles';
 
-document.write(html());
-
 // Pass query param 'omitAggTrends' to test without 'agg_trends' key.
 var betaGroundTruthSettings = {
   el: '.dash-container',

components/GeoDots/index.js

@@ -1,4 +1,4 @@
-import d3 from 'geojs/node_modules/d3';
+import d3 from 'd3';
 import Geo from '../Geo';
 import VisComponent from '../../VisComponent';
 import { minmax } from '../../util';

components/Glo/index.js

@@ -1,4 +1,4 @@
-import d3 from 'glo/node_modules/d3';
+import d3 from 'd3';
 import GLO from 'glo';
 
 import VisComponent from '../../VisComponent';

components/LineUp/index.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import datalib from 'datalib';
-import d3 from 'lineupjs/node_modules/d3';
+import d3 from 'd3';
 import VisComponent from '../../VisComponent';
 import { type } from 'datalib';
 import * as LineUpJS from 'lineupjs/build/LineUpJS.min';

components/OnSet/index.js

@@ -1,4 +1,4 @@
-import d3 from 'onset/node_modules/d3';
+import d3 from 'd3';
 import { unique } from 'datalib';
 import onset from 'onset';
 import VisComponent from '../../VisComponent';

components/SimilarityGraph/index.js

@@ -1,6 +1,6 @@
 import VisComponent from '../../VisComponent';
 
-import * as d3 from 'd3';
+import d3 from 'd3';
 import cola from 'webcola';
 
 export default class SimilarityGraph extends VisComponent {
@@ -20,12 +20,12 @@ export default class SimilarityGraph extends VisComponent {
     // Construct a function that returns the needed size - either a constant
     // supplied in the `size` parameter, or a lookup function that pulls it from
     // the data table.
-    const sizeMap = d3.scaleLinear().domain(d3.extent(data, d => d[size])).range([5, 15]);
+    const sizeMap = d3.scale.linear().domain(d3.extent(data, d => d[size])).range([5, 15]);
     const sizeFunc = d => typeof size === 'string' ? sizeMap(d[size]) : size;
 
     // Construct lookup function for the color field.
-    const colorScale = d3.scaleLinear().domain(d3.extent(data, d => d[color])).range(['white', 'steelblue']);
-    const colormap = typeof data[0][color] === 'string' ? d3.scaleOrdinal(d3.schemeCategory10) : colorScale;
+    const colorScale = d3.scale.linear().domain(d3.extent(data, d => d[color])).range(['white', 'steelblue']);
+    const colormap = typeof data[0][color] === 'string' ? d3.scale.category10() : colorScale;
     const colorFunc = color !== undefined ? d => colormap(d[color]) : () => 'rgb(31, 119, 180)';
 
     // Get the width and height of the SVG element. This is necessary here in
@@ -35,7 +35,6 @@ export default class SimilarityGraph extends VisComponent {
     const h = bbox.height;
 
     // Initialize the cola object.
-    console.log(d3);
     this.cola = cola.d3adaptor(d3)
       .linkDistance(linkDistance)
       .size([w, h]);
@@ -77,8 +76,7 @@ export default class SimilarityGraph extends VisComponent {
       .append('line')
       .classed('link', true)
       .attr('stroke-width', 1)
-      .attr('stroke', 'gray')
-      .merge(this.linkSelection);
+      .attr('stroke', 'gray');
 
     // Create a D3 selection for the nodes, and initialize it with some circle
     // elements.
@@ -93,8 +91,7 @@ export default class SimilarityGraph extends VisComponent {
       .style('stroke', 'black')
       .style('fill', d => d.color)
       .style('cursor', 'crosshair')
-      .call(this.cola.drag)
-      .merge(this.nodeSelection);
+      .call(this.cola.drag);
 
     // Create a D3 selection for node labels.
     this.labelSelection = d3.select(this.svg)
@@ -111,8 +108,7 @@ export default class SimilarityGraph extends VisComponent {
         that.nodes[i].height += bbox.height;
       })
       .style('cursor', 'crosshair')
-      .call(this.cola.drag)
-      .merge(this.labelSelection);
+      .call(this.cola.drag);
 
     this.cola.on('tick', (...args) => {
       this.nodeSelection

components/TrackerDash/ResultTablePane.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import $ from 'jquery';
-import * as d3 from 'd3';
+import d3 from 'd3';
 
 import ValueWidget from './ValueWidget';
 import { sanitizeSelector } from './utility.js';

components/TrackerDash/index.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import _ from 'underscore';
-import * as d3 from 'd3';
+import d3 from 'd3';
 
 import InfoPane from './InfoPane';
 import TrendPane from './TrendPane';

components/TrackerDash/test/trackerdash.image.js

@@ -0,0 +1,9 @@
+import imageTest from '../../../util/imageTest';
+
+imageTest({
+  name: 'trackerdash',
+  url: 'http://localhost:28000/examples/trackerdash',
+  selector: '.trackerdash',
+  delay: 2000,
+  threshold: 0.02
+});

components/TreeHeatmap/index.js

@@ -1,5 +1,10 @@
 import VisComponent from '../../VisComponent';
-import * as d3 from 'd3';
+import { extent,
+         min,
+         max } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import { select } from 'd3-selection';
+import { line as d3line } from 'd3-shape';
 import { getElementSize } from '../../util';
 
 export default class TreeHeatmap extends VisComponent {
@@ -233,7 +238,7 @@ export default class TreeHeatmap extends VisComponent {
     let sortedRows = rows.slice().sort((a, b) => a.name.localeCompare(b.name));
     let sortedCols = columns.slice().sort((a, b) => a.name.localeCompare(b.name));
 
-    let vis = d3.select(this.el).append('svg')
+    let vis = select(this.el).append('svg')
       .attr('width', width + 'px')
       .attr('height', height + 'px');
 
@@ -266,8 +271,8 @@ export default class TreeHeatmap extends VisComponent {
 
     let distance = d => d.distance;
 
-    let xScale = d3.scaleLinear().domain([0, content[0].length]).range([xStart, xStart + colSize]);
-    let yScale = d3.scaleLinear().domain([0, content.length]).range([yStart, yStart + rowSize]);
+    let xScale = scaleLinear().domain([0, content[0].length]).range([xStart, xStart + colSize]);
+    let yScale = scaleLinear().domain([0, content.length]).range([yStart, yStart + rowSize]);
 
     let tree = function (orientation, links, leaves, x, y, width, height, duration) {
       let numLeaves = leaves.length;
@@ -300,8 +305,8 @@ export default class TreeHeatmap extends VisComponent {
         }
       }
       let distanceExtent = [0, distance(finalCluster)];
-      let distanceScale = d3.scaleLinear().domain(distanceExtent).range([y + height, y]);
-      let treeScale = d3.scaleLinear().domain([0, numLeaves]).range([x, x + width]);
+      let distanceScale = scaleLinear().domain(distanceExtent).range([y + height, y]);
+      let treeScale = scaleLinear().domain([0, numLeaves]).range([x, x + width]);
       let axis1 = 'y';
       let axis2 = 'x';
       if (orientation === 'vertical') {
@@ -329,7 +334,7 @@ export default class TreeHeatmap extends VisComponent {
 
       let reverseLinks = links.slice().reverse();
 
-      let line = d3.line();
+      let line = d3line();
       if (orientation === 'horizontal') {
         line.x(d => d[1]).y(d => d[0]);
       }
@@ -391,8 +396,8 @@ export default class TreeHeatmap extends VisComponent {
         .attr('class', 'tree-select')
         .style('fill', 'steelblue')
         .style('fill-opacity', 0)
-        .on('mouseover', function () { d3.select(this).style('fill-opacity', 0.4); })
-        .on('mouseout', function () { d3.select(this).style('fill-opacity', 0); })
+        .on('mouseover', function () { select(this).style('fill-opacity', 0.4); })
+        .on('mouseout', function () { select(this).style('fill-opacity', 0); })
         .on('click', d => {
           treeScale.domain([d.offset, d.offset + d.size]);
           distanceScale.domain([0, distance(d.parent.parent)]);
@@ -436,19 +441,19 @@ export default class TreeHeatmap extends VisComponent {
 
     let colColor = [];
     for (let col = 0; col < content[0].length; col += 1) {
-      colColor[columns[col].offset] = d3.scaleLinear().domain(d3.extent(content, d => d[col])).range(['white', 'steelblue']);
+      colColor[columns[col].offset] = scaleLinear().domain(extent(content, d => d[col])).range(['white', 'steelblue']);
     }
 
     let rowColor = [];
     for (let row = 0; row < content.length; row += 1) {
-      rowColor[rows[row].offset] = d3.scaleLinear().domain(d3.extent(content[row])).range(['white', 'steelblue']);
+      rowColor[rows[row].offset] = scaleLinear().domain(extent(content[row])).range(['white', 'steelblue']);
     }
 
-    let globalMin = d3.min(content, d => d3.min(d));
-    let globalMax = d3.max(content, d => d3.max(d));
-    let globalColor = d3.scaleLinear().domain([globalMin, globalMax]).range(['white', 'steelblue']);
+    let globalMin = min(content, d => min(d));
+    let globalMax = max(content, d => max(d));
+    let globalColor = scaleLinear().domain([globalMin, globalMax]).range(['white', 'steelblue']);
 
-    let corrColor = d3.scaleLinear().domain([-1, 0, 1]).range(['red', 'white', 'green']);
+    let corrColor = scaleLinear().domain([-1, 0, 1]).range(['red', 'white', 'green']);
 
     let color = d => globalColor(d.value);
     if (this.scale === 'row') {

components/UpSet/index.js

@@ -1,4 +1,4 @@
-import d3 from 'UpSet/node_modules/d3';
+import d3 from 'd3';
 import { unique, read } from 'datalib';
 import VisComponent from '../../VisComponent';
 import * as upset from 'UpSet';

package.json

@@ -115,7 +115,7 @@
     "UpSet": "git+https://github.com/jeffbaumes/upset#no-global-vars",
     "brace": "^0.7.0",
     "css-loader": "^0.23.1",
-    "d3": "^4.8.0",
+    "d3": "^3.5.17",
     "datalib": "^1.7.3",
     "geojs": "^0.9.1",
     "glo": "github:ronichoudhury-work/glo#dist",