From 9f02ff656d63e537c06822657dcfc2ff46f70e67 Mon Sep 17 00:00:00 2001
From: Stephen Liu <750188453@qq.com>
Date: Wed, 8 Jun 2022 17:06:24 +0800
Subject: [PATCH] fix(plugin-chart-echarts): [feature-parity] apply button of
 annotation layer doesn't work as expected (#19761)

* fix(plugin-chart-echarts): [feature-parity] apply button of annotation layer does't work

* fix: lint

* fix: test
---
 .../src/sections/annotationsAndLayers.tsx     |  2 +
 .../src/MixedTimeseries/controlPanel.tsx      | 19 +----
 .../src/MixedTimeseries/transformProps.ts     |  3 +-
 .../src/Timeseries/transformProps.ts          |  5 +-
 .../test/Timeseries/transformProps.test.ts    | 84 +++++++++----------
 5 files changed, 48 insertions(+), 65 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/sections/annotationsAndLayers.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/sections/annotationsAndLayers.tsx
index 9fffbb578e4d..6db4abad683a 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/sections/annotationsAndLayers.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/sections/annotationsAndLayers.tsx
@@ -24,6 +24,7 @@ export const annotationLayers = [];
 export const annotationsAndLayersControls: ControlPanelSectionConfig = {
   label: t('Annotations and Layers'),
   expanded: false,
+  tabOverride: 'data',
   controlSetRows: [
     [
       {
@@ -33,6 +34,7 @@ export const annotationsAndLayersControls: ControlPanelSectionConfig = {
           label: '',
           default: annotationLayers,
           description: t('Annotation Layers'),
+          renderTrigger: true,
         },
       },
     ],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
index e39c02366169..8566fa599921 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -35,7 +35,6 @@ import { legendSection, richTooltipSection, xAxisControl } from '../controls';
 
 const {
   area,
-  annotationLayers,
   logAxis,
   markerEnabled,
   markerSize,
@@ -289,23 +288,7 @@ const config: ControlPanelConfig = {
     createAdvancedAnalyticsSection(t('Advanced analytics Query A'), ''),
     createQuerySection(t('Query B'), '_b'),
     createAdvancedAnalyticsSection(t('Advanced analytics Query B'), '_b'),
-    {
-      label: t('Annotations and Layers'),
-      expanded: false,
-      controlSetRows: [
-        [
-          {
-            name: 'annotation_layers',
-            config: {
-              type: 'AnnotationLayerControl',
-              label: '',
-              default: annotationLayers,
-              description: t('Annotation Layers'),
-            },
-          },
-        ],
-      ],
-    },
+    sections.annotationsAndLayersControls,
     sections.titleControls,
     {
       label: t('Chart Options'),
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
index 10dd33ff1ac4..139dcd9af70c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -81,9 +81,8 @@ export default function transformProps(
     filterState,
     datasource,
     theme,
+    annotationData = {},
   } = chartProps;
-  const { annotation_data: annotationData_ } = queriesData[0];
-  const annotationData = annotationData_ || {};
   const { verboseMap = {} } = datasource;
   const data1 = (queriesData[0].data || []) as TimeseriesDataRecord[];
   const data2 = (queriesData[1].data || []) as TimeseriesDataRecord[];
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
index 8b91308b2046..db142c8aa287 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -86,13 +86,12 @@ export default function transformProps(
     queriesData,
     datasource,
     theme,
+    annotationData = {},
   } = chartProps;
   const { verboseMap = {} } = datasource;
   const [queryData] = queriesData;
-  const { annotation_data: annotationData_, data = [] } =
-    queryData as TimeseriesChartDataResponseResult;
+  const { data = [] } = queryData as TimeseriesChartDataResponseResult;
   const dataTypes = getColtypesMapping(queryData);
-  const annotationData = annotationData_ || {};
 
   const {
     area,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts
index 3fbe72e59ad1..172ce2420421 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts
@@ -180,54 +180,54 @@ describe('EchartsTimeseries transformProps', () => {
         ...formData,
         annotationLayers: [event, interval, timeseries],
       },
-      queriesData: [
-        {
-          ...queriesData[0],
-          annotation_data: {
-            'My Event': {
-              columns: [
-                'start_dttm',
-                'end_dttm',
-                'short_descr',
-                'long_descr',
-                'json_metadata',
-              ],
-              records: [
-                {
-                  start_dttm: 0,
-                  end_dttm: 1000,
-                  short_descr: '',
-                  long_descr: '',
-                  json_metadata: null,
-                },
-              ],
+      annotationData: {
+        'My Event': {
+          columns: [
+            'start_dttm',
+            'end_dttm',
+            'short_descr',
+            'long_descr',
+            'json_metadata',
+          ],
+          records: [
+            {
+              start_dttm: 0,
+              end_dttm: 1000,
+              short_descr: '',
+              long_descr: '',
+              json_metadata: null,
             },
-            'My Interval': {
-              columns: ['start', 'end', 'title'],
-              records: [
-                {
-                  start: 2000,
-                  end: 3000,
-                  title: 'My Title',
-                },
-              ],
+          ],
+        },
+        'My Interval': {
+          columns: ['start', 'end', 'title'],
+          records: [
+            {
+              start: 2000,
+              end: 3000,
+              title: 'My Title',
             },
-            'My Timeseries': [
+          ],
+        },
+        'My Timeseries': [
+          {
+            key: 'My Line',
+            values: [
+              {
+                x: 10000,
+                y: 11000,
+              },
               {
-                key: 'My Line',
-                values: [
-                  {
-                    x: 10000,
-                    y: 11000,
-                  },
-                  {
-                    x: 20000,
-                    y: 21000,
-                  },
-                ],
+                x: 20000,
+                y: 21000,
               },
             ],
           },
+        ],
+      },
+      queriesData: [
+        {
+          ...queriesData[0],
         },
       ],
     });