import $ from 'jquery';
import menuDotsIcon from '../img/menudots.svg';
import OncoprintModel, {
    CustomTrackOption,
    GAP_MODE_ENUM,
    TrackId,
    TrackProp,
    TrackSortDirection,
} from './oncoprintmodel';
import { CLOSE_MENUS_EVENT as HEADER_VIEW_CLOSE_MENUS_EVENT } from './oncoprintheaderview';
import ClickEvent = JQuery.ClickEvent;

const TOGGLE_BTN_CLASS = 'oncoprintjs__track_options__toggle_btn_img';
const TOGGLE_BTN_OPEN_CLASS = 'oncoprintjs__track_options__open';
const DROPDOWN_CLASS = 'oncoprintjs__track_options__dropdown';
const SEPARATOR_CLASS = 'oncoprintjs__track_options__separator';
const NTH_CLASS_PREFIX = 'nth-';

export const CLOSE_MENUS_EVENT = 'oncoprint-track-options-view.do-close-menus';

type TrackCallback = (trackId: TrackId) => void;
export default class OncoprintTrackOptionsView {
    private $ctr: JQuery;
    private $buttons_ctr: JQuery;
    private $dropdown_ctr: JQuery;

    private img_size: number;
    private rendering_suppressed = false;
    private track_options_$elts: TrackProp<{
        $div: JQuery;
        $img: JQuery;
        $dropdown: JQuery;
    }> = {};
    private menu_shown: TrackProp<boolean> = {};
    private clickHandler: () => void;
    private interaction_disabled = false;

    constructor(
        private $div: JQuery,
        private moveUpCallback: TrackCallback,
        private moveDownCallback: TrackCallback,
        private removeCallback: TrackCallback,
        private sortChangeCallback: (
            trackId: TrackId,
            sortDirection: TrackSortDirection
        ) => void,
        private unexpandCallback: TrackCallback,
        private showGapsCallback: (
            trackId: TrackId,
            showGaps: GAP_MODE_ENUM
        ) => void
    ) {
        const position = $div.css('position');
        if (position !== 'absolute' && position !== 'relative') {
            console.log(
                'WARNING: div passed to OncoprintTrackOptionsView must be absolute or relative positioned - layout problems will occur'
            );
        }

        this.$ctr = $('<div></div>')
            .css({
                position: 'absolute',
                'overflow-y': 'hidden',
                'overflow-x': 'hidden',
            })
            .appendTo(this.$div);
        this.$buttons_ctr = $('<div></div>')
            .css({ position: 'absolute' })
            .appendTo(this.$ctr);
        this.$dropdown_ctr = $('<div></div>')
            .css({ position: 'absolute' })
            .appendTo(this.$div);

        const self = this;
        this.clickHandler = function() {
            $(document).trigger(CLOSE_MENUS_EVENT);
        };
        $(document).on('click', this.clickHandler);
    }

    private renderAllOptions(model: OncoprintModel) {
        if (this.rendering_suppressed) {
            return;
        }
        const self = this;
        $(document).off(CLOSE_MENUS_EVENT);
        $(document).on(CLOSE_MENUS_EVENT, function() {
            self.hideAllMenus();
        });

        this.$buttons_ctr.empty();
        this.$dropdown_ctr.empty();
        this.scroll(model.getVertScroll());

        var tracks = model.getTracks();
        var minimum_track_height = Number.POSITIVE_INFINITY;
        for (let i = 0; i < tracks.length; i++) {
            minimum_track_height = Math.min(
                minimum_track_height,
                model.getTrackHeight(tracks[i])
            );
        }
        this.img_size = Math.floor(minimum_track_height * 0.75);

        for (let i = 0; i < tracks.length; i++) {
            this.renderTrackOptions(model, tracks[i], i);
        }
    }

    private scroll(scroll_y: number) {
        if (this.rendering_suppressed) {
            return;
        }
        this.$buttons_ctr.css({ top: -scroll_y });
        this.$dropdown_ctr.css({ top: -scroll_y });

        this.hideAllMenus();
    }

    private resize(model: OncoprintModel, getCellViewHeight: () => number) {
        if (this.rendering_suppressed) {
            return;
        }
        this.$div.css({ width: this.getWidth(), height: getCellViewHeight() });
        this.$ctr.css({ width: this.getWidth(), height: getCellViewHeight() });
    }

