grnsight 3.0.0 → 5.1.0

package/web-client/public/js/warnings.js

@@ -0,0 +1,60 @@
+export var displayWarnings = function (warnings) {
+    $("#warningIntro").html("There were " + warnings.length + " warning(s) detected in this file. " +
+      "The graph will be loaded, but may not be displayed accurately. Please note that" +
+      " this file may not export properly if this error remains in the workbook. " +
+      "We recommend you review your file and ensure that it is formatted correctly. " +
+      "To view the details of the warning(s), please click on the \"Warnings List\" below.");
+    var warningsString = "";
+    var NUM_POSSIBLE_WARNINGS = 11;
+    var warningCounts = {};
+    var index = 0;
+    // Fill printed with 0s programatically
+    var printed = [];
+    for (var i = 0; i < NUM_POSSIBLE_WARNINGS; i++) {
+        printed.push(0);
+    }
+
+    var appendWarning = function (warning) {
+        warningsString += warning.errorDescription + "<br><br>";
+    };
+
+    var createWarningsString = function (warningCount, index) {
+        for (var i = 0; i < warningCount.length; i++) {
+            if (warningCount.length <= 3) {
+                appendWarning(warningCount[i]);
+            } else if (printed[index] < 3) {
+                appendWarning(warningCount[i]);
+                printed[index]++;
+            } else {
+                warningsString += "<i> " + (+warningCount.length - 3) +
+                " more warning(s) like this exist. </i> <br><br>";
+                break;
+            }
+        }
+    };
+
+    for (let warning of warnings) {
+        warningCounts[warning.warningCode] = (warningCounts[warning.warningCode]) ?
+            [...warningCounts[warning.warningCode], warning] : [warning];
+    }
+
+    for (let warning in warningCounts) {
+        createWarningsString(warningCounts[warning], index);
+        index++;
+    }
+
+    $("#warningsList").html(warningsString);
+
+    var screenHeight = $(window).height();
+    var MIN_SCREEN_HEIGHT = 600;
+    var BORDER = 425;
+    var setPanel = (screenHeight - BORDER) + "px";
+    var minPanel = (MIN_SCREEN_HEIGHT - BORDER) + "px";
+    if (screenHeight > MIN_SCREEN_HEIGHT) {
+        $("#list-frame").css({height: setPanel});
+    } else {
+        $("#list-frame").css({height: minPanel});
+    }
+
+    $("#warningsModal").modal("show");
+};

package/web-client/public/lib/iframeSizer.contentWindow.min.js

