drawTable()

in frontend/app/components/overview/top_ops_table/top_ops_table.ts [36:122]
79 lines of code
18 McCabe index (conditional complexity)

  drawTable() {
    if (!this.table || !this.generalAnalysis || !this.inputPipelineAnalysis) {
      return;
    }

    const dataTable = new google.visualization.DataTable(this.generalAnalysis);
    if (dataTable.getNumberOfColumns() < 1 || dataTable.getNumberOfRows() < 1) {
      this.title = '';
      this.table = null;
      return;
    }

    this.inputPipelineAnalysis.p = this.inputPipelineAnalysis.p || {};
    this.title = 'Top ' + String(dataTable.getNumberOfRows()) +
        ' TensorFlow operations on ' +
        (this.inputPipelineAnalysis.p.hardware_type || 'TPU');

    const columns: TopOpsColumn = {
      selfTimePercent: 0,
      cumulativeTimePercent: 0,
      category: 0,
      operation: 0,
      flopRate: 0,
      tcEligibility: 0,
      tcUtilization: 0,
    };
    for (let i = 0; i < dataTable.getNumberOfColumns(); i++) {
      switch (dataTable.getColumnId(i)) {
        case 'selfTimePercent':
          columns.selfTimePercent = i;
          break;
        case 'cumulativeTimePercent':
          columns.cumulativeTimePercent = i;
          break;
        case 'category':
          columns.category = i;
          break;
        case 'operation':
          columns.operation = i;
          break;
        case 'flopRate':
          columns.flopRate = i;
          break;
        case 'tcEligibility':
          columns.tcEligibility = i;
          break;
        case 'tcUtilization':
          columns.tcUtilization = i;
          break;
        default:
          break;
      }
    }

    const percentFormatter =
        new google.visualization.NumberFormat({'pattern': '##.#%'});
    percentFormatter.format(dataTable, columns.selfTimePercent);
    percentFormatter.format(dataTable, columns.cumulativeTimePercent);

    const oneDecimalPtFormatter =
        new google.visualization.NumberFormat({'fractionDigits': 1});
    oneDecimalPtFormatter.format(dataTable, columns.flopRate);

    dataTable.setProperty(0, columns.selfTimePercent, 'style', 'width: 10%');
    dataTable.setProperty(
        0, columns.cumulativeTimePercent, 'style', 'width: 10%');
    dataTable.setProperty(0, columns.category, 'style', 'width: 20%');
    dataTable.setProperty(0, columns.operation, 'style', 'width: 40%');
    dataTable.setProperty(0, columns.flopRate, 'style', 'display: 10%');
    dataTable.setProperty(0, columns.tcEligibility, 'style', 'display: 5%');
    dataTable.setProperty(0, columns.tcUtilization, 'style', 'display: 5%');
    const options = {
      alternatingRowStyle: false,
      showRowNumber: false,
      cssClassNames: {
        'headerCell': 'google-chart-table-header-cell',
        'tableCell': 'google-chart-table-table-cell',
      },
      width: '100%',
    };

    if ((this.inputPipelineAnalysis.p.hardware_type || 'TPU') !== 'TPU') {
      dataTable.removeColumn(FLOP_RATE_COLUMN_INDEX);
    }

    this.table.draw(dataTable, options);
  }