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}
    />

從提供的 React Plot 元件開始，特別檢查 scattergl 資料、onSelected 處理器、選取陣列、fetchMore 更新以及 dataRevision/revision props。在新增每批 1,000 個點後重現選取，並檢查選取的點數和繪製的座標是否保持一致；完成的標準是所有選取的點都被保留，且原始圖表沒有發生非預期的變化。