Merge pull request #720 from umut-er/unstable

Map Type Descriptors Under Tabs

app/css/chise.css

@@ -577,7 +577,7 @@ menu:not([title]):before{
 
 .selected-mode-sustainable, .toggle-mode-sustainable {
   background-color: #b9b9b9;
-  *background-color: #ffffff;
+  background-color: #ffffff;
   background-image: -moz-linear-gradient(top, #ffffff, #b9b9b9);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#b9b9b9));
   background-image: -webkit-linear-gradient(top, #ffffff, #b9b9b9);
@@ -716,33 +716,42 @@ hr.inspector-divider {
     margin: 1px;
 }
 
-.chise-tab a {
-    color: #555;
-    padding-left: 5px !important;
-    padding-right: 5px !important;
-    border-radius: 8px 8px 0 0 !important;
+.chise-network-tab {
+    margin-right: 2px;
+    border-radius: 0 0 8px 8px !important;
+    background: transparent !important;
+    border-top: 0px !important;
+}
+
+.map-tab-type {
+    position: absolute;
+    background-color: #555;
+    margin-top: -2px;
+    padding-left: 4px;
+    padding-right: 4px;
+    border: 0px solid #555;
+    border-radius: 5px;
+    right: 3px;
+    font-size: 9px;
+    color: white;
 }
 
 .chise-network-tab a {
-    border-radius: 0 0 8px 8px !important;
+    color: #555;
+    padding-top: 10px !important;
+    padding-bottom: 11px !important;
+    padding-left: 5px !important;
+    padding-right: 5px !important;
     font-size: 11px;
     width: 86px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     background: transparent !important;
-    border-top: 0px !important;
-}
-
-/*.chise-tab.active {
-    font-weight: bold;
-}*/
-
-.chise-tab.active a {
-    background: #eaeaea !important;
+    border: 0px !important;
 }
 
-.chise-network-tab.active a {
+.chise-network-tab.active, .chise-network-tab.active a {
     background: white !important;
 }
 
@@ -752,14 +761,10 @@ hr.inspector-divider {
 }
 
 .closeTab {
-    margin-top: -10px !important;
+    margin-top: -10px;
 }
 
-.chise-tab:hover a {
-    background: #eaeaea !important;
-}
-
-.chise-network-tab:hover a {
+.chise-network-tab:hover, .chise-network-tab:hover a{
     background: white !important;
 }
 
@@ -998,4 +1003,4 @@ img#template-reversible-output-add-button:hover {
 
 .small-right-margin {
     margin-right: 10px;
-}
+}

app/js/app-menu.js

@@ -856,6 +856,11 @@ module.exports = function() {
 
       // reset current general properties at the scratch pad of cy
       appUtilities.setScratch(cy, 'currentGeneralProperties', currentGeneralProperties);
+
+      var activeChiseId = appUtilities.networkIdsStack[appUtilities.networkIdsStack.length-1];
+      $('#' + appUtilities.getMapTypeDivId(activeChiseId)).text(appUtilities.getDisplayMapName(chiseInstance.getMapType()));
+      console.log("Finished loading " + appUtilities.getDisplayMapName(chiseInstance.getMapType()));
+
       cy.fit( cy.elements(":visible"), 20 );
     });
 
@@ -937,7 +942,7 @@ module.exports = function() {
 
           // use active cy instance
           var cy = appUtilities.getActiveCy();
-
+          
           if(cy.elements().length != 0) {
             promptConfirmationView.render(function(){loadSample(selectorToSampleFileName[selector])});
           }

app/js/app-utilities.js

@@ -202,6 +202,10 @@ appUtilities.getNetworkTabId = function (networkId) {
   return 'sbgn-network-tab-' + networkId;
 };
 
+appUtilities.getMapTypeDivId = function(networkId) {
+  return 'map-type-tab-' + networkId;
+}
+
 // get network id by given network key (would be tab or panel id or selector or even the network id itself)
 // that is basically the remaining part of the string after the last occurance of '-'
 appUtilities.getNetworkId = function (networkKey) {
@@ -339,6 +343,16 @@ appUtilities.adjustVisibilityOfNetworkTabs = function () {
 
 };
 
+// returns the display name of map types to align with issue #715.
+// see https://github.com/iVis-at-Bilkent/newt/issues/715
+appUtilities.getDisplayMapName = function(mapName) {
+  if(mapName == "HybridSbgn")
+    return "PD+AF";
+  else if(mapName == "HybridAny")
+    return "ALL";
+  return mapName;
+}
+
 // creates a new network and returns the new chise.js instance that is created for this network
 appUtilities.createNewNetwork = function (networkName, networkDescription) {
 
@@ -347,6 +361,9 @@ appUtilities.createNewNetwork = function (networkName, networkDescription) {
 
   // id of the tab for the new network
   var networkTabId = appUtilities.getNetworkTabId(appUtilities.nextNetworkId);
+
+  // id of the div of the map type discriptor
+  var mapTypeDivId = appUtilities.getMapTypeDivId(appUtilities.nextNetworkId);
 
   var mapName;
   if(networkName)
@@ -469,6 +486,11 @@ appUtilities.createNewNetwork = function (networkName, networkDescription) {
 
   // adjust the visibility of network tabs
   appUtilities.adjustVisibilityOfNetworkTabs();
+
+  // update the map type descriptor
+  var mapType = appUtilities.getActiveChiseInstance().getMapType();
+  $('#' + mapTypeDivId).text(appUtilities.getDisplayMapName(mapType));
+
   // return the new instance
   return newInst;
 };
@@ -589,9 +611,10 @@ appUtilities.createPhysicalNetworkComponents = function (panelId, tabId, tabDesc
   // the container that lists the network tabs
   var tabsList = $('#network-tabs-list');
 
-  var newTabStr = '<li id="' + tabId + '" class="chise-tab chise-network-tab">\n\
+  var newTabStr = '<li id="' + tabId + '" class="chise-network-tab">\n\
                   <a data-toggle="tab" href="#' + panelId + '">\n\
-                  <button class="close closeTab '+tabId+'closeTab" type="button" >&times</button>' + tabDesc + '</a></li>';
+                  <button class="close closeTab '+tabId+'closeTab" type="button" >&times</button>' + tabDesc + '\n\
+                  <div id="map-type-tab-' + tabId.substring(17) + '" class="map-tab-type"></div></a></li>';
 
   $('ul').on('click', 'button.' + tabId +'closeTab', function() {
     var networkId = tabId.substring(17);

app/js/backbone-views.js

@@ -726,6 +726,8 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({
 
       var callback = function () {
         $("#map-type").val(chiseInstance.getMapType());
+        var activeChiseId = appUtilities.networkIdsStack[appUtilities.networkIdsStack.length-1];
+        $('#' + appUtilities.getMapTypeDivId(activeChiseId)).text(appUtilities.getDisplayMapName(chiseInstance.getMapType()));
       };
       // use active cy instance
       var cy = appUtilities.getActiveCy();