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

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,
         },
       },
     ],

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'),
-    {
+    sections.annotationsAndLayersControls,
-      label: t('Annotations and Layers'),
-      expanded: false,
-      controlSetRows: [
-        [
-          {
-            name: 'annotation_layers',
-            config: {
-              type: 'AnnotationLayerControl',
-              label: '',
-              default: annotationLayers,
-              description: t('Annotation Layers'),
-            },
-          },
-        ],
-      ],
-    },
     sections.titleControls,
     {
       label: t('Chart Options'),

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[];

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 = [] } =
+  const { data = [] } = queryData as TimeseriesChartDataResponseResult;
-    queryData as TimeseriesChartDataResponseResult;
   const dataTypes = getColtypesMapping(queryData);
-  const annotationData = annotationData_ || {};
 
   const {
     area,

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/transformProps.test.ts

@@ -180,54 +180,54 @@ describe('EchartsTimeseries transformProps', () => {
         ...formData,
         annotationLayers: [event, interval, timeseries],
       },
-      queriesData: [
+      annotationData: {
-        {
+        'My Event': {
-          ...queriesData[0],
+          columns: [
-          annotation_data: {
+            'start_dttm',
-            'My Event': {
+            'end_dttm',
-              columns: [
+            'short_descr',
-                'start_dttm',
+            'long_descr',
-                'end_dttm',
+            'json_metadata',
-                'short_descr',
+          ],
-                'long_descr',
+          records: [
-                'json_metadata',
+            {
-              ],
+              start_dttm: 0,
-              records: [
+              end_dttm: 1000,
-                {
+              short_descr: '',
-                  start_dttm: 0,
+              long_descr: '',
-                  end_dttm: 1000,
+              json_metadata: null,
-                  short_descr: '',
-                  long_descr: '',
-                  json_metadata: null,
-                },
-              ],
             },
-            'My Interval': {
+          ],
-              columns: ['start', 'end', 'title'],
+        },
-              records: [
+        'My Interval': {
-                {
+          columns: ['start', 'end', 'title'],
-                  start: 2000,
+          records: [
-                  end: 3000,
+            {
-                  title: 'My Title',
+              start: 2000,
-                },
+              end: 3000,
-              ],
+              title: 'My Title',
             },
-            'My Timeseries': [
+          ],
+        },
+        'My Timeseries': [
+          {
+            key: 'My Line',
+            values: [
               {
-                key: 'My Line',
+                x: 10000,
-                values: [
+                y: 11000,
-                  {
+              },
-                    x: 10000,
+              {
-                    y: 11000,
+                x: 20000,
-                  },
+                y: 21000,
-                  {
-                    x: 20000,
-                    y: 21000,
-                  },
-                ],
               },
             ],
           },
+        ],
+      },
+      queriesData: [
+        {
+          ...queriesData[0],
         },
       ],
     });