Conflicts:

web/src/main/webapp/scripts/app.js

web/src/main/webapp/index.html

@@ -175,12 +175,20 @@
     </div>
 </script>
 <script id="loading" type="text/ng-template">
-    <div class="progress progress-striped"
-         style="position:absolute;top:40%;width:90%;margin-left:5%;display:none;z-index:10">
-        <div class="bar progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0"
-             aria-valuemax="100" style="width: 0%">
-        </div>
-    </div>
+	<div>
+		<div style="position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#000000;opacity:0.2;z-index:9;display:none" class="progress-back">&nbsp;</div>
+		<div style="position:absolute;top:10%;width:100%;text-align:center;z-index:10;display:none;" class="progress-tip">
+			<img src="/images/tip/tip01_ko.png" style="box-shadow: 7px 7px 10px -1px rgba(0,0,0,1);background-color:#FFFFFF">
+			<div class="form-group" style="padding-top:10px">
+				<label style="background-color:#EEEEEE;padding:5px;font-size:18px;font-weight:bold;border-radius:4px">
+					<input type="checkbox" ng-model="loadingOption.hideTip"/> Hide tip
+				</label>
+			</div>
+		</div>
+    	<div class="progress progress-striped" style="position:absolute;top:50%;width:90%;margin-left:5%;display:none;z-index:10">
+       		<div class="bar progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
+    	</div>
+	</div>
 </script>
 <script id="loading.html" type="text/ng-template">
     <div class="cg-busy cg-busy-animation ng-hide" ng-show="!!showLoading">

web/src/main/webapp/scripts/app.js

@@ -53,6 +53,40 @@ pinpointApp.config(['$routeProvider', '$locationProvider', '$modalProvider', fun
     // Do not use in new projects.
 //    $sceProvider.enabled(false);
 }]);
