Source: plot/templates/PlotlyDemoFilterPlot.js

import { merge } from "lodash";
import { PlotlyVefPlot } from './PlotlyVefPlot.js';
import { LodashCustomizer } from '../utils.js';
export { PlotlyDemoFilterPlot };


/**
 * Represents a plot configuration using Plotly with additional features for filtering.
 * @extends PlotlyVefPlot
 */
class PlotlyDemoFilterPlot extends PlotlyVefPlot {

    /**
     * Constructs a new plotly demo plot object.
     * @param {HTMLElement} graphDiv - The HTML element representing the graph container.
     * @param {Array} [data=[]] - The data to be plotted.
     * @param {Object} [layout={}] - The layout configuration for the plot.
     * @param {Object} [config={}] - The configuration options for the plot.
     */
    constructor(graphDiv, data = [], layout = {}, config = {}) {
        const dataFilterVefDefault = [];
        const layoutFilterVefDefault = {};
        const configFilterVefDefault = {};

        // Merge provided data, layout, and config with defaults
        const dataPreMerged = merge(dataFilterVefDefault, data);
        const layoutPreMerged = merge(layoutFilterVefDefault, layout);
        const configPreMerged = merge(configFilterVefDefault, config, LodashCustomizer.concatArrays);

        super(graphDiv, dataPreMerged, layoutPreMerged, configPreMerged);

        this.graphDiv.classList.add("vef-plot-filter");
    }

    /**
     * Filter the data based on the selected points inside the plot.
     */
    filterData() {
        this.getElement().on('plotly_selected', function (eventData) {
            if (!eventData) return;
            var x = [];
            var y = [];

            eventData.points.forEach(function (pt) {
                x.push(pt.x);
                y.push(pt.y);
            });
            console.log('selected', x, y);
        });
        this.getElement().on('plotly_deselect', function () {
            console.log('deselected');
        });

    }
}