Show the question, but disabled, before they click to see the data in…

… hny
honeycombio · Sep 15, 2024 · e528d61 · e528d61
1 parent d1f5580
commit e528d61
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/src/BoothGame/analyzeData/DataQuestion.tsx b/src/BoothGame/analyzeData/DataQuestion.tsx
@@ -7,8 +7,8 @@ import { MultipleChoice, MultipleChoiceResult } from "./MultipleChoice";
 import { DataQuestionParameters } from "./DataQuestionParameters";
 import popOutIndicator from "../../../static/images/arrowSquareUpRight.svg";
 
-const PleaseLookAtTheData = { questionVisible: false };
-const LookedAtTheData = { questionVisible: true };
+const PleaseLookAtTheData = { questionEnabled: false };
+const LookedAtTheData = { questionEnabled: true };
 
 type DataQuestionState = typeof PleaseLookAtTheData | typeof LookedAtTheData;
 
@@ -36,16 +36,16 @@ function DataQuestionInternal<T>(props: DataQuestionProps<T>) {
     setState(LookedAtTheData);
   }
 
-  const questionAndAnswer = state.questionVisible ? (
+  const questionAndAnswer =
     <MultipleChoice<T>
+      enabled={state.questionEnabled}
       questionText={<>Which question led to the slowest response?</>}
       queryDefinition={queryDefinition}
       queryName="Slowest response from LLM"
       dataset={BACKEND_DATASET_NAME}
       moveOn={props.moveForward}
       interpretData={props.interpretData}
-    />
-  ) : null;
+    />;
 
   return (
     <div>

diff --git a/src/BoothGame/analyzeData/DataQuestionParameters.tsx b/src/BoothGame/analyzeData/DataQuestionParameters.tsx
@@ -22,7 +22,7 @@ export const whichResponseTookTheLongestQuestionParameters = (activeLifecycleSpa
     ,
     queryDefinition: queryForLongestLLMResponse(activeLifecycleSpan, honeycombTeam),
     datasetSlug: BACKEND_DATASET_NAME,
-    interpretData
+interpretData
 });
 
 function interpretData(data: DataFromLongestLLMResponse[]): WhatMultipleChoiceNeedsToKnow {

diff --git a/src/BoothGame/analyzeData/MultipleChoice.tsx b/src/BoothGame/analyzeData/MultipleChoice.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { ComponentLifecycleTracing, ActiveLifecycleSpan } from "../../tracing/ComponentLifecycleTracing";
 import { HoneycombTeamContext } from "../HoneycombTeamContext";
 import { fetchFromBackend } from "../../tracing/fetchFromBackend";
@@ -105,6 +105,7 @@ type MultipleChoiceInternalProps = {
   answers: AnswerOption[],
   scoreAnswer: (a: AnswerOption) => Score
   moveOn: (result: MultipleChoiceResult) => void;
+  enabled: boolean
 };
 
 export type AnswerOption = {
@@ -117,10 +118,18 @@ export type Score = {
   remark: string
 }
 
+const NoAnswerAllowedYet = {
+  name: "no answer allowed yet",
+  answer: undefined,
+  button: "Submit",
+  buttonEnabled: false,
+  radioButtonsEnabled: false,
+};
+
 const NoAnswerPicked = {
   name: "no answer picked",
   answer: undefined,
-  button: "submit",
+  button: "Submit",
   buttonEnabled: false,
   radioButtonsEnabled: true,
 };
@@ -144,10 +153,17 @@ type MultipleChoiceInternalState = typeof NoAnswerPicked | PickedOne | DeliverVe
 
 function MultipleChoiceInternal(props: MultipleChoiceInternalProps) {
   const activeLifecycleSpan = React.useContext(ActiveLifecycleSpan);
-  const [state, setState] = useLocalTracedState<MultipleChoiceInternalState>(NoAnswerPicked, {
+  const [state, setState] = useLocalTracedState<MultipleChoiceInternalState>(props.enabled ? NoAnswerPicked : NoAnswerAllowedYet, {
     componentName: "MultipleChoiceDisplay",
   });
 
+  useEffect(() => {
+    // this state update comes in from outside
+    if (state.name === "no answer allowed yet" && props.enabled) {
+       setState(NoAnswerPicked);
+    }
+  }, [props.enabled, state])
+
   const answers = props.answers
 
   const handleSelection = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -242,6 +258,7 @@ type MultipleChoiceProps<ParticularQueryData> = {
   dataset: string;
   interpretData: (data: ParticularQueryData[]) => WhatMultipleChoiceNeedsToKnow;
   moveOn: (result: MultipleChoiceResult) => void;
+  enabled: boolean;
 };
 export function MultipleChoice<ParticularQueryData>(props: MultipleChoiceProps<ParticularQueryData>) {
   return (