From 3357e5550670f5e5724417e9404793803272581c Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Wed, 27 Jul 2016 12:30:13 +0100
Subject: [PATCH] Add a filtering step to the marking task Allow the decision
 tree task to control which subject representation (image or text) is shown in
 the viewer. Use the OCR as the alt text for the subject image. Add a back
 button which resets the marking task.

---
 app/classifier.cjsx                   | 21 ++-----------
 app/classify/classification-task.cjsx | 29 ++++++++++++++---
 app/classify/subject-viewer.cjsx      |  5 ++-
 app/classify/subject.cjsx             | 20 ++++++++++++
 app/classify/tasks/choose.cjsx        |  8 +++--
 app/classify/tasks/filter.cjsx        | 45 +++++++++++++++++++++++++++
 css/custom.styl                       | 31 ++++++++++++------
 7 files changed, 123 insertions(+), 36 deletions(-)
 create mode 100644 app/classify/subject.cjsx
 create mode 100644 app/classify/tasks/filter.cjsx

diff --git a/app/classifier.cjsx b/app/classifier.cjsx
index e49f42f..913fd6b 100644
--- a/app/classifier.cjsx
+++ b/app/classifier.cjsx
@@ -1,9 +1,8 @@
 React = require 'react'
 
-SubjectTools = require './classify/subject-tools'
-SubjectViewer = require './classify/subject-viewer'
 Annotation = require './classify/annotation'
 ClassificationTask = require './classify/classification-task'
+Subject = require './classify/subject'
 Subjects = require './lib/subjects'
 Classifications = require './lib/classifications'
 
@@ -35,28 +34,14 @@ module.exports = React.createClass
       
   render: ->
     <ClassificationTask onChange={@onChangeAnnotation} onFinish={@onFinishPage}>
-      <div className="readymade-subject-viewer-container">
-        {
-          if @state.currentSubjects.length
-            <div className="readymade-subject-viewer">
-              <SubjectTools project={@props.project} api={@props.api} talk={@props.talk} user={@props.user} subject_set={@props.subject_set} subject={@state.currentSubjects[0]} />
-              <div className="scroll-container" ref="scrollContainer">
-                {<SubjectViewer subject={subject} key={subject.id} ref="subject#{subject.id}" isCurrent={subject.id is @subjects.current.id} /> for subject in @state.currentSubjects}
-              </div>
-            </div>
-        }
-      </div>
+      <Subject project={@props.project} api={@props.api} talk={@props.talk} user={@props.user} subject_set={@props.subject_set} currentSubjects={@state.currentSubjects} />
     </ClassificationTask>
   
   onChangeAnnotation: (annotation) ->
-    if annotation.issue
-      @refs["subject#{subject.id}"].getDOMNode().classList.add 'active' for subject in @state.currentSubjects
-    else
-      @refs["subject#{subject.id}"].getDOMNode().classList.remove 'active' for subject in @state.currentSubjects
 
   onFinishPage: (task_annotations) ->
     @classifications?.set_annotations ({task: key, value: value} for key, value of task_annotations)
-    @classifications.finish()
+    # @classifications.finish()
     console.log JSON.stringify @classifications.current()
     console.log @state.currentSubjects[0]?.metadata.image
     @nextSubject()
diff --git a/app/classify/classification-task.cjsx b/app/classify/classification-task.cjsx
index d4d5813..10903e6 100644
--- a/app/classify/classification-task.cjsx
+++ b/app/classify/classification-task.cjsx
@@ -1,4 +1,5 @@
 React = require 'react'
+FilterTask = require './tasks/filter'
 ChooseTask = require './tasks/choose'
 EditTask = require './tasks/edit'
 Annotation = require './annotation'
@@ -40,21 +41,24 @@ module.exports = React.createClass
     description: "Find a health issue on this page that fits one of the categories below. Your task is to collect all the information on the page about the issue you've found."
   
   getInitialState: ->