    private hideTrackMenu(track_id: TrackId) {
        this.menu_shown[track_id] = false;
        const $elts = this.track_options_$elts[track_id];
        $elts.$dropdown.css({ 'z-index': 1 });
        $elts.$dropdown.css({ border: '1px solid rgba(125,125,125,0)' });
        $elts.$img.css({ border: '1px solid rgba(125,125,125,0)' });
        $elts.$dropdown.fadeOut(100);
    }

    private showTrackMenu(track_id: TrackId) {
        this.menu_shown[track_id] = true;
        const $elts = this.track_options_$elts[track_id];
        $elts.$dropdown.css({ 'z-index': 10 });
        $elts.$dropdown.css({ border: '1px solid rgba(125,125,125,1)' });
        $elts.$img.css({ border: '1px solid rgba(125,125,125,1)' });
        $elts.$dropdown.fadeIn(100);
    }

    private hideAllMenus() {
        for (const track_id in this.track_options_$elts) {
            if (this.track_options_$elts.hasOwnProperty(track_id)) {
                this.hideTrackMenu(parseInt(track_id, 10));
            }
        }
    }

    private hideMenusExcept(track_id: TrackId) {
        for (const _other_track_id in this.track_options_$elts) {
            if (this.track_options_$elts.hasOwnProperty(_other_track_id)) {
                const other_track_id = parseInt(_other_track_id, 10);
                if (other_track_id === track_id) {
                    continue;
                }
                this.hideTrackMenu(other_track_id);
            }
        }

        $(document).trigger(HEADER_VIEW_CLOSE_MENUS_EVENT);
    }

    private static $makeDropdownOption(
        text: string,
        weight: string,
        disabled?: boolean,
        callback?: (evt: ClickEvent) => void
    ) {
        const li = $('<li>')
            .text(text)
            .css({
                'font-weight': weight,
                'font-size': 12,
                'border-bottom': '1px solid rgba(0,0,0,0.3)',
                // Disables the iOS 300ms tap delay and lets click fire on first tap.
                'touch-action': 'manipulation',
            });
        if (!disabled) {
            if (callback) {
                li.addClass('clickable');
                li.css({ cursor: 'pointer' });
                // Also fire on touchend so taps work when the synthetic click
                // doesn't arrive (sticky hover on iOS). preventDefault on the
                // touch stops the follow-up click so the callback runs once.
                let fired = false;
                const invoke = function(evt: any) {
                    if (fired) return;
                    fired = true;
                    setTimeout(() => {
                        fired = false;
                    }, 400);
                    callback(evt);
                };
                li.on('click', invoke);
                li.on('touchend', function(evt) {
                    evt.preventDefault();
                    invoke(evt);
                });
                li.hover(
                    function() {
                        $(this).css({ 'background-color': 'rgb(200,200,200)' });
                    },
                    function() {
                        $(this).css({
                            'background-color': 'rgba(255,255,255,0)',
                        });
                    }
                );
            } else {
                li.click(function(evt) {
                    evt.stopPropagation();
                });
            }
        } else {
            li.addClass('disabled');
            li.css({ color: 'rgb(200, 200, 200)', cursor: 'default' });
        }
        return li;
    }

    private static $makeDropdownSeparator() {
        return $('<li>')
            .css({ 'border-top': '1px solid black' })
            .addClass(SEPARATOR_CLASS);
    }

