From a6836b5cfb59a5d460ee8c1438ce9e7ecf87c440 Mon Sep 17 00:00:00 2001 From: jrmartin Date: Mon, 16 Dec 2019 09:51:21 +0900 Subject: [PATCH 1/5] Adding loadingSpinner gif image to use instead of 'Loading 3MB' message. Adds 'Help -> Tutorial' option that displays modal window with loading spinner gif. --- components/configuration/vfbtoolbarHTML.js | 13 ++++++++++++- .../configuration/vfbtoolbarMenuConfiguration.js | 8 ++++++++ components/interface/VFBToolBar.js | 15 ++++++++++++++- images/loadingSpinner.gif | Bin 0 -> 6031 bytes webpack.config.js | 13 +++++++++++++ 5 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 images/loadingSpinner.gif diff --git a/components/configuration/vfbtoolbarHTML.js b/components/configuration/vfbtoolbarHTML.js index 6cf644186..b8e907559 100644 --- a/components/configuration/vfbtoolbarHTML.js +++ b/components/configuration/vfbtoolbarHTML.js @@ -355,4 +355,15 @@ var contribute + " " + " "; -module.exports = { about, feedback, contribute }; +var tutorial += "
" + + "
" + + "
Tutorial Virtual Fly Brain
" + + "
" + + "" + + "" + + "
" + + "
" + + "
"; + +module.exports = { about, feedback, contribute, tutorial }; diff --git a/components/configuration/vfbtoolbarMenuConfiguration.js b/components/configuration/vfbtoolbarMenuConfiguration.js index 02f56225b..86c701ee2 100644 --- a/components/configuration/vfbtoolbarMenuConfiguration.js +++ b/components/configuration/vfbtoolbarMenuConfiguration.js @@ -347,6 +347,14 @@ var toolbarMenu = { handlerAction: "clickFeedback", parameters: [] } + }, + { + label: "Tutorial", + icon: "fa fa-book", + action: { + handlerAction: "clickTutorial", + parameters: [] + } } ] } diff --git a/components/interface/VFBToolBar.js b/components/interface/VFBToolBar.js index cf236e62c..8a0a3af07 100644 --- a/components/interface/VFBToolBar.js +++ b/components/interface/VFBToolBar.js @@ -72,12 +72,15 @@ export default class VFBToolBar extends React.Component { this.aboutHTML = require('../configuration/vfbtoolbarHTML.js').about; this.feedbackHTML = require('../configuration/vfbtoolbarHTML.js').feedback; this.contributeHTML = require('../configuration/vfbtoolbarHTML.js').contribute; - + this.tutorialHTML = require('../configuration/vfbtoolbarHTML.js').tutorial; + + console.log("tutorial html ", this.tutorialHTML); 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.clickTutorial = this.clickTutorial.bind(this); } componentWillMount () { @@ -213,6 +216,13 @@ export default class VFBToolBar extends React.Component { this.props.htmlOutputHandler(htmlContent); window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Contribute')); } + + clickTutorial () { + var htmlContent = this.tutorialHTML; + console.log("tutorial") + this.props.htmlOutputHandler(htmlContent); + window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Tutorial')); + } menuHandler (click) { switch (click.handlerAction) { @@ -234,6 +244,9 @@ export default class VFBToolBar extends React.Component { case 'clickContribute': this.clickContribute(); break; + case 'clickTutorial': + this.clickTutorial(); + break; default: return this.props.menuHandler(click); } diff --git a/images/loadingSpinner.gif b/images/loadingSpinner.gif new file mode 100644 index 0000000000000000000000000000000000000000..98c63f4931d65a58c7097f53c1b054541e27927d GIT binary patch literal 6031 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 literal 0 HcmV?d00001 diff --git a/webpack.config.js b/webpack.config.js index a64c30143..b845e9067 100644 --- a/webpack.config.js +++ b/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 loadingSpinnerPath = 'images/loadingSpinner.gif'; + +try { + if (fs.existsSync(loadingSpinnerPath)) { + availableExtensions.push({ from: loadingSpinnerPath, to: './', flatten: true }); + } +} catch (err) { + console.error(err) +} + console.log(availableExtensions); module.exports = function (env){ From 1415b47127f51315b2f4458bc37053c8aa0b5c6c Mon Sep 17 00:00:00 2001 From: jrmartin Date: Mon, 16 Dec 2019 09:57:36 +0900 Subject: [PATCH 2/5] remove debugging logs --- components/interface/VFBToolBar.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/interface/VFBToolBar.js b/components/interface/VFBToolBar.js index 8a0a3af07..e0fd4e227 100644 --- a/components/interface/VFBToolBar.js +++ b/components/interface/VFBToolBar.js @@ -74,8 +74,6 @@ export default class VFBToolBar extends React.Component { this.contributeHTML = require('../configuration/vfbtoolbarHTML.js').contribute; this.tutorialHTML = require('../configuration/vfbtoolbarHTML.js').tutorial; - console.log("tutorial html ", this.tutorialHTML); - this.clickAbout = this.clickAbout.bind(this); this.menuHandler = this.menuHandler.bind(this); this.clickFeedback = this.clickFeedback.bind(this); @@ -219,7 +217,6 @@ export default class VFBToolBar extends React.Component { clickTutorial () { var htmlContent = this.tutorialHTML; - console.log("tutorial") this.props.htmlOutputHandler(htmlContent); window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Tutorial')); } From 489cfbcc53279c03bf6a3470d77f27878dc9e322 Mon Sep 17 00:00:00 2001 From: jrmartin Date: Mon, 16 Dec 2019 10:18:51 +0900 Subject: [PATCH 3/5] change name of loading image to 'splash.png' --- components/configuration/vfbtoolbarHTML.js | 2 +- images/{loadingSpinner.gif => splash.png} | Bin webpack.config.js | 6 +++--- 3 files changed, 4 insertions(+), 4 deletions(-) rename images/{loadingSpinner.gif => splash.png} (100%) diff --git a/components/configuration/vfbtoolbarHTML.js b/components/configuration/vfbtoolbarHTML.js index b8e907559..6036d168e 100644 --- a/components/configuration/vfbtoolbarHTML.js +++ b/components/configuration/vfbtoolbarHTML.js @@ -360,7 +360,7 @@ var tutorial + "
" + "
Tutorial Virtual Fly Brain
" + "
" - + "" + + "" + "" + "
" + "
" diff --git a/images/loadingSpinner.gif b/images/splash.png similarity index 100% rename from images/loadingSpinner.gif rename to images/splash.png diff --git a/webpack.config.js b/webpack.config.js index b845e9067..c01fadecb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -31,11 +31,11 @@ availableExtensions.push({ from: path.resolve(__dirname, geppetto_client_path, " availableExtensions.push({ from: 'tutorials/*', to: './', flatten: true }); availableExtensions.push({ from: 'model/*', to: './', flatten: true }); -const loadingSpinnerPath = 'images/loadingSpinner.gif'; +const splashLoadingImage = 'images/splash.png'; try { - if (fs.existsSync(loadingSpinnerPath)) { - availableExtensions.push({ from: loadingSpinnerPath, to: './', flatten: true }); + if (fs.existsSync(splashLoadingImage)) { + availableExtensions.push({ from: splashLoadingImage, to: './', flatten: true }); } } catch (err) { console.error(err) From b2a79df0bca05d12b80e5a9e141415c7d6662d7a Mon Sep 17 00:00:00 2001 From: jrmartin Date: Mon, 16 Dec 2019 16:35:32 +0900 Subject: [PATCH 4/5] A new option added under 'help' menu, test updated to reflect this (total number of elements under Help menu) --- tests/jest/vfb/menu-component-tests.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/jest/vfb/menu-component-tests.js b/tests/jest/vfb/menu-component-tests.js index 7a13f2718..f098f3af8 100644 --- a/tests/jest/vfb/menu-component-tests.js +++ b/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 () => { From 4cca1eace229f891c9e7b122945ab5eba363943e Mon Sep 17 00:00:00 2001 From: jrmartin Date: Sat, 21 Dec 2019 13:17:50 +0900 Subject: [PATCH 5/5] update clickQuickHelp reference --- components/interface/VFBToolbar/VFBToolBar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/interface/VFBToolbar/VFBToolBar.js b/components/interface/VFBToolbar/VFBToolBar.js index fd1577cc2..8061642f8 100644 --- a/components/interface/VFBToolbar/VFBToolBar.js +++ b/components/interface/VFBToolbar/VFBToolBar.js @@ -243,7 +243,7 @@ export default class VFBToolBar extends React.Component { this.clickContribute(); break; case 'clickQuickHelp': - this.clickTutorial(); + this.clickQuickHelp(); break; default: return this.props.menuHandler(click);