From 91eaef48b34cc26beb542847b84b33d6b4395eba Mon Sep 17 00:00:00 2001 From: Zachary Tong Date: Thu, 18 Apr 2013 12:35:57 -0400 Subject: [PATCH] Cleanup, comments --- panels/parallelcoordinates/module.js | 79 ++++++++-------------------- 1 file changed, 23 insertions(+), 56 deletions(-) diff --git a/panels/parallelcoordinates/module.js b/panels/parallelcoordinates/module.js index 9f141899880..53e7ca98bbc 100644 --- a/panels/parallelcoordinates/module.js +++ b/panels/parallelcoordinates/module.js @@ -1,7 +1,6 @@ angular.module('kibana.parallelcoordinates', []) .controller('parallelcoordinates', function ($scope, eventBus) { - console.log("controller"); $scope.activeDocs = []; @@ -149,8 +148,6 @@ angular.module('kibana.parallelcoordinates', []) restrict: 'A', link: function (scope, elem, attrs) { - console.log("directive"); - scope.initializing = false; @@ -159,7 +156,6 @@ angular.module('kibana.parallelcoordinates', []) */ scope.init_or_render = function() { if (typeof scope.svg === 'undefined') { - console.log("init"); //prevent duplicate initialization steps, if render is called again //before the svg is setup @@ -167,7 +163,6 @@ angular.module('kibana.parallelcoordinates', []) init_panel(); } } else { - console.log("render"); render_panel(); } }; @@ -177,7 +172,6 @@ angular.module('kibana.parallelcoordinates', []) * Receive render events */ scope.$on('render', function () { - console.log("on render"); scope.init_or_render(); }); @@ -185,15 +179,10 @@ angular.module('kibana.parallelcoordinates', []) * On window resize, re-render the panel */ angular.element(window).bind('resize', function () { - console.log("on resize"); scope.init_or_render(); }); - - - - /** * Load the various panel-specific scripts then initialize * the svg and set appropriate D3 settings @@ -205,9 +194,6 @@ angular.module('kibana.parallelcoordinates', []) scope.h = $(elem[0]).height() - scope.m[0] - scope.m[2]; - console.log("init"); - console.log("fields", scope.panel.fields); - scope.initializing = true; // Using LABjs, wait until all scripts are loaded before rendering panel var scripts = $LAB.script("common/lib/d3.v3.min.js?rand="+Math.floor(Math.random()*10000)); @@ -232,11 +218,7 @@ angular.module('kibana.parallelcoordinates', []) scope.foreground = scope.svg.append("svg:g") .attr("class", "foreground"); - - - scope.initializing = false; - console.log("init done"); render_panel(); }); @@ -248,11 +230,12 @@ angular.module('kibana.parallelcoordinates', []) return scope.line(scope.panel.fields.map(function(p) { return [scope.x(p), scope.y[p](d[p])]; })); } -// Handles a brush event, toggling the display of foreground lines. + // Handles a brush event, toggling the display of foreground lines. function brush() { var actives = scope.panel.fields.filter(function(p) { return !scope.y[p].brush.empty(); }), extents = actives.map(function(p) { return scope.y[p].brush.extent(); }); + //.fade class hides the "inactive" lines, helps speed up rendering significantly scope.foregroundLines.classed("fade", function(d) { return !actives.every(function(p, i) { var inside = extents[i][0] <= d[p] && d[p] <= extents[i][1]; @@ -260,6 +243,8 @@ angular.module('kibana.parallelcoordinates', []) }); }); + //activeDocs contains the actual doc records for selected lines. + //will be broadcast out to the table var activeDocs = _.filter(scope.data, function(v) { return actives.every(function(p,i) { var inside = extents[i][0] <= v[p] && v[p] <= extents[i][1]; @@ -267,20 +252,18 @@ angular.module('kibana.parallelcoordinates', []) }); }) - - scope.$apply(function() { scope.activeDocs = activeDocs; }); } + + //Drag functions are used for dragging the axis aroud function dragstart(d) { scope.i = scope.panel.fields.indexOf(d); - console.log("dragstart", d, scope.i) } function drag(d) { - console.log("drag", d, scope.i) scope.x.range()[scope.i] = d3.event.x; scope.panel.fields.sort(function(a, b) { return scope.x(a) - scope.x(b); }); scope.foregroundLines.attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); @@ -291,7 +274,6 @@ angular.module('kibana.parallelcoordinates', []) } function dragend(d) { - console.log("dragend", d) scope.x.domain(scope.panel.fields).rangePoints([0, scope.w]); var t = d3.transition().duration(500); t.selectAll(".trait").attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); @@ -309,9 +291,6 @@ angular.module('kibana.parallelcoordinates', []) */ function render_panel() { - console.log("render_panel"); - - scope.x = d3.scale.ordinal().domain(scope.panel.fields).rangePoints([0, scope.w]); scope.y = {}; @@ -328,15 +307,13 @@ angular.module('kibana.parallelcoordinates', []) scope.panel.fields.forEach(function(d) { + //If it is a string, setup an ordinal scale. + //Otherwise, use a linear scale for numbers if (_.isString(scope.data[0][d])) { - var value = function(v) { - return v[d]; - }; - + var value = function(v) { return v[d]; }; var values = _.map(_.uniq(scope.data, value),value); - scope.y[d] = d3.scale.ordinal() .domain(values) .rangeBands([scope.h, 0]); @@ -354,7 +331,7 @@ angular.module('kibana.parallelcoordinates', []) }); - + //pull out the actively selected columns for rendering the axis/lines var activeData = _.map(scope.data, function(d) { var t = {}; _.each(scope.panel.fields, function(f) { @@ -364,6 +341,7 @@ angular.module('kibana.parallelcoordinates', []) }); + //Lines scope.foregroundLines = scope.foreground .selectAll(".foregroundlines") .data(activeData, function(d, i){ @@ -373,7 +351,6 @@ angular.module('kibana.parallelcoordinates', []) }); return id; }); - scope.foregroundLines .enter().append("svg:path") .attr("d", path) @@ -381,28 +358,24 @@ angular.module('kibana.parallelcoordinates', []) .attr("style", function(d) { return "stroke:" + scope.colors(d.phpmemory) + ";"; }); - scope.foregroundLines.exit().remove(); - + //Axis group scope.traits = scope.svg.selectAll(".trait") .data(scope.panel.fields, String); - scope.traits .enter().append("svg:g") .attr("class", "trait") .attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); + scope.traits + .exit().remove(); - - - - + //brushes used to select lines scope.brushes = scope.svg.selectAll(".brush") .data(scope.panel.fields, String); - scope.brushes .enter() .append("svg:g") @@ -416,16 +389,22 @@ angular.module('kibana.parallelcoordinates', []) .attr("x", -8) .attr("width", 16); + //this section is repeated because enter() only works on "new" data, but we always need to + //update the brushes if things change. This just calls the brushing function, so it doesn't + //affect currently active rects scope.brushes .each(function(d) { d3.select(this) .call(scope.y[d].brush) .attr("transform", function(d) { return "translate(" + scope.x(d) + ")"; }); }); + scope.brushes + .exit().remove(); + + //vertical axis and labels scope.axisLines = scope.svg.selectAll(".axis") .data(scope.panel.fields, String); - scope.axisLines .enter() .append("svg:g") @@ -444,24 +423,12 @@ angular.module('kibana.parallelcoordinates', []) .attr("text-anchor", "middle") .attr("y", -9) .text(String); - - - - scope.brushes - .exit().remove(); - scope.axisLines .exit().remove(); - scope.traits - .exit().remove(); - - + //Simulate a dragend in case there is new data and we need to rearrange dragend(); - - - } }