Add a showTutorial hint to the popup tutorial

packages/app-project/src/screens/ClassifyPage/ClassifyPage.js

@@ -1,6 +1,7 @@
 import { Box, Grid } from 'grommet'
 import dynamic from 'next/dynamic'
 import { arrayOf, func, shape, string } from 'prop-types'
+import { useState } from 'react'
 import { withResponsiveContext } from '@zooniverse/react-components'
 
 import ThemeModeToggle from '@components/ThemeModeToggle'
@@ -37,6 +38,8 @@ function ClassifyPage({
   const responsiveColumns = (screenSize === 'small')
     ? ['auto']
     : ['1em', 'auto', '1em']
+  const [classifierProps, setClassifierProps]  = useState({})
+  const [showTutorial, setShowTutorial] = useState(false)
 
   let subjectSetFromUrl
   if (workflowFromUrl && workflowFromUrl.subjectSets) {
@@ -51,13 +54,21 @@ function ClassifyPage({
   const isIndexed = subjectSetFromUrl?.metadata.indexFields
   canClassify = isIndexed ? !!subjectID : canClassify
 
-  let classifierProps = {}
-  if (canClassify) {
-    classifierProps = {
+  /*
+    Derive classifier state from the URL, when the URL changes.
+    Use the previous classifier state if there's no workflow ID in the URL.
+  */
+  const workflowChanged = classifierProps.workflowID !== workflowID
+  const subjectSetChanged = classifierProps.subjectSetID !== subjectSetID
+  const subjectChanged = classifierProps.subjectID !== subjectID
+  const URLChanged = workflowChanged || subjectSetChanged || subjectChanged
+  if (canClassify && URLChanged) {
+    setClassifierProps({
       workflowID,
       subjectSetID,
       subjectID
-    }
+    })
+    setShowTutorial(true)
   }
 
   return (
@@ -83,6 +94,7 @@ function ClassifyPage({
               cachePanoptesData={cachePanoptesData}
               onAddToCollection={addToCollection}
               onSubjectReset={onSubjectReset}
+              showTutorial={showTutorial}
               {...classifierProps}
             />
             <ThemeModeToggle />

packages/app-project/src/screens/ClassifyPage/ClassifyPage.spec.js

@@ -77,62 +77,89 @@ describe('Component > ClassifyPage', function () {
 
   describe('with a selected workflow', function () {
     let wrapper
+    let classifier
 
     before(function () {
       wrapper = shallow(<ClassifyPage appLoadingState={asyncStates.success} workflowID='1234' />)
+      classifier = wrapper.find(ClassifierWrapper)
     })
 
     it('should not show a workflow selector', function () {
       expect(wrapper.find(WorkflowMenuModal)).to.have.lengthOf(0)
     })
+
+    it('should show classifier popup tutorials', function () {
+      expect(classifier.prop('showTutorial')).to.be.true()
+    })
+
+    it('should update the classifier when the workflow changes', function () {
+      wrapper.setProps({ workflowID: '3456' })
+      classifier = wrapper.find(ClassifierWrapper)
+      expect(classifier.prop('workflowID')).to.equal('3456')
+    })
   })
 
   describe('with a grouped workflow', function () {
     describe('without a subject set', function () {
       let wrapper
+      let classifier
       let workflows = [{
         id: '1234',
         grouped: true
       }]
 
       before(function () {
         wrapper = shallow(<ClassifyPage appLoadingState={asyncStates.success} workflowFromUrl={workflows[0]} workflows={workflows} />)
+        classifier = wrapper.find(ClassifierWrapper)
       })
 
       it('should show a workflow menu', function () {
         expect(wrapper.find(WorkflowMenuModal)).to.have.lengthOf(1)
       })
 
       it('should not pass the workflow ID to the classifier', function () {
-        const classifier = wrapper.find(ClassifierWrapper)
         expect(classifier.prop('workflowID')).to.be.undefined()
       })
+
+      it('should not show classifier popup tutorials', function () {
+        expect(classifier.prop('showTutorial')).to.be.false()
+      })
     })
 
     describe('with a subject set', function () {
       let wrapper
+      let classifier
       let workflows = [{
         id: '1234',
         grouped: true
       }]
 
       before(function () {
         wrapper = shallow(<ClassifyPage appLoadingState={asyncStates.success} subjectSetID='3456' workflowID='1234' workflowFromUrl={workflows[0]} workflows={workflows} />)
+        classifier = wrapper.find(ClassifierWrapper)
       })
 
       it('should not show a workflow menu', function () {
         expect(wrapper.find(WorkflowMenuModal)).to.have.lengthOf(0)
       })
 
       it('should pass the workflow ID to the classifier', function () {
-        const classifier = wrapper.find(ClassifierWrapper)
         expect(classifier.prop('workflowID')).to.equal('1234')
       })
 
       it('should pass the subject set ID to the classifier', function () {
-        const classifier = wrapper.find(ClassifierWrapper)
         expect(classifier.prop('subjectSetID')).to.equal('3456')
       })
+
+      it('should show classifier popup tutorials', function () {
+        expect(classifier.prop('showTutorial')).to.be.true()
+      })
+
+      it('should update the classifier when the subject set changes', function () {
+        wrapper.setProps({ subjectSetID: '5678' })
+        classifier = wrapper.find(ClassifierWrapper)
+        expect(classifier.prop('subjectSetID')).to.equal('5678')
+      })
     })
 
     describe('with an indexed subject set', function () {
@@ -150,6 +177,7 @@ describe('Component > ClassifyPage', function () {
 
       describe('without a subject', function () {
         let wrapper
+        let classifier
 
         before(function () {
           wrapper = shallow(
@@ -161,25 +189,29 @@ describe('Component > ClassifyPage', function () {
               workflows={workflows}
             />
           )
+          classifier = wrapper.find(ClassifierWrapper)
         })
 
         it('should show a workflow menu', function () {
           expect(wrapper.find(WorkflowMenuModal)).to.have.lengthOf(1)
         })
 
         it('should not pass the workflow ID to the classifier', function () {
-          const classifier = wrapper.find(ClassifierWrapper)
           expect(classifier.prop('workflowID')).to.be.undefined()
         })
 
         it('should not pass the subject set ID to the classifier', function () {
-          const classifier = wrapper.find(ClassifierWrapper)
           expect(classifier.prop('subjectSetID')).to.be.undefined()
         })
+
+        it('should not show classifier popup tutorials', function () {
+          expect(classifier.prop('showTutorial')).to.be.false()
+        })
       })
 
       describe('with a subject', function () {
         let wrapper
+        let classifier
 
         before(function () {
           wrapper = shallow(
@@ -192,26 +224,34 @@ describe('Component > ClassifyPage', function () {
               workflows={workflows}
             />
           )
+          classifier = wrapper.find(ClassifierWrapper)
         })
 
         it('should not show a workflow menu', function () {
           expect(wrapper.find(WorkflowMenuModal)).to.have.lengthOf(0)
         })
 
         it('should pass the workflow ID to the classifier', function () {
-          const classifier = wrapper.find(ClassifierWrapper)
           expect(classifier.prop('workflowID')).to.equal('1234')
         })
 
         it('should pass the subject set ID to the classifier', function () {
-          const classifier = wrapper.find(ClassifierWrapper)
           expect(classifier.prop('subjectSetID')).to.equal('3456')
         })
 
         it('should pass the subject ID to the classifier', function () {
-          const classifier = wrapper.find(ClassifierWrapper)
           expect(classifier.prop('subjectID')).to.equal('5678')
         })
+
+        it('should show classifier popup tutorials', function () {
+          expect(classifier.prop('showTutorial')).to.be.true()
+        })
+
+        it('should update the classifier when the subject changes', function () {
+          wrapper.setProps({ subjectID: '8901' })
+          classifier = wrapper.find(ClassifierWrapper)
+          expect(classifier.prop('subjectID')).to.equal('8901')
+        })
       })
     })
   })

packages/app-project/src/screens/ClassifyPage/components/ClassifierWrapper/ClassifierWrapper.js

@@ -26,6 +26,7 @@ export default function ClassifierWrapper({
   onSubjectReset = () => true,
   project,
   recents,
+  showTutorial = false,
   subjectID,
   subjectSetID,
   user,
@@ -100,6 +101,7 @@ export default function ClassifierWrapper({
           onSubjectReset={onSubjectReset}
           onToggleFavourite={onToggleFavourite}
           project={project}
+          showTutorial={showTutorial}
           subjectID={subjectID}
           subjectSetID={subjectSetID}
           workflowID={workflowID}
@@ -144,6 +146,8 @@ ClassifierWrapper.propTypes = {
   onSubjectReset: func,
   /** JSON snapshot of the active Panoptes project */
   project: shape({}),
+  /** Allow the classifier to open a popup tutorial, if necessary. */
+  showTutorial: bool,
   /** optional subjectID (from the page URL.) */
   subjectID: string,
   /** optional subject set ID (from the page URL.) */

packages/lib-classifier/dev/components/App/App.js

@@ -170,6 +170,7 @@ class App extends React.Component {
               onCompleteClassification={(classification, subject) => console.log('onComplete', classification, subject)}
               onError={this.onError}
               project={this.state.project}
+              showTutorial
               subjectID={this.props.subjectID}
               subjectSetID={this.props.subjectSetID}
               workflowID={workflowID}

packages/lib-classifier/src/components/Classifier/Classifier.js

@@ -14,6 +14,7 @@ export default function Classifier({
   locale,
   onError = () => true,
   project,
+  showTutorial = false,
   subjectID,
   subjectSetID,
   workflowSnapshot,
@@ -63,7 +64,7 @@ export default function Classifier({
     return (
       <>
         <Layout />
-        <ModalTutorial />
+        {showTutorial && <ModalTutorial />}
       </>
     )
   } catch (error) {
@@ -82,6 +83,7 @@ Classifier.propTypes = {
   project: PropTypes.shape({
     id: PropTypes.string.isRequired
   }).isRequired,
+  showTutorial: PropTypes.bool,
   subjectSetID: PropTypes.string,
   subjectID: PropTypes.string,
   workflowSnapshot: PropTypes.shape({

packages/lib-classifier/src/components/Classifier/ClassifierContainer.js

@@ -56,6 +56,7 @@ export default function ClassifierContainer({
   onSubjectReset = () => true,
   onToggleFavourite = () => true,
   project,
+  showTutorial=false,
   subjectID,
   subjectSetID,
   workflowID
@@ -133,6 +134,7 @@ export default function ClassifierContainer({
             locale={locale}
             onError={onError}
             project={project}
+            showTutorial={showTutorial}
             subjectSetID={subjectSetID}
             subjectID={subjectID}
             workflowSnapshot={workflowSnapshot}
@@ -166,5 +168,6 @@ ClassifierContainer.propTypes = {
   project: PropTypes.shape({
     id: PropTypes.string.isRequired
   }).isRequired,
+  showTutorial: PropTypes.bool,
   theme: PropTypes.object
 }