render()

in zeppelin-web/src/app/visualization/builtins/visualization-table.js [323:422]
82 lines of code
4 McCabe index (conditional complexity)

  render(tableData) {
    const gridElemId = this.getGridElemId();
    let gridElem = document.getElementById(gridElemId);

    const config = this.config;
    const self = this; // for closure
    const scope = this.getScope();
    // set gridApi for this elem
    const gridApiId = this.getGridApiId();
    const gridOptions = this.createGridOptions(tableData, onRegisterApiCallback, config);

    const onRegisterApiCallback = (gridApi) => {
      scope[gridApiId] = gridApi;
      // should restore state before registering APIs

      // register callbacks for change evens
      // should persist `self.config` instead `config` (closure issue)
      gridApi.core.on.columnVisibilityChanged(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.colMovable.on.columnPositionChanged(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.core.on.sortChanged(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.core.on.filterChanged(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.grouping.on.aggregationChanged(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.grouping.on.groupingChanged(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.treeBase.on.rowCollapsed(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.treeBase.on.rowExpanded(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.colResizable.on.columnSizeChanged(scope, () => {
        self.persistConfigWithGridState(self.config);
      });
      gridApi.edit.on.beginCellEdit(scope, (rowEntity, colDef, triggerEvent) => {
        let textArea = triggerEvent.currentTarget.children[1].children[0].children[0];
        textArea.style.height = textArea.scrollHeight + 'px';
        textArea.addEventListener('keydown', () => {
          setTimeout(() => {
            textArea.style.height = 'auto';
            textArea.style.height = textArea.scrollHeight + 'px';
          });
        }, 0);
      });

      // pagination doesn't follow usual life-cycle in ui-grid v4.0.4
      // gridApi.pagination.on.paginationChanged(scope, () => { self.persistConfigWithGridState(self.config) })
      // TBD: do we need to propagate row selection?
      // gridApi.selection.on.rowSelectionChanged(scope, () => { self.persistConfigWithGridState(self.config) })
      // gridApi.selection.on.rowSelectionChangedBatch(scope, () => { self.persistConfigWithGridState(self.config) })
    };

    if (!gridElem || this.isUpdated) {
      if (this.isUpdated) {
        this.targetEl.find(gridElem).off();
        this.targetEl.find(gridElem).detach();
        this.isUpdated = false;
      }
      // create, compile and append grid elem
      gridElem = angular.element(
        `<div id="${gridElemId}" ui-grid="${gridElemId}"
              ui-grid-edit ui-grid-row-edit
              ui-grid-pagination
              ui-grid-selection
              ui-grid-cellNav ui-grid-pinning
              ui-grid-empty-base-layer
              ui-grid-resize-columns
              ui-grid-move-columns
              ui-grid-grouping
              ui-grid-save-state
              ui-grid-exporter></div>`);

      gridElem.css('height', this.targetEl.height() - 10);
      gridElem = this._compile(gridElem)(scope);
      this.targetEl.append(gridElem);
      this.setDynamicGridOptions(gridOptions, config);
      this.addColumnMenus(gridOptions);
      scope[gridElemId] = gridOptions;
      gridOptions.onRegisterApi = onRegisterApiCallback;
    } else {
      scope[gridElemId] = gridOptions;
      this.setDynamicGridOptions(gridOptions, config);
      this.refreshGrid();
    }

    const columnDefs = this.getGridOptions().columnDefs;
    updateColumnTypeState(tableData.columns, config, columnDefs);
    // SHOULD restore grid state after columnDefs are updated
    this.restoreGridState(config.tableGridState);
  }