Added tour of viewer tools for better User experience

[Hemansh31]

I added a bootstrap tour of all the tools
Screencast

[birm]

add the apps/viewer/bootstrap-tour-standalone.min.js to common, and add it to the eslint ignore file

[birm]

How many of the style issues can you fix with npm run-script lint-fix

[cjchirag7]

1. To remove ESLint errors, firstly go inside your caMicroscope folder, enter the following commands into terminal.

npm install
npm run lint-fix

I have tested this. This would remove almost 90 lint errors and you will remain with only 13 of them, which can be easily removed,as 12 of them say This line has a length of x. Maximum allowed is 120 and one says Multiline support is limited to browsers supporting ES5 only. You would just need to split them into different lines, or use template literals (enclosing the string in back-ticks ` )

2. After introducing the changes, I requested in tut.js and styles.css , the tour would look like this -
   

[cjchirag7]

@Hemansh31 , it would be better to make a folder named 'bootstrap-tour-standalone' inside the common folder and place both bootstrap-tour-standalone.min.css and bootstrap-tour-standalone.min.js inside that folder. As, this would be a common component for tours and can be used for developing tours for other components like heatmaps, etc. also

And BTW, if you remove this line, it would be better as ESLINT is configured to test only .js files inside components, core and apps folders, so it is not testing the .js files in components folder already (Check travis.yml file for this)

Suggested change

common/bootstrap-tour-standalone.min.js

[cjchirag7]

Suggested change

	</div><div style='width:100%;display: flex;margin-bottom: 5px;'><button class='btn btn-default' data-role='end' style='margin:auto;'>End tour</button></div></div>"
	});
	</div><div style='width:100%;display: flex;margin-bottom: 5px;'><button class='btn btn-default' data-role='end' style='margin:auto;'>End tour</button></div></div>",
	backdrop: true
	},
	);

Including backdrop would make it look better but along with this, please also add these lines in the 'styles.css' in css folder -

.tour-step-background {
background: #71daec !important;
opacity: 0.2 !important;
}

[cjchirag7]

After creating the folder in common, you would need to change this.

Suggested change

	<link href="./bootstrap-tour-standalone.min.css" rel="stylesheet">
	<link href="../../common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.css" rel="stylesheet">

[cjchirag7]

Suggested change

	<script src="../../common/bootstrap-tour-standalone.min.js"></script>
	<script src="../../common/bootstrap-tour-standalone/bootstrap-tour-standalone.min.js"></script>

[nanli-emory]

@Hemansh31 I love this feature. It will help a lot to users. The only thing that you need to change is the opacity of the background. Could you make it more transparent (.3 ~ .5)?

[Hemansh31]

@cjchirag7 Thanks for the valuable suggestions