From 1a8d8e2eb0a7c20ccb51b863b2d47a0aa7dd81e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zbigniew=20Zag=C3=B3rski?=
 <1507542+zbigg@users.noreply.github.com>
Date: Mon, 22 Apr 2024 09:53:31 +0200
Subject: [PATCH] TimeSeriesWidget: fix echarts props update, to keep state of
 control when clicking (#865)

---
 CHANGELOG.md                                       |  5 +++++
 .../custom-components/echarts-for-react/index.js   | 14 ++++++++++++++
 .../components/TimeSeriesChart.js                  |  2 +-
 .../hooks/useTimeSeriesInteractivity.js            | 13 ++++++++-----
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8a11c264..c3cdd6c43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Not released
 
+- TimeSeriesWidget: fix echarts props update, to keep state of control when clicking [#865](https://github.com/CartoDB/carto-react/pull/865)
 - TimeSeriesWidget: support removing series in mounted widget [#863](https://github.com/CartoDB/carto-react/pull/863)
 
 ## 3.0.0
@@ -12,6 +13,10 @@
 
 ## 2.5
 
+### 2.5.3 (2024-04-18)
+
+- TimeSeriesWidget: support removing series in mounted widget [#863](https://github.com/CartoDB/carto-react/pull/863)
+
 ### 2.5.2 (2024-04-10)
 
 -  configurable timeseries y axis [#861](https://github.com/CartoDB/carto-react/pull/861)
diff --git a/packages/react-ui/src/custom-components/echarts-for-react/index.js b/packages/react-ui/src/custom-components/echarts-for-react/index.js
index 81db48af2..19e77faea 100644
--- a/packages/react-ui/src/custom-components/echarts-for-react/index.js
+++ b/packages/react-ui/src/custom-components/echarts-for-react/index.js
@@ -49,6 +49,20 @@ export default class ReactEcharts extends _ReactEcharts {
     }
   }
 
+  updateEChartsOption() {
+    const { option, lazyUpdate, showLoading, loadingOption = null } = this.props;
+    const echartInstance = this.getEchartsInstance();
+
+    echartInstance.setOption(option, { replaceMerge: ['series'], lazyUpdate });
+
+    if (showLoading) {
+      echartInstance.showLoading(loadingOption);
+    } else {
+      echartInstance.hideLoading();
+    }
+    return echartInstance;
+  }
+
   offEvents(instance, events) {
     if (!events) return;
     // loop and off
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
index b276e6594..085b81969 100644
--- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
+++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
@@ -197,6 +197,7 @@ export default function TimeSeriesChart({
             : theme.palette.action.disabledBackground;
 
         return {
+          id: String(i),
           name,
           markLine: i === 0 ? markLine : undefined,
           markArea: i === 0 ? markArea : undefined,
@@ -293,7 +294,6 @@ export default function TimeSeriesChart({
   return (
     <ReactEcharts
       option={options}
-      notMerge
       onEvents={onEvents}
       onChartReady={onChartReady}
       style={{ height }}
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js
index f32cd8b95..a458fdf5e 100644
--- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js
+++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js
@@ -6,6 +6,9 @@ import { findItemIndexByTime } from '../utils/utilities';
 const events = {};
 let initialTimeWindow = null;
 
+// we identify series by their index and stringify it
+const seriesFinder = { seriesId: '0' };
+
 export default function useTimeSeriesInteractivity({
   echartsInstance,
   data,
@@ -28,7 +31,7 @@ export default function useTimeSeriesInteractivity({
   const updateTimelineByCoordinate = useCallback(
     (params) => {
       if (echartsInstance) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -87,7 +90,7 @@ export default function useTimeSeriesInteractivity({
 
       // Move markArea
       if (timeWindow.length === 2) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -101,7 +104,7 @@ export default function useTimeSeriesInteractivity({
 
       if (echartsInstance) {
         setIsMarkAreaSelected(true);
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -125,7 +128,7 @@ export default function useTimeSeriesInteractivity({
       }
 
       if (isMarkAreaSelected && echartsInstance) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -164,7 +167,7 @@ export default function useTimeSeriesInteractivity({
       }
 
       if (isMarkAreaMoving && echartsInstance) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);