<commit_before>import * as React from "react";
import { connect } from "./connect";
import { createSelector, createStructuredSelector } from "reselect";

import { ICollection } from "../db/models/collection";
import CollectionRow from "./collection-row";

import { IAppState, ITabData, IGameSet } from "../types";

import { AutoSizer } from "react-virtualized";

import { values } from "underscore";

import styled from "./styles";
import StyledGrid from "./styled-grid";
import { InjectedIntl, injectIntl } from "react-intl";

interface ICellInfo {
  columnIndex: number;
  key: string;
  rowIndex: number;
  style: React.CSSProperties;
}

const tab = "collections";

const HubCollectionsGrid = styled.div`flex-grow: 1;`;

export class CollectionsGrid extends React.PureComponent<
  IProps & IDerivedProps,
  IState
> {
  constructor() {
    super();
    this.state = {
      scrollTop: 0,
    };
  }

  render() {
    const { intl, hiddenCount } = this.props;

    return (
      <HubCollectionsGrid>
        <AutoSizer>
          {size => this.renderWithSize(size)}
        </AutoSizer>
        {hiddenCount > 0
          ? <div className="hidden-count">
              {intl.formatMessage(
                { id: "grid.hidden_count" },
                { count: hiddenCount },
              )}
            </div>
          : ""}
      </HubCollectionsGrid>
    );
  }

  renderWithSize = ({ width, height }) => {
    const { collections } = this.props;
    const columnCount = 1;
    const rowCount = Math.ceil(collections.length / columnCount);
    const columnWidth = (width - 10) / columnCount;
    const rowHeight = 260;
    const scrollTop = height === 0 ? 0 : this.state.scrollTop;

    return (
      <StyledGrid
        ref="grid"
        cellRenderer={this.cellRenderer}
        width={width}
        height={height}
        columnWidth={columnWidth}
        columnCount={columnCount}
        rowCount={rowCount}
        rowHeight={rowHeight}
        overscanRowCount={2}
        onScroll={(e: any) => {
          // ignore when tab's hidden
          if (e.clientHeight === 0) {
            return;
          }
          this.setState({ scrollTop: e.scrollTop });
        }}
        scrollTop={scrollTop}
        scrollPositionChangeReason="requested"
      />
    );
  };

  cellRenderer = (cell: ICellInfo): JSX.Element => {<commit_msg>horizontal scrollbar in collections grid, closes #1348<commit_after>import * as React from "react";
import { connect } from "./connect";
import { createSelector, createStructuredSelector } from "reselect";

import { ICollection } from "../db/models/collection";
import CollectionRow from "./collection-row";

import { IAppState, ITabData, IGameSet } from "../types";

import { AutoSizer } from "react-virtualized";

import { values } from "underscore";

import styled from "./styles";
import StyledGrid from "./styled-grid";
import { InjectedIntl, injectIntl } from "react-intl";

interface ICellInfo {
  columnIndex: number;
  key: string;
  rowIndex: number;
  style: React.CSSProperties;
}

const tab = "collections";

const HubCollectionsGrid = styled.div`flex-grow: 1;`;

export class CollectionsGrid extends React.PureComponent<
  IProps & IDerivedProps,
  IState
> {
  constructor() {
    super();
    this.state = {
      scrollTop: 0,
    };
  }

  render() {
    const { intl, hiddenCount } = this.props;

    return (
      <HubCollectionsGrid>
        <AutoSizer>
          {size => this.renderWithSize(size)}
        </AutoSizer>
        {hiddenCount > 0
          ? <div className="hidden-count">
              {intl.formatMessage(
                { id: "grid.hidden_count" },
                { count: hiddenCount },
              )}
            </div>
          : ""}
      </HubCollectionsGrid>
    );
  }

  renderWithSize = ({ width, height }) => {
    const { collections } = this.props;
    const columnCount = 1;
    const rowCount = Math.ceil(collections.length / columnCount);
    const columnWidth = (width - 16) / columnCount;
    const rowHeight = 260;
    const scrollTop = height === 0 ? 0 : this.state.scrollTop;

    return (
      <StyledGrid
        ref="grid"
        cellRenderer={this.cellRenderer}
        width={width}
        height={height}
        columnWidth={columnWidth}
        columnCount={columnCount}
        rowCount={rowCount}
        rowHeight={rowHeight}
        overscanRowCount={2}
        onScroll={(e: any) => {
          // ignore when tab's hidden
          if (e.clientHeight === 0) {
            return;
          }
          this.setState({ scrollTop: e.scrollTop });
        }}
        scrollTop={scrollTop}
        scrollPositionChangeReason="requested"
      />
    );
  };

  cellRenderer = (cell: ICellInfo): JSX.Element => {
{'fraction_non_alphanumeric': 0.12745304916649083, 'fraction_numerical': 0.006330449461911795, 'mean_word_length': 2.4076204169662114, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 29, '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': '5306968', 'n_tokens_mistral': 1424, 'n_tokens_neox': 1372, 'n_words': 322}