Hide answers panel unless resolving. Correctly order answers
This commit is contained in:
parent
893ffc612b
commit
f12511f22c
|
@ -115,7 +115,7 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
|
||||||
enableGridX={!!width && width >= 800}
|
enableGridX={!!width && width >= 800}
|
||||||
enableArea
|
enableArea
|
||||||
areaOpacity={1}
|
areaOpacity={1}
|
||||||
margin={{ top: 20, right: 0, bottom: 22, left: 40 }}
|
margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
|
||||||
legends={[
|
legends={[
|
||||||
{
|
{
|
||||||
anchor: 'top-left',
|
anchor: 'top-left',
|
||||||
|
@ -130,8 +130,6 @@ export const AnswersGraph = memo(function AnswersGraph(props: {
|
||||||
itemHeight: 20,
|
itemHeight: 20,
|
||||||
itemBackground: 'white',
|
itemBackground: 'white',
|
||||||
symbolSize: 12,
|
symbolSize: 12,
|
||||||
symbolBorderColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
symbolBorderWidth: 1,
|
|
||||||
effects: [
|
effects: [
|
||||||
{
|
{
|
||||||
on: 'hover',
|
on: 'hover',
|
||||||
|
|
|
@ -3,7 +3,6 @@ import { useLayoutEffect, useState } from 'react'
|
||||||
|
|
||||||
import { DPM, FreeResponse, FullContract } from '../../../common/contract'
|
import { DPM, FreeResponse, FullContract } from '../../../common/contract'
|
||||||
import { Col } from '../layout/col'
|
import { Col } from '../layout/col'
|
||||||
import { formatPercent } from '../../../common/util/format'
|
|
||||||
import { useUser } from '../../hooks/use-user'
|
import { useUser } from '../../hooks/use-user'
|
||||||
import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
|
import { getDpmOutcomeProbability } from '../../../common/calculate-dpm'
|
||||||
import { useAnswers } from '../../hooks/use-answers'
|
import { useAnswers } from '../../hooks/use-answers'
|
||||||
|
@ -82,27 +81,23 @@ export function AnswersPanel(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Col className="gap-3">
|
<Col className="gap-3">
|
||||||
{sortedAnswers.map((answer) => (
|
{resolveOption &&
|
||||||
<AnswerItem
|
sortedAnswers.map((answer) => (
|
||||||
key={answer.id}
|
<AnswerItem
|
||||||
answer={answer}
|
key={answer.id}
|
||||||
contract={contract}
|
answer={answer}
|
||||||
user={user}
|
contract={contract}
|
||||||
showChoice={showChoice}
|
user={user}
|
||||||
chosenProb={chosenAnswers[answer.id]}
|
showChoice={showChoice}
|
||||||
totalChosenProb={chosenTotal}
|
chosenProb={chosenAnswers[answer.id]}
|
||||||
onChoose={onChoose}
|
totalChosenProb={chosenTotal}
|
||||||
onDeselect={onDeselect}
|
onChoose={onChoose}
|
||||||
/>
|
onDeselect={onDeselect}
|
||||||
))}
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
{sortedAnswers.length === 0 ? (
|
{sortedAnswers.length === 0 && (
|
||||||
<div className="p-4 text-gray-500">No answers yet...</div>
|
<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 && (
|
{tradingAllowed(contract) && !resolveOption && (
|
||||||
|
|
|
@ -73,7 +73,7 @@ export const ContractOverview = (props: {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Spacer h={6} />
|
{contract.description && <Spacer h={6} />}
|
||||||
|
|
||||||
<ContractDescription
|
<ContractDescription
|
||||||
className="px-2"
|
className="px-2"
|
||||||
|
|
|
@ -97,9 +97,10 @@ function groupBets(
|
||||||
hideOutcome: boolean
|
hideOutcome: boolean
|
||||||
abbreviated: boolean
|
abbreviated: boolean
|
||||||
smallAvatar: boolean
|
smallAvatar: boolean
|
||||||
|
reversed: boolean
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
const { hideOutcome, abbreviated, smallAvatar } = options
|
const { hideOutcome, abbreviated, smallAvatar, reversed } = options
|
||||||
|
|
||||||
const commentsMap = mapCommentsByBetId(comments)
|
const commentsMap = mapCommentsByBetId(comments)
|
||||||
const items: ActivityItem[] = []
|
const items: ActivityItem[] = []
|
||||||
|
@ -171,7 +172,9 @@ function groupBets(
|
||||||
if (group.length > 0) {
|
if (group.length > 0) {
|
||||||
pushGroup()
|
pushGroup()
|
||||||
}
|
}
|
||||||
return abbreviated ? items.slice(-3) : items
|
const abbrItems = abbreviated ? items.slice(-3) : items
|
||||||
|
if (reversed) abbrItems.reverse()
|
||||||
|
return abbrItems
|
||||||
}
|
}
|
||||||
|
|
||||||
function getAnswerGroups(
|
function getAnswerGroups(
|
||||||
|
@ -182,9 +185,10 @@ function getAnswerGroups(
|
||||||
options: {
|
options: {
|
||||||
sortByProb: boolean
|
sortByProb: boolean
|
||||||
abbreviated: boolean
|
abbreviated: boolean
|
||||||
|
reversed: boolean
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
const { sortByProb, abbreviated } = options
|
const { sortByProb, abbreviated, reversed } = options
|
||||||
|
|
||||||
let outcomes = _.uniq(bets.map((bet) => bet.outcome)).filter(
|
let outcomes = _.uniq(bets.map((bet) => bet.outcome)).filter(
|
||||||
(outcome) => getOutcomeProbability(contract, outcome) > 0.0001
|
(outcome) => getOutcomeProbability(contract, outcome) > 0.0001
|
||||||
|
@ -208,9 +212,8 @@ function getAnswerGroups(
|
||||||
outcomes = outcomes.slice(-2)
|
outcomes = outcomes.slice(-2)
|
||||||
}
|
}
|
||||||
if (sortByProb) {
|
if (sortByProb) {
|
||||||
outcomes = _.sortBy(
|
outcomes = _.sortBy(outcomes, (outcome) =>
|
||||||
outcomes,
|
getOutcomeProbability(contract, outcome)
|
||||||
(outcome) => -1 * getOutcomeProbability(contract, outcome)
|
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
// Sort by recent bet.
|
// Sort by recent bet.
|
||||||
|
@ -233,6 +236,7 @@ function getAnswerGroups(
|
||||||
hideOutcome: true,
|
hideOutcome: true,
|
||||||
abbreviated,
|
abbreviated,
|
||||||
smallAvatar: true,
|
smallAvatar: true,
|
||||||
|
reversed,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (abbreviated) items = items.slice(-2)
|
if (abbreviated) items = items.slice(-2)
|
||||||
|
@ -264,6 +268,8 @@ export function getAllContractActivityItems(
|
||||||
const { abbreviated } = options
|
const { abbreviated } = options
|
||||||
const { outcomeType } = contract
|
const { outcomeType } = contract
|
||||||
|
|
||||||
|
const reversed = !abbreviated
|
||||||
|
|
||||||
bets =
|
bets =
|
||||||
outcomeType === 'BINARY'
|
outcomeType === 'BINARY'
|
||||||
? bets.filter((bet) => !bet.isAnte && !bet.isRedemption)
|
? bets.filter((bet) => !bet.isAnte && !bet.isRedemption)
|
||||||
|
@ -301,12 +307,14 @@ export function getAllContractActivityItems(
|
||||||
{
|
{
|
||||||
sortByProb: true,
|
sortByProb: true,
|
||||||
abbreviated,
|
abbreviated,
|
||||||
|
reversed,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
: groupBets(bets, comments, contract, user?.id, {
|
: groupBets(bets, comments, contract, user?.id, {
|
||||||
hideOutcome: !!filterToOutcome,
|
hideOutcome: !!filterToOutcome,
|
||||||
abbreviated,
|
abbreviated,
|
||||||
smallAvatar: !!filterToOutcome,
|
smallAvatar: !!filterToOutcome,
|
||||||
|
reversed,
|
||||||
}))
|
}))
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -317,14 +325,7 @@ export function getAllContractActivityItems(
|
||||||
items.push({ type: 'resolve', id: `${contract.resolutionTime}`, contract })
|
items.push({ type: 'resolve', id: `${contract.resolutionTime}`, contract })
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!abbreviated) {
|
if (reversed) items.reverse()
|
||||||
items.reverse()
|
|
||||||
for (const item of items) {
|
|
||||||
if (item.type === 'answergroup') {
|
|
||||||
item.items.reverse()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return items
|
return items
|
||||||
}
|
}
|
||||||
|
@ -362,12 +363,14 @@ export function getRecentContractActivityItems(
|
||||||
{
|
{
|
||||||
sortByProb: false,
|
sortByProb: false,
|
||||||
abbreviated: true,
|
abbreviated: true,
|
||||||
|
reversed: false,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
: groupBets(bets, comments, contract, user?.id, {
|
: groupBets(bets, comments, contract, user?.id, {
|
||||||
hideOutcome: false,
|
hideOutcome: false,
|
||||||
abbreviated: true,
|
abbreviated: true,
|
||||||
smallAvatar: false,
|
smallAvatar: false,
|
||||||
|
reversed: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
return [questionItem, ...items]
|
return [questionItem, ...items]
|
||||||
|
|
|
@ -143,17 +143,7 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
|
||||||
contract={contract}
|
contract={contract}
|
||||||
bets={bets ?? []}
|
bets={bets ?? []}
|
||||||
comments={comments ?? []}
|
comments={comments ?? []}
|
||||||
>
|
/>
|
||||||
{contract.outcomeType === 'FREE_RESPONSE' && (
|
|
||||||
<>
|
|
||||||
<Spacer h={4} />
|
|
||||||
<AnswersPanel
|
|
||||||
contract={contract as FullContract<DPM, FreeResponse>}
|
|
||||||
/>
|
|
||||||
<Spacer h={4} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</ContractOverview>
|
|
||||||
|
|
||||||
{contract.isResolved && (
|
{contract.isResolved && (
|
||||||
<>
|
<>
|
||||||
|
@ -175,6 +165,15 @@ export function ContractPageContent(props: FirstArgument<typeof ContractPage>) {
|
||||||
bets={bets}
|
bets={bets}
|
||||||
comments={comments}
|
comments={comments}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{contract.outcomeType === 'FREE_RESPONSE' && (
|
||||||
|
<>
|
||||||
|
<Spacer h={4} />
|
||||||
|
<AnswersPanel
|
||||||
|
contract={contract as FullContract<DPM, FreeResponse>}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</Col>
|
</Col>
|
||||||
</Page>
|
</Page>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user