<commit_before>import React from 'react';
import PropTypes from 'prop-types';
// import Plot from 'react-plotly.js';
import createPlotlyComponent from 'react-plotly.js/factory';
import Plotly from './custom-plotly';

import * as caseUtils from '../../utils/cases';
import { COLORSCALE } from './colorscale';

const Plot = createPlotlyComponent(Plotly);

class ScatterPlotMatrix extends React.PureComponent {
  render() {
    const { cases, success, title } = this.props;
    const inputs = cases.i.concat(cases.c);
    const outputs = cases.c.concat(cases.o);
    let succ = success;
    if (succ.length === 0) {
      succ = new Array(cases.o[0].values.length);
      succ.fill(1);
    }

    const data = [];
    const layout = {};
    const nOut = outputs.length;
    const nDes = inputs.length;
    const pdh = 1.0 / nDes;
    const pdv = 1.0 / nOut;

    for (let i = 0; i < nOut; i += 1) {
      for (let j = 0; j < nDes; j += 1) {
        const xlabel = caseUtils.label(inputs[j]);
        const ylabel = caseUtils.label(outputs[i]);

        const trace = {
          x: inputs[j].values,
          y: outputs[i].values,
          type: 'scatter',
          mode: 'markers',
        };
        const n = nDes * i + j + 1;
        const xname = `x${n}`;
        const yname = `y${n}`;
        trace.xaxis = xname;
        trace.yaxis = yname;
        trace.name = `${ylabel} vs ${xlabel}`;
        trace.marker = {
          color: succ,
          cmin: 0,
          cmax: 1,
          colorscale: COLORSCALE,
        };
        data.push(trace);

        layout[`xaxis${n}`] = { domain: [(j + 0.1) * pdh, (j + 0.9) * pdh], anchor: yname };
        layout[`yaxis${n}`] = { domain: [(i + 0.1) * pdv, (i + 0.9) * pdv], anchor: xname };
        if (j === 0) {
          layout[`yaxis${n}`].title = ylabel;
        }
        if (i === 0) {
          layout[`xaxis${n}`].title = xlabel;
        }
      }
    }
    layout.width = nDes * 250 + 100;
    layout.height = nOut * 250 + 100;
    layout.title = title;

    return (<Plot data={data} layout={layout} />);
  }
}

ScatterPlotMatrix.propTypes = {
  cases: PropTypes.shape({
    i: PropTypes.array.isRequired,<commit_msg>Fix legend width<commit_after>import React from 'react';
import PropTypes from 'prop-types';
// import Plot from 'react-plotly.js';
import createPlotlyComponent from 'react-plotly.js/factory';
import Plotly from './custom-plotly';

import * as caseUtils from '../../utils/cases';
import { COLORSCALE } from './colorscale';

const Plot = createPlotlyComponent(Plotly);

class ScatterPlotMatrix extends React.PureComponent {
  render() {
    const { cases, success, title } = this.props;
    const inputs = cases.i.concat(cases.c);
    const outputs = cases.c.concat(cases.o);
    let succ = success;
    if (succ.length === 0) {
      succ = new Array(cases.o[0].values.length);
      succ.fill(1);
    }

    const data = [];
    const layout = {};
    const nOut = outputs.length;
    const nDes = inputs.length;
    const pdh = 1.0 / nDes;
    const pdv = 1.0 / nOut;

    for (let i = 0; i < nOut; i += 1) {
      for (let j = 0; j < nDes; j += 1) {
        const xlabel = caseUtils.label(inputs[j]);
        const ylabel = caseUtils.label(outputs[i]);

        const trace = {
          x: inputs[j].values,
          y: outputs[i].values,
          type: 'scatter',
          mode: 'markers',
        };
        const n = nDes * i + j + 1;
        const xname = `x${n}`;
        const yname = `y${n}`;
        trace.xaxis = xname;
        trace.yaxis = yname;
        trace.name = `${ylabel} vs ${xlabel}`;
        trace.marker = {
          color: succ,
          cmin: 0,
          cmax: 1,
          colorscale: COLORSCALE,
        };
        data.push(trace);

        layout[`xaxis${n}`] = { domain: [(j + 0.1) * pdh, (j + 0.9) * pdh], anchor: yname };
        layout[`yaxis${n}`] = { domain: [(i + 0.1) * pdv, (i + 0.9) * pdv], anchor: xname };
        if (j === 0) {
          layout[`yaxis${n}`].title = ylabel;
        }
        if (i === 0) {
          layout[`xaxis${n}`].title = xlabel;
        }
      }
    }
    layout.width = nDes * 250 + 300;
    layout.height = nOut * 250 + 100;
    layout.title = title;

    return (<Plot data={data} layout={layout} />);
  }
}

ScatterPlotMatrix.propTypes = {
  cases: PropTypes.shape({
    i: PropTypes.array.isRequired,
{'fraction_non_alphanumeric': 0.16379903647625602, 'fraction_numerical': 0.016517549896765314, 'mean_word_length': 2.0943931866572036, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 5, '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': '2556322', 'n_tokens_mistral': 1565, 'n_tokens_neox': 1498, 'n_words': 375}