<commit_before>import React, {Component, PropTypes} from 'react'
import Edge from './edge';
import _ from 'lodash'

let upto = (n) => Array.apply(null, {length: n}).map(Number.call, Number)
const PADDING_WIDTH = 5

export default class Edges extends Component {
  displayName: 'Edges'

  static propTypes = {
    columnWidth: PropTypes.number,
    containerHeight: PropTypes.number,
    edges: PropTypes.array.isRequired,
    rowHeights: PropTypes.array.isRequired,
  }

  _pointCoords({row, column}) {
    return {y: this._rowY(row), x: this._columnX(column)}
  }

  _rowY(row) {
    if ((row !== undefined) && this.props.rowHeights){
      let rowHeights = [0, ...this.props.rowHeights]
      let top = upto(row+1).map(r => rowHeights[r]).reduce((a,b) => a + b)
      let bottom = top + this.props.rowHeights[row]
      top += PADDING_WIDTH
      bottom -= PADDING_WIDTH
      return {top, bottom}
    }
  }

  _columnX(column) {
    const {columnWidth} = this.props
    let left = column * columnWidth
    let right = left + columnWidth
    left += PADDING_WIDTH
    right -= PADDING_WIDTH
    return {left, right}
  }

  _toRectangle({row, column}) {
    return Object.assign(this._rowY(row), this._columnX(column))
  }

  render() {
    const {columnWidth, containerHeight, rowHeights} = this.props
    let {edges} = (this.props)
    edges = _.uniqBy(edges, e => JSON.stringify(e))
    let showEdges = !!(_.get(edges, 'length') && _.get(rowHeights, 'length') && columnWidth)
    return (
      <div className='FlowGrid--Arrows'>
      {(edges.length > 0) &&
        <svg
            className='edge'
            height={containerHeight}
            width={'100%'}
        >
          <defs>
            <marker id="MarkerArrowBLUE" markerWidth="3" markerHeight="3" refX="2" refY="1.5" orient="auto">
              <path d="M 0,0 V 3 L3,1.5 Z" className="arrow BLUE"/>
             </marker>
            <marker id="MarkerArrowRED" markerWidth="3" markerHeight="3" refX="2" refY="1.5" orient="auto">
              <path d="M 0,0 V 3 L3,1.5 Z" className="arrow RED"/>
             </marker>
          </defs>
          {showEdges &&
            edges.map(e => {
              const input = this._toRectangle(e.input)
              const output = this._toRectangle(e.output)<commit_msg>Sort edges to have red ones on top<commit_after>import React, {Component, PropTypes} from 'react'
import Edge from './edge';
import _ from 'lodash'

let upto = (n) => Array.apply(null, {length: n}).map(Number.call, Number)
const PADDING_WIDTH = 5

export default class Edges extends Component {
  displayName: 'Edges'

  static propTypes = {
    columnWidth: PropTypes.number,
    containerHeight: PropTypes.number,
    edges: PropTypes.array.isRequired,
    rowHeights: PropTypes.array.isRequired,
  }

  _pointCoords({row, column}) {
    return {y: this._rowY(row), x: this._columnX(column)}
  }

  _rowY(row) {
    if ((row !== undefined) && this.props.rowHeights){
      let rowHeights = [0, ...this.props.rowHeights]
      let top = upto(row+1).map(r => rowHeights[r]).reduce((a,b) => a + b)
      let bottom = top + this.props.rowHeights[row]
      top += PADDING_WIDTH
      bottom -= PADDING_WIDTH
      return {top, bottom}
    }
  }

  _columnX(column) {
    const {columnWidth} = this.props
    let left = column * columnWidth
    let right = left + columnWidth
    left += PADDING_WIDTH
    right -= PADDING_WIDTH
    return {left, right}
  }

  _toRectangle({row, column}) {
    return Object.assign(this._rowY(row), this._columnX(column))
  }

  render() {
    const {columnWidth, containerHeight, rowHeights} = this.props
    let {edges} = (this.props)
    edges = _.uniqBy(edges, e => JSON.stringify(e))
    let showEdges = !!(_.get(edges, 'length') && _.get(rowHeights, 'length') && columnWidth)
    return (
      <div className='FlowGrid--Arrows'>
      {(edges.length > 0) &&
        <svg
            className='edge'
            height={containerHeight}
            width={'100%'}
        >
          <defs>
            <marker id="MarkerArrowBLUE" markerWidth="3" markerHeight="3" refX="2" refY="1.5" orient="auto">
              <path d="M 0,0 V 3 L3,1.5 Z" className="arrow BLUE"/>
             </marker>
            <marker id="MarkerArrowRED" markerWidth="3" markerHeight="3" refX="2" refY="1.5" orient="auto">
              <path d="M 0,0 V 3 L3,1.5 Z" className="arrow RED"/>
             </marker>
          </defs>
          {showEdges &&
            _.sortBy(edges, e => {return e.color === 'RED' ? 1 : 0}).map(e => {
              const input = this._toRectangle(e.input)
              const output = this._toRectangle(e.output)
{'fraction_non_alphanumeric': 0.14888123924268504, 'fraction_numerical': 0.012908777969018933, 'mean_word_length': 2.626365054602184, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 36, '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': '5698570', 'n_tokens_mistral': 1548, 'n_tokens_neox': 1526, 'n_words': 354}