Classifier: add the subjectID prop

[eatyourgreens]

Refactor the Classifier component to use hooks and add the subjectID prop, which allows us to classify a specific subject. When a subject ID (or list of subject IDs) is specified, the subjects store requests subjects from subjects/selection rather than subjects/queued.

I've also updated stubPanoptesJS so that different responses can be specified for /subjects/queued, /subjects/grouped and /subjects/selection. That's useful when you want to test that selection is using a specific endpoint.

https://localhost:8080/?demo=true&workflow=693&subject=4237
https://localhost:8080/?demo=true&workflow=693&subject=4218

Package:
lib-classifier

Towards: #1876.
Closes: #2074.

Review Checklist

General

• Are the tests passing locally and on Travis?
• Is the documentation up to date?

Components

• Has a storybook story been created or updated?
• Is the component accessible?
  • Can it be used with a screen reader? BBC guide to testing with VoiceOver
  • Can it be used from the keyboard? WebAIM guide to keyboard testing
  • Is it passing accessibility checks in the storybook?

Apps

• Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
• Does it work on mobile?
• Can you yarn panic && yarn bootstrap or docker-compose up --build and app works as expected?

Publishing

• Is the changelog updated?
• Are the dependencies updated for apps and libraries that are using the newly published library?

Post-merging

• Did the app deploy to https://frontend.preview.zooniverse.org/projects/:project-name/:owner or https://frontend.preview.zooniverse.org/about?
• Is the new feature working or bug now fixed?
  • Is there a Talk or blog post written to announce the new feature(s)?
• Is the design working across browsers (Firefox, Chrome, Edge, Safari) and mobile?
  • Is this approved by our designer?
• Is this ready for production deployment?

[shaunanoordin]

Quick Review

Functionality looks good so far.

• Opening the URL https://localhost:8080/?demo=true&workflow=693&subject=4218 , the pre-selected Subject (4218) is correctly loaded every time.
  • If I proceed to submit the Classification for pre-selected subject 4218, the classifier will revert back to its normal behaviour (i.e. choosing random Subjects using the /queued endpoint)
  • Minor quirk: the list of subjects returned via /queued may also include the initial subject 4218. Not sure if the "you've seen this flag!" will be shown, but I suspect not.
• ❔ Not tested: what happens if the query ?subject=1234 a workflow that doesn't use the /queued endpoint be default? e.g. it's supposed to use /grouped instead?
• ⚠️ I haven't quite figured out how to test for a series of pre-defined subject IDS, e.g. [4218, 4219, 4220]

Let me do a code read to see if I can figure out answers to my own questions.

[shaunanoordin]

PR Review

Package: lib-classifier
Context: Engaging Crowds(?) wants to allow users to classify pre-selected Subjects in a pre-defined order, e.g. consecutive pages in a book.

This PR allows the Classifier to select specific subjects to Classify, by Subject ID. Without this PR, the Classifier would just pull a queue of random Subjects from the /queued endpoint

• Man functionality: on the lib-classifier, the Subject(s) can be selected by ID via query string.
  • ?subject=111 for a single Subject
  • ?subject=111,222,333,444,555 for multiple Subjects
• Once the Classifier has run out pre-selected Subjects, it reverts to standard behaviour.
  • Usually, this means that it pulls random Subjects from /queued
  • Minor quirk: you might encounter the same pre-selected Subject again in the randomly-generated queue.
  • ❔ Not tested: what happens if the workflow doesn't use /queued, but is supposed to use /grouped instead? Code read looks fine though, since SubjectStore.advance() would just call self.populateQueue() without any arguments (i.e. normal behaviour)
• New external dependency: a new Panoptes endpoint has been added, /subjects/selection?workflow_id=...&ids=...
  • e.g. https://panoptes-staging.zooniverse.org/api/subjects/selection?workflow_id=693&ids=4218 or https://panoptes-staging.zooniverse.org/api/subjects/selection?workflow_id=693&ids=4218%2C4219%2C4220
• Error handling: classifier (correctly) crashes when encountering invalid Subject IDs.
  • If an invalid subject ID is specified (either the Subject does not belong to the specified Workflow, or the subject ID is nonsense like ?subject=woofwoof) then the /subjects/selection endpoint itself will return an 422 error.
  • When specifying a list of Subject IDs, then if ANY of the Subjects aren't valid, NONE of the Subjects are returned by /subjects/selection

Functionality checks out, code read looks legit.

Testing

Tested on localhost using macOS 10+ Chrome 90

Subjects tested: all part of "I Fancy Cats"'s standard subject set on the standard workflow (693)

• 4218 (image)
• 4219 (image)
• 4220 (image)

Testing Scenario 1: does the Classifier load the specified subject?

• Load https://localhost:8080/?demo=true&workflow=693&subject=4218
• Confirm that the image loaded is Subject 4218.
• Confirm that the /subjects/selection endpoint is pinged with the correct workflow and subject ID.
• Reload page to ensure it wasn't pure luck that we didn't land on a randomly-selected Subject from queued that happens to be 4218.
• Repeat with Subject 4219 and 4220

Results: Looking good. 👍

Testing Scenario 2: does the Classifier load multiple specific subjects in order?

• Load https://localhost:8080/?demo=true&workflow=693&subject=4218,4219,4220
• Confirm that the first image loaded is Subject 4218.
• Submit Classification. Confirm that the next Subject is 4219.
• Submit Classification. Confirm that the next Subject is 4220.

Results: looking good. 👍

Testing Scenario 3: does the Classifier return to standard behaviour after running out of preselected subjects?

• Repeat Scenario 1. Classify and submit.
• Next Subject should be random. Confirm that this corresponds with the first random Subject from /queued (check the Network tab)
• Repeat with Scenario 2. Classify and submit x3, then check next Subject should also be random.

Results: gooding look. 👍

Testing Scenario 4: does the Classifier refuse to load invalid Subjects?

• Try to load any of the following invalid URLs:
  • https://localhost:8080/?demo=true&workflow=693&subject=73434 (Subject doesn't belong to Wf 693. Subject 73434 instead belongs to SSet 4457, Wf 3116, Proj 1807)
  • https://localhost:8080/?demo=true&workflow=693&subject=woofwoof (nonsense Subject ID)
  • https://localhost:8080/?demo=true&workflow=693&subject=4218,73434,4220 (Invalid subject in a list of valid subjects)
• Confirm that the Classifier just crashes altogether.
  • Classifier page loads, but subject viewer + task area are empty.)
  • Confirm that you're getting 422 responses from the /subjects/selection endpoint.

Results: kooling doog. 👍

Status

LGTM 👍 Stamp of approval!

[srallen]

I really would like to have documentation about all of the selection behaviors.