From a3bf4307a741c0b4350cfa4bf97f8623c28d21ee Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Mon, 29 Apr 2024 15:58:37 +0100 Subject: [PATCH 01/20] pages-editor-pt22: add optional ?tab=settings URL override --- app/pages/lab-pages-editor/PagesEditor.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/pages/lab-pages-editor/PagesEditor.jsx b/app/pages/lab-pages-editor/PagesEditor.jsx index e15641e1e5..2ddfc0225e 100644 --- a/app/pages/lab-pages-editor/PagesEditor.jsx +++ b/app/pages/lab-pages-editor/PagesEditor.jsx @@ -17,9 +17,17 @@ import TasksPage from './components/TasksPage'; import WorkflowSettingsPage from './components/WorkflowSettingsPage'; import strings from './strings.json'; +function getDefaultTab() { // Use ?tab=1 or tab='settings' to link directly to Workflow Settings + const params = new URLSearchParams(window?.location?.search); + const tab = params.get('tab'); + + if ([1, '1', 'settings', 'workflowsettings'].includes(tab)) return 1; + return 0; +} + function PagesEditor({ params }) { const { workflowID: workflowId, projectID: projectId } = params; - const [currentTab, setCurrentTab] = useState(0); + const [currentTab, setCurrentTab] = useState(getDefaultTab()); // Default tab is 0 const tabs = [ { id: 'pages-editor_workflow-header-tab-button_task', From 2bed6df5324207bddacfd9e779fe51c83ced72c9 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Mon, 29 Apr 2024 16:22:06 +0100 Subject: [PATCH 02/20] WorkflowSettings: add Image Display Options --- .../WorkflowSettingsPage.jsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index 0385ef85ec..f5737334d7 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -18,6 +18,7 @@ export default function WorkflowSettingsPage() { const { updaterule } = e?.target?.dataset || {}; if (!key) return; + if (updaterule === 'checkbox') value = !!e?.target?.checked; if (updaterule === 'convert_to_number') value = parseInt(value); if (updaterule === 'undefined_if_empty') value = value || undefined; @@ -104,6 +105,28 @@ export default function WorkflowSettingsPage() {
+ +
+ Image Display Options +

+ Check this option if you want to limit subject height to always fit in the browser window. The max height will be the image's original pixel height. +

+
+ + +
+
+ + {/*
Subject Viewer

@@ -152,6 +175,7 @@ export default function WorkflowSettingsPage() { Quicktalk

TODO

+ */}
From b53569edc7e0bce09e7da5d9d4354f0f29145f42 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 30 Apr 2024 16:28:53 +0100 Subject: [PATCH 03/20] WorkflowSettings: add option to flip image colo(u)r --- .../WorkflowSettingsPage.jsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index f5737334d7..718f65a28a 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -109,9 +109,9 @@ export default function WorkflowSettingsPage() {
Image Display Options

- Check this option if you want to limit subject height to always fit in the browser window. The max height will be the image's original pixel height. + Check "limit subject image height" if you want to limit subject height to always fit in the browser window. The max height will be the image's original pixel height.

-
+
+
+ + +
{/* From 1721f66d6200c8382d7a6c4c84bc773ee4f15532 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 1 May 2024 01:47:21 +0100 Subject: [PATCH 04/20] WorkflowSettingsPage: more options for mutli-image options. 'Reset' experimental tool now resets workflow.configuration as well. --- .../TasksPage/ExperimentalPanel.jsx | 1 + .../WorkflowSettingsPage.jsx | 59 ++++++++++++++++++- css/lab-pages-editor.styl | 2 +- 3 files changed, 59 insertions(+), 3 deletions(-) diff --git a/app/pages/lab-pages-editor/components/TasksPage/ExperimentalPanel.jsx b/app/pages/lab-pages-editor/components/TasksPage/ExperimentalPanel.jsx index 6d18b28da5..021800fb79 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/ExperimentalPanel.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/ExperimentalPanel.jsx @@ -5,6 +5,7 @@ export default function ExperimentalPanel({ }) { function experimentalReset() { update({ + configuration: {}, first_task: '', tasks: {}, steps: [] diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index 718f65a28a..d685d3cc87 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -4,6 +4,7 @@ import AssociatedTutorial from './components/AssociatedTutorial.jsx'; export default function WorkflowSettingsPage() { const { workflow, update, project } = useWorkflowContext(); + const showSeparateFramesOptions = !!workflow?.configuration?.enable_switching_flipbook_and_separate; function onSubmit(e) { e.preventDefault(); @@ -80,7 +81,7 @@ export default function WorkflowSettingsPage() { onChange={doUpdate} > - + {/* */} {/* TODO: this is just a POC - never_retire should be removed, even though it's a valid option on the API. */} +
+ Multi-Image Options +

+ Choose how to display subjects with multiple images. If your subjects are in sequence, such as camera trap images, volunteers can play them like a .gif using the Flipbook viewer. +

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
Image Display Options -

+

Check "limit subject image height" if you want to limit subject height to always fit in the browser window. The max height will be the image's original pixel height.

@@ -140,6 +193,8 @@ export default function WorkflowSettingsPage() {
{/* +
+
Subject Viewer

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl index f41437a675..e7e42bd506 100644 --- a/css/lab-pages-editor.styl +++ b/css/lab-pages-editor.styl @@ -212,7 +212,7 @@ $fontWeightBoldPlus = 700 .workflow-settings-page display: grid gap: $sizeM - grid-template-columns: auto auto + grid-template-columns: 50% auto grid-template-rows: auto auto margin-top: $sizeS From a931267a9bca35336612b874d4046ea61f50d51a Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Wed, 1 May 2024 01:57:31 +0100 Subject: [PATCH 05/20] WorkflowSettingsPage: add playIterations option --- .../WorkflowSettingsPage.jsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index d685d3cc87..8eb041f2e9 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -113,6 +113,28 @@ export default function WorkflowSettingsPage() { Choose how to display subjects with multiple images. If your subjects are in sequence, such as camera trap images, volunteers can play them like a .gif using the Flipbook viewer.

+
+ + +
+
Date: Wed, 1 May 2024 02:00:26 +0100 Subject: [PATCH 06/20] Style: add rounded borders to every select element --- css/lab-pages-editor.styl | 1 + 1 file changed, 1 insertion(+) diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl index e7e42bd506..62bd256277 100644 --- a/css/lab-pages-editor.styl +++ b/css/lab-pages-editor.styl @@ -80,6 +80,7 @@ $fontWeightBoldPlus = 700 select border: 1.5px solid $grey1 + border-radius: $sizeXS color: $black font-size: $fontSizeM padding: $sizeS From 966ad9804488e982d32b117fa4452faf42e7150f Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Thu, 2 May 2024 16:47:57 +0100 Subject: [PATCH 07/20] WorkflowSettingsPage: add ?showRemovedOptions=true to show removed options --- .../WorkflowSettingsPage.jsx | 121 ++++++++---------- 1 file changed, 56 insertions(+), 65 deletions(-) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index 8eb041f2e9..b12608e161 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -2,8 +2,16 @@ import { useWorkflowContext } from '../../context.js'; import AssociatedSubjectSets from './components/AssociatedSubjectSets.jsx'; import AssociatedTutorial from './components/AssociatedTutorial.jsx'; +// Use ?showRemovedOptions=true to show options that are technically valid in +// the API, but removed from the editor. +function getShowRemovedOptions() { + const params = new URLSearchParams(window?.location?.search); + return !!params.get('showRemovedOptions'); +} + export default function WorkflowSettingsPage() { const { workflow, update, project } = useWorkflowContext(); + const showRemovedOptions = getShowRemovedOptions(); const showSeparateFramesOptions = !!workflow?.configuration?.enable_switching_flipbook_and_separate; function onSubmit(e) { @@ -76,26 +84,31 @@ export default function WorkflowSettingsPage() { aria-label="Retirement criteria" className="flex-item" defaultValue={workflow?.retirement?.criteria} + disabled={!showRemovedOptions} aria-describedby="subject-retirement-info" name="retirement.criteria" onChange={doUpdate} > - {/* */} - {/* TODO: this is just a POC - never_retire should be removed, even though it's a valid option on the API. */} + {(showRemovedOptions || workflow?.retirement?.criteria === 'never_retire') && + + } - + {/* Reason for removal (May 2024): standardisation. PFE/FEM Lab doesn't allow "never retire" option, nor setting the retirement count. */} + {showRemovedOptions && (workflow?.retirement?.criteria === 'classification_count') && ( + + )}

If you'd like more complex retirement rules such as conditional @@ -214,58 +227,36 @@ export default function WorkflowSettingsPage() {

- {/* -
- -
- Subject Viewer -

- Choose how to display your subjects. - Refer to the Subject Viewer section of the Glossary for more info. -

-
- -
-
- -
- Multi-Image Options -

- Choose how to display subjects with multiple images. - If your subjects are in a sequence, such as camera trap images, - volunteers can play them like a .gif using the Flipbook viewer. -

-

TODO

-
- -
+ {showRemovedOptions && (<> {/* Reason for removal (Apr 2024): we want users to use automatic subject viewer selection, to reduce complexity and complications. */} +
-
- Classification Tools -

TODO

-
- -
- Quicktalk -

TODO

-
- */} +
+ Subject Viewer +

+ Choose how to display your subjects. + Refer to the Subject Viewer section of the Glossary for more info. +

+
+ +
+
+ )} From 415947d91658315a3870a838138fdc3c4840f416 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Thu, 2 May 2024 23:08:13 +0100 Subject: [PATCH 08/20] WorkflowSettingsPage: add option for separate frames view --- .../WorkflowSettingsPage.jsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index b12608e161..b4f277085d 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -190,6 +190,63 @@ export default function WorkflowSettingsPage() { + {showSeparateFramesOptions && (<> +

Show separate frames as:

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ )}
From 93286733f05f4107ce4cb5dd490669459c45b922 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Fri, 3 May 2024 00:13:12 +0100 Subject: [PATCH 09/20] WorkflowSettingsPage: restyle smaller info text --- .../WorkflowSettingsPage.jsx | 16 ++++++++-------- css/lab-pages-editor.styl | 5 ++++- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index b4f277085d..3ea0187125 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -144,7 +144,7 @@ export default function WorkflowSettingsPage() { @@ -158,7 +158,7 @@ export default function WorkflowSettingsPage() { type="checkbox" /> @@ -172,7 +172,7 @@ export default function WorkflowSettingsPage() { type="checkbox" /> @@ -186,7 +186,7 @@ export default function WorkflowSettingsPage() { type="checkbox" /> @@ -203,7 +203,7 @@ export default function WorkflowSettingsPage() { type="radio" />
  • @@ -216,7 +216,7 @@ export default function WorkflowSettingsPage() { type="radio" />
  • @@ -229,7 +229,7 @@ export default function WorkflowSettingsPage() { type="radio" />
  • @@ -242,7 +242,7 @@ export default function WorkflowSettingsPage() { type="radio" />
    • diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl index 62bd256277..cc828eca3c 100644 --- a/css/lab-pages-editor.styl +++ b/css/lab-pages-editor.styl @@ -248,9 +248,12 @@ $fontWeightBoldPlus = 700 p font-size: $fontSizeS - .small-info + p.small-info font-size: $fontSizeS font-style: italic + + span.small-info + font-size: $fontSizeXS .col-1 grid-column: 1 From c5029a36758d8cf170c700e3000f765899f4cb41 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Fri, 3 May 2024 01:11:14 +0100 Subject: [PATCH 10/20] WorkflowSettingsPage: move Workflow ID --- .../components/TasksPage/TasksPage.jsx | 1 - .../WorkflowSettingsPage.jsx | 26 +++++++++++------ css/lab-pages-editor.styl | 29 ++++++++++++------- 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx index d040477d0a..8a353245e3 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx @@ -214,7 +214,6 @@ export default function TasksPage() {

    {workflow.display_name}

    - {`#${workflow.id}`} {(isActive) ? Active : Inactive}
    diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index 3ea0187125..d3208d32f4 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -47,15 +47,23 @@ export default function WorkflowSettingsPage() { className="workflow-settings-page" onSubmit={onSubmit} > - +
    + +
    +
    + + #{workflow.id} +
    +
    +
    diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl index cc828eca3c..badc064838 100644 --- a/css/lab-pages-editor.styl +++ b/css/lab-pages-editor.styl @@ -218,20 +218,31 @@ $fontWeightBoldPlus = 700 margin-top: $sizeS // Workflow Title - label[for=display_name] - display: block - font-size: $fontSizeL - font-weight: $fontWeightBoldPlus + .workflow-title grid-column: 1 / span 2 grid-row: 1 - text-transform: uppercase - input + > div + position: relative + + label[for=display_name] + display: block + font-size: $fontSizeL + font-weight: $fontWeightBoldPlus + margin-bottom: $sizeXS + text-transform: uppercase + + input[name=display_name] border-radius: $sizeXS display: block font-size: $fontSizeL - margin-top: $sizeXS width: 100% + + .workflow-id + color: $grey2 + background: $white + position: absolute + right: $sizeS // Group of Config Options/Controls fieldset @@ -294,10 +305,6 @@ $fontWeightBoldPlus = 700 font-weight: $fontWeightBoldPlus text-transform: uppercase - .workflow-id - color: $grey4 - font-size: $fontSizeS - .status-active, .status-inactive font-size: $fontSizeS margin-left: $sizeS From cdbb51cab8351503eeba3a85a05bcc5dcb105abd Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Fri, 3 May 2024 01:32:31 +0100 Subject: [PATCH 11/20] Add WorkflowVersion --- .../components/TasksPage/TasksPage.jsx | 6 +++++- .../WorkflowSettingsPage/WorkflowSettingsPage.jsx | 4 +++- .../lab-pages-editor/components/WorkflowVersion.jsx | 9 +++++++++ css/lab-pages-editor.styl | 10 +++++++--- 4 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 app/pages/lab-pages-editor/components/WorkflowVersion.jsx diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx index 8a353245e3..ac94fcc62a 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx @@ -13,6 +13,7 @@ import ExperimentalPanel from './ExperimentalPanel.jsx'; import EditStepDialog from './components/EditStepDialog'; import NewTaskDialog from './components/NewTaskDialog.jsx'; import StepItem from './components/StepItem'; +import WorkflowVersion from '../WorkflowVersion.jsx'; export default function TasksPage() { const { workflow, update } = useWorkflowContext(); @@ -217,7 +218,10 @@ export default function TasksPage() { {(isActive) ? Active : Inactive}
    -

    Tasks

    +
    +

    Tasks

    + +
    + {!(workflow.steps?.length > 0) && ( +
    + +

    Start by adding tasks to build your Task Funnel here.

    +
    + )}
      {workflow.steps?.map((step, index) => ( + ); +} diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl index 3394834ba3..a0a32cf513 100644 --- a/css/lab-pages-editor.styl +++ b/css/lab-pages-editor.styl @@ -324,6 +324,17 @@ $fontWeightBoldPlus = 700 border-radius: $sizeXS color: $grey2 + .no-tasks-notice + padding: $sizeL + text-align: center + + .icon + color: $yellow + font-size: $sizeXXL + + p + color: $grey1 + dialog border: 1px solid $grey1 border-radius: $sizeS From 371502d338345d2e85c6bf06ec3c58cbdc8ba6a5 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Mon, 6 May 2024 22:50:40 +0100 Subject: [PATCH 15/20] WorkflowSettingsPage: show Classifications Count. Restyle disabled elements. --- .../components/WorkflowSettingsPage/WorkflowSettingsPage.jsx | 4 ++-- css/lab-pages-editor.styl | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index 12faca418c..06e525602b 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -100,12 +100,12 @@ export default function WorkflowSettingsPage() { onChange={doUpdate} > + {/* Reason for removal (May 2024): standardisation. PFE/FEM Lab doesn't allow "never retire" option, nor setting the retirement count. */} {(showRemovedOptions || workflow?.retirement?.criteria === 'never_retire') && } - {/* Reason for removal (May 2024): standardisation. PFE/FEM Lab doesn't allow "never retire" option, nor setting the retirement count. */} - {showRemovedOptions && (workflow?.retirement?.criteria === 'classification_count') && ( + {(workflow?.retirement?.criteria === 'classification_count') && ( Date: Tue, 7 May 2024 00:51:44 +0100 Subject: [PATCH 16/20] TasksPage: introduce UI for linear workflows --- .../components/TasksPage/TasksPage.jsx | 7 +++ .../StepItem/SimpleNextControls.jsx | 61 ++++++++++++------- .../components/StepItem/StepItem.jsx | 5 ++ css/lab-pages-editor.styl | 9 +++ 4 files changed, 59 insertions(+), 23 deletions(-) diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx index dde759154f..e146613d48 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx @@ -25,6 +25,12 @@ export default function TasksPage() { const firstStepKey = workflow?.steps?.[0]?.[0] || ''; const isActive = true; // TODO + // A linear workflow means every step (except branching steps) will move into + // the next step in the workflow.steps array. e.g. step0.next = step1 + // A manual (i.e. non-linear) workflow asks the user to explicity spell out + // the next step of each step. + const isLinearWorkflow = true; + /* Adds a new Task of a specified type (with default settings) to a Step. If no Step is specified, a new Step is created. @@ -265,6 +271,7 @@ export default function TasksPage() { allTasks={workflow.tasks} deleteStep={deleteStep} moveStep={moveStep} + isLinearWorkflow={isLinearWorkflow} openEditStepDialog={openEditStepDialog} setActiveDragItem={setActiveDragItem} step={step} diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/SimpleNextControls.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/SimpleNextControls.jsx index 673ce34e51..c35df0a16e 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/SimpleNextControls.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/SimpleNextControls.jsx @@ -5,12 +5,17 @@ const DEFAULT_HANDLER = () => {}; export default function SimpleNextControls({ allSteps = [], + isLastItem = false, + isLinearWorkflow = false, step, updateNextStepForStep = DEFAULT_HANDLER }) { if (!step) return null; const [ stepKey, stepBody ] = step; - + const isLinearItem = isLinearWorkflow && !isLastItem; + const showFakeSubmit = isLinearWorkflow && isLastItem; + const showNextPageDropdown = !isLinearWorkflow && !showFakeSubmit; + function onChange(e) { const next = e.target?.value; updateNextStepForStep(stepKey, next); @@ -18,35 +23,45 @@ export default function SimpleNextControls({ return (
      - - - Submit - - {allSteps.map(([otherStepKey, otherStepBody]) => { - const taskKeys = otherStepBody?.taskKeys?.toString() || '(none)'; - return ( - - ); - })} - + + {allSteps.map(([otherStepKey, otherStepBody]) => { + const taskKeys = otherStepBody?.taskKeys?.toString() || '(none)'; + return ( + + ); + })} + + )} + {showFakeSubmit && ( +
      Submit
      + )}
      ); } SimpleNextControls.propTypes = { allSteps: PropTypes.arrayOf(PropTypes.array), + isLastItem: PropTypes.bool, + isLinearWorkflow: PropTypes.bool, step: PropTypes.array, updateNextStepForStep: PropTypes.func }; \ No newline at end of file diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx index f093961445..7830230713 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx @@ -24,6 +24,7 @@ function StepItem({ deleteStep = DEFAULT_HANDLER, moveStep = DEFAULT_HANDLER, openEditStepDialog = DEFAULT_HANDLER, + isLinearWorkflow = false, setActiveDragItem = DEFAULT_HANDLER, step, stepIndex, @@ -33,6 +34,7 @@ function StepItem({ const [stepKey, stepBody] = step || []; if (!stepKey || !stepBody || !allSteps || !allTasks) return
    • ERROR: could not render Step
      • ; + const isLastItem = stepIndex === allSteps.length - 1; const taskKeys = stepBody.taskKeys || []; function doDelete() { @@ -142,6 +144,8 @@ function StepItem({ {!branchingTaskKey && ( @@ -161,6 +165,7 @@ StepItem.propTypes = { allSteps: PropTypes.array, allTasks: PropTypes.object, deleteStep: PropTypes.func, + isLinearWorkflow: PropTypes.bool, moveStep: PropTypes.func, openEditStepDialog: PropTypes.func, setActiveDragItem: PropTypes.func, diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl index 17850d8e02..b77cb509b4 100644 --- a/css/lab-pages-editor.styl +++ b/css/lab-pages-editor.styl @@ -551,6 +551,7 @@ $fontWeightBoldPlus = 700 &.next-is-submit background: $white border: 2px solid $yellow + color: $black &.simple-next-controls display: flex @@ -594,6 +595,14 @@ $fontWeightBoldPlus = 700 padding: $sizeS $sizeM text-align: center + .fake-submit + background: $white + border-radius: $sizeM + border: 2px solid $yellow + color: $black + font-size: $fontSizeXS + padding: $sizeS $sizeM + .fake-text-input background: $white border: 1px solid $grey1 From a1c9ce9665aaad20bd35705ca7b1fb4e83a65fde Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 7 May 2024 01:05:47 +0100 Subject: [PATCH 17/20] TasksPage: adding/moving/deleting pages triggers linear workflow rules --- .../components/TasksPage/TasksPage.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx index e146613d48..1c3cf3eac1 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx @@ -5,6 +5,7 @@ import createStep from '../../helpers/createStep.js'; import createTask from '../../helpers/createTask.js'; import getNewStepKey from '../../helpers/getNewStepKey.js'; import getNewTaskKey from '../../helpers/getNewTaskKey.js'; +import linkStepsInWorkflow from '../../helpers/linkStepsInWorkflow.js'; import moveItemInArray from '../../helpers/moveItemInArray.js'; import cleanupTasksAndSteps from '../../helpers/cleanupTasksAndSteps.js'; // import strings from '../../strings.json'; // TODO: move all text into strings @@ -40,7 +41,7 @@ export default function TasksPage() { if (!workflow) return; const newTaskKey = getNewTaskKey(workflow.tasks); const newTask = createTask(taskType); - const steps = workflow.steps?.slice() || []; + let steps = workflow.steps?.slice() || []; let step if (stepIndex < 0) { @@ -70,6 +71,10 @@ export default function TasksPage() { [newTaskKey]: newTask }; + if (linkStepsInWorkflow) { + steps = linkStepsInWorkflow(steps, tasks); + } + await update({ tasks, steps }); return (stepIndex < 0) ? steps.length - 1 : stepIndex; } @@ -125,7 +130,10 @@ export default function TasksPage() { const oldSteps = workflow.steps || []; if (from < 0 || to < 0 || from >= oldSteps.length || to >= oldSteps.length) return; - const steps = moveItemInArray(oldSteps, from, to); + let steps = moveItemInArray(oldSteps, from, to); + if (linkStepsInWorkflow) { + steps = linkStepsInWorkflow(steps, workflow.tasks); + } update({ steps }); } @@ -142,6 +150,9 @@ export default function TasksPage() { // cleanedupTasksAndSteps() will also remove tasks not associated with any step. const cleanedTasksAndSteps = cleanupTasksAndSteps(newTasks, newSteps); + if (linkStepsInWorkflow) { + cleanedTasksAndSteps.steps = linkStepsInWorkflow(cleanedTasksAndSteps.steps, cleanedTasksAndSteps.tasks); + } update(cleanedTasksAndSteps); } From 4bac969782e26db9352bb5f56cfe6e925b065943 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 7 May 2024 01:29:29 +0100 Subject: [PATCH 18/20] TasksPage, WorkflowSettingsPage: introduce Advanced Mode --- .../components/TasksPage/TasksPage.jsx | 20 +++++++++++++++---- .../WorkflowSettingsPage.jsx | 18 +++++++++-------- 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx index 1c3cf3eac1..97ca412db8 100644 --- a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx +++ b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx @@ -17,6 +17,15 @@ import StepItem from './components/StepItem'; import WorkflowVersion from '../WorkflowVersion.jsx'; import WrenchIcon from '../../icons/WrenchIcon.jsx'; +// Use ?advanced=true to enable advanced mode. +// - switches from simpler "linear workflow" to "manual workflow". +// - enables Experimental Panel. +// - shows hidden options in workflow settings. +function getAdvancedMode() { + const params = new URLSearchParams(window?.location?.search); + return !!params.get('advanced'); +} + export default function TasksPage() { const { workflow, update } = useWorkflowContext(); const editStepDialog = useRef(null); @@ -25,12 +34,13 @@ export default function TasksPage() { const [ activeDragItem, setActiveDragItem ] = useState(-1); // Keeps track of active item being dragged (StepItem). This is because "dragOver" CAN'T read the data from dragEnter.dataTransfer.getData(). const firstStepKey = workflow?.steps?.[0]?.[0] || ''; const isActive = true; // TODO + const advancedMode = getAdvancedMode(); // A linear workflow means every step (except branching steps) will move into // the next step in the workflow.steps array. e.g. step0.next = step1 // A manual (i.e. non-linear) workflow asks the user to explicity spell out // the next step of each step. - const isLinearWorkflow = true; + const isLinearWorkflow = !advancedMode; /* Adds a new Task of a specified type (with default settings) to a Step. @@ -313,9 +323,11 @@ export default function TasksPage() { /> {/* EXPERIMENTAL */} - + {advancedMode && ( + + )}
    ); diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index 06e525602b..8dfea58724 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -3,16 +3,18 @@ import AssociatedSubjectSets from './components/AssociatedSubjectSets.jsx'; import AssociatedTutorial from './components/AssociatedTutorial.jsx'; import WorkflowVersion from '../WorkflowVersion.jsx'; -// Use ?showRemovedOptions=true to show options that are technically valid in -// the API, but removed from the editor. -function getShowRemovedOptions() { +// Use ?advanced=true to enable advanced mode. +// - switches from simpler "linear workflow" to "manual workflow". +// - enables Experimental Panel. +// - shows hidden options in workflow settings. +function getAdvancedMode() { const params = new URLSearchParams(window?.location?.search); - return !!params.get('showRemovedOptions'); + return !!params.get('advanced'); } export default function WorkflowSettingsPage() { const { workflow, update, project } = useWorkflowContext(); - const showRemovedOptions = getShowRemovedOptions(); + const advancedMode = getAdvancedMode(); const showSeparateFramesOptions = !!workflow?.configuration?.enable_switching_flipbook_and_separate; function onSubmit(e) { @@ -94,14 +96,14 @@ export default function WorkflowSettingsPage() { aria-label="Retirement criteria" className="flex-item" defaultValue={workflow?.retirement?.criteria} - disabled={!showRemovedOptions} + disabled={!advancedMode} aria-describedby="subject-retirement-info" name="retirement.criteria" onChange={doUpdate} > {/* Reason for removal (May 2024): standardisation. PFE/FEM Lab doesn't allow "never retire" option, nor setting the retirement count. */} - {(showRemovedOptions || workflow?.retirement?.criteria === 'never_retire') && + {(advancedMode || workflow?.retirement?.criteria === 'never_retire') && } @@ -294,7 +296,7 @@ export default function WorkflowSettingsPage() { - {showRemovedOptions && (<> {/* Reason for removal (Apr 2024): we want users to use automatic subject viewer selection, to reduce complexity and complications. */} + {advancedMode && (<> {/* Reason for removal (Apr 2024): we want users to use automatic subject viewer selection, to reduce complexity and complications. */}
    From 75367e50186a7910bb1fa622208185df1b8ea6f2 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 4 Jun 2024 18:50:36 +0100 Subject: [PATCH 19/20] Feedback: increase fontsize of span.small_info --- css/lab-pages-editor.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl index b77cb509b4..1ae24347eb 100644 --- a/css/lab-pages-editor.styl +++ b/css/lab-pages-editor.styl @@ -267,7 +267,7 @@ $fontWeightBoldPlus = 700 font-style: italic span.small-info - font-size: $fontSizeXS + font-size: $fontSizeS .col-1 grid-column: 1 From 669589a1b29e60f4c1869498a2b8870d31229419 Mon Sep 17 00:00:00 2001 From: "Shaun A. Noordin" Date: Tue, 4 Jun 2024 18:52:34 +0100 Subject: [PATCH 20/20] Feedback: if showing separate viewers, 'col' layout is default --- .../components/WorkflowSettingsPage/WorkflowSettingsPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx index 8dfea58724..fbb84889d1 100644 --- a/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx +++ b/app/pages/lab-pages-editor/components/WorkflowSettingsPage/WorkflowSettingsPage.jsx @@ -207,7 +207,7 @@ export default function WorkflowSettingsPage() {