From 23bfb79de9d0b27f219c626d2a5d78eb447ac129 Mon Sep 17 00:00:00 2001 From: Jay Kim <76601570+yeonkim1213@users.noreply.github.com> Date: Tue, 9 Jun 2026 21:58:48 -0600 Subject: [PATCH] Remove template placeholder files --- .../_answers/replication/JNDDynamic.tsx | 47 -------- .../assets/_answers/replication/Scatter.tsx | 114 ------------------ .../_answers/replication/ScatterWrapper.tsx | 40 ------ .../assets/replication/JNDDynamic.tsx | 47 +++++++- .../assets/replication/ScatterWrapper.tsx | 41 ++++++- 5 files changed, 83 insertions(+), 206 deletions(-) delete mode 100644 src/public/tutorial/assets/_answers/replication/JNDDynamic.tsx delete mode 100644 src/public/tutorial/assets/_answers/replication/Scatter.tsx delete mode 100644 src/public/tutorial/assets/_answers/replication/ScatterWrapper.tsx diff --git a/src/public/tutorial/assets/_answers/replication/JNDDynamic.tsx b/src/public/tutorial/assets/_answers/replication/JNDDynamic.tsx deleted file mode 100644 index cf7c998e1c..0000000000 --- a/src/public/tutorial/assets/_answers/replication/JNDDynamic.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { JumpFunctionParameters, JumpFunctionReturnVal, StoredAnswer } from '../../../../../store/types'; - -const findLatestTrial = (allDynamicAnswers: StoredAnswer[]) => { - const trials = allDynamicAnswers - .sort((a, b) => parseInt(a.trialOrder.split('_').at(-1) || '0', 10) - parseInt(b.trialOrder.split('_').at(-1) || '0', 10)); - - return trials.at(-1)!; -}; - -export default function func({ answers }: JumpFunctionParameters<{ r1: number, r2: number, counter: number }>): JumpFunctionReturnVal { - const allDynamicAnswers = Object.values(answers) - .filter((answer) => answer.componentName === 'trial'); - - // First trial - if (allDynamicAnswers.length === 0) { - return { - component: 'trial', - parameters: { - r1: 0.1, - r2: 0.9, - }, - correctAnswer: [{ id: 'buttonsResponse', answer: 'right' }], - }; - } - - if (allDynamicAnswers.length === 9) { - return { component: null }; - } - - const latestTrial = findLatestTrial(allDynamicAnswers); - - const right = latestTrial.parameters.r2 === 0.9; - - const approachingValue = right ? latestTrial.parameters.r1 + 0.1 : latestTrial.parameters.r2 + 0.1; - - const r1 = right ? 0.9 : approachingValue; - const r2 = right ? approachingValue : 0.9; - - return { - component: 'trial', - parameters: { - r1, - r2, - }, - correctAnswer: [{ id: 'buttonsResponse', answer: right ? 'left' : 'right' }], - }; -} diff --git a/src/public/tutorial/assets/_answers/replication/Scatter.tsx b/src/public/tutorial/assets/_answers/replication/Scatter.tsx deleted file mode 100644 index 2835ba4782..0000000000 --- a/src/public/tutorial/assets/_answers/replication/Scatter.tsx +++ /dev/null @@ -1,114 +0,0 @@ -/* eslint-disable react-hooks/exhaustive-deps */ -/** - * Authors: WPI Data Visualization Team - * Modified by: The ReVISit Team - * Description: - * This file loads a pre-generated dataset and renders a Scatter Plot using D3. - */ - -import { scaleLinear } from 'd3-scale'; -import { axisLeft, axisBottom } from 'd3-axis'; -import { - useCallback, useEffect, useRef, useState, -} from 'react'; -import { select } from 'd3-selection'; -import { PREFIX } from '../../../../../utils/Prefix'; - -const width = 300; -const height = 300; - -export function Scatter({ r, datasetName } : { r: number, datasetName: string }) { - const d3Container = useRef(null); - const [data, setData] = useState<[number, number][]>([]); - const [isHover, setIsHover] = useState(false); - - const margin = { - left: 0, top: 20, right: 20, bottom: 20, - }; - const innerHeight = height - margin.bottom; - const innerWidth = width - margin.left - margin.right; - - useEffect(() => { - const fetchData = async () => { - try { - const filePath = `${PREFIX}tutorial/assets/datasets/size_100/${datasetName}`; - - const response = await fetch(filePath); - - if (!response.ok) { - throw new Error(`Failed to fetch dataset: ${filePath}`); - } - - const text = await response.text(); - const rows = text.trim().split('\n').slice(1); - - const parsedData = rows.map((row) => { - const [x, y] = row.split(',').map(Number); - return [x, y] as [number, number]; - }); - - setData(parsedData); - } catch (error) { - console.error('Error loading dataset:', error); - } - }; - - fetchData(); - }, [r]); - - const createChart = useCallback(() => { - if (data.length === 0) return; - - const xScale = scaleLinear().domain([0, 1]).range([0, innerWidth]); - const yScale = scaleLinear().domain([0, 1]).range([innerHeight, 0]); - - const xAxis = axisBottom(xScale).tickSize(0).tickFormat(() => ''); - const yAxis = axisLeft(yScale).tickSize(0).tickFormat(() => ''); - - const svg = select(d3Container.current).attr('width', width).attr('height', height); - svg.selectAll('*').remove(); - - svg.append('g') - .attr('transform', `translate(${margin.left}, ${height - margin.bottom + 19})`) - .call(xAxis); - - svg.append('g') - .attr('transform', `translate(${margin.left}, ${margin.top})`) - .call(yAxis); - - svg.selectAll('.dot') - .data(data) - .enter() - .append('circle') - .attr('class', 'dot') - .attr('r', 2) - .attr('cx', (d) => xScale(d[0]) + margin.left) - .attr('cy', (d) => yScale(d[1]) + margin.top) - .style('fill', 'black'); - }, [data, innerWidth, innerHeight, margin.left, margin.top]); - - useEffect(() => { - createChart(); - }, [createChart]); - - return ( - setIsHover(true)} - onMouseLeave={() => setIsHover(false)} - > - - - - ); -} diff --git a/src/public/tutorial/assets/_answers/replication/ScatterWrapper.tsx b/src/public/tutorial/assets/_answers/replication/ScatterWrapper.tsx deleted file mode 100644 index 2f553bc73b..0000000000 --- a/src/public/tutorial/assets/_answers/replication/ScatterWrapper.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Authors: The ReVISit team - * Description: - * This file is the wrapper component for the Scatter plots - */ - -import { - Center, Group, Stack, Text, -} from '@mantine/core'; -import { Scatter } from './Scatter'; -import { StimulusParams } from '../../../../../store/types'; - -/** - * Holds 2 Scatter Plots - * @param param0 - r1 is the correlation value for 1, r2 is the correlation value for 2, - * onClick is a function that determines the functionality when a graph is clicked. - * @returns 2 Scatter Plots - */ -export default function ScatterWrapper({ parameters }: StimulusParams<{ r1: number; r2: number }>) { - const { r1, r2 } = parameters; - const r1DatasetName = `dataset_${r1.toFixed(2)}_size_100.csv`; - const r2DatasetName = `dataset_${r2.toFixed(2)}_size_100.csv`; - - return ( - - - Please select the visualization that appears to have a larger correlation. - -
- - - - -
- - ); -} diff --git a/src/public/tutorial/assets/replication/JNDDynamic.tsx b/src/public/tutorial/assets/replication/JNDDynamic.tsx index 87b6e91c58..ee0ffaf062 100644 --- a/src/public/tutorial/assets/replication/JNDDynamic.tsx +++ b/src/public/tutorial/assets/replication/JNDDynamic.tsx @@ -1,8 +1,47 @@ -// Placeholder for tutorial dynamic replication sequence -import { JumpFunctionParameters, JumpFunctionReturnVal } from '../../../../store/types'; +import { JumpFunctionParameters, JumpFunctionReturnVal, StoredAnswer } from '../../../../store/types'; + +const findLatestTrial = (allDynamicAnswers: StoredAnswer[]) => { + const trials = allDynamicAnswers + .sort((a, b) => parseInt(a.trialOrder.split('_').at(-1) || '0', 10) - parseInt(b.trialOrder.split('_').at(-1) || '0', 10)); + + return trials.at(-1)!; +}; + +export default function func({ answers }: JumpFunctionParameters<{ r1: number, r2: number, counter: number }>): JumpFunctionReturnVal { + const allDynamicAnswers = Object.values(answers) + .filter((answer) => answer.componentName === 'trial'); + + // First trial + if (allDynamicAnswers.length === 0) { + return { + component: 'trial', + parameters: { + r1: 0.1, + r2: 0.9, + }, + correctAnswer: [{ id: 'buttonsResponse', answer: 'right' }], + }; + } + + if (allDynamicAnswers.length === 9) { + return { component: null }; + } + + const latestTrial = findLatestTrial(allDynamicAnswers); + + const right = latestTrial.parameters.r2 === 0.9; + + const approachingValue = right ? latestTrial.parameters.r1 + 0.1 : latestTrial.parameters.r2 + 0.1; + + const r1 = right ? 0.9 : approachingValue; + const r2 = right ? approachingValue : 0.9; -export default function func({ }: JumpFunctionParameters<{ r1: number, r2: number, counter: number }>): JumpFunctionReturnVal { return { component: 'trial', + parameters: { + r1, + r2, + }, + correctAnswer: [{ id: 'buttonsResponse', answer: right ? 'left' : 'right' }], }; -} \ No newline at end of file +} diff --git a/src/public/tutorial/assets/replication/ScatterWrapper.tsx b/src/public/tutorial/assets/replication/ScatterWrapper.tsx index 41d8448321..137ca6cb2a 100644 --- a/src/public/tutorial/assets/replication/ScatterWrapper.tsx +++ b/src/public/tutorial/assets/replication/ScatterWrapper.tsx @@ -1 +1,40 @@ -// Placeholder for the ScatterWrapper component +/** + * Authors: The ReVISit team + * Description: + * This file is the wrapper component for the Scatter plots + */ + +import { + Center, Group, Stack, Text, +} from '@mantine/core'; +import { Scatter } from './Scatter'; +import { StimulusParams } from '../../../../store/types'; + +/** + * Holds 2 Scatter Plots + * @param param0 - r1 is the correlation value for 1, r2 is the correlation value for 2, + * onClick is a function that determines the functionality when a graph is clicked. + * @returns 2 Scatter Plots + */ +export default function ScatterWrapper({ parameters }: StimulusParams<{ r1: number; r2: number }>) { + const { r1, r2 } = parameters; + const r1DatasetName = `dataset_${r1.toFixed(2)}_size_100.csv`; + const r2DatasetName = `dataset_${r2.toFixed(2)}_size_100.csv`; + + return ( + + + Please select the visualization that appears to have a larger correlation. + +
+ + + + +
+ + ); +}