@@ -0,0 +1,10 @@
+/*! iFrame Resizer (iframeSizer.contentWindow.min.js) - v4.1.1 - 2019-04-10
+ *  Desc: Include this file in any page being loaded into an iframe
+ *        to force the iframe to resize to the content size.
+ *  Requires: iframeResizer.min.js on host page.
+ *  Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net
+ *  License: MIT
+ */
+
+!function(l){if("undefined"!=typeof window){var n=!0,o=10,i="",r=0,a="",t=null,u="",c=!1,s={resize:1,click:1},d=128,f=!0,m=1,h="bodyOffset",g=h,p=!0,v="",y={},b=32,e=null,w=!1,T="[iFrameSizer]",E=T.length,O="",S={max:1,min:1,bodyScroll:1,documentElementScroll:1},M="child",I=!0,N=window.parent,A="*",C=0,k=!1,z=null,R=16,x=1,L="scroll",F=L,P=window,D=function(){ue("onMessage function not defined")},j=function(){},q=function(){},H={height:function(){return ue("Custom height calculation function not defined"),document.documentElement.offsetHeight},width:function(){return ue("Custom width calculation function not defined"),document.body.scrollWidth}},W={},B=!1;try{var U=Object.create({},{passive:{get:function(){B=!0}}});window.addEventListener("test",te,U),window.removeEventListener("test",te,U)}catch(e){}var J,V,K,Q,X,Y,G,Z=Date.now||function(){return(new Date).getTime()},$={bodyOffset:function(){return document.body.offsetHeight+be("marginTop")+be("marginBottom")},offset:function(){return $.bodyOffset()},bodyScroll:function(){return document.body.scrollHeight},custom:function(){return H.height()},documentElementOffset:function(){return document.documentElement.offsetHeight},documentElementScroll:function(){return document.documentElement.scrollHeight},max:function(){return Math.max.apply(null,Te($))},min:function(){return Math.min.apply(null,Te($))},grow:function(){return $.max()},lowestElement:function(){return Math.max($.bodyOffset()||$.documentElementOffset(),we("bottom",Oe()))},taggedElement:function(){return Ee("bottom","data-iframe-height")}},_={bodyScroll:function(){return document.body.scrollWidth},bodyOffset:function(){return document.body.offsetWidth},custom:function(){return H.width()},documentElementScroll:function(){return document.documentElement.scrollWidth},documentElementOffset:function(){return document.documentElement.offsetWidth},scroll:function(){return Math.max(_.bodyScroll(),_.documentElementScroll())},max:function(){return Math.max.apply(null,Te(_))},min:function(){return Math.min.apply(null,Te(_))},rightMostElement:function(){return we("right",Oe())},taggedElement:function(){return Ee("right","data-iframe-width")}},ee=(J=Se,X=null,Y=0,G=function(){Y=Z(),X=null,Q=J.apply(V,K),X||(V=K=null)},function(){var e=Z();Y||(Y=e);var t=R-(e-Y);return V=this,K=arguments,t<=0||R<t?(X&&(clearTimeout(X),X=null),Y=e,Q=J.apply(V,K),X||(V=K=null)):X||(X=setTimeout(G,t)),Q});ne(window,"message",ke),ne(window,"readystatechange",ze),ze()}function te(){}function ne(e,t,n,o){e.addEventListener(t,n,!!B&&(o||{}))}function oe(e,t,n){e.removeEventListener(t,n,!1)}function ie(e){return e.charAt(0).toUpperCase()+e.slice(1)}function re(e){return T+"["+O+"] "+e}function ae(e){w&&"object"==typeof window.console&&console.log(re(e))}function ue(e){"object"==typeof window.console&&console.warn(re(e))}function ce(){var e;!function(){function e(e){return"true"===e}var t=v.substr(E).split(":");O=t[0],r=l!==t[1]?Number(t[1]):r,c=l!==t[2]?e(t[2]):c,w=l!==t[3]?e(t[3]):w,b=l!==t[4]?Number(t[4]):b,n=l!==t[6]?e(t[6]):n,a=t[7],g=l!==t[8]?t[8]:g,i=t[9],u=t[10],C=l!==t[11]?Number(t[11]):C,y.enable=l!==t[12]&&e(t[12]),M=l!==t[13]?t[13]:M,F=l!==t[14]?t[14]:F}(),ae("Initialising iFrame ("+location.href+")"),function(){function e(e,t){return"function"==typeof e&&(ae("Setup custom "+t+"CalcMethod"),H[t]=e,e="custom"),e}"iFrameResizer"in window&&Object===window.iFrameResizer.constructor&&(t=window.iFrameResizer,ae("Reading data from page: "+JSON.stringify(t)),Object.keys(t).forEach(se,t),D="onMessage"in t?t.onMessage:D,j="onReady"in t?t.onReady:j,A="targetOrigin"in t?t.targetOrigin:A,g="heightCalculationMethod"in t?t.heightCalculationMethod:g,F="widthCalculationMethod"in t?t.widthCalculationMethod:F,g=e(g,"height"),F=e(F,"width"));var t;ae("TargetOrigin for parent set to: "+A)}(),function(){l===a&&(a=r+"px");de("margin",function(e,t){-1!==t.indexOf("-")&&(ue("Negative CSS value ignored for "+e),t="");return t}("margin",a))}(),de("background",i),de("padding",u),(e=document.createElement("div")).style.clear="both",e.style.display="block",e.style.height="0",document.body.appendChild(e),he(),ge(),document.documentElement.style.height="",document.body.style.height="",ae('HTML & body height set to "auto"'),ae("Enable public methods"),P.parentIFrame={autoResize:function(e){return!0===e&&!1===n?(n=!0,pe()):!1===e&&!0===n&&(n=!1,ve()),n},close:function(){Ce(0,0,"close"),ae("Disable outgoing messages"),I=!1,ae("Remove event listener: Message"),oe(window,"message",ke),!0===n&&ve()},getId:function(){return O},getPageInfo:function(e){"function"==typeof e?(q=e,Ce(0,0,"pageInfo")):(q=function(){},Ce(0,0,"pageInfoStop"))},moveToAnchor:function(e){y.findTarget(e)},reset:function(){Ae("parentIFrame.reset")},scrollTo:function(e,t){Ce(t,e,"scrollTo")},scrollToOffset:function(e,t){Ce(t,e,"scrollToOffset")},sendMessage:function(e,t){Ce(0,0,"message",JSON.stringify(e),t)},setHeightCalculationMethod:function(e){g=e,he()},setWidthCalculationMethod:function(e){F=e,ge()},setTargetOrigin:function(e){ae("Set targetOrigin: "+e),A=e},size:function(e,t){var n=(e||"")+(t?","+t:"");Me("size","parentIFrame.size("+n+")",e,t)}},pe(),y=function(){function r(e){var t=e.getBoundingClientRect(),n={x:window.pageXOffset!==l?window.pageXOffset:document.documentElement.scrollLeft,y:window.pageYOffset!==l?window.pageYOffset:document.documentElement.scrollTop};return{x:parseInt(t.left,10)+parseInt(n.x,10),y:parseInt(t.top,10)+parseInt(n.y,10)}}function n(e){var t,n=e.split("#")[1]||e,o=decodeURIComponent(n),i=document.getElementById(o)||document.getElementsByName(o)[0];l!==i?(t=r(i),ae("Moving to in page link (#"+n+") at x: "+t.x+" y: "+t.y),Ce(t.y,t.x,"scrollToOffset")):(ae("In page link (#"+n+") not found in iFrame, so sending to parent"),Ce(0,0,"inPageLink","#"+n))}function e(){""!==location.hash&&"#"!==location.hash&&n(location.href)}function t(){Array.prototype.forEach.call(document.querySelectorAll('a[href^="#"]'),function(e){function t(e){e.preventDefault(),n(this.getAttribute("href"))}"#"!==e.getAttribute("href")&&ne(e,"click",t)})}y.enable?Array.prototype.forEach&&document.querySelectorAll?(ae("Setting up location.hash handlers"),t(),ne(window,"hashchange",e),setTimeout(e,d)):ue("In page linking not fully supported in this browser! (See README.md for IE8 workaround)"):ae("In page linking not enabled");return{findTarget:n}}(),Me("init","Init message from host page"),j()}function se(e){var t=e.split("Callback");if(2===t.length){var n="on"+t[0].charAt(0).toUpperCase()+t[0].slice(1);this[n]=this[e],delete this[e],ue("Deprecated: '"+e+"' has been renamed '"+n+"'. The old method will be removed in the next major version.")}}function de(e,t){l!==t&&""!==t&&"null"!==t&&ae("Body "+e+' set to "'+(document.body.style[e]=t)+'"')}function le(n){var e={add:function(e){function t(){Me(n.eventName,n.eventType)}W[e]=t,ne(window,e,t,{passive:!0})},remove:function(e){var t=W[e];delete W[e],oe(window,e,t)}};n.eventNames&&Array.prototype.map?(n.eventName=n.eventNames[0],n.eventNames.map(e[n.method])):e[n.method](n.eventName),ae(ie(n.method)+" event listener: "+n.eventType)}function fe(e){le({method:e,eventType:"Animation Start",eventNames:["animationstart","webkitAnimationStart"]}),le({method:e,eventType:"Animation Iteration",eventNames:["animationiteration","webkitAnimationIteration"]}),le({method:e,eventType:"Animation End",eventNames:["animationend","webkitAnimationEnd"]}),le({method:e,eventType:"Input",eventName:"input"}),le({method:e,eventType:"Mouse Up",eventName:"mouseup"}),le({method:e,eventType:"Mouse Down",eventName:"mousedown"}),le({method:e,eventType:"Orientation Change",eventName:"orientationchange"}),le({method:e,eventType:"Print",eventName:["afterprint","beforeprint"]}),le({method:e,eventType:"Ready State Change",eventName:"readystatechange"}),le({method:e,eventType:"Touch Start",eventName:"touchstart"}),le({method:e,eventType:"Touch End",eventName:"touchend"}),le({method:e,eventType:"Touch Cancel",eventName:"touchcancel"}),le({method:e,eventType:"Transition Start",eventNames:["transitionstart","webkitTransitionStart","MSTransitionStart","oTransitionStart","otransitionstart"]}),le({method:e,eventType:"Transition Iteration",eventNames:["transitioniteration","webkitTransitionIteration","MSTransitionIteration","oTransitionIteration","otransitioniteration"]}),le({method:e,eventType:"Transition End",eventNames:["transitionend","webkitTransitionEnd","MSTransitionEnd","oTransitionEnd","otransitionend"]}),"child"===M&&le({method:e,eventType:"IFrame Resized",eventName:"resize"})}function me(e,t,n,o){return t!==e&&(e in n||(ue(e+" is not a valid option for "+o+"CalculationMethod."),e=t),ae(o+' calculation method set to "'+e+'"')),e}function he(){g=me(g,h,$,"height")}function ge(){F=me(F,L,_,"width")}function pe(){var e;!0===n?(fe("add"),e=b<0,window.MutationObserver||window.WebKitMutationObserver?e?ye():t=function(){function t(e){function t(e){!1===e.complete&&(ae("Attach listeners to "+e.src),e.addEventListener("load",i,!1),e.addEventListener("error",r,!1),c.push(e))}"attributes"===e.type&&"src"===e.attributeName?t(e.target):"childList"===e.type&&Array.prototype.forEach.call(e.target.querySelectorAll("img"),t)}function o(e){var t;ae("Remove listeners from "+e.src),e.removeEventListener("load",i,!1),e.removeEventListener("error",r,!1),t=e,c.splice(c.indexOf(t),1)}function n(e,t,n){o(e.target),Me(t,n+": "+e.target.src,l,l)}function i(e){n(e,"imageLoad","Image loaded")}function r(e){n(e,"imageLoadFailed","Image load failed")}function e(e){Me("mutationObserver","mutationObserver: "+e[0].target+" "+e[0].type),e.forEach(t)}var a,u,c=[],s=window.MutationObserver||window.WebKitMutationObserver,d=(a=document.querySelector("body"),u={attributes:!0,attributeOldValue:!1,characterData:!0,characterDataOldValue:!1,childList:!0,subtree:!0},d=new s(e),ae("Create body MutationObserver"),d.observe(a,u),d);return{disconnect:function(){"disconnect"in d&&(ae("Disconnect body MutationObserver"),d.disconnect(),c.forEach(o))}}}():(ae("MutationObserver not supported in this browser!"),ye())):ae("Auto Resize disabled")}function ve(){fe("remove"),null!==t&&t.disconnect(),clearInterval(e)}function ye(){0!==b&&(ae("setInterval: "+b+"ms"),e=setInterval(function(){Me("interval","setInterval: "+b)},Math.abs(b)))}function be(e,t){var n=0;return t=t||document.body,n=null!==(n=document.defaultView.getComputedStyle(t,null))?n[e]:0,parseInt(n,o)}function we(e,t){for(var n,o=t.length,i=0,r=0,a=ie(e),u=Z(),c=0;c<o;c++)r<(i=t[c].getBoundingClientRect()[e]+be("margin"+a,t[c]))&&(r=i);return u=Z()-u,ae("Parsed "+o+" HTML elements"),ae("Element position calculated in "+u+"ms"),R/2<(n=u)&&ae("Event throttle increased to "+(R=2*n)+"ms"),r}function Te(e){return[e.bodyOffset(),e.bodyScroll(),e.documentElementOffset(),e.documentElementScroll()]}function Ee(e,t){var n=document.querySelectorAll("["+t+"]");return 0===n.length&&(ue("No tagged elements ("+t+") found on page"),document.querySelectorAll("body *")),we(e,n)}function Oe(){return document.querySelectorAll("body *")}function Se(e,t,n,o){var i,r;!function(){function e(e,t){return!(Math.abs(e-t)<=C)}return i=l!==n?n:$[g](),r=l!==o?o:_[F](),e(m,i)||c&&e(x,r)}()&&"init"!==e?e in{init:1,interval:1,size:1}||!(g in S||c&&F in S)?e in{interval:1}||ae("No change in size detected"):Ae(t):(Ie(),Ce(m=i,x=r,e))}function Me(e,t,n,o){k&&e in s?ae("Trigger event cancelled: "+e):(e in{reset:1,resetPage:1,init:1}||ae("Trigger event: "+t),"init"===e?Se(e,t,n,o):ee(e,t,n,o))}function Ie(){k||(k=!0,ae("Trigger event lock on")),clearTimeout(z),z=setTimeout(function(){k=!1,ae("Trigger event lock off"),ae("--")},d)}function Ne(e){m=$[g](),x=_[F](),Ce(m,x,e)}function Ae(e){var t=g;g=h,ae("Reset trigger event: "+e),Ie(),Ne("reset"),g=t}function Ce(e,t,n,o,i){var r;!0===I&&(l===i?i=A:ae("Message targetOrigin: "+i),ae("Sending message to host page ("+(r=O+":"+e+":"+t+":"+n+(l!==o?":"+o:""))+")"),N.postMessage(T+r,i))}function ke(t){var n={init:function(){v=t.data,N=t.source,ce(),f=!1,setTimeout(function(){p=!1},d)},reset:function(){p?ae("Page reset ignored by init"):(ae("Page size reset by host page"),Ne("resetPage"))},resize:function(){Me("resizeParent","Parent window requested size check")},moveToAnchor:function(){y.findTarget(i())},inPageLink:function(){this.moveToAnchor()},pageInfo:function(){var e=i();ae("PageInfoFromParent called from parent: "+e),q(JSON.parse(e)),ae(" --")},message:function(){var e=i();ae("onMessage called from parent: "+e),D(JSON.parse(e)),ae(" --")}};function o(){return t.data.split("]")[1].split(":")[0]}function i(){return t.data.substr(t.data.indexOf(":")+1)}function r(){return t.data.split(":")[2]in{true:1,false:1}}function e(){var e=o();e in n?n[e]():("undefined"==typeof module||!module.exports)&&"iFrameResize"in window||"jQuery"in window&&"iFrameResize"in window.jQuery.prototype||r()||ue("Unexpected message ("+t.data+")")}T===(""+t.data).substr(0,E)&&(!1===f?e():r()?n.init():ae('Ignored message of type "'+o()+'". Received before initialization.'))}function ze(){"loading"!==document.readyState&&window.parent.postMessage("[iFrameResizerChild]Ready","*")}}();
+//# sourceMappingURL=iframeResizer.contentWindow.map

