Refactor parcoords - bug fixes - reuse axes ticktext - support pseudo html labels - features for label angle & position

src/traces/parcoords/lines.js

@@ -265,14 +265,14 @@ module.exports = function(canvasGL, d) {
             resolution: regl.prop('resolution'),
             viewBoxPosition: regl.prop('viewBoxPosition'),
             viewBoxSize: regl.prop('viewBoxSize'),
+            dim0A: regl.prop('dim0A'),
             dim1A: regl.prop('dim1A'),
-            dim2A: regl.prop('dim2A'),
+            dim0B: regl.prop('dim0B'),
             dim1B: regl.prop('dim1B'),
-            dim2B: regl.prop('dim2B'),
+            dim0C: regl.prop('dim0C'),
             dim1C: regl.prop('dim1C'),
-            dim2C: regl.prop('dim2C'),
+            dim0D: regl.prop('dim0D'),
             dim1D: regl.prop('dim1D'),
-            dim2D: regl.prop('dim2D'),
             loA: regl.prop('loA'),
             hiA: regl.prop('hiA'),
             loB: regl.prop('loB'),
@@ -317,9 +317,9 @@ module.exports = function(canvasGL, d) {
 
     var previousAxisOrder = [];
 
-    function makeItem(i, ii, x, y, panelSizeX, canvasPanelSizeY, crossfilterDimensionIndex, I, leftmost, rightmost, constraints) {
+    function makeItem(i0, i1, x, y, panelSizeX, canvasPanelSizeY, crossfilterDimensionIndex, I, leftmost, rightmost, constraints) {
         var loHi, abcd, d, index;
-        var leftRight = [i, ii];
+        var leftRight = [i0, i1];
 
         var dims = [0, 1].map(function() {return [0, 1, 2, 3].map(function() {return new Float32Array(16);});});
 
@@ -342,17 +342,17 @@ module.exports = function(canvasGL, d) {
             resolution: [canvasWidth, canvasHeight],
             viewBoxPosition: [x + overdrag, y],
             viewBoxSize: [panelSizeX, canvasPanelSizeY],
-            i: i,
-            ii: ii,
-
-            dim1A: dims[0][0],
-            dim1B: dims[0][1],
-            dim1C: dims[0][2],
-            dim1D: dims[0][3],
-            dim2A: dims[1][0],
-            dim2B: dims[1][1],
-            dim2C: dims[1][2],
-            dim2D: dims[1][3],
+            i0: i0,
+            i1: i1,
+
+            dim0A: dims[0][0],
+            dim0B: dims[0][1],
+            dim0C: dims[0][2],
+            dim0D: dims[0][3],
+            dim1A: dims[1][0],
+            dim1B: dims[1][1],
+            dim1C: dims[1][2],
+            dim1D: dims[1][3],
 
             colorClamp: colorClamp,
 
@@ -373,7 +373,7 @@ module.exports = function(canvasGL, d) {
     function makeConstraints() {
         var loHi, abcd, d;
 
-        var lims = [0, 1].map(function() {return [0, 1, 2, 3].map(function() {return new Float32Array(16);});});
+        var limits = [0, 1].map(function() {return [0, 1, 2, 3].map(function() {return new Float32Array(16);});});
 
         for(loHi = 0; loHi < 2; loHi++) {
             for(abcd = 0; abcd < 4; abcd++) {
@@ -383,7 +383,8 @@ module.exports = function(canvasGL, d) {
                     if(dimP < initialDims.length) {
                         lim = initialDims[dimP].brush.filter.getBounds()[loHi];
                     } else lim = loHi;
-                    lims[loHi][abcd][d] = lim + (2 * loHi - 1) * filterEpsilon;
+
+                    limits[loHi][abcd][d] = lim + (2 * loHi - 1) * filterEpsilon;
                 }
             }
         }
@@ -396,9 +397,11 @@ module.exports = function(canvasGL, d) {
             ];
         }
 
-        var mask = Array.apply(null, new Array(maskHeight * channelCount)).map(function() {
-            return 255;
-        });
+        var mask = [];
+        for(var i = 0; i < maskHeight * channelCount; i++) {
+            mask[i] = 255;
+        }
+
         for(var dimIndex = 0; dimIndex < initialDims.length; dimIndex++) {
             var bitIndex = dimIndex % bitsPerByte;
             var byteIndex = (dimIndex - bitIndex) / bitsPerByte;
@@ -432,14 +435,14 @@ module.exports = function(canvasGL, d) {
         return {
             maskTexture: maskTexture,
             maskHeight: maskHeight,
-            loA: lims[0][0],
-            loB: lims[0][1],
-            loC: lims[0][2],
-            loD: lims[0][3],
-            hiA: lims[1][0],
-            hiB: lims[1][1],
-            hiC: lims[1][2],
-            hiD: lims[1][3]
+            loA: limits[0][0],
+            loB: limits[0][1],
+            loC: limits[0][2],
+            loD: limits[0][3],
+            hiA: limits[1][0],
+            hiB: limits[1][1],
+            hiC: limits[1][2],
+            hiD: limits[1][3]
         };
     }
 
@@ -453,12 +456,12 @@ module.exports = function(canvasGL, d) {
         var highestX = -Infinity;
 
         for(I = 0; I < panelCount; I++) {
-            if(panels[I].dim2.canvasX > highestX) {
-                highestX = panels[I].dim2.canvasX;
+            if(panels[I].dim1.canvasX > highestX) {
+                highestX = panels[I].dim1.canvasX;
                 rightmost = I;
             }
-            if(panels[I].dim1.canvasX < lowestX) {
-                lowestX = panels[I].dim1.canvasX;
+            if(panels[I].dim0.canvasX < lowestX) {
+                lowestX = panels[I].dim0.canvasX;
                 leftmost = I;
             }
         }
@@ -471,18 +474,18 @@ module.exports = function(canvasGL, d) {
 
         for(I = 0; I < panelCount; I++) {
             var panel = panels[I];
+            var dim0 = panel.dim0;
             var dim1 = panel.dim1;
-            var i = dim1.crossfilterDimensionIndex;
+            var i0 = dim0.crossfilterDimensionIndex;
+            var i1 = dim1.crossfilterDimensionIndex;
             var x = panel.canvasX;
             var y = panel.canvasY;
-            var dim2 = panel.dim2;
-            var ii = dim2.crossfilterDimensionIndex;
             var panelSizeX = panel.panelSizeX;
             var panelSizeY = panel.panelSizeY;
             var xTo = x + panelSizeX;
-            if(setChanged || !previousAxisOrder[i] || previousAxisOrder[i][0] !== x || previousAxisOrder[i][1] !== xTo) {
-                previousAxisOrder[i] = [x, xTo];
-                var item = makeItem(i, ii, x, y, panelSizeX, panelSizeY, dim1.crossfilterDimensionIndex, I, leftmost, rightmost, constraints);
+            if(setChanged || !previousAxisOrder[i0] || previousAxisOrder[i0][0] !== x || previousAxisOrder[i0][1] !== xTo) {
+                previousAxisOrder[i0] = [x, xTo];
+                var item = makeItem(i0, i1, x, y, panelSizeX, panelSizeY, dim0.crossfilterDimensionIndex, I, leftmost, rightmost, constraints);
                 renderState.clearOnly = clearOnly;
                 renderBlock(regl, glAes, renderState, setChanged ? model.lines.blockLineCount : sampleCount, sampleCount, item);
             }

src/traces/parcoords/parcoords.js

@@ -436,12 +436,12 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
         var panelCount = dimData.length - 1;
         for(var p = 0; p < panelCount; p++) {
             var panel = panels[p] || (panels[p] = {});
-            var dim1 = dimData[p];
-            var dim2 = dimData[p + 1];
+            var dim0 = dimData[p];
+            var dim1 = dimData[p + 1];
+            panel.dim0 = dim0;
             panel.dim1 = dim1;
-            panel.dim2 = dim2;
-            panel.canvasX = dim1.canvasX;
-            panel.panelSizeX = dim2.canvasX - dim1.canvasX;
+            panel.canvasX = dim0.canvasX;
+            panel.panelSizeX = dim1.canvasX - dim0.canvasX;
             panel.panelSizeY = vm.model.canvasHeight;
             panel.y = 0;
             panel.canvasY = 0;
@@ -497,7 +497,7 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
             yAxis.filter(function(dd) { return Math.abs(d.xIndex - dd.xIndex) !== 0; })
                 .attr('transform', function(d) { return 'translate(' + d.xScale(d.xIndex) + ', 0)'; });
             d3.select(this).attr('transform', 'translate(' + d.x + ', 0)');
-            yAxis.each(function(dd, i, ii) { if(ii === d.parent.key) p.dimensions[i] = dd; });
+            yAxis.each(function(dd, i0, i1) { if(i1 === d.parent.key) p.dimensions[i0] = dd; });
             p.contextLayer && p.contextLayer.render(p.panels, false, !someFiltersActive(p));
             p.focusLayer.render && p.focusLayer.render(p.panels);
         })

src/traces/parcoords/plot.js

@@ -98,9 +98,10 @@ module.exports = function plot(gd, cdparcoords) {
 
         function sorter(orig) {
             return function sorter(d1, d2) {
-                var i1 = newIdx(visibleIndices, orig, d1);
-                var i2 = newIdx(visibleIndices, orig, d2);
-                return i1 - i2;
+                return (
+                    newIdx(visibleIndices, orig, d1) -
+                    newIdx(visibleIndices, orig, d2)
+                );
             };
         }
 

src/traces/parcoords/shaders/context_vertex.glsl

@@ -1,13 +1,15 @@
 precision highp float;
 
+#pragma glslify: axisY = require("./y.glsl", mats=mats)
+
 attribute vec4 p0, p1, p2, p3,
                p4, p5, p6, p7,
                p8, p9, pa, pb,
                pc, pd, pe;
 
 attribute vec4 pf;
 
-uniform mat4 dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D;
+uniform mat4 dim0A, dim1A, dim0B, dim1B, dim0C, dim1C, dim0D, dim1D;
 
 uniform vec2 resolution,
              viewBoxPosition,
@@ -19,24 +21,42 @@ uniform vec2 colorClamp;
 
 varying vec4 fragColor;
 
-#pragma glslify: unfilteredPosition = require("./unfiltered_position.glsl")
+vec2 xyProjection = vec2(1.0, 1.0);
+
+vec4 unfilteredPosition(
+        float depth,
+        vec2 resolution,
+        mat4 dims[4],
+        float signum
+    ) {
+
+    float x = 0.5 * signum + 0.5;
+    float y = axisY(x, dims, dim0A, dim1A, dim0B, dim1B, dim0C, dim1C, dim0D, dim1D);
+
+    vec2 viewBoxXY = viewBoxPosition + viewBoxSize * vec2(x, y);
+
+    return vec4(
+        xyProjection * (2.0 * viewBoxXY / resolution - 1.0),
+        depth,
+        1.0
+    );
+}
 
 void main() {
 
     float prominence = abs(pf[3]);
 
-    mat4 p[4];
-    p[0] = mat4(p0, p1, p2, p3);
-    p[1] = mat4(p4, p5, p6, p7);
-    p[2] = mat4(p8, p9, pa, pb);
-    p[3] = mat4(pc, pd, pe, abs(pf));
+    mat4 dims[4];
+    dims[0] = mat4(p0, p1, p2, p3);
+    dims[1] = mat4(p4, p5, p6, p7);
+    dims[2] = mat4(p8, p9, pa, pb);
+    dims[3] = mat4(pc, pd, pe, abs(pf));
 
     gl_Position = unfilteredPosition(
         1.0 - prominence,
-        resolution, viewBoxPosition, viewBoxSize,
-        p,
-        sign(pf[3]),
-        dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D
+        resolution,
+        dims,
+        sign(pf[3])
     );
 
     float clampedColorIndex = clamp((prominence - colorClamp[0]) / (colorClamp[1] - colorClamp[0]), 0.0, 1.0);

src/traces/parcoords/shaders/fragment.glsl

@@ -1,4 +1,4 @@
-precision lowp float;
+precision highp float;
 
 varying vec4 fragColor;
 

src/traces/parcoords/shaders/pick_vertex.glsl

@@ -1,13 +1,15 @@
 precision highp float;
 
+#pragma glslify: position = require("./position.glsl")
+
 attribute vec4 p0, p1, p2, p3,
                p4, p5, p6, p7,
                p8, p9, pa, pb,
                pc, pd, pe;
 
 attribute vec4 pf;
 
-uniform mat4 dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D,
+uniform mat4 dim0A, dim1A, dim0B, dim1B, dim0C, dim1C, dim0D, dim1D,
              loA, hiA, loB, hiB, loC, hiC, loD, hiD;
 
 uniform vec2 resolution,
@@ -21,25 +23,25 @@ uniform vec2 colorClamp;
 
 varying vec4 fragColor;
 
-#pragma glslify: position = require("./position.glsl")
-
 void main() {
 
     float prominence = abs(pf[3]);
 
-    mat4 p[4];
-    p[0] = mat4(p0, p1, p2, p3);
-    p[1] = mat4(p4, p5, p6, p7);
-    p[2] = mat4(p8, p9, pa, pb);
-    p[3] = mat4(pc, pd, pe, abs(pf));
+    mat4 dims[4];
+    dims[0] = mat4(p0, p1, p2, p3);
+    dims[1] = mat4(p4, p5, p6, p7);
+    dims[2] = mat4(p8, p9, pa, pb);
+    dims[3] = mat4(pc, pd, pe, abs(pf));
 
     gl_Position = position(
         1.0 - prominence,
-        resolution, viewBoxPosition, viewBoxSize,
-        p,
+        resolution,
+        dims,
         sign(pf[3]),
-        dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D,
+
+        dim0A, dim1A, dim0B, dim1B, dim0C, dim1C, dim0D, dim1D,
         loA, hiA, loB, hiB, loC, hiC, loD, hiD,
+        viewBoxPosition, viewBoxSize,
         mask, maskHeight
     );
 

src/traces/parcoords/shaders/position.glsl

@@ -1,5 +1,6 @@
-#pragma glslify: axisY = require("./y.glsl", mats=mats)
+precision highp float;
 
+#pragma glslify: axisY = require("./y.glsl", mats=mats)
 #pragma glslify: export(position)
 
 const int bitsPerByte = 8;
@@ -12,9 +13,9 @@ int mod8(int a) {
     return a - 8 * (a / 8);
 }
 
-vec4 zero = vec4(0, 0, 0, 0);
-vec4 unit = vec4(1, 1, 1, 1);
-vec2 xyProjection = vec2(1, 1);
+vec4 zero = vec4(0.0, 0.0, 0.0, 0.0);
+vec4 unit = vec4(1.0, 1.0, 1.0, 1.0);
+vec2 xyProjection = vec2(1.0, 1.0);
 
 mat4 mclamp(mat4 m, mat4 lo, mat4 hi) {
     return mat4(clamp(m[0], lo[0], hi[0]),
@@ -61,20 +62,22 @@ bool withinRasterMask(mat4 d[4], sampler2D mask, float height) {
 
 vec4 position(
         float depth,
-        vec2 resolution, vec2 viewBoxPosition, vec2 viewBoxSize,
+        vec2 resolution,
         mat4 dims[4],
         float signum,
-        mat4 dim1A, mat4 dim2A, mat4 dim1B, mat4 dim2B, mat4 dim1C, mat4 dim2C, mat4 dim1D, mat4 dim2D,
+
+        mat4 dim0A, mat4 dim1A, mat4 dim0B, mat4 dim1B, mat4 dim0C, mat4 dim1C, mat4 dim0D, mat4 dim1D,
         mat4 loA, mat4 hiA, mat4 loB, mat4 hiB, mat4 loC, mat4 hiC, mat4 loD, mat4 hiD,
+        vec2 viewBoxPosition, vec2 viewBoxSize,
         sampler2D mask, float maskHeight
     ) {
 
     float x = 0.5 * signum + 0.5;
-    float y = axisY(x, dims, dim1A, dim2A, dim1B, dim2B, dim1C, dim2C, dim1D, dim2D);
+    float y = axisY(x, dims, dim0A, dim1A, dim0B, dim1B, dim0C, dim1C, dim0D, dim1D);
 
     float show = float(
-                            withinBoundingBox(dims, loA, hiA, loB, hiB, loC, hiC, loD, hiD)
-                         && withinRasterMask(dims, mask, maskHeight)
+                        withinBoundingBox(dims, loA, hiA, loB, hiB, loC, hiC, loD, hiD) &&
+                        withinRasterMask(dims, mask, maskHeight)
                       );
 
     vec2 viewBoxXY = viewBoxPosition + viewBoxSize * vec2(x, y);