moving gd[].dimensions out of parcoords.js #2

Author: monfera

src/traces/parcoords/parcoords.js

@@ -140,8 +140,6 @@ function model(layout, d, i, a) {
     return {
         key: i,
         colCount: d.dimensions.filter(visible).length,
-        _gdDimensions: d._gdDimensions,
-        _gdDimensionsOriginalOrder: d._gdDimensions.slice(),
         dimensions: d.dimensions,
         tickDistance: c.tickDistance,
         unitToColor: unitToColorScale(d.line.colorscale, d.line.cmin, d.line.cmax, d.line.color),
@@ -510,27 +508,8 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
                 p.pickLineLayer && p.pickLineLayer.render(p.panels, true);
                 linePickActive = true;
 
-                // Have updated order data on `gd.data` and raise `Plotly.restyle` event
-                // without having to incur heavy UI blocking due to an actual `Plotly.restyle` call
-
-                var orig = p.model._gdDimensionsOriginalOrder
-                    .filter(function(d) {return d.visible === void(0) || d.visible;});
-                function newIdx(dim) {
-                    var origIndex = orig.indexOf(dim);
-                    var currentIndex = p.dimensions.map(function(dd) {return dd.crossfilterDimensionIndex;}).indexOf(origIndex);
-                    if(currentIndex === -1) {
-                        // invisible dimensions go to the end, retaining their original order
-                        currentIndex += orig.length;
-                    }
-                    return currentIndex;
-                }
-                d.model._gdDimensions.sort(function(d1, d2) {
-                    var i1 = newIdx(d1);
-                    var i2 = newIdx(d2);
-                    return i1 - i2;
-                });
                 if(callbacks && callbacks.axesMoved) {
-                    callbacks.axesMoved();
+                    callbacks.axesMoved(p.key, p.dimensions.map(function(dd) {return dd.crossfilterDimensionIndex;}));
                 }
             })
         );

src/traces/parcoords/plot.js

@@ -13,20 +13,24 @@ var Lib = require('../../lib');
 
 module.exports = function plot(gd, cdparcoords) {
 
+    var gdDimensions = {};
     var gdDimensionsOriginalOrder = {};
 
     var fullLayout = gd._fullLayout;
     var svg = fullLayout._paper;
     var root = fullLayout._paperdiv;
     var data = cdparcoords.map(function(d, i) {
         var item = Lib.extendDeep(d[0]);
-        item._gdDimensions = gd.data[i].dimensions;
+        gdDimensions[i] = gd.data[i].dimensions;
         gdDimensionsOriginalOrder[i] = gd.data[i].dimensions.slice();
         return item;
     });
 
     var filterChanged = function(i, originalDimensionIndex, newRange) {
 
+        // Have updated `constraintrange` data on `gd.data` and raise `Plotly.restyle` event
+        // without having to incur heavy UI blocking due to an actual `Plotly.restyle` call
+
         var gdDimension = gdDimensionsOriginalOrder[i][originalDimensionIndex];
         var gdConstraintRange = gdDimension.constraintrange;
         if(!gdConstraintRange || gdConstraintRange.length !== 2) {
@@ -46,7 +50,32 @@ module.exports = function plot(gd, cdparcoords) {
         gd.emit('plotly_unhover', eventData);
     };
 
-    var axesMoved = function() {
+    var axesMoved = function(i, visibleIndices) {
+
+        // Have updated order data on `gd.data` and raise `Plotly.restyle` event
+        // without having to incur heavy UI blocking due to an actual `Plotly.restyle` call
+
+        function newIdx(visibleIndices, orig, dim) {
+            var origIndex = orig.indexOf(dim);
+            var currentIndex = visibleIndices.indexOf(origIndex);
+            if(currentIndex === -1) {
+                // invisible dimensions go to the end, retaining their original order
+                currentIndex += orig.length;
+            }
+            return currentIndex;
+        }
+
+        function sorter(orig) {
+            return function sorter(d1, d2) {
+                var i1 = newIdx(visibleIndices, orig, d1);
+                var i2 = newIdx(visibleIndices, orig, d2);
+                return i1 - i2;
+            };
+        }
+
+        var orig = sorter(gdDimensionsOriginalOrder[i].filter(function(d) {return d.visible === void(0) || d.visible;}));
+        gdDimensions[i].sort(orig);
+
         gd.emit('plotly_restyle');
     };