diff --git a/.llms/learnings.md b/.llms/learnings.md index d93903e9..ddf0af50 100644 --- a/.llms/learnings.md +++ b/.llms/learnings.md @@ -60,6 +60,28 @@ The CDN version is derived from `node_modules/pyodide/package.json` — **not** **Plot result routing pattern** — `worker.postMessage()` is fire-and-forget (returns `undefined`). Plot epics should use `tap()` to fire the worker message and `mergeMap(() => EMPTY)` to emit nothing. Results come back asynchronously on the worker `message` event. Add a `plotKey` field to each worker message; the worker echoes it back; `pyodideMessageEpic` switches on `plotKey` to dispatch `SetTopoPlot`/`SetPSDPlot`/`SetERPPlot` with a `{ 'image/png': base64string }` MIME bundle. `PyodidePlotWidget` renders this via `@nteract/transforms`. +## Lab.js 23.x API: `hooks` replaces `messageHandlers` + +Lab.js 23.x renamed the event-handler registration option from `messageHandlers` to `hooks`. The experiment JSON files (e.g. `experiment.ts` in each experiment folder) must use `hooks:` not `messageHandlers:` for before:prepare/run/end callbacks. If `messageHandlers` is used, the handlers are silently ignored — loops won't initialize their `templateParameters`, causing "Empty or invalid parameter set for loop, no content generated". + +Affected files: `src/renderer/experiments/*/experiment.ts` (and `custom/experiment.js`). The format is identical — just the key name changed: +```js +// Old (lab.js < 22): messageHandlers: { 'before:prepare': initLoopWithStimuli } +// New (lab.js 23.x): hooks: { 'before:prepare': initLoopWithStimuli } +``` + +## Lab.js stimulus `filepath` must be a browser URL, not a filesystem path + +`balanceStimuliByCondition` (in `src/renderer/utils/labjs/functions.ts`) generates a `filepath` field used by lab.js HTML templates (``). This must be a browser-loadable URL, not a raw filesystem path like `/Users/.../Face1.jpg`. + +In dev: use `/@fs` (Vite's `/@fs/` serving). In prod: use `file://`. The helper `absPathToUrl` in `functions.ts` handles this. Same pattern as `ExperimentWindow.tsx` for `options.media.images`. + +## Lab.js: `this.id` vs `this.options.id` for loop-cloned components + +`prepareNested` (in `flow/util/nested.js`) sets IDs on cloned loop components via `c.id = [parent.id, i].join('_')` — this sets the **component's own property**, NOT `c.options.id`. The options proxy reads through `rawOptions`, which never has an `id` for template-cloned components (the JSON template has no explicit `id` field). + +Any hook function (e.g. `initResponseHandlers` in `src/renderer/utils/labjs/functions.ts`) that needs the component ID must use `this.id`, not `this.options.id`. Using `this.options.id` will always be `undefined` for loop-cloned components, causing silent early returns and broken behavior (e.g. keydown handlers never installed). + ## Pre-existing TypeScript errors (do not treat as regressions) - `src/renderer/epics/experimentEpics.ts` (lines 170, 205) — RxJS operator type mismatch diff --git a/src/main/index.ts b/src/main/index.ts index 70802f76..e5490781 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -142,8 +142,10 @@ ipcMain.handle('fs:readAndParseState', (_event, dir) => { ipcMain.handle( 'fs:storeExperimentState', (_event, state: Record) => { + const dir = getWorkspaceDir(state.title as string); + if (!fs.existsSync(dir)) return; fs.writeFileSync( - path.join(getWorkspaceDir(state.title as string), 'appState.json'), + path.join(dir, 'appState.json'), JSON.stringify(state) ); } diff --git a/src/renderer/components/ExperimentWindow.tsx b/src/renderer/components/ExperimentWindow.tsx index 65b64703..c33e20f1 100644 --- a/src/renderer/components/ExperimentWindow.tsx +++ b/src/renderer/components/ExperimentWindow.tsx @@ -18,6 +18,13 @@ export interface ExperimentWindowProps { onFinish: (csv: any) => void; // lab.js finish event data — shape is opaque third-party type } +// Converts an absolute filesystem path to a URL the renderer can load. +// In Vite dev mode, /@fs/ serves files outside publicDir. +// In production the renderer has a file:// origin so file:// URLs work directly. +function absPathToUrl(absPath: string): string { + return import.meta.env.DEV ? `/@fs${absPath}` : `file://${absPath}`; +} + export const ExperimentWindow: React.FC = ({ title, experimentObject, @@ -27,6 +34,11 @@ export const ExperimentWindow: React.FC = ({ onFinish, }) => { useEffect(() => { + // experimentObject starts as {} in Redux initial state — bail out until a + // real experiment is loaded, otherwise lab.core.deserialize crashes on + // the missing `type` field. + if (!experimentObject?.type) return; + // TODO: move this study mutation into Redux? const experimentClone = clonedeep(experimentObject); const paramsClone = clonedeep(params); @@ -38,7 +50,7 @@ export const ExperimentWindow: React.FC = ({ experimentToRun.options.media.images = params.stimuli?.reduce( (images, stimulus) => { if (stimulus.dir && stimulus.filename) { - return [...images, path.join(stimulus.dir, stimulus.filename)]; + return [...images, absPathToUrl(path.join(stimulus.dir, stimulus.filename))]; } return images; }, diff --git a/src/renderer/components/HomeComponent/index.tsx b/src/renderer/components/HomeComponent/index.tsx index 8381e847..e96d5833 100644 --- a/src/renderer/components/HomeComponent/index.tsx +++ b/src/renderer/components/HomeComponent/index.tsx @@ -132,6 +132,7 @@ export default class Home extends Component { } handleLoadCustomExperiment(title: string) { + title = title.replace(/ /g, '_'); this.setState({ isNewExperimentModalOpen: false }); if (this.state.recentWorkspaces.includes(title)) { toast.error(`Experiment already exists`); diff --git a/src/renderer/constants/constants.ts b/src/renderer/constants/constants.ts index 37d15981..8796f7f0 100644 --- a/src/renderer/constants/constants.ts +++ b/src/renderer/constants/constants.ts @@ -1,9 +1,9 @@ export enum EXPERIMENTS { NONE = 'NONE', - N170 = 'Faces and Houses', - STROOP = 'Stroop Task', + N170 = 'Faces_and_Houses', + STROOP = 'Stroop_Task', MULTI = 'Multi-tasking', - SEARCH = 'Visual Search', + SEARCH = 'Visual_Search', CUSTOM = 'Custom', // P300 = 'Visual Oddball', // SSVEP = 'Steady-state Visual Evoked Potential', diff --git a/src/renderer/epics/experimentEpics.ts b/src/renderer/epics/experimentEpics.ts index 8af74214..ee8855d9 100644 --- a/src/renderer/epics/experimentEpics.ts +++ b/src/renderer/epics/experimentEpics.ts @@ -46,10 +46,6 @@ const createNewWorkspaceEpic: Epic< action$.pipe( filter(isActionOf(ExperimentActions.CreateNewWorkspace)), map((action) => action.payload as WorkSpaceInfo), - mergeMap(async (workspaceInfo) => { - await createWorkspaceDir(workspaceInfo.title); - return workspaceInfo; - }), mergeMap((workspaceInfo) => { const experiment = getExperimentFromType(workspaceInfo.type); return of( @@ -66,6 +62,7 @@ const startEpic = (action$, state$) => filter(isActionOf(ExperimentActions.Start)), filter(() => !state$.value.experiment.isRunning), mergeMap(async () => { + await createWorkspaceDir(state$.value.experiment.title); if ( state$.value.device.connectionStatus === CONNECTION_STATUS.CONNECTED ) { @@ -193,10 +190,12 @@ const saveWorkspaceEpic: Epic< ), mergeMap(async () => { const now = Date.now(); - await storeExperimentState({ - ...state$.value.experiment, - dateModified: now, - }); + // experimentObject contains function references (hooks) that cannot be + // serialized via IPC structured clone. It is always re-derived from + // `type` on load (see handleLoadRecentWorkspace), so omit it here. + const { experimentObject: _omit, ...serializableState } = + state$.value.experiment; + await storeExperimentState({ ...serializableState, dateModified: now }); return now; }), map(ExperimentActions.SetDateModified) diff --git a/src/renderer/experiments/custom/experiment.js b/src/renderer/experiments/custom/experiment.js index bd2b4fbf..92fd62ba 100644 --- a/src/renderer/experiments/custom/experiment.js +++ b/src/renderer/experiments/custom/experiment.js @@ -17,7 +17,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'The face-house task', content: [ { @@ -28,7 +28,7 @@ export const facesHousesExperiment = { 'keypress(Space)': 'continue', 'keypress(q)': 'skipPractice', }, - messageHandlers: {}, + hooks: {}, title: 'Instruction', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EThe face-house task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n\n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E', @@ -43,7 +43,7 @@ export const facesHousesExperiment = { n: '', }, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': function anonymous() { let initParameters = [...this.parameters.stimuli] || []; @@ -134,7 +134,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Trial', content: [ { @@ -166,7 +166,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Fixation cross', timeout: '${parameters.iti}', @@ -176,7 +176,7 @@ export const facesHousesExperiment = { files: {}, responses: {}, parameters: {}, - messageHandlers: { + hooks: { 'before:prepare': function anonymous() { console.log('before:prepare screen 1'); @@ -227,7 +227,7 @@ export const facesHousesExperiment = { timeout: "${parameters.selfPaced ? '3600000' : parameters.presentationTime}", content: - '\u003Cmain class="content-horizontal-center content-vertical-center"\u003E\n \u003Cdiv\u003E\n \u003Cimg src=${ this.files[this.parameters.image] } height=${ this.parameters.imageHeight } \u002F\u003E\n \u003C\u002Fdiv\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \u003Cp\u003E\n ${this.parameters.taskHelp} \n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E', + '
\n
\n \n
\n
\n\n
\n

