From a0d60bbaddee686d276d9c798e0063ef44df815e Mon Sep 17 00:00:00 2001 From: abrar Date: Thu, 4 Sep 2025 23:31:53 -0600 Subject: [PATCH 1/5] generalized metadata task component --- public/stage-1-covid/config-stage-1.json | 2 +- ...etadataTask.tsx => MetadataRankingTask.tsx} | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) rename src/public/viz-guardrails/{CovidMetadataTask.tsx => MetadataRankingTask.tsx} (82%) diff --git a/public/stage-1-covid/config-stage-1.json b/public/stage-1-covid/config-stage-1.json index 060b8f86f6..6dfdf57990 100644 --- a/public/stage-1-covid/config-stage-1.json +++ b/public/stage-1-covid/config-stage-1.json @@ -141,7 +141,7 @@ }, "covid-metadata-task": { "type": "react-component", - "path": "viz-guardrails/CovidMetadataTask.tsx", + "path": "viz-guardrails/MetadataRankingTask.tsx", "instruction": "Below are four different visualizations (A–D) of COVID-19 data for Norway. Please review each chart and select the one you think is the most useful comparison for Norway.", "parameters": { "dataset": "clean_data", diff --git a/src/public/viz-guardrails/CovidMetadataTask.tsx b/src/public/viz-guardrails/MetadataRankingTask.tsx similarity index 82% rename from src/public/viz-guardrails/CovidMetadataTask.tsx rename to src/public/viz-guardrails/MetadataRankingTask.tsx index e8ea78778f..439438ce00 100644 --- a/src/public/viz-guardrails/CovidMetadataTask.tsx +++ b/src/public/viz-guardrails/MetadataRankingTask.tsx @@ -13,7 +13,7 @@ import RankingWidget from './RankingWidget'; const baseGuardrails = ['percentileClosest', 'super_data', 'metadata', 'cluster'] as const; type GuardrailType = typeof baseGuardrails[number]; -export function CovidMetadataTask({ parameters, setAnswer }: any) { +export function MetadataRankingTask({ parameters, setAnswer }: any) { const [data, setData] = useState(null); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [dataname, setDataname] = useState(parameters.dataset || 'clean_data'); @@ -59,9 +59,9 @@ export function CovidMetadataTask({ parameters, setAnswer }: any) { if (dataname === 'clean_data') { setRange([new Date('2020-03-01'), new Date('2021-08-28')]); } else { - setRange([new Date(parameters.start_date || '2020-03-01'), new Date(parameters.end_date || '2021-08-28')]); + setRange([new Date('2024-01-01'), new Date('2024-12-31')]); } - }, [dataname, parameters.cat_var, parameters.group_var, parameters.start_date, parameters.end_date]); + }, [dataname, parameters.cat_var, parameters.group_var]); const filteredData = useMemo(() => { if (data && range) { @@ -80,7 +80,9 @@ export function CovidMetadataTask({ parameters, setAnswer }: any) { - Below are four charts comparing Norway’s COVID-19 cases to different sets of countries. Which chart do you think shows the most useful and appropriate comparison for Norway? + {dataname === 'clean_data' + ? 'Below are four charts comparing Norway’s COVID-19 cases to different sets of countries. Which chart do you think shows the most useful and appropriate comparison for Norway?' + : 'Below are four charts comparing Verizon’s (VZ) stock performance to different sets of stocks. Which chart do you think shows the most useful and appropriate comparison for Verizon (VZ)?'} @@ -89,7 +91,7 @@ export function CovidMetadataTask({ parameters, setAnswer }: any) { return ( {label} - Total infections per million people + {dataname === 'clean_data' ? 'Total infections per million people' : 'Percent change in stock price'} Date: Thu, 4 Sep 2025 23:32:23 -0600 Subject: [PATCH 2/5] add stocks metadata task --- public/stage-1/config-stage-1.json | 32 ++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/public/stage-1/config-stage-1.json b/public/stage-1/config-stage-1.json index 114d0300be..c213c99cbf 100644 --- a/public/stage-1/config-stage-1.json +++ b/public/stage-1/config-stage-1.json @@ -139,6 +139,37 @@ "initial_selection": ["VZ"] } }, + "stock-metadata-task": { + "type": "react-component", + "path": "viz-guardrails/MetadataRankingTask.tsx", + "instruction": "Below are four different visualizations (A–D) of stock data for Verizon (VZ). Please review each chart and select the one you think is the most useful comparison for Verizon.", + "parameters": { + "dataset": "sp500_stocks", + "start_date": "2024-01-01", + "end_date": "2024-12-31", + "x_var": "date", + "y_var": "value", + "cat_var": "name", + "group_var": "sector", + "selection": ["VZ"], + "range": null, + "items": [], + "data": [], + "metadataFiltered": false, + "numRandomSamples": 5, + "numQuantiles": 5 + }, + "response": [ + { + "id": "explanation", + "prompt": "What are your reasons for your ranking? Which aspects made you rank one chart as “best”?", + "secondaryText": "", + "location": "belowStimulus", + "type": "longText", + "placeholder": "Enter your reasoning here" + } + ] + }, "stock-b-control": { "baseComponent": "stock", "parameters": { @@ -5194,6 +5225,7 @@ } ] }, + "stock-metadata-task", "post-study-quant" ] } From 0eb050a25826b4fabebff34f44312807d5f122a8 Mon Sep 17 00:00:00 2001 From: abrar Date: Fri, 5 Sep 2025 00:09:28 -0600 Subject: [PATCH 3/5] sigular chart picking --- .../viz-guardrails/MetadataRankingTask.tsx | 135 ++++++++++++------ 1 file changed, 93 insertions(+), 42 deletions(-) diff --git a/src/public/viz-guardrails/MetadataRankingTask.tsx b/src/public/viz-guardrails/MetadataRankingTask.tsx index 439438ce00..d238f8fbef 100644 --- a/src/public/viz-guardrails/MetadataRankingTask.tsx +++ b/src/public/viz-guardrails/MetadataRankingTask.tsx @@ -8,7 +8,6 @@ import { } from '@mantine/core'; import * as d3 from 'd3'; import { LineChart } from './LineChart'; -import RankingWidget from './RankingWidget'; const baseGuardrails = ['percentileClosest', 'super_data', 'metadata', 'cluster'] as const; type GuardrailType = typeof baseGuardrails[number]; @@ -23,7 +22,7 @@ export function MetadataRankingTask({ parameters, setAnswer }: any) { const [numRandomSamples] = useState(parameters.numRandomSamples ?? 5); const [numQuantiles] = useState(parameters.numQuantiles ?? 5); const [baseGuardrailOrder, setBaseGuardrailOrder] = useState([]); - const [rankingOrder, setRankingOrder] = useState([]); + const [selectedGuardrail, setSelectedGuardrail] = useState(null); const initialSeedRef = useRef(null); if (initialSeedRef.current === null) { initialSeedRef.current = Date.now().toString(); @@ -40,8 +39,8 @@ export function MetadataRankingTask({ parameters, setAnswer }: any) { useEffect(() => { setBaseGuardrailOrder(seededOrder); - setRankingOrder(seededOrder); - setAnswer?.({ status: true, answers: { 'chart-ranking': seededOrder } }); + setSelectedGuardrail(null); + setAnswer?.({ status: false, answers: { condition: selectedGuardrail } }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [seededOrder]); @@ -81,54 +80,106 @@ export function MetadataRankingTask({ parameters, setAnswer }: any) { {dataname === 'clean_data' - ? 'Below are four charts comparing Norway’s COVID-19 cases to different sets of countries. Which chart do you think shows the most useful and appropriate comparison for Norway?' - : 'Below are four charts comparing Verizon’s (VZ) stock performance to different sets of stocks. Which chart do you think shows the most useful and appropriate comparison for Verizon (VZ)?'} + ? 'Below are four charts comparing Norway’s COVID-19 cases to different sets of countries. Which chart do you think shows the most useful and appropriate comparison for Norway? Select the chart by clicking the "Select" button at the top-left of the chart.' + : 'Below are four charts comparing Verizon’s (VZ) stock performance to different sets of stocks. Which chart do you think shows the most useful and appropriate comparison for Verizon (VZ)? Select the chart by clicking the "Select" button at the top-left of the chart.'} {baseGuardrailOrder.map((guardrail, idx) => { const label = `Chart ${String.fromCharCode(65 + idx)}`; return ( - - {label} - {dataname === 'clean_data' ? 'Total infections per million people' : 'Percent change in stock price'} - + + + + + + + {label} + + + {dataname === 'clean_data' ? 'Total infections per million people' : 'Percent change in stock price'} + + + ); })} - - { - setRankingOrder(newOrder as GuardrailType[]); - setAnswer?.({ status: true, answers: { 'chart-ranking': newOrder } }); - }} - /> - ); } From 34af93dbe5bc6902fe9deef0f80ec1ba10357b1a Mon Sep 17 00:00:00 2001 From: abrar Date: Fri, 5 Sep 2025 00:11:08 -0600 Subject: [PATCH 4/5] update open ended task prompt --- public/stage-1-covid/config-stage-1.json | 2 +- public/stage-1/config-stage-1.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/stage-1-covid/config-stage-1.json b/public/stage-1-covid/config-stage-1.json index 6dfdf57990..112b444dc0 100644 --- a/public/stage-1-covid/config-stage-1.json +++ b/public/stage-1-covid/config-stage-1.json @@ -162,7 +162,7 @@ "response": [ { "id": "explanation", - "prompt": "What are your reasons for your ranking? Which aspects made you rank one chart as “best”?", + "prompt": "Please briefly explain why you chose that chart. Which aspects influenced your choice?", "secondaryText": "", "location": "belowStimulus", "type": "longText", diff --git a/public/stage-1/config-stage-1.json b/public/stage-1/config-stage-1.json index c213c99cbf..e8a7543462 100644 --- a/public/stage-1/config-stage-1.json +++ b/public/stage-1/config-stage-1.json @@ -162,7 +162,7 @@ "response": [ { "id": "explanation", - "prompt": "What are your reasons for your ranking? Which aspects made you rank one chart as “best”?", + "prompt": "Please briefly explain why you chose that chart. Which aspects influenced your choice?", "secondaryText": "", "location": "belowStimulus", "type": "longText", From 3ca70f1233699ea20155e556980b1be7273d3644 Mon Sep 17 00:00:00 2001 From: abrar Date: Fri, 5 Sep 2025 00:21:23 -0600 Subject: [PATCH 5/5] add selection resetting --- .../viz-guardrails/MetadataRankingTask.tsx | 76 +++++++++---------- 1 file changed, 35 insertions(+), 41 deletions(-) diff --git a/src/public/viz-guardrails/MetadataRankingTask.tsx b/src/public/viz-guardrails/MetadataRankingTask.tsx index d238f8fbef..38427a02a5 100644 --- a/src/public/viz-guardrails/MetadataRankingTask.tsx +++ b/src/public/viz-guardrails/MetadataRankingTask.tsx @@ -99,52 +99,46 @@ export function MetadataRankingTask({ parameters, setAnswer }: any) { > - + {selectedGuardrail === guardrail ? 'Selected' : 'Select'} + {label}