From 020f0c0c5ea84bfd9c0eac531446ee85a7d4b16d Mon Sep 17 00:00:00 2001 From: NunoSempere Date: Fri, 20 May 2022 13:53:21 -0400 Subject: [PATCH] tweak: Further question page changes - Add estimate of likeliest option to top - Or of event happening for yes/no questions - Restore selection highlight from legend - But avoid weird color errors - Add a bunch of parameters to QuestionOptions - I could just have added a flag for isInQuestionPage, - Not sure if this is the best way to go about this I'm not particularly planning to continue with changes in the upcoming days --- .../components/HistoryChart/InnerChart.tsx | 20 +-- .../components/QuestionCard/index.tsx | 14 +- .../questions/components/QuestionOptions.tsx | 78 +++++++++-- src/web/questions/pages/QuestionPage.tsx | 123 ++++++++++-------- 4 files changed, 156 insertions(+), 79 deletions(-) diff --git a/src/web/questions/components/HistoryChart/InnerChart.tsx b/src/web/questions/components/HistoryChart/InnerChart.tsx index 0cbcce5..872c9d6 100644 --- a/src/web/questions/components/HistoryChart/InnerChart.tsx +++ b/src/web/questions/components/HistoryChart/InnerChart.tsx @@ -36,8 +36,8 @@ const getVictoryGroup = ({ style={{ data: { // strokeOpacity: highlight ? 1 : 0.5, - strokeOpacity: 0.6, - strokeWidth: 3, + strokeOpacity: highlight && !isBinary ? 0.8 : 0.6, + strokeWidth: highlight && !isBinary ? 4 : 3, }, }} /> @@ -196,14 +196,14 @@ export const InnerChart: React.FC = ({ // note: this produces an annoying change of color effect /* highlight === undefined - ? null - : // render highlighted series on top of everything else - getVictoryGroup({ - data: seriesList[highlight], - i: highlight, - highlight: true, - }) - */ + ? null + : // render highlighted series on top of everything else + getVictoryGroup({ + data: seriesList[highlight], + i: highlight, + highlight: true, + }) + */ } ); diff --git a/src/web/questions/components/QuestionCard/index.tsx b/src/web/questions/components/QuestionCard/index.tsx index 0cba25b..9652339 100644 --- a/src/web/questions/components/QuestionCard/index.tsx +++ b/src/web/questions/components/QuestionCard/index.tsx @@ -116,14 +116,24 @@ export const QuestionCard: React.FC = ({ {isBinary ? (
- +
) : (
- +
diff --git a/src/web/questions/components/QuestionOptions.tsx b/src/web/questions/components/QuestionOptions.tsx index b6e77cb..2caa95f 100644 --- a/src/web/questions/components/QuestionOptions.tsx +++ b/src/web/questions/components/QuestionOptions.tsx @@ -1,4 +1,7 @@ -import { FullQuestionOption, isFullQuestionOption } from "../../../common/types"; +import { + FullQuestionOption, + isFullQuestionOption, +} from "../../../common/types"; import { QuestionFragment } from "../../fragments.generated"; import { isQuestionBinary } from "../../utils"; import { formatProbability } from "../utils"; @@ -89,26 +92,38 @@ const chooseColor = (probability: number) => { } }; -const OptionRow: React.FC<{ option: FullQuestionOption }> = ({ option }) => { +const OptionRow: React.FC<{ + option: FullQuestionOption; + optionTextSize: string; +}> = ({ option, optionTextSize }) => { return (
{formatProbability(option.probability)}
-
+
{option.name}
); }; -export const QuestionOptions: React.FC<{ question: QuestionFragment }> = ({ - question, -}) => { +export const QuestionOptions: React.FC<{ + question: QuestionFragment; + maxNumOptions: number; + optionTextSize: string; + onlyFirstEstimate: boolean; +}> = ({ question, maxNumOptions, optionTextSize, onlyFirstEstimate }) => { const isBinary = isQuestionBinary(question); if (isBinary) { @@ -124,30 +139,65 @@ export const QuestionOptions: React.FC<{ question: QuestionFragment }> = ({ {formatProbability(yesOption.probability)} {primaryEstimateAsText(yesOption.probability)}
); + } else if (onlyFirstEstimate) { + if (question.options.length > 0) { + const yesOption = + question.options.length > 0 ? question.options[0] : null; + if (!yesOption) { + return null; // shouldn't happen + } + if (!isFullQuestionOption(yesOption)) { + return null; // missing data + } + return ( +
+ + {formatProbability(yesOption.probability)} + + + {yesOption.name} + +
+ ); + } else { + return null; + } } else { const optionsSorted = question.options .filter(isFullQuestionOption) .sort((a, b) => b.probability - a.probability); - const optionsMax5 = optionsSorted.slice(0, 5); // display max 5 options. + const optionsMaxN = optionsSorted.slice(0, maxNumOptions); // display max 5 options. return (
- {optionsMax5.map((option, i) => ( - + {optionsMaxN.map((option, i) => ( + ))}
); diff --git a/src/web/questions/pages/QuestionPage.tsx b/src/web/questions/pages/QuestionPage.tsx index 44c2f88..0429c72 100644 --- a/src/web/questions/pages/QuestionPage.tsx +++ b/src/web/questions/pages/QuestionPage.tsx @@ -12,6 +12,7 @@ import { CaptureQuestion } from "../components/CaptureQuestion"; import { HistoryChart } from "../components/HistoryChart"; import { IndicatorsTable } from "../components/IndicatorsTable"; import { Stars } from "../components/Stars"; +import { QuestionOptions } from "../components/QuestionOptions"; import { QuestionPageDocument } from "../queries.generated"; interface Props { @@ -49,62 +50,78 @@ const Section: React.FC<{ title: string }> = ({ title, children }) => ( const LargeQuestionCard: React.FC<{ question: QuestionWithHistoryFragment; -}> = ({ question }) => ( - -

- - {question.title}{" "} - -

+}> = ({ question }) => { + let probabilities = question.options; + let optionsOrderedByProbability = question.options.sort((a, b) => + (a.probability || 0) > (b.probability || 0) ? -1 : 1 + ); + let optionWithHighestProbability = + question.options.length > 0 ? [optionsOrderedByProbability[0]] : []; - - -
- {question.platform.id === "guesstimate" && question.visualization ? ( - - Guesstimate Screenshot - - ) : ( - - )} -
- - - -); + {question.title}{" "} + + + + +
+ {question.platform.id === "guesstimate" && question.visualization ? ( + + Guesstimate Screenshot + + ) : ( + + )} +
+ +
+
+ + {question.description.replaceAll("---", "")} + +
+
+
+ +
+
+
+ + ); +}; const QuestionScreen: React.FC<{ question: QuestionWithHistoryFragment }> = ({ question, }) => (