update visualization layout and version

Author: ooo-abm

js/lib/cytoscape.css

@@ -1,7 +1,7 @@
 .cytoscape-widget {
-    height: 500px;
+    height: 700px;
     background: #FFFFFF;
     overflow: hidden;
     flex: 1;
-    top: 70px;
+    top: 5.48em
 }

js/lib/cytoscape.js

@@ -34,7 +34,7 @@ require('./elements_style.css');
 
 const DEF_BG = '#FFFFFF';
 const DEF_LAYOUT = 'cose';
-const DEF_HEIGHT = '500px';
+const DEF_HEIGHT = '700px';
 
 const DEF_STYLE = [{
     selector: 'node',
@@ -302,14 +302,13 @@ let CytoscapeView = widgets.DOMWidgetView.extend({
             .css({'font-size': '16px', 'margin-top': '10px'});
 
         that.$pyvipr = $("<h1>PyViPR</h1>")
-            .css({'font-size': '1.3em', 'margin-top': '10px', 'color': 'gray',
+            .css({'font-size': '1.3em', 'color': 'gray', 'margin': '0',
                 'font-family': "\'Lucida console\', Lucida, monospace", 'font-weight': 'bold'});
 
         that.$title = $("<div id='title'></div>")
             .append(that.$model_title);
 
         that.$pyviprdiv = $("<div id='pyviprid'></div>")
-            .css({'position': 'absolute', 'left': '0.6em', 'bottom': '2em'})
             .append(that.$pyvipr);
 
         // Searchbox elements
@@ -318,7 +317,8 @@ let CytoscapeView = widgets.DOMWidgetView.extend({
         that.$search_wrapper = $("<div id='searchDiv'></div>")
             .append(that.$search);
 
-        that.$info = $("<div id='info'></div>");
+        that.$info = $("<div id='info'></div>")
+            .css({'color': 'black'})
 
         // Fit button to fit network to cell space
         that.$fitButton = $("<button id='fitbuttonid'><i class=\"fa fa-arrows-h\"></i></button>");
@@ -328,10 +328,11 @@ let CytoscapeView = widgets.DOMWidgetView.extend({
             .css({
                 "width": "100%",
                 "height": "5em",
-                "bottom": "500px",
-                "position": "relative",
                 "border": "medium solid grey",
-                "border-radius": "10px"
+                "border-radius": "10px",
+                "background-color": "#FFFFFF",
+                "position": "relative",
+                "bottom": "700px"
             })
             .append(that.$downloadButton)
             .append(that.$fitButton)
@@ -431,7 +432,8 @@ let CytoscapeView = widgets.DOMWidgetView.extend({
                     "width": "100%",
                     "height": "50px",
                     "bottom": "0px",
-                    "position": "relative"
+                    "position": "relative",
+                    "background-color": "white"
                 })
                 .append(that.$playButton)
                 .append(that.$slider)
@@ -635,18 +637,14 @@ let CytoscapeView = widgets.DOMWidgetView.extend({
             // https://github.com/atomiks/tippyjs/issues/661
             let dummyDomEle = document.createElement('div');
             node.tippy = tippy( dummyDomEle, {
-                onCreate: function(instance){ // mandatory
-                    // patch the tippy's popper reference so positioning works
-                    // https://atomiks.github.io/tippyjs/misc/#custom-position
-                    instance.popperInstance.reference = ref;
-                },
+                getReferenceClientRect: ref.getBoundingClientRect,
                 lazy: false, // mandatory
                 trigger: 'manual', // mandatory
                 // dom element inside the tippy:
                 content: function(){ // function can be better for performance
-                    let div = document.createElement('div');
-                    div.innerHTML = text;
-                    return div;
+                    let content = document.createElement('div');
+                    content.innerHTML = text;
+                    return content;
                 },
                 // your own preferences:
                 arrow: true,
@@ -910,7 +908,7 @@ let CytoscapeView = widgets.DOMWidgetView.extend({
             that.groupSelected = $("<button id='groupSel'>Group</button>")
                 .css({
                     'position': 'absolute',
-                    'right': '9.4em',
+                    'right': '11em',
                     'top': '0',
                     'zIndex': '999',
                     'height': '1.8em',
@@ -987,7 +985,8 @@ let CytoscapeView = widgets.DOMWidgetView.extend({
 
                 that.$popup = $("<div class='fragment'>" +
                     "</div>")
-                    .css({'border': '1px solid #ccc','background': '#FF7F7F'})
+                    .css({'border': '1px solid #ccc','background': '#FF7F7F',
+                          'position': 'relative', 'bottom':'0', 'z-index': '999'})
                     .append(that.$close)
                     .append(that.$message)
                     .appendTo(that.el.parentElement);

js/lib/elements_style.css

@@ -4,7 +4,7 @@
     margin: 0.5em;
     top: 0;
     z-index: 9999;
-    right: 6.4em;
+    right: 6.8em;
     height: 1.8em;
 }
 
@@ -44,6 +44,7 @@
     margin: 0;
     padding: 0;
     cursor: pointer;
+    color: black;
 }
 
 .tt-suggestion + .tt-suggestion {
@@ -112,6 +113,14 @@
     width: 11em;
 }
 
+#pyviprid {
+    position: absolute;
+    left: 0;
+    top: 0em;
+    z-index: 9999;
+    width: 11em;
+}
+
 #info {
     position: absolute;
     left: 0;

js/package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "pyvipr",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "Dynamic and static visualizations of systems biology models written in SBML, BNGL, and PySB",
     "author": "Oscar Ortega",
     "main": "lib/index.js",

js/package.json

@@ -4,4 +4,4 @@
 
 __version__ = '%s.%s.%s%s'%(version_info[0], version_info[1], version_info[2],
   '' if version_info[3]=='final' else _specifier_[version_info[3]]+str(version_info[4]))
-__frontend_version__ = '^1.0.2'
+__frontend_version__ = '^1.0.4'