Pages Editor: UI tweaks, improved Workflow Settings

[shaunanoordin]

PR Overview

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

This PR combines a number of UI tweaks and updates to the Workflow Settings. The UI changes makes the visual presentation closer to Sean's intended design, while the Workflow Settings changes make that tab ⭐ on par with the Project Builder FEM Lab's functionality. (comparative link)

Part 1: UI changes

• Workflow ID moved to Workflow Settings tab
• Workflow Version added, and also displays a spinner 🕐 to indicate loading/fetching activity
• TasksPage: now displays a "you have no tasks" notice if you have no tasks.

➡️

➡️

Part 2: Workflow Settings Tab

• Subject Retirement rule now locked to Classification Count, with no ability to specify how many to retirement.
• Multi Image Options rules added
  • Enable "Allow Separate Frames View" to show additional options.
• Image Display Options now includes "Allow users to flip color"
• Hidden features:
  • you can now access the Workflow Settings tab directly by adding ?tab=settings to the URL
  • you can now access "removed options" (i.e. workflow options that are valid in the API but removed to keep things in line with Project Builder FEM Lab) by adding ?tab=settings&showRemovedOptions=true ?tab=settings&advanced=true to the URL

Misc Changes

• ❗ DataManager: the data memo is now updated when the ready/fetching/updating status value changes. This wasn't tracked previously!
  • Since I'm updating the data manager, I need to pay extra attention that that changes are being committed to the API properly, and updates from the API are being fetched properly. Reviewer: I'd appreciate eyes on this as well.
• The Experimental/Debug Panel's "Reset" button now also resets workflow.configuration
• Icons added: WrenchIcon, LoadingIcon (spinner)

Update 1 (link)

• ⭐ Workflows are now linear.
• New advanced mode hidden behind ?advanced=true. (Use this to enable manual/non-linear workflows, and the Experimental Panel)
• Fix: classifications count no longer hidden

Testing

No specific tests recommended. Just check that general functionality is maintained, and the code makes sense.

• Open the Test URL
• Make general changes to the workflow on the Tasks tab:
  • If no tasks, "you have no tasks" notification should appear
  • You should be able to add tasks/pages, edit them, etc
• Check the Workflow Settings Tab:
  • You should be able to change workflow-level settings, e.g. change the workflow's name.
  • The amount of workflow-level settings you can change should match the FEM Lab (?femLab=true) version of the Project Builder: https://master.pfe-preview.zooniverse.org/lab/1982/workflows/3711?femLab=true&env=staging
• Reload the page to confirm changes are made.

Status

Ready for review. 👌

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

[shaunanoordin]

PR Update

• ⭐ New behaviour: workflows are now linear.
  • Each (non-branching) page's "next page" will always be the next page in visual order.
  • This matches Sean's initial, more elegant design, so UI has been updated accordingly.
• New hidden option: add ?advanced=true to the URL to...
  • switch from linear workflows to manual workflows (where you need to explicitly spell out the "next page" for each non-branching page.
  • shows Experimental Panel
• Fix: classifications count for "retirement" setting is now no longer hidden.

[coveralls]

coverage: 56.994%. remained the same
when pulling 669589a on pages-editor-pt22
into 614ec1b on master.

[goplayoutside3]

While I moved tasks around and changed settings, the version does update 👍 Do you know off the top of your head, is this versioning only used by the classifier to check if it should re-render? Do project teams actually track version number for any other reason?

[shaunanoordin]

Ooh, this is a good one. OK, so, workflow versions:

The workflow version is intended for the project owners, AFAIK. Project owners are supposed to keep track of the version numbers, so they can match it to answers/classifications from the volunteers.

Example: v8.1 of a workflow has Task T1: "Do you see a cat?". Researcher then changes it to T1: "Do you see a feline of any sort?", which updates the workflow to v8.2. If it matters to the researcher which variant of the question the volunteer is asking, they can filter between the responses by checking classification.metadata.workflow_version in the classifications export.

As far as I can tell:

• Workflow version is in the format of major_number.minor_number
• The major version is increased when: (i) a task is added, (ii) a task is deleted, (iii) the "next task" of a task is changed, (iv) the "next task" of a question tasks' answer is changed, (v) the workflow.first_task is changed.
• The minor version is increased when: (i) a task is edited (any attribute such as 'task.question' is changed, asides from 'task.next' or 'questionTask.answer[x].next')
• i.e. major versions when the overall structure/flow of Tasks are changed, minor versions when any one Task is modified.
• ❗ NO version changes occur when steps/pages are changed. 🤨 (Wait, hang on... what?)

⚠️ I think I need to follow up on this on Panoptes.

[shaunanoordin]

This is now an issue for discussion on Panoptes: zooniverse/panoptes#4340

[goplayoutside3]

Looking good! I really like that I can drag tasks and the order is sorted linearly for me. I used https://pr-7093.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging to review the UX, and have a few non-blocking UX things to double check with you:

1. I can use tab=settings in the url to immediately show the Workflow Settings tab on load. However, once I click the Tasks tab, the param remains unchanged in the url. If the tab param influences the UI, do you want the UI to influence the tab param too?

2. In the Workflow Settings tab, when I load the above workflow in the classic femLab, the "show separate frames as" radio button for single column is selected, which I believe is the default.
   

   However, in this PR branch there's no selection in that setting for the same workflow:
   
   Once I clicked an option, now the workflow shows a selection in the Pages Editor, but the Pages Editor UI should show the default separate frames orientation selection on workflow creation.

3. In the above screenshot of separate frames options in the Workflow Settings, the description of each option is using 10px font. That's smaller than PFE and Sean's Figma design shows 16px for the descriptions. I'd err on the side of Sean's design for readability.

[shaunanoordin]

Thanks Delilah! 👍

Updates & responses:

Item 1: should the ?tab= in the URL change when the tab changes?
For the moment, the ?tab=settings is just a hidden shortcut that for developers, but I see this may actually be a useful thing for project owners as well. I'll look into this in a future update

Item 2: when "Separate Frames" options are enabled, the "single column" layout should be the default.
Done 👍 The "single column" is now shown to be the default, though the actual multi_image_layout data value isn't updated.

In practice (and following PFE logic) this means that, if multi_image_mode = 'separate', then multi_image_layout = undefined is treated the same as multi_image_layout = 'col'. Shaun TODO: confirm that this logic is consistent across PFELab/FEMLab project builder, Pages Editor, PFE Classifier, and FEM Classifier.

Item 3: the small help text in the "Separate Frames
I've cranked up the fontsize, but to 14px instead of 16px for now. 🤔 I think that small help text should be somehow separate from the main text; I'll ask Sean for a designer's look-through after 7105 gets merged.

Item 4: how do workflow versions work in regards to workflow.steps?
🤷 I guess we'll find out! zooniverse/panoptes#4340