Merge pull request #238 from Rostlab/character-detail-plod

Character detail, link to plod-descriptions
Rostlab · Apr 2, 2016 · 2a5e67f · 2a5e67f
2 parents 7a31e1c + 492bac4
commit 2a5e67f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git a/app/components/public/Characters/Characters.css b/app/components/public/Characters/Characters.css
@@ -78,7 +78,7 @@
 .plodContainer .progress {
 	display: inline-block;
 	width: 90%;
-	background-color: #1F1F1F;
+	background-color: #333333;
 }
 .plodContainer .progress-bar {
 	background-color: #5A180C;

diff --git a/app/components/public/Characters/Characters.jsx b/app/components/public/Characters/Characters.jsx
@@ -68,20 +68,13 @@ export default class Character extends Component {
                 <Row>
                     <Col md={8} mdOffset={2}>
                         <h2>Likelihood of Death</h2>
-                        <p>Check out what our two different algorithms say</p>
-                        <Tabs>
-                            <Tab eventKey={1} title="Predictor 1">
-                                <p>{this.state.character.name}'s likelihood to die is:</p>
-                                <div className="plodContainer">
-                                    <ProgressBar now={60} label="%(percent)s%" />
-                                    <img src={tombstone} />
-                                </div>
-                                <p>We developed a machine learning-based algorithm that predicts character's percentage likelihood of death (PLOD) based on characteristics such as age, gender, title and others (described here).</p>
-                            </Tab>
-                            <Tab eventKey={2} title="Predictor 2">
-                                <p>{this.state.character.name}'s likelihood to die is 10%</p>
-                            </Tab>
-                        </Tabs>
+                        <p>{this.state.character.name}'s likelihood to die is:</p>
+                        <div className="plodContainer">
+                            <ProgressBar now={60} label="%(percent)s%" />
+                            <img src={tombstone} />
+                        </div>
+                        <p>We developed a machine learning-based algorithm that predicts character's percentage likelihood of death (PLOD) based on characteristics such as age, gender, title and others <a href="/plod-description">(described here)</a>.</p>
+                        <p>The PLOD score of our slighlty less accurate predictor <a href="/plod-description">(described here)</a> is: 50%</p>
                     </Col>
                 </Row>
                 <Row>

diff --git a/app/components/public/PlodDescription/PlodDescription.jsx b/app/components/public/PlodDescription/PlodDescription.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+let {Component} = React;
+import { Row, Col } from 'react-bootstrap';
+
+import PlodDescriptionText from '../../../../static/plod-description.md';
+
+export default class PlodDescription extends Component {
+    render() {
+        return (
+            <div>
+                <br/>
+                <Row>
+                    <Col xs={10} xsOffset={1} sm={10} smOffset={1} md={8} mdOffset={2}>
+                        <PlodDescriptionText />
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+}
diff --git a/app/main.jsx b/app/main.jsx
@@ -21,29 +21,31 @@ import CharacterListPage from './components/public/CharacterList/CharacterList.j
 import Site404 from './components/public/404/404.jsx';
 import Imprint from './components/public/Imprint/Imprint.jsx';
 import PrivacyPolicy from './components/public/PrivacyPolicy/PrivacyPolicy.jsx';
+import PlodDescription from './components/public/PlodDescription/PlodDescription.jsx';
 
 import ga from 'ga-react-router';
 import { browserHistory } from 'react-router';
 
 browserHistory.listen(location => {
-  ga('send','page', location.pathname);
-  ga('send', 'pageview');
+    ga('send', 'page', location.pathname);
+    ga('send', 'pageview');
 });
 
 ReactDOM.render(
-  <Router history={browserHistory}>
-    <Route path="/" component={App}>
-      <IndexRoute component={Start}/>
-      <Route path="/ranking" component={Ranking}/>
-      <Route path="/about" component={About}/>
-      <Route path="/imprint" component={Imprint}/>
-      <Route path="/privacy" component={PrivacyPolicy}/>
-      <Route path="/characters">
-        <IndexRoute component={CharacterListPage}/>
-        <Route path="/characters/:id" component={Characters}/>
-      </Route>
-    </Route>
-    <Route path="/map" component={Map}/>
-    <Route path="*" component={Site404}/>
-  </Router>
-, document.getElementById('root'));
+    <Router history={browserHistory}>
+        <Route path="/" component={App}>
+            <IndexRoute component={Start}/>
+            <Route path="/ranking" component={Ranking}/>
+            <Route path="/about" component={About}/>
+            <Route path="/imprint" component={Imprint}/>
+            <Route path="/privacy" component={PrivacyPolicy}/>
+            <Route path="/plod-description" component={PlodDescription}/>
+            <Route path="/characters">
+                <IndexRoute component={CharacterListPage}/>
+                <Route path="/characters/:id" component={Characters}/>
+            </Route>
+        </Route>
+        <Route path="/map" component={Map}/>
+        <Route path="*" component={Site404}/>
+    </Router>
+    , document.getElementById('root'));
diff --git a/static/plod-description.md b/static/plod-description.md
@@ -0,0 +1 @@
+This is the content of /static/plod-descriptoin.md
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is the content of /static/plod-descriptoin.md