<commit_before>import $ from 'jquery';
import React, { PropTypes } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
import SliceCell from './SliceCell';

require('../../../node_modules/react-grid-layout/css/styles.css');
require('../../../node_modules/react-resizable/css/styles.css');

const propTypes = {
  dashboard: PropTypes.object.isRequired,
  slices: PropTypes.arrayOf(PropTypes.object).isRequired,
  posDict: PropTypes.object.isRequired,
  isResizable:PropTypes.bool.isRequired,
};

class GridLayout extends React.Component {
  componentWillMount() {
    const layout = [];

    this.props.slices.forEach((slice, index) => {
      let pos = this.props.posDict[slice.slice_id];
      if (!pos) {
        pos = {
          col: (index * 4 + 1) % 12,
          row: Math.floor((index) / 3) * 4,
          size_x: 4,
          size_y: 4,
        };
      }

      layout.push({
        i: String(slice.slice_id),
        x: pos.col - 1,
        y: pos.row,
        w: pos.size_x,
        minW: 1,
        h: pos.size_y,
      });
    });

    this.setState({
      layout,
      slices: this.props.slices,
    });
  }

  onResizeStop(layout, oldItem, newItem) {
    const newSlice = this.props.dashboard.getSlice(newItem.i);
    if (oldItem.w !== newItem.w || oldItem.h !== newItem.h) {
      this.setState({ layout }, () => { newSlice.resize(); });
    }
  }

  onDragStop(layout) {
    this.setState({ layout });
  }

  removeSlice(sliceId) {
    $('[data-toggle=tooltip]').tooltip('hide');
    this.setState({
      layout: this.state.layout.filter(function (reactPos) {
        return reactPos.i !== String(sliceId);
      }),
      slices: this.state.slices.filter(function (slice) {
        return slice.slice_id !== sliceId;
      }),
    });
  }

  serialize() {
    return this.state.layout.map(function (reactPos) {
      return {
        slice_id: reactPos.i,
        col: reactPos.x + 1,
        row: reactPos.y,
        size_x: reactPos.w,
        size_y: reactPos.h,
      };
    });
  }

  render() {
    return (
      <ResponsiveReactGridLayout
        className="layout"
        layouts={{ lg: this.state.layout }}
        onResizeStop={this.onResizeStop.bind(this)}
        onDragStop={this.onDragStop.bind(this)}
        cols={{ lg: 48, md: 24, sm: 10, xs: 8, xxs: 6 }}
        rowHeight={5}
        autoSize
        margin={[0, 0]}
        useCSSTransforms
        draggableHandle=".drag"<commit_msg>all size screen set to 48<commit_after>import $ from 'jquery';
import React, { PropTypes } from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
import SliceCell from './SliceCell';

require('../../../node_modules/react-grid-layout/css/styles.css');
require('../../../node_modules/react-resizable/css/styles.css');

const propTypes = {
  dashboard: PropTypes.object.isRequired,
  slices: PropTypes.arrayOf(PropTypes.object).isRequired,
  posDict: PropTypes.object.isRequired,
  isResizable:PropTypes.bool.isRequired,
};

class GridLayout extends React.Component {
  componentWillMount() {
    const layout = [];

    this.props.slices.forEach((slice, index) => {
      let pos = this.props.posDict[slice.slice_id];
      if (!pos) {
        pos = {
          col: (index * 4 + 1) % 12,
          row: Math.floor((index) / 3) * 4,
          size_x: 4,
          size_y: 4,
        };
      }

      layout.push({
        i: String(slice.slice_id),
        x: pos.col - 1,
        y: pos.row,
        w: pos.size_x,
        minW: 1,
        h: pos.size_y,
      });
    });

    this.setState({
      layout,
      slices: this.props.slices,
    });
  }

  onResizeStop(layout, oldItem, newItem) {
    const newSlice = this.props.dashboard.getSlice(newItem.i);
    if (oldItem.w !== newItem.w || oldItem.h !== newItem.h) {
      this.setState({ layout }, () => { newSlice.resize(); });
    }
  }

  onDragStop(layout) {
    this.setState({ layout });
  }

  removeSlice(sliceId) {
    $('[data-toggle=tooltip]').tooltip('hide');
    this.setState({
      layout: this.state.layout.filter(function (reactPos) {
        return reactPos.i !== String(sliceId);
      }),
      slices: this.state.slices.filter(function (slice) {
        return slice.slice_id !== sliceId;
      }),
    });
  }

  serialize() {
    return this.state.layout.map(function (reactPos) {
      return {
        slice_id: reactPos.i,
        col: reactPos.x + 1,
        row: reactPos.y,
        size_x: reactPos.w,
        size_y: reactPos.h,
      };
    });
  }

  render() {
    return (
      <ResponsiveReactGridLayout
        className="layout"
        layouts={{ lg: this.state.layout }}
        onResizeStop={this.onResizeStop.bind(this)}
        onDragStop={this.onDragStop.bind(this)}
        cols={{ lg: 48, md: 48, sm: 48, xs: 48, xxs: 48 }}
        // cols={{ lg: 48, md: 24, sm: 10, xs: 8, xxs: 6 }}
        rowHeight={5}
        autoSize
        margin={[0, 0]}
        useCSSTransforms
        draggableHandle=".drag"
{'fraction_non_alphanumeric': 0.15752351097178682, 'fraction_numerical': 0.0109717868338558, 'mean_word_length': 2.356344510190664, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1086748', 'n_tokens_mistral': 1769, 'n_tokens_neox': 1720, 'n_words': 317}