Introduce forecast view toggle for final rounds (#252)

Co-authored-by: Kevin Hays <kevinhays@google.com>

Author: jonatanklosko

client/src/components/ResultStat/ResultStat.jsx

@@ -7,7 +7,7 @@ import {
 } from "../../lib/attempt-result";
 import { shouldComputeAverage } from "../../lib/result";
 
-function ResultStat({ result, field, eventId, format }) {
+function ResultStat({ result, field, eventId, format, forecastView }) {
   if (
     field === "average" &&
     result.average === 0 &&
@@ -18,6 +18,16 @@ function ResultStat({ result, field, eventId, format }) {
     if (format.numberOfAttempts === 5 && result.attempts.length === 4) {
       return (
         <Box component="span" sx={{ opacity: 0.5 }}>
+          {forecastView && (
+            <>
+              <Tooltip title="Projected average">
+                <span>
+                  {formatAttemptResult(result.projectedAverage, eventId)}
+                </span>
+              </Tooltip>
+              {" ("}
+            </>
+          )}
           <Tooltip title="Best possible average">
             <span>
               {formatAttemptResult(
@@ -35,6 +45,17 @@ function ResultStat({ result, field, eventId, format }) {
               )}
             </span>
           </Tooltip>
+          {forecastView && <>{")"}</>}
+        </Box>
+      );
+    }
+
+    if (forecastView) {
+      return (
+        <Box component="span" sx={{ opacity: 0.5 }}>
+          <Tooltip title="Projected average">
+            <span>{formatAttemptResult(result.projectedAverage, eventId)}</span>
+          </Tooltip>
         </Box>
       );
     }

client/src/components/ResultsProjector/ResultsProjector.jsx

@@ -21,7 +21,11 @@ import CloseIcon from "@mui/icons-material/Close";
 import FlagIcon from "../FlagIcon/FlagIcon";
 import { times } from "../../lib/utils";
 import { formatAttemptResult } from "../../lib/attempt-result";
-import { orderedResultStats, paddedAttemptResults } from "../../lib/result";
+import {
+  resultsForView,
+  orderedResultStats,
+  paddedAttemptResults,
+} from "../../lib/result";
 import RecordTagBadge from "../RecordTagBadge/RecordTagBadge";
 import ResultStat from "../ResultStat/ResultStat";
 
@@ -72,13 +76,19 @@ function getNumberOfRows() {
   return Math.floor((window.innerHeight - 64 - 56) / 67);
 }
 
-function ResultsProjector({ results, format, eventId, title, exitUrl }) {
+function ResultsProjector({
+  results,
+  format,
+  eventId,
+  title,
+  exitUrl,
+  forecastView,
+}) {
   const [status, setStatus] = useState(STATUS.SHOWING);
   const [topResultIndex, setTopResultIndex] = useState(0);
 
   const stats = orderedResultStats(eventId, format);
-
-  const nonemptyResults = results.filter(
+  const nonemptyResults = resultsForView(results, format, forecastView).filter(
     (result) => result.attempts.length > 0
   );
 
@@ -237,6 +247,7 @@ function ResultsProjector({ results, format, eventId, title, exitUrl }) {
                             field={field}
                             eventId={eventId}
                             format={format}
+                            forecastView={forecastView}
                           />
                         </RecordTagBadge>
                       </TableCell>

client/src/components/Round/Round.jsx

@@ -50,6 +50,10 @@ const ROUND_QUERY = gql`
         numberOfAttempts
         sortBy
       }
+      advancementCondition {
+        level
+        type
+      }
       results {
         id
         ...roundResult
@@ -85,11 +89,17 @@ function Round() {
   });
 
   const [previousData, setPreviousData] = useState(null);
+  const [forecastView, setForecastView] = useState(false);
 
   useEffect(() => {
     if (newData) setPreviousData(newData);
   }, [newData]);
 
+  useEffect(() => {
+    // Reset to default on round change
+    setForecastView(false);
+  }, [roundId]);
+
   // When the round changes, show the old data until the new is loaded.
   const data = newData || previousData;
 
@@ -115,7 +125,12 @@ function Round() {
       {loading && <Loading />}
       <Grid container direction="column" spacing={1}>
         <Grid item>
-          <RoundToolbar round={round} competitionId={competitionId} />
+          <RoundToolbar
+            round={round}
+            competitionId={competitionId}
+            forecastView={forecastView}
+            setForecastView={setForecastView}
+          />
         </Grid>
         <Grid item>
           <Routes>
@@ -128,6 +143,7 @@ function Round() {
                   eventId={round.competitionEvent.event.id}
                   title={`${round.competitionEvent.event.name} - ${round.name}`}
                   exitUrl={`/competitions/${competitionId}/rounds/${roundId}`}
+                  forecastView={forecastView}
                 />
               }
             />
@@ -141,6 +157,7 @@ function Round() {
                   format={round.format}
                   eventId={round.competitionEvent.event.id}
                   competitionId={competitionId}
+                  forecastView={forecastView}
                 />
               }
             />

client/src/components/Round/RoundToolbar.jsx

@@ -8,9 +8,12 @@ import {
 } from "@mui/material";
 import TvIcon from "@mui/icons-material/Tv";
 import PrintIcon from "@mui/icons-material/Print";
+import InsightsIcon from "@mui/icons-material/Insights";
+import TimelineIcon from "@mui/icons-material/Timeline";
 import { appUrl } from "../../lib/urls";
+import { forecastViewSupported } from "../../lib/result";
 
-function RoundToolbar({ round, competitionId }) {
+function RoundToolbar({ round, competitionId, forecastView, setForecastView }) {
   const mdScreen = useMediaQuery((theme) => theme.breakpoints.up("md"));
 
   return (
@@ -23,6 +26,31 @@ function RoundToolbar({ round, competitionId }) {
       <Grid item style={{ flexGrow: 1 }} />
       {mdScreen && (
         <Grid item>
+          {forecastView ? (
+            <Tooltip title="Default view" placement="top">
+              <IconButton onClick={() => setForecastView(false)} size="large">
+                <TimelineIcon />
+              </IconButton>
+            </Tooltip>
+          ) : (
+            <Tooltip
+              title={
+                <div>
+                  Forecast view:
+                  <div>- shows projected average for incomplete results</div>
+                </div>
+              }
+              placement="top"
+            >
+              <IconButton
+                onClick={() => setForecastView(true)}
+                size="large"
+                disabled={!forecastViewSupported(round)}
+              >
+                <InsightsIcon />
+              </IconButton>
+            </Tooltip>
+          )}
           <Tooltip title="PDF" placement="top">
             <IconButton
               component="a"

client/src/components/RoundResults/RoundResults.jsx

@@ -5,7 +5,13 @@ import RoundResultDialog from "./RoundResultDialog";
 
 const DEFAULT_VISIBLE_RESULTS = 100;
 
-function RoundResults({ results, format, eventId, competitionId }) {
+function RoundResults({
+  results,
+  format,
+  eventId,
+  competitionId,
+  forecastView,
+}) {
   const smScreen = useMediaQuery((theme) => theme.breakpoints.up("sm"));
 
   const [selectedResult, setSelectedResult] = useState(null);
@@ -35,6 +41,7 @@ function RoundResults({ results, format, eventId, competitionId }) {
             eventId={eventId}
             competitionId={competitionId}
             onResultClick={handleResultClick}
+            forecastView={forecastView}
           />
         </Grid>
         {!showAll && (

client/src/components/RoundResults/RoundResultsTable.jsx

@@ -14,7 +14,11 @@ import { green } from "@mui/material/colors";
 import { alpha } from "@mui/material/styles";
 import { times } from "../../lib/utils";
 import { formatAttemptResult } from "../../lib/attempt-result";
-import { orderedResultStats, paddedAttemptResults } from "../../lib/result";
+import {
+  resultsForView,
+  orderedResultStats,
+  paddedAttemptResults,
+} from "../../lib/result";
 import RecordTagBadge from "../RecordTagBadge/RecordTagBadge";
 import ResultStat from "../ResultStat/ResultStat";
 
@@ -47,12 +51,20 @@ const styles = {
 };
 
 const RoundResultsTable = memo(
-  ({ results, format, eventId, competitionId, onResultClick }) => {
+  ({
+    results,
+    format,
+    eventId,
+    competitionId,
+    onResultClick,
+    forecastView,
+  }) => {
     const smScreen = useMediaQuery((theme) => theme.breakpoints.up("sm"));
     const mdScreen = useMediaQuery((theme) => theme.breakpoints.up("md"));
 
     const stats = orderedResultStats(eventId, format);
 
+    const viewResults = resultsForView(results, format, forecastView);
     return (
       <Paper>
         <Table size="small">
@@ -80,7 +92,7 @@ const RoundResultsTable = memo(
             </TableRow>
           </TableHead>
           <TableBody>
-            {results.map((result) => (
+            {viewResults.map((result) => (
               <TableRow
                 key={result.id}
                 hover
@@ -144,6 +156,7 @@ const RoundResultsTable = memo(
                         field={field}
                         eventId={eventId}
                         format={format}
+                        forecastView={forecastView}
                       />
                     </RecordTagBadge>
                   </TableCell>

client/src/components/admin/AdminRound/AdminResultsTable.jsx

@@ -167,6 +167,7 @@ const AdminResultsTable = memo(
                       field={field}
                       eventId={eventId}
                       format={format}
+                      forecastView={false}
                     />
                   </RecordTagBadge>
                 </TableCell>

client/src/lib/attempt-result.js

@@ -5,14 +5,18 @@ export const SKIPPED_VALUE = 0;
 export const DNF_VALUE = -1;
 export const DNS_VALUE = -2;
 
-function isComplete(attemptResult) {
+export function isComplete(attemptResult) {
   return attemptResult > 0;
 }
 
-function isSkipped(attemptResult) {
+export function isSkipped(attemptResult) {
   return attemptResult === SKIPPED_VALUE;
 }
 
+export function toMonotonic(attemptResult) {
+  return isComplete(attemptResult) ? attemptResult : Infinity;
+}
+
 function compareAttemptResults(attemptResult1, attemptResult2) {
   if (!isComplete(attemptResult1) && !isComplete(attemptResult2)) return 0;
   if (!isComplete(attemptResult1) && isComplete(attemptResult2)) return 1;
@@ -80,7 +84,7 @@ export function average(attemptResults, eventId) {
     const scaled = attemptResults.map((attemptResult) => attemptResult * 100);
     switch (attemptResults.length) {
       case 3:
-        return meanOf3(scaled);
+        return meanOfX(scaled);
       case 5:
         return averageOf5(scaled);
       default:
@@ -92,7 +96,7 @@ export function average(attemptResults, eventId) {
 
   switch (attemptResults.length) {
     case 3:
-      return truncateOver10Mins(meanOf3(attemptResults));
+      return truncateOver10Mins(meanOfX(attemptResults));
     case 5:
       return truncateOver10Mins(averageOf5(attemptResults));
     default:
@@ -111,10 +115,10 @@ function truncateOver10Mins(value) {
 
 function averageOf5(attemptResults) {
   const [, x, y, z] = attemptResults.slice().sort(compareAttemptResults);
-  return meanOf3([x, y, z]);
+  return meanOfX([x, y, z]);
 }
 
-function meanOf3(attemptResults) {
+function meanOfX(attemptResults) {
   if (!attemptResults.every(isComplete)) return DNF_VALUE;
   return mean(attemptResults);
 }
@@ -124,6 +128,48 @@ function mean(values) {
   return Math.round(sum / values.length);
 }
 
+/**
+ * Returns projected average.
+ *
+ * Note that contrarily to other functions in this module, this
+ * function expects a non-padded and incomplete list of attempt
+ * results (without trailing skipped values).
+ *
+ * Projections are defined as follows:
+ *
+ *   - mo3 events: mean of current solves
+ *   - ao5 events:
+ *     - 1-2 solves: mean of current solves
+ *     - 3-4 solves: median of current solves
+ *
+ * When all result attempts are present, the return value is the same
+ * as the usual average.
+ */
+export function projectedAverage(attemptResults, format) {
+  if (attemptResults.length === 0) return SKIPPED_VALUE;
+
+  if (format.numberOfAttempts === 3) {
+    return meanOfX(attemptResults);
+  }
+
+  if (format.numberOfAttempts === 5) {
+    if (attemptResults.length < 3) {
+      return meanOfX(attemptResults);
+    }
+    if (attemptResults.length === 3) {
+      const [, x] = attemptResults.slice().sort(compareAttemptResults);
+      return x;
+    }
+    if (attemptResults.length === 4) {
+      const [, x, y] = attemptResults.slice().sort(compareAttemptResults);
+      return meanOfX([x, y]);
+    }
+    return averageOf5(attemptResults);
+  }
+
+  throw new Error("Unexpected format");
+}
+
 /**
  * Calculates the best possible average of 5 for the given attempts.
  *
@@ -142,7 +188,7 @@ export function bestPossibleAverage(attemptResults) {
   }
 
   const [x, y, z] = attemptResults.slice().sort(compareAttemptResults);
-  const mean = meanOf3([x, y, z]);
+  const mean = meanOfX([x, y, z]);
   return truncateOver10Mins(mean);
 }
 
@@ -164,7 +210,7 @@ export function worstPossibleAverage(attemptResults) {
   }
 
   const [, x, y, z] = attemptResults.slice().sort(compareAttemptResults);
-  const mean = meanOf3([x, y, z]);
+  const mean = meanOfX([x, y, z]);
   return truncateOver10Mins(mean);
 }