fix: Drill to detail blocked by tooltip (#22082)

Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx

@@ -43,6 +43,7 @@ export default function EchartsMixedTimeseries({
   onContextMenu,
   xValueFormatter,
   xAxis,
+  refs,
 }: EchartsMixedTimeseriesChartTransformedProps) {
   const isFirstQuery = useCallback(
     (seriesIndex: number) => seriesIndex < seriesBreakdown,
@@ -61,7 +62,7 @@ export default function EchartsMixedTimeseries({
       const currentGroupBy = isFirstQuery(seriesIndex) ? groupby : groupbyB;
       const currentLabelMap = isFirstQuery(seriesIndex) ? labelMap : labelMapB;
       const groupbyValues = values
-        .map(value => currentLabelMap[value])
+        .map(value => currentLabelMap?.[value])
         .filter(value => !!value);
 
       setDataMask({
@@ -100,7 +101,7 @@ export default function EchartsMixedTimeseries({
   const eventHandlers: EventHandlers = {
     click: props => {
       const { seriesName, seriesIndex } = props;
-      const values: string[] = Object.values(selectedValues);
+      const values: string[] = Object.values(selectedValues || {});
       if (values.includes(seriesName)) {
         handleChange(
           values.filter(v => v !== seriesName),
@@ -162,6 +163,7 @@ export default function EchartsMixedTimeseries({
 
   return (
     <Echart
+      refs={refs}
       height={height}
       width={width}
       echartOptions={echartOptions}

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

@@ -40,7 +40,11 @@ import {
   EchartsMixedTimeseriesChartTransformedProps,
   EchartsMixedTimeseriesProps,
 } from './types';
-import { EchartsTimeseriesSeriesType, ForecastSeriesEnum } from '../types';
+import {
+  EchartsTimeseriesSeriesType,
+  ForecastSeriesEnum,
+  Refs,
+} from '../types';
 import { parseYAxisBound } from '../utils/controls';
 import {
   getOverMaxHiddenFormatter,
@@ -64,7 +68,7 @@ import {
   rebaseForecastDatum,
 } from '../utils/forecast';
 import { convertInteger } from '../utils/convertInteger';
-import { defaultGrid, defaultTooltip, defaultYAxis } from '../defaults';
+import { defaultGrid, defaultYAxis } from '../defaults';
 import {
   getPadding,
   getTooltipTimeFormatter,
@@ -76,6 +80,7 @@ import {
   transformTimeseriesAnnotation,
 } from '../Timeseries/transformers';
 import { TIMESERIES_CONSTANTS, TIMEGRAIN_TO_TIMESTAMP } from '../constants';
+import { getDefaultPosition } from '../utils/tooltip';
 
 export default function transformProps(
   chartProps: EchartsMixedTimeseriesProps,
@@ -152,6 +157,7 @@ export default function transformProps(
     percentageThreshold,
   }: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
 
+  const refs: Refs = {};
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
 
   let xAxisLabel = getXAxisLabel(
@@ -419,7 +425,7 @@ export default function transformProps(
       },
     ],
     tooltip: {
-      ...defaultTooltip,
+      position: getDefaultPosition(refs),
       show: !inContextMenu,
       appendToBody: true,
       trigger: richTooltip ? 'axis' : 'item',
@@ -513,5 +519,6 @@ export default function transformProps(
       label: xAxisLabel,
       type: xAxisType,
     },
+    refs,
   };
 }

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

@@ -20,19 +20,20 @@ import {
   AnnotationLayer,
   TimeGranularity,
   QueryFormData,
-  ChartProps,
-  ChartDataResponseResult,
   QueryFormColumn,
   ContributionType,
   TimeFormatter,
   AxisType,
 } from '@superset-ui/core';
 import {
-  EchartsLegendFormData,
-  EchartsTitleFormData,
-  StackType,
+  BaseChartProps,
+  BaseTransformedProps,
+  ContextMenuTransformedProps,
+  CrossFilterTransformedProps,
   EchartsTimeseriesSeriesType,
-  EChartTransformedProps,
+  LegendFormData,
+  StackType,
+  TitleFormData,
 } from '../types';
 import {
   DEFAULT_LEGEND_FORM_DATA,
@@ -86,8 +87,8 @@ export type EchartsMixedTimeseriesFormData = QueryFormData & {
   groupby: QueryFormColumn[];
   groupbyB: QueryFormColumn[];
   emitFilter: boolean;
-} & EchartsLegendFormData &
-  EchartsTitleFormData;
+} & LegendFormData &
+  TitleFormData;
 
 // @ts-ignore
 export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
@@ -133,20 +134,22 @@ export const DEFAULT_FORM_DATA: EchartsMixedTimeseriesFormData = {
   ...DEFAULT_TITLE_FORM_DATA,
 };
 
-export interface EchartsMixedTimeseriesProps extends ChartProps {
+export interface EchartsMixedTimeseriesProps
+  extends BaseChartProps<EchartsMixedTimeseriesFormData> {
   formData: EchartsMixedTimeseriesFormData;
-  queriesData: ChartDataResponseResult[];
 }
 
 export type EchartsMixedTimeseriesChartTransformedProps =
-  EChartTransformedProps<EchartsMixedTimeseriesFormData> & {
-    emitFilterB: boolean;
-    groupbyB: QueryFormColumn[];
-    labelMapB: Record<string, string[]>;
-    seriesBreakdown: number;
-    xValueFormatter: TimeFormatter | StringConstructor;
-    xAxis: {
-      label: string;
-      type: AxisType;
+  BaseTransformedProps<EchartsMixedTimeseriesFormData> &
+    ContextMenuTransformedProps &
+    CrossFilterTransformedProps & {
+      emitFilterB: boolean;
+      groupbyB: QueryFormColumn[];
+      labelMapB: Record<string, string[]>;
+      seriesBreakdown: number;
+      xValueFormatter: TimeFormatter | StringConstructor;
+      xAxis: {
+        label: string;
+        type: AxisType;
+      };
     };
-  };