Retrieve the points contained in a selection with Plotly.js

I'm trying to check if the points in the chart are contained in predefined selections, so I've add a selection box with the proper configuration of the layout section:

var N = 100;

function randomArray() {
  var output = new Array(N);
  for (var i = 0; i < N; i++) {
    output[i] = Math.random();
  }
  return output;
}

var myPlot = document.getElementById("plotly-graph");

var settings = [
  {
    mode: "markers",
    x: randomArray(),
    y: randomArray()
  }
];

var layout = {
  selections: [
    {
      type: "rect",
      x0: 0.1,
      x1: 0.2,
      xref: "x",
      y0: 0.1,
      y1: 0.2,
      yref: "y"
    }
  ]
};

var config = {};

Plotly.react(myPlot, settings, layout, config);

The problem is that the array of selected points is empty until I manually add another selection (using manual interaction with the selection tool from the taskbar).
After that, the points within all selections are correctly included in the array of selected points.
I would like to find a way to trigger this selection event programmatically, without having to use a manual interaction, is this possible? Any suggestions on how to solve this problem?

Thank you!

How about just getting points in your known rectangle from the point array that you already know?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var N = 100;
function randomArray() {
var output = new Array(N);
for (var i = 0; i < N; i++) {
output[i] = Math.random();
}
return output;
}
var myPlot = document.getElementById("plotly-graph");
var settings = [
{
mode: "markers",
x: randomArray(),
y: randomArray()
}
];
var layout = {};
var config = {};
Plotly.newPlot(myPlot, settings, layout, config);
function getPointsInRectangle(rect) {
var xData = settings[0].x;
var yData = settings[0].y;
var selectedPoints = [];
for (var i = 0; i < xData.length; i++) {
if (
xData[i] >= rect.x0 &&
xData[i] <= rect.x1 &&
yData[i] >= rect.y0 &&
yData[i] <= rect.y1
) {
selectedPoints.push({ x: xData[i], y: yData[i] });
}
}
return selectedPoints;
}
var rect = {
x0: 0.1,
x1: 0.2,
y0: 0.1,
y1: 0.2
};
var selectedPoints = getPointsInRectangle(rect);
console.log(selectedPoints);

<!-- language: lang-html -->

<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div style="width: 800px; height: 500px;" id="plotly-graph"></div>

<!-- end snippet -->

This should work :

/* all the code from your question is here */

myPlot.on("plotly_selected", function(eventData) {
  var selectedPoints = eventData.points;
  console.log(selectedPoints);
});

// Programmatically trigger the selection event
var eventData = {points: selectedPoints};
myPlot.emit('plotly_selected', eventData);

I logged all the data emitted by the events in the plotly library, which should be as follows:

plotly_afterexport
plotly_afterplot
plotly_animated
plotly_animating
plotly_animatingframe
plotly_animationinterrupted
plotly_autosize
plotly_beforeexport
plotly_buttonclicked
plotly_click
plotly_clickannotation
plotly_deselect
plotly_doubleclick
plotly_framework
plotly_hover
plotly_react
plotly_redraw
plotly_relayout
plotly_relayouting
plotly_restyle
plotly_selected
plotly_selecting
plotly_sliderchange
plotly_sliderend
plotly_sliderstart
plotly_transitioned
plotly_transitioning
plotly_transitioninterrupted
plotly_unhover
plotly_update
plotly_webglcontextlost

Exploring the event data of the plotly_react event, which I use to draw and update the chart, I found the selectedpoints inside the data object:

{
"data": [
{
"x": [
0.01,
...,
100
],
"y": [
0.0006,
...,
0
],
"mode": "markers",
"selectedpoints": [
4182,
...,
4365
]
}
],
"layout": {
"showlegend": false,
"dragmode": "select",
"shapes": [
{
"editable": true,
"xref": "x",
"yref": "y",
"layer": "above",
"opacity": 0.5,
"line": {
"color": "#444",
"width": 4,
"dash": "solid"
},
"fillcolor": "green",
"fillrule": "evenodd",
"type": "rect",
"x0": 39.021639200761186,
"y0": 0.4910903426791277,
"x1": 46.663120456707894,
"y1": 0.3875887850467289
}
],
"selections": [
{
"editable": true,
"xref": "x",
"yref": "y",
"layer": "above",
"opacity": 0.5,
"line": {
"color": "#444",
"width": 4,
"dash": "solid"
},
"fillcolor": "green",
"fillrule": "evenodd",
"type": "rect",
"x0": 39.021639200761186,
"y0": 0.4910903426791277,
"x1": 46.663120456707894,
"y1": 0.3875887850467289
}
],
"xaxis": {
"type": "linear",
"range": [
-5.809272121788773,
105.81927212178877
],
"autorange": true
},
"yaxis": {
"type": "linear",
"range": [
-1.1214953271028036,
1.1214953271028036
],
"autorange": true
},
"autosize": true
}
}

So in order to grab the selected points of the chart, using the built in selection function, is it sufficient to iterate trough each data objects (if more than a single trace is present) and merging the relative selectedpoints in an array of all selected points, e.g. wholeSelectedPoints.

var wholeSelectedPoints = [];
plotly_react_eventData['data'].forEach(element => {
wholeSelectedPoints = [...wholeSelectedPoints, ...element['selectedpoints']]
});
console.log(wholeSelectedPoints);
// [object Array] (4)
// [4182,4365,10,20]