componentDidUpdate()

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;
  }