From a46550cef98e20ef19a736945e076ae1052bc660 Mon Sep 17 00:00:00 2001
From: Michael Nesen <michael.nesen@shopify.com>
Date: Wed, 18 Dec 2024 21:34:58 +0000
Subject: [PATCH] Remove tooltips

---
 .../src/components/FunnelChartNext/Chart.tsx  | 80 +------------------
 .../FunnelChartNext/FunnelChartNext.tsx       |  7 +-
 .../FunnelChartNext/tests/Chart.test.tsx      | 32 --------
 .../tests/FunnelChartNext.test.tsx            |  2 -
 4 files changed, 3 insertions(+), 118 deletions(-)

diff --git a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
index 214685fc8..84ab27c90 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
@@ -23,7 +23,6 @@ import {
   FunnelTooltip,
   TooltipWithPortal,
 } from './components';
-import type {FunnelChartNextProps} from './FunnelChartNext';
 import {
   TOOLTIP_WIDTH,
   LABELS_HEIGHT,
@@ -41,7 +40,6 @@ import {
 
 export interface ChartProps {
   data: DataSeries[];
-  tooltipLabels: FunnelChartNextProps['tooltipLabels'];
   seriesNameFormatter: LabelFormatter;
   labelFormatter: LabelFormatter;
   percentageFormatter?: (value: number) => string;
@@ -50,7 +48,6 @@ export interface ChartProps {
 
 export function Chart({
   data,
-  tooltipLabels,
   seriesNameFormatter,
   labelFormatter,
   percentageFormatter = (value: number) => {
@@ -58,19 +55,12 @@ export function Chart({
   },
   renderScaleIconTooltipContent,
 }: ChartProps) {
-  const [tooltipIndex, setTooltipIndex] = useState<number | null>(null);
   const {containerBounds} = useChartContext();
-
   const dataSeries = data[0].data;
   const xValues = dataSeries.map(({key}) => key) as string[];
   const yValues = dataSeries.map(({value}) => value) as [number, number];
 
-  const {
-    width: drawableWidth,
-    height: drawableHeight,
-    x: chartX,
-    y: chartY,
-  } = containerBounds ?? {
+  const {width: drawableWidth, height: drawableHeight} = containerBounds ?? {
     width: 0,
     height: 0,
     x: 0,
@@ -130,18 +120,9 @@ export function Chart({
     calculatePercentage(lastPoint?.value ?? 0, firstPoint?.value ?? 0),
   );
 
-  const handleChartBlur = (event: React.FocusEvent) => {
-    const currentTarget = event.currentTarget;
-    const relatedTarget = event.relatedTarget as Node;
-
-    if (!currentTarget.contains(relatedTarget)) {
-      setTooltipIndex(null);
-    }
-  };
-
   return (
     <ChartElements.Svg height={drawableHeight} width={drawableWidth}>
-      <g onBlur={handleChartBlur}>
+      <g>
         <FunnelChartConnectorGradient />
 
         <LinearGradientWithStops
@@ -194,8 +175,6 @@ export function Chart({
                   barWidth={barWidth}
                   index={index}
                   isLast={isLast}
-                  onMouseEnter={(index) => setTooltipIndex(index)}
-                  onMouseLeave={() => setTooltipIndex(null)}
                   shouldApplyScaling={shouldApplyScaling}
                   x={x}
                 >
@@ -226,62 +205,7 @@ export function Chart({
             </Fragment>
           );
         })}
-
-        <TooltipWithPortal>{getTooltipMarkup()}</TooltipWithPortal>
       </g>
     </ChartElements.Svg>
   );
-
-  function getTooltipMarkup() {
-    if (tooltipIndex == null) {
-      return null;
-    }
-
-    const tooltipHeight =
-      tooltipIndex === dataSeries.length - 1
-        ? SHORT_TOOLTIP_HEIGHT
-        : TOOLTIP_HEIGHT;
-
-    const activeDataSeries = dataSeries[tooltipIndex];
-
-    if (activeDataSeries == null) {
-      return null;
-    }
-
-    const xPosition = getXPosition();
-    const yPosition = getYPosition();
-
-    return (
-      <FunnelTooltip x={xPosition} y={yPosition}>
-        <Tooltip
-          activeIndex={tooltipIndex}
-          dataSeries={dataSeries}
-          isLast={tooltipIndex === dataSeries.length - 1}
-          tooltipLabels={tooltipLabels}
-          labelFormatter={labelFormatter}
-          percentageFormatter={percentageFormatter}
-        />
-      </FunnelTooltip>
-    );
-
-    function getXPosition() {
-      if (tooltipIndex === 0) {
-        return chartX + barWidth + TOOLTIP_HORIZONTAL_OFFSET;
-      }
-
-      const xOffset = (barWidth - TOOLTIP_WIDTH) / 2;
-      return chartX + (xScale(activeDataSeries.key.toString()) ?? 0) + xOffset;
-    }
-
-    function getYPosition() {
-      const barHeight = getBarHeight(activeDataSeries.value ?? 0);
-      const yPosition = chartY + drawableHeight - barHeight;
-
-      if (tooltipIndex === 0) {
-        return yPosition;
-      }
-
-      return yPosition - tooltipHeight;
-    }
-  }
 }
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx b/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx
index 8d37ad657..e29c8689e 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx
@@ -12,10 +12,6 @@ import {ChartSkeleton} from '../';
 import {Chart} from './Chart';
 
 export type FunnelChartNextProps = {
-  tooltipLabels: {
-    reached: string;
-    dropped: string;
-  };
   seriesNameFormatter?: LabelFormatter;
   labelFormatter?: LabelFormatter;
   renderScaleIconTooltipContent?: () => ReactNode;
@@ -34,7 +30,7 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
     isAnimated,
     state,
     errorText,
-    tooltipLabels,
+
     seriesNameFormatter = DEFAULT_LABEL_FORMATTER,
     labelFormatter = DEFAULT_LABEL_FORMATTER,
     percentageFormatter,
@@ -63,7 +59,6 @@ export function FunnelChartNext(props: FunnelChartNextProps) {
       ) : (
         <Chart
           data={data}
-          tooltipLabels={tooltipLabels}
           seriesNameFormatter={seriesNameFormatter}
           labelFormatter={labelFormatter}
           percentageFormatter={percentageFormatter}
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx b/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx
index 8c8fc3e84..f9975e7df 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 
 import {Chart} from '../Chart';
 import {FunnelChartConnector, FunnelChartSegment} from '../../shared';
-import {FunnelTooltip} from '../components';
 import {SingleTextLine} from '../../Labels';
 
 const mockData: DataSeries[] = [
@@ -30,10 +29,6 @@ const mockContext = {
 
 const defaultProps = {
   data: mockData,
-  tooltipLabels: {
-    dropoff: 'Dropoff',
-    total: 'Total',
-  },
   seriesNameFormatter: (value: string) => `$${value}`,
   labelFormatter: (value: string) => `$${value}`,
 };
@@ -75,31 +70,4 @@ describe('<Chart />', () => {
       text: 'Custom Step 1',
     });
   });
-
-  it('shows tooltip when hovering over a segment', () => {
-    const chart = mount(
-      <ChartContext.Provider value={mockContext}>
-        <Chart {...defaultProps} />
-      </ChartContext.Provider>,
-    );
-
-    const firstSegment = chart.find(FunnelChartSegment);
-    firstSegment?.trigger('onMouseEnter', 0);
-
-    expect(chart).toContainReactComponent(FunnelTooltip);
-  });
-
-  it('hides tooltip when mouse leaves a segment', () => {
-    const chart = mount(
-      <ChartContext.Provider value={mockContext}>
-        <Chart {...defaultProps} />
-      </ChartContext.Provider>,
-    );
-
-    const firstSegment = chart.find(FunnelChartSegment);
-    firstSegment?.trigger('onMouseEnter', 0);
-    firstSegment?.trigger('onMouseLeave');
-
-    expect(chart).not.toContainReactComponent(FunnelTooltip);
-  });
 });
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx b/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx
index 45cd8cc9d..7603d8a2a 100644
--- a/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx
+++ b/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx
@@ -10,8 +10,6 @@ import {act} from 'react-dom/test-utils';
 import {FunnelChartNext} from '../FunnelChartNext';
 import {Chart} from '../Chart';
 import {ChartSkeleton} from '../../ChartSkeleton';
-import {FunnelChartSegment} from '../../shared';
-import {FunnelConnector} from '../components';
 
 const mockData = [
   {