<commit_before>import React, { PropTypes} from 'react';
import { Button, Glyphicon } from 'react-bootstrap';

export default class SpeakButtons extends React.Component {
  render() {
    const centerButtonMargin = 60;
    const buttonSize = 30;
    const d = buttonSize / 2.0;

    let styles = {
      speakButton: {
        position: 'absolute',
        left: this.props.center.x - d + 'px',
        top: this.props.center.y -d + 'px',
      },
      imageTextSwitchButton: {
        position: 'absolute',
        left: this.props.center.x - d + 'px',
        top: this.props.center.y - d - centerButtonMargin + 'px',
      },
      changeResolutionButton: {
        position: 'absolute',
        left: this.props.center.x - d - centerButtonMargin + 'px',
        top: this.props.center.y - d - centerButtonMargin + 'px',
      },
      toggleResolutionButton: {
        position: 'absolute',
        left: this.props.center.x - d + centerButtonMargin + 'px',
        top: this.props.center.y - d - centerButtonMargin + 'px',
      },
      navArrowButton: [
        {
          position: 'absolute',
          left: this.props.center.x - d - centerButtonMargin + 'px',
          top: this.props.center.y - d + 'px',
        },
        {
          position: 'absolute',
          left: this.props.center.x - d + centerButtonMargin + 'px',
          top: this.props.center.y - d + 'px',
        },
        {
          position: 'absolute',
          left: this.props.center.x - d + 'px',
          top: this.props.center.y - d + centerButtonMargin + 'px',
        },
      ],

      partialSpeakButtons: []
    };

    const diff = [[1, -1], [1, 1], [-1, 1], [-1, -1]];

    for (let i = 0; i < 4; i++) {
      const left = this.props.center.x + this.props.r * diff[i][0] - d;
      const top  = this.props.center.y + this.props.r * diff[i][1] - d;
      styles.partialSpeakButtons[i] = {
        position: 'absolute',
        left: left + 'px',
        top:  top + 'px',
      }
    }

    let buttonDown;
    let buttonLeft;
    let buttonRight;
    const roomType = this.props.floorStatus.roomType();
    const goNextRoom = (direction) => {
      this.props.goNextRoom(this.props.floorStatus, direction, false);
    };

    const goFloorIndex = () => {
      window.location.href = '/floors/';
    }

    if (roomType == 'circle') {
      buttonLeft = (
        <Button
        onClick={() => goNextRoom('left')}
            style={styles.navArrowButton[0]}
            className="btn-circle"
          ><Glyphicon glyph="triangle-left" /></Button>
      );
      buttonRight = (
        <Button
            onClick={() => goNextRoom('right')}
            style={styles.navArrowButton[1]}
            className="btn-circle"
          ><Glyphicon glyph="triangle-right" /></Button>
      );
      buttonDown = (
        <Button
          onClick={() => goNextRoom('back')}
            style={styles.navArrowButton[2]}
            className="btn-circle"
          ><Glyphicon glyph="triangle-bottom" /></Button>
      );
    } else {
      buttonLeft = (
        <Button
            onClick={() => goNextRoom('up')}
            style={styles.navArrowButton[0]}
            className="btn-circle"
          ><Glyphicon glyph="triangle-top" /></Button>
      );
      buttonRight = (
        <Button
            onClick={() => goNextRoom('down')}
            style={styles.navArrowButton[1]}
            className="btn-circle"
          ><Glyphicon glyph="triangle-bottom" /></Button>
      );
      buttonDown = (
        <Button
            onClick={() => goFloorIndex()}
            style={styles.navArrowButton[2]}
            className="btn-circle"
          ><Glyphicon glyph="triangle-bottom" /></Button>
      );
    }

    return (
      <div className="speak-buttons">
        <Button
            onClick={() => this.props.onClickSpeakButton(this.props.floorStatus, -1)}
            style={styles.speakButton}
            className="btn-circle"
          ><Glyphicon glyph="volume-up" /></Button>
        <Button
            onClick={() => this.props.onClickImageButton()}
            style={styles.toggleResolutionButton}
            className="btn-circle"
          ><Glyphicon glyph="font" /></Button>
        <Button
            onClick={() => this.props.onClickToggleResolutionButton()}
            style={styles.imageTextSwitchButton}
            className="btn-circle"
          ><Glyphicon glyph="picture" /></Button>
        <Button
            onClick={() => this.props.onClickChangeResolutionButton()}
            style={styles.changeResolutionButton}
            className="btn-circle"
          ><Glyphicon glyph="tint" /></Button>

        {buttonLeft}
        {buttonRight}
        {buttonDown}

        <Button
            onClick={() => this.props.onClickSpeakButton(this.props.floorStatus, 0)}
            style={styles.partialSpeakButtons[0]}
            className="btn-circle"
          ><Glyphicon glyph="volume-up" /></Button>
        <Button
            onClick={() => this.props.onClickSpeakButton(this.props.floorStatus, 1)}
            style={styles.partialSpeakButtons[1]}
            className="btn-circle"
          ><Glyphicon glyph="volume-up" /></Button>
        <Button
            onClick={() => this.props.onClickSpeakButton(this.props.floorStatus, 2)}
            style={styles.partialSpeakButtons[2]}
            className="btn-circle"
          ><Glyphicon glyph="volume-up" /></Button>
        <Button
            onClick={() => this.props.onClickSpeakButton(this.props.floorStatus, 3)}
            style={styles.partialSpeakButtons[3]}
            className="btn-circle"
        ><Glyphicon glyph="volume-up" /></Button>
      </div>
    );
    // <div style={{background:'red', width:'1px', height:'1px',position:'absolute', top:this.props.center.y, left:this.props.center.x}}><img src="" width="1" height="1"/></div>
  }
}<commit_msg>Switch buttons for "Twitter (multiple)" service<commit_after>import React, { PropTypes} from 'react';
import { Button, Glyphicon } from 'react-bootstrap';