-    step: 'choose'
+    step: 'filter'
     type: 'health'
     instructions: @defaultInstructions
     annotations: []
     
   render: ->
+    children = React.Children.map @props.children, (child) => React.cloneElement child, task: @state.step
     <div>
       <TaskInstructions instructions={@state.instructions} />
       <div className="readymade-classification-interface">
         <div className="readymade-decision-tree-container">
           <div className="decision-tree">
             {switch @state.step
+              when 'filter'
+                <FilterTask onComplete={@filter} />
               when 'choose'
                 <div>
-                  <ChooseTask onChooseTask={@create} onFinish={@finish} />
+                  <ChooseTask onChooseTask={@create} onBack={@reset} onFinish={@finish} />
                   <AnnotationsSummary annotations={@state.annotations} deleteTool={@deleteAnnotation} onEdit={@edit} />
                 </div>
               when 'edit'
@@ -62,10 +66,20 @@ module.exports = React.createClass
             }
           </div>
         </div>
-          {@props.children}
+          {children}
       </div>
     </div>
   
+  filter: (choice) ->
+    switch choice
+      when 'yes'
+        @setState 
+          step: 'choose'
+          type: null
+          instructions: @defaultInstructions
+      when 'no'
+        @finish()
+
   create: (type) ->
     @newAnnotation type
     @setState 
@@ -104,6 +118,12 @@ module.exports = React.createClass
     
     @props.onChange new AnnotationTool
   
+  reset: ->
+    annotation.destroy() for annotation in @state.annotations
+    step = 'filter'
+    annotations = []
+    @setState {annotations, step}
+    
   finish: ->
     task_annotations = {}
     @state.annotations.map (annotation, i) ->
@@ -114,7 +134,8 @@ module.exports = React.createClass
     annotations = @state.annotations
     annotation.destroy() for annotation in annotations
     annotations = []
-    @setState {annotations}
+    step = 'filter'
+    @setState {annotations, step}
   
   newAnnotation: (type) ->
     annotations = @state.annotations
diff --git a/app/classify/subject-viewer.cjsx b/app/classify/subject-viewer.cjsx
index 8018d86..47479a7 100644
--- a/app/classify/subject-viewer.cjsx
+++ b/app/classify/subject-viewer.cjsx
@@ -16,15 +16,14 @@ module.exports = React.createClass
   
   render: ->
     classList=["readymade-marking-surface-container"]
-    classList.push "current" if @props.isCurrent
+    classList.push 'image' if @props.task is 'filter'
     image = @mediaSrcs['image/jpeg']
     <div className={classList.join ' '}>
       <div className="text-viewer">
         <div data-subject={@props.subject.id}>{@state.text}</div>
       </div>
       <div className="subject-image">
-        <h3>Scanned page</h3>
-        {<img src={image} alt="" /> if image}
+        {<img src={image} alt={@state.text} /> if image}
       </div>
     </div>
   
diff --git a/app/classify/subject.cjsx b/app/classify/subject.cjsx
new file mode 100644
index 0000000..4982965
--- /dev/null
+++ b/app/classify/subject.cjsx
@@ -0,0 +1,20 @@
+React = require 'react'
+SubjectTools = require './subject-tools'
+SubjectViewer = require './subject-viewer'
+
+module.exports = React.createClass
+  displayName: 'Subject'
+  
+  render: ->
+    console.log @props.task 
+    <div className="readymade-subject-viewer-container">
+      {
+        if @props.currentSubjects.length
+          <div className="readymade-subject-viewer">
+            <SubjectTools project={@props.project} api={@props.api} talk={@props.talk} user={@props.user} subject_set={@props.subject_set} subject={@props.currentSubjects[0]} />
+            <div className="scroll-container" ref="scrollContainer">
+              {<SubjectViewer task={@props.task} subject={subject} key={subject.id} ref="subject#{subject.id}" /> for subject in @props.currentSubjects}
+            </div>
+          </div>
+      }
+    </div>
\ No newline at end of file
diff --git a/app/classify/tasks/choose.cjsx b/app/classify/tasks/choose.cjsx
index 37b872e..894b0ad 100644
--- a/app/classify/tasks/choose.cjsx
+++ b/app/classify/tasks/choose.cjsx
@@ -9,6 +9,7 @@ module.exports = React.createClass
       <div className="decision-tree-question">
         To get started first select the category
       </div>
