Performance Issues

I am currently working on a visualization tool that has multiple animations going on at the same time. What I am trying to do is look at how a graph evolves over time, so I have the graph I am watching evolve in one pane (using GoldenLayout) and a timline graph in a another pane with an aggregation shown on it. What I am trying to do is display a black line on the timeline graph and animate it while I am animating the change in the main graph, but unfortunately this is resulting in very poor performance (whole screen stops after a while or starts flickering depending on what I’ve tried and the black line is never show).

My application is using Redux and that is how I start / stop / run animations. In the animation component I use the following interval to animate the graphs:

animate = (timestamp) => {
    if (this.lastTime === null) {
      this.lastTime = timestamp;
    }
    this.props.addAnimationMsTime(timestamp - this.lastTime);
    this.lastTime = timestamp;
    if (this.props.animation.get('animating')) {
      window.requestAnimationFrame(this.animate.bind(this));
    }
  };

(I know it’s not the best practice to put this here, so if you have any other ideas on where it should go, that would be greatly appreciated.)

From here the data goes to the main graph and updates the entire graph. My data is parsed on a web-worker ahead of time and pre-imported into the component at construction time. Since I wanted web-worker transfer times and data-switching to be quick, I put my data into Uint32Arrays, since they are transferable over web-workers and switching to a different portion of data is just constructing a data-view on the buffer, which at least as fast as array.slice(). There are separate arrays for the x and y axes. Component data is updated when the current time slice being viewed changes (which changes with previous interval). Since my data doesn’t have a datapoint for every instant, I have to do a binary search to find the closest point. Then, on another frame interval, the data is updated on the main graph:

updateChart() {
    if (this.hasUpdatedSinceLast) {
      this.hasUpdatedSinceLast = false;
      const backtracksPerLevelIndex = closestBinarySearch(
        this.props.backtracksPerLevelTime,
        this.props.currentTime,
        (time) => time,
      );

      this.currentBacktracksPerLevel = new Uint32Array(
        this.props.backtracksPerLevel.buffer,
        4 * (this.props.numVars + 1) * backtracksPerLevelIndex,
        this.props.numVars + 1
      );

      const algoFiresIndex = closestBinarySearch(
        this.props.algoFiresTime,
        this.props.currentTime,
        (time) => time,
      );

      this.currentAlgoFires = [];
      for (let i = 0; i < this.props.algoOrder.length; i++) {
        this.currentAlgoFires[i] = new Uint32Array(
          this.props.algoFires.buffer,
          4 * ((this.props.numVars + 1) * this.props.algoOrder.length * algoFiresIndex +
            (this.props.numVars + 1) * i),
          this.props.numVars + 1
        );
      }

      this.setState({ plotRevision: this.state.plotRevision + 1 });
    }

    if (!this.stopAnimation) {
      window.requestAnimationFrame(this.updateChart.bind(this));
    }
  }

From here, it is rendered using:

render() {
    const data = [
      {
        name: 'Backtracks',
        type: 'scattergl',
        mode: 'lines',
        y: this.currentBacktracksPerLevel,
      },
    ];
    for (let i = 0; i < this.props.algoOrder.length; i++) {
      const [line, algo] = this.props.algoOrder[i];
      data.push({
        name: `Algo ${algo} ${this.props.lineLabels[line]}`,
       type: 'scattergl',
        mode: 'lines',
        y: this.currentAlgoFires[i],
        yaxis: 'y2',
      });
    }

    let rangeAlgoMax = 1;
    for (let i = 0; i < this.currentAlgoFires.length; i++) {
      for (let j = 0; j < this.currentAlgoFires[i].length; j++) {
        rangeAlgoMax = Math.max(rangeAlgoMax, this.currentAlgoFires[i][j]);
      }
    }

    let rangeBtMax = 1;
    for (let i = 0; i < this.currentBacktracksPerLevel.length; i++) {
      rangeBtMax = Math.max(rangeBtMax, this.currentBacktracksPerLevel[i]);
    }

    eturn (
      <div
        className={styles['backtrack-window']}
        ref={(el) => { this.container = el; }}
      >
        <Plot
          className={styles['backtrack-graph']}
          ref={(el) => { this.plot = el; }}
          layout={{
            width: this.state.width,
            height: this.state.height,
            xaxis: {
              title: 'Search Level',
              range: [0, this.props.numVars + 1],
            },
            yaxis: {
              title: 'Backtracks Per Level',
              range: [0, rangeBtMax * 1.03],
            },
            yaxis2: {
              title: 'Algo Fires',
              range: [0, rangeAlgoMax * 1.03],
              overlaying: 'y',
              side: 'right',
            },
            legend: {
              orientation: 'h',
              y: 1.2,
            },
            margin: {
              l: 45,
              r: 45,
              b: 40,
              t: 15,
            },
          }}
          revision={this.plotRevision}
          data={data}
       />
      </div>
    );
  }

The timeline graph is created much in the same way, but uses a lot more data that is static. It shows the entire aggregation, which is not updated during animation, and attempts to show a vertical line at a point, representing the current time in the animation. However, whenever I enable the line, it slows down a lot and I haven’t seen it yet. Here is the code for the important parts of the timeline graph:

  updateChart = () => {
    if (this.hasUpdated) {
      this.hasUpdated = false;

      this.setState({ plotRevision: this.state.plotRevision + 1 });
    }

    if (!this.stopAnimating) {
      window.requestAnimationFrame(this.updateChart.bind(this));
    }
  }

  render() {
    const data = [
      {
        name: 'Threshold',
        type: 'scattergl',
        mode: 'lines',
        x: this.props.thresholdsTime,
        y: this.props.thresholds,
        side: 'above',
      },
      {
        name: 'Backtracks',
        type: 'scattergl',
        mode: 'lines',
        x: this.props.backtracksTime,
        y: this.props.backtracks,
      },
      {
        name: 'Current Time',
        type: 'scattergl',
        mode: 'lines',
        x: [this.props.currentTime, this.props.currentTime],
        y: [0, 1],
        yaxis: 'y2',
      },
    ];

    return (
      <div className={styles['threshold-window']} ref={(el) => { this.container = el; }}>
        <Plot
          divId={`backtracks-${this.props.name}`}
          className={styles['threshold-graph']}
          ref={(el) => { this.plot = el; }}
          layout={{
            width: this.state.width,
            height: this.state.height,
            yaxis: {
              fixedrange: true,
            },
            yaxis2: {
              side: 'right',
              range: [0, 1],
            },
            margin: {
              l: 35,
              r: 15,
              b: 20,
              t: 15,
            },
            legend: {
              orientation: 'h',
              y: 1,
            },
          }}
          revision={this.state.plotRevision}
          data={data}
        />
      </div>
    );
  }

I’m also looking for overall ways of improving this sort of animation constantly, since it’s my first time doing such large scale animations, so if you have any suggestions, even tangential to this issue, that would be great.

[nicolaskruchten]

(see also https://stackoverflow.com/questions/49278511/how-do-i-update-only-one-trace-in-react-plotly/49280434 )

[nicolaskruchten]

I’d be happy to add support for it, I just have no real sense of how it would fit into an idiomatic React API 😃