Fix potential clock sync issues with graph updating (#947)

web/components/charts/contract/binary.tsx

@@ -1,12 +1,18 @@
 import { useMemo, useRef } from 'react'
-import { sortBy } from 'lodash'
+import { last, sortBy } from 'lodash'
 import { scaleTime, scaleLinear } from 'd3'
 
 import { Bet } from 'common/bet'
 import { getInitialProbability, getProbability } from 'common/calculate'
 import { BinaryContract } from 'common/contract'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
+import {
+  MARGIN_X,
+  MARGIN_Y,
+  MAX_DATE,
+  getDateRange,
+  getRightmostVisibleDate,
+} from '../helpers'
 import { SingleValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
@@ -40,7 +46,12 @@ export const BinaryContractChart = (props: {
     ],
     [contract, betPoints, contractStart, contractEnd]
   )
-  const visibleRange = [contractStart, contractEnd ?? Date.now()]
+  const rightmostDate = getRightmostVisibleDate(
+    contractEnd,
+    last(betPoints)?.[0],
+    new Date(Date.now())
+  )
+  const visibleRange = [contractStart, rightmostDate]
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0

web/components/charts/contract/choice.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useRef } from 'react'
-import { sum, sortBy, groupBy } from 'lodash'
+import { last, sum, sortBy, groupBy } from 'lodash'
 import { scaleTime, scaleLinear } from 'd3'
 
 import { Bet } from 'common/bet'
@@ -7,7 +7,13 @@ import { Answer } from 'common/answer'
 import { FreeResponseContract, MultipleChoiceContract } from 'common/contract'
 import { getOutcomeProbability } from 'common/calculate'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
+import {
+  MARGIN_X,
+  MARGIN_Y,
+  MAX_DATE,
+  getDateRange,
+  getRightmostVisibleDate,
+} from '../helpers'
 import { MultiPoint, MultiValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
@@ -143,8 +149,12 @@ export const ChoiceContractChart = (props: {
     ],
     [answers, contract, betPoints, contractStart, contractEnd]
   )
-  const visibleRange = [contractStart, contractEnd ?? Date.now()]
-
+  const rightmostDate = getRightmostVisibleDate(
+    contractEnd,
+    last(betPoints)?.[0],
+    new Date(Date.now())
+  )
+  const visibleRange = [contractStart, rightmostDate]
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0

web/components/charts/contract/pseudo-numeric.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useRef } from 'react'
-import { sortBy } from 'lodash'
+import { last, sortBy } from 'lodash'
 import { scaleTime, scaleLog, scaleLinear } from 'd3'
 
 import { Bet } from 'common/bet'
@@ -7,7 +7,13 @@ import { getInitialProbability, getProbability } from 'common/calculate'
 import { PseudoNumericContract } from 'common/contract'
 import { NUMERIC_GRAPH_COLOR } from 'common/numeric-constants'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
-import { MARGIN_X, MARGIN_Y, MAX_DATE, getDateRange } from '../helpers'
+import {
+  MARGIN_X,
+  MARGIN_Y,
+  MAX_DATE,
+  getDateRange,
+  getRightmostVisibleDate,
+} from '../helpers'
 import { SingleValueHistoryChart } from '../generic-charts'
 import { useElementWidth } from 'web/hooks/use-element-width'
 
@@ -55,8 +61,12 @@ export const PseudoNumericContractChart = (props: {
     ],
     [contract, betPoints, contractStart, contractEnd]
   )
-  const visibleRange = [contractStart, contractEnd ?? Date.now()]
-
+  const rightmostDate = getRightmostVisibleDate(
+    contractEnd,
+    last(betPoints)?.[0],
+    new Date(Date.now())
+  )
+  const visibleRange = [contractStart, rightmostDate]
   const isMobile = useIsMobile(800)
   const containerRef = useRef<HTMLDivElement>(null)
   const width = useElementWidth(containerRef) ?? 0

web/components/charts/helpers.tsx

@@ -205,3 +205,18 @@ export const getDateRange = (contract: Contract) => {
   const endDate = resolutionTime ?? (isClosed ? closeTime : null)
   return [new Date(createdTime), endDate ? new Date(endDate) : null] as const
 }
+
+export const getRightmostVisibleDate = (
+  contractEnd: Date | null | undefined,
+  lastActivity: Date | null | undefined,
+  now: Date
+) => {
+  if (contractEnd != null) {
+    return contractEnd
+  } else if (lastActivity != null) {
+    // client-DB clock divergence may cause last activity to be later than now
+    return new Date(Math.max(lastActivity.getTime(), now.getTime()))
+  } else {
+    return now
+  }
+}