<commit_before>import Component from './Component';
import Config from '../../Config';
import Globals from '../../Globals';

import {
    selection,
    select,
    nest,
    mouse
} from 'd3';


class PauseSet extends Component {

    constructor() {
        super();
    }

    public render() {
        let buttonPosition = this.config.get('buttonPosition') || 'bottom',
            height: number = this.config.get('height'),
            width: number = this.config.get('width'),
            selector = this.config.get('selector');

        let pause = this.svg.append('g').attr('class', 'pause');

        pause.append('image')
            .attr('class', 'pause-button')
            .attr('xlink:href', '../../../images/pause-button.svg')
            .attr('width', 30)
            .attr('height', 30)
            .attr('pause', false);

        switch (buttonPosition) {
            case 'right':
                this.drawRightPauseButton(pause, width, height);
                break;
            case 'bottom':
                this.drawBottomPauseButton(pause, width, height);
                break;
        }

        select(selector)
            .on('mouseover', function() { pause.select('.pause-button').style('opacity', 1); })
            .on('mouseout', function() { pause.select('.pause-button').style('opacity', 0); });

    }

    public update(data: any) {}

    public clear() {}

    public transition() {}

    private drawRightPauseButton(pauseElement: any, width: number, height: number) {
        pauseElement.select('.pause-button')
            .attr('x', width + 20)
            .on('click.mine', function() {
                let pause = (select(this).attr('pause') == 'false') ? false : true;

                if (!pause) {
                    select(this)
                        .attr('xlink:href', '../../../images/play-button.svg')
                        .attr('pause', true);
                } else {
                    select(this)
                        .attr('xlink:href', '../../../images/pause-button.svg')
                        .attr('pause', false);
                }
            });
    }

    private drawBottomPauseButton(pauseElement: any, width: number, height: number) {
        pauseElement.select('.pause-button')
            .attr('x', -50)
            .attr('y', height + 65)
            .on('click', function() {
                let pause = (select(this).attr('pause') == 'false') ? false : true;

                if (!pause) {
                    select(this)
                        .attr('xlink:href', '../../../images/play-button.svg')
                        .attr('pause', true);
                } else {
                    select(this)
                        .attr('xlink:href', '../../../images/pause-button.svg')
                        .attr('pause', false);
                }
            });
    }
}

export default PauseSet;<commit_msg>Add PauseSet component<commit_after>import Component from './Component';
import Config from '../../Config';
import Globals from '../../Globals';

import {
    selection,
    select,
    nest,
    mouse
} from 'd3';


class PauseSet extends Component {

    constructor() {
        super();
    }

    public render() {
        let buttonPosition = this.config.get('buttonPosition') || 'bottom',
            height: number = this.config.get('height'),
            width: number = this.config.get('width'),
            selector = this.config.get('selector');

        let pause = this.svg.append('g').attr('class', 'pause');

        pause.append('image')
            .attr('class', 'pause-button')
            .attr('xlink:href', '../../../images/pause-button.svg')
            .attr('width', 30)
            .attr('height', 30)
            .attr('pause', false);

        let thisInstance = this; // Assign instance to call instance's method in click event

        switch (buttonPosition) {
            case 'right':
                this.drawRightPauseButton(thisInstance, width, height);
                break;
            case 'bottom':
                this.drawBottomPauseButton(thisInstance, width, height);
                break;
        }

        select(selector)
            .on('mouseover', function() { pause.select('.pause-button').style('opacity', 1); })
            .on('mouseout', function() { pause.select('.pause-button').style('opacity', 0); });

    }

    public update(data: any) {
        // TODO
    }

    public clear() {}

    public transition() {}

    private drawRightPauseButton(thisInstance: any, width: number, height: number) {
        this.svg.select('.pause-button')
            .attr('x', width + 20)
            .on('click', function() { thisInstance.toggle(); });
    }

    private drawBottomPauseButton(thisInstance: any, width: number, height: number) {
        this.svg.select('.pause-button')
            .attr('x', -50)
            .attr('y', height + 65)
            .on('click', function() { thisInstance.toggle(); });
    }

    private toggle(): void {
        let pause: boolean = (this.svg.select('.pause-button').attr('pause') == 'false') ? false : true;

        if (!pause) {
            this.pauseStreaming();
        } else {
            this.playStreaming();
        }
    }

    private pauseStreaming(): void {
        this.svg.select('.pause-button')
                .attr('xlink:href', '../../../images/play-button.svg')
                .attr('pause', true);
    }

    private playStreaming(): void {
        this.svg.select('.pause-button')
                .attr('xlink:href', '../../../images/pause-button.svg')
                .attr('pause', false);
    }

}

export default PauseSet;
{'fraction_non_alphanumeric': 0.16805236157792322, 'fraction_numerical': 0.004599327790553688, 'mean_word_length': 1.6859857482185274, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '6177061', 'n_tokens_mistral': 1565, 'n_tokens_neox': 1487, 'n_words': 315}