Fix line chart hover tooltip logic (#44378)

* Fix line chart hover tooltip logic

* Fix integration and skip unit test

* Fix point link rendering unit test

Author: vovakulikov

client/web/src/integration/insights/insight/insight-chart-focus.test.ts

@@ -74,7 +74,7 @@ describe('Code insights [Insight Card] should has a proper focus management ', (
                 assert.strictEqual(
                     await hasFocus(
                         driver,
-                        `[aria-label="Chart series"] > [role="listitem"]:nth-child(${lineIndex + 2}) a:nth-child(${
+                        `[aria-label="Chart series"] > [role="listitem"]:nth-child(${lineIndex + 1}) a:nth-child(${
                             pointIndex + 1
                         })`
                     ),

client/wildcard/src/components/Charts/components/line-chart/LineChart.test.tsx

@@ -1,6 +1,4 @@
 import { render, screen, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { assert, stub } from 'sinon'
 
 import { LineChart } from './LineChart'
 import { FLAT_SERIES } from './story/mocks'
@@ -53,24 +51,18 @@ describe('LineChart', () => {
 
     describe('should handle clicks', () => {
         it('on a point', () => {
-            const openStub = stub(window, 'open')
-
             renderChart(defaultArgs)
 
             // Query chart series list
             const series = screen.getByLabelText('Chart series')
-            const [firstPoint, secondPoint, thirdPoint] = within(series).getAllByRole('listitem')
+            const [firstSeries] = within(series).getAllByRole('listitem')
+            const [point00, point01, point02] = within(firstSeries).getAllByRole('listitem')
 
             // Spot checking multiple points
             // related issue https://github.com/sourcegraph/sourcegraph/issues/38304
-            userEvent.click(firstPoint)
-            userEvent.click(secondPoint)
-            userEvent.click(thirdPoint)
-
-            assert.alwaysCalledWith(openStub, 'https://google.com/search')
-            assert.calledThrice(openStub)
-
-            openStub.restore()
+            expect(point00).toHaveAttribute('href', 'https://google.com/search')
+            expect(point01).toHaveAttribute('href', 'https://google.com/search')
+            expect(point02).toHaveAttribute('href', 'https://google.com/search')
         })
     })
 })

client/wildcard/src/components/Charts/components/line-chart/LineChartContent.tsx

@@ -81,7 +81,7 @@ export function LineChartContent<Datum>(props: LineChartContentProps<Datum>): Re
         })(Object.values(points).flat())
     }, [activeSeries, height, width, xScale, yScale])
 
-    const handlers = useChartEventHandlers({
+    const { onPointerLeave, onPointerMove, onClick, onBlurCapture } = useChartEventHandlers({
         onPointerMove: point => {
             const closestPoint = voronoiLayout.find(point.x - left, point.y - top)
 
@@ -105,12 +105,9 @@ export function LineChartContent<Datum>(props: LineChartContentProps<Datum>): Re
             role="list"
             aria-label="Chart series"
             className={classNames(styles.root, className, { [styles.rootWithHoveredLinkPoint]: activePoint?.linkUrl })}
+            onBlurCapture={onBlurCapture}
             {...attributes}
-            {...handlers}
         >
-            {/* Spread the group element in order to track user input events from all visible chart content surface*/}
-            <rect x={0} y={0} opacity={0} width={width} height={height} aria-hidden={true} pointerEvents="none" />
-
             {stacked && <StackedArea dataSeries={activeSeries} xScale={xScale} yScale={yScale} />}
 
             {activeSeries.map(line => (
@@ -153,6 +150,19 @@ export function LineChartContent<Datum>(props: LineChartContentProps<Datum>): Re
                 />
             )}
 
+            {/* Spread the group element in order to track user input events from all visible chart content surface*/}
+            <rect
+                x={0}
+                y={0}
+                opacity={0}
+                width={width}
+                height={height}
+                aria-hidden={true}
+                onPointerLeave={onPointerLeave}
+                onPointerMove={onPointerMove}
+                onClick={onClick}
+            />
+
             {activePoint && rootRef.current && (
                 <Tooltip containerElement={rootRef.current} activeElement={activePoint.node as HTMLElement}>
                     <TooltipContent series={activeSeries} activePoint={activePoint} stacked={stacked} />

client/wildcard/src/components/Charts/components/line-chart/hooks/event-listeners.ts

@@ -6,15 +6,15 @@ import { Point } from '@visx/point'
 interface UseChartEventHandlersProps {
     onPointerMove: (point: Point) => void
     onPointerLeave: () => void
-    onFocusOut: FocusEventHandler<SVGSVGElement>
-    onClick: MouseEventHandler<SVGSVGElement>
+    onFocusOut: FocusEventHandler<SVGGraphicsElement>
+    onClick: MouseEventHandler<SVGGraphicsElement>
 }
 
 interface ChartHandlers {
-    onPointerMove: PointerEventHandler<SVGSVGElement>
-    onPointerLeave: PointerEventHandler<SVGSVGElement>
-    onBlurCapture: FocusEventHandler<SVGSVGElement>
-    onClick: MouseEventHandler<SVGSVGElement>
+    onPointerMove: PointerEventHandler<SVGGraphicsElement>
+    onPointerLeave: PointerEventHandler<SVGGraphicsElement>
+    onBlurCapture: FocusEventHandler<SVGGraphicsElement>
+    onClick: MouseEventHandler<SVGGraphicsElement>
 }
 
 /**