Feature 474

Dockerfile

@@ -81,6 +81,11 @@ RUN export DEBUG=false; if test "$build_type" = "development" ; then export DEBU
 RUN cd $HOME/workspace/org.geppetto.frontend/src/main/webapp &&\
   $HOME/rename.sh https://github.com/openworm/geppetto-client.git "${targetBranch}" "${originBranch}" "${defaultBranch}"
 
+RUN cd $HOME/workspace/org.geppetto.frontend &&\
+  /bin/echo -e "\e[96mMaven install org.geppetto.frontend\e[0m" &&\
+  mvn ${mvnOpt} clean install &&\
+  rm -rf src
+
 COPY dockerFiles/geppetto.plan $HOME/workspace/org.geppetto/geppetto.plan
 COPY dockerFiles/config.json $HOME/workspace/org.geppetto/utilities/source_setup/config.json
 COPY dockerFiles/startup.sh /

components/VFBMain.js

@@ -13,7 +13,7 @@ import SpotLight from 'geppetto-client/js/components/interface/spotlight/spotlig
 import HTMLViewer from 'geppetto-client/js/components/interface/htmlViewer/HTMLViewer';
 import ControlPanel from 'geppetto-client/js/components/interface/controlPanel/controlpanel';
 import * as FlexLayout from 'geppetto-client/js/components/interface/flexLayout2/src/index';
-
+import QuickHelp from './interface/VFBOverview/QuickHelp';
 
 require('../css/base.less');
 require('../css/VFBMain.less');
@@ -879,6 +879,39 @@ export default class VFBMain extends React.Component {
         }
       }.bind(this));
     }.bind(this);
+
+    window.setCookie = function ( name, value, days ) {
+      var expires = "";
+      if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+      }
+      document.cookie = name + "=" + (value || "") + expires + "; path=/";
+    };
+
+    window.getCookie = function ( name ) {
+      var nameEQ = name + "=";
+      var ca = document.cookie.split(';');
+      for (var i = 0; i < ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+          c = c.substring(1, c.length);
+        }
+        if ( c.indexOf(nameEQ) == 0 ) {
+          var result = c.substring(nameEQ.length, c.length);
+          return result;
+        }
+      }
+      return null;
+    };
+
+    // Retrieve cookie for 'quick_help' modal
+    var cookie = getCookie("show_quick_help");
+    // Show 'Quick Help' modal if cookie to hide it is not set to True
+    if ( cookie != 1) {
+      GEPPETTO.trigger('show_quick_help');
+    }
 
     this.canvasReference.flipCameraY();
     this.canvasReference.flipCameraZ();
