fix existing html

(cleanup sidebar code before adding new tabs for reldocs)

explorerjs.html

@@ -441,7 +441,7 @@
     </div>
   </div>
   <div id="sidebar">
-    <div id="tab-container" class='tab-container'>
+    <div id="selection-tabs-contnr" class='selection-tabs-contnr'>
 
        <ul class='etabs'>
          <!-- for related elements from the combined graph (eg soc => sem) -->
@@ -483,13 +483,14 @@
 
       open/close panel from: jsfiddle.net/KyleMit/kcpma
     -->
-    <div class="panel-group" id="accordion">
+    <div class="panel-group" id="varinfos-accordion">
 
 
       <div class="panel panel-default" id="video_explanation">
         <div class="panel-heading">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-target="#le_tutorial" href="#le_tutorial">
+            <a data-toggle="collapse" data-target="#le_tutorial" href="#le_tutorial"
+               data-parent="#varinfos-accordion">
               <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
               &nbsp;Tutorial video
             </a>
@@ -497,29 +498,35 @@
         </div>
 
         <!-- TODO: outcloud the video for better stream+player -->
-        <!-- <div class="panel-collapse collapse" id="le_tutorial">
+        <div class="panel-collapse collapse" id="le_tutorial">
+          <p>here video</p>
           <video width="100%"
-            src="video/AXA2015.mp4" controls=""  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></video>
-        </div> -->
+            src="" controls=""  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></video>
+        </div>
       </div>
 
       <div class="panel panel-default" id="tips_panel">
         <div class="panel-heading">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-target="#tips" href="#tips">
+            <a data-toggle="collapse" data-target="#tips" href="#tips"
+               data-parent="#varinfos-accordion">
               <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
               &nbsp;Tips
             </a>
           </h4>
         </div>
 
-        <div class="panel-collapse collapse in" id="tips"></div>
+        <div class="panel-collapse collapse in" id="tips">
+          <p>here tips inserted by twmain/Tinaweb.js</p>
+        </div>
       </div>
 
-      <div class="panel panel-default" id="credits_panel">
+
+      <div class="panel panel-default" id="video_explanationw">
         <div class="panel-heading">
           <h4 class="panel-title">
-            <a data-toggle="collapse" data-target="#credits" href="#credits">
+            <a data-toggle="collapse" data-target="#credits" href="#credits"
+               data-parent="#varinfos-accordion">
               <span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
               &nbsp;Credits
             </a>
@@ -527,19 +534,21 @@
         </div>
 
         <div class="panel-collapse collapse" id="credits">
-          <a href="https://bigdata.iscpif.fr/" target="_blank">
-              <img src="https://bigdata.iscpif.fr/images/logos/BIGDATA-Logo-PoweredBy-light.jpg"
-              alt="Powered by Big Data at ISCPIF"
-              style="width:85%; ">
-          </a>
-          <a href="https://github.com/moma" target="_blank">
-              <img src="twlibs/img/moma.png"
-              alt="Sciencemapping"
-              style="width:85%; ">
-          </a>
+          <p>
+            <a href="https://bigdata.iscpif.fr/" target="_blank">
+                <img src="https://bigdata.iscpif.fr/images/logos/BIGDATA-Logo-PoweredBy-light.jpg"
+                alt="Powered by Big Data at ISCPIF"
+                style="width:85%; ">
+            </a>
+            <a href="https://github.com/moma" target="_blank">
+                <img src="twlibs/img/moma.png"
+                alt="Sciencemapping"
+                style="width:85%; ">
+            </a>
+          </p>
         </div>
-
       </div>
+
     </div>
 
     <br><br>
@@ -610,12 +619,12 @@
     </div>
 
 
-    <div id="modalloader" class="modal fade">
+    <!-- <div id="modalloader" class="modal fade">
         <div id="loader" class="loader">
             <img src="twlibs/img/loader.gif"></img>
         </div>
         <div id="closeloader" data-dismiss="modal"></div>
-    </div>
+    </div> -->
 
 
     <div id="facet-options" class="modal fade">
