forked from zooniverse/Panoptes-Front-End
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Pages Editor: implement Associated Subject Sets & fetch more data (zo…
…oniverse#7048) * pages-editor-pt15: prepare WorkflowSettingsPage for setting Subject Sets * Add AssociatedSubjectSets component * DataManager: fetch project AND workflow resources at the same time * DataManager: fix project missing after update. Add documentation about project resource. * TasksPage: dynamically generate Preview URL * AssociatedSubjectSets: fetch Subject Sets. Add status-banner design * DataManager: add status banners for fetching/error states * PagesEditor: tweak style to add vertical padding to main container * AssociatedSubjectSets: enable checkboxes for linking Subject Sets * AssociatedSubjectSets: implement linking/unlinking Subject Sets * WorkflowSettingsPage: style input-group element * WorkflowSettingsPage: remove test sections * PagesEditor: revert default tab to be the Tasks tab * TasksPage: extract getPreviewEnv() into an external helper file * AssociatedSubjectSets: fix typo
- Loading branch information
1 parent
a8bcd3d
commit 6742908
Showing
8 changed files
with
177 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
...ges/lab-pages-editor/components/WorkflowSettingsPage/components/AssociatedSubjectSets.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { useState, useEffect } from 'react'; | ||
|
|
||
| const ARBITRARY_PAGE_SIZE = 250; // If a project has more than this number of subject sets, then we need a better solution. | ||
|
|
||
| export default function AssociatedSubjectSets({ project, workflow }) { | ||
| const [apiData, setApiData] = useState({ | ||
| subjectSets: null, | ||
| status: 'ready' | ||
| }); | ||
| const [linkedSubjectSets, setLinkedSubjectSets] = useState(workflow?.links?.subject_sets || []); | ||
|
|
||
| useEffect(() => { | ||
| async function fetchSubjectSets() { | ||
| try { | ||
| setApiData({ | ||
| subjectSets: null, | ||
| status: 'fetching' | ||
| }); | ||
|
|
||
| const ssets = await project.get('subject_sets', { sort: '+id', page_size: ARBITRARY_PAGE_SIZE }); | ||
| if (!ssets) throw new Error('No subject sets'); | ||
|
|
||
| setApiData({ | ||
| subjectSets: ssets, | ||
| status: 'ready' | ||
| }); | ||
|
|
||
| } catch (err) { | ||
| console.error('AssociatedSubjectSets: ', err); | ||
| setApiData({ | ||
| subjectSets: null, | ||
| status: 'error' | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| fetchSubjectSets(); | ||
| }, [project, workflow]); | ||
|
|
||
| function toggleSubjectSet(e) { | ||
| const subjectSetId = e?.currentTarget?.dataset?.subjectset; | ||
| if (!subjectSetId) return; | ||
| const alreadyLinked = linkedSubjectSets.includes(subjectSetId); | ||
|
|
||
| if (alreadyLinked) { // If already linked, remove it. | ||
| setLinkedSubjectSets(linkedSubjectSets.filter(sset => sset !== subjectSetId)); | ||
| workflow.removeLink('subject_sets', [subjectSetId]); | ||
| } else { // If not yet linked, add it. | ||
| setLinkedSubjectSets([ ...linkedSubjectSets, subjectSetId]); | ||
| workflow.addLink('subject_sets', [subjectSetId]); | ||
| } | ||
| } | ||
|
|
||
| if (!project || !workflow) return null; | ||
|
|
||
| if (apiData.status === 'fetching') { | ||
| return (<div className="status-banner fetching">Fetching Subject Sets...</div>) | ||
| } | ||
|
|
||
| if (apiData.status === 'error') { | ||
| return (<div className="status-banner error">ERROR: couldn't fetch Subject Sets</div>) | ||
| } | ||
|
|
||
| return ( | ||
| <ul className="input-group"> | ||
| {apiData?.subjectSets?.map((subjectSet, index) => ( | ||
| <li key={`associated-subject-set-${subjectSet.id}`}> | ||
| <input | ||
| checked={!!linkedSubjectSets.includes(subjectSet.id)} | ||
| data-subjectset={subjectSet.id} | ||
| id={`associated-subject-set-${subjectSet.id}`} | ||
| onChange={toggleSubjectSet} | ||
| type="checkbox" | ||
| /> | ||
| <label htmlFor={`associated-subject-set-${subjectSet.id}`}> | ||
| {subjectSet.display_name || '???'} (#{subjectSet.id}) | ||
| </label> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| } |
3 changes: 3 additions & 0 deletions
3
app/pages/lab-pages-editor/components/WorkflowSettingsPage/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import WorkflowSettingsPage from './WorkflowSettingsPage.jsx'; | ||
|
|
||
| export default WorkflowSettingsPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /* | ||
| Figures out of the "Preview Workflow" link requires "?env=staging" or | ||
| "?env=production" | ||
| */ | ||
| export default function getPreviewEnv() { | ||
| const hostname = window?.location?.hostname || ''; | ||
| const params = new URLSearchParams(window?.location?.search); | ||
| const explicitEnv = params.get('env'); | ||
|
|
||
| // If an explicit ?env=... is specified, use that. | ||
| if (explicitEnv) return `?env=${explicitEnv}`; | ||
|
|
||
| // The following URLs default to using staging: | ||
| // https://local.zooniverse.org:3735/lab/1982/workflows/editor/3711 | ||
| // https://pr-7046.pfe-preview.zooniverse.org/lab/1982/workflows/editor/3711?env=staging | ||
| if (hostname.match(/^(local|.*\.pfe-preview)\.zooniverse\.org$/ig)) { | ||
| return '?env=staging' | ||
| } | ||
|
|
||
| return ''; | ||
| } |
Oops, something went wrong.