Skip to content

Implement screening using Jev & Use Material UI across the app - #266

Open
alehuo wants to merge 33 commits into
mainfrom
feature/jev
Open

alehuo wants to merge 33 commits into
mainfrom
feature/jev

Conversation

@alehuo

@alehuo alehuo commented Oct 4, 2026 •

Copy link
Copy Markdown
Collaborator

This PR implements paper screening using Jev. ProjectPage component was refactored to accommodate for the different screening architecture of Jev.

The UI of AISysRev is updated to follow Material Design 2 guidelines. It uses MUI components under the hood to easen up the maintenance burden of the app.

@alehuo alehuo changed the title Implement screening using Jev Implement screening using Jev & Use Material UI across the app Oct 4, 2026
@alehuo
alehuo requested a review from jnyyssol October 8, 2026 18:49
@alehuo
alehuo force-pushed the feature/jev branch 2 times, most recently from fb04384 to a0dd5ca Compare October 9, 2026 05:36
alehuo and others added 26 commits October 12, 2026 12:54
The confirmation dialog is an MUI Dialog. Callers pass a semantic
confirmColor (error, warning, primary) instead of a Tailwind button
variant, and the icon is optional. LLM and account settings use MUI
components and share their tab definitions. A ToggleSwitch wrapper
around the MUI Switch replaces the hand-built switches in settings and
the provider configuration.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Job cards and the job summary now show "Run #N" (per model, within the
project), the start time, and the LLM, evaluation mode, prompting and
screening mode as labelled fields with tooltips, replacing the ZS/FS/PC
badges. Breadcrumbs use the same name, and the project page lists the
newest task first.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The paper card, list header, rows and pagination use MUI components.
Header and rows share one column template so long titles truncate
instead of widening the page, and the list and side panel stack on
narrow screens. MUI Pagination replaces react-paginate, which is
removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Projects are rows in one card: the whole row opens the project, and a
second line shows the project type, criteria counts and last update.
Chips filter the list by type (all, literature reviews, GitHub
repositories). Deleting a project now asks for confirmation. Loading
and empty states use MUI, and the unused ellipsis dropdown is removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The floating "View logs" pill is replaced by an app bar button with a
count badge that opens a bottom drawer, shown and collected only when
VITE_APP_ENV is dev. Losing the event stream now shows a warning
snackbar, only after an actual error. The page no longer needs bottom
padding for the pill.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The footer sits at the bottom of the viewport, aligned with the page
content, with a top border and muted MUI links that wrap and centre on
narrow screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
MUI 9's Typography only maps palette names and textPrimary,
textSecondary and textDisabled through its color prop; the dotted
"text.secondary" form is ignored, so captions and labels rendered in
the primary text colour. Use the camel-case values.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The inputs had no value until the schema defaults were filled in,
which made React warn about switching from uncontrolled to controlled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Pages inside a project, and the new project page, show their title as
"Projects › <name>", with Projects linking back to the list.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A project with no papers opens on one task: uploading them. A large
drop zone (or a file button on phones), the CSV columns the server
requires, a template download and a progress stepper replace the
empty tasks column, the disabled export and the disabled task form.
The page waits until the papers are known before choosing a layout,
so it no longer flashes one and swaps to the other.

"Show evaluation results" no longer appears for a project with no
papers.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A project with papers but no tasks shows a "ready to screen" screen:
the papers that are in, the progress stepper, and a task form with the
method, provider and a searchable model up front. The rarely changed
options are summarised as chips behind "Customize", and a summary
panel describes what will run, with its token estimate and the start
button. The panel stays pinned to the bottom on phones.

Once a project has tasks they use the full width, and "New task" opens
the same form in a dialog. The provider and model of the last task are
preselected next time, and few-shot now needs a model before its modal
opens.

The old sidebar parts, the Headless UI dropdown and the old drop area
are removed. The job e2e test no longer clicks zero-shot, which is the
default and now folded away.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Only a 401 from the server now logs the user out. A request that failed on
the way, such as one the browser cancelled during a page refresh, says
nothing about the session, and redirecting to login interrupted the refresh.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Use the same names for the screening modes in the task form buttons, their
tooltip and warning, the option chips and the task labels.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The warning now explains that tasks with the provider can't run, and links
to settings with a button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Add PaperList, which puts the toolbar, sticky column headings, rows and
pagination footer on one outlined surface, and use it on the papers and job
pages. Rows show the inclusion probability as a percentage with a bar, a
status such as "Not screened" or "Error" when there is none, and the user's
decision as a chip. The footer shows which items are on the page.

