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,10 +180,7 @@ describe('EchartsTimeseries transformProps', () => {
         ...formData,
         annotationLayers: [event, interval, timeseries],
       },
-      queriesData: [
+      annotationData: {
-        {
-          ...queriesData[0],
-          annotation_data: {
         'My Event': {
           columns: [
             'start_dttm',
@@ -228,6 +225,9 @@ describe('EchartsTimeseries transformProps', () => {
           },
         ],
       },
+      queriesData: [
+        {
+          ...queriesData[0],
         },
       ],
     });