    // Hover-expanding parent item that reveals a floating submenu with leaf
    // options. Used for nested "Sort by > <category>" style menus without
    // cluttering the top-level dropdown.
    private static $makeDropdownSubmenuOption(
        text: string,
        children: CustomTrackOption[],
        track_id: TrackId,
        closeOuterMenu: () => void
    ) {
        const $li = $('<li>')
            .text(text + ' \u25B8')
            .css({
                'font-weight': 'normal',
                'font-size': 12,
                'border-bottom': '1px solid rgba(0,0,0,0.3)',
                cursor: 'default',
                position: 'relative',
            })
            .addClass('has-submenu');
        const $submenu = $('<ul>')
            .appendTo($li)
            .css({
                position: 'absolute',
                left: '100%',
                top: 0,
                display: 'none',
                'list-style-type': 'none',
                padding: 0,
                margin: 0,
                'padding-left': '6px',
                'padding-right': '6px',
                'background-color': 'rgb(255,255,255)',
                border: '1px solid rgba(0,0,0,0.2)',
                'z-index': 100,
                'min-width': '140px',
            });
        let clickedOpen = false;
        for (const child of children) {
            if (child.separator) {
                $submenu.append(
                    OncoprintTrackOptionsView.$makeDropdownSeparator()
                );
                continue;
            }
            $submenu.append(
                OncoprintTrackOptionsView.$makeDropdownOption(
                    child.label || '',
                    child.weight || 'normal',
                    child.disabled,
                    child.onClick &&
                        function(evt) {
                            evt.stopPropagation();
                            clickedOpen = false;
                            $submenu.hide();
                            child.onClick!(track_id);
                            closeOuterMenu();
                        }
                )
            );
        }
        $li.hover(
            function() {
                $(this).css({ 'background-color': 'rgb(200,200,200)' });
                $submenu.show();
            },
            function() {
                $(this).css({ 'background-color': 'rgba(255,255,255,0)' });
                if (!clickedOpen) $submenu.hide();
            }
        );
        // Touch devices have no hover — tapping the parent toggles the submenu
        // and keeps it open until a child is picked or the outer menu closes.
        $li.css({ 'touch-action': 'manipulation' });
        let parentFired = false;
        const toggleSubmenu = function(evt: any) {
            if (
                $(evt.target)
                    .closest('ul')
                    .is($submenu)
            )
                return;
            if (parentFired) return;
            parentFired = true;
            setTimeout(() => {
                parentFired = false;
            }, 400);
            evt.stopPropagation();
            clickedOpen = !clickedOpen;
            $submenu.toggle(clickedOpen);
        };
        $li.on('click', toggleSubmenu);
        $li.on('touchend', function(evt) {
            if (
                $(evt.target)
                    .closest('ul')
                    .is($submenu)
            )
                return;
            evt.preventDefault();
            toggleSubmenu(evt);
        });
        return $li;
    }

    // 11/2/2023 we are removing sort arrow
    // leaving commented out if it needs to be restored based on complaint
    private static renderSortArrow(
        $sortarrow: JQuery,
        model: OncoprintModel,
        track_id: TrackId
    ) {
        // let sortarrow_char = '';
        // if (model.isTrackSortDirectionChangeable(track_id)) {
        //     sortarrow_char = {
        //         '1':
        //             '<i class="fa fa-signal" aria-hidden="true" title="Sorted ascending"></i>',
        //         '-1':
        //             '<i class="fa fa-signal" style="transform: scaleX(-1);" aria-hidden="true" title="Sorted descending"></i>',
        //         '0': '',
        //     }[model.getTrackSortDirection(track_id)];
        // }
        // $sortarrow.html(sortarrow_char);
    }

