Render more small details; prepare distribution webpack.

This is a hodge-podge of little things. First, as the title line
indicates, there are some new little additions to the rendering, such
as a dropdown for running BLASTp on protein sequences.

venomkb.html now includes a link to minified jquery, which is required
for the pulldown on the About button. Speaking about the "About"
button, I need to finish rendering the components it contains.

The big (and yet unfinished) task is adding the express and webpack
configuration to prep the site for deployment. Most of what I did is
from the following site:

https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d

Like I said, it's still unfinished. I've figured out how to build the
images to index/dist, but the site can't find the entry point for the
react app itself yet.

index/components/AboutOntology.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const AboutOntology = () =>
+    <div className="jumbotron">
+        <div className="container">
+            <h2>About Venom Ontology</h2>
+        </div>
+    </div>;
+
+
+export default AboutOntology;

index/components/SequenceBox.js

@@ -1,28 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
 
 const breakString = (stringToBreak) => {
     const parts = stringToBreak.match(/.{1,10}/g);
     return parts.join(' ');
 };
 
+const blastQueryBase = 'https://blast.ncbi.nlm.nih.gov/Blast.cgi?PROGRAM=blastp&PAGE_TYPE=BlastSearch&QUERY=';
+
 class SequenceBox extends React.Component {
     constructor(props) {
         super(props);
 
         const brokenSequence = breakString(props.aaSequence);
 
         this.state = {
-            brokenSequence
+            brokenSequence,
         };
     }
 
     render() {
+        const blastQueryUrl = blastQueryBase + this.props.aaSequence;
         return (
             <div className="jdr-box">
+                <div className="pull-right run-tools-button">
+                    <DropdownButton
+                        bsSize="xsmall"
+                        title="Run tools"
+                        id="dropdown-size-extra-small"
+                        pullRight
+                        onSelect={this.handleToolSelect}
+                    >
+                        <MenuItem href={blastQueryUrl} target="_blank">BLASTp (NCBI)</MenuItem>
+                        <MenuItem eventKey="2">BLAST (PDB)</MenuItem>
+                    </DropdownButton>
+                </div>
                 <h3>Amino Acid Sequence</h3>
                 <h4>Number of residues: {this.props.aaSequence.length}</h4>
-                {this.state.brokenSequence}
+                <div className="sequence-text">
+                    {this.state.brokenSequence}
+                </div>
             </div>
         );
     }

index/containers/DataDetailContainer.js

@@ -13,7 +13,8 @@ class DataDetailContainer extends Component {
 
         this.state = {
             currentVenomkbId: this.props.params.index,
-            dataType: this.props.params.index.charAt(0)
+            dataType: this.props.params.index.charAt(0),
+            viewType: 'basic'
         };
 
         this.handleRefreshClick = this.handleRefreshClick.bind(this);
@@ -77,23 +78,27 @@ class DataDetailContainer extends Component {
                     }
 
                     {(!isFetching && !(name === undefined)) &&
-                     <DataBasicView
-                         selectedDatum={selectedData}
-                         dataType={this.state.dataType}
-                         name={name}
-                         common_name={common_name}
-                         out_links={out_links}
-                         aa_sequence={aa_sequence}
-                         description={description}
-                         venom_ref={venom_ref}
-                         venom={venom}
-                         taxonomic_lineage={taxonomic_lineage}
-                         isFetching={isFetching}
-                         species={species}
-                         pdb_image_url={pdb_image_url}
-                         pdb_structure_known={pdb_structure_known}
-                         species_image_url={species_image_url}
-                     />
+                        <div>
+                            {(this.state.viewType === 'basic') &&
+                            <DataBasicView
+                                selectedDatum={selectedData}
+                                dataType={this.state.dataType}
+                                name={name}
+                                common_name={common_name}
+                                out_links={out_links}
+                                aa_sequence={aa_sequence}
+                                description={description}
+                                venom_ref={venom_ref}
+                                venom={venom}
+                                taxonomic_lineage={taxonomic_lineage}
+                                isFetching={isFetching}
+                                species={species}
+                                pdb_image_url={pdb_image_url}
+                                pdb_structure_known={pdb_structure_known}
+                                species_image_url={species_image_url}
+                            />
+                            }
+                        </div>
                     }
                 </div>
             </div>
@@ -118,7 +123,8 @@ DataDetailContainer.propTypes = {
     taxonomic_lineage: PropTypes.array,
     pdb_image_url: PropTypes.string,
     pdb_structure_known: PropTypes.bool,
-    species_image_url: PropTypes.string
+    species_image_url: PropTypes.string,
+    viewType: PropTypes.string
 };
 
 
@@ -138,7 +144,7 @@ const mapStateToProps = (state) => {
         taxonomic_lineage,
         pdb_image_url,
         pdb_structure_known,
-        species_image_url
+        species_image_url,
     } = currentData || {
         isFetching: true,
         name: '',

index/img/images.js

@@ -0,0 +1,7 @@
+const imagesContext = require.context(
+    '!!file-loader?name=[name].[ext]!.',
+    true,
+    /\.(svg|png|ico|xml|json)$/
+);
+
+imagesContext.keys().forEach(imagesContext);

index/routes/routes.js

@@ -3,6 +3,7 @@ import { Route, IndexRoute } from 'react-router';
 import App from '../components/App';
 import Home from '../components/Home';
 import About from '../components/About';
+import AboutOntology from '../components/AboutOntology';
 import Contact from '../components/Contact';
 import Publications from '../components/Publications';
 import Download from '../components/Download';
@@ -16,6 +17,7 @@ export default (
     <Route path="/" component={App}>
         <IndexRoute component={Home} />
         <Route path="/about" component={About} />
+        <Route path="/about/ontology" component={AboutOntology} />
         <Route path="/contact" component={Contact} />
         <Route path="/publications" component={Publications} />
         <Route path="/data" component={DataContainer} />

index/styles/venomkb.css

@@ -323,4 +323,16 @@ pre.taxonomy-detail {
 
 .bootstrap-image-resize {
   width: 100%;
+}
+
+.jdr-button-right-align {
+  float: right;
+}
+
+.run-tools-button {
+  margin-top: 8px;
+}
+
+.sequence-text {
+  font-family: monospace;
 }

server/app.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const morgan = require('morgan');
+const path = require('path');
+
+const app = express();
+
+// Logger
+app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));
+
+// Serve static assets
+app.use(express.static(path.resolve(__dirname, '..', 'index', 'dist')));
+
+// Always return index.html so react-router renders the route client-side
+app.get('*', (req, res) => {
+    res.sendFile(path.resolve(__dirname, '..', 'index', 'dist', 'index.html'));
+});
+
+module.exports = app;

server/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+const app = require('./app');
+
+const PORT = process.env.PORT || 9000;
+
+app.listen(PORT, () => {
+    console.log(`App listening on port ${PORT}!`);
+});

venomkb.html

@@ -10,6 +10,8 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
     <link rel="stylesheet" href="/index/styles/venomkb.css">
 
+	<!-- jquery needed for bootstrap javascript -->
+	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 	<!-- check out: https://medium.com/tech-angels-publications/bundle-your-favicons-with-webpack-b69d834b2f53 -->
@@ -36,12 +38,12 @@
 
 				<ul class="nav navbar-nav">
 					<li><a href="/" routerLinkActive="active">Home</a></li>
-					<li><a href="/about" routerLinkActive="active">About</a></li>
 					<li class="dropdown">
 						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
 						<ul class="dropdown-menu">
-							<li><a href="#">Why venoms?</a></li>
-							<li><a href="#">Ontology</a></li>
+							<li><a href="/about">About VenomKB</a></li>
+							<li><a href="/about/whyvenoms">Why venoms?</a></li>
+							<li><a href="/about/ontology">Ontology</a></li>
 						</ul>
 					</li>
 					<li><a href="/contact" routerLinkActive="active">Contact</a></li>
@@ -56,7 +58,7 @@
 		</nav>
 	</header>
 
-	<div class="container">
+	<div class="container" id="main-wrapper">
 
 		<main>
 
@@ -71,8 +73,8 @@
 		<div class="container">
 
 			<div class="container bottom-logos">
-				<img src="/index/img/tlab_black.svg" height=48 class="pull-left" />
-				<img src="/index/img/286OfficialColumbiaLogo.svg" height=48 class="pull-right" />
+				<img src="/tlab_black.svg" height=48 class="pull-left" />
+				<img src="/286OfficialColumbiaLogo.svg" height=48 class="pull-right" />
 			</div>
 
 			<div class="bottom-text">

venomkb.js

@@ -11,10 +11,10 @@ import Root from './index/containers/Root';
 // handle api calls from within app
 import { getProteinsIdx, getSpeciesIdx } from './index/helpers/api_fetch';
 
+// Require things that webpack needs to move to dist
 import './index/styles/venomkb.css';
-
-// Require images so webpack knows to move them to dist
 import './index/img/favicons/favicons';
+import './index/img/images';
 
 const buildIndex = (proteins, species) => {
     const idx = [];