<commit_before>// Dna sequence(ATGC) with appropriate color for each letter.
// Example: <ColorDNA seq="ATGC" />
import React from 'react';

const CHAR_TO_COLOR = {
    'A': '#00CC00',
    'C': '#0000CC',
    'G': '#CCCC1A',
    'T': '#CC001A',
};
const FONT_FAMILY = 'monospace';
const FONT_SIZE = '12pt';

class ColorDNA extends React.Component {
    determineColor(c) {
        var color = CHAR_TO_COLOR[c];
        if (!color) {
            color = 'black'
        }
        return color;
    }

    coloredLetterSpan(key, c) {
        var color = this.determineColor(c);
        var style = {
            'color': color,
            'font-family': FONT_FAMILY,
            'font-size': FONT_SIZE,
        };
        return <span key={key} style={style}>{c}</span>;
    }

    render() {
        var seq = this.props.seq;
        var letters = [];
        for (var i = 0; i < seq.length; i++) {
            var c = seq[i];
            var key = i + "_" + c;
            letters.push(this.coloredLetterSpan(key, c));
        }
        return <div>
            {letters}
        </div>;
    }
}

export default ColorDNA;<commit_msg>fix style and comment about key<commit_after>// Dna sequence(ATGC) with appropriate color for each letter.
// Example: <ColorDNA seq="ATGC" />
import React from 'react';

const CHAR_TO_COLOR = {
    'A': '#00CC00',
    'C': '#0000CC',
    'G': '#CCCC1A',
    'T': '#CC001A',
};
const FONT_FAMILY = 'monospace';
const FONT_SIZE = '12pt';

class ColorDNA extends React.Component {
    determineColor(c) {
        var color = CHAR_TO_COLOR[c];
        if (!color) {
            color = 'black'
        }
        return color;
    }

    coloredLetterSpan(key, c) {
        var color = this.determineColor(c);
        var style = {
            'color': color,
            'fontFamily': FONT_FAMILY,
            'fontSize': FONT_SIZE,
        };
        return <span key={key} style={style}>{c}</span>;
    }

    render() {
        var seq = this.props.seq;
        var letters = [];
        for (var i = 0; i < seq.length; i++) {
            var c = seq[i];
            // reactjs requires a key for dynamic component lists
            var key = i + "_" + c;
            letters.push(this.coloredLetterSpan(key, c));
        }
        return <div>
            {letters}
        </div>;
    }
}

export default ColorDNA;
{'fraction_non_alphanumeric': 0.14638297872340425, 'fraction_numerical': 0.01276595744680851, 'mean_word_length': 1.8705738705738706, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 13, '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': '5496396', 'n_tokens_mistral': 800, 'n_tokens_neox': 754, 'n_words': 196}