updating that interface

5 files changed, 107 insertions, 44 deletions

diff --git a/scraper/client/app.js b/scraper/client/app.js
index dc5c6fe6..b449d0d0 100644
--- a/scraper/client/app.js
+++ b/scraper/client/app.js
@@ -15,7 +15,7 @@ export default class App extends Component {
             <div className='body'>
               <Route path="/paper/:key/" component={Paper.Manager} />
               <Switch>
-                <Route exact path="/paper/:key/" component={Paper.Random} />
+                <Route exact path="/paper/:key/" component={Paper.Info} />
                 <Route exact path="/paper/:key/citations/" component={Paper.Citations} />
                 <Route exact path="/paper/:key/unknown/" component={Paper.UnknownCitations} />
                 <Route exact path="/paper/:key/info/" component={Paper.Info} />
diff --git a/scraper/client/paper/paper.css b/scraper/client/paper/paper.css
index 1e6d4c30..fc558ca1 100644
--- a/scraper/client/paper/paper.css
+++ b/scraper/client/paper/paper.css
@@ -1,3 +1,12 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  padding: 4px;
+}
+.rowHeading {
+  display: block;
+  width: 194px;
+}
 .form, .paperInfo {
   padding: 10px;
   width: 100%;
@@ -74,9 +83,16 @@ input.notes {
 .param .btn {
   margin-top: 5px;
 }
-.vetting {
-  width: 250px;
-  margin-right: 10px;
+.row.disabled { opacity: 0.5; }
+
+.vettingRow label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px 0 0;
+}
+.vettingRow input {
+  margin-right: 6px;
 }
 .param label {
   display: block;
@@ -86,7 +102,11 @@ input.notes {
 .param input[type=checkbox] {
   margin: 6px 0;
 }
+input[type=text] {
+  margin-bottom: 2px;
+}
 textarea {
+  margin-bottom: 2px;
   padding: 4px;
   font-size: 14px;
 }
diff --git a/scraper/client/paper/paper.random.js b/scraper/client/paper/paper.random.js
index aab22172..c7476332 100644
--- a/scraper/client/paper/paper.random.js
+++ b/scraper/client/paper/paper.random.js
@@ -15,7 +15,7 @@ class PaperRandom extends Component {
     const citation = choice(citations)
     console.log(citation)
     if (citation.id) {
-      history.push('/paper/' + this.props.match.params.key + '/address/' + citation.id)
+      history.push('/paper/' + this.props.match.params.key + '/verify/' + citation.id)
     }
   }
 
diff --git a/scraper/client/paper/paper.verify.js b/scraper/client/paper/paper.verify.js
index 9e1a2ad4..6b2bde07 100644
--- a/scraper/client/paper/paper.verify.js
+++ b/scraper/client/paper/paper.verify.js
@@ -3,15 +3,14 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import * as actions from '../actions'
-
 import { history } from '../store'
-
-import { Loader, Autocomplete } from '../common'
+import { Loader } from '../common'
+import { USES_DATASET } from '../types'
 
 const initialState = {
   citation: null,
   verifiable: false,
-  uses_dataset: false,
+  uses_dataset: USES_DATASET.UNKNOWN,
   images_in_paper: false,
   verified_by: localStorage.getItem('verify.username') || '',
   reference: '',
@@ -169,6 +168,7 @@ class PaperVerify extends Component {
             return (
               <a
                 key={i}
+                href={pdf}
                 onClick={() => this.setState({ pdf_index: i })}
                 className={i === this.state.pdf_index ? 'selected pdfLink' : 'pdfLink'}
               >
@@ -199,43 +199,80 @@ class PaperVerify extends Component {
           />
         </div>
 
-        <div className='param'>
-          <label>Uses the dataset?</label>
-          <input
-            className='vetting'
-            type='radio'
-            name='uses_dataset'
-            checked={!!this.state.uses_dataset}
-            onChange={e => this.setState({
-              uses_dataset: e.target.checked,
-            })}
-          />
-        </div>
+        <div className='row vettingRow'>
+          <div className='rowHeading'>
+            {'Uses dataset'}
+          </div>
+          <label>
+            <input
+              className='vetting'
+              type='radio'
+              name='uses_dataset'
+              checked={this.state.uses_dataset === USES_DATASET.YES || this.state.uses_dataset === "FALSE"}
+              onChange={e => this.setState({
+                uses_dataset: USES_DATASET.YES,
+              })}
+            />
+            <div>{"Yes"}</div>
+          </label>
 
-        <div className='param'>
-          <label>{"Doesn't use dataset"}</label>
-          <input
-            className='vetting'
-            type='radio'
-            name='uses_dataset'
-            checked={!this.state.uses_dataset}
-            onChange={e => this.setState({
-              uses_dataset: !e.target.checked,
-            })}
-          />
+          <label>
+            <input
+              className='vetting'
+              type='radio'
+              name='uses_dataset'
+              checked={this.state.uses_dataset === USES_DATASET.NO || this.state.uses_dataset === "FALSE"}
+              onChange={e => this.setState({
+                uses_dataset: USES_DATASET.NO,
+              })}
+            />
+            <div>{"No"}</div>
+          </label>
+
+          <label>
+            <input
+              className='vetting'
+              type='radio'
+              name='uses_dataset'
+              checked={this.state.uses_dataset === USES_DATASET.UNKNOWN || this.state.uses_dataset === "FALSE"}
+              onChange={e => this.setState({
+                uses_dataset: USES_DATASET.UNKNOWN,
+              })}
+            />
+            <div>{"Not enough information"}</div>
+          </label>
         </div>
 
-        <div className='param'>
-          <label>{"Uses images from dataset"}</label>
-          <input
-            className='vetting'
-            type='checkbox'
-            name='images_in_paper'
-            checked={!!this.state.images_in_paper}
-            onChange={e => this.setState({
-              images_in_paper: e.target.checked,
-            })}
-          />
+        <div className={this.state.uses_dataset === USES_DATASET.YES ? 'row vettingRow' : 'row vettingRow disabled'}>
+          <div className='rowHeading'>
+            {'Paper shows images'}
+          </div>
+
+          <label>
+            <input
+              className='vetting'
+              type='radio'
+              name='images_in_paper'
+              checked={this.state.images_in_paper === "TRUE"}
+              onChange={e => this.setState({
+                uses_dataset: "TRUE",
+              })}
+            />
+            <div>{"Yes"}</div>
+          </label>
+
+          <label>
+            <input
+              className='vetting'
+              type='radio'
+              name='images_in_paper'
+              checked={this.state.images_in_paper === "FALSE"}
+              onChange={e => this.setState({
+                uses_dataset: "FALSE",
+              })}
+            />
+            <div>{"No"}</div>
+          </label>
         </div>
 
         <div className='param'>
@@ -285,7 +322,7 @@ class PaperVerify extends Component {
           <button
             className='btn'
             onClick={this.prev.bind(this)}
-          >{'Prev >'}</button>
+          >{'< Prev'}</button>
 
           <button
             className='btn'
diff --git a/scraper/client/types.js b/scraper/client/types.js
index 53c0cff0..6d19984d 100644
--- a/scraper/client/types.js
+++ b/scraper/client/types.js
@@ -11,3 +11,9 @@ export const api = tagAsType('api', [
 ])
 
 export const init = '@@INIT'
+
+export const USES_DATASET = {
+  YES: 1,
+  NO: -1,
+  UNKNOWN: 0,
+}