@@ -1210,6 +1243,7 @@ export default class VFBMain extends React.Component {
 
     return (
       <div style={{ height: '100%', width: '100%' }}>
+        <QuickHelp id="quickHelp" />  
         <VFBToolBar
           htmlOutputHandler={this.renderHTMLViewer}
           menuHandler={this.menuHandler}/>

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/VFBOverview/QuickHelp.js

@@ -0,0 +1,78 @@
+define(function (require) {
+
+  var React = require('react');
+  var CreateClass = require('create-react-class');
+  var GEPPETTO = require('geppetto');
+
+  var logoDiv = CreateClass({
+    escFunction : function (event) {
+      if ( event.keyCode === 27 ) {
+        this.hide()
+      }
+    },
+
+    show : function () {
+      $("#quick_help_modal").show();
+    },
+
+    hide : function () {
+      $("#quick_help_modal").hide();
+    },
+
+    componentDidMount: function () {
+      var self = this;
+      GEPPETTO.on('show_quick_help', function () {
+        self.show();
+      }.bind(this));
+
+      GEPPETTO.on('hide_quick_help', function () {
+        self.hide();
+      }.bind(this));
+
+      document.addEventListener("keydown", this.escFunction, false);
+
+      var self = this;
+      $(document).mouseup( function (e) {
+        var container = $("#quick_help_content");
+
+        // if the target of the click isn't the container nor a descendant of the container
+        if (!container.is(e.target) && container.has(e.target).length === 0) {
+          self.hide();
+        }
+      });
+    },
+
+    handleChange : function ( e ){
+      // set 30 days expiration
+      window.setCookie('show_quick_help', document.getElementById('quick_help_dialog').checked ? 1 : 0, 30);
+    },
+
+    render: function () {
+      return (
+        <div id="quick_help_modal" className="modal callout" style={ { display : "none", width : "auto" , height : "auto", position : "relative" , zIndex: "2000 !important" } }>
+          <div id="vfb-content-block" style={ { display : "block", width : "60%" , height : "60%" , textAlign : "center" , margin : "0 auto" } } >
+            <div id="quick_help_content" className="modal-content">
+              <div className="modal-header">
+                <button className="close-slider fa fa-times" id = "x" style = { { float : "right" } } onClick = {e => this.hide()} / >
+                <h3 className="text-center"> Quick Help 
+                  <span style= { { color : "white" } } > Virtual Fly Brain</span>
+                </h3>
+              </div>
+              <div className="modal-body">  
+                <img src={"geppetto/build/splash.png"} alt="" / >
+                <div>
+                  <div>
+                    <input type="checkbox" id="quick_help_dialog" onChange={e => this.handleChange(e)} ref={ input => this.myinput = input} name="help_dialog" / >
+                    <label htmlFor="help_dialog"><h3>Dont show up the quick help on startup screen.</h3></label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    }
+  });
+
+  return logoDiv;
+});

components/interface/VFBToolbar/VFBToolBar.js

@@ -73,11 +73,11 @@ export default class VFBToolBar extends React.Component {
     this.feedbackHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').feedback;
     this.contributeHTML = require('../../configuration/VFBToolbar/vfbtoolbarHTML').contribute;
 
-
     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 +213,10 @@ export default class VFBToolBar extends React.Component {
     this.props.htmlOutputHandler(htmlContent);
     window.ga('vfb.send', 'pageview', (window.location.pathname + '?page=Contribute'));
   }
+
+  clickQuickHelp () {
+    GEPPETTO.trigger('show_quick_help');
+  }
 
   menuHandler (click) {
     switch (click.handlerAction) {
@@ -234,6 +238,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/3d-viewer-tests.js

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
 import {  getUrlFromProjectId } from './cmdline.js';
-import { wait4selector, click } from './utils';
+import { wait4selector, click, closeModalWindow} from './utils';
 import * as ST from './selectors';
 
 const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
@@ -15,7 +15,6 @@ describe('VFB 3D Viewer Component Tests', () => {
 	beforeAll(async () => {
 		jest.setTimeout(1800000); 
 		await page.goto(PROJECT_URL);
-
 	});
 
 	// Tests that expected components are present when VFB page loads
@@ -40,6 +39,11 @@ describe('VFB 3D Viewer Component Tests', () => {
 		it('Term info component created after load', async () => {
 			await wait4selector(page, 'div#VFBTermInfo_el_1_component', { visible: true })
 		})
+
+		it('Hide Quick Help Modal Window', async () => {
+			closeModalWindow(page);
+			await wait4selector(page, 'div#quick_help_modal', { hidden : true })
+		})
 
 		it('Term info component correctly populated at startup', async () => {
 			// Checks name in Term Info is present and correct

tests/jest/vfb/batch-request-tests.js

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
 import { getUrlFromProjectId } from './cmdline.js';
-import { wait4selector, click } from './utils';
+import { wait4selector, click, closeModalWindow } from './utils';
 import * as ST from './selectors';
 
 const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
@@ -44,6 +44,11 @@ describe('VFB Batch Requests Tests', () => {
 		it('Term info component created after load', async () => {
 			await wait4selector(page, 'div#VFBTermInfo_el_1_component', { visible: true })
 		})
+
+		it('Hide Quick Help Modal Window', async () => {
+			closeModalWindow(page);
+			await wait4selector(page, 'div#quick_help_modal', { hidden : true })
+		})
 
 		//Function used for testing existance of text inside term info component
 		it('Element ventral complex on adult brain template JFRC2 appeared in popup', async () => {

tests/jest/vfb/control-panel-tests.js

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
 import { getUrlFromProjectId } from './cmdline.js';
-import { wait4selector, click } from './utils';
+import { wait4selector, click, closeModalWindow } from './utils';
 import * as ST from './selectors';
 
 const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
@@ -41,6 +41,11 @@ describe('VFB Control Panel Tests', () => {
 			await wait4selector(page, 'div#VFBTermInfo_el_2_component', { visible: true })
 		})		
 
+		it('Hide Quick Help Modal Window', async () => {
+			closeModalWindow(page);
+			await wait4selector(page, 'div#quick_help_modal', { hidden : true })
+		})
+
 		it('Term info component correctly populated at startup', async () => {
 			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("fru-M-200266 (VFB_00000001)")');
 		})

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

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
 import { getCommandLineArg, getUrlFromProjectId } from './cmdline.js';
-import { wait4selector, click } from './utils';
+import { wait4selector, click, closeModalWindow } from './utils';
 import * as ST from './selectors';
 
 const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
@@ -38,6 +38,11 @@ describe('VFB Menu Component Tests', () => {
 		it('Term info component correctly populated at startup', async () => {
 			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("adult brain template JFRC2 (VFB_00017894)")', {timeout : 120000});
 		})
+
+		it('Hide Quick Help Modal Window', async () => {
+			closeModalWindow(page);
+			await wait4selector(page, 'div#quick_help_modal', { hidden : true })
+		})
 	})
 
 	//Tests Menu Components for About and Help Work
@@ -51,14 +56,9 @@ describe('VFB Menu Component Tests', () => {
 			expect(dropDownMenuItems).toEqual(4);
 		})
 
-		it('About Modal Appears', async () => {
-			await page.evaluate(async () => document.getElementById("About").click());
-			// Wait for selector to appear, this means About modal was opened
-			await wait4selector(page, '#vfb-content-block', { visible: true })
-		})
-
 		// Tests modal title bar is populated with expected title for About modal
 		it('About Modal Title Correct', async () => {
+			await page.evaluate(async () => document.getElementById("About").click());
 			await page.waitForFunction('document.getElementById("vfb-content-titlebar").innerText.startsWith("About Virtual Fly Brain")');
 		})
 
@@ -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 () => {

tests/jest/vfb/query-tests.js

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
 import { getUrlFromProjectId } from './cmdline.js';
-import { wait4selector, click } from './utils';
+import { wait4selector, click, closeModalWindow } from './utils';
 import * as ST from './selectors';
 
 const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
@@ -40,6 +40,11 @@ describe('VFB Query Component Tests', () => {
 		it('Term info component created after load', async () => {
 			await wait4selector(page, 'div#VFBTermInfo_el_1_component', { visible: true })
 		})
+
+		it('Hide Quick Help Modal Window', async () => {
+			closeModalWindow(page);
+			await wait4selector(page, 'div#quick_help_modal', { hidden : true })
+		})
 
 		it('Term info component correctly populated at startup', async () => {
 			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("adult brain template JFRC2 (VFB_00017894)")');
@@ -87,7 +92,7 @@ describe('VFB Query Component Tests', () => {
 
 		it('Term info correctly populated for example of Medulla after query results info button click', async () => {
 			await page.evaluate(async selector =>   $("#VFB_00030624-image-container").find("img").click())
-			await wait4selector(page, '#VFB_00030624_deselect_buttonBar_btn', { visible: true, timeout : 10000 })
+			await wait4selector(page, '#VFB_00030624_deselect_buttonBar_btn', { visible: true, timeout : 60000 })
 			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("medulla on adult brain template JFRC2 (VFB_00030624)")');
 		})
 	})

tests/jest/vfb/slice-viewer-tests.js

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
 import {  getUrlFromProjectId } from './cmdline.js';
-import { wait4selector, click } from './utils';
+import { wait4selector, click, closeModalWindow } from './utils';
 import * as ST from './selectors';
 
 const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
@@ -40,6 +40,11 @@ describe('VFB Slice Viewer Component Tests', () => {
 		it('Term info component created after load', async () => {
 			await wait4selector(page, 'div#VFBTermInfo_el_1_component', { visible: true })
 		})
+
+		it('Hide Quick Help Modal Window', async () => {
+			closeModalWindow(page);
+			await wait4selector(page, 'div#quick_help_modal', { hidden : true })
+		})
 
 		it('Term info component correctly populated at startup', async () => {
 			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("adult brain template JFRC2 (VFB_00017894)")');

tests/jest/vfb/spotlight-tests.js

@@ -2,7 +2,7 @@ const puppeteer = require('puppeteer');
 const { TimeoutError } = require('puppeteer/Errors');
 
 import { getUrlFromProjectId } from './cmdline.js';
-import { wait4selector, click } from './utils';
+import { wait4selector, click, closeModalWindow } from './utils';
 import * as ST from './selectors';
 
 const baseURL = process.env.url ||  'http://localhost:8080/org.geppetto.frontend';
@@ -40,6 +40,11 @@ describe('VFB Spotlight Tests', () => {
 		it('Term info component created after load', async () => {
 			await wait4selector(page, 'div#VFBTermInfo_el_1_component', { visible: true })
 		})
+
+		it('Hide Quick Help Modal Window', async () => {
+			closeModalWindow(page);
+			await wait4selector(page, 'div#quick_help_modal', { hidden : true })
+		})
 
 		it('Term info component correctly populated at startup', async () => {
 			await page.waitForFunction('document.getElementById("VFBTermInfo_el_0_component").innerText.startsWith("adult brain template JFRC2 (VFB_00017894)")');