package/web-client/public/stylesheets/grnsight.styl

@@ -1,13 +1,15 @@
 //CHANGE ME IF YOU WANT TO CHANGE CSS
-
-body
-  min-width: 1326px
-
 p
   margin: 0
 
 .zoomLabel
   font-size: 9px
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
 
 .submission
   margin-left: 10px
@@ -20,6 +22,9 @@ p
   top: 53px
   border:2px solid #9A9A9A
   position: absolute
+  stroke: #fff
+  stroke-width: 0.5px
+  transition: opacity 0.25s
 
 .scale-and-scroll
   position: absolute
@@ -40,6 +45,12 @@ p
 
 .scrollBtn
   border: 1px solid #AAA
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
 
 .movementArrow
   font-weight: bolder;
@@ -143,7 +154,6 @@ nav.navbar.navbar-default
   background-color: #dfebe5
 
 #undoResetButton
-  width: 225px
   margin-top: 5px
 
 #mouseOver
@@ -151,7 +161,48 @@ nav.navbar.navbar-default
   text-align: center
 
 .btnSidebar
-  width: 225px
+  width: 100%
+
+.buttonPairContainer
+  display: flex
+  justify-content: space-between
+  margin-top: 0px
+
+.buttonPairContainer > input[type=button], .buttonPairContainer > button
+  padding: 6px 10px
+  width: calc(50% - 2px)
+
+.buttonPairContainer > input[type=button]:last-child, .buttonPairContainer > button:last-child
+  margin-left: 5px
+
+.panel-body
+  padding: 0px 10px 10px
+
+.forceParameterContainer
+  display: flex
+  flex-direction: column
+  margin-bottom: 5px
+
+.labelWithValueContainer
+  align-items: baseline
+  display: flex
+  justify-content: flex-start
+  margin-top: 10px
+
+.edgeControl
+  align-items: center
+  display: flex
+  justify-content: flex-start
+
+.edgeControl > input[type=radio], .edgeControl > input[type=checkbox]
+  margin: 0
+
+.edgeControl > label
+  font-size: 13px
+  margin: 5px
+
+#grayThresholdInput
+  margin-bottom: 5px
 
 #warningsModal #accordion
   margin-bottom: 0
