From 5b5a919ed7a483c3c5789bfeb5914f5392924a5e Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Thu, 29 Sep 2022 20:18:33 -0700
Subject: [PATCH] Expose `onMouseOver` chart event to hook into from outside
 (#967)

---
 web/components/charts/contract/binary.tsx     | 13 ++++----
 web/components/charts/contract/choice.tsx     |  4 ++-
 web/components/charts/contract/numeric.tsx    |  4 ++-
 .../charts/contract/pseudo-numeric.tsx        |  4 ++-
 web/components/charts/generic-charts.tsx      | 32 ++++++++-----------
 5 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/web/components/charts/contract/binary.tsx b/web/components/charts/contract/binary.tsx
index 55cf4e88..a5740a3e 100644
--- a/web/components/charts/contract/binary.tsx
+++ b/web/components/charts/contract/binary.tsx
@@ -46,20 +46,20 @@ export const BinaryContractChart = (props: {
   contract: BinaryContract
   bets: Bet[]
   height?: number
+  onMouseOver?: (p: HistoryPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets } = props
+  const { contract, bets, onMouseOver } = props
   const [startDate, endDate] = getDateRange(contract)
   const startP = getInitialProbability(contract)
   const endP = getProbability(contract)
   const betPoints = useMemo(() => getBetPoints(bets), [bets])
-  const data = useMemo(
-    () => [
+  const data = useMemo(() => {
+    return [
       { x: startDate, y: startP },
       ...betPoints,
       { x: endDate ?? new Date(Date.now() + DAY_MS), y: endP },
-    ],
-    [startDate, startP, endDate, endP, betPoints]
-  )
+    ]
+  }, [startDate, startP, endDate, endP, betPoints])
 
   const rightmostDate = getRightmostVisibleDate(
     endDate,
@@ -84,6 +84,7 @@ export const BinaryContractChart = (props: {
           yScale={yScale}
           data={data}
           color="#11b981"
+          onMouseOver={onMouseOver}
           Tooltip={BinaryChartTooltip}
           pct
         />
diff --git a/web/components/charts/contract/choice.tsx b/web/components/charts/contract/choice.tsx
index d5d0d09e..05d3255e 100644
--- a/web/components/charts/contract/choice.tsx
+++ b/web/components/charts/contract/choice.tsx
@@ -125,8 +125,9 @@ export const ChoiceContractChart = (props: {
   contract: FreeResponseContract | MultipleChoiceContract
   bets: Bet[]
   height?: number
+  onMouseOver?: (p: MultiPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets } = props
+  const { contract, bets, onMouseOver } = props
   const [start, end] = getDateRange(contract)
   const answers = useMemo(
     () => getTrackedAnswers(contract, CATEGORY_COLORS.length),
@@ -194,6 +195,7 @@ export const ChoiceContractChart = (props: {
           yScale={yScale}
           data={data}
           colors={CATEGORY_COLORS}
+          onMouseOver={onMouseOver}
           Tooltip={ChoiceTooltip}
           pct
         />
diff --git a/web/components/charts/contract/numeric.tsx b/web/components/charts/contract/numeric.tsx
index 3c14149a..dd031ab8 100644
--- a/web/components/charts/contract/numeric.tsx
+++ b/web/components/charts/contract/numeric.tsx
@@ -33,8 +33,9 @@ const NumericChartTooltip = (props: TooltipProps<DistributionPoint>) => {
 export const NumericContractChart = (props: {
   contract: NumericContract
   height?: number
+  onMouseOver?: (p: DistributionPoint | undefined) => void
 }) => {
-  const { contract } = props
+  const { contract, onMouseOver } = props
   const { min, max } = contract
   const data = useMemo(() => getNumericChartData(contract), [contract])
   const isMobile = useIsMobile(800)
@@ -54,6 +55,7 @@ export const NumericContractChart = (props: {
           yScale={yScale}
           data={data}
           color={NUMERIC_GRAPH_COLOR}
+          onMouseOver={onMouseOver}
           Tooltip={NumericChartTooltip}
         />
       )}
diff --git a/web/components/charts/contract/pseudo-numeric.tsx b/web/components/charts/contract/pseudo-numeric.tsx
index fb88b15a..385e56dd 100644
--- a/web/components/charts/contract/pseudo-numeric.tsx
+++ b/web/components/charts/contract/pseudo-numeric.tsx
@@ -58,8 +58,9 @@ export const PseudoNumericContractChart = (props: {
   contract: PseudoNumericContract
   bets: Bet[]
   height?: number
+  onMouseOver?: (p: HistoryPoint<Bet> | undefined) => void
 }) => {
-  const { contract, bets } = props
+  const { contract, bets, onMouseOver } = props
   const { min, max, isLogScale } = contract
   const [startDate, endDate] = getDateRange(contract)
   const scaleP = useMemo(
@@ -102,6 +103,7 @@ export const PseudoNumericContractChart = (props: {
           xScale={xScale}
           yScale={yScale}
           data={data}
+          onMouseOver={onMouseOver}
           Tooltip={PseudoNumericChartTooltip}
           color={NUMERIC_GRAPH_COLOR}
         />
diff --git a/web/components/charts/generic-charts.tsx b/web/components/charts/generic-charts.tsx
index 344ae061..5ae30ad4 100644
--- a/web/components/charts/generic-charts.tsx
+++ b/web/components/charts/generic-charts.tsx
@@ -38,6 +38,7 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   color: string
   xScale: ScaleContinuousNumeric<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<P>
 }) => {
   const { color, data, yScale, w, h, Tooltip } = props
@@ -71,12 +72,9 @@ export const DistributionChart = <P extends DistributionPoint>(props: {
   const onMouseOver = useEvent((mouseX: number) => {
     const queryX = xScale.invert(mouseX)
     const item = data[xBisector.left(data, queryX) - 1]
-    if (item == null) {
-      // this can happen if you are on the very left or right edge of the chart,
-      // so your queryX is out of bounds
-      return
-    }
-    return { ...item, x: queryX }
+    const result = item ? { ...item, x: queryX } : undefined
+    props.onMouseOver?.(result)
+    return result
   })
 
   return (
@@ -108,6 +106,7 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   colors: readonly string[]
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<P>
   pct?: boolean
 }) => {
@@ -156,12 +155,9 @@ export const MultiValueHistoryChart = <P extends MultiPoint>(props: {
   const onMouseOver = useEvent((mouseX: number) => {
     const queryX = xScale.invert(mouseX)
     const item = data[xBisector.left(data, queryX) - 1]
-    if (item == null) {
-      // this can happen if you are on the very left or right edge of the chart,
-      // so your queryX is out of bounds
-      return
-    }
-    return { ...item, x: queryX }
+    const result = item ? { ...item, x: queryX } : undefined
+    props.onMouseOver?.(result)
+    return result
   })
 
   return (
@@ -196,10 +192,11 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   color: string
   xScale: ScaleTime<number, number>
   yScale: ScaleContinuousNumeric<number, number>
+  onMouseOver?: (p: P | undefined) => void
   Tooltip?: TooltipComponent<P>
   pct?: boolean
 }) => {
-  const { color, data, pct, yScale, w, h, Tooltip } = props
+  const { color, data, yScale, w, h, Tooltip, pct } = props
 
   const [viewXScale, setViewXScale] = useState<ScaleTime<number, number>>()
   const xScale = viewXScale ?? props.xScale
@@ -235,12 +232,9 @@ export const SingleValueHistoryChart = <P extends HistoryPoint>(props: {
   const onMouseOver = useEvent((mouseX: number) => {
     const queryX = xScale.invert(mouseX)
     const item = data[xBisector.left(data, queryX) - 1]
-    if (item == null) {
-      // this can happen if you are on the very left or right edge of the chart,
-      // so your queryX is out of bounds
-      return
-    }
-    return { ...item, x: queryX }
+    const result = item ? { ...item, x: queryX } : undefined
+    props.onMouseOver?.(result)
+    return result
   })
 
   return (