Beta feedback changes

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'
 
@@ -24,66 +23,32 @@ module.exports = React.createClass
 
   componentWillReceiveProps: (newProps)->
     {api, project, subject_set, workflow} = newProps
-    @subjects.update {api, project, subject_set_id: subject_set.id}
+    @subjects.update {api, project, subject_set_id: subject_set?.id}
     @classifications.update {api, project, workflow}
 
-    if newProps.user != @props.user || newProps.subject_set.id != @props.subject_set.id
+    if newProps.user != @props.user 
       @setState currentSubjects: [], =>
         @subjects.flush()
         @subjects.fetch()
           .then @nextSubject
-
-  componentDidUpdate: ->
-    return unless @subjects.current?
-    container = @refs.scrollContainer?.getDOMNode()
-    subject_node = @refs["subject#{@subjects.current.id}"]?.getDOMNode()
-    return unless container? && subject_node?
-
-    container.scrollTop -= subject_node.scrollHeight
-    distance = subject_node.offsetTop / 20
-
-    move_subject = =>
-      container.scrollTop = container.scrollTop + distance
-      setTimeout move_subject, 50 unless container.scrollTop > subject_node.offsetTop - 50
-
-    setTimeout move_subject, 50
 
   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 ref='subject' project={@props.project} api={@props.api} talk={@props.talk} user={@props.user} subject_set={@props.subject_set} subject={@state.currentSubjects[0]} />
     </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
+    @refs.subject.onChange annotation
 
   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()
 
   nextSubject: ->
-    currentSubjects = @state.currentSubjects
-    if currentSubjects.length is 0
-      currentSubjects.push @subjects.next(), @subjects.queue[0]
-    else
-      @subjects.next()
-      currentSubjects.push @subjects.queue[0]
-      currentSubjects.shift() if currentSubjects.length > 3
+    currentSubjects = [@subjects.next()]
     # create a new classification here
     @classifications.create [@subjects.current]
     # remove undefined or null subjects from currentSubjects

app/classify/annotation.cjsx

@@ -5,23 +5,20 @@ TextRange = React.createClass
   displayName: 'TextRange'
 
   render: ->
-    annotation = @props.range.annotation
-    <li className="highlight #{annotation.type}">
+    annotation = @props.range?.annotation ? ''
+    <span>
       {annotation.text} 
-    </li>
+    </span>
 
 module.exports = React.createClass
   displayName: 'Annotation'
 
   tasks: tasks
 
   render: ->
-    <div className="annotation">
-      {@tasks[@props.tool.type].label} <button className="secret-button" aria-label='Edit' onClick={@edit}><span className="fa fa-pencil-square-o"></span></button>
-      <ul>
-        <TextRange range={@props.tool.issue} />
-      </ul>
-    </div>
+    <button className="standard-button annotation #{@props.tool.type}" onClick={@edit}>
+      <TextRange range={@props.tool.issue} />
+    </button>
 
   edit: (e) ->
     @props.edit @props.tool

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'
@@ -22,6 +23,7 @@ AnnotationsSummary = React.createClass
 
   render: ->
     <div className="annotation-summary">
+    {<h2>Health issues</h2> if @props.annotations.length}
     {if @props.annotations.length then @props.annotations.map (tool) =>
       <Annotation key={tool.id} tool={tool} delete={@props.deleteTool} edit={@edit} />
     else
@@ -40,98 +42,154 @@ 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'
+    relevant: null
+    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} />
-                  <AnnotationsSummary annotations={@state.annotations} deleteTool={@deleteAnnotation} onEdit={@edit} />
+                  <ChooseTask onChooseTask={@create} onBack={@reset} onFinish={@finish} />
                 </div>
               when 'edit'
-                <EditTask annotation={@state.annotations[0]} onChange={@props.onChange} onComplete={@choose}/>
+                <EditTask annotation={@currentAnnotation()} onChange={@onChange} onComplete={@choose}/>
+            }
+          </div>
+        </div>
+          {children}
+        <div className="readymade-decision-tree-container">
+          <div className="decision-tree">
+            {switch @state.step
+              when 'choose', 'edit'
+                <div>
+                  <AnnotationsSummary annotations={@state.annotations} deleteTool={@deleteAnnotation} onEdit={@edit} />
+                </div>
             }
           </div>
         </div>
-          {@props.children}
       </div>
     </div>
 
+  onChange: (annotation) ->
+    @props.onChange annotation
+
+    annotations = @state.annotations
+    annotations.shift()
+    annotations.unshift annotation
+    @setState {annotations}
+
+  filter: (choice) ->
+    switch choice
+      when 'yes'
+        @setState
+          relevant: 'yes'
+          step: 'choose'
+          type: null
+          instructions: @defaultInstructions
+      when 'no'
+        @setState relevant: 'no', @finish
+
   create: (type) ->
     @newAnnotation type
     @setState 
       step: 'edit'
       type: type
       instructions: tasks[type]
 
-  edit: (tool) ->
-    tool.issue?.el.classList.remove 'complete'
-    for type, ranges of tool.subtasks
-      ranges.map (range) -> range.el.classList.remove 'complete'
-    @editAnnotation tool
-    @setState 
-      step: 'edit'
-      type: tool.type
-      instructions: tasks[tool.type]
-    @props.onChange tool
+  edit: (annotation) ->
+
+    if @state.step is 'edit'
+      @completeAnnotation @currentAnnotation(), => @editAnnotation annotation
+    else
+      @editAnnotation annotation
+    @props.onChange annotation
 
   choose: (annotation) ->