@@ -200,8 +251,13 @@ nav.navbar.navbar-default
     -moz-border-radius:6px 0 6px 6px
     border-radius:6px 0 6px 6px
 
-.panel-body
-  overflow: scroll;
+.dropdown a.with-input
+    display:flex
+    align-items:center
+    user-select:none
+
+.dropdown a.with-input>*:last-child
+    margin-left:auto
 
 // Graph statistics styling is due to absolute position and size of grnsight-container
 .graph-statistics-container
@@ -215,7 +271,7 @@ text.weight
     font-weight: 900
     fill: black
     opacity: 0.0
-    stroke: white
+    stroke: #fff
     stroke-width: 0.5px
     transition: opacity 0.25s
     visibility: hidden
@@ -228,23 +284,81 @@ text.weight.visible
   line-height: 3px;
   font-size: 13px;
 
+.sidebarPanelHeader
+  margin: 10px 10px 10px
+  font-weight: bold
+  font-size: 18px
+
+.sidebarPanelHeaderSpecies
+  border-color: #ddd
+  font-weight: bold
+  font-size: 12px
+  width: 100%
+  
+.sidebarPanelHeaderID
+  margin: 0px 5px 5px
+  font-weight: bold
+  font-size: 12px
+  width: 100%
+
 .sideHeader
