diff --git a/src/components/Chart.vue b/src/components/Chart.vue index 7a15e4e..7550530 100644 --- a/src/components/Chart.vue +++ b/src/components/Chart.vue @@ -33,9 +33,9 @@ @@ -95,7 +95,7 @@ export default { }, resizeObserver: null, useResizeHandler: this.$store.state.isWorkspaceVisible, - selectedItem: null + selectedItems: null } }, computed: { @@ -105,6 +105,7 @@ 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) { @@ -151,11 +152,14 @@ export default { this.$refs.plotlyEditor?.$el?.querySelector('.js-plotly-plot') plotlyDiv?.on('plotly_selected', selectionEvent => { if (selectionEvent) { - this.selectedItem = 1 + this.selectedItems = chartHelper.getRowsByIndexFromDataSources( + this.dataSources, + selectionEvent.points.map(point => point.pointIndex) + ) } }) plotlyDiv?.on('plotly_deselect', () => { - this.selectedItem = null + this.selectedItems = null }) }, activated() { @@ -179,10 +183,8 @@ export default { // TODO: check changes and enable Save button if needed }, update(data, layout, frames) { - if (layout?.selections?.length > 0) { - layout.selections = [] - data.forEach(dataItem => delete dataItem.selectedpoints) - } + chartHelper.clearSelection(data, layout) + this.state = { data, layout, frames } this.$emit('update') }, diff --git a/src/components/DataView.vue b/src/components/DataView.vue index f18ef21..3e23b85 100644 --- a/src/components/DataView.vue +++ b/src/components/DataView.vue @@ -58,7 +58,7 @@ + dataSourceColumns.reduce((result, columnName) => { + result[columnName] = dataSources[columnName][rowIndex] + return result + }, {}) + ) +} + +export function clearSelection(data, layout) { + if (layout?.selections?.length > 0) { + layout.selections = [] + data.forEach(dataItem => delete dataItem.selectedpoints) + } +} + export function getOptionsForSave(state, dataSources) { // we don't need to save the data, only settings // so we modify state.data using dereference @@ -22,6 +43,9 @@ export function getOptionsForSave(state, dataSources) { emptySources[key] = [] } dereference.default(stateCopy.data, emptySources) + + // Also, we don't need to save selections + clearSelection(stateCopy.data, stateCopy.layout) return stateCopy } @@ -72,5 +96,7 @@ export default { getOptionsForSave, getImageDataUrl, getHtml, - getChartData + getChartData, + getRowsByIndexFromDataSources, + clearSelection } diff --git a/src/lib/storedInquiries/_migrations.js b/src/lib/storedInquiries/_migrations.js index be788f2..ccd54ca 100644 --- a/src/lib/storedInquiries/_migrations.js +++ b/src/lib/storedInquiries/_migrations.js @@ -1,3 +1,5 @@ +import { clearSelection } from '@/lib/chartHelper' + export default { _migrate(installedVersion, inquiries) { if (installedVersion < 2) { @@ -28,6 +30,14 @@ export default { }) } + if (installedVersion < 5) { + inquiries.forEach(inquiry => { + if (inquiry.viewType === 'chart') { + clearSelection(inquiry.viewOptions.data, inquiry.viewOptions.layout) + } + }) + } + return inquiries } } diff --git a/src/lib/storedInquiries/index.js b/src/lib/storedInquiries/index.js index 508e986..5bfcda2 100644 --- a/src/lib/storedInquiries/index.js +++ b/src/lib/storedInquiries/index.js @@ -5,7 +5,7 @@ import migration from './_migrations' const migrate = migration._migrate const myInquiriesKey = 'myInquiries' -const latestVersion = 4 +const latestVersion = 5 export default { version: latestVersion,