<commit_before>//@flow
import React from "react";
import type { Paging } from "../flow_types";
import { Button } from "@blueprintjs/core";
import { pageSizes } from "./utils/queryParams";
import { onEnterOrBlurHelper } from "../utils/handlerHelpers";

export default class PagingTool extends React.Component {
  props: {
    paging: Paging,
    setPageSize: Function,
    onRefresh?: Function,
    setPage: Function
  };

  state = {
    selectedPage: 1
  };

  componentWillReceiveProps(nextProps) {
    const { paging: { page } } = nextProps;
    this.setState({
      selectedPage: page
    });
  }

  render() {
    const { selectedPage } = this.state;
    const {
      paging: { pageSize, page, total },
      setPageSize,
      setPage,
      onRefresh
    } = this.props;
    const pageStart = (page - 1) * pageSize + 1;
    if (pageStart < 0) throw new Error("We should never have page be <0");
    const pageEnd =
      (page - 1) * pageSize + pageSize < total
        ? (page - 1) * pageSize + pageSize
        : total;
    const backEnabled = page - 1 > 0;
    const forwardEnabled = page * pageSize < total;
    const lastPage = Math.ceil(total / pageSize);

    return (
      <div className={"paging-toolbar-container"}>
        <div style={{ marginRight: 10 }}>
          {total ? (
            `Displaying ${parseInt(pageStart, 10)}-${parseInt(
              pageEnd,
              10
            )} of ${total}`
          ) : (
            "No Rows"
          )}
        </div>
        {onRefresh && <Button iconName="refresh" onClick={() => onRefresh()} />}
        <div className="pt-select">
          <select
            style={{ width: 55, marginLeft: 10 }}
            onChange={e => {
              setPageSize(parseInt(e.target.value, 10));
            }}
            value={pageSize}
          >
            {[
              <option key="page-size-placeholder" disabled value={"fake"}>
                Set Page Size
              </option>,
              ...pageSizes.map(size => {
                return (
                  <option key={size} value={size}>
                    {size}
                  </option>
                );
              })
            ]}
          </select>
        </div>
        <div style={{ marginLeft: 10 }} className="pt-button-group">
          <Button
            disabled={!backEnabled}
            iconName="double-chevron-left"
            onClick={() => {
              setPage(1);
            }}
          />
          <Button
            style={{ marginRight: 10 }}
            onClick={() => {
              setPage(parseInt(page, 10) - 1);
            }}
            disabled={!backEnabled}
            className="paging-arrow-left"
            iconName="arrow-left"
          />
        </div>
        <div>
          {total ? (
            <div>
              Page
              <input
                style={{ width: 35, marginLeft: 8, marginRight: 8 }}
                value={selectedPage}
                onChange={e => {
                  this.setState({
                    selectedPage: e.target.value
                  });
                }}
                {...onEnterOrBlurHelper(e => {
                  const pageValue = parseInt(e.target.value, 10);
                  const selectedPage =
                    pageValue > lastPage
                      ? lastPage
                      : pageValue < 1 || isNaN(pageValue) ? 1 : pageValue;
                  this.setState({
                    selectedPage
                  });
                  setPage(selectedPage);
                })}
                className="pt-input"
              />
              of {lastPage}
            </div>
          ) : (
            "No Rows"
          )}
        </div>
        <div className="pt-button-group">
          <Button
            style={{ marginLeft: 10 }}
            disabled={!forwardEnabled}
            iconName="arrow-right"
            className="paging-arrow-right"
            onClick={() => {
              setPage(parseInt(page, 10) + 1);
            }}
          />
          <Button
            disabled={!forwardEnabled}
            iconName="double-chevron-right"
            onClick={() => {
              setPage(lastPage);
            }}
          />
        </div>
      </div>
    );
  }
}<commit_msg>updating paging tool style<commit_after>//@flow
import React from "react";
import type { Paging } from "../flow_types";
import { Button } from "@blueprintjs/core";
import { pageSizes } from "./utils/queryParams";
import { onEnterOrBlurHelper } from "../utils/handlerHelpers";

export default class PagingTool extends React.Component {
  props: {
    paging: Paging,
    setPageSize: Function,
    onRefresh?: Function,
    setPage: Function
  };

  state = {
    selectedPage: 1
  };

  componentWillReceiveProps(nextProps) {
    const { paging: { page } } = nextProps;
    this.setState({
      selectedPage: page
    });
  }

  render() {
    const { selectedPage } = this.state;
    const {
      paging: { pageSize, page, total },
      setPageSize,
      setPage,
      onRefresh
    } = this.props;
    const pageStart = (page - 1) * pageSize + 1;
    if (pageStart < 0) throw new Error("We should never have page be <0");
    // const pageEnd =
    //   (page - 1) * pageSize + pageSize < total
    //     ? (page - 1) * pageSize + pageSize
    //     : total;
    const backEnabled = page - 1 > 0;
    const forwardEnabled = page * pageSize < total;
    const lastPage = Math.ceil(total / pageSize);

    return (
      <div className={"paging-toolbar-container"}>
        {onRefresh && (
          <Button
            className={"pt-minimal"}
            iconName="refresh"
            onClick={() => onRefresh()}
          />
        )}
        <div className="pt-select pt-minimal">
          <select
            style={{ width: 55 }}
            onChange={e => {
              setPageSize(parseInt(e.target.value, 10));
            }}
            value={pageSize}
          >
            {[
              <option key="page-size-placeholder" disabled value={"fake"}>
                Set Page Size
              </option>,
              ...pageSizes.map(size => {
                return (
                  <option key={size} value={size}>
                    {size}
                  </option>
                );
              })
            ]}
          </select>
        </div>
        <div style={{}} className="pt-button-group">
          <Button
            style={{}}
            onClick={() => {
              setPage(parseInt(page, 10) - 1);
            }}
            disabled={!backEnabled}
            className="paging-arrow-left"
            iconName="chevron-left"
          />
        </div>
        <div>
          {total ? (
            <div>
              <input
                style={{ width: 35, marginLeft: 8, marginRight: 8 }}
                value={selectedPage}
                onChange={e => {
                  this.setState({
                    selectedPage: e.target.value
                  });
                }}
                {...onEnterOrBlurHelper(e => {
                  const pageValue = parseInt(e.target.value, 10);
                  const selectedPage =
                    pageValue > lastPage
                      ? lastPage
                      : pageValue < 1 || isNaN(pageValue) ? 1 : pageValue;
                  this.setState({
                    selectedPage
                  });
                  setPage(selectedPage);
                })}
                className="pt-input"
              />
              of {lastPage}
            </div>
          ) : (
            "No Rows"
          )}
        </div>
        <div className="pt-button-group">
          <Button
            style={{ marginLeft: 10 }}
            disabled={!forwardEnabled}
            iconName="chevron-right"
            className="paging-arrow-right"
            onClick={() => {
              setPage(parseInt(page, 10) + 1);
            }}
          />
        </div>
      </div>
    );
  }
}
{'fraction_non_alphanumeric': 0.1281732205077153, 'fraction_numerical': 0.008835241413638626, 'mean_word_length': 1.2677765237020315, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 71, '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': '2983951', 'n_tokens_mistral': 2221, 'n_tokens_neox': 2130, 'n_words': 455}