From 849248376bc4075ae4afed94a67cc2dd8b31773f Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Wed, 6 Apr 2022 11:45:34 -0500
Subject: [PATCH] Memo-ize graph components for better performance

---
 web/components/answers/answers-graph.tsx | 5 +++--
 web/components/contract-prob-graph.tsx   | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/components/answers/answers-graph.tsx b/web/components/answers/answers-graph.tsx
index 5c5afd13..357662cd 100644
--- a/web/components/answers/answers-graph.tsx
+++ b/web/components/answers/answers-graph.tsx
@@ -2,6 +2,7 @@ import { DatumValue } from '@nivo/core'
 import { ResponsiveLine } from '@nivo/line'
 import dayjs from 'dayjs'
 import _ from 'lodash'
+import { memo } from 'react'
 
 import { Bet } from '../../../common/bet'
 import { DPM, FreeResponse, FullContract } from '../../../common/contract'
@@ -11,7 +12,7 @@ import { useWindowSize } from '../../hooks/use-window-size'
 
 const NUM_LINES = 6
 
-export function AnswersGraph(props: {
+export const AnswersGraph = memo(function AnswersGraph(props: {
   contract: FullContract<DPM, FreeResponse>
   bets: Bet[]
   height?: number
@@ -118,7 +119,7 @@ export function AnswersGraph(props: {
       />
     </div>
   )
-}
+})
 
 function formatPercent(y: DatumValue) {
   return `${Math.round(+y.toString())}%`
diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx
index 36700f4e..72e36111 100644
--- a/web/components/contract-prob-graph.tsx
+++ b/web/components/contract-prob-graph.tsx
@@ -1,13 +1,14 @@
 import { DatumValue } from '@nivo/core'
 import { ResponsiveLine } from '@nivo/line'
 import dayjs from 'dayjs'
+import { memo } from 'react'
 import { Bet } from '../../common/bet'
 import { getInitialProbability } from '../../common/calculate'
 import { Binary, CPMM, DPM, FullContract } from '../../common/contract'
 import { useBetsWithoutAntes } from '../hooks/use-bets'
 import { useWindowSize } from '../hooks/use-window-size'
 
-export function ContractProbGraph(props: {
+export const ContractProbGraph = memo(function ContractProbGraph(props: {
   contract: FullContract<DPM | CPMM, Binary>
   bets: Bet[]
   height?: number
@@ -64,7 +65,7 @@ export function ContractProbGraph(props: {
   return (
     <div
       className="w-full overflow-hidden"
-      style={{ height: height ?? (!width || width >= 800 ? 400 : 250) }}
+      style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }}
     >
       <ResponsiveLine
         data={data}
@@ -96,7 +97,7 @@ export function ContractProbGraph(props: {
       />
     </div>
   )
-}
+})
 
 function formatPercent(y: DatumValue) {
   return `${Math.round(+y.toString())}%`