nicer selection tabs

fixed again easytabs init (inner and outer div both necessary resp for readmore and tabs) and unify tab css with the reldocs tabs

explorerjs.html

@@ -445,16 +445,26 @@
 
     <div id="selection-tabs-contnr" class='selection-tabs-contnr'>
 
-       <ul class='etabs'>
+       <!-- selection's neighbors display -->
+       <ul class='etabs nav nav-tabs'>
          <!-- for related elements from the combined graph (eg soc => sem) -->
-         <li id="taboppos" class='tab'><a href="#oppositeNodes">Opposite-Neighbors</a></li>
+         <li id="taboppos" class='tab'>
+           <a href="#tagcloud-XR">Opposite-Neighbors</a>
+         </li>
          <!-- for neighbors within this graph -->
-         <li id="tabneigh" class='tab'><a href="#sameNodes">Related</a></li>
+         <li id="tabsameside" class='tab'>
+           <a href="#tagcloud-00">Related</a>
+         </li>
        </ul>
 
        <div class='panel-container'>
-            <div id="oppositeNodes"></div>
-            <div id="sameNodes"></div>
+         <!-- 2 tabs with outer div for tabbing, inner div for readmore (readmore needs its container to be never hidden)-->
+         <div id="tagcloud-XR">
+            <div id="read-opposite-neighs"></div>
+         </div>
+         <div id="tagcloud-00">
+            <div id="read-sameside-neighs"></div>
+         </div>
        </div>
     </div>
 

twlibs/css/twjs-mobile.css

@@ -55,7 +55,7 @@
   }
 
   /* in percentage of what htmlProportionalLabels() calculates*/
-  #sameNodes {
+  #read-sameside-neighs, #read-opposite-neighs {
     font-size: 75%;
   }
 

twlibs/css/twjs.css

@@ -155,7 +155,7 @@ html.waiting {
 
 /* VARIAE */
 
-#oppositesBox{
+#relatedBox, #oppositesBox{
   margin: 0;
   padding: 0;
 }
@@ -277,8 +277,8 @@ ul.infoitems {
   padding: 0 !important;
 }
 
-/* etabs => easytabs (for selection)
- * nav-tabs => bootstrap[-native] tabs (for reldocs)
+/* etabs => activated via easytabs (for selection)
+ * nav-tabs => just the tabs' css (for selection and reldocs)
  */
 
 
@@ -288,13 +288,12 @@ ul.infoitems {
 }
 
 .etabs{ margin: 0; padding: 0; line-height: 15px;}
-.tab {
-  display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
-.tab a { font-size: 12px; line-height: 15px; display: block; padding: 0 5px 2px 5px; outline: none; }
-.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; }
-.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; }
+
+.selection-tabs-contnr .panel-container { background: #fff;
+  border: solid #222 1px;
+  padding: 10px;
+  border-radius: 0 4px 4px 4px;
+}
 .panel-container { margin-bottom: 10px; }
 
 

twmain/Tinaweb.js

@@ -372,12 +372,6 @@ var TinaWebJS = function ( sigmacanvas ) {
           }
         }
 
-        // initialize selection tabs (POSS: swap from easytabs lib to bs-native)
-        $('#selection-tabs-contnr').easytabs({
-          updateHash:false,
-          defaultTab: 'li#tabneigh'
-        });
-
         // show any already existing panel
         document.getElementById("graph-panels").style.display = "block"
 
