Skip to content

Commit fa1a436

Browse files
alexcjohnsonalexcjohnson
committed
parcoords create/update pattern
1 parent 2911ae6 commit fa1a436

File tree

2 files changed

+70
-60
lines changed

2 files changed

+70
-60
lines changed

‎src/traces/parcoords/lines.js‎

Lines changed: 67 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ var filterEpsilon = 1e-7;
2525
// precision of multiselect is the full range divided into this many parts
2626
var maskHeight = 2048;
2727

28-
2928
var gpuDimensionCount = 64;
3029
var sectionVertexCount = 2;
3130
var vec4NumberCount = 4;
@@ -37,6 +36,14 @@ var contextColor = [119, 119, 119]; // middle gray to not drawn the focus; looks
3736
var dummyPixel = new Uint8Array(4);
3837
var pickPixel = new Uint8Array(4);
3938

39+
var paletteTextureConfig = {
40+
shape: [256, 1],
41+
format: 'rgba',
42+
type: 'uint8',
43+
mag: 'nearest',
44+
min: 'nearest'
45+
};
46+
4047
function ensureDraw(regl) {
4148
regl.read({
4249
x: 0,
@@ -123,7 +130,8 @@ function calcPickColor(j, rgbIndex) {
123130
return (j >>> 8 * rgbIndex) % 256 / 255;
124131
}
125132

126-
function makePoints(sampleCount, dimensionCount, dimensions, color) {
133+
function makePoints(sampleCount, dimensions, color) {
134+
var dimensionCount = dimensions.length;
127135

128136
var points = [];
129137
for(var j = 0; j < sampleCount; j++) {
@@ -141,8 +149,7 @@ function makePoints(sampleCount, dimensionCount, dimensions, color) {
141149
return points;
142150
}
143151

144-
function makeVecAttr(regl, sampleCount, points, vecIndex) {
145-
152+
function makeVecAttr(sampleCount, points, vecIndex) {
146153
var i, j, k;
147154
var pointPairs = [];
148155

@@ -157,75 +164,53 @@ function makeVecAttr(regl, sampleCount, points, vecIndex) {
157164
}
158165
}
159166

160-
return regl.buffer(pointPairs);
167+
return pointPairs;
161168
}
162169

163-
function makeAttributes(regl, sampleCount, points) {
170+
function setAttributes(attributes, sampleCount, points) {
171+
for(var i = 0; i < 16; i++) {
172+
attributes['p' + i.toString(16)](makeVecAttr(sampleCount, points, i));
173+
}
174+
}
164175

176+
function emptyAttributes(regl) {
165177
var attributes = {};
166-
167178
for(var i = 0; i < 16; i++) {
168-
attributes['p' + i.toString(16)] = makeVecAttr(regl, sampleCount, points, i);
179+
attributes['p' + i.toString(16)] = regl.buffer({usage: 'dynamic', type: 'float', data: null});
169180
}
170-
171181
return attributes;
172182
}
173183

174184
module.exports = function(canvasGL, d) {
175-
var model = d.model,
176-
vm = d.viewModel,
177-
domain = model.domain;
178-
179-
var lines = model.lines,
180-
canvasWidth = model.canvasWidth,
181-
canvasHeight = model.canvasHeight,
182-
initialDimensions = vm.dimensions,
183-
initialPanels = vm.panels,
184-
unitToColor = model.unitToColor,
185-
context = d.context,
186-
pick = d.pick;
185+
// context & pick describe which canvas we're talking about - won't change with new data
186+
var context = d.context;
187+
var pick = d.pick;
188+
189+
var regl = d.regl;
187190

188191
var renderState = {
189192
currentRafs: {},
190193
drawCompleted: true,
191194
clearOnly: false
192195
};
193196

194-
var initialDims = initialDimensions.slice();
195-
196-
var dimensionCount = initialDims.length;
197-
var sampleCount = initialDims[0] ? initialDims[0].values.length : 0;
198-
199-
var focusAlphaBlending = context;
200-
201-
var color = pick ? lines.color.map(function(_, i) {return i / lines.color.length;}) : lines.color;
202-
var contextOpacity = Math.max(1 / 255, Math.pow(1 / color.length, 1 / 3));
203-
var overdrag = lines.canvasOverdrag;
197+
// state to be set by update and used later
198+
var model;
199+
var vm;
200+
var initialDims;
201+
var sampleCount;
202+
var attributes = emptyAttributes(regl);
203+
var maskTexture;
204+
var paletteTexture = regl.texture(paletteTextureConfig);
204205

205-
var panelCount = initialPanels.length;
206-
207-
var regl = d.regl;
208-
209-
var points = makePoints(sampleCount, dimensionCount, initialDims, color);
210-
var attributes = makeAttributes(regl, sampleCount, points);
211-
212-
var mask, maskTexture;
213-
214-
var paletteTexture = regl.texture({
215-
shape: [256, 1],
216-
format: 'rgba',
217-
type: 'uint8',
218-
mag: 'nearest',
219-
min: 'nearest',
220-
data: palette(unitToColor, context, Math.round((context ? contextOpacity : 1) * 255))
221-
});
206+
update(d);
222207

223208
var glAes = regl({
224209

225210
profile: false,
226211

227212
blend: {
228-
enable: focusAlphaBlending,
213+
enable: context,
229214
func: {
230215
srcRGB: 'src alpha',
231216
dstRGB: 'one minus src alpha',
@@ -240,7 +225,7 @@ module.exports = function(canvasGL, d) {
240225
},
241226

242227
depth: {
243-
enable: !focusAlphaBlending,
228+
enable: !context,
244229
mask: true,
245230
func: 'less',
246231
range: [0, 1]
@@ -307,6 +292,24 @@ module.exports = function(canvasGL, d) {
307292
count: regl.prop('count')
308293
});
309294

295+
function update(dNew) {
296+
model = dNew.model;
297+
vm = dNew.viewModel;
298+
initialDims = vm.dimensions.slice();
299+
sampleCount = initialDims[0] ? initialDims[0].values.length : 0;
300+
301+
var lines = model.lines;
302+
var color = pick ? lines.color.map(function(_, i) {return i / lines.color.length;}) : lines.color;
303+
var contextOpacity = Math.max(1 / 255, Math.pow(1 / color.length, 1 / 3));
304+
305+
var points = makePoints(sampleCount, initialDims, color);
306+
setAttributes(attributes, sampleCount, points);
307+
308+
paletteTexture = regl.texture(Lib.extendFlat({
309+
data: palette(model.unitToColor, context, Math.round((context ? contextOpacity : 1) * 255))
310+
}, paletteTextureConfig));
311+
}
312+
310313
var colorClamp = [0, 1];
311314

312315
function setColorDomain(unitDomain) {
@@ -331,7 +334,12 @@ module.exports = function(canvasGL, d) {
331334
}
332335
}
333336

334-
var vm = Lib.extendFlat({
337+
var overdrag = model.lines.canvasOverdrag;
338+
var domain = model.domain;
339+
var canvasWidth = model.canvasWidth;
340+
var canvasHeight = model.canvasHeight;
341+
342+
var itemModel = Lib.extendFlat({
335343
key: crossfilterDimensionIndex,
336344
resolution: [canvasWidth, canvasHeight],
337345
viewBoxPosition: [x + overdrag, y],
@@ -361,7 +369,7 @@ module.exports = function(canvasGL, d) {
361369
viewportHeight: canvasHeight
362370
}, constraints);
363371

364-
return vm;
372+
return itemModel;
365373
}
366374

367375
function makeConstraints() {
@@ -391,10 +399,10 @@ module.exports = function(canvasGL, d) {
391399
];
392400
}
393401

394-
mask = Array.apply(null, new Array(maskHeight * channelCount)).map(function() {
402+
var mask = Array.apply(null, new Array(maskHeight * channelCount)).map(function() {
395403
return 255;
396404
});
397-
for(var dimIndex = 0; dimIndex < dimensionCount; dimIndex++) {
405+
for(var dimIndex = 0; dimIndex < initialDims.length; dimIndex++) {
398406
var bitIndex = dimIndex % bitsPerByte;
399407
var byteIndex = (dimIndex - bitIndex) / bitsPerByte;
400408
var bitMask = Math.pow(2, bitIndex);
@@ -439,7 +447,7 @@ module.exports = function(canvasGL, d) {
439447
}
440448

441449
function renderGLParcoords(panels, setChanged, clearOnly) {
442-
450+
var panelCount = panels.length;
443451
var I;
444452

445453
var leftmost, rightmost, lowestX = Infinity, highestX = -Infinity;
@@ -457,7 +465,7 @@ module.exports = function(canvasGL, d) {
457465

458466
if(panelCount === 0) {
459467
// clear canvas here, as the panel iteration below will not enter the loop body
460-
clear(regl, 0, 0, canvasWidth, canvasHeight);
468+
clear(regl, 0, 0, model.canvasWidth, model.canvasHeight);
461469
}
462470
var constraints = context ? {} : makeConstraints();
463471

@@ -476,7 +484,7 @@ module.exports = function(canvasGL, d) {
476484
previousAxisOrder[i] = [x, xTo];
477485
var item = makeItem(i, ii, x, y, panelSizeX, panelSizeY, dim1.crossfilterDimensionIndex, I, leftmost, rightmost, constraints);
478486
renderState.clearOnly = clearOnly;
479-
renderBlock(regl, glAes, renderState, setChanged ? lines.blockLineCount : sampleCount, sampleCount, item);
487+
renderBlock(regl, glAes, renderState, setChanged ? model.lines.blockLineCount : sampleCount, sampleCount, item);
480488
}
481489
}
482490
}
@@ -516,6 +524,7 @@ module.exports = function(canvasGL, d) {
516524
render: renderGLParcoords,
517525
readPixel: readPixel,
518526
readPixels: readPixels,
519-
destroy: destroy
527+
destroy: destroy,
528+
update: update
520529
};
521530
};

‎src/traces/parcoords/parcoords.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -477,8 +477,9 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
477477
parcoordsLineLayer
478478
.filter(function(d) {return !!d.viewModel;})
479479
.each(function(d) {
480-
if(d.lineLayer) d.lineLayer.destroy();
481-
d.lineLayer = lineLayerMaker(this, d);
480+
if(d.lineLayer) d.lineLayer.update(d);
481+
else d.lineLayer = lineLayerMaker(this, d);
482+
482483
d.viewModel[d.key] = d.lineLayer;
483484
d.lineLayer.render(d.viewModel.panels, !d.context);
484485
});

0 commit comments

Comments
 (0)