+      <button type="button" className="decision-tree-choice major-button" onClick={@back}>Back</button>
       <ul className="decision-tree-choices">
         {for key, task of tasks
           <li key={key} className="decision-tree-choice">
@@ -17,14 +18,17 @@ module.exports = React.createClass
             </button> 
           </li>
         }
-        {@props.children}
-        <button type="button" className="major-button" onClick={@finish}>Finish page</button>
       </ul>
+      {@props.children}
+      <button type="button" className="major-button" onClick={@finish}>Finish page</button>
     </div>
   
   edit: (e) ->
     @props.onChooseTask e.currentTarget.value
   
+  back: ->
+    @props.onBack()
+
   finish: ->
     @props.onFinish()
 
diff --git a/app/classify/tasks/filter.cjsx b/app/classify/tasks/filter.cjsx
new file mode 100644
index 0000000..52146d0
--- /dev/null
+++ b/app/classify/tasks/filter.cjsx
@@ -0,0 +1,45 @@
+React = require 'react'
+
+answers =
+  yes:
+    label: 'Yes'
+    value: 'yes'
+  no:
+    label: 'No'
+    value: 'no'
+
+module.exports = React.createClass
+  displayName: 'FilterTask'
+  
+  getDefaultProps: ->
+    name: 'filter'
+    
+  getInitialState: ->
+    value: null
+  
+  render: ->
+    label = 'Next'
+    label = 'Finish' if @state.value is 'no'
+    <div className="decision-tree-task">
+      <div className="decision-tree-question">
+        Are there any health issues to mark on this page?
+      </div>
+      <div className="decision-tree-choices">
+        {for key, answer of answers
+          <label className="decision-tree-choice">
+            <input type="radio" name={@props.name} value={answer.value} checked={@state.value is answer.value} onChange={@choose} />
+            <span className="readymade-choice-clickable standard-button">{answer.label}</span>
+          </label> 
+        }
+        {@props.children}
+        <button type="button" className="major-button" onClick={@complete} disabled={!@state.value}>{label}</button>
+      </div>
+    </div>
+  
+  choose: (e) ->
+    @setState value: e.currentTarget.value
+  
+  complete: ->
+    @props.onComplete @state.value
+    @setState value: null
+
diff --git a/css/custom.styl b/css/custom.styl
index bb2b252..3ac05f5 100644
--- a/css/custom.styl
+++ b/css/custom.styl
@@ -41,11 +41,14 @@
 
 .readymade-marking-surface-container
   display: flex
-  opacity: 0.2
   
-  &.current
-  &.active
-    opacity: 1
+  &.image
+    .subject-image
+      display: block
+      text-align: center
+    
+    .text-viewer
+      display: none
   
 .text-viewer
   flex: 5
@@ -62,7 +65,6 @@
   
   img
     width: 100%
-    max-width: 500px
     
 .text-selection
   background: #0b517c
@@ -79,11 +81,22 @@
     &:hover
       background: rgba(0, 0, 0, 0.3)
 
-.decision-tree-choice
-  margin-bottom: .5em
+.readymade-decision-tree-container
+  .decision-tree-choice
+    display: block
+    margin-bottom: .5em
+  
+    .decision-tree-choices
+      margin-top: .5em
+    
+    input[type=radio]
+      position: absolute
+      height: 1px
+      width: 1px
+      opacity: 0
   
-  .decision-tree-choices
-    margin-top: .5em
+      &:checked + span
+        background: #0b517c
     
 .readymade-choice-clickable
   color: white