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

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

superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx

@@ -34,6 +34,7 @@ export default function EchartsGraph({
   echartOptions,
   formData,
   onContextMenu,
+  refs,
 }: GraphChartTransformedProps) {
   const eventHandlers: EventHandlers = {
     contextmenu: (e: Event) => {
@@ -68,6 +69,7 @@ export default function EchartsGraph({
   };
   return (
     <Echart
+      refs={refs}
       height={height}
       width={width}
       echartOptions={echartOptions}

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

@@ -18,7 +18,6 @@
  */
 import {
   CategoricalColorNamespace,
-  ChartProps,
   getMetricLabel,
   DataRecord,
   DataRecordValue,
@@ -32,9 +31,12 @@ import {
   DEFAULT_FORM_DATA as DEFAULT_GRAPH_FORM_DATA,
   EdgeSymbol,
   GraphChartTransformedProps,
+  EchartsGraphChartProps,
 } from './types';
 import { DEFAULT_GRAPH_SERIES_OPTION } from './constants';
 import { getChartPadding, getLegendProps, sanitizeHtml } from '../utils/series';
+import { getDefaultPosition } from '../utils/tooltip';
+import { Refs } from '../types';
 
 type EdgeWithStyles = GraphEdgeItemOption & {
   lineStyle: Exclude<GraphEdgeItemOption['lineStyle'], undefined>;
@@ -158,7 +160,7 @@ function getCategoryName(columnName: string, name?: DataRecordValue) {
 }
 
 export default function transformProps(
-  chartProps: ChartProps,
+  chartProps: EchartsGraphChartProps,
 ): GraphChartTransformedProps {
   const { width, height, formData, queriesData, hooks, inContextMenu } =
     chartProps;
@@ -294,11 +296,13 @@ export default function transformProps(
     },
   ];
 
+  const refs: Refs = {};
   const echartOptions: EChartsCoreOption = {
     animationDuration: DEFAULT_GRAPH_SERIES_OPTION.animationDuration,
     animationEasing: DEFAULT_GRAPH_SERIES_OPTION.animationEasing,
     tooltip: {
       show: !inContextMenu,
+      position: getDefaultPosition(refs),
       formatter: (params: any): string =>
         edgeFormatter(
           params.data.source,
@@ -322,5 +326,6 @@ export default function transformProps(
     formData,
     echartOptions,
     onContextMenu,
+    refs,
   };
 }

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

@@ -16,16 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  PlainObject,
-  QueryFormData,
-  BinaryQueryObjectFilterClause,
-} from '@superset-ui/core';
+import { QueryFormData } from '@superset-ui/core';
 import { GraphNodeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
 import { SeriesTooltipOption } from 'echarts/types/src/util/types';
 import {
-  EchartsLegendFormData,
-  EchartsProps,
+  BaseChartProps,
+  BaseTransformedProps,
+  ContextMenuTransformedProps,
+  LegendFormData,
   LegendOrientation,
   LegendType,
 } from '../types';
@@ -34,7 +32,7 @@ import { DEFAULT_LEGEND_FORM_DATA } from '../constants';
 export type EdgeSymbol = 'none' | 'circle' | 'arrow';
 
 export type EchartsGraphFormData = QueryFormData &
-  EchartsLegendFormData & {
+  LegendFormData & {
     source: string;
     target: string;
     sourceCategory?: string;
@@ -85,11 +83,10 @@ export type tooltipFormatParams = {
   data: { [name: string]: string };
 };
 
-export type GraphChartTransformedProps = EchartsProps & {
-  formData: PlainObject;
-  onContextMenu?: (
-    clientX: number,
-    clientY: number,
-    filters?: BinaryQueryObjectFilterClause[],
-  ) => void;
-};
+export interface EchartsGraphChartProps
+  extends BaseChartProps<EchartsGraphFormData> {
+  formData: EchartsGraphFormData;
+}
+
+export type GraphChartTransformedProps =
+  BaseTransformedProps<EchartsGraphFormData> & ContextMenuTransformedProps;