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

Bắt đầu từ component React Plot được cung cấp, đặc biệt là dữ liệu scattergl, handler onSelected, các mảng selection, các cập nhật fetchMore và các prop dataRevision/revision. Tái tạo selection sau khi thêm các batch gồm 1.000 điểm và kiểm tra xem số lượng điểm được chọn cùng các tọa độ được vẽ có vẫn nhất quán hay không; hoàn thành khi tất cả các điểm được chọn đều được giữ lại và plot ban đầu không thay đổi ngoài dự kiến.