Overview component implementation

[ddelpiano]

The implementation of this has to be divided in 2 parts since the wanted behaviour.

1. Modify the geppetto.ejs file in order to provide an image that will be loaded in replacement of the string "Loading [~3Mb]".

To implement this first point we can modify the webpack file to copy one image with a certain name (e.g. splash.png) from the folder geppetto-vfb/images/splash.png to the build folder so that this will be visible for the webserver. We already doing something similar here

geppetto-vfb/webpack.config.js

Line 29 in 6a65949

availableExtensions.push({ from: 'tutorials/*', to: './', flatten: true });

and you can see from here

geppetto-vfb/tutorials/queryTutorial.json

Line 7 in 6a65949

"content_url": "/org.geppetto.frontend/geppetto/build/query.html"

how these files are used.
We can implement something similar plus modify the geppetto.ejs in geppetto-client/js/pages/geppetto to replace this

<div id="mainContainer">
	<div id="loadingText" style="text-align:center; font-family: consolas; margin-top: 50px;} ">LOADING... [~3MB]</div>
    <div id="controls" class="noSelection">

with something similar

<div id="loadingText" style="text-align:center; font-family: consolas; margin-top: 50px;} ">
        <img src="./build/etc/etc/splash.png" alt="LOADING... [~1Mb]" />
    </div>

(the src link needs to be tested).
If the image is not loaded the alt text will be shown anyway as it is.
This change should be applied also to geppetto-application as well with the webpack change.

2. Implement a react component that will display the same image from the UI, clicking the menu from Help->Tutorial (Tutorial voice to be added).

This can be done very quickly re-using the same components we are currently using in the VBMain and VFBToolbar to show the html of Virtual Fly Brain->Contribute but instead where we inject a simple html linking to the same image we previously used.

Use a random image for the development, this will be swapped later this week.
Thx!