#139 fix deselection in multi-trace charts

src/components/Chart.vue

@@ -105,10 +105,10 @@ export default {
   },
   watch: {
     dataSources() {
-      chartHelper.clearSelection(this.state.data, this.state.layout)
       // we need to update state.data in order to update the graph
       // https://github.com/plotly/react-chart-editor/issues/948
       if (this.dataSources) {
+        chartHelper.clearSelection(this.state.data, this.state.layout)
         dereference.default(this.state.data, this.dataSources)
         this.updatePlotly()
       }
@@ -152,14 +152,11 @@ export default {
       this.$refs.plotlyEditor?.$el?.querySelector('.js-plotly-plot')
     plotlyDiv?.on('plotly_selected', selectionEvent => {
       if (selectionEvent) {
-        this.selectedItems = chartHelper.getRowsByIndexFromDataSources(
+        this.selectedItems = this.getSelectedData()
-          this.dataSources,
-          selectionEvent.points.map(point => point.pointIndex)
-        )
       }
     })
     plotlyDiv?.on('plotly_deselect', () => {
-      this.selectedItems = null
+      this.selectedItems = this.getSelectedData()
     })
   },
   activated() {
@@ -219,6 +216,12 @@ export default {
     },
     prepareCopy(type = 'png') {
       return chartHelper.getImageDataUrl(this.$refs.plotlyEditor.$el, type)
+    },
+    getSelectedData() {
+      return chartHelper.getRowsByIndexFromDataSources(
+        this.dataSources,
+        chartHelper.getSelectedPointsIndexes(this.state.data)
+      )
     }
   }
 }

src/lib/chartHelper.js

@@ -13,6 +13,16 @@ export function getOptionsFromDataSources(dataSources) {
   }))
 }
 
+export function getSelectedPointsIndexes(stateData) {
+  if (!stateData) {
+    return []
+  }
+
+  return Array.from(
+    new Set(stateData.flatMap(data => data.selectedpoints || []))
+  )
+}
+
 export function getRowsByIndexFromDataSources(dataSources, rowIndexes) {
   if (!dataSources) {
     return []
@@ -98,5 +108,6 @@ export default {
   getHtml,
   getChartData,
   getRowsByIndexFromDataSources,
-  clearSelection
+  clearSelection,
+  getSelectedPointsIndexes
 }

tests/lib/chartHelper.spec.js

@@ -21,6 +21,19 @@ describe('chartHelper.js', () => {
     ])
   })
 
+  it('getSelectedPointsIndexes returns unique selected point indexes', () => {
+    const stateData = [
+      { selectedpoints: [1, 2, 3] },
+      { selectedpoints: [3, 4] },
+      { selectedpoints: [] },
+      {}
+    ]
+
+    const indexes = chartHelper.getSelectedPointsIndexes(stateData)
+
+    expect(indexes).to.eql([1, 2, 3, 4])
+  })
+
   it('getOptionsForSave', () => {
     const state = {
       data: [