UI update

src/pages/Experiment.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { push } from 'redux-little-router';
-import { Modal, Button } from 'react-bootstrap';
 import PageHeader from '../components/PageHeader';
 import Loader from '../components/Loader';
 import Progress from '../components/Experiment/Progress';
@@ -21,51 +20,20 @@ import {
 import { makeUrl } from '../state/routes';
 import './Experiment.less';
 
-const ALWAYS_ALLOW_SKIP_KEY = 'ca/ALWAYS_ALLOW_SKIP';
-
 class Experiment extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showModal: !!window.localStorage.getItem(ALWAYS_ALLOW_SKIP_KEY),
-      alwaysAllowSkip: false,
-    };
-    this.showModal = this.showModal.bind(this);
-    this.hideModal = this.hideModal.bind(this);
-    this.onAllowSkipChange = this.onAllowSkipChange.bind(this);
-  }
-
-  showModal() {
-    this.setState({ showModal: true });
-  }
-
-  hideModal() {
-    this.setState({ showModal: false });
-  }
-
-  onAllowSkipChange(e) {
-    this.setState({ alwaysAllowSkip: e.target.checked });
-    if (e.target.checked) {
-      window.localStorage.setItem(ALWAYS_ALLOW_SKIP_KEY, e.target.checked);
-    } else {
-      window.localStorage.removeItem(ALWAYS_ALLOW_SKIP_KEY);
-    }
-  }
-
   render() {
     const { user } = this.props;
 
     return (
       <div className="ex-page">
         <PageHeader {...user} />
         {this.renderMain()}
-        {this.renderModal()}
       </div>
     );
   }
 
   renderMain() {
-    const { error, loading, percent } = this.props;
+    const { error, loading, name, description, percent } = this.props;
 
     if (error) {
       return (
@@ -85,8 +53,14 @@ class Experiment extends Component {
 
     return (
       <div className="ex-page__main">
-        <div className="ex-page__progress">
-          <Progress percent={percent} className="pull-right" />
+        <div className="ex-page__header">
+          <div className="ex-page__info">
+            <span className="ex-page__name">{name}</span>
+            <span className="ex-page__description">{description}asd</span>
+          </div>
+          <div className="ex-page__progress">
+            <Progress percent={percent} />
+          </div>
         </div>
         {this.renderContent()}
       </div>
@@ -125,49 +99,12 @@ class Experiment extends Component {
           markSimilar={markSimilar}
           markMaybe={markMaybe}
           markDifferent={markDifferent}
-          skip={() => (this.state.alwaysAllowSkip ? skip() : this.showModal())}
+          skip={skip}
           finish={finish}
         />
       </div>
     );
   }
-
-  renderModal() {
-    const { skip } = this.props;
-
-    return (
-      <Modal show={this.state.showModal} onHide={this.hideModal}>
-        <Modal.Header closeButton>
-          <Modal.Title>
-            Are you sure you want to skip this question?
-          </Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <p>You can always come back to this question later.</p>
-          <label>
-            <input
-              type="checkbox"
-              checked={this.state.alwaysAllowSkip}
-              onChange={this.onAllowSkipChange}
-            />{' '}
-            always allow skiping questions
-          </label>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={this.hideModal}>No</Button>
-          <Button
-            bsStyle="primary"
-            onClick={() => {
-              this.hideModal();
-              skip();
-            }}
-          >
-            Yes
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    );
-  }
 }
 
 const mapStateToProps = state => {
@@ -176,6 +113,8 @@ const mapStateToProps = state => {
     error,
     loading,
     fileLoading,
+    name,
+    description,
     assignments,
     currentAssigment,
   } = experiment;
@@ -191,6 +130,8 @@ const mapStateToProps = state => {
   return {
     error,
     loading,
+    name,
+    description,
     percent: getProgressPercent(state),
     fileLoading,
     diffString: diff,

src/pages/Experiment.less

@@ -1,3 +1,5 @@
+@import '../../node_modules/bootstrap/less/variables.less';
+
 .ex-page {
     display: flex;
     flex-direction: column;
@@ -19,9 +21,25 @@
         flex-direction: column;
     }
 
+    &__header {
+        display: flex;
+        flex: 0 0 auto;
+        justify-content: space-between;
+        margin: 0 30px;
+    }
+
+    &__name {
+        font-size: 1.2em;
+        font-weight: bold;
+        margin-right: 10px;
+    }
+
+    &__description {
+        color: @gray;
+    }
+
     &__progress {
         margin-bottom: 20px;
-        margin-right: 30px;
     }
 
     &__content {

src/pages/Final.js

@@ -4,6 +4,7 @@ import { Table } from 'react-bootstrap';
 import PageHeader from '../components/PageHeader';
 import HumanDuration from '../components/HumanDuration';
 import {
+  getIdenticalCount,
   getSimilarCount,
   getDifferentCount,
   getProgressPercent,
@@ -19,6 +20,7 @@ class Final extends Component {
       user,
       expName,
       procent,
+      identicalCount,
       similarCount,
       differentCount,
       skipCount,
@@ -37,6 +39,10 @@ class Final extends Component {
               <td>Completion</td>
               <td>{procent}%</td>
             </tr>
+            <tr>
+              <td>Identical Annotations</td>
+              <td>{identicalCount}</td>
+            </tr>
             <tr>
               <td>Similar Annotations</td>
               <td>{similarCount}</td>
@@ -74,6 +80,7 @@ const mapStateToProps = state => {
     user: state.user,
     expName: experiment.name,
     procent: getProgressPercent(state),
+    identicalCount: getIdenticalCount(state),
     similarCount: getSimilarCount(state),
     differentCount: getDifferentCount(state),
     skipCount: getSkipCount(state),

src/state/experiment.js

@@ -224,11 +224,16 @@ const getAssignments = state => state.experiment.assignments;
 
 export const getAssignmentsCount = state => state.experiment.assignments.length;
 
-export const getSimilarCount = createSelector(
+export const getIdenticalCount = createSelector(
   getAssignments,
   assignments => assignments.filter(a => a.answer === ANSWER_SIMILAR).length
 );
 
+export const getSimilarCount = createSelector(
+  getAssignments,
+  assignments => assignments.filter(a => a.answer === ANSWER_MAYBE).length
+);
+
 export const getDifferentCount = createSelector(
   getAssignments,
   assignments => assignments.filter(a => a.answer === ANSWER_DIFFERENT).length
@@ -241,9 +246,11 @@ export const getSkipCount = createSelector(
 
 export const getProgressPercent = createSelector(
   getAssignmentsCount,
+  getIdenticalCount,
   getSimilarCount,
   getDifferentCount,
-  (total, similar, different) => Math.round(100 / total * (similar + different))
+  (total, indentical, similar, different) =>
+    Math.round(100 / total * (indentical + similar + different))
 );
 
 export const getOverallTime = createSelector(getAssignments, assignments =>

src/state/experiment.test.js

@@ -21,6 +21,7 @@ import reducer, {
   load,
   mark,
   markCurrent,
+  getIdenticalCount,
   getSimilarCount,
   getDifferentCount,
   getSkipCount,
@@ -358,8 +359,13 @@ describe('experiment/selectors', () => {
       ],
     },
   };
+
+  it('getIdenticalCount', () => {
+    expect(getIdenticalCount(state)).toEqual(2);
+  });
+
   it('getSimilarCount', () => {
-    expect(getSimilarCount(state)).toEqual(2);
+    expect(getSimilarCount(state)).toEqual(1);
   });
 
   it('getDifferentCount', () => {
@@ -371,7 +377,7 @@ describe('experiment/selectors', () => {
   });
 
   it('getProgressPercent', () => {
-    expect(getProgressPercent(state)).toEqual(38);
+    expect(getProgressPercent(state)).toEqual(50);
   });
 
   it('getOverallTime', () => {