<commit_before>import React, { Component } from 'react';
import './App.css';
import '../node_modules/react-vis/dist/style.css';

import {XYPlot, LineSeries, MarkSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis} from 'react-vis';
import {csv} from 'd3-request'
import * as axios from 'axios'

import 'bootstrap/dist/css/bootstrap.min.css';

const classPalate = [
      "#e41a1c",
      "#377eb8",
      "#4daf4a",
      "#984ea3",
      "#ff7f00",
      "#ffff33",
      "#a65628",
      "#f781bf",
      "#999999",
];

class CheckBox extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onCheckChange(e);
  }

  render() {
    return (
      <div>
      <input id={this.props.id} type="checkbox" checked={this.props.checked} onChange={this.handleChange}/>
      <label htmlFor={this.props.id}>{this.props.label}</label>
      </div>
    );
  }
}

class ChoiceList extends Component {
  constructor(props) {
    super(props);
    this.handleSelectionChange = this.handleSelectionChange.bind(this);
  }

  handleSelectionChange(e) {
    this.props.onQueryChange(e);
  }

  render() {
    return (
      <div className="ChoiceList">
        {Object.keys(this.props.data).map( (d) =>
          <CheckBox
            id={d}
            label={'Category '+d}
            key={d}
            checked={this.props.data[d]}
            onCheckChange={this.handleSelectionChange} />
        )}
      </div>
    );
  }
}

class MeshPlot extends Component {

  render() {
    const defaultStyle = {
      display: 'inline-block',
    };

    return (
      <div className="MeshPlot" style={defaultStyle}>
        <XYPlot height={this.props.height} width={this.props.width} xDomain={this.props.xDomain} yDomain={this.props.yDomain}>
          {Object.keys(this.props.data).map(
            (k) => <MarkSeries key={k} data={this.props.data[k]} color={classPalate[k]}/>
          )}
        </XYPlot>
      </div>
    );
  }
}

class PersistanceDiagram extends Component {
  render() {
    // find the largest value so we can draw a proper diagonal line
    let maxValue = -1; // the value of a node in PD will never be negative
    for(let k of Object.keys(this.props.data)) {
      for(let d of this.props.data[k]) {
        if(d.x > maxValue) maxValue = d.x;
        if(d.y > maxValue) maxValue = d.y;
      }
    }
    if(maxValue === -1) maxValue = 1;
    maxValue = 1.2*maxValue; // add some padding

    const defaultStyle = {
      display: 'inline-block',
    };

    return (
      <div className="PersistanceDiagram" style={defaultStyle}>
        <XYPlot height={this.props.height} width={this.props.width}>
          <VerticalGridLines />
          <HorizontalGridLines />
          <XAxis />
          <YAxis />
          <LineSeries data={[{x:0, y:0}, {x:maxValue, y:maxValue}]} />
          {Object.keys(this.props.data).map( (k) =>
            <MarkSeries data={this.props.data[k]} key={k} />
          )}
        </XYPlot>
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.handleQueryChange = this.handleQueryChange.bind(this);
    this.queryPersistenceDiagram = this.queryPersistenceDiagram.bind(this);

    this.state = {
      mesh: [],
      mesh_domain: {},
      pd: [],
      query: {}
    };<commit_msg>change color<commit_after>import React, { Component } from 'react';
import './App.css';
import '../node_modules/react-vis/dist/style.css';

import {XYPlot, LineSeries, MarkSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis} from 'react-vis';
import {csv} from 'd3-request'
import * as axios from 'axios'

import 'bootstrap/dist/css/bootstrap.min.css';

const classPalate = [
      "#e41a1c",
      "#377eb8",
      "#4daf4a",
      "#984ea3",
      "#ff7f00",
      "#ffff33",
      "#a65628",
      "#f781bf",
      "#999999",
];

class CheckBox extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onCheckChange(e);
  }

  render() {
    return (
      <div>
      <input id={this.props.id} type="checkbox" checked={this.props.checked} onChange={this.handleChange}/>
      <label htmlFor={this.props.id}>{this.props.label}</label>
      </div>
    );
  }
}

class ChoiceList extends Component {
  constructor(props) {
    super(props);
    this.handleSelectionChange = this.handleSelectionChange.bind(this);
  }

  handleSelectionChange(e) {
    this.props.onQueryChange(e);
  }

  render() {
    return (
      <div className="ChoiceList">
        {Object.keys(this.props.data).map( (d) =>
          <CheckBox
            id={d}
            label={'Category '+d}
            key={d}
            checked={this.props.data[d]}
            onCheckChange={this.handleSelectionChange} />
        )}
      </div>
    );
  }
}

class MeshPlot extends Component {

  render() {
    const defaultStyle = {
      display: 'inline-block',
    };

    return (
      <div className="MeshPlot" style={defaultStyle}>
        <XYPlot height={this.props.height} width={this.props.width} xDomain={this.props.xDomain} yDomain={this.props.yDomain}>
          {Object.keys(this.props.data).map(
            (k) => <MarkSeries key={k} data={this.props.data[k]} color={classPalate[k]}/>
          )}
        </XYPlot>
      </div>
    );
  }
}

class PersistanceDiagram extends Component {
  render() {
    // find the largest value so we can draw a proper diagonal line
    let maxValue = -1; // the value of a node in PD will never be negative
    for(let k of Object.keys(this.props.data)) {
      for(let d of this.props.data[k]) {
        if(d.x > maxValue) maxValue = d.x;
        if(d.y > maxValue) maxValue = d.y;
      }
    }
    if(maxValue === -1) maxValue = 1;
    maxValue = 1.2*maxValue; // add some padding

    const defaultStyle = {
      display: 'inline-block',
    };

    return (
      <div className="PersistanceDiagram" style={defaultStyle}>
        <XYPlot height={this.props.height} width={this.props.width}>
          <VerticalGridLines />
          <HorizontalGridLines />
          <XAxis />
          <YAxis />
          <LineSeries data={[{x:0, y:0}, {x:maxValue, y:maxValue}]} color='#636363' />
          {Object.keys(this.props.data).map( (k) =>
            <MarkSeries data={this.props.data[k]} key={k} />
          )}
        </XYPlot>
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.handleQueryChange = this.handleQueryChange.bind(this);
    this.queryPersistenceDiagram = this.queryPersistenceDiagram.bind(this);

    this.state = {
      mesh: [],
      mesh_domain: {},
      pd: [],
      query: {}
    };
{'fraction_non_alphanumeric': 0.1557292434744138, 'fraction_numerical': 0.012682495207196578, 'mean_word_length': 2.4478901881037114, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 59, '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': '6778345', 'n_tokens_mistral': 2274, 'n_tokens_neox': 2211, 'n_words': 422}