-  line-height: 5px;
-  font-weight: bold;
-  font-size: 13px;
-  margin-bottom: 10px;
-  margin-top: 10px;
+    font-weight: bold
+    font-size: 13px
+    margin-bottom: 4px
+    margin-top: 6px
+
+.centered-sideHeader
+    font-weight: normal
+    font-size: 13px
+    margin-bottom: 4px
+    margin-top: 6px
+    text-align: center
+
+.nodeColoringSidebarBody
+  margin-top: 6px
+
+.node-coloring select
+    width: 100%
+
+.node-coloring.disabled
+    color: #AAA
+
+.data-sidebar select
+    width: 100%
+
+.data-sidebar.disabled
+.species-display select
+    width: 100%
+
+.speciesIdentifiedDropdown
+    font-weight: normal
+
+.currentSpecies
+    font-weight: bold
+
+label.sideLabel
+  font-weight: normal;
 
 path.mousezone
     opacity: 0.0
 
+.logFoldChangeControlContainer
+  display: flex
+  justify-content: space-between
+  margin-top: 0px
+
+.logFoldChangeControlContainer > button:last-child
+  margin-left: 5px
+  padding-bottom: 0
+  padding-top: 0
+
 .logFoldChangeMaxValue
-    width: 50px;
-    margin-bottom: 8px;
+  flex-grow: 1
+  max-width: 50%
 
 .normalization-form