+pinpointApp.factory("UserLocales", function( $window) {
+	var defaultLocale = "en";
+    // May not be the best way to get locale.
+    var localeCode = $window.navigator.userLanguage || $window.navigator.language;
+    if ($.type(localeCode) === "string" && localeCode.length >= 2) {
+        localeCode = localeCode.substring(0, 2);
+    } else {
+        localeCode = defaultLocale;
+    }
+    return {
+    	"userLocale" : localeCode, 
+    	"defaultLocale" : defaultLocale 
+    };
+});
+
+pinpointApp.factory('helpContent', [ '$window', '$injector', 'UserLocales', function($window, $injector, UserLocales) {
+//    var defaultLocale = "en";
+//    // May not be the best way to get locale.
+//    var localeCode = $window.navigator.userLanguage || $window.navigator.language;
+//    if ($.type(localeCode) === "string" && localeCode.length >= 2) {
+//        localeCode = localeCode.substring(0, 2);
+//    } else {
+//        localeCode = defaultLocale;
+//    }
+	var name = "helpContent-" + UserLocales.userLocale;
+	var defaultName = "helpContent-" + UserLocales.defaultLocale;
+//    var name = "helpContent-" + localeCode;
+//    var defaultName = "helpContent-" + defaultLocale;
+    if ($injector.has(name)) {
+      return $injector.get(name);
+    } else {
+      return $injector.get(defaultName);
+    }
+}]);
 
 pinpointApp.run([ '$rootScope', '$timeout', '$modal', '$location', '$cookies', '$interval',
     function ($rootScope, $timeout, $modal, $location, $cookies, $interval) {

web/src/main/webapp/scripts/controllers/main.js

@@ -363,5 +363,15 @@ pinpointApp.controller('MainCtrl', [ 'filterConfig', '$scope', '$timeout', '$rou
         $scope.onBeforeOverlayRemoval = function () {
             $rootElement.find('#copyright').hide();
         };
-
+        $scope.loadingOption = {
+        	hideTip : "init"
+        };
+        $scope.$watch( 'loadingOption.hideTip', function(newValue) {
+        	if ( newValue == "init" ) return;
+    		if ( $window.localStorage ) {
+    			var now = new Date();
+    			now.setDate(now.getDate() + 30);
+        		$window.localStorage.setItem( "__HIDE_LOADING_TIP", newValue ? now.valueOf() : "-" ); 
+        	}
+        });
     } ]);

web/src/main/webapp/scripts/directives/navbar.js

@@ -15,7 +15,8 @@ pinpointApp.directive('navbar', [ 'cfg', '$rootScope', '$http',
             templateUrl: 'views/navbar.html',
             link: function (scope, element) {
 
-            	var defaultRange = 7;
+            	var DEFAULT_RANGE = 2;
+            	var MAX_RANGE = 8;
                 // define private variables
                 var $application, $fromPicker, $toPicker, oNavbarVo, aReadablePeriodList;
 
@@ -30,9 +31,9 @@ pinpointApp.directive('navbar', [ 'cfg', '$rootScope', '$http',
                  */
                 getRangeFromStorage = function(app) {
                 	if ( window.localStorage ) {
-                		return window.localStorage.getItem( app ) || defaultRange;
+                		return window.localStorage.getItem( app ) || DEFAULT_RANGE;
                 	} else {
-                		return defaultRange;
+                		return DEFAULT_RANGE;
                 	}
                 };
                 /**
@@ -73,7 +74,7 @@ pinpointApp.directive('navbar', [ 'cfg', '$rootScope', '$http',
                 scope.range = getRangeFromStorage(scope.applicatoin);
                 scope.rangeList = (function() {
                 	var a = [];
-                	for( var i = 0 ; i <= defaultRange ; i++ ) {
+                	for( var i = 1 ; i <= MAX_RANGE ; i++ ) {
                 		a.push( i );
                 	}
                 	return a;

web/src/main/webapp/scripts/services/ProgressBar.js

@@ -1,8 +1,12 @@
 'use strict';
 
-pinpointApp.factory('ProgressBar', [ '$timeout', function ($timeout) {
-
+pinpointApp.factory('ProgressBar', [ '$timeout', '$window', '$location', 'UserLocales', function ($timeout, $window, $location, UserLocales) {
+	var AVAILABLE_LOCALE = [ "ko", "en" ];
+	var TIP_MAX_COUNT = 5;
+	var STORAGE_NAME = "__HIDE_LOADING_TIP";
+	
     return function (parent) {
+    	
         this.$parent = parent || null;
         this.nPercentage = 0;
         this.bAutoIncrease = true;
@@ -18,9 +22,22 @@ pinpointApp.factory('ProgressBar', [ '$timeout', function ($timeout) {
         }.bind(this);
 
         this.startLoading = function (autoIncrease) {
+        	var bShowTip = true;
+        	if ( $window.localStorage ) {
+        		var savedTipData = $window.localStorage.getItem( STORAGE_NAME ) || "-";
+        		if ( savedTipData === "-" ) {
+        			bShowTip = true;
+        		} else {
+        			bShowTip = ( new Date().valueOf() < parseInt( savedTipData ) ) ? false : true;
+        		}
+        	}
             this.bAutoIncrease = autoIncrease || true;
             this.setLoading(0);
             $timeout(function () {
+            	if ( /^\/main/.test( $location.path() ) && bShowTip ) {
+	            	this.showBackground();
+	            	this.showTip();
+            	}
                 this.getProgress().show();
                 this.autoIncrease();
             }.bind(this));
@@ -30,6 +47,8 @@ pinpointApp.factory('ProgressBar', [ '$timeout', function ($timeout) {
             $timeout.cancel(this.nTimePromise);
             $timeout(function () {
                 this.getProgress().hide();
+                this.hideTip();
+                this.hideBackground();
             }.bind(this), 300);
         }.bind(this);
 
@@ -60,5 +79,37 @@ pinpointApp.factory('ProgressBar', [ '$timeout', function ($timeout) {
                 }.bind(this), 500);
             }
         }.bind(this);
+        this.showBackground = function() {
+        	if ( this.$parent ) {
+        		$('.progress-back', this.$parent).show();
+        	}
+        }.bind(this);
+        this.showTip = function() {
+        	if ( this.$parent ) {
+        		$('.progress-tip img', this.$parent).attr( "src", "/images/tip/tip" + this._getRandomNum() + "_" + this._getLocale() + ".png");
+        		$('.progress-tip', this.$parent).show();
+        	}
+        }.bind(this);
+        this._getRandomNum = function() {
+        	var num = parseInt( Math.random() * (TIP_MAX_COUNT+1) );
+        	return num < 10 ? "0" + num : num + "";
+        }.bind(this);
+        this._getLocale = function() {
+        	if ( AVAILABLE_LOCALE.indexOf( UserLocales.userLocale ) == -1 ) {
+        		return UserLocales.defaultLocale;
+        	} else {
+        		return UserLocales.userLocale;
+        	}
+        }.bind(this);
+        this.hideBackground = function() {
+        	if ( this.$parent ) {
+        		$('.progress-back', this.$parent).hide();
+        	}        	
+        }.bind(this);
+        this.hideTip = function() {
+        	if ( this.$parent ) {
+        		$('.progress-tip', this.$parent).hide();
+        	}
+        }.bind(this);
     };
 }]);

web/src/main/webapp/views/navbar.html

@@ -21,7 +21,7 @@
 								{{range}} <span class="caret"></span>
                             </button>
 	                    	<ul class="dropdown-menu" role="menu" style="padding-top:0px">
-	                    		<li style="background-color:yellow;text-align:center;font-weight:bold;padding-top:4px;padding-bottom:4px"><a href="http://en.wikipedia.org/wiki/Breadth-first_search" target="_blank"><span class="glyphicon glyphicon-link" aria-hidden="true"></span> Breadth-first</a></li>
+	                    		<li style="background-color:yellow;text-align:center;font-weight:bold;padding-top:4px;padding-bottom:4px"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Depth</li>
 	                            <li ng-repeat="r in rangeList" style="display:inline-block;width:76px;">
 	                                <a href ng-click="setNodeRange(r)">{{r}}</a>
 	                            </li>