RemoteRendererStatsTable

Source

index.js

import style from 'PVWStyle/NativeUI/RemoteRendererStatsTable.mcss';
import htmlTemplate from 'paraviewweb/src/NativeUI/Renderers/RemoteRendererStatsTable/template.html';

export default class RemoteRendererStatsTable {
  constructor(container = null) {
    this.container = container;
    this.visible = false;
    this.statData = {};
  }

  setContainer(container = null) {
    if (this.container && this.container !== container) {
      // Clean previous container
      while (this.container.firstChild) {
        this.container.removeChild(this.container.firstChild);
      }

      this.container = null;
    }

    if (container && this.container !== container) {
      this.container = container;
      this.container.innerHTML = htmlTemplate;
      this.container
        .querySelector('.render-stats-table')
        .classList.add(style.statTable);
    }
  }

  updateData(stats, show) {
    this.statData = Object.assign(this.statData, stats);
    this.visible = show;
  }

  render() {
    if (this.container) {
      if (this.visible) {
        const avgDeltaT =
          this.statData.deltaT.reduce((prev, cur) => prev + cur) /
          this.statData.deltaT.length;
        const avgRoundTrip =
          this.statData.roundTrip.reduce((prev, cur) => prev + cur) /
          this.statData.roundTrip.length;
        const avgWorkTime =
          this.statData.workTime.reduce((prev, cur) => prev + cur) /
          this.statData.workTime.length;

        this.container
          .querySelector('.render-stats-table')
          .classList.remove(style.hidden);

        this.container.querySelector(
          '.total-frames-value'
        ).innerHTML = `${this.statData.renderCount}`;
        this.container.querySelector(
          '.stale-frames-value'
        ).innerHTML = `${this.statData.staleRenderCount}`;
        this.container.querySelector(
          '.avg-network-time-value'
        ).innerHTML = `${avgRoundTrip.toFixed(1)} ms`;
        this.container.querySelector(
          '.avg-server-time-value'
        ).innerHTML = `${avgWorkTime.toFixed(1)} ms`;
        this.container.querySelector('.avg-framerate-value').innerHTML = `${(
          1000 / avgDeltaT
        ).toFixed(1)} fps`;
      } else {
        this.container
          .querySelector('.render-stats-table')
          .classList.add(style.hidden);
      }
    }
  }

  resize() {
    this.render();
  }

  destroy() {
    this.setContainer(null);
  }
}

template.html

<table class="render-stats-table">
  <tr>
    <td class='total-frames-label'>Total frames</td>
    <td class='total-frames-value'></td>
  </tr>
  <tr>
    <td class='stale-frames-label'>Stale frames</td>
    <td class='stale-frames-value'></td>
  </tr>  <tr>
    <td class='avg-network-time-label'>Avg network time</td>
    <td class='avg-network-time-value'></td>
  </tr>  <tr>
    <td class='avg-server-time-label'>Avg server time</td>
    <td class='avg-server-time-value'></td>
  </tr>  <tr>
    <td class='avg-framerate-label'>Avg frames per second</td>
    <td class='avg-framerate-value'></td>
  </tr>
</table>