<commit_before>import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import TabNote from './TabNote';
import Rest from '../svg/rest';

export default class TabStaff extends Component {
  renderBars = (x, measureLength) => {
    return (
      <g>
        <rect x={x} y='10' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='23' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='36' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='49' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='62' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='75' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>

        <rect x={x} y='10' width='0.5' height='65' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x + measureLength} y='10' width='0.5' height='65' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
      </g>
    );
  }

  renderMeasure = (measureIndex, measureLength, measure, x) => {
    return (
      <g>
        { this.renderBars(x, measureLength) }
        {
          measure.notes.map((note, j) => this.renderNote(note, measureIndex, j, measureLength, x))
        }
      </g>
    );
  }

  renderNote = (note, measureNumber, index, measureLength, xOfMeasure) => {
    let x = xOfMeasure + (index * 55 + 40);
    let { currentNote, isPlaying } = this.props;

    let color = 'black';
    if(currentNote.measure === measureNumber && currentNote.noteIndex === index && isPlaying) {
      color = '#f9423a';
    }

    if(note.string[0] === 'rest') {
      return <Rest key={index} color={color} x={x} y={0} />;
    }

    return note.string.map((bleh, j) => {
      let y = 80 - (13 * note.string[j]);

      return <TabNote key={j} x={x} y={y} color={color} fret={note.fret[j]} />;
    });
  }

  calcRows = (song) => {
    let measuresPerRow = Math.floor(window.innerWidth / 250);

    return Math.ceil(song.length / measuresPerRow);
  }

  convertSongIntoRows = (song) => {
    const screenWidth = window.innerWidth;

    return song.reduce((rows, measure, index) => {
      let notes = measure.notes.length;

      let currentRow = rows[rows.length - 1];
      let currentRowWidth = currentRow.reduce((next, curr) => {
        return next + (60 * curr.notes.length);
      }, 0);

      let returnedRows = rows;
      if(currentRowWidth + (60 * measure.notes.length) > screenWidth - 20) {
        if(index !== song.length - 1) {
          returnedRows.push([measure]);
        }
      } else {
        let nextRow = currentRow.concat(measure);

        returnedRows[rows.length - 1] = nextRow;
      }

      return returnedRows;
    }, [[]]);
  }

  getXCoordOfMeasure = (row, index) => {
    if(index === 0) {
      return 0;
    }
    let precedingMeasures = row.slice(0, index);
    return precedingMeasures.reduce((next, curr) => {
      return next + (60 * curr.notes.length);
    }, 0);
  }

  getYCoordOfRow = (rowIndex) => {
    return 170 * rowIndex;
  }

  renderMeasureForRow = (row, measureIndex, rowIndex, y) => {
    let measure = row[measureIndex];
    let measureLength = 60 * measure.notes.length;
    let x = this.getXCoordOfMeasure(row, measureIndex);

    return (
      <svg key={measureIndex} x={0} y={y} style={{ height: 250, width: measureLength }}>
        { this.renderMeasure(rowIndex + measureIndex, measureLength, measure, x) }
      </svg>
    );
  }

  renderRow = (row, rowIndex) => {
    let y = this.getYCoordOfRow(rowIndex);

    return row.map((measure, measureIndex) => {
        return this.renderMeasureForRow(row, measureIndex, rowIndex, y);
    });
  }

  render() {
    let rows = this.convertSongIntoRows(this.props.song);

    return (
      <svg style={{ width: '100%', height: '100%' }}>
        { rows.map(this.renderRow) }
      </svg>
    );
  }
}<commit_msg>fix currentPlayingIndex<commit_after>import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import TabNote from './TabNote';
import Rest from '../svg/rest';

