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>
</SiteLink>
{/* TODO: Show total pool? */}
<div className="text-base">#{number}</div>
<div className="text-base">{showChoice && '#' + number}</div>
</Row>
</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 answers = useAnswers(contract.id) ?? contract.answers
const [winningAnswers, otherAnswers] = _.partition(
const [winningAnswers, losingAnswers] = _.partition(
answers.filter(
(answer) => answer.id !== '0' && totalBets[answer.id] > 0.000000001
),
@ -36,7 +36,7 @@ export function AnswersPanel(props: {
resolutions ? -1 * resolutions[answer.id] : 0
),
..._.sortBy(
resolution ? [] : otherAnswers,
resolution ? [] : losingAnswers,
(answer) => -1 * getDpmOutcomeProbability(contract.totalShares, answer.id)
),
]
@ -52,7 +52,11 @@ export function AnswersPanel(props: {
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) => {
if (resolveOption === 'CHOOSE') {
@ -89,9 +93,7 @@ export function AnswersPanel(props: {
return (
<Col className="gap-3">
{(resolveOption === 'CHOOSE' ||
resolveOption === 'CHOOSE_MULTIPLE' ||
resolution === 'MKT') &&
{(resolveOption || resolution) &&
sortedAnswers.map((answer) => (
<AnswerItem
key={answer.id}
@ -105,11 +107,7 @@ export function AnswersPanel(props: {
/>
))}
{sortedAnswers.length === 0 && (
<div className="pb-4 text-gray-500">No answers yet...</div>
)}
{!resolveOption && sortedAnswers.length > 0 && (
{!resolveOption && (
<FeedItems
contract={contract}
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) &&
(!resolveOption || resolveOption === 'CANCEL') && (
<CreateAnswerPanel contract={contract} />
@ -138,12 +140,11 @@ export function AnswersPanel(props: {
)
}
function getAnswers(
function getAnswerItems(
contract: FullContract<DPM, FreeResponse>,
answers: Answer[],
user: User | undefined | null
) {
const { answers } = contract
let outcomes = _.uniq(
answers.map((answer) => answer.number.toString())
).filter((outcome) => getOutcomeProbability(contract, outcome) > 0.0001)