Hide answers panel unless resolving. Correctly order answers

web/components/answers/answers-graph.tsx

@@ -115,7 +115,7 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
         enableGridX={!!width && width >= 800}
         enableArea
         areaOpacity={1}
-        margin={{ top: 20, right: 0, bottom: 22, left: 40 }}
+        margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
         legends={[
           {
             anchor: 'top-left',
@@ -130,8 +130,6 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
             itemHeight: 20,
             itemBackground: 'white',
             symbolSize: 12,
-            symbolBorderColor: 'rgba(0, 0, 0, 0.5)',
-            symbolBorderWidth: 1,
             effects: [
               {
                 on: 'hover',

web/components/answers/answers-panel.tsx

@@ -3,7 +3,6 @@ import { useLayoutEffect, useState } from 'react'
 
 import { DPM, FreeResponse, FullContract } from '../../../common/contract'
 import { Col } from '../layout/col'
-import { formatPercent } from '../../../common/util/format'
 import { useUser } from '../../hooks/use-user'
 import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
 import { useAnswers } from '../../hooks/use-answers'
@@ -82,27 +81,23 @@ export function AnswersPanel(props: {
 
   return (
     <Col className="gap-3">
-      {sortedAnswers.map((answer) => (
-        <AnswerItem
-          key={answer.id}
-          answer={answer}
-          contract={contract}
-          user={user}
-          showChoice={showChoice}
-          chosenProb={chosenAnswers[answer.id]}
-          totalChosenProb={chosenTotal}
-          onChoose={onChoose}
-          onDeselect={onDeselect}
-        />
-      ))}
+      {resolveOption &&
+        sortedAnswers.map((answer) => (
+          <AnswerItem
+            key={answer.id}
+            answer={answer}
+            contract={contract}
+            user={user}
+            showChoice={showChoice}
+            chosenProb={chosenAnswers[answer.id]}
+            totalChosenProb={chosenTotal}
+            onChoose={onChoose}
+            onDeselect={onDeselect}
+          />
+        ))}
 
-      {sortedAnswers.length === 0 ? (
+      {sortedAnswers.length === 0 && (
         <div className="p-4 text-gray-500">No answers yet...</div>
-      ) : (
-        <div className="self-end p-4 text-gray-500">
-          None of the above:{' '}
-          {formatPercent(getDpmOutcomeProbability(contract.totalShares, '0'))}
-        </div>
       )}
 
       {tradingAllowed(contract) && !resolveOption && (

web/components/contract/contract-overview.tsx

@@ -73,7 +73,7 @@ export const ContractOverview = (props: {
         />
       )}
 
-      <Spacer h={6} />
+      {contract.description && <Spacer h={6} />}
 
       <ContractDescription
         className="px-2"

web/components/feed/activity-items.ts

@@ -97,9 +97,10 @@ function groupBets(
     hideOutcome: boolean
     abbreviated: boolean
     smallAvatar: boolean
+    reversed: boolean
   }
 ) {
-  const { hideOutcome, abbreviated, smallAvatar } = options
+  const { hideOutcome, abbreviated, smallAvatar, reversed } = options
 
   const commentsMap = mapCommentsByBetId(comments)
   const items: ActivityItem[] = []
@@ -171,7 +172,9 @@ function groupBets(
   if (group.length > 0) {
     pushGroup()
   }
-  return abbreviated ? items.slice(-3) : items
+  const abbrItems = abbreviated ? items.slice(-3) : items
+  if (reversed) abbrItems.reverse()
+  return abbrItems
 }
 
 function getAnswerGroups(
@@ -182,9 +185,10 @@ function getAnswerGroups(
   options: {
     sortByProb: boolean
     abbreviated: boolean
+    reversed: boolean
   }
 ) {
-  const { sortByProb, abbreviated } = options
+  const { sortByProb, abbreviated, reversed } = options
 
   let outcomes = _.uniq(bets.map((bet) => bet.outcome)).filter(
     (outcome) => getOutcomeProbability(contract, outcome) > 0.0001
@@ -208,9 +212,8 @@ function getAnswerGroups(
     outcomes = outcomes.slice(-2)
   }
   if (sortByProb) {
-    outcomes = _.sortBy(
-      outcomes,
-      (outcome) => -1 * getOutcomeProbability(contract, outcome)
+    outcomes = _.sortBy(outcomes, (outcome) =>
+      getOutcomeProbability(contract, outcome)
     )
   } else {
     // Sort by recent bet.
@@ -233,6 +236,7 @@ function getAnswerGroups(
         hideOutcome: true,
         abbreviated,
         smallAvatar: true,
+        reversed,
       })
 
       if (abbreviated) items = items.slice(-2)
@@ -264,6 +268,8 @@ export function getAllContractActivityItems(
   const { abbreviated } = options
   const { outcomeType } = contract
 
+  const reversed = !abbreviated
+
   bets =
     outcomeType === 'BINARY'
       ? bets.filter((bet) => !bet.isAnte && !bet.isRedemption)
@@ -301,12 +307,14 @@ export function getAllContractActivityItems(
           {
             sortByProb: true,
             abbreviated,
+            reversed,
           }
         )
       : groupBets(bets, comments, contract, user?.id, {
           hideOutcome: !!filterToOutcome,
           abbreviated,
           smallAvatar: !!filterToOutcome,
+          reversed,
         }))
   )
 
@@ -317,14 +325,7 @@ export function getAllContractActivityItems(
     items.push({ type: 'resolve', id: `${contract.resolutionTime}`, contract })
   }
 
-  if (!abbreviated) {
-    items.reverse()
-    for (const item of items) {
-      if (item.type === 'answergroup') {
-        item.items.reverse()
-      }
-    }
-  }
+  if (reversed) items.reverse()
 
   return items
 }
@@ -362,12 +363,14 @@ export function getRecentContractActivityItems(
           {
             sortByProb: false,
             abbreviated: true,
+            reversed: false,
           }
         )
       : groupBets(bets, comments, contract, user?.id, {
           hideOutcome: false,
           abbreviated: true,
           smallAvatar: false,
+          reversed: false,
         })
 
   return [questionItem, ...items]

web/pages/[username]/[contractSlug].tsx

@@ -143,17 +143,7 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
           contract={contract}
           bets={bets ?? []}
           comments={comments ?? []}
-        >
-          {contract.outcomeType === 'FREE_RESPONSE' && (
-            <>
-              <Spacer h={4} />
-              <AnswersPanel
-                contract={contract as FullContract<DPM, FreeResponse>}
-              />
-              <Spacer h={4} />
-            </>
-          )}
-        </ContractOverview>
+        />
 
         {contract.isResolved && (
           <>
@@ -175,6 +165,15 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
           bets={bets}
           comments={comments}
         />
+
+        {contract.outcomeType === 'FREE_RESPONSE' && (
+          <>
+            <Spacer h={4} />
+            <AnswersPanel
+              contract={contract as FullContract<DPM, FreeResponse>}
+            />
+          </>
+        )}
       </Col>
     </Page>
   )