@@ -641,8 +635,8 @@ var TinaWebJS = function ( sigmacanvas ) {
         $('.etabs').click(function(){
             setTimeout(
               function() {
-                $("#oppositeNodes").readmore({maxHeight:200});
-                $("#sameNodes").readmore({maxHeight:200});
+                $("#read-opposite-neighs").readmore({maxHeight:200});
+                $("#read-sameside-neighs").readmore({maxHeight:200});
               },
               500
             )
@@ -654,9 +648,9 @@ var TinaWebJS = function ( sigmacanvas ) {
                 sigma_utils.ourStopFA2();
 
             changeType();
-
             setTimeout(function(){
-              $('.etabs a[href="#tabs1"]').trigger('click');
+              //  $('.etabs a[href="#tagCloudXR"]').trigger('click');
+              $('#selection-tabs-contnr').easytabs('select', '#tagcloud-XR')
             },500)
         });
 
@@ -878,6 +872,14 @@ var TinaWebJS = function ( sigmacanvas ) {
 
       var selInst = this.selNgn
 
+      // changetype button
+      if (TW.categories.length == 1) {
+        $("#changetype").hide();
+      }
+      else {
+        $("#changetype").show();
+      }
+
       // sigma events bindings
       // ---------------------
 
@@ -1062,6 +1064,25 @@ var TinaWebJS = function ( sigmacanvas ) {
         }
       });
 
+      // initialize selection tabs (order: show => easytabs => hide => readmore)
+      if (TW.categories.length == 1) {
+        $('#selection-tabs-contnr').easytabs({
+          updateHash:false,
+          defaultTab: 'li#tabsameside'
+        });
+        $("#taboppos").hide();
+        $("#read-sameside-neighs").readmore({maxHeight:200});
+      }
+      else {
+        $("#taboppos").show();
+        $('#selection-tabs-contnr').easytabs({
+          updateHash:false,
+          defaultTab: 'li#taboppos'
+        });
+        $("#read-sameside-neighs").readmore({maxHeight:200});
+        $("#read-opposite-neighs").readmore({maxHeight:200});
+      }
+
       // initialize reldocs tabs if declared in additionalConf
       if (TW.conf.getRelatedDocs) {
 

twmain/main.js

@@ -461,7 +461,7 @@ function mainStartGraph(inFormat, inData, inConfKey, twInstance) {
       // NB : camera positions are fix if the node is fixed => they only depend on layout
       //      renderer position depend on viewpoint/zoom (like ~ html absolute positions of the node in the div)
 
-      // now that we have a sigma instance, let's bind our click handlers to it
+      // now that we have a sigma instance let's adapt the environment and bind our click handlers to it
       twInstance.initSigmaListeners(
         TW.partialGraph,
         initialActivetypes,      // to init node sliders and .class gui elements
@@ -522,27 +522,6 @@ function mainStartGraph(inFormat, inData, inConfKey, twInstance) {
       // will run fa2 if enough nodes and TW.conf.fa2Enabled == true
       sigma_utils.smartForceAtlas()
 
-
-      // adapt the enviroment to monopartite vs. bipartite cases
-      if( TW.categories.length==1 ) {
-          $("#changetype").hide();
-          $("#taboppos").hide();
-
-          // if (TW.conf.catSem && TW.conf.catSoc) {
-            setTimeout(function () {
-                // tabneigh: show "Related" tab
-                document.querySelector('.etabs a[href="#tabs2"]').click()
-            }, 500);
-          // }
-      }
-      // for elements hidden by default (cf. css) but useful in bipartite case
-      else {
-        $("#changetype").show();
-        $("#taboppos").show();
-        $("#taboppos").css('display', 'inline-block');
-      }
-
-
       // should prepare the colors/clusters menu once and for all
       // (previously, needed to be called after changeType/changeLevel)
       changeGraphAppearanceByFacets()

twmain/methods.js

@@ -212,11 +212,12 @@ function cancelSelection (fromTagCloud, settings) {
 
     // hide all selection panels
     if(fromTagCloud==false){
-        // £TODO give them all a common class
+        // POSS give them all a common class
         $("#names").html("");
         $("#topPapers").html("");
         $("#topPapers").hide();
-        $("#oppositeNodes").html("");
+        $("#read-sameside-neighs").html("");
+        $("#read-opposite-neighs").html("");
         $("#selection-tabs-contnr").hide();
         $("#reldocs-tabs-wrapper").hide();
         $("#information").html("");
@@ -290,6 +291,8 @@ function deselectNodes(aSystemState){
     for(let i in sels) {
       let nid = sels[i]
 
+      if (!TW.partialGraph.graph.nodes(nid)) continue
+
       // mark as unselected!
       TW.partialGraph.graph.nodes(nid).customAttrs.active = 0
 
@@ -523,9 +526,13 @@ function updateRelatedNodesPanel( sels , same, oppos ) {
     }
 
     if(oppos.length>0) {
-      $("#oppositeNodes").html(alterNodesDIV).readmore({maxHeight:200});
+      $("#read-opposite-neighs").readmore('destroy')
+      $("#read-opposite-neighs").html(alterNodesDIV)
+      $("#read-opposite-neighs").readmore({maxHeight:200});
     }
-    $("#sameNodes").html(sameNodesDIV).readmore({maxHeight:200});
+    $("#read-sameside-neighs").readmore('destroy')
+    $("#read-sameside-neighs").html(sameNodesDIV)
+    $("#read-sameside-neighs").readmore({maxHeight:200});
 
     if (TW.conf.getRelatedDocs) {
       let rdTabCount = 0