Performance Issues

[ihowell]

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 )

[ihowell]

I'm also testing this with a much larger amount of data that will be typical for the application, and nothing is animating.

Edit: I also know that the issue is the timeline chart, because when I removed the component, animation of the evolving graph worked fine(ish, still bad fps).

[nicolaskruchten]

I'm not really following how all of this hangs together, to be honest... Can you provide a working example of the code that we can look at, even if it's just generating random data or something?

[ihowell]

Sure, I can work on that. I have a meeting until 7 though, so expect it tomorrow.

[ihowell]

I've discovered that a lot of my issues are just performance issues on my part, so I'm currently refactoring to try and make it work better. I do have one question though. When I render this trace, it shows nothing:

{
    name: 'Current Time',
    type: 'scattergl',
    mode: 'lines',
    x: [this.props.currentTime, this.props.currentTime],
    y: [0, 1],
    yaxis: 'y2',
}

But if i change the type to scatter, then it shows a vertical line. Why is this?

[ihowell]

After further testing, this actually is still a problem, I tested using two plots, one with just the working line and the other as the graph evolution and it still had a noticeable performance dip in animating both. I'll try to make a codepen now.

[ihowell]

Here is a minimum example of my app. https://codepen.io/omnitect/pen/MVVgwN Even though the data is pretty simple here, and I'm only calling updates once per animation frame, I'm still only getting on average 20fps on my computer. This gets quite a bit worse (around 7fps) with the amount of data I'm using.

Edit: For larger data sets that will be normal, it stops. I'm going to try doing multi-resolution mapping and see if that helps.

[nicolaskruchten]

Hmmm OK, I think I understand what you're trying to do here. The short answer is that I think that this is asking a lot of the React and Plotly stacks, to redraw that frequently :) The slice operations alone will cost a lot on large datasets like 1M points (see https://jsperf.com/copy-large-array/1 for example) and the rest of the machinery will likely not be able to reliably redraw everything in the less than 17 milliseconds required for 60fps animation. plotly.js has its own animation system but it's not really API-compatible with this React wrapper at the moment: https://plot.ly/javascript/animations/

[ihowell]

Gotcha. The animations though were still at around 20fps, even with their simplistic nature. Do you have any ideas on making the minimal example faster?

Edit: I'm already making the data objects properties of the components themselves, not in the state, so that I don't have to recreate the data each time, just update that small part. In addition, I'm working on multi-resolution models/maps that will render a lot fewer points. (530,000 to 240 in initial testing!)

Update: With multi-resolution models/maps, performance increased from ~1/3 fps to 8 fps.

[alokito]

At least two issues (this one and #51 ) could benefit from adding support for animations... I would also really like to have this and am willing to help out. Is anyone working on it? Does anyone have any suggestions on how it could be done (or have reasons why it is not possible)?

[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 :)