fix the spinner

config.json

 {
-    "mode" : "static",
+    "mode" : "explorable",
     "defaultPath" : "./cesar_cleopatre.json",
-    "path" : "/home/qlobbe/Bureau/test.json"
+    "defaultName" : "cesar & cleopatre",
+    "path" : "/home/qlobbe/Bureau/test.json",
+    "pathName" : "clinical trials"
 }
\ No newline at end of file

index.html

@@ -26,37 +26,33 @@
 
 	<div class="phylo-folder">
 
+    <!-- title bar (static mode) --> 
+    <label id="phyloName" class="phylo-name"></label>
+ 
     <!-- folder bar --> 
-		<label id="file-label" for="file-path" class="input-file">
-			load a phylomemy →
-		</label>
+		<label  id="file-label" for="file-path" class="input-file">load a phylomemy →</label>
 		<input  type="file" id="file-path">
   	<label  id="file-name" class="input-name"></label>
-  		<button id="draw" class="button draw">
-  			draw
-  		</button>
+  	<button id="draw" class="button draw">draw</button>
     
     <!-- search bar -->    
-    <label id="search-label" class="search-label">
-        find a term →
-    </label> 
+    <label id="search-label" class="search-label">find a term →</label>
     <input type="text" id="search-box" class="search"/>
     <input type="text" id="search-autocomplete" class="autocomplete" disabled value="" />
+
 	</div>
 
 	<!-- row 2 & 3 -->
 
 	<div class="phylo-corpus" id="phyloCorpus"></div>
   <div class="phylo-corpus-info" id="phyloCorpusInfo"></div>   
-  
   <div class="phylo-how" id="phyloHow"></div>
+  <div class="phylo-phylo" id="phyloPhylo"></div>
 
-  <div class="phylo-phylo" id="phyloPhylo">
-    <div class="fa-3x loading" id="spin">
-      <i class="fa fa-circle-notch fa-spin"></i>
-    </div>
+  <div class="phylo-phylo-info" id="phyloPhyloInfo">
+    <!-- loading spinner -->
+    <div class="fa-3x loading" id="spin"><i class="fa fa-spinner fa-spin"></i></div>    
   </div>
-  <div class="phylo-phylo-info" id="phyloPhyloInfo"></div>
 
 	<div class="phylo-isoline" id="phyloIsoLine"></div>
 
@@ -104,11 +100,11 @@
   }
 
   function unhide(mode) {
-    document.querySelector("#reset").style.visibility = "visible"
-    document.querySelector("#label").style.visibility = "visible"
-    document.querySelector("#heading").style.visibility = "visible"
+    document.querySelector("#reset").style.visibility     = "visible";
+    document.querySelector("#label").style.visibility     = "visible";
+    document.querySelector("#heading").style.visibility   = "visible";
     if (mode != "static") {
-      document.querySelector("#export").style.visibility  = "visible"
+      document.querySelector("#export").style.visibility  = "visible";
     }
   }
 
@@ -118,14 +114,19 @@
       var conf = JSON.parse(data1);
       // available config modes are "static" or "explorable"
       if (conf.mode == "static") {
-        document.querySelector("#file-label").style.display = "none";
-        document.querySelector("#spin").style.visibility  = "visible";
         var path = "";
+        var name = "";
         if (conf.path == null || conf.path == "") {
           path = conf.defaultPath;
+          name = conf.defaultName;
         } else {
           path = conf.path;
+          name = conf.pathName;
         }        
+        document.querySelector("#file-label").style.display   = "none";
+        document.querySelector("#spin").style.visibility      = "visible";
+        document.getElementById("phyloName").innerHTML        = name;
+        document.querySelector("#phyloName").style.visibility = "visible";
         readJson(path,function(data2){
           phylo = JSON.parse(data2);
           unhide("static");

lib/css/qlobbe.css

@@ -567,3 +567,9 @@ i.how:hover span {
 .loading {
   visibility: hidden;
 }
+
+.phylo-name {
+  visibility:hidden;
+  text-transform: capitalize;
+  font-weight: bold;
+}