<commit_before>import UtilsNew from "../../core/utilsNew.js";
import Region from "../../core/bioinfo/region.js";
import {SVG} from "../../core/svg.js";
import GenomeBrowserConstants from "../genome-browser-constants.js";


export default class KaryotypePanel {

    constructor(target, config) {
        // eslint-disable-next-line no-undef
        Object.assign(this, Backbone.Events);

        this.target = target;
        this.config = {
            ...this.getDefaultConfig(),
            ...config,
        };

        this.#init();
    }

    #init() {
        this.prefix = UtilsNew.randomString(8);
        this.width = this.config.width;
        this.height = this.config.height;

        this.pixelBase = 0;
        this.collapsed = false;
        this.hidden = false;

        // set own region object
        this.region = new Region(this.config.region);

        this.species = this.config.species;
        this.lastSpecies = this.config.species;

        this.chromosomeList = [];

        this.regionChanging = false;
        this.rendered = false;

        this.#initDom();
        this.#initEvents();

        this.setVisible(!this.hidden);
    }

    #initDom() {
        const template = UtilsNew.renderHTML(`
            <div id="${this.prefix}" class="unselectable">
                <div id="${this.prefix}Title" class="ocb-gv-panel-title unselectable">
                    <div id="${this.prefix}TitleText" class="ocb-gv-panel-text">
                        ${this.config?.title || ""}
                    </div>
                    <div id="${this.prefix}Collapse" class="ocb-gv-panel-collapse-control">
                        <span id="${this.prefix}CollapseIcon" class="fa fa-minus"></span>
                    </div>
                </div>
                <div id="${this.prefix}Content" style="display:block;"></div>
            </div>
        `);

        this.div = template.querySelector(`div#${this.prefix}`);
        this.titleDiv = this.div.querySelector(`div#${this.prefix}Title`);
        this.titleText = this.div.querySelector(`div#${this.prefix}TitleText`);
        this.collapseDiv = this.div.querySelector(`div#${this.prefix}Collapse`);
        this.collapseIcon = this.div.querySelector(`span#${this.prefix}CollapseIcon`);

        // Main content
        this.content = this.div.querySelector(`div#${this.prefix}Content`);

        // Initialize SVG element
        this.svg = SVG.init(this.content, {
            "width": this.width,
            "height": this.height,
        });

        // Mark group element
        this.markGroup = SVG.addChild(this.svg, "g", {
            cursor: "pointer",
        });

        this.positionBox = null;

        this.target.append(this.div);
    }

    #initEvents() {
        this.titleDiv.addEventListener("click", () => {
            this.toggleContent();
        });
    }

    show() {
        this.div.style.display = "block";
        this.hidden = false;
    }

    hide() {
        this.div.style.display = "none";
        this.hidden = true;
    }

    setVisible(bool) {
        bool ? this.show() : this.hide();
    }

    showContent() {
        this.content.style.display = "inline";<commit_msg>gb: migrate karyotype panel styles #TASK-893<commit_after>import UtilsNew from "../../core/utilsNew.js";
import Region from "../../core/bioinfo/region.js";
import {SVG} from "../../core/svg.js";
import GenomeBrowserConstants from "../genome-browser-constants.js";


export default class KaryotypePanel {

    constructor(target, config) {
        // eslint-disable-next-line no-undef
        Object.assign(this, Backbone.Events);

        this.target = target;
        this.config = {
            ...this.getDefaultConfig(),
            ...config,
        };

        this.#init();
    }

    #init() {
        this.prefix = UtilsNew.randomString(8);
        this.width = this.config.width;
        this.height = this.config.height;

        this.pixelBase = 0;
        this.collapsed = false;
        this.hidden = false;

        // set own region object
        this.region = new Region(this.config.region);

        this.species = this.config.species;
        this.lastSpecies = this.config.species;

        this.chromosomeList = [];

        this.regionChanging = false;
        this.rendered = false;

        this.#initDom();
        this.#initEvents();

        this.setVisible(!this.hidden);
    }

    #initDom() {
        const template = UtilsNew.renderHTML(`
            <div id="${this.prefix}" style="user-select:none;">
                <div id="${this.prefix}Title" style="display:flex;justify-content:space-between;">
                    <div id="${this.prefix}TitleText" style="font-weight:bold;">
                        ${this.config?.title || ""}
                    </div>
                    <div id="${this.prefix}Collapse">
                        <span id="${this.prefix}CollapseIcon" class="fa fa-minus"></span>
                    </div>
                </div>
                <div id="${this.prefix}Content" style="display:block;margin-top:8px;"></div>
            </div>
        `);

        this.div = template.querySelector(`div#${this.prefix}`);
        this.titleDiv = this.div.querySelector(`div#${this.prefix}Title`);
        this.titleText = this.div.querySelector(`div#${this.prefix}TitleText`);
        this.collapseDiv = this.div.querySelector(`div#${this.prefix}Collapse`);
        this.collapseIcon = this.div.querySelector(`span#${this.prefix}CollapseIcon`);

        // Main content
        this.content = this.div.querySelector(`div#${this.prefix}Content`);

        // Initialize SVG element
        this.svg = SVG.init(this.content, {
            "width": this.width,
            "height": this.height,
        });

        // Mark group element
        this.markGroup = SVG.addChild(this.svg, "g", {
            cursor: "pointer",
        });

        this.positionBox = null;

        this.target.append(this.div);
    }

    #initEvents() {
        this.titleDiv.addEventListener("click", () => {
            this.toggleContent();
        });
    }

    show() {
        this.div.style.display = "block";
        this.hidden = false;
    }

    hide() {
        this.div.style.display = "none";
        this.hidden = true;
    }

    setVisible(bool) {
        bool ? this.show() : this.hide();
    }

    showContent() {
        this.content.style.display = "block";
{'fraction_non_alphanumeric': 0.1567373674360574, 'fraction_numerical': 0.0012476606363069245, 'mean_word_length': 1.8991862567811935, 'pattern_counts': {'":': 4, '<': 27, '<?xml version=': 0, '>': 29, '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': '3097205', 'n_tokens_mistral': 1886, 'n_tokens_neox': 1829, 'n_words': 296}