export default class SpeakButtons extends React.Component {
  render() {
    const centerButtonMargin = 60;
    const buttonSize = 30;
    const d = buttonSize / 2.0;

    const x = this.props.center.x - d;
    const y = this.props.center.y - d;
    const diff = [
      [-1, -1], [0,  -1], [1,  -1],
      [-1,  0], [0,   0], [1,   0],
      [-1,  1], [0,   1], [1,   1],
    ];
    let positions = [];
    for (let i = 0; i < 9; i++) {
      positions[i] = {
        position: 'absolute',
        left: x + (centerButtonMargin * diff[i][0]) + 'px',
        top:  y + (centerButtonMargin * diff[i][1]) + 'px',
      };
    }

    const diff2 = [[1, -1], [1, 1], [-1, 1], [-1, -1]];
    let aroundPos = [];
    for (let i = 0; i < 4; i++) {
      const left = this.props.center.x + this.props.r * diff2[i][0] - d;
      const top  = this.props.center.y + this.props.r * diff2[i][1] - d;
      aroundPos[i] = {
        position: 'absolute',
        left: left + 'px',
        top:  top + 'px',
      };
    }

    const roomType = this.props.floorStatus.roomType();
    const goNextRoom = (direction) => {
      this.props.goNextRoom(this.props.floorStatus, direction, false);
    };

    const goFloorIndex = () => {
      window.location.href = '/floors/';
    }

    let buttons = [];
    if (roomType == 'circle' &&
        this.props.floorStatus.behaviorName == 'services' &&
        this.props.floorStatus.behaviorServiceName == 'Twitter (multiple)') {
      buttons.push(this.circleButton(positions[0], 'check',     () => this.props.onClickImageButton()));
      buttons.push(this.circleButton(positions[1], 'share-alt', () => this.props.onClickToggleResolutionButton()));
    } else {
      buttons.push(this.circleButton(positions[0], 'tint',    () => this.props.onClickChangeResolutionButton()));
      buttons.push(this.circleButton(positions[1], 'picture', () => this.props.onClickToggleResolutionButton()));
    }
    buttons.push(this.circleButton(positions[2], 'font', () => this.props.onClickImageButton()));

    if (roomType == 'circle') {
      buttons.push(this.circleButton(positions[3], 'triangle-left',   () => goNextRoom('left')));
      buttons.push(this.circleButton(positions[5], 'triangle-right',  () => goNextRoom('right')));
      buttons.push(this.circleButton(positions[7], 'triangle-bottom', () => goNextRoom('back')));
    } else {
      buttons.push(this.circleButton(positions[3], 'triangle-top',    () => goNextRoom('up')));
      buttons.push(this.circleButton(positions[5], 'triangle-bottom', () => goNextRoom('down')));
      buttons.push(this.circleButton(positions[7], 'triangle-bottom', () => goFloorIndex()));
    }

    buttons.push(this.circleButton(positions[4], 'volume-up', () => this.props.onClickSpeakButton(this.props.floorStatus, -1)));
    for (let i = 0; i < 4; i++) {
      const fn = () => this.props.onClickSpeakButton(this.props.floorStatus, i);
      buttons.push(this.circleButton(aroundPos[i], 'volume-up', fn));
    }

    return (
      <div className="speak-buttons">
        {buttons}
      </div>
    );
    // <div style={{background:'red', width:'1px', height:'1px',position:'absolute', top:this.props.center.y, left:this.props.center.x}}><img src="" width="1" height="1"/></div>
  }

  circleButton(style, glyph, onClick) {
    return (
        <Button
            onClick={onClick}
            style={style}
            className="btn-circle"
          ><Glyphicon glyph={glyph} /></Button>
    );
  }
}
{'fraction_non_alphanumeric': 0.17036258539148713, 'fraction_numerical': 0.010404624277456647, 'mean_word_length': 2.289319045973038, 'pattern_counts': {'":': 0, '<': 62, '<?xml version=': 0, '>': 89, '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': '6516953', 'n_tokens_mistral': 2988, 'n_tokens_neox': 2927, 'n_words': 539}