<commit_before>/**
 * The following code defines an information panel that can be invoked from
 * any plugin to display summaries, errors, or more information about what
 * the plugin is doing.
 *
 * These panels are moveable and closeable, and are unique to the plugin that
 * created them. They appear in the bottom right corner of the viewport.
 *
 * Info panels consist of a title and three optional sections, which form
 * tabs that users can switch between.
 *
 *   Summary: A summary of the plugin's results
 *   Errors: A list of violations reported by this plugin. The tab marker also
 *           contains the number of errors listed
 */

let $ = require("jquery");
let annotate = require("../annotate")("info-panel");
let template = require("./template.handlebars");
let errorTemplate = require("./error.handlebars");
let tabTemplate = require("./tab.handlebars");

require("./style.less");

class InfoPanel {
    constructor(title="Plugin") {
        this.title = title;
        this.about = null;
        this.summary = null;
        this.errors = [];

        this.$el = null;
    }

    /**
     * Sets the title of the info panel
     * (chainable)
     */
    setTitle(title) {
        this.title = title;
        return this;
    }

    /**
     * Sets the contents of the about section as HTML
     * (chainable)
     */
    setAbout(about) {
        this.about = about;
        return this;
    }

    /**
     * Sets the contents of the summary section as HTML
     * (chainable)
     */
    setSummary(summary) {
        this.summary = summary;
        return this;
    }

    /**
     * Adds an error to the errors tab. Also receives a jQuery element to
     * highlight on hover.
     * (chainable)
     */
    addError(title, description, $el) {
        this.errors.push({title, description, $el});
        return this;
    }

    render() {
        this.$el = $(template({
            title: this.title,
        }));

        let addTab = (title, html) => {
            // Create and append a tab marker
            let $tab = $(tabTemplate({title}));
            this.$el.find(".tota11y-info-tabs").append($tab);

            // Create and append the tab content
            let $section = $("<div>")
                .addClass("tota11y-info-section")
                .html(html);
            this.$el.find(".tota11y-info-sections").append($section);

            // Register an "activate" event for the tab, which switches the
            // tab's associated content to be visible, and changes the
            // appearance of the newly-active tab marker
            $tab.on("activate", () => {
                this.$el.find(".tota11y-info-tab.active")
                    .removeClass("active");
                this.$el.find(".tota11y-info-section.active")
                    .removeClass("active");

                $tab.addClass("active");
                $section.addClass("active");
            });

            // Activate the tab when its anchor is clicked
            $tab.on("click", (e) => {
                e.preventDefault();
                $tab.trigger("activate");
            });

            return $tab;
        };

        // Add the appropriate tabs based on which information the info panel
        // was provided, then highlight the most important one.
        let $activeTab;
        if (this.about) {
            $activeTab = addTab("About", this.about);
        }

        if (this.summary) {
            $activeTab = addTab("Summary", this.summary);
        }

        // TODO: Add errors and attach events
        if (this.errors.length > 0) {
            let $errors = $("<ul>").addClass("tota11y-info-errors");

            this.errors.forEach((error) => {
                let $error = $(errorTemplate(error));
                $errors.append($error);

                // Highlight the violating element on hover
                let $highlight;
                $error
                    .on("mouseenter", () => {
                        console.log('pls')
                        $highlight = annotate.highlight(error.$el);
                    })
                    .on("mouseleave", () => {
                        $highlight && $highlight.remove();
                    });
            });

            $activeTab = addTab("Errors", $errors);
<commit_msg>remove console.log :)<commit_after>/**
 * The following code defines an information panel that can be invoked from
 * any plugin to display summaries, errors, or more information about what
 * the plugin is doing.
 *
 * These panels are moveable and closeable, and are unique to the plugin that
 * created them. They appear in the bottom right corner of the viewport.
 *
 * Info panels consist of a title and three optional sections, which form
 * tabs that users can switch between.
 *
 *   Summary: A summary of the plugin's results
 *   Errors: A list of violations reported by this plugin. The tab marker also
 *           contains the number of errors listed
 */

let $ = require("jquery");
let annotate = require("../annotate")("info-panel");
let template = require("./template.handlebars");
let errorTemplate = require("./error.handlebars");
let tabTemplate = require("./tab.handlebars");

require("./style.less");

class InfoPanel {
    constructor(title="Plugin") {
        this.title = title;
        this.about = null;
        this.summary = null;
        this.errors = [];

        this.$el = null;
    }

    /**
     * Sets the title of the info panel
     * (chainable)
     */
    setTitle(title) {
        this.title = title;
        return this;
    }

    /**
     * Sets the contents of the about section as HTML
     * (chainable)
     */
    setAbout(about) {
        this.about = about;
        return this;
    }

    /**
     * Sets the contents of the summary section as HTML
     * (chainable)
     */
    setSummary(summary) {
        this.summary = summary;
        return this;
    }

    /**
     * Adds an error to the errors tab. Also receives a jQuery element to
     * highlight on hover.
     * (chainable)
     */
    addError(title, description, $el) {
        this.errors.push({title, description, $el});
        return this;
    }

    render() {
        this.$el = $(template({
            title: this.title,
        }));

        let addTab = (title, html) => {
            // Create and append a tab marker
            let $tab = $(tabTemplate({title}));
            this.$el.find(".tota11y-info-tabs").append($tab);

            // Create and append the tab content
            let $section = $("<div>")
                .addClass("tota11y-info-section")
                .html(html);
            this.$el.find(".tota11y-info-sections").append($section);

            // Register an "activate" event for the tab, which switches the
            // tab's associated content to be visible, and changes the
            // appearance of the newly-active tab marker
            $tab.on("activate", () => {
                this.$el.find(".tota11y-info-tab.active")
                    .removeClass("active");
                this.$el.find(".tota11y-info-section.active")
                    .removeClass("active");

                $tab.addClass("active");
                $section.addClass("active");
            });

            // Activate the tab when its anchor is clicked
            $tab.on("click", (e) => {
                e.preventDefault();
                $tab.trigger("activate");
            });

            return $tab;
        };

        // Add the appropriate tabs based on which information the info panel
        // was provided, then highlight the most important one.
        let $activeTab;
        if (this.about) {
            $activeTab = addTab("About", this.about);
        }

        if (this.summary) {
            $activeTab = addTab("Summary", this.summary);
        }

        // TODO: Add errors and attach events
        if (this.errors.length > 0) {
            let $errors = $("<ul>").addClass("tota11y-info-errors");

            this.errors.forEach((error) => {
                let $error = $(errorTemplate(error));
                $errors.append($error);

                // Highlight the violating element on hover
                let $highlight;
                $error
                    .on("mouseenter", () => {
                        $highlight = annotate.highlight(error.$el);
                    })
                    .on("mouseleave", () => {
                        $highlight && $highlight.remove();
                    });
            });

            $activeTab = addTab("Errors", $errors);

{'fraction_non_alphanumeric': 0.12446202163545422, 'fraction_numerical': 0.0030243108060951495, 'mean_word_length': 1.6885553470919326, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 21, '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': '5305587', 'n_tokens_mistral': 2291, 'n_tokens_neox': 2177, 'n_words': 673}