-    annotations = @state.annotations
-    annotations.shift()
-
-    if annotation.empty()
-      annotation.destroy()
-    else
-      annotation.issue?.el.classList.add 'complete'
-      for type, ranges of annotation.subtasks
-        ranges.map (range) -> range.el.classList.add 'complete'
-      annotations.unshift annotation
+    @completeAnnotation annotation
 
     @setState 
       step: 'choose'
       type: null
       instructions: @defaultInstructions
-      annotations: annotations
 
     @props.onChange new AnnotationTool
 
+  reset: ->
+    annotation.destroy() for annotation in @state.annotations
+    step = 'filter'
+    annotations = []
+    @setState {annotations, step}
+
   finish: ->
-    task_annotations = {}
+    marking_annotations = []
     @state.annotations.map (annotation, i) ->
-      task_annotations[annotation.type] ?= []
-      task_annotations[annotation.type].push annotation.value()
-    task_annotations[task] ?= [] for task of tasks
-    @props.onFinish task_annotations
+      marking_annotations.push annotation.value()
+    annotations =
+      T1: @state.relevant
+      T2: marking_annotations 
+    @props.onFinish annotations
     annotations = @state.annotations
     annotation.destroy() for annotation in annotations
     annotations = []
-    @setState {annotations}
+    step = 'filter'
+    @setState {annotations, step}
 
   newAnnotation: (type) ->
     annotations = @state.annotations
-    annotations.unshift new AnnotationTool type
+    annotation = new AnnotationTool type
+    annotation.addIssue()
+    annotations.unshift annotation
     @setState {annotations}
+    @props.onChange annotation
 
   editAnnotation: (annotation) ->
+    annotation.issue?.el.classList.remove 'complete'
+    for type, ranges of annotation.subtasks
+      ranges.map (range) -> range.el.classList.remove 'complete'
+
     annotations = @state.annotations
     index = annotations.indexOf annotation
     annotations.splice index, 1
     annotations.unshift annotation
-    @setState {annotations}
-
+    @setState 
+      step: 'edit'
+      type: annotation.type
+      instructions: tasks[annotation.type]
+      annotations: annotations
+
   deleteAnnotation: (annotation) ->
     annotations = @state.annotations
     index = annotations.indexOf annotation
     annotations.splice index, 1
     annotation.destroy()
     @setState {annotations}
+
+  currentAnnotation: ->
+    @state.annotations[0]
+
+  completeAnnotation: (annotation, callback = () -> ) ->
+    annotations = @state.annotations
+    annotations.shift()
+
+    if annotation.empty()
+      annotation.destroy()
+    else
+      annotation.issue?.el.classList.add 'complete'
+      for type, ranges of annotation.subtasks
+        ranges.map (range) -> range.el.classList.add 'complete'
+      annotations.unshift annotation
+
+    @setState {annotations}, callback
+
 

app/classify/subject-tools.cjsx

@@ -11,11 +11,25 @@ module.exports = React.createClass
 
   getInitialState: ->
     fieldGuideHidden: true
+    subject_set:
+      display_name: ''
+      metadata:
+        BOROUGH: ''
+        Date: ''
+
+  componentWillMount: ->
+    subject_set_id = @props.subject?.links.subject_sets[0]
+    @updateSubjectSet subject_set_id
+
+  componentWillReceiveProps: (newProps) ->
+    new_id = newProps.subject.links.subject_sets[0]
+    if new_id != @props.subject.links.subject_sets[0]
+      @updateSubjectSet new_id
 
   render: ->
     <div>
       <div className="drawing-controls">
-        <h2>{@props.subject_set.metadata.BOROUGH} {@props.subject_set.metadata.Date} ({@props.subject_set.display_name})</h2>
+        <h2>{@state.subject_set.metadata.BOROUGH} {@state.subject_set.metadata.Date} ({@state.subject_set.display_name}) {<span>Page {@props.subject.metadata.page}</span> if @props.subject?}</h2>
         <span className="tools">
           <label className="readymade-has-clickable"> 
             <input type="checkbox" name="examples" checked={[email protected]} onChange={@toggleFieldGuide} /> 
@@ -50,3 +64,7 @@ module.exports = React.createClass
       .then ([tutorial]) =>
         alert (resolve) =>
           <Tutorial tutorial={tutorial} api={@props.api} user={@props.user} project={@props.project} onFinish={resolve} />
+  updateSubjectSet: (subject_set_id) ->
+    @props.api.type('subject_sets').get subject_set_id
+      .then (subject_set) =>
+        @setState {subject_set}

app/classify/subject-viewer.cjsx

@@ -16,16 +16,15 @@ module.exports = React.createClass
 
   render: ->
     classList=["readymade-marking-surface-container"]
-    classList.push "current" if @props.isCurrent
+    classList.push @props.mode
+    classList.push 'active' if @props.active
     image = @mediaSrcs['image/jpeg']
     <div className={classList.join ' '}>
       <div className="text-viewer">
-        <h3>Page {@props.subject.metadata.page}</h3>
         <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>