render() {
    const globalAppStyles = {
      color: GlobalStyles.FONT_COLOR,
      gridTemplateRows: `${this.TOP_AND_BOTTOM_BAR_HEIGHT}px 1fr ${this.TOP_AND_BOTTOM_BAR_HEIGHT}px`
    };

    const scrollBarTrackHeightInPixels = this.determineScrollBarTrackHeightInPixels();

    const scrollBarHeadHeightInPercent = Math.min(this.determineScrollHeadHeightInPercent(), 1);
    const scrollBarHeadHeightInPixels = scrollBarHeadHeightInPercent * scrollBarTrackHeightInPixels;

    const numOfRowsThatFitInTable = this.determineNumOfRowsThatFitInTable();
    const scrollDistanceInPercent = this.state.tableOffset === 0 ? 0 : this.state.tableOffset / (this.state.filteredJobList.length - numOfRowsThatFitInTable);
    let scrollOffsetInPixels = scrollDistanceInPercent * this.determineMaxScrollBarHeadOffset();


    // used in the top and bottom bars for positioning buttons and dropdowns
    const TOP_BOTTOM_BAR_COLUMN_PADDING = 10;
    const clickableElementStyles = {
      width: `calc(100% - ${TOP_BOTTOM_BAR_COLUMN_PADDING * 2}px)`,
      marginLeft: TOP_BOTTOM_BAR_COLUMN_PADDING + "px",
      marginTop: TOP_BOTTOM_BAR_COLUMN_PADDING + "px",
      height: this.TOP_AND_BOTTOM_BAR_HEIGHT - (TOP_BOTTOM_BAR_COLUMN_PADDING * 2) + "px"
    };

    const contextMenu = this.state.contextMenu.visible ?
      <ContextMenu
        AE={this.AE}
        position={this.state.contextMenu.position}
        jobSelection={this.state.jobSelection.map((jobIndex) => this.state.filteredJobList[jobIndex])}
        fetchJobXMLStringsHandler={this.fetchJobXMLStringsHandler}
        jobActionHandler={this.jobActionHandler}
        restartHandler={this.restartHandler}
        cancelHandler={this.cancelHandler}
        bumpHandler={this.bumpHandler}
        continueHandler={this.continueHandler} />
      : null

    const duplicateJobWindows = this.state.contextMenu.duplicatedJobDetails.map((jobDetails) => {
      return (
        <DuplicateWindow
          xmlString={jobDetails.xmlString}
          jobID={jobDetails.jobID}
          title={jobDetails.title}
          closeWindowHandler={this.removeJobFromDuplicatedJobArray}
          submitHandler={this.submitDuplicatedJob} />
      );
    });

    return (
      <div
        className={Classes.Nightwing} style={globalAppStyles}
        onMouseMove={(event) => this.scrollDragMoveHandler(event.clientY)}>
        {contextMenu}
        {duplicateJobWindows}
        <GridRow row="1">
          <FilterBar
            clickableElementStyles={clickableElementStyles}
            height={this.TOP_AND_BOTTOM_BAR_HEIGHT}
            filters={this.state.filters}
            contentIDListOpen={this.state.contentIDListOpen}
            contentIDListVisiblityUpdate={this.contentIDListVisiblityUpdate}
            contentIDListValue={this.state.contentIDListValue}
            contentIDListValueUpdateHandler={this.contentIDListValueUpdate}
            filterUpdateHandler={this.filterUpdateHandler}
            timeFilterUpdateHandler={this.timeFilterUpdateHandler}
            filteredListUpdateHandler={this.filteredListUpdateHandler} />
        </GridRow>
        <GridRow row="2">
          <Table
            jobsToDraw={this.state.filteredJobList.slice(this.state.tableOffset, this.state.tableOffset + numOfRowsThatFitInTable)}
            tableOffset={this.state.tableOffset}
            tableRowClickToSelectHandler={this.tableRowClickToSelectHandler}
            tableCellDoubleClicked={this.state.tableCellDoubleClicked}
            tableCellDoubleClickToSelectHandler={this.tableCellDoubleClickToSelectHandler}
            tableCellDoubleClickToSelectRemoveHandler={this.tableCellDoubleClickToSelectRemoveHandler}
            tableOffsetUpdateHandler={this.tableOffsetUpdate}
            scrollDragStartHandler={this.scrollDragStartHandler}
            scrollBarState={this.state.scrollBar}
            rowHeight={this.TABLE_ROW_HEIGHT}
            scrollBarTrackHeight={scrollBarTrackHeightInPixels}
            scrollBarHeadHeight={scrollBarHeadHeightInPixels}
            scrollOffset={scrollOffsetInPixels}
            jobSelection={this.state.jobSelection}
            contextMenu={this.state.contextMenu}
            tableRightClickDisplayContextMenu={this.tableRightClickDisplayContextMenu}
            tableClickHideContextMenu={this.hideContextMenu}
            sortProperty={this.state.sortProperty}
            sortDirection={this.state.sortDirection}
            updateSortHandler={this.updateSortHandler}>
            {this.state.isLoading ? <LoadingBar loadingPercent={this.state.loadingPercent} /> : null}
          </Table>
        </GridRow>
        <GridRow row="3">
          <InfoBar
              clickableElementStyles={clickableElementStyles}
              height={this.TOP_AND_BOTTOM_BAR_HEIGHT}
              selectedCount={this.state.jobSelection.length}
              resultCount={this.state.filteredJobList.length}
              failureCount={this.countJobsByStatus("filteredJobList").failed || 0}
              missingCount={23} />
        </GridRow>
      </div>
    );
  }