<commit_before>import { utcToLocal, createOption, linkSelects, localToUTC, setURL, dragElement, darkenHex, debounce, buildCheckBox } from '../util.js';
import { controllers } from '../components/Controller.js';
import { simVars } from '../simVars.js';

export class TimeSeriesChart extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
            <link rel='stylesheet' href='css/timeSeriesChart.css'/>
            <div id='fullContainer'>
                <div>
                    <div id='addLayers'>
                        <span class='interactive-button'>Added Layers</span>
                    </div>
                    <div id='layers-to-add'></div>
                </div>
                <div id='timeSeriesChartContainer'>
                    <div id='legendOptions'>
                        <span class='interactive-button close-button' id='closeLegendOptions'>x</span>
                        <label class='legendLabel' for'openMarker'>Open Marker Info</label>
                        <input class='legendInput' type='checkbox' id='openMarker'/>
                        <label class='legendLabel' for='hideData'>Hide Data: </label>
                        <input class='legendInput' type='checkbox' id='hideData'/>
                        <label class='legendLabel' for='timeseriesColorCode'>Change Color: </label>
                        <input class='legendInput' type='color' id='timeseriesColorCode'></input>
                        <label class='legendLabel' for='addChangeName'>Add Name:</label>
                        <input class='legendInput' id='addChangeName'></input>
                    </div>
                    <div id='zoomBox'></div>
                    <span class='interactive-button close-button' id='closeTimeSeriesChart'>x</span>
                    <button id='drag-container' class='interactive-button' style='display: none; margin-right: 5px'>
                        <img height=15 width=15 src='icons/open_with_black_24dp.svg'></img>
                    </button>
                    <button id='undo-zoom' class='interactive-button' style='display:none'>
                        <img height=15 width=15 src='icons/undo_black_24dp.svg'></img>
                    </button>
                    <canvas id='timeSeriesChart' width='400px' height='400px'></canvas>
                    <div id='break' style='width: 100%; height: 1px; background: #5d5d5d'></div>
                    <div id='add-threshold' style='margin-top: 10px'>
                        <label style='display: inline-block; width: 100px' for='threshold-setter'>y-axis threshold: </label>
                        <input id='threshold-setter' style='margin-right:10px; width: 150px'></input>
                        <label style='display: inline-block; width: 100px' for='threshold-label'>threshold label: </label>
                        <input id='threshold-label' style='width: 150px'></input>
                    </div>
                    <div id='zoomIn' style='display: inline-block; margin-top: 10px'>
                        <label style='display: inline-block; width: 100px' for='zoom-start'>zoom in start: </label>
                        <select id='zoom-start' style='width: 160px; margin-right:10px'></select>
                        <label style='display: inline-block; width: 100px' for='zoom-end'>zoom in end: </label>
                        <select id='zoom-end' style='width: 160px'></select>
                    </div>
                </div>
            </div>
        `;
        this.ctx = null;
        this.chart = null;
        this.thresholdValues = {};
        this.thresholdLabels = {};
        this.labels = '';
        this.xAdjust = null;
        this.startDate = '';
        this.endDate = '';
    }

    connectedCallback() {
        // set the position of the timeSeriesChart
        const timeSeriesChart = this.querySelector('#timeSeriesChartContainer');
        const fullContainer = this.querySelector('#fullContainer');
        var clientWidth = document.body.clientWidth;
        if (clientWidth > 769) {
            // timeSeriesChart.style.left = 300 + 'px';
            fullContainer.style.left = 330 + 'px';
            const dragButton = this.querySelector('#drag-container');
            dragButton.style.display = 'inline-block';
            dragElement(fullContainer, 'drag-container');
        }
        L.DomEvent.disableScrollPropagation(timeSeriesChart);
        L.DomEvent.disableClickPropagation(timeSeriesChart);

        const timeSeries = this.querySelector('#timeSeriesChart');
        this.ctx = timeSeries.getContext('2d');
        
        this.updateDataOnRemove();
        this.setThresholdOptions();
        this.setZoomOptions(timeSeries);
        this.setDataClicking(timeSeries);
        this.setLayerSelection();
        this.debouncedPopulateChart = debounce((chartArgs) => {
            this.populateChartCallback(chartArgs);
        }, 100);

        this.querySelector('#closeTimeSeriesChart').onclick = () => {
            this.thresholdLabels = {};
            this.thresholdValues = {};
            fullContainer.style.display = 'none';
            fullContainer.classList.remove('displayed');
        }

        this.xAdjust = (document.body.clientWidth < 769) ? 90 : 220;
    }

    setLayerSelection() {
        const addLayers = this.querySelector('#addLayers');
        const layersToAdd = this.querySelector('#layers-to-add');
        addLayers.onclick = () => {
            if (layersToAdd.classList.contains('displayed')) {
                layersToAdd.style.display = 'none';
                layersToAdd.classList.remove('displayed');
                addLayers.style.left = '-80px';
            } else {
                layersToAdd.style.display = 'block';
                layersToAdd.classList.add('displayed');
                addLayers.style.left = '-330px';
            }
        }<commit_msg>BUG FIX: Changes onclick callback to onpointerdown callback for Safari<commit_after>import { utcToLocal, createOption, linkSelects, localToUTC, setURL, dragElement, darkenHex, debounce, buildCheckBox } from '../util.js';
import { controllers } from '../components/Controller.js';
import { simVars } from '../simVars.js';

export class TimeSeriesChart extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
            <link rel='stylesheet' href='css/timeSeriesChart.css'/>
            <div id='fullContainer'>
                <div>
                    <div id='addLayers'>
                        <span class='interactive-button'>Added Layers</span>
                    </div>
                    <div id='layers-to-add'></div>
                </div>
                <div id='timeSeriesChartContainer'>
                    <div id='legendOptions'>
                        <span class='interactive-button close-button' id='closeLegendOptions'>x</span>
                        <label class='legendLabel' for'openMarker'>Open Marker Info</label>
                        <input class='legendInput' type='checkbox' id='openMarker'/>
                        <label class='legendLabel' for='hideData'>Hide Data: </label>
                        <input class='legendInput' type='checkbox' id='hideData'/>
                        <label class='legendLabel' for='timeseriesColorCode'>Change Color: </label>
                        <input class='legendInput' type='color' id='timeseriesColorCode'></input>
                        <label class='legendLabel' for='addChangeName'>Add Name:</label>
                        <input class='legendInput' id='addChangeName'></input>
                    </div>
                    <div id='zoomBox'></div>
                    <span class='interactive-button close-button' id='closeTimeSeriesChart'>x</span>
                    <button id='drag-container' class='interactive-button' style='display: none; margin-right: 5px'>
                        <img height=15 width=15 src='icons/open_with_black_24dp.svg'></img>
                    </button>
                    <button id='undo-zoom' class='interactive-button' style='display:none'>
                        <img height=15 width=15 src='icons/undo_black_24dp.svg'></img>
                    </button>
                    <canvas id='timeSeriesChart' width='400px' height='400px'></canvas>
                    <div id='break' style='width: 100%; height: 1px; background: #5d5d5d'></div>
                    <div id='add-threshold' style='margin-top: 10px'>
                        <label style='display: inline-block; width: 100px' for='threshold-setter'>y-axis threshold: </label>
                        <input id='threshold-setter' style='margin-right:10px; width: 150px'></input>
                        <label style='display: inline-block; width: 100px' for='threshold-label'>threshold label: </label>
                        <input id='threshold-label' style='width: 150px'></input>
                    </div>
                    <div id='zoomIn' style='display: inline-block; margin-top: 10px'>
                        <label style='display: inline-block; width: 100px' for='zoom-start'>zoom in start: </label>
                        <select id='zoom-start' style='width: 160px; margin-right:10px'></select>
                        <label style='display: inline-block; width: 100px' for='zoom-end'>zoom in end: </label>
                        <select id='zoom-end' style='width: 160px'></select>
                    </div>
                </div>
            </div>
        `;
        this.ctx = null;
        this.chart = null;
        this.thresholdValues = {};
        this.thresholdLabels = {};
        this.labels = '';
        this.xAdjust = null;
        this.startDate = '';
        this.endDate = '';
    }

    connectedCallback() {
        // set the position of the timeSeriesChart
        const timeSeriesChart = this.querySelector('#timeSeriesChartContainer');
        const fullContainer = this.querySelector('#fullContainer');
        var clientWidth = document.body.clientWidth;
        if (clientWidth > 769) {
            // timeSeriesChart.style.left = 300 + 'px';
            fullContainer.style.left = 330 + 'px';
            const dragButton = this.querySelector('#drag-container');
            dragButton.style.display = 'inline-block';
            dragElement(fullContainer, 'drag-container');
        }
        L.DomEvent.disableScrollPropagation(timeSeriesChart);
        L.DomEvent.disableClickPropagation(timeSeriesChart);

        const timeSeries = this.querySelector('#timeSeriesChart');
        this.ctx = timeSeries.getContext('2d');
        
        this.updateDataOnRemove();
        this.setThresholdOptions();
        this.setZoomOptions(timeSeries);
        this.setDataClicking(timeSeries);
        this.setLayerSelection();
        this.debouncedPopulateChart = debounce((chartArgs) => {
            this.populateChartCallback(chartArgs);
        }, 100);

        this.querySelector('#closeTimeSeriesChart').onclick = () => {
            this.thresholdLabels = {};
            this.thresholdValues = {};
            fullContainer.style.display = 'none';
            fullContainer.classList.remove('displayed');
        }

        this.xAdjust = (document.body.clientWidth < 769) ? 90 : 220;
    }

    setLayerSelection() {
        const addLayers = this.querySelector('#addLayers');
        const layersToAdd = this.querySelector('#layers-to-add');
        addLayers.onpointerdown = () => {
            if (layersToAdd.classList.contains('displayed')) {
                layersToAdd.style.display = 'none';
                layersToAdd.classList.remove('displayed');
                addLayers.style.left = '-80px';
            } else {
                layersToAdd.style.display = 'block';
                layersToAdd.classList.add('displayed');
                addLayers.style.left = '-330px';
            }
        }
{'fraction_non_alphanumeric': 0.13322686391527275, 'fraction_numerical': 0.014121207026981593, 'mean_word_length': 1.9626494023904382, 'pattern_counts': {'":': 0, '<': 139, '<?xml version=': 0, '>': 145, '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': '2216904', 'n_tokens_mistral': 3269, 'n_tokens_neox': 3032, 'n_words': 573}