<commit_before>import React, { Component } from 'react'
import 'react-virtualized/styles.css'
import { Grid, Cell } from 'radium-grid'
import { Link } from 'react-router'
import { Table, Column, InfiniteLoader } from 'react-virtualized'
import TableLoader from 'components/TableLoader'
import 'styles/custom.scss'

export default class PlasmidTable extends Component {
  displayName = 'plasmid table'
  loadNextPage() {
      const { stockCenterActions } = this.props
      const { isFetching, links } = this.props.stockCenter.plasmidCatalog
      const { number } = this.props.stockCenter.plasmidCatalog.meta.pagination
      if ((!isFetching && links.next) && (this.searchInput.value === '')) {
          stockCenterActions.fetchPlasmids(number + 1, 10)
      }
  }
  handleKeyDown(e) {
      if (e.keyCode === 13) {
          this.search(e.target.value)
      }
  }
  search(text) {
      const { stockCenterActions } = this.props
      stockCenterActions.searchPlasmids(1, 1, text)
      this.forceUpdate()
  }
  handleSearch() {
      this.search(this.searchInput.value)
  }
  handleClear() {
      this.clearSearch()
  }
  clearSearch() {
      this.searchInput.value = ''
      this.search('')
  }
  render() {
      let i
      const { cartActions } = this.props
      const { data, links, isFetching } = this.props.stockCenter.plasmidCatalog
      let rows = data
      const loadMoreRows = isFetching
        ? () => {}
        : this.loadNextPage.bind(this)
      const isRowLoaded = ({ index }) => { return !!rows[index] }
      const rowCount = rows.length + (links.next ? 1 : 0)
      const { cellWidth, cellHeight } = this.props
      return (
        <div className="table-responsive">
          <Grid cellWidth="1">
            <Cell align="center">
              <input
                className="search-box"
                style={ {textAlign: 'center', height: '100%', WebkitAppearance: 'textfield'} }
                type="search"
                placeholder="Search Plasmids"
                ref={ el => { this.searchInput = el } }
                onKeyDown={ this.handleKeyDown.bind(this) }
              />
            <button
              className="btn btn-primary"
              style={ {marginLeft: 7} }
              onClick={ this.handleSearch.bind(this) }
            >
              SEARCH
            </button>
            <button
              className="btn btn-primary"
              style={ {marginLeft: 7} }
              onClick={ this.handleClear.bind(this) }
            >
              CLEAR
            </button>

            </Cell>
          </Grid>
          <InfiniteLoader
            isRowLoaded={ isRowLoaded }
            rowCount={ rowCount }
            loadMoreRows={ loadMoreRows }
            threshold={ 2 }
          >
          {
            ({ onRowsRendered, registerChild }) => {
                return (
                  <Table
                    ref={ registerChild }
                    onRowsRendered={ onRowsRendered }
                    width={ (cellWidth * 3) + 350 + 260 }
                    height={ cellHeight * 7 }
                    headerHeight={ 50 }
                    headerStyle={ {textAlign: 'center', verticalAlign: 'middle'} }
                    rowHeight={ cellHeight }
                    rowGetter={ ({ index }) => {
                        if (rows[index]) {
                            return rows[index]
                        }
                    } }<commit_msg>implemented dynamic row heights for plasmid catalog #85<commit_after>import React, { Component } from 'react'
import 'react-virtualized/styles.css'
import { Grid, Cell } from 'radium-grid'
import { Link } from 'react-router'
import { Table, Column, InfiniteLoader } from 'react-virtualized'
import TableLoader from 'components/TableLoader'
import 'styles/custom.scss'

export default class PlasmidTable extends Component {
  displayName = 'plasmid table'
  loadNextPage() {
      const { stockCenterActions } = this.props
      const { isFetching, links } = this.props.stockCenter.plasmidCatalog
      const { number } = this.props.stockCenter.plasmidCatalog.meta.pagination
      if ((!isFetching && links.next) && (this.searchInput.value === '')) {
          stockCenterActions.fetchPlasmids(number + 1, 10)
      }
  }
  handleKeyDown(e) {
      if (e.keyCode === 13) {
          this.search(e.target.value)
      }
  }
  search(text) {
      const { stockCenterActions } = this.props
      stockCenterActions.searchPlasmids(1, 1, text)
      this.forceUpdate()
  }
  handleSearch() {
      this.search(this.searchInput.value)
  }
  handleClear() {
      this.clearSearch()
  }
  clearSearch() {
      this.searchInput.value = ''
      this.search('')
  }
  // getRowHeight({ index }, rows) {
  //     if (index === -1) {
  //         const height = 50
  //     } else {
  //         const remainder = rows[index].description.length % 54
  //         let lines = rows[index].description.length / 54
  //         if (remainder > 0) {
  //             lines += 1
  //         }
  //         const height = lines * 20
  //     }
  //     return height
  // }
  render() {
      let i
      const { cartActions, cellWidth, cellHeight } = this.props
      const { data, links, isFetching } = this.props.stockCenter.plasmidCatalog
      let rows = data
      const loadMoreRows = isFetching
        ? () => {}
        : this.loadNextPage.bind(this)
      const isRowLoaded = ({ index }) => { return !!rows[index] }
      const getRowHeight = ({ index }) => {
          if (rows[index]) {
              const remainder = rows[index].attributes.description.length % 54
              let lines = rows[index].attributes.description.length / 54
              if (remainder > 0) {
                  lines += 1
              }
              return lines * 30
          }
          return cellHeight
      }
      const rowCount = rows.length + (links.next ? 1 : 0)
      return (
        <div className="table-responsive">
          <Grid cellWidth="1">
            <Cell align="center">
              <input
                className="search-box"
                style={ {textAlign: 'center', height: '100%', WebkitAppearance: 'textfield'} }
                type="search"
                placeholder="Search Plasmids"
                ref={ el => { this.searchInput = el } }
                onKeyDown={ this.handleKeyDown.bind(this) }
              />
            <button
              className="btn btn-primary"
              style={ {marginLeft: 7} }
              onClick={ this.handleSearch.bind(this) }
            >
              SEARCH
            </button>
            <button
              className="btn btn-primary"
              style={ {marginLeft: 7} }
              onClick={ this.handleClear.bind(this) }
            >
              CLEAR
            </button>

            </Cell>
          </Grid>
          <InfiniteLoader
            isRowLoaded={ isRowLoaded }
            rowCount={ rowCount }
            loadMoreRows={ loadMoreRows }
            threshold={ 2 }
          >
          {
            ({ onRowsRendered, registerChild }) => {
                return (
                  <Table
                    ref={ registerChild }
                    onRowsRendered={ onRowsRendered }
                    width={ (cellWidth * 3) + 350 + 260 }
                    height={ cellHeight * 7 }
                    headerHeight={ 50 }
                    headerStyle={ {textAlign: 'center', verticalAlign: 'middle'} }
                    rowHeight={ getRowHeight }
                    rowGetter={ ({ index }) => {
                        if (rows[index]) {
                            return rows[index]
                        }
                    } }
{'fraction_non_alphanumeric': 0.11705295869480772, 'fraction_numerical': 0.0094522853813285, 'mean_word_length': 1.5729513657561625, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5437836', 'n_tokens_mistral': 2158, 'n_tokens_neox': 2066, 'n_words': 447}