From 529c3390b3afbeb4ed0d7cb00709d2083a3635b2 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sun, 26 Jul 2026 20:34:08 +0200
Subject: [PATCH] #139 fix deselection in multi-trace charts

---
 src/components/Chart.vue      | 15 +++++++++------
 src/lib/chartHelper.js        | 13 ++++++++++++-
 tests/lib/chartHelper.spec.js | 13 +++++++++++++
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/components/Chart.vue b/src/components/Chart.vue
index 7550530..128d7c8 100644
--- a/src/components/Chart.vue
+++ b/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.dataSources,
-          selectionEvent.points.map(point => point.pointIndex)
-        )
+        this.selectedItems = this.getSelectedData()
       }
     })
     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)
+      )
     }
   }
 }
diff --git a/src/lib/chartHelper.js b/src/lib/chartHelper.js
index 7f6ca7c..2dd5c1c 100644
--- a/src/lib/chartHelper.js
+++ b/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
 }
diff --git a/tests/lib/chartHelper.spec.js b/tests/lib/chartHelper.spec.js
index a62e27a..fadfb92 100644
--- a/tests/lib/chartHelper.spec.js
+++ b/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: [