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 6db4abad683a..caabdfc9be72 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 @@ -34,7 +34,7 @@ export const annotationsAndLayersControls: ControlPanelSectionConfig = { label: '', default: annotationLayers, description: t('Annotation Layers'), - renderTrigger: true, + renderTrigger: false, }, }, ], diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/AnnotationLayer.ts b/superset-frontend/packages/superset-ui-core/src/query/types/AnnotationLayer.ts index a454908d7815..6dfe0cfc78c4 100644 --- a/superset-frontend/packages/superset-ui-core/src/query/types/AnnotationLayer.ts +++ b/superset-frontend/packages/superset-ui-core/src/query/types/AnnotationLayer.ts @@ -178,9 +178,9 @@ export function isTimeseriesAnnotationResult( } export function isRecordAnnotationResult( - result: AnnotationResult, + result: any, ): result is RecordAnnotationResult { - return 'columns' in result && 'records' in result; + return Array.isArray(result?.columns) && Array.isArray(result?.records); } export type AnnotationData = { [key: string]: AnnotationResult }; diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts b/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts index 90898fcf1784..74d33f6e944b 100644 --- a/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts +++ b/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts @@ -47,7 +47,7 @@ export interface ChartDataResponseResult { /** * Data for the annotation layer. */ - annotation_data: AnnotationData[] | null; + annotation_data: AnnotationData | null; cache_key: string | null; cache_timeout: number | null; cached_dttm: string | null; 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 62ed57268f69..fe70bdff5e67 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -48,7 +48,10 @@ import { getColtypesMapping, getLegendProps, } from '../utils/series'; -import { extractAnnotationLabels } from '../utils/annotation'; +import { + extractAnnotationLabels, + getAnnotationData, +} from '../utils/annotation'; import { extractForecastSeriesContext, extractForecastValuesFromTooltipParams, @@ -81,11 +84,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, 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 d1aa4e827b44..ba651a60da39 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/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, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts index f59dbf99fbea..3a9508286312 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts +++ b/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 {}; +} 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 172ce2420421..df48354a8158 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 @@ -174,60 +174,62 @@ describe('EchartsTimeseries transformProps', () => { titleColumn: '', value: 3, }; - const chartProps = new ChartProps({ - ...chartPropsConfig, - formData: { - ...formData, - annotationLayers: [event, interval, timeseries], + 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, + }, + ], }, - annotationData: { - 'My Event': { - columns: [ - 'start_dttm', - 'end_dttm', - 'short_descr', - 'long_descr', - 'json_metadata', - ], - records: [ + 'My Interval': { + columns: ['start', 'end', 'title'], + records: [ + { + start: 2000, + end: 3000, + title: 'My Title', + }, + ], + }, + 'My Timeseries': [ + { + key: 'My Line', + values: [ { - start_dttm: 0, - end_dttm: 1000, - short_descr: '', - long_descr: '', - json_metadata: null, + x: 10000, + y: 11000, }, - ], - }, - 'My Interval': { - columns: ['start', 'end', 'title'], - records: [ { - start: 2000, - end: 3000, - title: 'My Title', + x: 20000, + y: 21000, }, ], }, - '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, queriesData: [ { ...queriesData[0], + annotation_data: annotationData, }, ], });