Multiple issues with Scatter plot - Selection misses points, data changed

We have a Scatter plot, in which we plot points in the range of 1000. Meaning first 1000 points are plotted, then we use Apollo GQL client's fetchmore to get the next 1000, and so on. As we get the new data, we add it to the older data to re-render the plot. We use a box selection to select certain points, there is a selection event handler which then copies references to the selected points into an array, like 'ids'. Now we use these ids to reference the selected points in the original, as in create a new array of just the selected points as an additional range, and provide it to the same plot. However we use a different color, hence giving an illusion of highlighting the selected points.

This issues are:

1. Sometimes Plotly doesn't select all the points, meaning you can check the data.length is lesser even when you select all the points.
2. Sometimes the original plotted points go for a toss, as in the plotting changes after the selection ends. We use React state management, and the data manipulation seems to be alright.

Any idea as to what we may be doing wrong?

// Plotdata is the data to be plotted which is an object with the data as value (array) and we pass the names or x and y arrays to be picked from this object as props
// Plotdata also has ids for the data, which we need to associate with the points
// The second range, with selection[0], selection[1], is again an array with 2 arrays as the selected x and y range, created by onSelect event handler

<Plot
      style={{
        border: '1px transparent',
      }}
      data={[
        {
          x: plotData[x.entity],
          y: plotData[y.entity],
          ids: plotData['ids'],
          name: 'Data',
          type: 'scattergl',
          mode: 'markers+lines',
          marker: {
            color: theme.palette.common.blue,
          },
        },
        // Secoond range, we make this by the ids collected in onSelected
        {
          x: selection[0],
          y: selection[1],
          name: 'Selected',
          type: 'scatter',
          mode: 'markers',
          marker: {
            size: 10,
            color: 'red',
            symbol: 'square-open',
            opacity: 1,
          },
        },
      ]}
      layout={{
        dragmode: 'select',
        height: 550,

        datarevision: dataRevision,
        xaxis: {
          title: {
            text: x.label,
          },
          titlefont: {
            family: 'Raleway',
            size: 13,
          },
          tickfont: {
            size: 11,
            family: 'Raleway',
          },
          linecolor: theme.palette.common.grey,
          linewidth: 1,
          mirror: true,
        },
        yaxis: {
          title: y.label,
          titlefont: {
            family: 'Raleway',
            size: 13,
          },
          size: 16,
          tickfont: {
            size: 11,
            family: 'Raleway',
          },
          tickangle: 270,
          linecolor: theme.palette.common.grey,
          linewidth: 1,
          mirror: true,
          autoMargin: true,
        },
        margin: getMargin(key, matchesXS, matchesMD, matchesLG),
        legend: {
          x: 0.9,
          y: 1.2,
        },
      }}
      config={{
        responsive: true,
      }}
      revision={dataRevision}
      onSelected={onSelect || null}
    />

Beginne mit der bereitgestellten React Plot-Komponente, insbesondere mit den scattergl-Daten, dem onSelected-Handler, den Auswahl-Arrays, den fetchMore-Aktualisierungen und den dataRevision/revision-Props. Stelle die Auswahl nach dem Hinzufügen von Stapeln mit jeweils 1.000 Punkten wieder her und prüfe, ob die Anzahl der ausgewählten Punkte und die geplotteten Koordinaten konsistent bleiben; als abgeschlossen gilt dies, wenn alle ausgewählten Punkte beibehalten werden und sich der ursprüngliche Plot nicht unerwartet ändert.