Source: plot/core/PlotlyRoot.js

import Plotly from 'plotly.js-dist';

import { UiElement } from '../../ui/UiElement.js'
import { PlotlyExtensions } from './PlotlyExtensions.js';
import { PlotlyPlotModeButton } from "../buttons/PlotlyPlotModeButton.js";
import { PlotlyCustomModeBar } from "../buttons/PlotlyCustomModeBar.js";
export { PlotlyRoot }

/**
 * Root class for plotly inheritance.
 * @extends UiElement
 */
class PlotlyRoot extends UiElement {

    /**
     * Create a new root plot object.
     * @param {HTMLElement} graphDiv - Plotly graphDiv configuration.
     * @param {Array} [data=[]] - Plotly data configuration.
     * @param {Object} [layout={}] - Plotly layout configuration.
     * @param {Object} [config={}] - Plotly config configuration.
     */
    constructor(graphDiv, data = [], layout = {}, config = {}) {
        super(graphDiv);

        this.graphDiv = this.getElement();
        this.data = data;
        this.layout = layout;
        this.config = config;

        const defaultButtonOrder = this.config.modeBarButtonsToAdd;

        this.extensions = new PlotlyExtensions(this.graphDiv, this.data, this.layout, this.config);
        this._modifyModeBar(defaultButtonOrder);
    }

    _modifyModeBar(defaultButtonOrder) {
        const customModeBar = new PlotlyCustomModeBar(this.graphDiv, this.data, this.layout, this.config);

        if (customModeBar.isButtonRequested('Change Mode')) {
            const plotModeButton = new PlotlyPlotModeButton(this.data);
            customModeBar.registerCustomButtons([plotModeButton.button])
        }

        customModeBar.applyButtonOrder(defaultButtonOrder);
    }

    /**
     * Dispose of the plot by purging Plotly and calling the base class's dispose method.
     */
    dispose() {
        Plotly.purge(this.graphDiv);
        super.dispose();
    }
}