Adding loadingSpinner gif image to use instead of 'Loading 3MB' message.

components/configuration/VFBToolbar/vfbtoolbarHTML.js

@@ -355,4 +355,15 @@ var contribute
   + "   </div>"
   + "   </div>";
 
-module.exports = { about, feedback, contribute };
+var quickHelp
+= "<div id='vfb-content-block' class='callout vfbcontent'> "
+  + "<div id='vfb-content-titlebar'> "
+  + "	<div id='vfb-content-title'>Quick Help for : <span style='color:white;'>Virtual Fly Brain</span></div> "
+  + "<div id='loadingText' style='text-align:center; font-family: consolas; margin-top: 50px;} '>"
+  + "<img src='geppetto/build/splash.png' alt='' onerror='document.getElementById('loadingMessage').style.display='block'' >"
+  + "<span id='loadingMessage' style='display : none' >LOADING... [~3MB]</span>"
+  + "</div>"
+  + "</div>"
+  + "</div>";
+
+module.exports = { about, feedback, contribute, quickHelp};

components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.js

@@ -457,6 +457,14 @@ var toolbarMenu = {
             handlerAction: "clickFeedback",
             parameters: []
           }
+        },
+        {
+          label: "Click Help",
+          icon: "fa fa-book",
+          action: {
+            handlerAction: "clickQuickHelp",
+            parameters: []
+          }
         }
       ]
     }

components/interface/VFBToolbar/VFBToolBar.js

@@ -72,12 +72,14 @@ export default class VFBToolBar extends React.Component {
     this.aboutHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').about;
     this.feedbackHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').feedback;
     this.contributeHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').contribute;
+    this.quickHelpHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').quickHelp;
 
 
     this.clickAbout = this.clickAbout.bind(this);
     this.menuHandler = this.menuHandler.bind(this);
     this.clickFeedback = this.clickFeedback.bind(this);
     this.clickContribute = this.clickContribute.bind(this);
+    this.clickQuickHelp = this.clickQuickHelp.bind(this);
   }
 
   componentWillMount () {
@@ -213,6 +215,12 @@ export default class VFBToolBar extends React.Component {
     this.props.htmlOutputHandler(htmlContent);
     window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Contribute'));
   }
+
+  clickQuickHelp () {
+    var htmlContent = this.quickHelpHTML;
+    this.props.htmlOutputHandler(htmlContent);
+    window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Tutorial'));
+  }
 
   menuHandler (click) {
     switch (click.handlerAction) {
@@ -234,6 +242,9 @@ export default class VFBToolBar extends React.Component {
     case 'clickContribute':
       this.clickContribute();
       break;
+    case 'clickQuickHelp':
+      this.clickQuickHelp();
+      break;
     default:
       return this.props.menuHandler(click);
     }

tests/jest/vfb/menu-component-tests.js

@@ -82,9 +82,9 @@ describe('VFB Menu Component Tests', () => {
 			await page.evaluate(async () => document.getElementById("Help").click());
 			// Wait for drop down menu of 'Help' to show 
 			await wait4selector(page, "ul.MuiList-root", { visible: true, timeout : 120000 })
-			// Check there's three elements in the drop down menu of 'Help'
+			// Check there's four elements in the drop down menu of 'Help'
 			const dropDownMenuItems = await page.evaluate(async () => document.getElementsByClassName("MuiListItem-root").length);
-			expect(dropDownMenuItems).toEqual(3);
+			expect(dropDownMenuItems).toEqual(4);
 		})
 
 		it('Help Modal FAQ Tab Opened', async () => {

webpack.config.js

@@ -3,6 +3,8 @@ var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
 var MiniCssExtractPlugin = require("mini-css-extract-plugin");
+var fs = require('fs');
+
 /*
  *var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  * <%=htmlWebpackPlugin.options.GEPPETTO_CONFIGURATION._webapp_folder%>
@@ -28,6 +30,17 @@ var availableExtensions = [];
 availableExtensions.push({ from: path.resolve(__dirname, geppetto_client_path, "static/*"), to: 'static', flatten: true });
 availableExtensions.push({ from: 'tutorials/*', to: './', flatten: true });
 availableExtensions.push({ from: 'model/*', to: './', flatten: true });
+
+const splashLoadingImage = 'images/splash.png';
+
+try {
+  if (fs.existsSync(splashLoadingImage)) {
+    availableExtensions.push({ from: splashLoadingImage, to: './', flatten: true });
+  }
+} catch (err) {
+  console.error(err)
+}
+
 console.log(availableExtensions);
 
 module.exports = function (env){