fix: annotation broken (#20651)

* fix: annotation broken

* fix UT

* add annotation data to mixed timeseries chart

(cherry picked from commit 7f918a4ec0)

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -50,7 +50,10 @@ import {
   extractDataTotalValues,
   extractShowValueIndexes,
 } from '../utils/series';
-import { extractAnnotationLabels } from '../utils/annotation';
+import {
+  extractAnnotationLabels,
+  getAnnotationData,
+} from '../utils/annotation';
 import {
   extractForecastSeriesContext,
   extractForecastValuesFromTooltipParams,
@@ -83,11 +86,11 @@ export default function transformProps(
     filterState,
     datasource,
     theme,
-    annotationData = {},
   } = chartProps;
   const { verboseMap = {} } = datasource;
   const data1 = (queriesData[0].data || []) as TimeseriesDataRecord[];
   const data2 = (queriesData[1].data || []) as TimeseriesDataRecord[];
+  const annotationData = getAnnotationData(chartProps);
 
   const {
     area,

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

@@ -55,7 +55,10 @@ import {
   extractDataTotalValues,
   extractShowValueIndexes,
 } from '../utils/series';
-import { extractAnnotationLabels } from '../utils/annotation';
+import {
+  extractAnnotationLabels,
+  getAnnotationData,
+} from '../utils/annotation';
 import {
   extractForecastSeriesContext,
   extractForecastSeriesContexts,
@@ -93,12 +96,12 @@ export default function transformProps(
     queriesData,
     datasource,
     theme,
-    annotationData = {},
   } = chartProps;
   const { verboseMap = {} } = datasource;
   const [queryData] = queriesData;
   const { data = [] } = queryData as TimeseriesChartDataResponseResult;
   const dataTypes = getColtypesMapping(queryData);
+  const annotationData = getAnnotationData(chartProps);
 
   const {
     area,

superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts

@@ -17,6 +17,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { isEmpty } from 'lodash';
+
 import {
   Annotation,
   AnnotationData,
@@ -30,6 +32,8 @@ import {
   isTimeseriesAnnotationResult,
   TimeseriesDataRecord,
 } from '@superset-ui/core';
+import { EchartsTimeseriesChartProps } from '../types';
+import { EchartsMixedTimeseriesProps } from '../MixedTimeseries/types';
 
 export function evalFormula(
   formula: FormulaAnnotationLayer,
@@ -130,3 +134,13 @@ export function extractAnnotationLabels(
 
   return formulaAnnotationLabels.concat(timeseriesAnnotationLabels);
 }
+
+export function getAnnotationData(
+  chartProps: EchartsTimeseriesChartProps | EchartsMixedTimeseriesProps,
+): AnnotationData {
+  const data = chartProps?.queriesData[0]?.annotation_data as AnnotationData;
+  if (!isEmpty(data)) {
+    return data;
+  }
+  return {};
+}

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

@@ -174,60 +174,62 @@ describe('EchartsTimeseries transformProps', () => {
       titleColumn: '',
       value: 3,
     };
+    const 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 Timeseries': [
+        {
+          key: 'My Line',
+          values: [
+            {
+              x: 10000,
+              y: 11000,
+            },
+            {
+              x: 20000,
+              y: 21000,
+            },
+          ],
+        },
+      ],
+    };
     const chartProps = new ChartProps({
       ...chartPropsConfig,
       formData: {
         ...formData,
         annotationLayers: [event, interval, timeseries],
       },
-      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 Timeseries': [
-          {
-            key: 'My Line',
-            values: [
-              {
-                x: 10000,
-                y: 11000,
-              },
-              {
-                x: 20000,
-                y: 21000,
-              },
-            ],
-          },
-        ],
-      },
+      annotationData,
       queriesData: [
         {
           ...queriesData[0],
+          annotation_data: annotationData,
         },
       ],
     });