export default class TabStaff extends Component {
  renderBars = (x, measureLength) => {
    return (
      <g>
        <rect x={x} y='10' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='23' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='36' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='49' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='62' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x} y='75' width={measureLength} height='0.5' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>

        <rect x={x} y='10' width='0.5' height='65' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
        <rect x={x + measureLength} y='10' width='0.5' height='65' rx='0' ry='0' fill='#000000' stroke='#000000' strokeWidth='0.1' font='10pt Arial'></rect>
      </g>
    );
  }

  renderMeasure = (measureIndex, measureLength, measure, x) => {
    return (
      <g>
        { this.renderBars(x, measureLength) }
        {
          measure.notes.map((note, noteIndex) => this.renderNote(note, measureIndex, noteIndex, measureLength, x))
        }
      </g>
    );
  }

  renderNote = (note, measureIndex, index, measureLength, xOfMeasure) => {
    let x = xOfMeasure + (index * 55 + 40);
    let { currentNote, isPlaying } = this.props;

    let color = 'black';
    if(currentNote.measure === measureIndex && currentNote.noteIndex === index && isPlaying) {
      color = '#f9423a';
    }

    if(note.string[0] === 'rest') {
      return <Rest key={index} color={color} x={x} y={0} />;
    }

    return note.string.map((bleh, j) => {
      let y = 80 - (13 * note.string[j]);

      return <TabNote key={j} x={x} y={y} color={color} fret={note.fret[j]} />;
    });
  }

  convertSongIntoRows = (song) => {
    const screenWidth = window.innerWidth;

    return song.reduce((rows, measure, index) => {
      let notes = measure.notes.length;

      let currentRow = rows[rows.length - 1];
      let currentRowWidth = currentRow.reduce((next, curr) => {
        return next + (60 * curr.notes.length);
      }, 0);

      let returnedRows = rows;
      if(currentRowWidth + (60 * measure.notes.length) > screenWidth - 20) {
        if(index !== song.length - 1) {
          returnedRows.push([measure]);
        }
      } else {
        let nextRow = currentRow.concat(measure);

        returnedRows[rows.length - 1] = nextRow;
      }

      return returnedRows;
    }, [[]]);
  }

  getXCoordOfMeasure = (row, index) => {
    if(index === 0) {
      return 0;
    }
    let precedingMeasures = row.slice(0, index);
    return precedingMeasures.reduce((next, curr) => {
      return next + (60 * curr.notes.length);
    }, 0);
  }

  getYCoordOfRow = (rowIndex) => {
    return 170 * rowIndex;
  }

  getMeasureCountUpToRow = (rowIndex) => {
    let rows = this.convertSongIntoRows(this.props.song);

    return rows.reduce((next, curr, i) => {
      if(i < rowIndex) {
        return next + curr.length;
      } else {
        return next;
      }
    }, 0);
  }

  renderMeasureForRow = (row, measureIndex, rowIndex, y, totalMeasureIndex) => {
    let measure = row[measureIndex];
    let measureLength = 60 * measure.notes.length;
    let x = this.getXCoordOfMeasure(row, measureIndex);

    return (
      <svg key={measureIndex} x={0} y={y} style={{ height: 250, width: measureLength }}>
        { this.renderMeasure(totalMeasureIndex, measureLength, measure, x) }
      </svg>
    );
  }

  renderRow = (row, rowIndex) => {
    let y = this.getYCoordOfRow(rowIndex);
    let totalMeasureIndex = this.getMeasureCountUpToRow(rowIndex);

    return row.map((measure, measureIndex) => {
        return this.renderMeasureForRow(row, measureIndex, rowIndex, y, totalMeasureIndex + measureIndex);
    });
  }

  render() {
    let rows = this.convertSongIntoRows(this.props.song);

    return (
      <svg style={{ width: '100%', height: '100%' }}>
        { rows.map(this.renderRow) }
      </svg>
    );
  }
}
{'fraction_non_alphanumeric': 0.18325068870523417, 'fraction_numerical': 0.05002754820936639, 'mean_word_length': 3.0919747520288547, 'pattern_counts': {'":': 0, '<': 56, '<?xml version=': 0, '>': 88, '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': '2198120', 'n_tokens_mistral': 3393, 'n_tokens_neox': 3072, 'n_words': 675}