Merge unstable to master

.github/workflows/main.yml

@@ -0,0 +1,25 @@
+name: Chrome headless
+
+on: push
+
+jobs:
+  chrome-headless:
+    runs-on: ubuntu-latest
+    # https://github.com/cypress-io/cypress-docker-images
+    container: cypress/browsers:node12.18.3-chrome87-ff82
+    environment: test0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Headless Chrome
+        uses: cypress-io/github-action@v2
+        timeout-minutes: 10
+        with:
+          build: npm run release-build
+          start: node server.js
+          browser: chrome
+          headless: true
+          record: true
+        env:
+          # pass the Dashboard record key as an environment variable
+          CYPRESS_RECORD_KEY: ${{ secrets.dashboardRecordKey }}

.gitignore

@@ -2,4 +2,6 @@
 
 node_modules/
 
-app/bundle.js
+package-lock.json
+
+app/bundle.js

README.md

@@ -1,19 +1,21 @@
 # Newt: A Sample Application for ChiSE
 
-Newt is a sample application for the web based library named [ChiSE](https://github.com/iVis-at-Bilkent/chise.js) developed to visualize and edit the pathway models represented by process description (PD) and activity flow (AF) languages of [SBGN](http://sbgn.org) or in [simple interaction format (SIF)](https://www.pathwaycommons.org/pc/sif_interaction_rules.do).
-
-## Software
+Newt is a sample application for the web based library named [ChiSE](https://github.com/iVis-at-Bilkent/chise.js) developed to visualize and edit the pathway models represented by process description (PD) and activity flow (AF) languages of [SBGN](http://sbgn.org), [SBML](https://sbml.org/) or [simple interaction format (SIF)](https://www.pathwaycommons.org/pc/sif_interaction_rules.do).
 
 ChiSE and this sample application are distributed under [GNU Lesser General Public License](http://www.gnu.org/licenses/lgpl.html).
 
-**A deployment of this sample application along with detailed documentation on its usage** can be found [here](http://newteditor.org/). ChiSE and Newt work on every platform that have JavaScript support including mobile devices.
+### How to Cite Usage
 
 Please cite the following when you use Newt:
 
 H. Balci, M.C. Siper, N. Saleh, I. Safarli, L. Roy, M. Kilicarslan, R. Ozaydin, A. Mazein, C. Auffray, O. Babur, E. Demir and U. Dogrusoz, [Newt: a comprehensive web-based tool for viewing,constructing, and analyzing biological maps](https://doi.org/10.1093/bioinformatics/btaa850), **Bioinformatics**, 37(10), pp.1475-1477, 2021.
 
+## Software
+
+**A deployment of this sample application along with detailed documentation on its usage** can be found [here](http://newteditor.org/). ChiSE and Newt work on every platform that have JavaScript support including mobile devices.
+
 #### Running a Local Instance
-In order to deploy and run a local instance of the tool, please follow the steps below (we recommend the use of LTS version 12.16.1 of node.js):
+In order to deploy and run a local instance of the tool, please follow the steps below (we recommend the use of version 14.19.3 of node.js):
 
 - Installation
 ```
@@ -54,7 +56,7 @@ Third-party libraries:
 [jQuery](https://github.com/jquery/jquery),
 [jquery-expander](https://github.com/kswedberg/jquery-expander),
 [Konva](https://github.com/konvajs/konva),
-[Libxmljs](https://github.com/libxmljs/libxmljs),
+[libxmljs](https://github.com/libxmljs/libxmljs),
 [lodash](https://github.com/lodash/lodash),
 [underscore](https://github.com/jashkenas/underscore),
 [express](https://github.com/expressjs/express),
@@ -64,18 +66,20 @@ Third-party libraries:
 [Tippyjs](https://github.com/atomiks/tippyjs),
 [nodemailer](https://nodemailer.com/about/),
 [body-parser](https://github.com/expressjs/body-parser),
+[jsdom](https://github.com/jsdom/jsdom),
+[cypress](https://github.com/cypress-io/cypress),
 [multer](https://github.com/expressjs/multer) licensed with [MIT](https://opensource.org/licenses/MIT);
 [Mousetrap](https://github.com/ccampbell/mousetrap),
 [Request](https://github.com/request/request) licensed with [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0),
 [Intro.js](https://github.com/usablica/intro.js) licensed with [GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html), and
 [chroma-js](https://github.com/gka/chroma.js) licensed with [this](https://github.com/gka/chroma.js/blob/master/LICENSE).
 
-We refer the user to [GeneCards](https://www.genecards.org/) for detailed properties of genes. Similarly, we pull properties of simple chemicals from [ChEBI](https://www.ebi.ac.uk/chebi/). CellDesigner conversion is performed through [this library](https://github.com/royludo/cd2sbgnml ) and [its associated service](https://github.com/iVis-at-Bilkent/cd2sbgnml-webservice). Finally, SBML conversion is due to [this Minerva service](https://minerva-dev.lcsb.uni.lu/minerva/api/convert/).
+We refer the user to [GeneCards](https://www.genecards.org/) for detailed properties of genes. Similarly, we pull properties of simple chemicals from [ChEBI](https://www.ebi.ac.uk/chebi/). CellDesigner conversion is performed through [this library](https://github.com/royludo/cd2sbgnml ) and [its associated service](https://github.com/iVis-at-Bilkent/cd2sbgnml-webservice). Finally, SBML and GPML conversions are due to [this Minerva service](https://minerva-dev.lcsb.uni.lu/minerva/api/convert/).
 
 ## Team
 
-  * [Hasan Balci](https://github.com/hasanbalci), [Nasim Saleh](https://github.com/nasimsaleh), [Merve Kilicarslan](https://github.com/mervekilicarslan5), [Rumeysa Ozaydin](https://github.com/rumeysaozaydin), and [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis), and [Metin Can Siper](https://github.com/metincansiper), [Ozgun Babur](https://github.com/ozgunbabur), and [Emek Demir](https://github.com/emekdemir) of the Demir Lab at [OHSU](http://www.ohsu.edu/)
+  * [Hasan Balci](https://github.com/hasanbalci), [Selbi Ereshova](https://github.com/SelbiEreshova), [Umut Utku Ersahince](https://github.com/umut-er), [Noor Muhammad](https://github.com/NoorMuhammad1) and [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis), [Ozgun Babur](https://github.com/ozgunbabur) of University of Massachusetts at Boston, and [Emek Demir](https://github.com/emekdemir) of the Demir Lab at [OHSU](http://www.ohsu.edu/)
 
 #### Alumni
 
-  * [Ilkin Safarli](https://github.com/kinimesi), [Ahmet Candiroglu](https://github.com/ahmetcandiroglu), [Kaan Sancak](https://github.com/kaansancak), [Ludovic Roy](https://github.com/royludo), [Leonard Dervishi](https://github.com/leonarddrv), [Istemi Bahceci](https://github.com/istemi-bahceci), [Alper Karacelik](https://github.com/alperkaracelik), [Alexander Mazein](https://github.com/amazein)
+  * [Metin Can Siper](https://github.com/metincansiper), [Muhammed Salih Altun](https://github.com/msalihaltun), [Nasim Saleh](https://github.com/nasimsaleh), [Merve Kilicarslan](https://github.com/mervekilicarslan5), [Rumeysa Ozaydin](https://github.com/rumeysaozaydin), [Ilkin Safarli](https://github.com/kinimesi), [Ahmet Candiroglu](https://github.com/ahmetcandiroglu), [Kaan Sancak](https://github.com/kaansancak), [Ludovic Roy](https://github.com/royludo), [Leonard Dervishi](https://github.com/leonarddrv), [Istemi Bahceci](https://github.com/istemi-bahceci), [Alper Karacelik](https://github.com/alperkaracelik), [Alexander Mazein](https://github.com/amazein)

app/css/chise.css

@@ -465,11 +465,8 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
 }
 
 #template-modal-content {
-  position: fixed;
-  width: 600px;
-  top: 50%;
-  left: 50%;
-  margin-left: -300px;
+  width: 850px;
+  margin-left: -150px;
 }
 
 .sbgn-input-small {
@@ -580,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);
@@ -640,6 +637,22 @@ menu:not([title]):before{
     padding-right: 0px !important;
 }
 
+.palette-panel-body {
+    margin-top: 10px;
+}
+
+.palette-label {
+    font-size: 12px;
+    background:white; 
+    margin-bottom:0px; 
+    width: fit-content;
+    text-align:left; 
+    color: #555;
+    margin-top: -17px;
+    padding-right: 6px;
+    padding-left: 6px;
+}
+
 .panel {
     border: 1px solid transparent;
 }
@@ -705,11 +718,6 @@ hr.inspector-divider {
     padding: 3px;
 }
 
-.element-palette div {
-    /*width: 36px;*/
-    /*height: 30px;*/
-}
-
 .selected-mode.inactive-palette-element {
     border-style: dotted;
     border-width: 1px;
@@ -719,34 +727,79 @@ hr.inspector-divider {
     margin: 1px;
 }
 
+.caption-style-text {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: #777;
+    text-align: left;
+}
+
 .chise-tab a {
     color: #555;
     padding-left: 5px !important;
     padding-right: 5px !important;
     border-radius: 8px 8px 0 0 !important;
+    border: 1px solid #aaaaaa;
+    box-shadow: 1px -1px 2px #999999;
+}
+
+.chise-tab.active a {
+    background: #eaeaea !important;
+    border: 1px solid #434343;
+    box-shadow: 1px -1px 2px 0 #303030 !important;
+}
+
+.chise-tab:hover a {
+    background: #eaeaea !important;
+}
+
+.chise-network-tab {
+    margin-right: 2px;
+    border-radius: 0 0 8px 2px !important;
+    background: transparent !important;
+    border-top: 0px !important;
+    border: 1px solid #b9b9b9;
+    border-left-width: 0px !important;
+    box-shadow: 1px 1px 1px #b9b9b9;
 }
 
 .chise-network-tab a {
-    border-radius: 0 0 8px 8px !important;
+    color: #555;
+    padding-top: 10px !important;
+    padding-bottom: 12px !important;
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+    border-bottom-right-radius: 8px !important;
+    border-bottom-left-radius: 2px !important;
     font-size: 11px;
     width: 86px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     background: transparent !important;
-    border-top: 0px !important;
+    border: 0px !important;
 }
 
-/*.chise-tab.active {
-    font-weight: bold;
-}*/
-
-.chise-tab.active a {
-    background: #eaeaea !important;
+.chise-network-tab.active {
+    border: 1px solid #434343;
+    box-shadow: 1px 1px 2px #434343;
 }
 
-.chise-network-tab.active a {
+.chise-network-tab.active, .chise-network-tab.active a {
     background: white !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;
 }
 
 .close:hover,
@@ -755,14 +808,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;
 }
 
@@ -772,7 +821,6 @@ hr.inspector-divider {
     border-width: 1px !important;
     border-radius: calc !important;
     font-size: 12px;
-    align: center;
 }
 
 #sbgn-toolbar img {
@@ -783,7 +831,11 @@ hr.inspector-divider {
     height: 26px;
 }
 
-img#template-reaction-add-button:hover {
+img#metabolic-reaction-add-input:hover {
+    cursor: pointer;
+}
+
+img#metabolic-reaction-add-output:hover {
     cursor: pointer;
 }
 
@@ -823,12 +875,7 @@ img#template-reversible-output-add-button:hover {
 {
     display: table;
     margin: auto;
-    width: 300px;
-}
-
-.paletteCont
-{
-
+    width: 350px;
 }
 
 .paletteCol {
@@ -887,6 +934,13 @@ img#template-reversible-output-add-button:hover {
   Palettes on right pane
 */
 
+@media (max-width: 1770px) {
+    .paletteWrapper
+    {
+        width: 300px;
+    }
+}
+
 @media (max-width: 1530px) {
     .paletteWrapper
     {
@@ -931,4 +985,70 @@ img#template-reversible-output-add-button:hover {
 
 .table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
   background-color: #b5b5b5;
-}
+}
+
+.icon-small {
+    width: 16px;
+    height: 16px;
+}
+
+.dropdown-sbgn-bricks-molecule-type {
+    width: 120px;
+}
+
+.image-button-disabled-appearance {
+    cursor: default;
+    opacity: 0.2;
+}
+
+.image-button-enabled-appearance {
+    cursor: pointer;
+    opacity: 1.0;
+}
+
+.thin-blue-border {
+    border: 1px solid #0B9BCD;
+    border-radius: 4px;
+}
+
+.thin-grey-border {
+    border: 1px solid rgb(204, 204, 204);
+    border-radius: 4px;
+}
+
+.checkbox-label-disabled {
+    color: rgb(204, 204, 204); 
+    font: inherit;
+}
+
+.checkbox-label-enabled {
+    color: #000000;
+    font: inherit;
+}
+
+.text-input-disabled {
+    color: rgb(204, 204, 204);
+}
+
+.text-input-enabled {
+    color: black;
+}
+
+.cy-preview-area {
+    width: 250px;
+    height: 200px;
+}
+
+.conversion-type-dropdown {
+    width: fit-content; 
+    margin-right: 20px;
+}
+
+.conversion-residue-input-label {
+    font: inherit;
+    margin-right: 5px;
+}
+
+.small-right-margin {
+    margin-right: 10px;
+}