From 504e60ce81f45b6fdda85702c98cda38a13a0c94 Mon Sep 17 00:00:00 2001
From: ingawei <46611122+ingawei@users.noreply.github.com>
Date: Wed, 24 Jul 2024 13:31:12 -0700
Subject: [PATCH] needle (#2736)

* needle
---
 web/components/answers/answer-components.tsx  |  37 +++-
 web/components/elections-page.tsx             |  32 +--
 .../candidates-panel/candidate-bar.tsx        |  39 +++-
 .../contracts/party-panel/party-panel.tsx     | 166 ++++++++++++--
 .../us-elections/probability-needle.tsx       | 207 ++++++++++++++++++
 5 files changed, 426 insertions(+), 55 deletions(-)
 create mode 100644 web/components/us-elections/probability-needle.tsx

diff --git a/web/components/answers/answer-components.tsx b/web/components/answers/answer-components.tsx
index 6805d9ffd8..d1f90ae21d 100644
--- a/web/components/answers/answer-components.tsx
+++ b/web/components/answers/answer-components.tsx
@@ -205,8 +205,9 @@ export const AddComment = (props: { onClick: () => void }) => {
 export const MultiBettor = (props: {
   answer: Answer
   contract: CPMMMultiContract
+  buttonClassName?: string
 }) => {
-  const { answer, contract } = props
+  const { answer, contract, buttonClassName } = props
   const [outcome, setOutcome] = useState<'YES' | 'NO' | undefined>(undefined)
 
   return (
@@ -228,7 +229,7 @@ export const MultiBettor = (props: {
       <Button
         size="2xs"
         color="indigo-outline"
-        className="bg-primary-50"
+        className={clsx('bg-primary-50', buttonClassName)}
         onClick={(e) => {
           e.stopPropagation()
           track('bet intent', { location: 'answer panel' })
@@ -426,12 +427,21 @@ export const OpenProb = (props: {
     </Row>
   )
 }
-export const ClosedProb = (props: { prob: number; resolvedProb?: number }) => {
-  const { prob, resolvedProb: resolveProb } = props
+export const ClosedProb = (props: {
+  prob: number
+  resolvedProb?: number
+  className?: string
+}) => {
+  const { prob, resolvedProb: resolveProb, className } = props
   return (
     <>
       {!!resolveProb && (
-        <span className="dark:text-ink-900 text-lg text-purple-500">
+        <span
+          className={clsx(
+            'dark:text-ink-900 text-lg text-purple-500',
+            className
+          )}
+        >
           {Math.round(resolveProb * 100)}%
         </span>
       )}
@@ -439,7 +449,8 @@ export const ClosedProb = (props: { prob: number; resolvedProb?: number }) => {
         className={clsx(
           'text-ink-500 whitespace-nowrap text-lg',
           resolveProb != undefined &&
-            'inline-block min-w-[40px] text-right line-through'
+            'inline-block min-w-[40px] text-right line-through',
+          className
         )}
       >
         {formatPercent(prob)}
@@ -452,8 +463,9 @@ export const AnswerStatus = (props: {
   contract: MultiContract
   answer: Answer
   noNewIcon?: boolean
+  className?: string
 }) => {
-  const { contract, answer } = props
+  const { contract, answer, className } = props
   const { resolutions } = contract
 
   const answerResolution =
@@ -474,7 +486,7 @@ export const AnswerStatus = (props: {
 
   if (answerResolution) {
     return (
-      <Row className="items-center gap-1.5 font-semibold">
+      <Row className={clsx('items-center gap-1.5 font-semibold', className)}>
         <div className={'text-ink-800 text-base'}>Resolved</div>
         {answerResolution === 'MKT' && 'resolutionProbability' in answer ? (
           <ProbPercentLabel
@@ -487,9 +499,14 @@ export const AnswerStatus = (props: {
     )
   }
   return isOpen ? (
-    <OpenProb contract={contract} answer={answer} noNewIcon />
+    <OpenProb
+      className={className}
+      contract={contract}
+      answer={answer}
+      noNewIcon
+    />
   ) : (
-    <ClosedProb prob={prob} resolvedProb={resolvedProb} />
+    <ClosedProb className={className} prob={prob} resolvedProb={resolvedProb} />
   )
 }
 export const BetButtons = (props: {
diff --git a/web/components/elections-page.tsx b/web/components/elections-page.tsx
index 745c5eb18a..e9f9f6feb5 100644
--- a/web/components/elections-page.tsx
+++ b/web/components/elections-page.tsx
@@ -12,6 +12,7 @@ import clsx from 'clsx'
 import { ChoiceMiniGraph } from './us-elections/contracts/choice-mini-graph'
 import { ElectionsPageProps } from 'web/public/data/elections-data'
 import { Carousel } from './widgets/carousel'
+import { ProbabilityNeedle } from './us-elections/probability-needle'
 
 export function USElectionsPage(props: ElectionsPageProps) {
   const {
@@ -89,6 +90,11 @@ export function USElectionsPage(props: ElectionsPageProps) {
         className="-mt-4"
       />
 
+      <PoliticsCard
+        contract={electionPartyContract as MultiContract}
+        viewType="PARTY"
+        customTitle="Which party will win the Presidential Election?"
+      />
       <Col className="gap-2">
         <Row className="items-center gap-2">
           <div className="bg-ink-600 flex h-[1px] grow flex-row" />
@@ -138,32 +144,6 @@ export function USElectionsPage(props: ElectionsPageProps) {
         houseContract={houseContract as MultiContract}
       />
 
-      <PoliticsCard
-        contract={electionPartyContract as MultiContract}
-        viewType="PARTY"
-        customTitle="Which party will win the Presidential Election?"
-      >
-        {partyPoints && afterTime && (
-          <SizedContainer
-            className={clsx('h-[50px] w-full pb-4 pr-10 sm:h-[100px]')}
-          >
-            {(w, h) => (
-              <ChoiceMiniGraph
-                width={w}
-                height={h}
-                multiPoints={partyPoints}
-                contract={electionPartyContract}
-                selectedAnswerIds={electionPartyContract?.answers
-                  .filter((a) => a.text !== 'Other')
-                  .map((a) => a.id)}
-                showMinimumYScale
-                startTime={afterTime}
-              />
-            )}
-          </SizedContainer>
-        )}
-      </PoliticsCard>
-
       <PoliticsCard
         contract={democraticElectability as MultiContract}
         viewType="CANDIDATE"
diff --git a/web/components/us-elections/contracts/candidates-panel/candidate-bar.tsx b/web/components/us-elections/contracts/candidates-panel/candidate-bar.tsx
index 6c682149bc..0ef99edd1a 100644
--- a/web/components/us-elections/contracts/candidates-panel/candidate-bar.tsx
+++ b/web/components/us-elections/contracts/candidates-panel/candidate-bar.tsx
@@ -15,6 +15,7 @@ import { sumBy } from 'lodash'
 import { floatingEqual } from 'common/util/math'
 import { User } from 'common/user'
 import { UserPosition } from './candidates-user-position'
+import { Spacer } from 'web/components/layout/spacer'
 
 export function removeTextInParentheses(input: string): string {
   return input.replace(/\s*\([^)]*\)/g, '')
@@ -143,7 +144,9 @@ export function PercentChangeToday(props: {
 }) {
   const { className, threshold = 0.02, probChange } = props
   const percentChangeToday = getPercent(probChange)
-  if (Math.abs(probChange) < threshold) return null
+  if (Math.abs(probChange) < threshold) {
+    return null
+  }
   if (percentChangeToday > threshold) {
     return (
       <div className={clsx('text-teal-700', className)}>
@@ -157,3 +160,37 @@ export function PercentChangeToday(props: {
     </div>
   )
 }
+
+export function BubblePercentChange(props: {
+  className?: string
+  threshold?: number
+  probChange: number
+}) {
+  const { className, threshold = 0.02, probChange } = props
+  const percentChangeToday = getPercent(probChange)
+  if (Math.abs(probChange) < threshold) {
+    return null
+  }
+  if (percentChangeToday > threshold) {
+    return (
+      <div
+        className={clsx(
+          'h-fit w-fit rounded-full bg-teal-700/20 px-1.5 py-0.5 text-teal-700',
+          className
+        )}
+      >
+        +<b>{formatPercentShort(probChange)}</b>
+      </div>
+    )
+  }
+  return (
+    <div
+      className={clsx(
+        'text-scarlet-700 bg-scarlet-700/20 h-fit w-fit rounded-full px-2 py-1',
+        className
+      )}
+    >
+      <b>{formatPercentShort(probChange)}</b>
+    </div>
+  )
+}
diff --git a/web/components/us-elections/contracts/party-panel/party-panel.tsx b/web/components/us-elections/contracts/party-panel/party-panel.tsx
index 8fdea80cc5..09c40bd886 100644
--- a/web/components/us-elections/contracts/party-panel/party-panel.tsx
+++ b/web/components/us-elections/contracts/party-panel/party-panel.tsx
@@ -15,11 +15,17 @@ import {
 import { CreatorAndAnswerLabel } from 'web/components/answers/answer-components'
 import { MultiBettor } from 'web/components/answers/answer-components'
 import { CPMMMultiContract } from 'common/contract'
-import { PercentChangeToday } from '../candidates-panel/candidate-bar'
+import {
+  BubblePercentChange,
+  PercentChangeToday,
+} from '../candidates-panel/candidate-bar'
 import { useUserContractBets } from 'web/hooks/use-user-bets'
 import { groupBy, sumBy } from 'lodash'
 import { floatingEqual } from 'common/util/math'
 import { UserPosition } from '../candidates-panel/candidates-user-position'
+import { ProbabilityNeedle } from 'web/components/us-elections/probability-needle'
+import { SizedContainer } from 'web/components/sized-container'
+import { Spacer } from 'web/components/layout/spacer'
 
 // just the bars
 export function PartyPanel(props: {
@@ -59,25 +65,84 @@ export function PartyPanel(props: {
   const userBets = useUserContractBets(user?.id, contract.id)
   const userBetsByAnswer = groupBy(userBets, (bet) => bet.answerId)
 
+  // Calculate Republican to Democratic ratio
+  const republicanAnswer = answers.find((a) =>
+    a.text.includes('Republican Party')
+  )
+  const democraticAnswer = answers.find((a) =>
+    a.text.includes('Democratic Party')
+  )
+
+  const republicanProb = getAnswerProbability(contract, republicanAnswer!.id)
+  const democraticProb = getAnswerProbability(contract, democraticAnswer!.id)
+
+  let democratToRepublicanRatio = 0
+  if (republicanAnswer && democraticAnswer) {
+    const totalProb = republicanProb + democraticProb
+    democratToRepublicanRatio = democraticProb / totalProb
+  }
+
   return (
-    <Col className="mx-[2px] gap-2">
-      {showNoAnswers ? (
-        <div className="text-ink-500 pb-4">No answers yet</div>
-      ) : (
-        <>
-          {displayedAnswers.map((answer) => (
-            <PartyAnswer
-              key={answer.id}
-              answer={answer as Answer}
-              contract={contract}
-              color={getPartyColor(answer.text)}
-              user={user}
-              userBets={userBetsByAnswer[answer.id]}
+    <div className="mx-[2px] flex flex-col gap-2">
+      <div className="hidden md:flex md:items-center md:justify-between">
+        {!!republicanAnswer && (
+          <PartyAnswerSnippet
+            contract={contract}
+            answer={republicanAnswer}
+            color={getPartyColor(republicanAnswer.text)}
+            alignment="left"
+            userBets={userBetsByAnswer[republicanAnswer.id]}
+            user={user}
+          />
+        )}
+        <SizedContainer className="h-[210px] w-1/2">
+          {(width, height) => (
+            <ProbabilityNeedle
+              percentage={democratToRepublicanRatio}
+              width={width}
+              height={height}
             />
-          ))}
-        </>
-      )}
-    </Col>
+          )}
+        </SizedContainer>
+        {!!democraticAnswer && (
+          <PartyAnswerSnippet
+            contract={contract}
+            answer={democraticAnswer}
+            color={getPartyColor(democraticAnswer.text)}
+            alignment="right"
+            userBets={userBetsByAnswer[democraticAnswer.id]}
+            user={user}
+          />
+        )}
+      </div>
+      <SizedContainer className="h-[210px] w-full md:hidden">
+        {(width, height) => (
+          <ProbabilityNeedle
+            percentage={democratToRepublicanRatio}
+            width={width}
+            height={height}
+          />
+        )}
+      </SizedContainer>
+      <Col className="gap-2 md:hidden">
+        {showNoAnswers ? (
+          <div className="text-ink-500 pb-4">No answers yet</div>
+        ) : (
+          <>
+            {displayedAnswers.map((answer) => (
+              <PartyAnswer
+                key={answer.id}
+                answer={answer as Answer}
+                contract={contract}
+                color={getPartyColor(answer.text)}
+                user={user}
+                userBets={userBetsByAnswer[answer.id]}
+              />
+            ))}
+          </>
+        )}
+      </Col>
+    </div>
   )
 }
 
@@ -118,6 +183,7 @@ function PartyAnswer(props: {
   const hasBets = userBets && !floatingEqual(sharesSum, 0)
 
   const isCpmm = contract.mechanism === 'cpmm-multi-1'
+
   return (
     <Col className={'w-full'}>
       <AnswerBar
@@ -168,3 +234,67 @@ function PartyAnswer(props: {
     </Col>
   )
 }
+
+function PartyAnswerSnippet(props: {
+  contract: MultiContract
+  answer: Answer
+  color: string
+  userBets?: Bet[]
+  user?: User | null
+  className?: string
+  alignment: 'left' | 'right'
+}) {
+  const { answer, contract, userBets, user, className, alignment } = props
+
+  const { resolution, resolutions } = contract
+  const sharesSum = sumBy(userBets, (bet) =>
+    bet.outcome === 'YES' ? bet.shares : -bet.shares
+  )
+
+  const hasBets = userBets && !floatingEqual(sharesSum, 0)
+
+  const isCpmm = contract.mechanism === 'cpmm-multi-1'
+
+  return (
+    <Col
+      className={clsx(
+        className,
+        alignment == 'right' ? 'items-end text-right' : ''
+      )}
+    >
+      <div className="text-ink-700">{answer.text}</div>
+      <Spacer h={1} />
+      <Row className={alignment == 'right' ? 'flex-row-reverse' : ''}>
+        <AnswerStatus
+          className="!text-5xl"
+          contract={contract}
+          answer={answer}
+        />
+        <BubblePercentChange
+          probChange={answer.probChanges.day}
+          className="whitespace-nowrap text-sm"
+        />
+      </Row>
+
+      <Spacer h={2} />
+      <div className="relative">
+        <MultiBettor
+          contract={contract as CPMMMultiContract}
+          answer={answer as Answer}
+          buttonClassName="w-20"
+        />
+        {!resolution && hasBets && isCpmm && user && (
+          <UserPosition
+            contract={contract as CPMMMultiContract}
+            answer={answer as Answer}
+            userBets={userBets}
+            user={user}
+            className="text-ink-600 dark:text-ink-700 absolute -bottom-[22px] left-0  text-xs hover:underline"
+            greenArrowClassName="text-teal-600 dark:text-teal-300"
+            redArrowClassName="text-scarlet-600 dark:text-scarlet-400"
+          />
+        )}
+      </div>
+    </Col>
+  )
+}
diff --git a/web/components/us-elections/probability-needle.tsx b/web/components/us-elections/probability-needle.tsx
new file mode 100644
index 0000000000..167de1d45a
--- /dev/null
+++ b/web/components/us-elections/probability-needle.tsx
@@ -0,0 +1,207 @@
+import { interpolateColor } from 'common/util/color'
+import {
+  DEM_DARK_HEX,
+  DEM_LIGHT_HEX,
+  REP_LIGHT_HEX,
+  REP_DARK_HEX,
+} from 'web/components/usa-map/state-election-map'
+
+const RADIUS = 200
+const NEEDLE_COLOR_DEFAULT = '#6366f1'
+const NEEDLE_COLOR_LIGHT = '#a5b4fc'
+
+const NEEDLE_RADIUS = 5
+
+const SVG_WIDTH = RADIUS * 2
+const SVG_HEIGHT = RADIUS + 2 * NEEDLE_RADIUS + 5
+
+const STRONG_X = 10
+const STRONG_Y = SVG_HEIGHT - 20
+
+const LIKELY_X = 20
+const LIKELY_Y = SVG_HEIGHT - 55
+
+const LEANING_X = 50
+const LEANING_Y = SVG_HEIGHT - 105
+
+export function ProbabilityNeedle(props: {
+  percentage: number
+  width: number
+  height: number
+}) {
+  const { percentage, width, height } = props
+
+  const segments = [
+    { percent: 0.05, color: DEM_DARK_HEX },
+    {
+      percent: 0.1,
+      color: interpolateColor(DEM_LIGHT_HEX, DEM_DARK_HEX, 0.5),
+    },
+    { percent: 0.2, color: DEM_LIGHT_HEX },
+    {
+      percent: 0.3,
+      color: interpolateColor(DEM_LIGHT_HEX, REP_LIGHT_HEX, 0.4),
+    },
+    { percent: 0.2, color: REP_LIGHT_HEX },
+    {
+      percent: 0.1,
+      color: interpolateColor(REP_DARK_HEX, REP_LIGHT_HEX, 0.5),
+    },
+    { percent: 0.05, color: REP_DARK_HEX },
+  ]
+
+  const innerRadius = RADIUS * 0.2 // Adjust this value to control the inner circle size
+
+  const createPath = (startAngle: number, endAngle: number, color: string) => {
+    const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1
+
+    const startOuterX = RADIUS + RADIUS * Math.cos((Math.PI * startAngle) / 180)
+    const startOuterY = RADIUS - RADIUS * Math.sin((Math.PI * startAngle) / 180)
+    const endOuterX = RADIUS + RADIUS * Math.cos((Math.PI * endAngle) / 180)
+    const endOuterY = RADIUS - RADIUS * Math.sin((Math.PI * endAngle) / 180)
+
+    const startInnerX =
+      RADIUS + innerRadius * Math.cos((Math.PI * startAngle) / 180)
+    const startInnerY =
+      RADIUS - innerRadius * Math.sin((Math.PI * startAngle) / 180)
+    const endInnerX =
+      RADIUS + innerRadius * Math.cos((Math.PI * endAngle) / 180)
+    const endInnerY =
+      RADIUS - innerRadius * Math.sin((Math.PI * endAngle) / 180)
+
+    return (
+      <path
+        key={startAngle}
+        d={`
+          M ${startOuterX} ${startOuterY}
+          A ${RADIUS} ${RADIUS} 0 ${largeArcFlag} 0 ${endOuterX} ${endOuterY}
+          L ${endInnerX} ${endInnerY}
+          A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${startInnerX} ${startInnerY}
+          Z
+        `}
+        fill={color}
+      />
+    )
+  }
+  const startingAngle = 180
+  let cumulativePercent = startingAngle
+  const paths = segments.map(({ percent, color }) => {
+    const segmentAngle = percent * 180 // Adjust for semicircle
+    const path = createPath(
+      startingAngle + cumulativePercent,
+      startingAngle + cumulativePercent + segmentAngle,
+      color
+    )
+    cumulativePercent += segmentAngle
+    return path
+  })
+
+  const needleAngle = 180 - percentage * 180
+  const needleLength = RADIUS * 0.55
+  const needleX =
+    RADIUS + needleLength * Math.cos((Math.PI * needleAngle) / 180)
+  const needleY =
+    RADIUS - needleLength * Math.sin((Math.PI * needleAngle) / 180)
+  const needleColor =
+    percentage >= 0.95 || percentage <= 0.05
+      ? NEEDLE_COLOR_LIGHT
+      : NEEDLE_COLOR_DEFAULT
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`}
+    >
+      {paths}
+
+      <text
+        x={STRONG_X}
+        y={STRONG_Y}
+        fontSize="12"
+        fontWeight={'thin'}
+        fill={'white'}
+        opacity={0.8}
+      >
+        STRONG REP
+      </text>
+      <text
+        x={LIKELY_X}
+        y={LIKELY_Y}
+        fontSize="12"
+        fontWeight={'thin'}
+        fill={'white'}
+        opacity={0.8}
+      >
+        LIKELY REP
+      </text>
+      <text
+        x={LEANING_X}
+        y={LEANING_Y}
+        fontSize="12"
+        fontWeight={'thin'}
+        opacity={0.4}
+      >
+        LEANING REP
+      </text>
+      <text
+        x={SVG_WIDTH / 2 - 23.5}
+        y={LEANING_Y - 40}
+        fontSize="12"
+        fontWeight={'thin'}
+        opacity={0.4}
+      >
+        TOSSUP
+      </text>
+      <text
+        x={SVG_WIDTH - LEANING_X - 75}
+        y={LEANING_Y}
+        fontSize="12"
+        fontWeight={'thin'}
+        opacity={0.4}
+      >
+        LEANING DEM
+      </text>
+      <text
+        x={SVG_WIDTH - LIKELY_X - 65}
+        y={LIKELY_Y}
+        fontSize="12"
+        fontWeight={'thin'}
+        fill={'white'}
+        opacity={0.8}
+      >
+        LIKELY DEM
+      </text>
+      <text
+        x={SVG_WIDTH - STRONG_X - 80}
+        y={STRONG_Y}
+        fontSize="12"
+        fontWeight={'thin'}
+        fill={'white'}
+        opacity={0.8}
+      >
+        STRONG DEM
+      </text>
+
+      <line
+        x1={RADIUS}
+        y1={RADIUS}
+        x2={needleX}
+        y2={needleY}
+        stroke={needleColor}
+        strokeWidth="2"
+      />
+      <circle cx={RADIUS} cy={RADIUS} r={NEEDLE_RADIUS} fill={needleColor} />
+      <text
+        x={0}
+        y={SVG_HEIGHT}
+        fontSize="12"
+        fill="currentColor"
+        opacity={0.3}
+        fontWeight={'semibold'}
+      >
+        Source: manifold.markets
+      </text>
+    </svg>
+  )
+}