\n ${this.parameters.taskHelp} \n

\n
', }, { type: 'lab.canvas.Screen', @@ -254,7 +254,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { end: function anonymous() { this.data.correct_response = false; }, @@ -275,7 +275,7 @@ export const facesHousesExperiment = { responses: { 'keypress(Space)': 'continue', }, - messageHandlers: {}, + hooks: {}, title: 'Main task', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EReady for the real data collection?\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\u003Cmain\u003E\n\n \u003Cp\u003E\n Press the the space bar to start the main task.\n \u003C\u002Fp\u003E\n\n\u003C\u002Fmain\u003E\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E', @@ -290,7 +290,7 @@ export const facesHousesExperiment = { n: '', }, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': function anonymous() { let initialParameters = [...this.parameters.stimuli] || []; console.log('before:prepare initial params 2', initialParameters); @@ -384,7 +384,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Trial', content: [ { @@ -416,7 +416,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Fixation cross', timeout: '${parameters.iti}', @@ -426,7 +426,7 @@ export const facesHousesExperiment = { files: {}, responses: {}, parameters: {}, - messageHandlers: { + hooks: { 'before:prepare': function anonymous() { // This code registers an event listener for this screen. // We have a timeout for this screen, but we also want to record responses. @@ -477,7 +477,7 @@ export const facesHousesExperiment = { timeout: "${parameters.selfPaced ? '3600000' : parameters.presentationTime}", content: - '\u003Cmain class="content-horizontal-center content-vertical-center"\u003E\n \u003Cdiv\u003E\n \u003Cimg src=${ this.files[this.parameters.image] } height=${ this.parameters.imageHeight } \u002F\u003E\n \u003C\u002Fdiv\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \u003Cp\u003E\n ${this.parameters.taskHelp} \n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E', + '
\n
\n \n
\n
\n\n
\n

\n ${this.parameters.taskHelp} \n

\n
', }, { type: 'lab.canvas.Screen', @@ -504,7 +504,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Feedback', tardy: true, @@ -521,7 +521,7 @@ export const facesHousesExperiment = { responses: { 'keypress(Space)': 'end', }, - messageHandlers: {}, + hooks: {}, title: 'End', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \u003Ch1\u003E\n Thank you!\n \u003C\u002Fh1\u003E\n \u003Ch1\u003E\n Press the space bar to finish the task.\n \u003C\u002Fh1\u003E\n\u003C\u002Fmain\u003E\n\n', diff --git a/src/renderer/experiments/faces_houses/experiment.ts b/src/renderer/experiments/faces_houses/experiment.ts index d3f085b7..f48c0d9c 100644 --- a/src/renderer/experiments/faces_houses/experiment.ts +++ b/src/renderer/experiments/faces_houses/experiment.ts @@ -21,7 +21,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'The face-house task', content: [ { @@ -32,7 +32,7 @@ export const facesHousesExperiment = { 'keypress(Space)': 'continue', 'keypress(q)': 'skipPractice', }, - messageHandlers: {}, + hooks: {}, title: 'Instruction', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EThe face-house task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n\n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E', @@ -47,7 +47,7 @@ export const facesHousesExperiment = { n: '', }, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initPracticeLoopWithStimuli, }, title: 'Practice loop', @@ -57,7 +57,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Trial', content: [ { @@ -89,7 +89,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Fixation cross', timeout: '${parameters.iti}', @@ -99,7 +99,7 @@ export const facesHousesExperiment = { files: {}, responses: {}, parameters: {}, - messageHandlers: { + hooks: { 'before:prepare': initResponseHandlers, run: triggerEEGCallback, }, @@ -107,7 +107,7 @@ export const facesHousesExperiment = { timeout: "${parameters.selfPaced ? '3600000' : parameters.presentationTime}", content: - '\u003Cmain class="content-horizontal-center content-vertical-center"\u003E\n \u003Cdiv\u003E\n \u003Cimg src=${ this.parameters.filepath } height=${ this.parameters.imageHeight } \u002F\u003E\n \u003C\u002Fdiv\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \u003Cp\u003E\n ${this.parameters.taskHelp} \n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E', + '
\n
\n \n
\n
\n\n
\n

\n ${this.parameters.taskHelp} \n

\n
', }, { type: 'lab.canvas.Screen', @@ -134,7 +134,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { end: resetCorrectResponse, }, viewport: [800, 600], @@ -153,7 +153,7 @@ export const facesHousesExperiment = { responses: { 'keypress(Space)': 'continue', }, - messageHandlers: {}, + hooks: {}, title: 'Main task', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EReady for the real data collection?\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\u003Cmain\u003E\n\n \u003Cp\u003E\n Press the the space bar to start the main task.\n \u003C\u002Fp\u003E\n\n\u003C\u002Fmain\u003E\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E', @@ -168,7 +168,7 @@ export const facesHousesExperiment = { n: '', }, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initLoopWithStimuli, }, title: 'Experiment loop', @@ -178,7 +178,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Trial', content: [ { @@ -210,7 +210,7 @@ export const facesHousesExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Fixation cross', timeout: '${parameters.iti}', @@ -220,7 +220,7 @@ export const facesHousesExperiment = { files: {}, responses: {}, parameters: {}, - messageHandlers: { + hooks: { 'before:prepare': initResponseHandlers, run: triggerEEGCallback, }, @@ -229,7 +229,7 @@ export const facesHousesExperiment = { "${parameters.selfPaced ? '3600000' : parameters.presentationTime}", content: - '\u003Cmain class="content-horizontal-center content-vertical-center"\u003E\n \u003Cdiv\u003E\n \u003Cimg src=${ this.parameters.filepath } height=${ this.parameters.imageHeight } \u002F\u003E\n \u003C\u002Fdiv\u003E\n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \u003Cp\u003E\n ${this.parameters.taskHelp} \n \u003C\u002Fp\u003E\n\u003C\u002Ffooter\u003E', + '
\n
\n \n
\n
\n\n
\n

\n ${this.parameters.taskHelp} \n

\n
', }, ], }, @@ -241,7 +241,7 @@ export const facesHousesExperiment = { responses: { 'keypress(Space)': 'end', }, - messageHandlers: {}, + hooks: {}, title: 'End', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \u003Ch1\u003E\n Thank you!\n \u003C\u002Fh1\u003E\n \u003Ch1\u003E\n Press the space bar to finish the task.\n \u003C\u002Fh1\u003E\n\u003C\u002Fmain\u003E\n\n', diff --git a/src/renderer/experiments/multitasking/experiment.ts b/src/renderer/experiments/multitasking/experiment.ts index 2ae26952..97a075d5 100644 --- a/src/renderer/experiments/multitasking/experiment.ts +++ b/src/renderer/experiments/multitasking/experiment.ts @@ -29,7 +29,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Multi-tasking', content: [ { @@ -39,7 +39,7 @@ export const multitaskingExperimentObject = { responses: { 'keypress(Space)': 'continue', }, - messageHandlers: {}, + hooks: {}, title: 'Intro', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EThe multi-tasking test\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n\n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \n\u003C\u002Fmain\u003E\n\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E', @@ -87,7 +87,7 @@ export const multitaskingExperimentObject = { responses: { 'keypress(Space)': 'continue', }, - messageHandlers: { + hooks: { 'before:prepare': initMultitaskingResponseHandlers, }, title: 'Instructions', @@ -102,7 +102,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Frame', content: { type: 'lab.flow.Loop', @@ -151,7 +151,7 @@ export const multitaskingExperimentObject = { n: '6', }, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Block loop', tardy: true, shuffleGroups: [], @@ -160,7 +160,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Block sequence', skip: "${this.parameters.task === 'training' && this.state.skipTraining === true}", content: [ @@ -317,7 +317,7 @@ export const multitaskingExperimentObject = { responses: { 'keypress(Space)': 'continue', }, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Ready', }, @@ -813,7 +813,7 @@ export const multitaskingExperimentObject = { responses: { 'keypress(Space)': 'continue', }, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Block description', }, @@ -872,7 +872,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Concentrate', timeout: '1000', @@ -970,7 +970,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: '3', timeout: '1000', @@ -1068,7 +1068,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: '2', timeout: '1000', @@ -1166,7 +1166,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: '1', timeout: '1000', @@ -1181,7 +1181,7 @@ export const multitaskingExperimentObject = { n: '', }, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initTasks, }, title: 'Trial loop', @@ -1191,7 +1191,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Trial sequence', content: [ { @@ -1564,7 +1564,7 @@ export const multitaskingExperimentObject = { 'keypress(b)': 'b', 'keypress(n)': 'n', }, - messageHandlers: { + hooks: { run: triggerEEGCallback, }, viewport: [800, 600], @@ -1847,7 +1847,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initTaskScreen, }, viewport: [800, 600], @@ -2490,7 +2490,7 @@ export const multitaskingExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Pause', skip: '${this.state.correct === true}', @@ -2511,7 +2511,7 @@ export const multitaskingExperimentObject = { responses: { 'keypress(Space)': 'end', }, - messageHandlers: {}, + hooks: {}, title: 'End', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \u003Ch1\u003E\n Thank you!\n \u003C\u002Fh1\u003E\n \u003Ch1\u003E\n Press the space bar to finish the task.\n \u003C\u002Fh1\u003E\n\u003C\u002Fmain\u003E\n\n', diff --git a/src/renderer/experiments/search/experiment.ts b/src/renderer/experiments/search/experiment.ts index cf2be1f3..6f4830a1 100644 --- a/src/renderer/experiments/search/experiment.ts +++ b/src/renderer/experiments/search/experiment.ts @@ -22,7 +22,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Visual search', content: [ { @@ -33,7 +33,7 @@ export const searchExperimentObject = { 'keypress(Space)': 'next', 'keypress(q)': 'skipPractice', }, - messageHandlers: {}, + hooks: {}, title: 'Instruction', content: '\u003Cstyle\u003E\n .letter{\n font-size: 90px;\n font-weight: bold;\n }\n\u003C\u002Fstyle\u003E\n\n\u003Cheader\u003E\n \u003Ch1\u003EVisual search task\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \n \u003Cp\u003E\n ${this.parameters.intro}\n \u003C\u002Fp\u003E\n \n \u003Cp\u003E\n Again, all you need to do is to find an \u003Cb\u003Eorange T\u003C\u002Fb\u003E. If you see the \u003Cb\u003Eorange T\u003C\u002Fb\u003E, press \u003Ckbd\u003Eb\u003C\u002Fkbd\u003E. Ignore the upside-down orange T, as well as blue Ts! IF THERE IS NO ORANGE T, press \u003Ckbd\u003En\u003C\u002Fkbd\u003E.\n It is very important to respond \u003Cb\u003EAS FAST AS YOU CAN\u003C\u002Fb\u003E.\n \u003C\u002Fp\u003E\n\n \u003Cdiv style="display:grid; grid-template-columns:1fr 1fr;"\u003E\n \u003Cdiv\u003E\n \u003Cp\u003E\n Find \n \u003C\u002Fp\u003E\n \u003Cbr\u003E\n \u003Cdiv class="letter" style="color:orange; height: 100px;"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \u003Cdiv\u003E\n \u003Cp\u003E\n But do not respond to any of these distractors:\n \u003C\u002Fp\u003E\n \u003Cbr\u003E\n \u003Cdiv style="display:grid; grid-template-columns: 100px 50px; justify-content: center; "\u003E\n \u003Cdiv class="letter" style="color:lightblue;"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003Cdiv class="letter" style="color:orange; transform: rotate(-180deg);"\u003E\n T\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n \u003C\u002Fdiv\u003E\n\n \u003Cp\u003E\n Press the space bar on your keyboard to start doing the practice trials.\n If you want to skip the practice trials and go directly to the task, press the "q" button on your keyboard.\n \u003C\u002Fp\u003E\n\u003C\u002Fmain\u003E', @@ -47,7 +47,7 @@ export const searchExperimentObject = { mode: 'draw-shuffle', }, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initPracticeTrials, }, title: 'Practice task', @@ -59,7 +59,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Trial', content: [ { @@ -70,7 +70,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Frame', content: { type: 'lab.canvas.Screen', @@ -127,7 +127,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { run: function anonymous( this: lab.flow.Loop> ) { @@ -148,7 +148,7 @@ export const searchExperimentObject = { 'keypress(b)': 'yes', 'keypress(n)': 'no', }, - messageHandlers: { + hooks: { run: function anonymous(this: lab.core.Component) { const taskgrid = document.querySelector('#taskgrid'); const { stimuli } = this.parameters; @@ -189,7 +189,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { run: initGrid, 'before:prepare': initResponses, }, @@ -210,7 +210,7 @@ export const searchExperimentObject = { responses: { 'keypress(Space)': 'continue', }, - messageHandlers: {}, + hooks: {}, title: 'Main task instruction', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \u003Ch1\u003EReady for the real data collection?\u003C\u002Fh1\u003E\n\u003C\u002Fheader\u003E\n\u003Cmain\u003E\n\n \u003Cp\u003E\n Press the the space bar to start the main task.\n \u003C\u002Fp\u003E\n\n\u003C\u002Fmain\u003E\n\u003Cfooter class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Ffooter\u003E\n', @@ -224,7 +224,7 @@ export const searchExperimentObject = { mode: 'draw-shuffle', }, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initSearchTrials, }, title: 'Main task', @@ -234,7 +234,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Trial', content: [ { @@ -245,7 +245,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Frame', content: { type: 'lab.canvas.Screen', @@ -302,7 +302,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { run: function anonymous(this: lab.core.Component) { this.data.response = 'noresponse'; this.data.correct = false; @@ -321,7 +321,7 @@ export const searchExperimentObject = { 'keypress(b)': 'yes', 'keypress(n)': 'no', }, - messageHandlers: { + hooks: { run: function anonymous(this: lab.html.Screen) { this.parameters.callbackForEEG( parseInt(this.parameters.size, 10) < 13 ? 2 : 1 @@ -366,7 +366,7 @@ export const searchExperimentObject = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { run: initGrid, 'before:prepare': initResponses, }, @@ -387,7 +387,7 @@ export const searchExperimentObject = { responses: { 'keypress(Space)': 'end', }, - messageHandlers: {}, + hooks: {}, title: 'End', content: '\u003Cheader class="content-vertical-center content-horizontal-center"\u003E\n \n\u003C\u002Fheader\u003E\n\n\u003Cmain\u003E\n \u003Ch1\u003E\n Thank you!\n \u003C\u002Fh1\u003E\n \u003Ch1\u003E\n Press the space bar to finish the task.\n \u003C\u002Fh1\u003E\n\u003C\u002Fmain\u003E\n\n', diff --git a/src/renderer/experiments/stroop/experiment.ts b/src/renderer/experiments/stroop/experiment.ts index 567a3aa4..9c9cdcb2 100644 --- a/src/renderer/experiments/stroop/experiment.ts +++ b/src/renderer/experiments/stroop/experiment.ts @@ -2,7 +2,7 @@ import { core } from 'lab.js'; import { initStroopTrial } from '../../utils/labjs/functions'; export const stroopExperiment = { - messageHandlers: {}, + hooks: {}, title: 'root', type: 'lab.flow.Sequence', plugins: [], @@ -16,11 +16,11 @@ export const stroopExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Stroop task', content: [ { - messageHandlers: {}, + hooks: {}, type: 'lab.html.Screen', responses: { 'keypress(Space)': 'continue', @@ -40,12 +40,12 @@ export const stroopExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Practice frame', tardy: true, skip: "${ state.response === 'skipPractice' }", content: { - messageHandlers: {}, + hooks: {}, type: 'lab.flow.Loop', responses: {}, templateParameters: [ @@ -98,7 +98,7 @@ export const stroopExperiment = { }, shuffleGroups: [], template: { - messageHandlers: {}, + hooks: {}, type: 'lab.flow.Sequence', responses: {}, title: 'Trial', @@ -160,7 +160,7 @@ export const stroopExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { run: function anonymous(this: core.Component) { this.data.correct = 'empty'; }, @@ -229,7 +229,7 @@ export const stroopExperiment = { 'keydown(b)': 'blue', 'keydown(y)': '#ffe32a', }, - messageHandlers: {}, + hooks: {}, viewport: [800, 600], title: 'Stroop screen', correctResponse: '${ this.parameters.color }', @@ -289,7 +289,7 @@ export const stroopExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initStroopTrial, }, viewport: [800, 600], @@ -302,7 +302,7 @@ export const stroopExperiment = { }, }, { - messageHandlers: {}, + hooks: {}, type: 'lab.html.Screen', responses: { 'keypress(Space)': 'continue', @@ -321,10 +321,10 @@ export const stroopExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: {}, + hooks: {}, title: 'Task frame', content: { - messageHandlers: {}, + hooks: {}, type: 'lab.flow.Loop', responses: {}, templateParameters: [ @@ -482,7 +482,7 @@ export const stroopExperiment = { }, shuffleGroups: [], template: { - messageHandlers: {}, + hooks: {}, type: 'lab.flow.Sequence', responses: {}, title: 'Trial', @@ -544,7 +544,7 @@ export const stroopExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { run: function anonymous(this: core.Component) { this.data.correct = 'empty'; }, @@ -613,7 +613,7 @@ export const stroopExperiment = { 'keydown(b)': 'blue', 'keydown(y)': '#ffe32a', }, - messageHandlers: { + hooks: { run: function anonymous(this: core.Component) { this.parameters.callbackForEEG( this.parameters.congruent === 'yes' ? 1 : 2 @@ -679,7 +679,7 @@ export const stroopExperiment = { files: {}, parameters: {}, responses: {}, - messageHandlers: { + hooks: { 'before:prepare': initStroopTrial, }, viewport: [800, 600], @@ -692,7 +692,7 @@ export const stroopExperiment = { }, }, { - messageHandlers: {}, + hooks: {}, type: 'lab.html.Screen', responses: { 'keypress(Space)': 'end', diff --git a/src/renderer/index.html b/src/renderer/index.html index 83208c5e..60a65372 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -4,7 +4,7 @@ BrainWaves diff --git a/src/renderer/utils/filesystem/storage.ts b/src/renderer/utils/filesystem/storage.ts index d17f9291..9b98b892 100644 --- a/src/renderer/utils/filesystem/storage.ts +++ b/src/renderer/utils/filesystem/storage.ts @@ -34,7 +34,7 @@ export const openWorkspaceDir = (title: string): Promise => // Storing export const storeExperimentState = ( - state: ExperimentStateType + state: Omit ): Promise => api().storeExperimentState(state); export const restoreExperimentState = ( diff --git a/src/renderer/utils/labjs/functions.ts b/src/renderer/utils/labjs/functions.ts index 426c2e1a..5b7c61f3 100644 --- a/src/renderer/utils/labjs/functions.ts +++ b/src/renderer/utils/labjs/functions.ts @@ -12,6 +12,10 @@ import stroopExperiment from '../../experiments/stroop'; import searchExperiment from '../../experiments/search'; import multitaskingExperiment from '../../experiments/multitasking'; +function absPathToUrl(absPath: string): string { + return import.meta.env.DEV ? `/@fs${absPath}` : `file://${absPath}`; +} + /** * Returns all data necessary to fully describe an experiment from the experiment type * Used in order to instantiate experiment state in redux when creating a new workspace, @@ -123,7 +127,7 @@ function balanceStimuliByCondition( if (stimulus.dir && stimulus.filename) { return { ...stimulus, - filepath: path.join(stimulus.dir, stimulus.filename), + filepath: absPathToUrl(path.join(stimulus.dir, stimulus.filename)), }; } return stimulus; @@ -139,10 +143,11 @@ function balanceStimuliByCondition( * the pressed key with the correct response which is defined inside the Experiment loop). */ export function initResponseHandlers(this: lab.core.Component) { - const { - options: { id }, - parameters: { response }, - }: { parameters: Stimulus; options: lab.core.ComponentOptions } = this; + // this.id is assigned by prepareNested (e.g. "0_1_0_1"), but this.options.id + // is undefined for loop-cloned components because rawOptions never has an id. + // Use this.id directly. + const id = this.id; + const { response } = this.parameters as unknown as Stimulus; if (!id) return; this.data.trial_number = diff --git a/vite.config.ts b/vite.config.ts index 4303efff..033c2e52 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -73,6 +73,13 @@ export default defineConfig({ events: 'events', }, }, + server: { + fs: { + // Allow /@fs/ access to the whole repo root so lab.js can load + // experiment stimuli from their absolute filesystem paths. + allow: ['.'], + }, + }, optimizeDeps: { include: ['@neurosity/pipes'], // Prevent Vite from pre-bundling pyodide. In dev mode it will be served