-    width: 80px;
-    margin-bottom: 8px;
+  width: 100%
+  margin-bottom: 5px
 
 .cursorGrab
     cursor: -webkit-grab;
@@ -258,19 +372,55 @@ path.mousezone
     display: inline-block;
     width: 100px;
 
-#normalization-button
-    margin-right: 5px;
-
 #grayLabel
     margin-top: 10px;
 
 #normLabel
-    margin-bottom: 10px;
-    display: inline-block;
+  margin-bottom: 5px
+  margin-top: 10px
 
-#logFoldChangeMaxValueRange
-    margin-bottom: 10px;
-    display: inline-block;
+#gray-edge-threshold-menu
+    margin-right:0.5ex
 
 .menu-subheader
     padding-left: 12px;
+
+#force-graph input[type=range]
+    box-shadow: none
+    margin-top: -12px
+
+.minimum-zoom-display
+    margin-right: 0.25rem
+
+.maximum-zoom-display
+    margin-left: 0.25rem
+
+.edge-weight-sidebar.disabled
+    color: #AAA
+
+#activateExpressionDBLabel
+    text-align: center
+
+#expressionDBcheckbox
+    text-align: center
+
+.expression-db-loader
+    border: 12px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 10px solid #aeaeae;
+    width: 50px;
+    height: 50px;
+    animation: spin 2s linear infinite
+    margin: auto
+    display: none
+
+@keyframes spin 
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+
+.expression-db-loader-text
+    font-weight: bolder
+    text-align: center
+    margin-top: 15 px
+    display: none
+

package/web-client/public/stylesheets/print.styl

@@ -6,7 +6,7 @@ nav
   margin: 0
   padding: 0
 
-.grnsight-container 
+.grnsight-container
   left: 0px
   top: 0px
   right: 0px
@@ -15,10 +15,16 @@ nav
   position: static
   float: left
   margin: 0
-  width: 100%
-  height: 100%
+  max-width: 100%
+  max-height: 100%
+
+.scale-and-scroll
+  visibility: hidden
+
+.sidebar
+  visibility: hidden
 
 .sliders
   display: none
   margin-left: 0px
-  width: 0px
+  width: 0px

package/web-client/views/{graph.jade → graph.pug}

