open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve free response answer ux (#131)

Browse Source 
* Remove number from chosen FR answer

* Distinguish wining and losing FR answers

* Show no answers text

* Simplify get answer items logic

* Show answer number

* Show answer # when resolving
This commit is contained in:
Boa 2022-05-04 16:03:06 -06:00 committed by GitHub
parent bf8e09b6c1
commit 9480f9f34c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/answers/answer-item.tsx
View File

@ -68,7 +68,7 @@ export function AnswerItem(props: {
</Row> </Row>
</SiteLink> </SiteLink>
{/* TODO: Show total pool? */} {/* TODO: Show total pool? */}
<div className="text-base">#{number}</div> <div className="text-base">{showChoice && '#' + number}</div>
</Row> </Row>
</Col> </Col>

29
web/components/answers/answers-panel.tsx
View File

@ -24,7 +24,7 @@ export function AnswersPanel(props: {
const { creatorId, resolution, resolutions, totalBets } = contract const { creatorId, resolution, resolutions, totalBets } = contract
const answers = useAnswers(contract.id) ?? contract.answers const answers = useAnswers(contract.id) ?? contract.answers
const [winningAnswers, otherAnswers] = _.partition( const [winningAnswers, losingAnswers] = _.partition(
answers.filter( answers.filter(
(answer) => answer.id !== '0' && totalBets[answer.id] > 0.000000001 (answer) => answer.id !== '0' && totalBets[answer.id] > 0.000000001
), ),
@ -36,7 +36,7 @@ export function AnswersPanel(props: {
resolutions ? -1 * resolutions[answer.id] : 0 resolutions ? -1 * resolutions[answer.id] : 0
), ),
..._.sortBy( ..._.sortBy(
resolution ? [] : otherAnswers, resolution ? [] : losingAnswers,
(answer) => -1 * getDpmOutcomeProbability(contract.totalShares, answer.id) (answer) => -1 * getDpmOutcomeProbability(contract.totalShares, answer.id)
), ),
] ]
@ -52,7 +52,11 @@ export function AnswersPanel(props: {
const chosenTotal = _.sum(Object.values(chosenAnswers)) const chosenTotal = _.sum(Object.values(chosenAnswers))
const answerItems = getAnswers(contract, user) const answerItems = getAnswerItems(
contract,
losingAnswers.length > 0 ? losingAnswers : sortedAnswers,
user
)
const onChoose = (answerId: string, prob: number) => { const onChoose = (answerId: string, prob: number) => {
if (resolveOption === 'CHOOSE') { if (resolveOption === 'CHOOSE') {
@ -89,9 +93,7 @@ export function AnswersPanel(props: {
return ( return (
<Col className="gap-3"> <Col className="gap-3">
{(resolveOption === 'CHOOSE' || {(resolveOption || resolution) &&
resolveOption === 'CHOOSE_MULTIPLE' ||
resolution === 'MKT') &&
sortedAnswers.map((answer) => ( sortedAnswers.map((answer) => (
<AnswerItem <AnswerItem
key={answer.id} key={answer.id}
@ -105,11 +107,7 @@ export function AnswersPanel(props: {
/> />
))} ))}
{sortedAnswers.length === 0 && ( {!resolveOption && (
<div className="pb-4 text-gray-500">No answers yet...</div>
)}
{!resolveOption && sortedAnswers.length > 0 && (
<FeedItems <FeedItems
contract={contract} contract={contract}
items={answerItems} items={answerItems}
@ -118,6 +116,10 @@ export function AnswersPanel(props: {
/> />
)} )}
{answers.length <= 1 && (
<div className="pb-4 text-gray-500">No answers yet...</div>
)}
{tradingAllowed(contract) && {tradingAllowed(contract) &&
(!resolveOption || resolveOption === 'CANCEL') && ( (!resolveOption || resolveOption === 'CANCEL') && (
<CreateAnswerPanel contract={contract} /> <CreateAnswerPanel contract={contract} />
@ -138,12 +140,11 @@ export function AnswersPanel(props: {
) )
} }
function getAnswers( function getAnswerItems(
contract: FullContract<DPM, FreeResponse>, contract: FullContract<DPM, FreeResponse>,
answers: Answer[],
user: User | undefined | null user: User | undefined | null
) { ) {
const { answers } = contract
let outcomes = _.uniq( let outcomes = _.uniq(
answers.map((answer) => answer.number.toString()) answers.map((answer) => answer.number.toString())
).filter((outcome) => getOutcomeProbability(contract, outcome) > 0.0001) ).filter((outcome) => getOutcomeProbability(contract, outcome) > 0.0001)