    private renderTrackOptions(
        model: OncoprintModel,
        track_id: TrackId,
        index: number
    ) {
        let $div: JQuery, $img: JQuery, $sortarrow: JQuery, $dropdown: JQuery;
        const top = model.getZoomedTrackTops(track_id);
        $div = $('<div>')
            .appendTo(this.$buttons_ctr)
            .css({
                position: 'absolute',
                left: '0px',
                top: top + 'px',
                'white-space': 'nowrap',
            });
        $img = $('<img/>')
            .appendTo($div)
            .attr({
                src: menuDotsIcon,
                alt: 'Menu Dots Icon',
                width: this.img_size,
                height: this.img_size,
            })
            .css({
                float: 'left',
                cursor: 'pointer',
                border: '1px solid rgba(125,125,125,0)',
            })
            .addClass(TOGGLE_BTN_CLASS)
            .addClass(NTH_CLASS_PREFIX + (index + 1));
        $sortarrow = $('<span>')
            .appendTo($div)
            .css({
                position: 'absolute',
                top: Math.floor(this.img_size / 4) + 'px',
            });
        $dropdown = $('<ul>')
            .appendTo(this.$dropdown_ctr)
            .css({
                position: 'absolute',
                width: 120,
                display: 'none',
                'list-style-type': 'none',
                'padding-left': '6',
                'padding-right': '6',
                float: 'right',
                'background-color': 'rgb(255,255,255)',
                left: '0px',
                top: top + this.img_size + 'px',
            })
            .addClass(DROPDOWN_CLASS)
            .addClass(NTH_CLASS_PREFIX + (index + 1));
        this.track_options_$elts[track_id] = {
            $div: $div,
            $img: $img,
            $dropdown: $dropdown,
        };

        OncoprintTrackOptionsView.renderSortArrow($sortarrow, model, track_id);

        const self = this;
        $img.hover(
            function(evt) {
                if (!self.menu_shown[track_id]) {
                    $(this).css({ border: '1px solid rgba(125,125,125,0.3)' });
                }
            },
            function(evt) {
                if (!self.menu_shown[track_id]) {
                    $(this).css({ border: '1px solid rgba(125,125,125,0)' });
                }
            }
        );
        $img.css({ 'touch-action': 'manipulation' });
        let imgFired = false;
        const toggleImgMenu = function(evt: any) {
            if (imgFired) return;
            imgFired = true;
            setTimeout(() => {
                imgFired = false;
            }, 400);
            evt.stopPropagation();
            if ($dropdown.is(':visible')) {
                $img.addClass(TOGGLE_BTN_OPEN_CLASS);
                self.hideTrackMenu(track_id);
            } else {
                $img.removeClass(TOGGLE_BTN_OPEN_CLASS);
                self.showTrackMenu(track_id);
            }
            self.hideMenusExcept(track_id);
        };
        $img.on('click', toggleImgMenu);
        $img.on('touchend', function(evt) {
            evt.preventDefault();
            toggleImgMenu(evt);
        });

        // Gray out Move up/down only when the track belongs to a clustered
        // group AND there are siblings to move against. A single-track group
        // can never be "clustered" in any meaningful way, and showing the
        // items as disabled there is confusing (users see a grayed-out option
        // with no explanation).
        const containingTracks = model.getContainingTrackGroup(track_id) || [];
        const movingDisabled =
            model.getTrackMovable(track_id) &&
            model.isTrackInClusteredGroup(track_id) &&
            containingTracks.length > 1;

        if (model.getTrackMovable(track_id)) {
            const customMoveUp = model.getTrackOnMoveUp(track_id);
            const customMoveDown = model.getTrackOnMoveDown(track_id);
            const moveUpDisabled =
                movingDisabled || model.isTrackMoveUpDisabled(track_id);
            const moveDownDisabled =
                movingDisabled || model.isTrackMoveDownDisabled(track_id);
            $dropdown.append(
                OncoprintTrackOptionsView.$makeDropdownOption(
                    'Move up',
                    'normal',
                    moveUpDisabled,
                    function(evt) {
                        evt.stopPropagation();
                        if (customMoveUp) customMoveUp();
                        else self.moveUpCallback(track_id);
                    }
                )
            );
            $dropdown.append(
                OncoprintTrackOptionsView.$makeDropdownOption(
                    'Move down',
                    'normal',
                    moveDownDisabled,
                    function(evt) {
                        evt.stopPropagation();
                        if (customMoveDown) customMoveDown();
                        else self.moveDownCallback(track_id);
                    }
                )
            );
        }
        if (model.isTrackRemovable(track_id)) {
            $dropdown.append(
                OncoprintTrackOptionsView.$makeDropdownOption(
                    'Remove track',
                    'normal',
                    false,
                    function(evt) {
                        evt.stopPropagation();
                        self.removeCallback(track_id);
                    }
                )
            );
        }
        if (model.isTrackSortDirectionChangeable(track_id)) {
            $dropdown.append(
                OncoprintTrackOptionsView.$makeDropdownSeparator()
            );
            let $sort_inc_li: JQuery;
            let $sort_dec_li: JQuery;
            let $dont_sort_li: JQuery;
            $sort_inc_li = OncoprintTrackOptionsView.$makeDropdownOption(
                'Sort a-Z',
                model.getTrackSortDirection(track_id) === 1 ? 'bold' : 'normal',
                false,
                function(evt) {
                    evt.stopPropagation();
                    $sort_inc_li.css('font-weight', 'bold');
                    $sort_dec_li.css('font-weight', 'normal');
                    $dont_sort_li.css('font-weight', 'normal');
                    self.sortChangeCallback(track_id, 1);
                    OncoprintTrackOptionsView.renderSortArrow(
                        $sortarrow,
                        model,
                        track_id
                    );
                }
            );
            $sort_dec_li = OncoprintTrackOptionsView.$makeDropdownOption(
                'Sort Z-a',
                model.getTrackSortDirection(track_id) === -1
                    ? 'bold'
                    : 'normal',
                false,
                function(evt) {
                    evt.stopPropagation();
                    $sort_inc_li.css('font-weight', 'normal');
                    $sort_dec_li.css('font-weight', 'bold');
                    $dont_sort_li.css('font-weight', 'normal');
                    self.sortChangeCallback(track_id, -1);
                    OncoprintTrackOptionsView.renderSortArrow(
                        $sortarrow,
                        model,
                        track_id
                    );
                }
            );
            $dont_sort_li = OncoprintTrackOptionsView.$makeDropdownOption(
                "Don't sort track",
                model.getTrackSortDirection(track_id) === 0 ? 'bold' : 'normal',
                false,
                function(evt) {
                    evt.stopPropagation();
                    $sort_inc_li.css('font-weight', 'normal');
                    $sort_dec_li.css('font-weight', 'normal');
                    $dont_sort_li.css('font-weight', 'bold');
                    self.sortChangeCallback(track_id, 0);
                    OncoprintTrackOptionsView.renderSortArrow(
                        $sortarrow,
                        model,
                        track_id
                    );
                }
            );
            $dropdown.append($sort_inc_li);
            $dropdown.append($sort_dec_li);
            $dropdown.append($dont_sort_li);
        }
        if (model.isTrackExpandable(track_id)) {
            $dropdown.append(
                OncoprintTrackOptionsView.$makeDropdownOption(
                    model.getExpandButtonText(track_id),
                    'normal',
                    false,
                    function(evt) {
                        evt.stopPropagation();
                        // close the menu to discourage clicking again, as it
                        // may take a moment to finish expanding
                        self.renderAllOptions(model);
                        model.expandTrack(track_id);
                    }
                )
            );
        }
        if (model.isTrackExpanded(track_id)) {
            $dropdown.append(
                OncoprintTrackOptionsView.$makeDropdownOption(
                    'Remove expansion',
                    'normal',
                    false,
                    function(evt) {
                        evt.stopPropagation();
                        self.unexpandCallback(track_id);
                    }
                )
            );
        }
        if (model.getTrackCanShowGaps(track_id)) {
            $dropdown.append(
                OncoprintTrackOptionsView.$makeDropdownSeparator()
            );

            const $show_gaps_percent_opt = OncoprintTrackOptionsView.$makeDropdownOption(
                model.getTrackShowGaps(track_id) ===
                    GAP_MODE_ENUM.SHOW_GAPS_PERCENT
                    ? 'Hide gaps (w/%)'
                    : 'Show Gaps (w/%)',
                model.getTrackShowGaps(track_id) ===
                    GAP_MODE_ENUM.SHOW_GAPS_PERCENT
                    ? 'bold'
                    : 'normal',
                false,
                function(evt) {
                    evt.stopPropagation();
                    $show_gaps_opt.css('font-weight', 'bold');
                    const mode: GAP_MODE_ENUM = [
                        GAP_MODE_ENUM.SHOW_GAPS_PERCENT,
                    ].includes(model.getTrackShowGaps(track_id))
                        ? GAP_MODE_ENUM.HIDE_GAPS
                        : GAP_MODE_ENUM.SHOW_GAPS_PERCENT;
                    self.showGapsCallback(track_id, mode);
                }
            );

            const $show_gaps_opt = OncoprintTrackOptionsView.$makeDropdownOption(
                model.getTrackShowGaps(track_id) === GAP_MODE_ENUM.SHOW_GAPS
                    ? 'Hide gaps'
                    : 'Show Gaps',
                model.getTrackShowGaps(track_id) === GAP_MODE_ENUM.SHOW_GAPS
                    ? 'bold'
                    : 'normal',
                false,
                function(evt) {
                    evt.stopPropagation();
                    $show_gaps_opt.css('font-weight', 'bold');
                    const mode: GAP_MODE_ENUM = [
                        GAP_MODE_ENUM.SHOW_GAPS,
                    ].includes(model.getTrackShowGaps(track_id))
                        ? GAP_MODE_ENUM.HIDE_GAPS
                        : GAP_MODE_ENUM.SHOW_GAPS;
                    self.showGapsCallback(track_id, mode);
                }
            );

            $dropdown.append($show_gaps_opt);
            $dropdown.append($show_gaps_percent_opt);
        }
        // Add custom options
        const custom_options = model.getTrackCustomOptions(track_id);
        if (custom_options && custom_options.length > 0) {
            for (var i = 0; i < custom_options.length; i++) {
                (function() {
                    // wrapped in function to prevent scope issues
                    var option = custom_options[i];
                    if (option.separator) {
                        $dropdown.append(
                            OncoprintTrackOptionsView.$makeDropdownSeparator()
                        );
                    } else if (option.children && option.children.length) {
                        $dropdown.append(
                            OncoprintTrackOptionsView.$makeDropdownSubmenuOption(
                                option.label || '',
                                option.children,
                                track_id,
                                () => self.hideTrackMenu(track_id)
                            )
                        );
                    } else {
                        $dropdown.append(
                            OncoprintTrackOptionsView.$makeDropdownOption(
                                option.label || '',
                                option.weight || 'normal',
                                option.disabled,
                                option.onClick &&
                                    function(evt) {
                                        evt.stopPropagation();
                                        option.onClick(track_id);
                                    }
                            )
                        );
                    }
                })();
            }
        }

        if ($dropdown.is(':empty')) {
            // if no options, then delete elements
            $div.remove();
            $dropdown.remove();
        }
    }

