Fix parcats + Plotly.react bug

src/traces/parcats/calc.js

@@ -160,7 +160,7 @@ module.exports = function calc(gd, trace) {
 
     // Array of DimensionModel objects
     var dimensionModels = trace.dimensions.filter(visible).map(function(di, i) {
-        return createDimensionModel(i, di._index, di.displayindex, di.label, totalCount);
+        return createDimensionModel(i, di._index, di._displayindex, di.label, totalCount);
     });
 
 
@@ -174,8 +174,8 @@ module.exports = function calc(gd, trace) {
             var cats = dimensionModels[d].categories;
 
             if(cats[catInd] === undefined) {
-                var catValue = trace.dimensions[containerInd].categoryarray[catInd];
-                var catLabel = trace.dimensions[containerInd].ticktext[catInd];
+                var catValue = trace.dimensions[containerInd]._categoryarray[catInd];
+                var catLabel = trace.dimensions[containerInd]._ticktext[catInd];
                 cats[catInd] = createCategoryModel(d, catInd, catValue, catLabel);
             }
 
@@ -456,43 +456,48 @@ function getUniqueInfo(values, uniqueValues) {
 
 /**
  * Validate the requested display order for the dimensions.
- * If the display order is a permutation of 0 through dimensions.length - 1 then leave it alone. Otherwise, repalce
- * the display order with the dimension order
+ * If the display order is a permutation of 0 through dimensions.length - 1, link to _displayindex
+ * Otherwise, replace the display order with the dimension order
  * @param {Object} trace
  */
 function validateDimensionDisplayInds(trace) {
-    var displayInds = trace.dimensions.filter(visible).map(function(dim) {return dim.displayindex;});
-    if(!isRangePermutation(displayInds)) {
-        trace.dimensions.filter(visible).forEach(function(dim, i) {
-            dim.displayindex = i;
-        });
+    var visibleDims = Lib.filterVisible(trace.dimensions);
+    var displayInds = visibleDims.map(function(d) { return d.displayindex; });
+    var i;
+
+    if(isRangePermutation(displayInds)) {
+        for(i = 0; i < visibleDims.length; i++) {
+            visibleDims[i]._displayindex = visibleDims[i].displayindex;
+        }
+    } else {
+        for(i = 0; i < visibleDims.length; i++) {
+            visibleDims[i]._displayindex = i;
+        }
     }
 }
 
 
 /**
- * Validate the requested display order for the dimensions.
- * If the display order is a permutation of 0 through dimensions.length - 1 then leave it alone. Otherwise, repalce
- * the display order with the dimension order
+ * Update category properties based on the unique values found for this dimension
  * @param {Object} dim
  * @param {UniqueInfo} uniqueInfoDim
  */
 function validateCategoryProperties(dim, uniqueInfoDim) {
 
     // Update categoryarray
-    dim.categoryarray = uniqueInfoDim.uniqueValues;
+    dim._categoryarray = uniqueInfoDim.uniqueValues;
 
     // Handle ticktext
     if(dim.ticktext === null || dim.ticktext === undefined) {
-        dim.ticktext = [];
+        dim._ticktext = [];
     } else {
         // Shallow copy to avoid modifying input array
-        dim.ticktext = dim.ticktext.slice();
+        dim._ticktext = dim.ticktext.slice();
     }
 
     // Extend ticktext with elements from uniqueInfoDim.uniqueValues
-    for(var i = dim.ticktext.length; i < uniqueInfoDim.uniqueValues.length; i++) {
-        dim.ticktext.push(uniqueInfoDim.uniqueValues[i]);
+    for(var i = dim._ticktext.length; i < uniqueInfoDim.uniqueValues.length; i++) {
+        dim._ticktext.push(uniqueInfoDim.uniqueValues[i]);
     }
 }
 

test/image/mocks/parcats_bad-displayindex.json

@@ -0,0 +1,17 @@
+{
+  "data": [
+    {"type": "parcats",
+      "dimensions": [
+        {"label": "One", "values": [1, 1, 2, 1, 2, 1, 1, 2, 1],
+          "displayindex": 1, "categoryarray": [1, 2], "ticktext": ["One", "Two"]},
+        {"label": "Two", "values": ["A", "B", "A", "B", "C", "C", "A", "B", "C"],
+          "displayindex": 2, "categoryarray": ["B", "A", "C"]},
+        {"label": "Three", "values": [11, 11, 11, 11, 11, 11, 11, 11, 11], "displayindex": 1}]}
+  ],
+  "layout": {
+    "height": 602,
+    "width": 592,
+    "margin": {
+      "l": 40, "r": 40, "t": 50, "b": 40
+    }}
+}

test/jasmine/assets/mock_lists.js

@@ -27,6 +27,7 @@ var svgMockList = [
     ['range_selector_style', require('@mocks/range_selector_style.json')],
     ['range_slider_multiple', require('@mocks/range_slider_multiple.json')],
     ['sankey_energy', require('@mocks/sankey_energy.json')],
+    ['parcats_bad-displayindex', require('@mocks/parcats_bad-displayindex.json')],
     ['scattercarpet', require('@mocks/scattercarpet.json')],
     ['shapes', require('@mocks/shapes.json')],
     ['splom_iris', require('@mocks/splom_iris.json')],

test/jasmine/tests/drawing_test.js

@@ -363,7 +363,7 @@ describe('Drawing', function() {
                 'width', 'left', 'right'
             ].forEach(function(dim) {
                 // give larger dimensions some extra tolerance
-                var tol = Math.max(expected[dim] / 10, 3);
+                var tol = Math.max(expected[dim] / 10, 3.5);
                 expect(actual[dim]).toBeWithin(expected[dim], tol, dim);
             });
         }

test/jasmine/tests/parcats_test.js

@@ -723,7 +723,6 @@ describe('Drag to reordered dimensions', function() {
 
         Plotly.newPlot(gd, mock)
             .then(function() {
-                console.log(gd.data);
                 restyleCallback = jasmine.createSpy('restyleCallback');
                 gd.on('plotly_restyle', restyleCallback);
 
@@ -1229,9 +1228,6 @@ describe('Click events', function() {
                 /** @type {ParcatsViewModel} */
                 var parcatsViewModel = d3.select('g.trace.parcats').datum();
 
-                console.log(gd.data[0]);
-                console.log(parcatsViewModel.hoverinfoItems);
-
                 gd.on('plotly_click', function(data) {
                     clickData = data;
                 });

test/jasmine/tests/pie_test.js

@@ -198,8 +198,8 @@ describe('Pie traces:', function() {
             expect(title.size()).toBe(1);
             var titlePos = getClientPosition('g.titletext');
             var pieCenterPos = getClientPosition('g.trace');
-            expect(Math.abs(titlePos[0] - pieCenterPos[0])).toBeLessThan(2);
-            expect(Math.abs(titlePos[1] - pieCenterPos[1])).toBeLessThan(2);
+            expect(Math.abs(titlePos[0] - pieCenterPos[0])).toBeLessThan(4);
+            expect(Math.abs(titlePos[1] - pieCenterPos[1])).toBeLessThan(4);
         })
         .catch(failTest)
         .then(done);
@@ -229,15 +229,15 @@ describe('Pie traces:', function() {
             var pieBox = d3.select('g.trace').node().getBoundingClientRect();
             var radius = 0.1 * Math.min(pieBox.width / 2, pieBox.height / 2);
             var pieCenterPos = getClientPosition('g.trace');
-            // unfortunately boundingClientRect is inaccurate and so we allow an error of 2
+            // unfortunately boundingClientRect is inaccurate and so we allow an error of 3
             expect(_verifyPointInCircle(titleBox.left, titleBox.top, pieCenterPos, radius))
-                .toBeLessThan(2);
+                .toBeLessThan(3);
             expect(_verifyPointInCircle(titleBox.right, titleBox.top, pieCenterPos, radius))
-                .toBeLessThan(2);
+                .toBeLessThan(3);
             expect(_verifyPointInCircle(titleBox.left, titleBox.bottom, pieCenterPos, radius))
-                .toBeLessThan(2);
+                .toBeLessThan(3);
             expect(_verifyPointInCircle(titleBox.right, titleBox.bottom, pieCenterPos, radius))
-                .toBeLessThan(2);
+                .toBeLessThan(3);
         })
         .catch(failTest)
         .then(done);

test/jasmine/tests/sliders_test.js

@@ -334,13 +334,13 @@ describe('sliders interactions', function() {
             d3.select(gd).selectAll('.slider-group').each(function(d, i) {
                 var sliderBB = this.getBoundingClientRect();
                 var gdBB = gd.getBoundingClientRect();
+
                 if(i === 0) {
                     expect(sliderBB.left - gdBB.left)
-                        .toBeWithin(12, 3, 'left: ' + msg);
-                }
-                else {
+                        .toBeWithin(12, 5.1, 'left: ' + msg);
+                } else {
                     expect(gdBB.bottom - sliderBB.bottom)
-                        .toBeWithin(8, 3, 'bottom: ' + msg);
+                        .toBeWithin(8, 5.1, 'bottom: ' + msg);
                 }
             });
         }