grnsight 4.0.0 → 6.0.0

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
@@ -43,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;
@@ -96,18 +104,34 @@ form label, form span
 .glyphicon
   min-width: 22px
 
+.glyphicon-searchbar
+  margin-left: -22px
+  
 .dropdown-menu > li > a.upload
-  padding-left: 0
+  padding-top: 7px
+  padding-bottom: 5px
+  padding-left: 10px
   padding-right: 0
 
+.dropdown-menu > li > a.demo
+  padding-top: 7px
+  padding-left: 30px
+  padding-bottom: 5px
+
+.dropdown-menu > li > a.create-network
+  padding-top: 7px
+  padding-bottom: 0px
+  padding-left: 30px
+  margin-bottom: -5px
+
 .dropdown-menu > li > a.upload > label
   font-weight: normal
   margin-bottom: 0
-  padding-left: 20px
+  padding-left: 22px
   padding-right: 20px
   width: 100%
 
-.dropdown-menu > li > a.upload > input[type=file]
+.dropdown-menu > li > a.upload > input[type=file], #upload-network
   display: none
 
 #fileName
@@ -131,6 +155,9 @@ nav.navbar.navbar-default
   background-color: #16693F
   color: #FFFFFF
 
+.open
+  font-weight: normal
+
 .navbar-right.graph-metadata-container > li
   margin-top: 4px
   margin-bottom: 4px
@@ -146,7 +173,6 @@ nav.navbar.navbar-default
   background-color: #dfebe5
 
 #undoResetButton
-  width: 225px
   margin-top: 5px
 
 #mouseOver
@@ -154,7 +180,64 @@ nav.navbar.navbar-default
   text-align: center
 
 .btnSidebar
-  width: 225px
+  width: 100%
+
+.buttonPairContainer
+  display: flex
+  justify-content: space-between
+  margin-top: 0px
+
+.panelDropdownContainer
+  margin-top 0px
+  padding: 0px 10px 10px 0px
+
+.panelGeneSearchBar
+  display: flex
+  width: 102.5%
+
+.createNetworkContainer
+  padding: 10px 0px
+  display: flex
+#panel-gene-search-bar
+  width: calc(100% + 22px)
+#createNetworkButton
+  width: 100%
+
+.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
@@ -203,8 +286,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
@@ -231,23 +319,85 @@ 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
+
+.panelDropdown
+    width: 100%
+    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;
@@ -261,19 +411,164 @@ 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;
+.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
+
+#Saccharomyces-cerevisiae
+  color: #AAA
+  margin-left: 30px
+
+.create-network-label
+  font-weight: normal
+
+.sub-divider
+  border-top: 1px dotted #bbb
+  width:95%
+  margin: auto
+
+.network-source-section
+  margin-left: 12px
+
+.long-sub-divider
+  border-top: 1px dotted #bbb
+  margin: 0px 0px 10px
+
+.network-button-container
+  border:1px solid #CCC
+  border-radius: 5px
+  height: 45px
+
+  justify-content: center
+  display: flex
+
+.network-button
+  width:100%
+  margin:5px 0px
+  height:34px
+
+
+#upload-network
+  border: 2px solid #6c5ce7
+  padding: .2em .4em
+  border-radius: .2em
+  background-color: #a29bfe
+  transition: 1s
+
+
+#upload-network:hover 
+  background-color: #81ecec
+  border: 2px solid #00cec9
+
+
+
+.sidebar-glyphicon
+  margin-right: 0px
+
+.network-button.disabled
+  color: #AAA
+
+.network-dropdown
+  width: 50%
+
+#enter-search
+  margin-left: 0px
+  height: 100%
+  padding: 0
+  border-color:#aeaeae
+
+#network-search-bar
+  margin-right: 0px
+  height: 100%
+  border-radius:5px
+  border: 1px solid #aeaeae
+
+.custom-network-gene
+  border:1px solid #CCC
+  border-radius: 5px
+  height: 50px
+  padding: auto
+  display: flex
+  justify-content: center
+  align-items:center
+  flex-direction: column
+  width: 100%
+  margin:5px
+
+#custom-network-genes-container
+  display: grid
+  column-gap: 20px
+  row-gap: 5px
+  grid-template-columns: 1fr 1fr 1fr
+  padding: 10px 5px
+
+#submit-network
+  margin-top: 20px
+.custom-network-gene-display-id
+  font-size: 14px
+
+.custom-network-gene-id
+  color: #BBB
+  font-size: 12px
+
+.network-type
+  font-size: 12px
+  display: inline-block
+  font-style: italic
+
+.network-source-section-title
+  font-weight: bold
+  font-size: 14px
+
+.hidden-button
+  display:none

package/web-client/views/components/demo.pug

@@ -0,0 +1,10 @@
+ul(class='dropdown-menu' role='menu')
+  li
+    a(href='#' class='unweighted') Demo #1: Unweighted GRN (15 genes, 28 edges, Dahlquist Lab unpublished data)
+  li
+    a(href='#' class='weighted') Demo #2: Weighted GRN (15 genes, 28 edges, Dahlquist Lab unpublished data)
+  li
+    a(href='#' class='schadeInput') Demo #3: Unweighted GRN (21 genes, 31 edges)
+  li
+    a(href='#' class='schadeOutput') Demo #4: Weighted GRN (21 genes, 31 edges, Schade et al. 2004 data)
+           

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

@@ -4,7 +4,7 @@ html
     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}')
+    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
@@ -20,10 +20,6 @@ html
           .modal-footer
             input.btn.btn-default(type='button', data-dismiss='modal', value='Close')
     // End error modal
-    #header
-      iframe#iframeHeader(src='https://dondi.github.io/GRNsight/onlyheader.html', scrolling='no')
-    #navBar
-      iframe#iframeMenu(src='https://dondi.github.io/GRNsight/onlysidebar.html', scrolling='no')
     #mainContent
       #pageContent
         #pageHead.row