@@ -5,8 +5,6 @@ html
     link(href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css", rel="stylesheet")
     script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
     script(src='//netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js')
-    script(src='http://d3js.org/d3.v4.min.js')
+    script(src='//d3js.org/d3.v4.min.js')
   body
     script(src='/js/graph.js')
-
-    

package/web-client/views/info.pug

@@ -0,0 +1,215 @@
+html
+  head
+    title Loading...
+    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css', integrity='sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M', crossorigin='anonymous')
+    link(rel='stylesheet', href='gene/info.css')
+  body
+    input#service-root(type='hidden', value=`${serviceRoot}`)
+    // The following code is for the error modal
+    #errorModal.modal.fade(tab-index='-1', role='dialog', aria-labelledby='mySmallModalLabel', aria-hidden='true')
+      .modal-dialog
+        .modal-content
+          .modal-header
+            h4.modal-title Error
+            button.close(type='button', data-dismiss='modal', aria-label='Close')
+              span(aria-hidden='true')  x
+          .modal-body
+            p#error1
+            p#error2
+            p#error3
+          .modal-footer
+            input.btn.btn-default(type='button', data-dismiss='modal', value='Close')
+    // End error modal
+    #mainContent
+      #pageContent
+        #pageHead.row
+          .col
+            h1#gene-name
+          .col
+            em
+              h2.text-right#gene-species.uniProtSpecies Page is loading...
+        #navigationButtons.row
+          .col
+            button.btn.btn-green(data-toggle='collapse', data-target='#generalInfo') General Information
+            // button.btn.btn-purple(data-toggle='collapse', data-target='#dnaSequence') DNA Sequence
+            button.btn.btn-purple(data-toggle='collapse', data-target='#proteinInfo') Protein Information
+            button.btn.btn-brown(data-toggle='collapse', data-target='#regulation') Regulation
+            //button.btn.btn-turquoise(data-toggle='collapse', data-target='#interaction') Interaction
+            button.btn.btn-turquoise(data-toggle='collapse', data-target='#geneOntology') Gene Ontology
+            button.btn.btn-violet(data-toggle='collapse', data-target='#sources') Sources
+        #accordion
+          //
+            <div class="card">
+            <div class="card-header" id="dnaSequenceHeading" role="tab">
+            <h5 class="mb-0"><a class="purple" data-toggle="collapse" href="#dnaSequence" aria-expanded="true" aria-controls="collapseOne">DNA Sequence</a></h5>
+            </div>
+            <div class="collapse" id="dnaSequence">
+            <div class="card-block">
+            <p class="ensemblSource dnaSequence codeSequence"></p>
+            </div>
+            </div>
+            </div>
+          .card
+            #generalInfoHeading.card-header(role='tab')
+              h5.mb-0
+                a.green.accordionLink(data-toggle='collapse', href='#generalInfo', aria-expanded='true', aria-controls='collapseOne') General Information
+            #generalInfo.collapse(role='tabpanel', aria-labelledby='headingThree')
+              .card-block
+                dl.row
+                  dt.col-sm-3 SGD ID:
+                  dd.col-sm-9
+                    a.sgd-link.gene-link.sgdSource(data-toggle='tooltip', data-placement='top', title='Saccharomyces Genome Database')
+                  dt.col-sm-3 NCBI Gene ID:
+                  dd.col-sm-9
+                    a.ncbi-link.gene-link.ncbiSource(data-toggle='tooltip', data-placement='top', title='National Center for Biotechnology Information')
+                  dt.col-sm-3 Ensembl ID:
+                  dd.col-sm-9
+                    a.ensembl-link.gene-link.ensemblSource(data-toggle='tooltip', data-placement='top', title='Ensembl')
+                  dt.col-sm-3 Uniprot ID:
+                  dd.col-sm-9
+                    a.uniprot-link.gene-link.uniprotSource(data-toggle='tooltip', data-placement='top', title='UniProt')
+                  dt.col-sm-3 JASPAR ID:
+                  dd.col-sm-9
+                    a.jaspar-link.gene-link.jasparSource(data-toggle='tooltip', data-placement='top', title='Jaspar')
+                  dt.col-sm-3 Description:
+                  dd.geneDescription.col-sm-9.sgdSource
+                  dt.col-sm-3 Species:
+                  dd.uniProtSpecies.col-sm-9.uniprotSource
+                  dt.col-sm-3 Locus Tag:
+                  dd.ncbiLocusTag.col-sm-9.ncbiSource
+                  dt.col-sm-3 JASPAR Family:
+                  dd.jasparFamily.col-sm-9.jasparSource
+                  dt.col-sm-3 JASPAR Class:
+                  dd.jasparClass.col-sm-9.jasparSource
+                  dt.col-sm-3 Chromosome Sequence:
+                  dd.chromosomeSequence.ncbiSource.col-sm-9(src='')
+          .card
+            #proteinInfoHeading.card-header
+              h5.mb-0
+                a.purple.accordionLink(data-toggle='collapse', href='#proteinInfo') Protein Information
+            #proteinInfo.collapse
+              .card-block
+                dl.row
+                  dt.col-sm-3 Protein:
+                  dd.col-sm-9.proteinType.uniprotSource
+                  dt.col-sm-3 Protein Sequence:
+                  dd.col-sm-9.uniprotSource.proteinSequence.codeSequence
+          .card
+            #regulationHeading.card-header
+              h5.mb-0
+                a.brown.accordionLink(data-toggle='collapse', href='#regulation', aria-expanded='true', aria-controls='collapseOne') Regulation
+            #regulation.collapse
+              .card-block
+                dl.row.dl-horizontal
+                  dt.col-sm-3  Regulators:
+                  dd.regulators.col-sm-9
+                  dt.col-sm-3  Targets:
+                  dd.targets.col-sm-9
+                  dt.col-sm-3  Sequence Logo:
+                  dd.col-sm-9.jasparSource.logo
+                    img.sequenceLogo.sequenceLogoImage(src='')
+                  dt.col-sm-3  Frequency Matrix:
+                  dd.col-sm-9
+                    table.frequencyMatrix.table.table-dark.table-striped
+                      thead
+                        tr.frequencyOfA.jasparSource
+                          th A:
+                      tbody
+                        tr.frequencyOfC.jasparSource
+                          th C:
+                        tr.frequencyOfG.jasparSource
+                          th G:
+                        tr.frequencyOfT.jasparSource
+                          th T:
+          //
+            <div class="card">
+            <div class="card-header" id="interactionHeading">
+            <h5 class="mb-0"><a class="purple" data-toggle="collapse" href="#interaction" aria-expanded="true" aria-controls="collapseOne">Interaction</a></h5>
+            </div>
+            <div class="collapse" id="interaction">
+            <div class="card-block">
+            <div class="physicalInteractions">
+            <h3> Physical Interactions</h3>
+            <dl class="row">
+            <dt class="col-sm-3">Affinity Capture MS:</dt>
+            <dd class="affinityCaptureMS col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Affinity Capture RNA:</dt>
+            <dd class="affinityCaptureRNA col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Affinity Capture Western:</dt>
+            <dd class="affinityCaptureWestern col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">BioChemical Activity:</dt>
+            <dd class="biochemicalActivity col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Colocalization:</dt>
+            <dd class="colocalization col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Reconstituted Complex:</dt>
+            <dd class="reconstitutedComplex col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Two Hybrid</dt>
+            <dd class="twoHybrid col-sm-9 sgdSource"></dd>
+            </dl>
+            </div>
+            <div class="geneticInteractions">
+            <h3> Genetic Interactions</h3>
+            <dl class="row table table-dark">
+            <dt class="col-sm-3">Dosage Rescue:</dt>
+            <dd class="dosageRescue col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Negative Genetic:</dt>
+            <dd class="negativeGenetic col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Phenotypic Enhancement:</dt>
+            <dd class="phenotypicEnhancement col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Phenotypic Suppression:</dt>
+            <dd class="phenotypicSuppression col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Synthetic Growth Defect:</dt>
+            <dd class="syntheticGrowthDefect col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Synthetic Haploin Sufficiency:</dt>
+            <dd class="syntheticHaploinsufficiency col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Synthetic Lethality:</dt>
+            <dd class="syntheticLethality col-sm-9 sgdSource"></dd>
+            <dt class="col-sm-3">Synthetic Rescue:</dt>
+            <dd class="syntheticRescue col-sm-9 sgdSource"></dd>
+            </dl>
+            </div>
+            <dl class="row">
+            <h5 class="col-sm-3">Total Interactions:</h5>
+            <dd class="totalInteractions sgdSource"></dd>
+            </dl>
+            </div>
+            </div>
+            </div>
+          .card
+            #geneOntologyHeading.card-header
+              h5.mb-0
+                a.turquoise.accordionLink(data-toggle='collapse', href='#geneOntology', aria-expanded='true', aria-controls='collapseOne') Gene Ontology
+            #geneOntology.collapse
+              .card-block
+                dl.row
+                  dt.col-sm-3 Gene Summary:
+                  dd.geneSummary.col-sm-9.sgdSource
+                  dt.col-sm-3 Molecular Function:
+                  dd.molecularFunction.col-sm-9
+                  dt.col-sm-3 Biological Process:
+                  dd.biologicalProcess.col-sm-9
+                  dt.col-sm-3 Cellular Component:
+                  dd.cellularComponent.col-sm-9
+          .card
+            #sourcesHeading.card-header
+              h5.mb-0
+                a.violet.accordionLink(data-toggle='collapse', href='#sources', aria-expanded='true', aria-controls='collapseOne') Sources
+            #sources.collapse
+              .card-block
+                dl.row
+                  a#sgdSource.col.sgd-link.database-link
+                dl.row
+                  a#uniprotSource.col.uniprot-link.database-link
+                dl.row
+                  a#ensemblSource.col.ensembl-link.database-link
+                dl.row
+                  a#ncbiSource.col.ncbi-link.database-link
+                dl.row
+                  a#jasparSource.col.jaspar-link.database-link
+        iframe#iframeFooter(src='https://dondi.github.io/GRNsight/onlyfooter.html', scrolling='no')
+
+    script(src='https://code.jquery.com/jquery-3.2.1.min.js', integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=', crossorigin='anonymous')
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js', integrity='sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4', crossorigin='anonymous')
+    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js', integrity='sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1', crossorigin='anonymous')
+    script(src='gene/api.js')
+    script(src='gene/info.js')