Skip to content

Update and load jsPsych plugins dynamically - #1900

Open
becky-gilbert wants to merge 36 commits into
developfrom
jspsych-select-plugins-to-load
Open

Update and load jsPsych plugins dynamically#1900
becky-gilbert wants to merge 36 commits into
developfrom
jspsych-select-plugins-to-load

Conversation

@becky-gilbert

@becky-gilbert becky-gilbert commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

Fixes #1484

This PR implements the dynamic loading of jsPsych plugins from the database. The plugins are stored in a table with metadata: name, URL, integrity SHA, category, file type, whether or not it should be auto-loaded, whether or not it should be displayed on the jsPsych study edit form, documentation URL. This metadata allows us to auto-load the packages that are always necessary or that we decide to add for convenience, and to display the optional plugins according to category (CHS-jsPsych, core jsPsych, jsPsych-contrib) along with their version numbers and documentation links.

This change allows us to more easily add/update the available jsPsych plugins for researchers through the admin interface, without requiring any changes to the site code (which requires build/deploy and downtime). Plugins/extensions can be added/modified/removed at any time, which makes it much easier to add newly-requested plugins and get bug fixes out quickly.

This change also addresses the slow initial load issue as studies can opt-in to plugins, which means they're only loading the packages that they actually use.

The updated jsPsych study edit page now has two sections underneath the code editor:

  • Automatically-loaded files: These are the files (packages/plugins) that are always available
  • More plugins and extensions: These are optional plugins/extensions that researchers can select if they want to use them.

These sections are automatically collapsed, so as not to be overwhelming, but can be expanded to see the details/options in each section.

For backwards-compatibility, existing jsPsych studies will automatically include all optional plugins/extensions. This ensures that existing studies don't break because they've lost access to an optional plugin/extension that was automatically available before. But new studies will not have any of the optional packages selected by default.

Screenshots

jsPsych study edit page

Screenshot 2026-07-15 at 2 58 55 PM

jsPsych study edit page - expanded "Automatically-Loaded Files" section

Screenshot 2026-07-15 at 2 59 10 PM

jsPsych study edit page - expanded "Select More Plugins and Extensions" section

Screenshot 2026-07-15 at 2 59 34 PM

…a, add jspsych_plugins M2M field to Study model, update the jsPsych study template to load plugins dynamically, add migration for new jsPsych plugin gable and study field, which seeds plugin list and assigns all existing plugins to all existing jsPsych studies
…e and contrib packages, update form formatting, add select all and clear all buttons plugin checkbox questions
…les, categorize as jspsych-library/chs-jspsych, add file_type and order fields to jsPsychPlugin model, add new file categories to jspsych study context and load dynamically from database
@becky-gilbert becky-gilbert self-assigned this Jul 8, 2026
…ych/contrib/CHS plugins, adds optional plugins to all jsPsych studies, adds jspsych-library category, sets JSPsychPlugin name in model meta, removes (contrib) from contrib-category package names
…r seeded packages in migration, set default on obj save if field is empty (manual changes persist)
…rmatting plugin labels with version and/or docs link; use label_html format for plugin checkbox labels and non-checkbox plugin list
…s (labels need to be linked to a specific input element, while legend is a label for multiple elements within the fieldset); update css to override style when legend is used as a form label (form-label class); tweak styles for consistency
… add btn-no-effects class for accordion section headings
…sych plugins conditional on autoload:true, add autoloaded packages from other categories but exclude jspsych_library/chs_jspsych (need to keep categories separate to ensure everything loads in correct order), add loading in template for autoload plugins in other categories
…w_in_ui:true; add autoload plugins that are not included inthe jspsych_library/chs_jspsych categories to list in same section
…Psych core or CHS-jsPsych categories; list any individual plugins or data source elements that are part of the package as a sublist
…ew, JSPsychPlugin model, study-jsPsych plugin relationship
@becky-gilbert becky-gilbert added Researcher [Audience] Researcher-facing Developer [Audience] Affects engineering/developers only Feature [Work Type] Adding new functionality to the platform Performance Tuning [Work Type] Refactoring that is user-facing, affecting latency and/or space complexity jsPsych labels Jul 15, 2026
@becky-gilbert
becky-gilbert marked this pull request as ready for review July 15, 2026 23:22
@mekline

mekline commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

The organization and hiding of options all looks great! Just some potential changes to the UI structure, which I think/hope only affects html tags:

  • Add an additional header, "jsPsych Options" which is the same weight/hierarchy as "jsPsych Experiment Code"

  • Naming issue in general. The new text references files, plugins, extensions, libraries, and packages. I'm going to just say THINGS for the rest but can you pick just one (max 2) to use throughout here?

    • I tend to think that "files" is confusing (people may wonder how to add their stimulus jpgs etc. to the list).
    • "Plugins/Extensions" is my best guess at the idiomatic jsPsych so we can go with that if there's not a better umbrella term or it's confusing to just say "plugins"!

Overall proposed layout and new text:

jsPsych Experiment Code

(Big box of code)

jsPsych Options

Studies created with jsPsych rely on some underlying THINGS which have to be loaded in order for your study to work properly. Some of these are needed for almost every study, but in general you want to minimize how many you include, because they increase website loading times.

If you aren't sure yet which ones you'll need, leave these options alone for now.

If you have a THING you want to use that you don't see listed below, please [standard contact method used in this part of the site?]. We can probably add it for you!

See Automatically-Loaded THINGS >

Select Optional THINGS >

(those are smaller headers, probably left justified if I remember what the website looks like? And the same drop-down triangle & contents)

@mekline mekline left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting/wording changes requested!

@becky-gilbert

Copy link
Copy Markdown
Contributor Author

Thanks for the feedback @mekline! I see what you mean about the formatting and language.

I know that "plugins/extensions" is clunky, but there's an important distinction from the researcher's point-of-view and the terms are not used interchangeably in jsPsych docs, so I decided to stick with that. We could also use "packages" or "files" for everything, but I think that's too vague, including for seasoned jsPsych users.

How's this version?

Both collapsed:

Screenshot 2026-07-30 at 3 15 43 PM

Auto-loaded file section expanded:

Screenshot 2026-07-30 at 3 15 57 PM

Optional file section expanded:

Screenshot 2026-07-30 at 3 16 12 PM

@becky-gilbert
becky-gilbert requested a review from mekline July 30, 2026 22:22
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Developer [Audience] Affects engineering/developers only Feature [Work Type] Adding new functionality to the platform jsPsych Performance Tuning [Work Type] Refactoring that is user-facing, affecting latency and/or space complexity Researcher [Audience] Researcher-facing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Load jsPsych plugins dynamically

2 participants