Pages Editor: add Drawing Task

[shaunanoordin]

PR Overview

Part of: Pages Editor MVP project and FEM Lab super-project
Follows #7093
Staging branch URL: https://pr-7100.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging

This PR adds the Drawing Task to the list of supported Tasks in the Pages Editor. Some miscellaneous cleanup was also performed.

Main:

• New Feature: Drawing Task
  • You can add a Drawing Task by going to Tasks Page -> Add a new Task -> Drawing
  • Each Drawing Task can have any number of Drawing Tools.
  • The supported drawing tools need to meet two criteria: 1. the tool works in FEM Classifier, and 2. it's not an experimental tool (i.e. already exposed to project owners on FEM Lab Project Builder)
    • i.e. 'circle', 'ellipse', 'line', 'point', 'polygon', 'rectangle', 'rotateRectangle'
  • ❗ Please note that subtasks are not supported at this time. This will be a future (phase 2?) addition, due to the complexity it adds.
  • All other settings (including choice of colours) match the FEM Lab Project Builder.
  • NOTE: only the 'point' tool has a "size" parameter.
• DrawingToolIcon added.
  • The icons' svg code is pulled from the FEM codebase.
  • ⚠️ REMINDER TO SHAUN: write documentation for migrating Pages Editor to the FEM codebase, notably with information on the things in /icons

Misc Cleanup:

• (UI) Pages Editor now supports "Unknown Tasks", i.e. the editor uses a default placeholder when task.type isn't one of drawing/multiple/single/text
• (UI) when a Page has multiple Tasks, the label "Main Text" (aka instructions) changes to the name of the Task
• (code cleanup) SingleQuestionTask now renamed to QuestionTask, since it supports both task.type = multiple and single
• (code cleanup) added missing component.propTypes to various components
• (design) various visual tweaks

Screenshot: example of a Drawing Task with 2 drawing tools

Dev Notes

• Typing a tool name seems to trigger several API calls. I need to find a way to debounce the DrawingTask.update() call.

Testing

• Open the test workflow in the Pages Editor using the Staging Branch URL. (Or pick any workflow of your choice, really.)
• Add a Drawing Task.
  • Change multiple task field values, e.g. main text and help text.
  • Add multiple different tools to that drawing task.
  • e.g. Red Large Point tool with min 2, Cyan Rectangle tool with max 4, etc.
• Reload to confirm changes have been saved.
• Click on "Preview Workflow" and try to make Drawing Task classifications on the FEM Classifier.

Status

Ready for review. 🖊️

Requires 7093 to be merged first before this can be merged.

[kieftrav]

LGTM! A couple small comments but nothing preventing merging.

I did notice that if I create 2nd drawing task in the Overlay and leave it empty without a tool, it stays there on page change. Not sure if this should be default behavior. Because it doesn't break anything and it does what's expected (nothing), it isn't a dealbreaker for the PR.

[kieftrav]

I'd consider inverting this as an Object so it's more useful.. For example:

TOOL_COLOR_OPTIONS = { 'Red': '#ff0000' }

Then, when you need a color you're able to use the name of the color instead of searching through an array to find a hex value. It makes your loop through a little different (Object.keys(TOOL_COLOR_OPTIONS).map) but from a readability perspective it's a little more clear. It also creates the opportunity to abstract this bit of code out and up for anywhere we want color selection like this.

Not a dealbreaker but a thought to consider.

[shaunanoordin]

😆 I actually structured it as an object first, before turning it into an array!

I can't remember 100% why I changed it to an array, but I think it was following a discussion with Sam & Sean about 1. the choice of colours we want to present to users, and 2. the name of those colours (e.g. "#89e097 apple" instead of "#00ff00 green"). (I probably just left this as an array until we sorted out that question. 🤔 )

Bonus trivia: the following are some random half-remembered bits from the discussion, just for interest:

• The PFE colour choices are extremely garish and not part of any branding...
• ...but garish colours happen to provide excellent contrast for marks drawn on top of camera trap photos and documents.
• Nobody knows why #00ff00 green is the default.
• I think we could technically allow users to set any colour they want, since Panoptes just stores the hex code and both PFE & FEM classifiers renders any valid hex colour, but we wanted to make this selection as simple as possible for project owners.

[kieftrav]

Very clever file! It'd be cool if we created a shared area for all these SVG icons defined in JS once this gets moved into FEM. I've seen a couple across the codebase and it'd be nice to know what resources are available like this.

[shaunanoordin]

Thanks! I agree, it'd be good to organise these SVG icons better once Pages Editor gets moved to FEM. The Drawing Tool icons should definitely be something that sits in a shared, uh... "lib-icons" package, maybe?

Right now, in FEM, they're buried in lib-classifier/src/plugins/tasks/drawing/components/icons and you'd only know it's there when you need to dig for it.

[coveralls]

coverage: 56.994% (+0.003%) from 56.991%
when pulling ede1d82 on pages-editor-pt23
into 1ca8532 on master.

[shaunanoordin]

Thanks Travis!

Noted on the ability to create a Drawing Task with 0 Tools. That's technically valid (data-wise), but doesn't make sense (volunteer-wise). (The same applies to other questions like a Question Task with 0 Answers.) We didn't implement any programmatic guardrails for nonsensical workflows yet, we're just assuming project owners would know not to do this - I'd be interested to see the feedback we get from testers on this.