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.

Bắt đầu với các entry point animation, updateChart và render được hiển thị trong issue, sau đó lập hồ sơ các callback requestAnimationFrame và các lần cập nhật Plot khi trace Current Time được bật. So sánh các đường dẫn render của timeline và biểu đồ chính để xác định nơi hiệu năng suy giảm. Công việc được xem là hoàn tất khi có một cải thiện có thể tái lập rõ ràng và xác nhận rằng cả hai animation vẫn hiển thị và phản hồi tốt.