in src/parallel/parallel.tsx [136:214]
componentDidUpdate(prevProps: ParallelPlotData, prevState: ParallelPlotState) {
if (prevState.height != this.state.height || prevState.width != this.state.width) {
if (this.on_resize != null) {
this.on_resize();
}
}
if (prevState.invert != this.state.invert) {
this.props.persistentState.set('invert', Array.from(this.state.invert));
}
if (prevState.hide != this.state.hide) {
this.props.persistentState.set('hide', Array.from(this.state.hide));
}
if (prevState.order != this.state.order) {
this.props.persistentState.set('order', this.state.order);
}
if (prevState.dimensions != this.state.dimensions && this.xscale !== undefined) {
var g: any = d3.select(this.svgg_ref.current).selectAll(".dimension");
this.xscale.domain(this.state.dimensions);
this.dimensions_dom.filter(function(this: ParallelPlot, p) { return this.state.dimensions.indexOf(p) == -1; }.bind(this)).remove();
this.dimensions_dom = this.dimensions_dom.filter(function(this: ParallelPlot, p) { return this.state.dimensions.indexOf(p) !== -1; }.bind(this));
if (!this.state.dragging && !IS_SAFARI) {
g = g.transition();
}
g.attr("transform", function(this: ParallelPlot, p) { return "translate(" + this.position(p) + ")"; }.bind(this));
redrawAllForeignObjectsIfSafari();
this.update_ticks();
this.updateAxisTitlesAnglesAndFontSize();
}
// Highlight polylines
if (prevProps.rows_highlighted != this.props.rows_highlighted) {
this.highlighted.clearRect(0, 0, this.w, this.h);
if (this.props.rows_highlighted.length == 0) {
d3.select(this.foreground_ref.current).style("opacity", null);
}
else {
d3.select(this.foreground_ref.current).style("opacity", "0.25");
this.props.rows_highlighted.forEach(function(this: ParallelPlot, dp: Datapoint) {
this.path(dp, this.highlighted, this.props.get_color_for_row(dp, 1));
}.bind(this));
}
}
// Recompute scales - when dimensions got removed, or scaling changed for one
if (this.pplot && (this.state.dimensions != prevState.dimensions || prevProps.params_def != this.props.params_def)) {
var drop_scales = [];
this.state.dimensions.forEach(function(this: ParallelPlot, d: string) {
var new_scale = this.createScale(d);
if (new_scale === null) {
drop_scales.push(d);
return;
}
this.yscale[d] = new_scale;
}.bind(this));
drop_scales.forEach(function(this: ParallelPlot, d: string) {
this.remove_axis(d);
}.bind(this));
}
// Dimension added - redraw missing axis
const oldDimsSet = new Set(prevState.dimensions);
if (this.pplot && ![...this.state.dimensions].every(value => oldDimsSet.has(value))) {
this.pplot.redraw_axis();
}
// Rescale to new dataset domain
if (this.pplot && prevProps.params_def != this.props.params_def) {
this.brush_clear_all();
this.update_ticks();
if (this.animloop) {
this.animloop.stop();
}
}
// When we need to redraw lines
if (prevProps.rows_selected != this.props.rows_selected || prevProps.colorby != this.props.colorby || prevState.height != this.state.height || prevState.width != this.state.width) {
this.setState(function(prevState) { return { brush_count: prevState.brush_count + 1}; });
}
else if (prevState.brush_count != this.state.brush_count) {
this.paths(this.props.rows_selected, this.foreground, this.state.brush_count);
}
this.props.window_state.height = this.state.height;
}