    public enableInteraction() {
        this.interaction_disabled = false;
    }
    public disableInteraction() {
        this.interaction_disabled = true;
    }
    public suppressRendering() {
        this.rendering_suppressed = true;
    }
    public releaseRendering(
        model: OncoprintModel,
        getCellViewHeight: () => number
    ) {
        this.rendering_suppressed = false;
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
        this.scroll(model.getVertScroll());
    }
    public setScroll(model: OncoprintModel) {
        this.setVertScroll(model);
    }
    public setHorzScroll(model: OncoprintModel) {}
    public setVertScroll(model: OncoprintModel) {
        this.scroll(model.getVertScroll());
    }
    public setZoom(model: OncoprintModel, getCellViewHeight: () => number) {
        this.setVertZoom(model, getCellViewHeight);
    }
    public setVertZoom(model: OncoprintModel, getCellViewHeight: () => number) {
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
    }
    public setTrackGroupHeader(
        model: OncoprintModel,
        getCellViewHeight: () => number
    ) {
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
    }
    public sort(model: OncoprintModel, getCellViewHeight: () => number) {
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
    }
    public setViewport(model: OncoprintModel, getCellViewHeight: () => number) {
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
        this.scroll(model.getVertScroll());
    }
    public getWidth() {
        if (this.$buttons_ctr.is(':empty')) {
            return 0;
        } else {
            return 18 + this.img_size;
        }
    }
    public setTrackShowGaps(
        model: OncoprintModel,
        getCellViewHeight: () => number
    ) {
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
    }
    public addTracks(model: OncoprintModel, getCellViewHeight: () => number) {
        this.setTrackShowGaps(model, getCellViewHeight);
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
    }
    public moveTrack(model: OncoprintModel, getCellViewHeight: () => number) {
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
    }
    public setTrackGroupOrder(model: OncoprintModel) {
        this.renderAllOptions(model);
    }
    public setSortConfig(model: OncoprintModel) {
        this.renderAllOptions(model);
    }
    public removeTrack(
        model: OncoprintModel,
        track_id: TrackId,
        getCellViewHeight: () => number
    ) {
        delete this.track_options_$elts[track_id];
        this.renderAllOptions(model);
        this.resize(model, getCellViewHeight);
    }
    public destroy() {
        $(document).off('click', this.clickHandler);
        $(document).off(CLOSE_MENUS_EVENT);
    }
    public setTrackCustomOptions(model: OncoprintModel) {
        this.renderAllOptions(model);
    }
    public setTrackMovable(model: OncoprintModel) {
        this.renderAllOptions(model);
    }
}