<commit_before>import React from 'react'
import styles from '../styles/components/similarity-widget.css'

function getAnswer (user_answers, topic_id) {
    if (user_answers[topic_id])
        return user_answers[topic_id].answer
    return undefined
}

function make_procental_answer (answer) {
    // -1p = 0%     (-1 + 1) * 50 => 0
    //  0p = 50%     (0 + 1) * 50 => 50
    //  1p = 100%    (1 + 1) * 50 => 100
    if (isNaN(answer))
        return 0
    return Math.round((Number(answer) / 2 + 1)*50)
}

const SimilarityWidget = ({topic, items, user_answers, saveAnswer}) =>
    <div className={styles['similarity-widget']}>
        <div className={styles.no}>PRIEŠ</div>
        <div className={styles.middle}>
            {items.map(item => {
                let answer = (item.answers) ? item.answers[topic.id] : 0
                let style = {
                    left:  make_procental_answer(answer) * 5,
                    zIndex: make_procental_answer(answer)
                }
                return (
                    <div className={styles.img} style={style} key={'item-' + item.id}>
                        <img src={item.logo} alt={item.title + ' logo'} />
                    </div>
                )
            })}
            <div className={styles.line}></div>
            <div className={styles.actions}>
                <div className={styles.action}>
                    <img src={(getAnswer(user_answers, topic.id) < 0)
                                ? '/static/img/person-negative.png'
                                : '/static/img/person.png'}
                                onClick={() => saveAnswer(topic.id, -2)} />
                </div>
                <div className={styles.action}>
                    <img src={(getAnswer(user_answers, topic.id) === undefined)
                                ? '/static/img/person-active.png'
                                : '/static/img/person.png'}
                                onClick={() => saveAnswer(topic.id, undefined)} />
                </div>
                <div className={styles.action}>
                    <img src={(getAnswer(user_answers, topic.id) > 0)
                                ? '/static/img/person-positive.png'
                                : '/static/img/person.png'}
                                onClick={() => saveAnswer(topic.id, 2)} />
                </div>
            </div>
        </div>
        <div className={styles.yes}>UŽ</div>
    </div>


SimilarityWidget.propTypes = {<commit_msg>Put title for fraction logos in similarity widget<commit_after>import React from 'react'
import styles from '../styles/components/similarity-widget.css'

function getAnswer (user_answers, topic_id) {
    if (user_answers[topic_id])
        return user_answers[topic_id].answer
    return undefined
}

function make_procental_answer (answer) {
    // -1p = 0%     (-1 + 1) * 50 => 0
    //  0p = 50%     (0 + 1) * 50 => 50
    //  1p = 100%    (1 + 1) * 50 => 100
    if (isNaN(answer))
        return 0
    return Math.round((Number(answer) / 2 + 1)*50)
}

const SimilarityWidget = ({topic, items, user_answers, saveAnswer}) =>
    <div className={styles['similarity-widget']}>
        <div className={styles.no}>PRIEŠ</div>
        <div className={styles.middle}>
            {items.map(item => {
                let answer = (item.answers) ? item.answers[topic.id] : 0
                let percents = make_procental_answer(answer)
                return (
                    <div className={styles.img}
                         style={{left:  percents * 5, zIndex: percents}}
                         key={'item-' + item.id}>
                        <img src={item.logo} alt={`${item.title} logo`} title={`${item.title} - ${percents}%`} />
                    </div>
                )
            })}
            <div className={styles.line}></div>
            <div className={styles.actions}>
                <div className={styles.action}>
                    <img src={(getAnswer(user_answers, topic.id) < 0)
                                ? '/static/img/person-negative.png'
                                : '/static/img/person.png'}
                                onClick={() => saveAnswer(topic.id, -2)} />
                </div>
                <div className={styles.action}>
                    <img src={(getAnswer(user_answers, topic.id) === undefined)
                                ? '/static/img/person-active.png'
                                : '/static/img/person.png'}
                                onClick={() => saveAnswer(topic.id, undefined)} />
                </div>
                <div className={styles.action}>
                    <img src={(getAnswer(user_answers, topic.id) > 0)
                                ? '/static/img/person-positive.png'
                                : '/static/img/person.png'}
                                onClick={() => saveAnswer(topic.id, 2)} />
                </div>
            </div>
        </div>
        <div className={styles.yes}>UŽ</div>
    </div>


SimilarityWidget.propTypes = {
{'fraction_non_alphanumeric': 0.14443132624950808, 'fraction_numerical': 0.0149547422274695, 'mean_word_length': 1.3942534149788035, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6079397', 'n_tokens_mistral': 1551, 'n_tokens_neox': 1399, 'n_words': 267}