Add Pre-Render Support

Pre-rendering support using nbconvert is implemented. The only problem is the page renders a little funky with the pre-rendered html. Need to look into this more.

Pre-rendering can be disabled by setting the `preRender` boolean in `./_config.js` to `false'.

client/package.json

@@ -21,6 +21,7 @@
     "react-modal": "^3.0.0",
     "react-paginate": "^5.0.0",
     "react-redux": "^5.0.5",
+    "react-render-html": "^0.5.2",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.2",
     "react-router-redux": "^4.0.8",

client/src/actions/submission.js

@@ -240,9 +240,6 @@ export const fetchNBInfo = ({
                     var sizeKB = sizeof(resp.data) / 1000;
                     console.log('size of response in KB: ', sizeKB);
                     request.size = sizeKB
-                    // logRequestSubmissionEnd({
-                    //     request
-                    // })
                     dispatch(logRequestSubmissionEndAction({
                         submissionID: request.submissionID,
                         id: request.id,
@@ -254,18 +251,6 @@ export const fetchNBInfo = ({
 
                 }
             )
-            // fetch('/api/search/notebook/' + notebookID).then(
-            //     response => response.json(),
-            //     error => {
-            //         console.log('An error occured: ', error);
-            //     }
-            // ).then(data => {
-            //     console.log('[RequestSubmission] - data received: ', data);
-            //     logRequestSubmissionEnd({
-            //         request
-            //     })
-            //     dispatch(receiveNBInfo(notebookID, data));
-            // })
         } else {
             console.log('[FetchSub] - don\'t need to fetch');
         }

client/src/components/submissions/Submission.js

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
 
-
 import Markdown from 'react-markdown';
 import Time from 'react-time';
 import {Link} from 'react-router-dom'
 import Modal from 'react-modal'
+import renderHTML from 'react-render-html'
 
 import 'normalize-css'
 import 'typeface-source-code-pro'
@@ -31,7 +31,6 @@ import HeadContainer from '../../containers/HeadContainer';
 import CommentsThread from '../comments/CommentsThread'
 import Breadcrumbs from '../partials/Breadcrumbs'
 
-
 class Submission extends Component {
 
     constructor(props) {
@@ -78,7 +77,9 @@ class Submission extends Component {
         this.toggleDeleteModal = this
             .toggleDeleteModal
             .bind(this);
-        this.deleteSubmission = this.deleteSubmission.bind(this);
+        this.deleteSubmission = this
+            .deleteSubmission
+            .bind(this);
     }
 
     componentDidMount() {
@@ -180,7 +181,10 @@ class Submission extends Component {
 
     deleteSubmission() {
         console.log('[Submission] - delete submission clicked');
-        this.props.actions.deleteSubmission(this.props.submissionID);
+        this
+            .props
+            .actions
+            .deleteSubmission(this.props.submissionID);
         this.toggleDeleteModal();
     }
 
@@ -210,9 +214,9 @@ class Submission extends Component {
                     </div>
 
                 </Modal>
-                {this.props.isLoading 
-                ? null
-                : <Breadcrumbs title={this.props.submission.data.notebook.title}/>}
+                {this.props.isLoading
+                    ? null
+                    : <Breadcrumbs title={this.props.submission.data.notebook.title}/>}
                 <div className='row'>
                     <div className='column'>
 
@@ -429,15 +433,19 @@ class Submission extends Component {
                                                         </li>
                                                     </ul>
                                                 </div>
-                                                {/* {this.state.notebook.notebookJSON
-                                                        ? <NotebookPreview notebook='../../assets/files/UN_demography.ipynb'/>
-                                                        : null} */}
-                                                <div id='notebook'>
-                                                    <NotebookPreview
-                                                        notebook={this.props.submission.data.notebookJSON}
-                                                        transforms={transforms}
-                                                        displayOrder={displayOrder}/>
-                                                </div>
+
+                                                {this.props.submission.data.html
+                                                    ? <div
+                                                            dangerouslySetInnerHTML={{
+                                                            __html: this.props.submission.data.html
+                                                        }}></div>
+                                                    : <div id='notebook'>
+                                                        <NotebookPreview
+                                                            notebook={this.props.submission.data.notebookJSON}
+                                                            transforms={transforms}
+                                                            displayOrder={displayOrder}/>
+                                                    </div>}
+
                                             </div>
                                         : <div>
                                             <div className='tile-header'>

js/db/models/Submission.js

@@ -28,7 +28,9 @@ var submissionSchema = new Schema({
     lastUpdated: Date,
 
     flagged: Boolean,
-    deleted: Boolean
+    deleted: Boolean,
+
+    preRendered: Boolean
 });
 
 submissionSchema.plugin(mongoosePaginate);

js/render.js

@@ -0,0 +1,58 @@
+/**
+ * Created by tlyon on 5/18/17.
+ */
+
+var sprintf = require('sprintf');
+var exec = require('child_process').exec;
+var tmp = require('tmp');
+var fs = require('fs');
+ var config = require('../_config');
+
+ function renderHTMLFromFile(file, id){
+    var outputDir = config.rootDirectory + config.filesDirectory
+    var outputName = id;
+    var templateLocation = '../assets/nbconvert/templates/notebookHTML.tpl'
+
+    var command = sprintf('jupyter nbconvert %s --output=%s --output-dir=%s --template=%s', file.path, outputName, outputDir, templateLocation);
+
+    exec(command, {
+        maxBuffer: 1024*500
+    }, (err, stdout, stderr) => {
+        if(err){
+            return {error: err}
+        }
+    })
+ }
+
+ function renderHTMLFromJSON(json, id){
+    var outputDir = config.rootDirectory + config.filesDirectory
+    var outputName = id;
+    var templateLocation = config.rootDirectory + '/assets/nbconvert/templates/notebookHTML.tpl'
+
+    var tmpObj = tmp.fileSync({
+        mode: 0644,
+        prefix: 'prefix-',
+        postfix: '.json'
+    });
+
+    console.log('tmpObj: ', tmpObj);
+    console.log('Output dir: ', outputDir);
+
+    fs.writeFileSync(tmpObj.name, json);
+
+    var command = sprintf('jupyter nbconvert %s --output=%s --output-dir=%s --template=%s', tmpObj.name, outputName, outputDir, templateLocation);
+
+    console.log('Execute command');
+    exec(command, {
+        maxBuffer: 1024*500
+    }, (err, stdout, stderr) => {
+        if(err){
+            console.log('Error executing command: ', err);
+            return {error: err}
+        } else {
+            console.log('No error executing command');
+        }
+    })
+ }
+
+ module.exports = {renderHTMLFromFile, renderHTMLFromJSON}