@@ -725,10 +734,9 @@
       </div>
     </div>
 
-
+<!--
     <div id="geomapmodal" class="modal fade">
 
-        <!-- <div class="modal-content"> -->
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
             <h4 class="modal-title">Geomap</h4>
@@ -736,12 +744,10 @@
           <div class="modal-body">
             <div class="geomapCont"></div>
           </div>
-        <!-- </div> -->
-          <!-- <div class="geomapCont"></div> -->
           <div id="closegeomap" data-dismiss="modal"></div>
-    </div>
+    </div> -->
 
-    <div id="heatgraph"></div>
+    <!-- <div id="heatgraph"></div> -->
 
   </div>
 

twlibs/css/twjs.css

@@ -143,8 +143,8 @@ html.waiting {
 
 
 /* right info panel */
-#accordion {
-  display:none
+#varinfos-accordion {
+  display:block;
 }
 
 /* VARIAE */
@@ -189,7 +189,7 @@ html.waiting {
   padding: 5px;
 }
 
-#tab-container {
+#selection-tabs-contnr {
   margin: 7px;
 }
 
@@ -223,7 +223,7 @@ p.micromessage{
 .tab a:hover { text-decoration: underline; }
 .tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
 .tab a.active { font-weight: bold; }
-.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
+.selection-tabs-contnr .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
 .panel-container { margin-bottom: 10px; }
 
 

twmain/Tinaweb.js

@@ -381,7 +381,7 @@ var TinaWebJS = function ( sigmacanvas ) {
           }
         }
 
-        $('#tab-container').easytabs({
+        $('#selection-tabs-contnr').easytabs({
           updateHash:false,
           defaultTab: 'li#tabneigh'
         });
@@ -721,11 +721,8 @@ var TinaWebJS = function ( sigmacanvas ) {
 
         $("#tips").html(getTips());
 
-        // a bit costly, TODO make conditional or deprecated
-        // showMeSomeLabels(6);
-
-        // updateDownNodeEvent(false);
-
+        // we start with no selection
+        $("#selection-tabs-contnr").hide();
 
         // #saveAs => toggle #savemodal initialized in html + bootstrap-native
 

twmain/extras_explorerjs.js

@@ -662,8 +662,6 @@ function renderTweet( tweet) {
 }
 
 function getTips(){
-    param='';
-
     text =
         "<br>"+
         "Basic Interactions:"+
@@ -685,9 +683,6 @@ function getTips(){
         "<li>The 'change level' button allows to change between global view and node centered view,</li>"+
         "<li>To explore the neighborhood of a selection click on the 'change level' button.</li>"+
         "</ul>";
-
-    $("#tab-container").hide();
-    $("#tab-container-top").hide();
     return text;
 }
 

twmain/methods.js

@@ -124,12 +124,11 @@ function cancelSelection (fromTagCloud, settings) {
     if(fromTagCloud==false){
         $("#names").html("");
         $("#topPapers").html(""); $("#topPapers").hide();
-        $("#opossiteNodes").html(""); $("#tab-container").hide();
+        $("#oppositeNodes").html(""); $("#selection-tabs-contnr").hide();
         $("#information").html("");
         $("#searchinput").val("");
         $("#unselectbutton").hide();
         $("#lefttopbox").hide();
-        $("#tips").html(getTips());
     }
 
     // send "eraseNodeSet" event
@@ -430,14 +429,13 @@ function updateRelatedNodesPanel( sels , same, oppos ) {
 
     //using the readmore.js (NB readmore and easytabs are not easy to harmonize)
     $("#lefttopbox").show();
-    $("#tab-container").show();
+    $("#selection-tabs-contnr").show();
     $("#names").html(namesDIV).readmore({maxHeight:100});
     if(oppos.length>0) {
       $("#oppositeNodes").html(alterNodesDIV).readmore({maxHeight:200});
     }
     $("#sameNodes").html(sameNodesDIV).readmore({maxHeight:200});
     $("#information").html(informationDIV);
-    $("#tips").html("");
 
     if (TW.conf.getRelatedDocs) {
       $("#topPapers").show();