Replace CriteriaList on both pages with CriteriaPanel, which numbers the
criteria IC1, EC1 and so on, and use MUI toggle buttons and switches for
the pages' filters.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Move the dialog from Headless UI to MUI, with the model suggestions, the
paper and the criteria in columns that scroll on their own. Model cards
show the decision as a chip, the probability as a bar and the Likert answer
as a seven-step meter, with the provider and task setup underneath.

The dialog body remounts for each paper itself, so the page no longer keys
it. Keyboard shortcuts ignore held-down keys and browser shortcuts such as
Ctrl+E, and Escape is left to the dialog.

CriteriaList has no users left and is removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Move the dialog to MUI with three steps: inclusion examples, exclusion
examples and a review. Each step lists the labelled papers as a checklist
with a select-all box and their inclusion probability.

The task form puts the screening mode in the dialog's URL and exposes its
model config, so a refreshed dialog keeps the mode and waits for the form
to restore the provider and model instead of crashing.

Segmented buttons now set aria-pressed. New end-to-end tests cover starting
a few-shot task, refreshing the dialog, starting without a model, remembered
examples, select all, and a project with no labelled papers.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Move the staggered rise-in helper out of the project folder so every page
can use it, and add a fade-in for blocks that appear once loaded, e.g. when
content replaces its skeleton. Both stop for users who prefer reduced motion.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Add placeholders shaped like the tabs, breadcrumbs, job cards, criteria
panel, settings sections and text cards. The page header can show a
placeholder title, and a tab can show a placeholder count.

The paper list shows skeleton rows on its first load and keeps its rows
under a progress bar while it reloads. Rows fade in when they arrive and
on each new page. The list and the criteria panel accept sx, so pages can
stagger them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The project, papers, job and task result pages show skeletons of their
layout while they load, instead of nothing or a single bar. Their blocks
rise in one after another when the content arrives. Stepping to another
paper's result shows skeleton cards and animates the new result in.

A reload of the projects no longer replaces a loaded page with a
skeleton. The project tabs stay put while the content below them fades.

react-loading-skeleton has no users left and is removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The projects list shows placeholder filter chips and rows only on its
first load, so a reload after a delete keeps the list. The results table
and the LLM settings get loading states, which they lacked, with skeleton
rows and sections. The new project form, account settings and not-found
pages rise in like the project page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The few-shot dialog shows a placeholder while it restores the model
selection, and the manual evaluation dialog shows skeleton model cards
until the model suggestions load, then fades them in.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
alehuo and others added 6 commits October 12, 2026 12:54
The project list now includes each project's job_count, counted by a
subquery in the same query, and the single-project endpoint returns it
too. The project page shows one skeleton card per task, up to ten, so the
page keeps its height when the tasks arrive. Before the projects load it
shows three.

Regenerate the OpenAPI spec and typed client for the new field.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Replace the Tailwind page with MUI cards: a header with the version and
links to the source code, API docs and OpenAPI spec; the publications with
their DOIs; and cards for supported models, open source and funding. The
description now names every kind of screening the tool does, and external
links open safely in a new tab.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The job task list, the task result and the evaluation dialog's model
results ignored stale answers with a cancelled flag, but let the request
run on. They now abort the request when the job, task or paper changes or
the view closes, using async/await. The job task service functions take an
optional abort signal.

The evaluation dialog shows an error when the model results fail to load,
instead of its skeleton forever.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Components take the ScreeningTarget enum rather than an isGithubScreening
flag, and the task form reads it from the project it already gets. Text
that differs by target comes from tables keyed by the enum, so a new
target won't compile until it has its own wording. A shared helper gives
the item names, e.g. "paper" and "papers", and the DOI-or-repository link
that three components each built themselves.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@jnyyssol

Copy link
Copy Markdown
Contributor

The whole "Customize" button is missing for Jev so it cannot do Full text screening, one call per criterion or few-shot. I don't know if Jev can do few-shot anyways, but I think full text and per criterion are doable.

Other than that, it ran well and got results fast and cheap.

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants