diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 000000000..2d596a36f --- /dev/null +++ b/.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 }} diff --git a/.gitignore b/.gitignore index dec208bd0..8e753946d 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,6 @@ node_modules/ -app/bundle.js \ No newline at end of file +package-lock.json + +app/bundle.js diff --git a/README.md b/README.md index 3d82d4213..fa7827fb9 100644 --- a/README.md +++ b/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) diff --git a/app/.DS_Store b/app/.DS_Store new file mode 100644 index 000000000..442ecb9ae Binary files /dev/null and b/app/.DS_Store differ diff --git a/app/css/chise.css b/app/css/chise.css index a698b3422..9de8e2603 100644 --- a/app/css/chise.css +++ b/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; -} \ No newline at end of file +} + +.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; +} diff --git a/app/img/af-legend.svg b/app/img/af-legend.svg index ab435b304..0e47ce6af 100644 --- a/app/img/af-legend.svg +++ b/app/img/af-legend.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + showguides="true" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -276,7 +279,7 @@ image/svg+xml - + @@ -287,78 +290,77 @@ transform="translate(23.27144,-121.55735)"> + y="336.64789" + style="font-size:12.5px;line-height:1.25">  + y="303.07648" + style="font-size:15px;line-height:1.25">  + y="221.8149" + style="font-size:12.5px;line-height:1.25">  + y="208.24347" + style="font-size:15px;line-height:1.25">  + y="56.110977" + style="font-size:12.5px;line-height:1.25">  + y="82.539566" + style="font-size:15px;line-height:1.25">  + id="g1"> equivelance arc + y="398.58667" + style="font-size:15px;line-height:1.25">equivelance arc positive influence + sodipodi:role="line" + style="font-size:15px;line-height:1.25">positive influence + style="fill:none;fill-opacity:1;stroke:#999999;stroke-width:1.89589;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> negative influence + sodipodi:role="line" + style="font-size:15px;line-height:1.25">negative influence + style="fill:none;fill-opacity:1;stroke:#999999;stroke-width:1.89589;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + d="m 440.34107,258.68771 h 51.16922" + style="fill:none;stroke:#000000;stroke-width:2.92639;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:url(#EmptyDiamondL-2-9)" /> unknown influence + x="564.45013" + sodipodi:role="line" + style="font-size:15px;line-height:1.25">unknown influence + style="fill:none;fill-opacity:1;stroke:#999999;stroke-width:1.89589;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + id="g5029" + transform="translate(-4.6070313e-5)"> necessary stimulation + style="fill:none;fill-opacity:1;stroke:#999999;stroke-width:1.89589;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> @@ -551,41 +553,41 @@ inkscape:export-ydpi="53.91" inkscape:export-xdpi="53.91" inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\and2.png" - sodipodi:linespacing="125%" id="text3817-6-8" y="374.8952" - x="430.2316" - style="font-style:normal;font-weight:normal;font-size:14px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#999999" + x="430.23154" + style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:#999999" xml:space="preserve">AND + sodipodi:role="line" + style="font-size:14px;line-height:1.25;font-family:sans-serif">AND + style="fill:none;stroke:#999999;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> logic arc + sodipodi:role="line" + style="font-size:15px;line-height:1.25">logic arc + transform="translate(4,9.059906e-5)" + id="g5236"> + id="g4634"> - - + biological activity - - + style="font-size:15px;line-height:1.25">biological activity     + + + - - - - - - + + + + + macromolecule - + id="tspan5929-3" + style="font-size:15px;line-height:1.25">macromolecule + + + style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> simple chemical - - - - - - - nucleic acid feature - + sodipodi:role="line" + style="font-size:15px;line-height:1.25">simple chemical + + - + + inkscape:export-xdpi="54" + inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\nucleicacidfeature.png" + inkscape:connector-curvature="0" + id="path3913-2" + d="m 226.37116,250.033 v 20.98099 c 0,7.49092 4.7779,13.53037 10.73352,13.53037 h 22.50958 c 5.95559,0 10.75719,-6.03945 10.75719,-13.53037 V 250.033 Z" + style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + + x="270.37131" + y="265.28867" /> + + nucleic acid feature + + + + + + unspecified entity + + + + - unspecified entity + - - - - - - - complex - - - - - - - - perturbation - + id="tspan5929-3-0" + style="font-size:15px;line-height:1.25">complex + transform="translate(249,-336)" + id="g5189"> + id="g4667" + transform="translate(-234.21415,53.882612)"> - + + + + perturbation + + + + compartment - - - - compartment   + + + + phenotype - + style="font-size:15px;line-height:1.25">phenotype   + + + transform="translate(-8.6170973,-353.37983)" + id="g4704"> - - - - - pre:label + transform="translate(110.60122,482.29402)" + id="g4487"> + + pre:label + + unit ofinformation - - - unit ofinformation   + + + logicaloperators + id="tspan6877" + style="font-size:15px;line-height:1.25">logicaloperators   + - - - + + OR - - - - OR + + + + AND - - - - AND + + + + NOT - - - NOT + + + τ - - + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:27.5px;line-height:0%;font-family:Cambria;-inkscape-font-specification:Cambria;letter-spacing:-1.2px">τ + - - - + + + tag - - - - tag   + + + + submap - + style="font-size:15px;line-height:1.25">submap   diff --git a/app/img/edges/acetylates.svg b/app/img/edges/acetylates.svg new file mode 100644 index 000000000..f065e0173 --- /dev/null +++ b/app/img/edges/acetylates.svg @@ -0,0 +1,93 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/app/img/edges/activates-gtpase.svg b/app/img/edges/activates-gtpase.svg new file mode 100644 index 000000000..697f0ceca --- /dev/null +++ b/app/img/edges/activates-gtpase.svg @@ -0,0 +1,93 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/app/img/edges/deacetylates.svg b/app/img/edges/deacetylates.svg new file mode 100644 index 000000000..bec47dd0a --- /dev/null +++ b/app/img/edges/deacetylates.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/app/img/edges/demethylates.svg b/app/img/edges/demethylates.svg new file mode 100644 index 000000000..9b50d7788 --- /dev/null +++ b/app/img/edges/demethylates.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/app/img/edges/dephosphorylates.svg b/app/img/edges/dephosphorylates.svg index 6fc4c846e..83e87aad5 100644 --- a/app/img/edges/dephosphorylates.svg +++ b/app/img/edges/dephosphorylates.svg @@ -30,7 +30,7 @@ @@ -44,7 +44,7 @@ @@ -58,7 +58,7 @@ @@ -103,7 +103,8 @@ id="layer1" transform="translate(-275.2906,-267.82635)"> @@ -44,7 +44,7 @@ @@ -58,7 +58,7 @@ @@ -103,7 +103,7 @@ id="layer1" transform="translate(-275.2906,-267.82635)"> + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/app/img/edges/methylates.svg b/app/img/edges/methylates.svg new file mode 100644 index 000000000..35bb8633f --- /dev/null +++ b/app/img/edges/methylates.svg @@ -0,0 +1,93 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/app/img/edges/negative-influence.svg b/app/img/edges/negative-influence.svg new file mode 100644 index 000000000..01ed5ec6c --- /dev/null +++ b/app/img/edges/negative-influence.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/phosphorylates.svg b/app/img/edges/phosphorylates.svg index 29d0558b3..2a35bbd2f 100644 --- a/app/img/edges/phosphorylates.svg +++ b/app/img/edges/phosphorylates.svg @@ -71,7 +71,7 @@ inkscape:connector-curvature="0" id="path3787-4" d="m 275.2906,285.12126 37.74139,0" - style="fill:none;stroke:#62392D;stroke-width:3.66321707;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:none" /> + style="fill:none;stroke:#43a93c;stroke-width:3.66321707;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:none" /> diff --git a/app/img/edges/positive-influence-sbml.svg b/app/img/edges/positive-influence-sbml.svg new file mode 100644 index 000000000..650fbc337 --- /dev/null +++ b/app/img/edges/positive-influence-sbml.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/reduced-modulation.svg b/app/img/edges/reduced-modulation.svg new file mode 100644 index 000000000..29da808fb --- /dev/null +++ b/app/img/edges/reduced-modulation.svg @@ -0,0 +1,95 @@ + + + + diff --git a/app/img/edges/reduced-stimulation.svg b/app/img/edges/reduced-stimulation.svg new file mode 100644 index 000000000..a6955a057 --- /dev/null +++ b/app/img/edges/reduced-stimulation.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/reduced-trigger.svg b/app/img/edges/reduced-trigger.svg new file mode 100644 index 000000000..af0dae8f0 --- /dev/null +++ b/app/img/edges/reduced-trigger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/transcription.svg b/app/img/edges/transcription.svg new file mode 100644 index 000000000..b4b9c73dd --- /dev/null +++ b/app/img/edges/transcription.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/transcription_consumption.svg b/app/img/edges/transcription_consumption.svg new file mode 100644 index 000000000..3dafeb46c --- /dev/null +++ b/app/img/edges/transcription_consumption.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/transcription_production.svg b/app/img/edges/transcription_production.svg new file mode 100644 index 000000000..b01755572 --- /dev/null +++ b/app/img/edges/transcription_production.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/translation-consumption.svg b/app/img/edges/translation-consumption.svg new file mode 100644 index 000000000..6d24254e2 --- /dev/null +++ b/app/img/edges/translation-consumption.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/translation-production.svg b/app/img/edges/translation-production.svg new file mode 100644 index 000000000..f218deb14 --- /dev/null +++ b/app/img/edges/translation-production.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/translation-stimulation.svg b/app/img/edges/translation-stimulation.svg new file mode 100644 index 000000000..2707a0664 --- /dev/null +++ b/app/img/edges/translation-stimulation.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/transport.svg b/app/img/edges/transport.svg new file mode 100644 index 000000000..471bfe142 --- /dev/null +++ b/app/img/edges/transport.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/trigger.svg b/app/img/edges/trigger.svg new file mode 100644 index 000000000..e6c8bb343 --- /dev/null +++ b/app/img/edges/trigger.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/app/img/edges/unknown-catalysis.svg b/app/img/edges/unknown-catalysis.svg new file mode 100644 index 000000000..290130898 --- /dev/null +++ b/app/img/edges/unknown-catalysis.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/unknown-inhibition.svg b/app/img/edges/unknown-inhibition.svg new file mode 100644 index 000000000..350030d55 --- /dev/null +++ b/app/img/edges/unknown-inhibition.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/unknown-negative-influence.svg b/app/img/edges/unknown-negative-influence.svg new file mode 100644 index 000000000..16348e876 --- /dev/null +++ b/app/img/edges/unknown-negative-influence.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/unknown-positive-influence.svg b/app/img/edges/unknown-positive-influence.svg new file mode 100644 index 000000000..2bcc4f76a --- /dev/null +++ b/app/img/edges/unknown-positive-influence.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/unknown-reduced-modulation.svg b/app/img/edges/unknown-reduced-modulation.svg new file mode 100644 index 000000000..bf8d3b04b --- /dev/null +++ b/app/img/edges/unknown-reduced-modulation.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + diff --git a/app/img/edges/unknown-reduced-stimulation.svg b/app/img/edges/unknown-reduced-stimulation.svg new file mode 100644 index 000000000..9132f13cd --- /dev/null +++ b/app/img/edges/unknown-reduced-stimulation.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/unknown-reduced-trigger.svg b/app/img/edges/unknown-reduced-trigger.svg new file mode 100644 index 000000000..8cd39eacc --- /dev/null +++ b/app/img/edges/unknown-reduced-trigger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/img/edges/upregulates-expression.svg b/app/img/edges/upregulates-expression.svg index 941cd647b..3d1e511ac 100644 --- a/app/img/edges/upregulates-expression.svg +++ b/app/img/edges/upregulates-expression.svg @@ -71,7 +71,7 @@ inkscape:connector-curvature="0" id="path3787-4" d="m 275.2906,285.12126 37.74139,0" - style="fill:none;stroke:#32D849;stroke-width:3.66321707;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4 4;stroke-opacity:1;marker-end:none" /> + style="fill:none;stroke:#43a93c;stroke-width:3.66321707;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:4 4;stroke-opacity:1;marker-end:none" /> diff --git a/app/img/nodes/RNA.svg b/app/img/nodes/RNA.svg new file mode 100644 index 000000000..b9b770276 --- /dev/null +++ b/app/img/nodes/RNA.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + diff --git a/app/img/nodes/activated.svg b/app/img/nodes/activated.svg new file mode 100644 index 000000000..7629abbbf --- /dev/null +++ b/app/img/nodes/activated.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/nodes/and.svg b/app/img/nodes/and.svg index 404274f74..912967571 100644 --- a/app/img/nodes/and.svg +++ b/app/img/nodes/and.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -199,32 +202,31 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-458.55017,-350.96411)"> + transform="matrix(1.0303625,0,0,1.0955712,-474.63379,-386.75137)"> AND + style="font-size:17.5px;line-height:0%;letter-spacing:-1.2px">AND diff --git a/app/img/nodes/association.svg b/app/img/nodes/association.svg index d80c4df0b..791c8101f 100644 --- a/app/img/nodes/association.svg +++ b/app/img/nodes/association.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> @@ -57,7 +57,7 @@ style="overflow:visible"> @@ -71,9 +71,9 @@ style="overflow:visible"> + transform="scale(0.8)" /> + transform="scale(0.8)" /> + transform="scale(0.8)" /> @@ -156,7 +156,7 @@ @@ -169,20 +169,23 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="5.6" - inkscape:cx="-69.142416" - inkscape:cy="10.366422" + inkscape:cx="3.6607143" + inkscape:cy="24.642857" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" - inkscape:window-width="1920" - inkscape:window-height="1017" - inkscape:window-x="-8" - inkscape:window-y="-8" - inkscape:window-maximized="1" + inkscape:window-width="1440" + inkscape:window-height="847" + inkscape:window-x="0" + inkscape:window-y="25" + inkscape:window-maximized="0" fit-margin-top="7" fit-margin-left="7" fit-margin-right="7" - fit-margin-bottom="7" /> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -199,37 +202,15 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-483.32661,-258.09914)"> - - + transform="translate(-489.41744,-258.09917)"> + cx="509.48886" + cy="278.17059" + r="15.938317" /> diff --git a/app/img/nodes/complex-sbml.svg b/app/img/nodes/complex-sbml.svg new file mode 100644 index 000000000..f1012e533 --- /dev/null +++ b/app/img/nodes/complex-sbml.svg @@ -0,0 +1,238 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + +   +   + + + diff --git a/app/img/nodes/complex-species.svg b/app/img/nodes/complex-species.svg new file mode 100644 index 000000000..335264e2f --- /dev/null +++ b/app/img/nodes/complex-species.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/app/img/nodes/complex.svg b/app/img/nodes/complex.svg index 214a72ab8..d9c58db9c 100644 --- a/app/img/nodes/complex.svg +++ b/app/img/nodes/complex.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -202,29 +205,29 @@ transform="translate(-7.6400969,-208.12166)"> + y="336.64789" + style="font-size:12.5px;line-height:1.25">  + y="363.07648" + style="font-size:15px;line-height:1.25">  + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + +   +   + + + + + + diff --git a/app/img/nodes/delay.svg b/app/img/nodes/delay.svg index 6441d4dd6..282fdf2da 100644 --- a/app/img/nodes/delay.svg +++ b/app/img/nodes/delay.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -191,7 +194,7 @@ image/svg+xml - + @@ -202,25 +205,24 @@ transform="translate(-458.55017,-350.96411)"> τ + x="481.59146" + y="382.71436" + style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35px;line-height:0%;font-family:Cambria;-inkscape-font-specification:'Cambria Bold';letter-spacing:-1.2px">τ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> @@ -57,7 +57,7 @@ style="overflow:visible"> @@ -71,9 +71,9 @@ style="overflow:visible"> + transform="scale(0.8)" /> + transform="scale(0.8)" /> + transform="scale(0.8)" /> @@ -156,7 +156,7 @@ @@ -169,20 +169,23 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="11.2" - inkscape:cx="7.4854287" - inkscape:cy="17.683585" + inkscape:cx="22.008929" + inkscape:cy="26.517857" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" - inkscape:window-width="1920" - inkscape:window-height="1017" - inkscape:window-x="-8" - inkscape:window-y="-8" - inkscape:window-maximized="1" + inkscape:window-width="1440" + inkscape:window-height="847" + inkscape:window-x="0" + inkscape:window-y="25" + inkscape:window-maximized="0" fit-margin-top="7" fit-margin-left="7" fit-margin-right="7" - fit-margin-bottom="7" /> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -199,46 +202,28 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-483.32661,-258.09914)"> - - - - + transform="translate(-488.15543,-258.09913)"> + + + + diff --git a/app/img/nodes/drug.svg b/app/img/nodes/drug.svg new file mode 100644 index 000000000..91285dc98 --- /dev/null +++ b/app/img/nodes/drug.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + diff --git a/app/img/nodes/source-and-sink.svg b/app/img/nodes/empty-set.svg similarity index 82% rename from app/img/nodes/source-and-sink.svg rename to app/img/nodes/empty-set.svg index 7837ee5ca..8b4950da7 100644 --- a/app/img/nodes/source-and-sink.svg +++ b/app/img/nodes/empty-set.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -202,29 +205,29 @@ transform="translate(-11.541668,-349.61682)"> + y="336.64789" + style="font-size:12.5px;line-height:1.25">  + y="363.07648" + style="font-size:15px;line-height:1.25">  + transform="matrix(1.0721767,0,0,1.0915895,-3.3199742,-34.288485)"> + style="fill:none;stroke:#000000;stroke-width:3.99236;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> diff --git a/app/img/nodes/gene.svg b/app/img/nodes/gene.svg new file mode 100644 index 000000000..ab765ffa8 --- /dev/null +++ b/app/img/nodes/gene.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/app/img/nodes/ion-channel.svg b/app/img/nodes/ion-channel.svg new file mode 100644 index 000000000..c9a1d099c --- /dev/null +++ b/app/img/nodes/ion-channel.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + diff --git a/app/img/nodes/ion.svg b/app/img/nodes/ion.svg new file mode 100644 index 000000000..fc352663d --- /dev/null +++ b/app/img/nodes/ion.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/app/img/nodes/macromolecule.svg b/app/img/nodes/macromolecule.svg index 5a5601cd4..87acd8970 100644 --- a/app/img/nodes/macromolecule.svg +++ b/app/img/nodes/macromolecule.svg @@ -2,20 +2,20 @@ + inkscape:version="1.3.2 (091e20e, 2023-11-25)" + sodipodi:docname="macromolecule.svg" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + inkscape:window-width="1440" + inkscape:window-height="847" + inkscape:window-x="0" + inkscape:window-y="25" + inkscape:window-maximized="0" + units="px" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -59,13 +62,13 @@ id="layer1" transform="translate(-297.85716,-312.93362)"> diff --git a/app/img/nodes/not.svg b/app/img/nodes/not.svg index 9af3a1ae3..a1604525e 100644 --- a/app/img/nodes/not.svg +++ b/app/img/nodes/not.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -191,7 +194,7 @@ image/svg+xml - + @@ -201,29 +204,28 @@ id="layer1" transform="translate(-458.55017,-350.96411)"> NOT + style="font-size:17.5px;line-height:0%;letter-spacing:-1.2px">NOT diff --git a/app/img/nodes/nucleic-acid-feature.svg b/app/img/nodes/nucleic-acid-feature.svg index f025e8069..4e0a32b62 100644 --- a/app/img/nodes/nucleic-acid-feature.svg +++ b/app/img/nodes/nucleic-acid-feature.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -201,8 +204,8 @@ id="layer1" transform="translate(-8.0141601,-302.43192)"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + // + + diff --git a/app/img/nodes/omitted-process.svg b/app/img/nodes/omitted-process.svg index 3c3e76187..b7ab78cc6 100644 --- a/app/img/nodes/omitted-process.svg +++ b/app/img/nodes/omitted-process.svg @@ -2,23 +2,23 @@ + style="shape-rendering:crispEdges" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> @@ -58,7 +58,7 @@ style="overflow:visible"> @@ -72,9 +72,9 @@ style="overflow:visible"> + transform="scale(0.8)" /> + transform="scale(0.8)" /> + transform="scale(0.8)" /> @@ -157,7 +157,7 @@ @@ -169,21 +169,24 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="11.2" - inkscape:cx="-8.1282113" - inkscape:cy="19.109247" + inkscape:zoom="6.6032435" + inkscape:cx="8.4049604" + inkscape:cy="19.232972" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" - inkscape:window-width="1920" - inkscape:window-height="1017" - inkscape:window-x="-8" - inkscape:window-y="-8" - inkscape:window-maximized="1" + inkscape:window-width="1440" + inkscape:window-height="847" + inkscape:window-x="0" + inkscape:window-y="25" + inkscape:window-maximized="0" fit-margin-top="7" fit-margin-left="7" fit-margin-right="7" - fit-margin-bottom="7" /> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -200,29 +203,28 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-484.31778,-214.19089)"> + transform="matrix(1.3551972,0,0,1.3295487,-672.59876,-292.74497)"> \\ + x="506.12454" + y="241.44753" + style="font-size:18.0115px;letter-spacing:0.00720461px;stroke-width:0.720461px">\\ diff --git a/app/img/nodes/open-ion-channel.svg b/app/img/nodes/open-ion-channel.svg new file mode 100644 index 000000000..c2250bfb3 --- /dev/null +++ b/app/img/nodes/open-ion-channel.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/img/nodes/or.svg b/app/img/nodes/or.svg index 953d911e1..dd69da78b 100644 --- a/app/img/nodes/or.svg +++ b/app/img/nodes/or.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -191,7 +194,7 @@ image/svg+xml - + @@ -201,29 +204,29 @@ id="layer1" transform="translate(-458.55017,-350.96411)"> OR + x="466.7601" + y="388.06613" + style="font-size:17.8139px;line-height:0%;letter-spacing:-1.22153px;stroke-width:1.01794">OR diff --git a/app/img/nodes/perturbing-agent.svg b/app/img/nodes/perturbing-agent.svg index 90edad9d8..0aa4d86c4 100644 --- a/app/img/nodes/perturbing-agent.svg +++ b/app/img/nodes/perturbing-agent.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -201,8 +204,8 @@ id="layer1" transform="translate(-8.6852165,-396.75099)"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/app/img/nodes/phenotype.svg b/app/img/nodes/phenotype.svg index 29b5e25c3..6cb9e6adc 100644 --- a/app/img/nodes/phenotype.svg +++ b/app/img/nodes/phenotype.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -201,8 +204,8 @@ id="layer1" transform="translate(-237.38057,-159.97377)"> + style="shape-rendering:crispEdges" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> @@ -58,7 +58,7 @@ style="overflow:visible"> @@ -72,9 +72,9 @@ style="overflow:visible"> + transform="scale(0.8)" /> + transform="scale(0.8)" /> + transform="scale(0.8)" /> @@ -157,7 +157,7 @@ @@ -170,20 +170,23 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="7.9195959" - inkscape:cx="-1.0345358" - inkscape:cy="15.461071" + inkscape:cx="29.862635" + inkscape:cy="16.793786" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" - inkscape:window-width="1920" - inkscape:window-height="1017" - inkscape:window-x="-8" - inkscape:window-y="-8" - inkscape:window-maximized="1" + inkscape:window-width="1440" + inkscape:window-height="847" + inkscape:window-x="0" + inkscape:window-y="25" + inkscape:window-maximized="0" fit-margin-top="7" fit-margin-left="7" fit-margin-right="7" - fit-margin-bottom="7" /> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -200,14 +203,14 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-484.31778,-214.19089)"> + transform="translate(-490.38584,-214.19088)"> + + + + + + + \ No newline at end of file diff --git a/app/img/nodes/protein.svg b/app/img/nodes/protein.svg new file mode 100644 index 000000000..0ac1e60d5 --- /dev/null +++ b/app/img/nodes/protein.svg @@ -0,0 +1,76 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/app/img/nodes/receptor.svg b/app/img/nodes/receptor.svg new file mode 100644 index 000000000..1f08d574c --- /dev/null +++ b/app/img/nodes/receptor.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/app/img/nodes/simple-chemical.svg b/app/img/nodes/simple-chemical.svg index 99d1c97a8..2e12b0b9f 100644 --- a/app/img/nodes/simple-chemical.svg +++ b/app/img/nodes/simple-chemical.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -202,34 +205,34 @@ transform="translate(-6.5142553,-160.96843)"> + y="336.64789" + style="font-size:12.5px;line-height:1.25">  + y="363.07648" + style="font-size:15px;line-height:1.25">  diff --git a/app/img/nodes/simple-molecule.svg b/app/img/nodes/simple-molecule.svg new file mode 100644 index 000000000..96bb77376 --- /dev/null +++ b/app/img/nodes/simple-molecule.svg @@ -0,0 +1,52 @@ + + + + + + + + + + diff --git a/app/img/nodes/submap.svg b/app/img/nodes/submap.svg index 3fcb1e169..04eb9da37 100644 --- a/app/img/nodes/submap.svg +++ b/app/img/nodes/submap.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -201,12 +204,12 @@ id="layer1" transform="translate(-238.20243,-112.80493)"> diff --git a/app/img/nodes/tag.svg b/app/img/nodes/tag.svg index fd4086da4..42faae0be 100644 --- a/app/img/nodes/tag.svg +++ b/app/img/nodes/tag.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + showguides="false" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -203,29 +206,29 @@ transform="translate(-237.35697,-207.12713)"> + y="336.64789" + style="font-size:12.5px;line-height:1.25">  + y="363.07648" + style="font-size:15px;line-height:1.25">  + + + + + + + + + + + + + + + + diff --git a/app/img/nodes/truncated-protein.svg b/app/img/nodes/truncated-protein.svg new file mode 100644 index 000000000..aaa60773b --- /dev/null +++ b/app/img/nodes/truncated-protein.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/app/img/nodes/uncertain-process.svg b/app/img/nodes/uncertain-process.svg index dec252e79..ecb550b2a 100644 --- a/app/img/nodes/uncertain-process.svg +++ b/app/img/nodes/uncertain-process.svg @@ -2,23 +2,23 @@ + style="shape-rendering:crispEdges" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> @@ -58,7 +58,7 @@ style="overflow:visible"> @@ -72,9 +72,9 @@ style="overflow:visible"> + transform="scale(0.8)" /> + transform="scale(0.8)" /> + transform="scale(0.8)" /> @@ -157,7 +157,7 @@ @@ -170,20 +170,23 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="7.9195959" - inkscape:cx="-19.911762" - inkscape:cy="15.461071" + inkscape:cx="21.781414" + inkscape:cy="15.278557" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" - inkscape:window-width="1920" - inkscape:window-height="1017" - inkscape:window-x="-8" - inkscape:window-y="-8" - inkscape:window-maximized="1" + inkscape:window-width="1440" + inkscape:window-height="847" + inkscape:window-x="0" + inkscape:window-y="25" + inkscape:window-maximized="0" fit-margin-top="7" fit-margin-left="7" fit-margin-right="7" - fit-margin-bottom="7" /> + fit-margin-bottom="7" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -200,29 +203,28 @@ inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" - transform="translate(-484.31778,-214.19089)"> + transform="matrix(1.3572175,0,0,1.3279622,-673.83132,-292.54595)"> ? + x="505.6723" + y="241.59737" + style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:18.0671px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial Bold';stroke-width:0.722681px">? diff --git a/app/img/nodes/unknown-logical-operator.svg b/app/img/nodes/unknown-logical-operator.svg new file mode 100644 index 000000000..43057a1d2 --- /dev/null +++ b/app/img/nodes/unknown-logical-operator.svg @@ -0,0 +1,232 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + ? + + diff --git a/app/img/nodes/unknown-molecule.svg b/app/img/nodes/unknown-molecule.svg new file mode 100644 index 000000000..d18192586 --- /dev/null +++ b/app/img/nodes/unknown-molecule.svg @@ -0,0 +1,52 @@ + + + + + + + + + + diff --git a/app/img/nodes/unspecified-entity.svg b/app/img/nodes/unspecified-entity.svg index 5f4df1d15..da6b2e8e9 100644 --- a/app/img/nodes/unspecified-entity.svg +++ b/app/img/nodes/unspecified-entity.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + fit-margin-bottom="0" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -191,7 +194,7 @@ image/svg+xml - + @@ -201,14 +204,14 @@ id="layer1" transform="translate(-6.5142826,-255.27521)"> + rx="27.818542" + ry="21.818541" /> diff --git a/app/img/pd-legend.svg b/app/img/pd-legend.svg index 6d2ce0058..c2c2d7710 100644 --- a/app/img/pd-legend.svg +++ b/app/img/pd-legend.svg @@ -2,22 +2,22 @@ + inkscape:export-ydpi="300" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + showguides="true" + inkscape:showpageshadow="2" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" /> @@ -248,7 +251,7 @@ image/svg+xml - + @@ -259,261 +262,244 @@ transform="translate(0.2001214,-115.81508)"> + y="286.64789" + style="font-size:12.5px;line-height:1.25">  + + + consumption + + + modulation + + + stimulation + + + + + style="font-size:15px;line-height:1.25">catalysis - + id="g4440" + transform="translate(239.83616,2.2025757)"> - - consumption - - - modulation + inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\macromolecule.png" /> - - stimulation + sodipodi:nodetypes="cccccc" + inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\tag.png" + inkscape:export-xdpi="54" + inkscape:export-ydpi="54" /> - - + inkscape:export-xdpi="38.150002" + inkscape:export-ydpi="38.150002" + inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\edges\consumption.png" + inkscape:transform-center-x="-2.6812787" + inkscape:transform-center-y="-62.257366" /> catalysis - - - - - equivelance arc - - - - - production + style="font-size:15px;line-height:1.25;text-align:center;text-anchor:middle">equivelance arc + + + + + production + + d="M 465.53885,510.54474 H 399.58432" + style="fill:none;stroke:#000000;stroke-width:3.11264;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:none" /> + d="m 399.72418,495.9797 v 29.13008" + style="fill:none;stroke:#000000;stroke-width:4.28659;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:none" /> inhibition - - - inhibition + + + + AND - - - AND + + + logic arc - + style="font-size:15px;line-height:1.25;text-align:center;text-anchor:middle">logic arc + + + d="M 467.01639,589.97282 H 400.02675" + style="fill:none;stroke:#000000;stroke-width:3.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:url(#EmptyTriangleOutL-8)" /> + d="m 430.68153,573.03766 v 33.87032" + style="fill:none;stroke:#000000;stroke-width:3.17;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:none" /> necessary stimulation + x="350.26358" + y="568.3114" + style="font-size:15px;line-height:1.25;text-align:start;text-anchor:start">necessary stimulation + + complex   +   + + + + - - - + transform="translate(-0.71428823,0.20183534)" + id="g4415"> - - - - - + ry="19.003086" + rx="19.003084" + cy="377.58218" + cx="31.514166" + style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" + id="path3815-1-7" + inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\and2.png" + inkscape:export-xdpi="53.91" + inkscape:export-ydpi="53.91" /> - + + + macromolecule - simple chemical - complex - unspecified entity - macromoleculenucleic acid feature - source or sink -  perturbing agent - + sodipodi:role="line" + style="font-size:15px;line-height:1.25">    + simple chemical   + unspecified entity   + nucleic acid feature   + empty set   + perturbing agent phenotypephenotype  + x="291.57141" + y="405.51996" + id="tspan6395" + style="font-size:15px;line-height:1.25">  tagtag  + x="524.67065" + y="275.00635" + id="tspan6459" + style="font-size:15px;line-height:1.25">  + transform="translate(-6.4537134,-58.267752)"> + transform="translate(-6.4536829,-59.342734)"> + transform="translate(-6.4537162,-56.166984)"> processprocess  + y="180.02097" + id="tspan6037-7" + style="font-size:15px;line-height:1.25">  omitted processomitted process  + y="225.51608" + id="tspan6395-0" + style="font-size:15px;line-height:1.25">  uncertain processuncertain process  + y="269.30829" + id="tspan6459-0" + style="font-size:15px;line-height:1.25">  associationassociation  + y="314.69568" + id="tspan6502-3" + style="font-size:15px;line-height:1.25">  dissociationdissociation  + y="358.8877" + id="tspan6528-4" + style="font-size:15px;line-height:1.25">  @@ -1135,33 +1157,35 @@ d="m 484.15715,123.83344 16.54218,0 c 5.2991,0 13.68148,4.13924 13.68148,9.28083 l 0,17.40162 c 0,5.14158 -10.44054,9.28083 -15.73964,9.28083 l -14.48402,0 c -5.2991,0 -15.73963,-4.13925 -15.73963,-9.28083 l 0,-17.40162 c 0,-5.14159 10.44053,-9.28083 15.73963,-9.28083 z" style="fill:none;stroke:#000000;stroke-width:4.03670788;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> compartmentcompartment  + sodipodi:role="line" + style="font-size:15px;line-height:1.25">  + transform="translate(0,-27.509298)"> multimersmultimers  + sodipodi:role="line" + style="font-size:15px;line-height:1.25">  + transform="translate(0,-26.5902)"> clonedcloned  + sodipodi:role="line" + style="font-size:15px;line-height:1.25">  + transform="translate(-231.20553,181.43963)"> @@ -1269,16 +1297,16 @@ inkscape:export-ydpi="53.91" inkscape:export-xdpi="53.91" inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\and2.png" - sodipodi:linespacing="125%" id="text3817" y="202.2188" x="503.22632" - style="font-style:normal;font-weight:normal;font-size:14px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" + style="font-style:normal;font-weight:normal;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" xml:space="preserve">OR + sodipodi:role="line" + style="font-size:14px;line-height:1.25;font-family:sans-serif">OR AND + sodipodi:role="line" + style="font-size:14px;line-height:1.25;font-family:sans-serif">AND NOT + sodipodi:role="line" + style="font-size:14px;line-height:1.25;font-family:sans-serif">NOT logicallogicaloperatorsoperators  + sodipodi:role="line" + style="font-size:15px;line-height:1.25">  submapsubmap  + id="tspan4538" + style="font-size:15px;line-height:1.25">  + transform="translate(0,-36.000014)"> unit of informationunit of information  + sodipodi:role="line" + style="font-size:15px;line-height:1.25">  state variable + sodipodi:role="line" + style="font-size:15px;line-height:1.25">state variable + transform="translate(9.5367431e-6)"> + + +geneRNAreceptorunknown moleculephenotypedrugomitted processproteintruncated processcompartmentunknown processcomplextruncated proteindissociationion channeldegradationsimple moleculeionprocessassociationlogicaloperatorsunknown logicaloperator  ?//inhibitionunknown inhibitionmodulationstimulationunknown catalysistriggerpositive influencenegative influenceunknown positive influence?reduced triggerreduced modulationunknown reduced modulationreduced stimulationunknown reduced stimulationunknown reduced triggerunknown negative influenceconsumptiontranscription consumptionproductiontransporttranscription productioncatalysistranslation consumptiontranslation productionlogic arcORANDNOT diff --git a/app/img/sif-legend.svg b/app/img/sif-legend.svg index 7719e1f4b..b8fcad4df 100644 --- a/app/img/sif-legend.svg +++ b/app/img/sif-legend.svg @@ -1,6 +1,4 @@ - - + inkscape:export-filename="C:\Users\ugur\Desktop\node-legend.2016.04.01.png" + sodipodi:docname="sif-legend.2021.04.14.svg" + inkscape:version="1.0.1 (c497b03c, 2020-09-10)" + version="1.1" + id="svg2" + height="163.90508mm" + width="239.98091mm"> + guidetolerance="1" + inkscape:document-rotation="0" + units="mm" + showborder="true" /> + + + + + + + + + @@ -72,7 +118,7 @@ @@ -87,7 +133,7 @@ @@ -101,7 +147,7 @@ @@ -115,7 +161,7 @@ @@ -129,7 +175,7 @@ @@ -143,7 +189,7 @@ @@ -157,7 +203,7 @@ @@ -170,7 +216,7 @@ inkscape:stockid="EmptyDiamondL"> @@ -184,7 +230,7 @@ inkscape:stockid="EmptyDiamondL"> @@ -198,7 +244,7 @@ inkscape:stockid="TriangleOutL"> @@ -212,7 +258,7 @@ inkscape:stockid="EmptyTriangleOutL"> @@ -226,7 +272,7 @@ inkscape:stockid="EmptyTriangleOutL"> @@ -241,7 +287,7 @@ @@ -255,7 +301,7 @@ @@ -269,7 +315,7 @@ @@ -283,7 +329,7 @@ @@ -297,7 +343,7 @@ @@ -311,7 +357,7 @@ @@ -325,7 +371,7 @@ @@ -339,7 +385,7 @@ @@ -353,7 +399,7 @@ @@ -367,7 +413,7 @@ @@ -381,7 +427,7 @@ @@ -395,7 +441,7 @@ @@ -409,7 +455,7 @@ @@ -423,7 +469,7 @@ @@ -437,7 +483,7 @@ @@ -451,7 +497,7 @@ @@ -465,7 +511,7 @@ @@ -479,7 +525,7 @@ @@ -493,7 +539,7 @@ @@ -507,7 +553,7 @@ @@ -521,7 +567,7 @@ @@ -535,7 +581,7 @@ @@ -549,7 +595,7 @@ @@ -563,7 +609,7 @@ @@ -577,7 +623,7 @@ @@ -591,7 +637,7 @@ @@ -605,7 +651,7 @@ @@ -619,7 +665,7 @@ @@ -633,7 +679,7 @@ @@ -647,10 +693,113 @@ + + + + + + + + + + + + + + + + + + + + + @@ -665,15 +814,15 @@ + transform="translate(-103.20039,-22)"> simple chemical macromolecule + controls state change of - controls state change of - + + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> - controls transport of + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + + controls transport of + + d="m 115.88876,327.55293 h 43.7938" + style="fill:none;stroke:#f0e7c8;stroke-width:2.70729;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:url(#TriangleOutL-1gm)" /> - controls phosphorylation of + + controls phosphorylation of + + d="m 115.88876,397.55293 h 43.7938" + style="fill:none;stroke:#d970a1;stroke-width:2.70729;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:url(#TriangleOutL-1H)" /> + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> - controls expression of + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + + controls expression of + - catalysis precedes + + catalysis precedes + + d="m 120.90011,539.97746 h 43.7938" + style="fill:none;stroke:#8ec3ed;stroke-width:2.70729;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:url(#TriangleOutL-1b)" /> + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + activates gtpase - in complex with + id="g1240"> + + + + + in complex with + - interacts with + + interacts with + + d="m -174.88837,573.20231 h 57.67514" + style="fill:none;stroke:#b57261;stroke-width:3.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:none" /> + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> - neighbor of + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + + neighbor of + - activates + + activates + + inkscape:export-filename="C:\Users\ugur\Google Drive\toolbar\edges\production.png" + inkscape:label="path1529" /> - inhibits + + inhibits + + d="m -175.92274,783.20228 h 54.41785" + style="fill:none;stroke:#4886a5;stroke-width:3.01786;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-start:none;marker-end:url(#StopL)" /> + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + style="fill:none;stroke:#c7c7c7;stroke-width:1.96079;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + inhibits gtpase - downregulates expression - phosphorylates - - - - - - dephosphorylates - - - - - - upregulates expression - - - - - - - - - - - - + id="g1245"> + + + + downregulates expression + phosphorylates - - - - - - chemical affects - controls transport of chemical - controls production of - consumption controlled by - - - - - - - - - - - - - - - + id="g1210"> + + + + dephosphorylates - used to produce - reacts with - - - - - - - - - - + id="g1215"> + + + + + upregulates expression + + + + + + + + + + + controls transport of chemical + controls production of + consumption controlled by + + + + + + + + + + + + + + + + used to produce + reacts with + + + + + + + + + + + + + + + + chemical affects + acetylates + + + + + + deacetylates + + + + + + methylates + + + + + + demethylates + + + + + + + Pathway Commons relations + + + + CausalPath relations + + Other relations diff --git a/app/img/toolbar/hide-selected.svg b/app/img/toolbar/hide-selected-simple.svg similarity index 100% rename from app/img/toolbar/hide-selected.svg rename to app/img/toolbar/hide-selected-simple.svg diff --git a/app/img/toolbar/hide-selected-smart.svg b/app/img/toolbar/hide-selected-smart.svg new file mode 100644 index 000000000..863c33373 --- /dev/null +++ b/app/img/toolbar/hide-selected-smart.svg @@ -0,0 +1,108 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/img/toolbar/lasso.svg b/app/img/toolbar/lasso.svg new file mode 100644 index 000000000..56b7da905 --- /dev/null +++ b/app/img/toolbar/lasso.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/img/toolbar/sbgnbricks-logo.svg b/app/img/toolbar/sbgnbricks-logo.svg new file mode 100644 index 000000000..f3fc2495f --- /dev/null +++ b/app/img/toolbar/sbgnbricks-logo.svg @@ -0,0 +1,99 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/app/js/ajax-utilities.js b/app/js/ajax-utilities.js index 75c704c56..7b32c4854 100644 --- a/app/js/ajax-utilities.js +++ b/app/js/ajax-utilities.js @@ -121,8 +121,8 @@ exports.sendEmail = function(req, res){ secure: true, auth: { // should be replaced with real sender's account - user: ' newtforminerva@gmail.com', - pass: 'reportbug' + user: 'newtforminerva@gmail.com', + pass: process.env.newtforminerva_pwd } }); var attachment = fileContent == "no-data" ? false : true; diff --git a/app/js/app-cy.js b/app/js/app-cy.js index f47b90514..8ceafa562 100644 --- a/app/js/app-cy.js +++ b/app/js/app-cy.js @@ -12,7 +12,8 @@ module.exports = function (chiseInstance) { // use chise instance associated with chise instance var cy = chiseInstance.getCy(); - + //("here"); + window.cy = cy; // register extensions and bind events when cy is ready cy.ready(function () { cytoscapeExtensionsAndContextMenu(); @@ -69,12 +70,12 @@ module.exports = function (chiseInstance) { }, // whether the bend editing operations are undoable (requires cytoscape-undo-redo.js) undoable: appUtilities.undoable, - // title of remove bend point menu item - removeBendMenuItemTitle: "Delete Bend Point", // whether to initilize bend points on creation of this extension automatically - initBendPointsAutomatically: false, + initAnchorsAutomatically: false, // function to validate edge source and target on reconnection - validateEdge: chiseInstance.elementUtilities.validateArrowEnds, + validateEdge: function (edge, newSource, newTarget) { + return chiseInstance.elementUtilities.validateArrowEnds(edge, newSource, newTarget, true); + }, // function to be called on invalid edge reconnection actOnUnsuccessfulReconnection: function () { if(appUtilities.promptInvalidEdgeWarning){ @@ -83,8 +84,8 @@ module.exports = function (chiseInstance) { }, // function that handles edge reconnection handleReconnectEdge: chiseInstance.elementUtilities.addEdge, - zIndex: 900 - // whether to start the plugin in the enabled state + zIndex: 999, + enableMultipleAnchorRemovalOption: true, }); contextMenus.appendMenuItems([ @@ -94,6 +95,10 @@ module.exports = function (chiseInstance) { image: {src : "app/img/toolbar/settings.svg", width : 16, height : 16, x : 2, y : 3}, coreAsWell: true, onClickFunction: function (event) { + // take focus away from other tabs before showing properties tab + $('a[data-toggle="tab"]').one('show.bs.tab', function (e) { + e.relatedTarget.blur(); + }); $("#general-properties").trigger("click"); } }, @@ -123,9 +128,9 @@ module.exports = function (chiseInstance) { { id: 'ctx-menu-hide-selected', content: 'Hide Selected', - image: {src : "app/img/toolbar/hide-selected.svg", width : 16, height : 16, x : 2, y : 3}, + image: {src : "app/img/toolbar/hide-selected-smart.svg", width : 16, height : 16, x : 2, y : 3}, onClickFunction: function () { - $("#hide-selected").trigger('click'); + $("#hide-selected-smart").trigger('click'); }, coreAsWell: true // Whether core instance have this item on cxttap }, @@ -138,6 +143,14 @@ module.exports = function (chiseInstance) { }, coreAsWell: true // Whether core instance have this item on cxttap }, + { + id: 'ctx-menu-pd2af', + content: 'Convert PD map to AF map', + onClickFunction: function () { + $('#highlight-errors-of-pd2af').trigger('click'); + }, + coreAsWell: true // Whether core instance have this item on cxttap + }, { id: 'ctx-menu-collapse-complexes', content: 'Collapse Complexes', @@ -221,10 +234,7 @@ module.exports = function (chiseInstance) { selector: 'node, edge', onClickFunction: function (event) { var cyTarget = event.target || event.cyTarget; - var sbgnclass = cyTarget.data('class'); - - cy.elements().unselect(); - cy.elements('[class="' + sbgnclass + '"]').select(); + appUtilities.selectAllElementsOfSameType(cyTarget); } }, { @@ -304,7 +314,7 @@ module.exports = function (chiseInstance) { id: 'ctx-menu-fit-content-into-node', content: 'Resize Node to Content', selector: 'node[class^="macromolecule"],[class^="complex"],[class^="simple chemical"],[class^="nucleic acid feature"],' + - '[class^="unspecified entity"], [class^="perturbing agent"],[class^="phenotype"],[class^="tag"],[class^="compartment"],[class^="submap"],[class^="BA"],[class="SIF macromolecule"],[class="SIF simple chemical"]', + '[class^="unspecified entity"], [class^="perturbing agent"],[class^="phenotype"],[class^="tag"],[class^="compartment"],[class^="submap"],[class^="BA"],[class="SIF macromolecule"],[class="SIF simple chemical"],[class^="gene"],[class^="rna"],[class^="protein"],[class^="truncated protein"],[class^="ion"],[class^="receptor"],[class^="simple molecule"],[class^="unknown molecule"],[class^="drug"]', onClickFunction: function (event) { var cyTarget = event.target || event.cyTarget; //Collection holds the element and is used to generalize resizeNodeToContent function (which is used from Edit-> Menu) @@ -430,56 +440,67 @@ module.exports = function (chiseInstance) { } }); + function getProcessBasedNeighbors(node) { + var nodesToSelect = node; + if(chiseInstance.elementUtilities.isPNClass(node) || chiseInstance.elementUtilities.isLogicalOperator(node)){ + nodesToSelect = nodesToSelect.union(node.openNeighborhood()); + } + node.openNeighborhood().forEach(function(ele){ + if(chiseInstance.elementUtilities.isPNClass(ele) || chiseInstance.elementUtilities.isLogicalOperator(ele)){ + nodesToSelect = nodesToSelect.union(ele.closedNeighborhood()); + ele.openNeighborhood().forEach(function(ele2){ + if(chiseInstance.elementUtilities.isPNClass(ele2) || chiseInstance.elementUtilities.isLogicalOperator(ele2)){ + nodesToSelect = nodesToSelect.union(ele2.closedNeighborhood()); + } + }); + } + }); + return nodesToSelect; + } + cy.viewUtilities({ highlightStyles: [ { - node: { 'border-width': function (ele) { return Math.max(parseFloat(ele.data('border-width')) + 2, 3); }, 'border-color': '#0B9BCD' }, - edge: { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + 2, 3); }, - 'line-color': '#0B9BCD', - 'source-arrow-color': '#0B9BCD', - 'target-arrow-color': '#0B9BCD' - } + node: { 'overlay-color': '#0B9BCD', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#0B9BCD', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + }, + { + node: { 'overlay-color': '#bf0603', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#bf0603', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + }, + { + node: { 'overlay-color': '#d67614', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#d67614', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + }, + { + node: { 'overlay-color': '#04F06A', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#04F06A', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, }, - { node: { 'border-color': '#bf0603', 'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} }, - { node: { 'border-color': '#d67614', 'border-width': 3 }, edge: {'line-color': '#d67614', 'source-arrow-color': '#d67614', 'target-arrow-color': '#d67614', 'width' : 3} }, ], selectStyles: { - node: { - 'border-color': '#d67614', 'background-color': function (ele) { return ele.data('background-color'); } - }, - edge: { - 'line-color': '#d67614', - 'source-arrow-color': '#d67614', - 'target-arrow-color': '#d67614', - } + node: { 'overlay-color': '#89898a', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#89898a', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, }, - neighbor: function(node){ //select and return process-based neighbors - var nodesToSelect = node; - if(chiseInstance.elementUtilities.isPNClass(node) || chiseInstance.elementUtilities.isLogicalOperator(node)){ - nodesToSelect = nodesToSelect.union(node.openNeighborhood()); + neighbor: function(ele){ //select and return process-based neighbors + if (ele.isNode()) { + return getProcessBasedNeighbors(ele); + } + else if (ele.isEdge()) { + var sourceNode = ele.source(); + var targetNode = ele.target(); + var elementsToSelect = getProcessBasedNeighbors(sourceNode) + .union(getProcessBasedNeighbors(targetNode)); + return elementsToSelect; } - node.openNeighborhood().forEach(function(ele){ - if(chiseInstance.elementUtilities.isPNClass(ele) || chiseInstance.elementUtilities.isLogicalOperator(ele)){ - nodesToSelect = nodesToSelect.union(ele.closedNeighborhood()); - ele.openNeighborhood().forEach(function(ele2){ - if(chiseInstance.elementUtilities.isPNClass(ele2) || chiseInstance.elementUtilities.isLogicalOperator(ele2)){ - nodesToSelect = nodesToSelect.union(ele2.closedNeighborhood()); - } - }); - } - }); - return nodesToSelect; }, neighborSelectTime: 500 //ms }); cy.layoutUtilities({ - componentSpacing: 30, desiredAspectRatio: $(cy.container()).width() / $(cy.container()).height() - }) + }); - cy.nodeResize({ + cy.nodeEditing({ padding: 2, // spacing between node and grapples/rectangle undoable: appUtilities.undoable, // and if cy.undoRedo exists @@ -575,12 +596,12 @@ module.exports = function (chiseInstance) { resizeToContentCueEnabled: function (node){ var enabled_classes = ["macromolecule", "complex", "simple chemical", "nucleic acid feature", - "unspecified entity", "perturbing agent", "phenotype", "tag", "compartment", "submap", "BA"]; + "unspecified entity", "perturbing agent", "phenotype", "tag", "compartment", "submap", "BA", "gene", "rna", "protein", "ion channel", "receptor", "simple molecule", "unknown molecule", "drug"]; var node_class = node.data('class'); var result = false; enabled_classes.forEach(function(enabled_class){ - if(node_class.indexOf(enabled_class) > -1) + if(node_class.indexOf(enabled_class) > -1 || node_class == "ion") result = true; }); @@ -714,9 +735,9 @@ module.exports = function (chiseInstance) { // Expand collapse extension is supposed to clear expand collapse cue on node position event. // If compounds are resized position event is not triggered though the position of the node is changed. - // Therefore, we listen to noderesize.resizedrag event here and if the node is a compound we need to call clearVisualCue() method of + // Therefore, we listen to nodeediting.resizedrag event here and if the node is a compound we need to call clearVisualCue() method of // expand collapse extension. - cy.on("noderesize.resizedrag", function(e, type, node){ + cy.on("nodeediting.resizedrag", function(e, type, node){ if (node.isParent()) { cy.expandCollapse('get').clearVisualCue(); } @@ -746,7 +767,7 @@ module.exports = function (chiseInstance) { //Fixes info box locations after expand collapse cy.on("expandcollapse.aftercollapse expandcollapse.afterexpand", function(e, type, node) { - cy.nodeResize('get').refreshGrapples(); + cy.nodeEditing('get').refreshGrapples(); }); cy.on("expandcollapse.beforeexpand",function(event){ @@ -759,7 +780,7 @@ module.exports = function (chiseInstance) { }); // To redraw expand/collapse cue after resize - cy.on("noderesize.resizeend", function (e, type, node) { + cy.on("nodeediting.resizeend", function (e, type, node) { if(node.isParent() && node.selected()) node.trigger("select"); }); @@ -799,6 +820,11 @@ module.exports = function (chiseInstance) { cy.style().update(); inspectorUtilities.handleSBGNInspector(); + var chiseInstance = appUtilities.getActiveChiseInstance(); + if (chiseInstance.getMapType()) { + document.getElementById('map-type').value = chiseInstance.getMapType(); + } + if(actionName == "resize") { var node = res.node; // ensure consistency of infoboxes through resizing @@ -827,6 +853,11 @@ module.exports = function (chiseInstance) { cy.style().update(); inspectorUtilities.handleSBGNInspector(); + var chiseInstance = appUtilities.getActiveChiseInstance(); + if (chiseInstance.getMapType()) { + document.getElementById('map-type').value = chiseInstance.getMapType(); + } + if(actionName == "resize") { var node = res.node; // ensure consistency of infoboxes through resizing @@ -874,7 +905,6 @@ module.exports = function (chiseInstance) { }); cy.on("mouseup", function (event) { - var self = event.target || event.cyTarget; // get chise instance for cy @@ -986,6 +1016,17 @@ module.exports = function (chiseInstance) { cy.on('tapend', function (event, relPos) { + // This is a bit of a patch + // Without this the alt + taphold shortcut for selection of objects of same type doesn't work + // as all the elements except the original event target will be unselected without this + + if (altTapholdSelection) { + setTimeout(function() { + cy.autounselectify(false); + }, 100); + altTapholdSelection = null; + } + relPos = relPos || false; $('input').blur(); @@ -1087,23 +1128,21 @@ module.exports = function (chiseInstance) { if (chiseInstance.getMapType() && !isMapTypeValid){ appUtilities.promptMapTypeView.render("You cannot add element of type "+ appUtilities.mapTypesToViewableText[nodeParams.language] + " to a map of type "+appUtilities.mapTypesToViewableText[currentMapType] +"!","You can change map type from Map Properties."); - /* appUtilities.promptMapTypeView.render(function(){ - chiseInstance.addNode(cyPosX, cyPosY, nodeParams, undefined, parentId);}); */ } else{ chiseInstance.addNode(cyPosX, cyPosY, nodeParams, undefined, parentId); - } - if (nodeType === 'process' || nodeType === 'omitted process' || nodeType === 'uncertain process' || nodeType === 'association' || nodeType === 'dissociation' || nodeType === 'and' || nodeType === 'or' || nodeType === 'not') - { - var newEle = cy.nodes()[cy.nodes().length - 1]; - var defaultPortsOrdering = chiseInstance.elementUtilities.getDefaultProperties(nodeType)['ports-ordering']; - chiseInstance.elementUtilities.setPortsOrdering(newEle, ( defaultPortsOrdering ? defaultPortsOrdering : 'L-to-R')); - } + if (nodeType === 'process' || nodeType === 'omitted process' || nodeType === 'uncertain process' || nodeType === 'association' || nodeType == 'truncated process' || nodeType == 'unknown logical operator' || nodeType === 'dissociation' || nodeType === 'and' || nodeType === 'or' || nodeType === 'not') + { + var newEle = cy.nodes()[cy.nodes().length - 1]; + var defaultPortsOrdering = chiseInstance.elementUtilities.getDefaultProperties(nodeType)['ports-ordering']; + chiseInstance.elementUtilities.setPortsOrdering(newEle, ( defaultPortsOrdering ? defaultPortsOrdering : 'L-to-R')); + } - // If the node will not be added to the root then the parent node may be resized and the top left corner pasition may change after - // the node is added. Therefore, we may need to clear the expand collapse viusal cue. - if (parent) { - cy.expandCollapse('get').clearVisualCue(); + // If the node will not be added to the root then the parent node may be resized and the top left corner pasition may change after + // the node is added. Therefore, we may need to clear the expand collapse viusal cue. + if (parent) { + cy.expandCollapse('get').clearVisualCue(); + } } } } @@ -1241,7 +1280,7 @@ module.exports = function (chiseInstance) { // } //Remove grapples while node-label-textbox is visible if($("#node-label-textbox").is(":visible")){ - cy.nodeResize('get').removeGrapples(); + cy.nodeEditing('get').removeGrapples(); } }); @@ -1275,7 +1314,7 @@ module.exports = function (chiseInstance) { }); // infobox refresh when resize happen, for simple nodes - /* cy.on('noderesize.resizedrag', function(e, type, node) { + /* cy.on('nodeediting.resizedrag', function(e, type, node) { if(node.data('statesandinfos').length > 0) { updateInfoBox(node); } @@ -1330,7 +1369,7 @@ module.exports = function (chiseInstance) { currentPos = parent.position(); if (currentPos.x != oldPos.x || currentPos.y != oldPos.y){ oldPos = {x : currentPos.x, y : currentPos.y}; - cy.trigger('noderesize.resizedrag', ['unknown', parent]); + cy.trigger('nodeediting.resizedrag', ['unknown', parent]); } }); @@ -1345,13 +1384,24 @@ module.exports = function (chiseInstance) { 'background-position-x', 'background-position-y', 'background-height', 'background-width']; var opt = {}; - keys.forEach(function(key){ - opt[key] = node.data(key); + keys.forEach(function(key) { + opt[key] = node.data(key); }); node.style(opt); }); + // Select elements of same type (sbgn class) on taphold + alt key down + var altTapholdSelection; + cy.on('taphold', 'node, edge', function (event) { + if (appUtilities.altKeyDown) { + var cyTarget = event.target || event.cyTarget; + appUtilities.selectAllElementsOfSameType(cyTarget); + cy.autounselectify(true); + altTapholdSelection = true; + } + }); + /* removed coz of complications cy.on('remove', 'node', function(event) { if(cy.elements().length < 1){ @@ -1379,4 +1429,4 @@ module.exports = function (chiseInstance) { } } } -}; \ No newline at end of file +}; diff --git a/app/js/app-menu.js b/app/js/app-menu.js index 85b7507ff..89d5dc014 100644 --- a/app/js/app-menu.js +++ b/app/js/app-menu.js @@ -12,8 +12,8 @@ var _ = require('underscore'); module.exports = function() { var dynamicResize = appUtilities.dynamicResize.bind(appUtilities); - var layoutPropertiesView, generalPropertiesView,neighborhoodQueryView, pathsBetweenQueryView, pathsFromToQueryView, commonStreamQueryView, pathsByURIQueryView, promptSaveView, promptConfirmationView, - promptMapTypeView, promptInvalidFileView, promptFileConversionErrorView, promptInvalidURIWarning, reactionTemplateView, gridPropertiesView, fontPropertiesView, fileSaveView,saveUserPreferencesView, loadUserPreferencesView; + var layoutPropertiesView, generalPropertiesView, neighborhoodQueryView, pathsBetweenQueryView, pathsFromToQueryView, commonStreamQueryView, pathsByURIQueryView, mapByWPIDQueryView, mapByReactomeIDQueryView, promptSaveView, promptConfirmationView, + promptMapTypeView, promptInvalidTypeWarning, promtErrorPD2AF, promptInvalidFileView, promptFileConversionErrorView, promptInvalidURIWarning, reactionTemplateView, gridPropertiesView, fontPropertiesView, fileSaveView,saveUserPreferencesView, loadUserPreferencesView, sifMapWarning; function validateSBGNML(xml) { $.ajax({ @@ -40,6 +40,97 @@ module.exports = function() { validateSBGNML(textXml); return chiseInstance.loadSample(filename, 'app/samples/', callback); } + + function updatePalette(mapType) { + + if(mapType === "AF") { + if($("#AF-palette-heading").hasClass("collapsed")) { // expand AF + $("#AF-palette-heading").click(); + } + if(! $("#PD-palette-heading").hasClass("collapsed")) { // collapse PD + $("#PD-palette-heading").click(); + } + if(! $("#SIF-palette-heading").hasClass("collapsed")) { // collapse SIF + $("#SIF-palette-heading").click(); + } + if(! $("#SBML-palette-heading").hasClass("collapsed")) { // collapse SBML + $("#SBML-palette-heading").click(); + } + } + else if(mapType === "PD"){ + if($("#PD-palette-heading").hasClass("collapsed")) { // expand PD + $("#PD-palette-heading").click(); + } + if(! $("#AF-palette-heading").hasClass("collapsed")) { // collapse AF + $("#AF-palette-heading").click(); + } + if(! $("#SIF-palette-heading").hasClass("collapsed")) { // collapse SIF + $("#SIF-palette-heading").click(); + } + if(! $("#SBML-palette-heading").hasClass("collapsed")) { // collapse SBML + $("#SBML-palette-heading").click(); + } + } + else if(mapType === "SIF"){ + if($("#SIF-palette-heading").hasClass("collapsed")) { // expand SIF + $("#SIF-palette-heading").click(); + } + if(! $("#PD-palette-heading").hasClass("collapsed")) { // collapse PD + $("#PD-palette-heading").click(); + } + if(! $("#AF-palette-heading").hasClass("collapsed")) { // collapse AF + $("#AF-palette-heading").click(); + } + if(! $("#SBML-palette-heading").hasClass("collapsed")) { // collapse SBML + $("#SBML-palette-heading").click(); + } + } + else if (mapType === "HybridSbgn") { + if($("#PD-palette-heading").hasClass("collapsed")) { // expand PD + $("#PD-palette-heading").click(); + } + if($("#AF-palette-heading").hasClass("collapsed")) { // expand AF + $("#AF-palette-heading").click(); + } + if(! $("#SIF-palette-heading").hasClass("collapsed")) { // collapse SIF + $("#SIF-palette-heading").click(); + } + if(! $("#SBML-palette-heading").hasClass("collapsed")) { // collapse SBML + $("#SBML-palette-heading").click(); + } + } + else if (mapType === "SBML"){ + if(!$("#PD-palette-heading").hasClass("collapsed")) { // collapse PD + $("#PD-palette-heading").click(); + } + if(!$("#AF-palette-heading").hasClass("collapsed")) { // collapse AF + $("#AF-palette-heading").click(); + } + if(! $("#SIF-palette-heading").hasClass("collapsed")) { // collapse SIF + $("#SIF-palette-heading").click(); + } + if( $("#SBML-palette-heading").hasClass("collapsed")) { // expand SBML + $("#SBML-palette-heading").click(); + } + } + else if (mapType === "HybridAny") { + if($("#PD-palette-heading").hasClass("collapsed")) { // expand PD + $("#PD-palette-heading").click(); + } + if($("#AF-palette-heading").hasClass("collapsed")) { // expand AF + $("#AF-palette-heading").click(); + } + if($("#SIF-palette-heading").hasClass("collapsed")) { // expand SIF + $("#SIF-palette-heading").click(); + } + if($("#SBML-palette-heading").hasClass("collapsed")) { // expand SBML + $("#SBML-palette-heading").click(); + } + } + else { + console.warn('invalid map type!'); + } + } console.log('init the sbgnviz template/page'); @@ -59,6 +150,8 @@ module.exports = function() { pathsFromToQueryView = appUtilities.pathsFromToQueryView = new BackboneViews.PathsFromToQueryView({el: '#query-pathsfromto-table'}); commonStreamQueryView = appUtilities.commonStreamQueryView = new BackboneViews.CommonStreamQueryView({el: '#query-commonstream-table'}); pathsByURIQueryView = appUtilities.pathsByURIQueryView = new BackboneViews.PathsByURIQueryView({el: '#query-pathsbyURI-table'}); + mapByWPIDQueryView = appUtilities.mapByWPIDQueryView = new BackboneViews.MapByWPIDQueryView({el: '#query-mapbyWPID-table'}); + mapByReactomeIDQueryView = appUtilities.mapByReactomeIDQueryView = new BackboneViews.MapByReactomeIDQueryView({el: '#query-mapbyReactomeID-table'}); //promptSaveView = appUtilities.promptSaveView = new BackboneViews.PromptSaveView({el: '#prompt-save-table'}); // see PromptSaveView in backbone-views.js fileSaveView = appUtilities.fileSaveView = new BackboneViews.FileSaveView({el: '#file-save-table'}); saveUserPreferencesView = appUtilities.saveUserPreferencesView = new BackboneViews.SaveUserPreferencesView({el: '#user-preferences-save-table'}); @@ -66,16 +159,24 @@ module.exports = function() { promptConfirmationView = appUtilities.promptConfirmationView = new BackboneViews.PromptConfirmationView({el: '#prompt-confirmation-table'}); promptMapTypeView = appUtilities.promptMapTypeView = new BackboneViews.PromptMapTypeView({el: '#prompt-mapType-table'}); promptInvalidFileView = appUtilities.promptInvalidFileView = new BackboneViews.PromptInvalidFileView({el: '#prompt-invalidFile-table'}); + promptInvalidTypeWarning = appUtilities.promptInvalidTypeWarning = new BackboneViews.PromptInvalidTypeWarning({el: '#prompt-errorInvalidType-table'}); + sifMapWarning = appUtilities.sifMapWarning = new BackboneViews.SifMapWarning({el: '#errorSifMap-table'}); + promtErrorPD2AF = appUtilities.promtErrorPD2AF = new BackboneViews.PromtErrorPD2AF({el: '#prompt-errorPD2AF-table'}); promptFileConversionErrorView = appUtilities.promptFileConversionErrorView = new BackboneViews.PromptFileConversionErrorView({el: '#prompt-fileConversionError-table'}); - reactionTemplateView = appUtilities.reactionTemplateView = new BackboneViews.ReactionTemplateView({el: '#reaction-template-table'}); + reactionTemplateView = appUtilities.reactionTemplateView = new BackboneViews.ReactionTemplateView({el: '#sbgn-bricks-table'}); gridPropertiesView = appUtilities.gridPropertiesView = new BackboneViews.GridPropertiesView({el: '#grid-properties-table'}); fontPropertiesView = appUtilities.fontPropertiesView = new BackboneViews.FontPropertiesView({el: '#font-properties-table'}); infoboxPropertiesView = appUtilities.infoboxPropertiesView = new BackboneViews.InfoboxPropertiesView({el: '#infobox-properties-table'}); promptInvalidURIView = appUtilities.promptInvalidURIView = new BackboneViews.PromptInvalidURIView({el: '#prompt-invalidURI-table'}); + promptInvalidWPIDView = appUtilities.promptInvalidWPIDView = new BackboneViews.PromptInvalidWPIDView({el: '#prompt-invalidWPID-table'}); + promptInvalidReactomeIDView = appUtilities.promptInvalidReactomeIDView = new BackboneViews.PromptInvalidReactomeIDView({el: '#prompt-invalidReactomeID-table'}); promptInvalidURIWarning = appUtilities.promptInvalidURIWarning = new BackboneViews.PromptInvalidURIWarning({el: '#prompt-invalidURI-table'}); + promptInvalidReactomeIDWarning = appUtilities.promptInvalidReactomeIDWarning = new BackboneViews.PromptInvalidReactomeIDWarning({el: '#prompt-invalidReactomeID-table'}); + promptInvalidWPIDWarning = appUtilities.promptInvalidWPIDWarning = new BackboneViews.PromptInvalidWPIDWarning({el: '#prompt-invalidWPID-table'}); promptInvalidURLWarning = appUtilities.promptInvalidURLWarning = new BackboneViews.PromptInvalidURLWarning({el: '#prompt-invalidURL-table'}); promptInvalidImageWarning = appUtilities.promptInvalidImageWarning = new BackboneViews.PromptInvalidImageWarning({el: '#prompt-invalidImage-table'}); promptInvalidEdgeWarning = appUtilities.promptInvalidEdgeWarning = new BackboneViews.PromptInvalidEdgeWarning({el: '#prompt-invalidEdge-table'}); + exportErrorView = appUtilities.ExportErrorView = new BackboneViews.ExportErrorView({el: "#exportError-table",}); toolbarButtonsAndMenu(); keyboardShortcuts(); // Events triggered by sbgnviz module @@ -117,6 +218,7 @@ module.exports = function() { // Event triggered before file loaded by URL/URI $(document).on('sbgnvizLoadFromURL sbgnvizLoadFromURI', function(event, filename, cy) { + //alert("getting the file") var chiseInstance = appUtilities.getChiseInstance(cy); @@ -124,11 +226,23 @@ module.exports = function() { // get current general properties for cy var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var sbmlProperty = {} // inferNestingOnLoad and compoundPadding must be set before file loaded if (urlParams) { // filter map properties from the url parameters var mapPropsFromUrl = appUtilities.filterMapProperties(urlParams); + + var sbgnORsbml = appUtilities.filterMapTypeProperty(urlParams); + if(sbgnORsbml == "true") + { + sbmlProperty.sbmlMap = true + } + else + { + sbmlProperty.sbmlMap = false + } + if("inferNestingOnLoad" in mapPropsFromUrl) { currentGeneralProperties.inferNestingOnLoad = (mapPropsFromUrl.inferNestingOnLoad == 'true'); @@ -149,6 +263,7 @@ module.exports = function() { // set 'currentGeneralProperties' on scratchpad of cy appUtilities.setScratch(cy, 'currentGeneralProperties', currentGeneralProperties); + appUtilities.setScratch(cy, 'sbmlProperty', sbmlProperty); }); @@ -169,47 +284,10 @@ module.exports = function() { if ( isActiveInstance ) { // select appropriate palette depending on the map - if(chiseInstance.elementUtilities.mapType == "AF") { - if($("#AF-palette-heading").hasClass("collapsed")) { // expand AF - $("#AF-palette-heading").click(); - } - if(! $("#PD-palette-heading").hasClass("collapsed")) { // collapse PD - $("#PD-palette-heading").click(); - } - if(! $("#SIF-palette-heading").hasClass("collapsed")) { // collapse SIF - $("#SIF-palette-heading").click(); - } - } - else if(chiseInstance.elementUtilities.mapType == "PD"){ - if($("#PD-palette-heading").hasClass("collapsed")) { // expand PD - $("#PD-palette-heading").click(); - } - if(! $("#AF-palette-heading").hasClass("collapsed")) { // collapse AF - $("#AF-palette-heading").click(); - } - if(! $("#SIF-palette-heading").hasClass("collapsed")) { // collapse SIF - $("#SIF-palette-heading").click(); - } - } - else if(chiseInstance.elementUtilities.mapType == "SIF"){ - if($("#SIF-palette-heading").hasClass("collapsed")) { // expand SIF - $("#SIF-palette-heading").click(); - } - if(! $("#PD-palette-heading").hasClass("collapsed")) { // collapse PD - $("#PD-palette-heading").click(); - } - if(! $("#AF-palette-heading").hasClass("collapsed")) { // collapse AF - $("#AF-palette-heading").click(); - } - } - else { - console.warn('invalid map type!'); - } + updatePalette(chiseInstance.elementUtilities.mapType) } - cy.fit( cy.elements(":visible"), 20 ); - }); @@ -305,6 +383,7 @@ module.exports = function() { }); $("#file-input").change(function (e, fileObject) { + // use the active chise instance var chiseInstance = appUtilities.getActiveChiseInstance(); @@ -314,17 +393,75 @@ module.exports = function() { if ($(this).val() != "" || fileObject) { var file = this.files[0] || fileObject; - var loadCallbackSBGNMLValidity = function (text) { - validateSBGNML(text); - } + + var params, caller; + var fileExtension = file.name.split('.').pop(); + var loadCallbackInvalidityWarning = function () { promptInvalidFileView.render(); } + + if(fileExtension == 'sif'){ + var layoutBy = function() { + appUtilities.triggerLayout( cy, true ); + }; + params = [layoutBy, loadCallbackInvalidityWarning]; + caller = chiseInstance.loadSIFFile; + } + else if(fileExtension == 'sbml'){ + var layoutBy = function() { + appUtilities.triggerLayout( cy, true ); + }; + var success = function(data){ + chiseInstance.loadSBMLText(data.message, false, file.name, cy); + }; + var error = function(data){ + promptFileConversionErrorView.render(); + document.getElementById("file-conversion-error-message").innerText = "Conversion failed."; + }, + caller = chiseInstance.loadSbmlForSBML; + params = [success, error, layoutBy]; + } + else if(fileExtension == 'xml'){ + appUtilities.setFileContent(file.name); + var success = function(data){ + chiseInstance.loadSBGNMLText(data, true, file.name, cy); + }; + var error = function(data){ + promptFileConversionErrorView.render(); + document.getElementById("file-conversion-error-message").innerText = "Conversion failed."; + }; + caller = chiseInstance.loadCellDesigner; + params = [success, error]; + } + else if(fileExtension == 'gpml'){ + appUtilities.setFileContent(file.name); + var success = function(data){ + chiseInstance.loadSBGNMLText(data.message, false, file.name, cy); + }; + var error = function(data){ + promptFileConversionErrorView.render(); + document.getElementById("file-conversion-error-message").innerText = "Conversion failed."; + + }; + caller = chiseInstance.loadGpml; + params = [success, error]; + } + else{ + var loadCallbackSBGNMLValidity = function (text) { + //validateSBGNML(text); + } + params = [loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning]; + caller = chiseInstance.loadNwtFile; + } + if(cy.elements().length != 0) { - promptConfirmationView.render(function(){chiseInstance.loadNwtFile(file, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning)}); + promptConfirmationView.render(() => { + setTimeout(() => caller(file, ...params), 150); + }); } else { - chiseInstance.loadNwtFile(file, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning); + caller(file, ...params); } $(this).val(""); } @@ -340,7 +477,8 @@ module.exports = function() { if ($(this).val() != "") { var file = this.files[0]; appUtilities.setFileContent(file.name); - chiseInstance.loadCellDesigner(file, success = function(data){ + chiseInstance.loadCellDesigner(file, + success = function(data){ if (cy.elements().length !== 0) { promptConfirmationView.render(function () { chiseInstance.loadSBGNMLText(data, true, file.name, cy); @@ -352,8 +490,7 @@ module.exports = function() { }, error = function(data){ promptFileConversionErrorView.render(); - document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!"; - + document.getElementById("file-conversion-error-message").innerText = "Conversion failed."; }); $(this).val(""); @@ -377,10 +514,22 @@ module.exports = function() { }); $("#import-sif-style").click(function () { + //Check if current map type is SIF + var mapType = appUtilities.getActiveChiseInstance().elementUtilities.mapType; + if (mapType != "SIF") { + sifMapWarning.render(); + return; + } $("#sif-style-input").trigger('click'); }); $("#import-sif-layout").click(function () { + //Check if current map type is SIF + var mapType = appUtilities.getActiveChiseInstance().elementUtilities.mapType; + if (mapType != "SIF") { + sifMapWarning.render(); + return; + } $("#sif-layout-input").trigger('click'); }); @@ -423,7 +572,7 @@ module.exports = function() { var errorCallback = function(){ promptInvalidFileView.render(); }; - params ={data: data, fileName: "acc_2014vs2019.txt", errorCallback: errorCallback}; + params ={data: data, fileName: "acc_2014vs2019.txt", errorCallback: errorCallback, sampleExperiment: true}; experimentTabPanel.loadExperiment(params); experimentTabPanel.render(); }; @@ -442,13 +591,44 @@ module.exports = function() { }); $("#sbml-file").change(function () { + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use cy instance assocated with chise instance + var cy = appUtilities.getActiveCy(); + + + if ($(this).val() != "") { + var file = this.files[0]; + + var loadFcn = function() { + var layoutBy = function() { + appUtilities.triggerLayout( cy, true ); + }; + chiseInstance.loadSbmlForSBML(file, success = function(data){ + chiseInstance.loadSBMLText(data.message, false, file.name, cy); + }, error = function(data){ + promptFileConversionErrorView.render(); + document.getElementById("file-conversion-error-message").innerText = "Conversion failed."; + + }, layoutBy) + }; + if( cy.elements().length != 0) + promptConfirmationView.render( loadFcn ); + else + loadFcn(); + + $(this).val(""); + } + }); + + $("#gpml-file-input").change(function () { var chiseInstance = appUtilities.getActiveChiseInstance(); var cy = appUtilities.getActiveCy(); if ($(this).val() != "") { var file = this.files[0]; appUtilities.setFileContent(file.name); - chiseInstance.loadSbml(file, success = function(data){ + chiseInstance.loadGpml(file, success = function(data){ if (cy.elements().length !== 0) { promptConfirmationView.render(function () { chiseInstance.loadSBGNMLText(data.message, false, file.name, cy); @@ -460,7 +640,7 @@ module.exports = function() { }, error = function(data){ promptFileConversionErrorView.render(); - document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!"; + document.getElementById("file-conversion-error-message").innerText = "Conversion failed."; }); @@ -609,22 +789,29 @@ module.exports = function() { // unlock graph topolpgy in case it is locked chiseInstance.elementUtilities.unlockGraphTopology(); - // reset map name and description // default map name should be a string that contains the network id - currentGeneralProperties.mapName = appUtilities.getDefaultMapName(networkId); - currentGeneralProperties.mapDescription = appUtilities.defaultGeneralProperties.mapDescription; - + if(!currentGeneralProperties.mapPD2AFConverted) {// if the file don't have a specified map name from pd map to af map conversion + currentGeneralProperties.mapName = appUtilities.getDefaultMapName(networkId); + currentGeneralProperties.mapDescription = appUtilities.defaultGeneralProperties.mapDescription; + } + currentGeneralProperties.mapPD2AFConverted = false; // Map name loaded, when new map is loading to the canvas name should be change + // set recalculate layout on complexity management based on map size if (cy.nodes().length > 1250){ currentGeneralProperties.recalculateLayoutOnComplexityManagement = false; } + if(currentGeneralProperties.inferNestingOrigin) + currentGeneralProperties.inferNestingOnLoad = currentGeneralProperties.inferNestingOrigin; // get and set properties from file var properties = chiseInstance.getMapProperties(); // init map properties - var mapProperties = ( properties && properties.mapProperties ) ? properties.mapProperties : {}; - + var mapProperties = (properties && properties['nwt:mapProperties']) + ? properties['nwt:mapProperties'] + : (properties && properties.mapProperties) + ? properties.mapProperties + : {}; var urlParams = appUtilities.getScratch(cy, 'urlParams'); if (urlParams) { @@ -644,6 +831,16 @@ module.exports = function() { } // filter map properties from the url parameters + + // get applyLayout value before map properties are filtered, apply layout + // isn't really a map property so its not added to sbgnviz + // validMapProperties + const applyLayout = urlParams.applyLayoutOnURL === "true"; + const fromURL = urlParams.url !== undefined; + if (urlParams.compoundPadding) { + const compoundPadding = urlParams.compoundPadding; + chiseInstance.setCompoundPadding(Number(compoundPadding)); + } var mapPropsFromUrl = appUtilities.filterMapProperties(urlParams); if(!("inferNestingOnLoad" in mapPropsFromUrl)) { @@ -652,7 +849,24 @@ module.exports = function() { if(!("compoundPadding" in mapPropsFromUrl)){ mapPropsFromUrl.compoundPadding = 0; - } + } + + if (fromURL && applyLayout) { + let currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); + + // Below is copied from sbgnviz.graphUtilities.updateGraph + let preferences = {}; + if(cy.nodes().length > 3000 || cy.edges().length > 3000) { + preferences.quality = "draft"; + } + preferences.animate = false; + preferences.randomize = true; + preferences = $.extend({}, currentLayoutProperties, preferences); + layoutPropertiesView.applyLayout(preferences); + } + if (urlParams.mapColorScheme) { + appUtilities.applyMapColorScheme(urlParams.mapColorScheme, currentGeneralProperties.mapColorSchemeStyle, appUtilities.colorSchemeInspectorView); + } if (fromURL && applyLayout) { let currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); @@ -707,6 +921,9 @@ module.exports = function() { for(var nodeClass in appUtilities.mapColorSchemes[currentGeneralProperties.mapColorScheme]['values']){ classBgColor = appUtilities.mapColorSchemes[currentGeneralProperties.mapColorScheme]['values'][nodeClass]; // nodeClass may not be defined in the defaultProperties (for edges, for example) + + var bgObj = chiseInstance.elementUtilities.getBackgroundImageObjs(cy.nodes()); + chiseInstance.removeBackgroundImage(cy.nodes(), bgObj); if(nodeClass in chiseInstance.elementUtilities.getDefaultProperties()){ chiseInstance.undoRedoActionFunctions.setDefaultProperty({class: nodeClass, name: 'background-image', value: ''}); chiseInstance.undoRedoActionFunctions.setDefaultProperty({class: nodeClass, name: 'background-color', value: classBgColor}); @@ -728,6 +945,8 @@ module.exports = function() { chiseInstance.undoRedoActionFunctions.setDefaultProperty({class: nodeClass, name: 'background-position-x', value: '50%'}); chiseInstance.undoRedoActionFunctions.setDefaultProperty({class: nodeClass, name: 'background-position-y', value: '50%'}); chiseInstance.undoRedoActionFunctions.setDefaultProperty({class: nodeClass, name: 'background-image', value: classBgImg}); + chiseInstance.undoRedoActionFunctions.setDefaultProperty({class: nodeClass, name: 'background-width', value: '100%'}); + chiseInstance.undoRedoActionFunctions.setDefaultProperty({class: nodeClass, name: 'background-height', value: '100%'}); } } } @@ -736,6 +955,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.getTabLabelName(chiseInstance.getMapType())); + + cy.fit( cy.elements(":visible"), 20 ); }); $("#PD-legend").click(function (e) { @@ -753,6 +977,11 @@ module.exports = function() { $("#SIF_legend_modal").modal('show'); }); + $("#SBML-legend").click(function (e) { + e.preventDefault(); + $("#SBML_legend_modal").modal('show'); + }); + $("#quick-help, #quick-help-icon").click(function (e) { e.preventDefault(); $("#quick_help_modal").modal('show'); @@ -797,7 +1026,11 @@ module.exports = function() { "#load-sample17" : 'RTN4-controllers-and-binding-proteins.nwt', "#load-sample18" : 'signaling-downstream-of-AKT2-3.nwt', "#load-sample19" : 'pd_learners_card.nwt', - "#load-sample20" : 'af_learners_card.nwt' + "#load-sample20" : 'af_learners_card.nwt', + "#load-sample21" : 'RUNX1_regulates_transcription_of_genes_involved_in_WNT_signaling.nwt', + "#load-sample22" : 'PTK6_Activates_STAT3.nwt', + "#load-sample23" : 'pharmacokinetics_of_PFOA_and_PFOS_in_the_monkey.nwt', + "#load-sample24" : 'interaction_topologies_of_MAPK_cascade.nwt' }; for ( var selector in selectorToSampleFileName ) { @@ -806,7 +1039,7 @@ module.exports = function() { // use active cy instance var cy = appUtilities.getActiveCy(); - + if(cy.elements().length != 0) { promptConfirmationView.render(function(){loadSample(selectorToSampleFileName[selector])}); } @@ -844,7 +1077,7 @@ module.exports = function() { cy.edges().select(); }); - $("#hide-selected, #hide-selected-icon").click(function(e) { + $("#hide-selected-smart, #hide-selected-smart-icon").click(function(e) { // use active cy instance var cy = appUtilities.getActiveCy(); @@ -853,6 +1086,13 @@ module.exports = function() { $('#inspector-palette-tab a').tab('show'); }); + $("#hide-selected-simple, #hide-selected-simple-icon").click(function(e) { + var cy = appUtilities.getActiveCy(); + + appUtilities.hideElesSimple(cy.elements(":selected")); + $('#inspector-palette-tab a').tab('show'); + }); + $("#show-selected, #show-selected-icon").click(function(e) { // use the active chise instance @@ -895,7 +1135,7 @@ module.exports = function() { var selectedNodeSize = cy.nodes(':selected').length; - chiseInstance.deleteNodesSmart(cy.nodes(':selected')); + appUtilities.deleteNodesSmart(cy.nodes(':selected')); if(!chiseInstance.elementUtilities.isGraphTopologyLocked() && selectedNodeSize > 0) $('#inspector-palette-tab a').tab('show'); }); @@ -909,7 +1149,7 @@ module.exports = function() { var cy = chiseInstance.getCy(); //Remove processes and other nodes which cannot be resized according to content - var toBeResized = cy.nodes().difference('node[class*="process"],[class*="association"],[class*="dissociation"],[class="source and sink"],[class="and"],[class="or"],[class="not"],[class="delay"],:parent'); + var toBeResized = cy.nodes().difference('node[class*="process"],[class*="association"],[class*="dissociation"],[class="empty set"],[class="and"],[class="or"],[class="not"],[class="delay"],[class="degradation"],[class="unknown logical operator"],:parent'); appUtilities.resizeNodesToContent(toBeResized); @@ -967,7 +1207,112 @@ module.exports = function() { chiseInstance.highlightProcesses(cy.nodes(':selected')); }); + // PD map to AF map conversion + $("#highlight-errors-of-pd2af").click(function (e) { + + var chiseInstance = appUtilities.getActiveChiseInstance(); + var chiseSpinnerInstance = appUtilities.getActiveChiseInstance(); + var filename = document.getElementById('file-name').innerHTML; + var fExt = 'sbgn'; + filename = filename.substring(0, filename.lastIndexOf('.')).concat(".").concat(fExt); + + // Get the map from the canvas + + var cy = chiseInstance.getCy(); + var nodes = cy.nodes().filter( function( node ) { + return node.visible(); + } ); + + var edges = cy.edges().filter( function( edge ) { + return edge.visible(); + } ); + + var renderInfo = appUtilities.getAllStyles(cy, nodes, edges); + var properties = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties'); + + var file = chiseInstance.getSbgnvizInstance().convertSbgn(filename, "plain", renderInfo, properties, nodes, edges, true); + if(chiseInstance.getMapType() != 'PD'){ + promptInvalidTypeWarning.render(); + return; + } + + if(nodes.length == 0 || edges.length == 0){ + promtErrorPD2AF.render("No visible map found!"); + return; + } + var currentGeneralProperties = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties'); + var inferNestingOrigin = currentGeneralProperties.inferNestingOnLoad; + var mapColorScheme = currentGeneralProperties.mapColorScheme; + var mapColorSchemeStyle = currentGeneralProperties.mapColorSchemeStyle; + chiseSpinnerInstance.startSpinner("layout-spinner"); + + // pd2af returns filename and file url + $.ajax({ + // After deploying Bridge Server (pd2af-webservice) write the bridge server's URL but leave the /convert + // url: "https://pd2afwebservice.herokuapp.com/convert", + url: "http://139.179.21.94:4000/convert", //public server url + type: "POST", + ContentType: 'multipart/form-data; boundary=----WebKitFormBoundaryQzlzmdgbQfbawnvk', + data: { + 'file': file, + 'filename': filename + }, + success: function (data) { + // If response returns error display the message + if(data.name==='Error' || data.error || data.name==='error'){ + chiseSpinnerInstance.endSpinner("layout-spinner"); + promtErrorPD2AF.render(data.message); + }else{ + chiseSpinnerInstance.endSpinner("layout-spinner"); + filename = data.filename; + + // Create new network + var current = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties'); + var networkName = current.mapName; + var networkDescription = current.mapDescription; + // If networkDescription itself is used to create the description text, original map description would also be changed + if(networkDescription ){ + var st = JSON.stringify(networkDescription[0]); + st = st.slice(1); // For removing " at the beginning + st = "AF map of " + st.charAt(0).toLowerCase() + st.slice(1); + st = st.slice(0,-1); // For removing " at the end + } + networkName += " AF"; + var newNetwork = appUtilities.createNewNetwork(networkName, st); // Create new network (new Newt tab) + var currentGeneralProperties = appUtilities.getScratch(appUtilities.getActiveCy(), 'currentGeneralProperties'); + currentGeneralProperties.mapPD2AFConverted = true; // Set it to true so load will not overwrite the map name and description + currentGeneralProperties.inferNestingOrigin = inferNestingOrigin; + currentGeneralProperties.inferNestingOnLoad = true; + + currentGeneralProperties.mapColorSchemeStyle = mapColorSchemeStyle; + currentGeneralProperties.mapColorScheme = mapColorScheme; + appUtilities.setScratch(appUtilities.getActiveCy(), 'currentGeneralProperties', currentGeneralProperties); + + chiseInstance = appUtilities.getActiveChiseInstance(); + var fileExtension = filename.split('.'); + var fileToLoad = new File([data.body], filename, { + type: 'text/sbgn', + lastModified: Date.now() + }); + setTimeout(function(){ + chiseInstance.loadSBGNMLFile(fileToLoad, ()=>{}, ()=>{}, data); + }, 1000); + appUtilities.setScratch(appUtilities.getActiveCy(), 'currentGeneralProperties', currentGeneralProperties); + appUtilities.applyMapColorScheme(currentGeneralProperties.mapColorScheme, currentGeneralProperties.mapColorSchemeStyle, appUtilities.colorSchemeInspectorView); + } + }, + error: function (data) { + chiseSpinnerInstance.endSpinner("layout-spinner"); + if(data.status == 0) + promtErrorPD2AF.render("Server might be offline!"); + + else + promtErrorPD2AF.render(data.message); + } + }); + }); + $("#highlight-errors-of-validation, #highlight-errors-of-validation-icon").click(function (e) { modeHandler.enableReadMode(); // use active chise instance @@ -1049,6 +1394,14 @@ module.exports = function() { pathsByURIQueryView.render(); }); + $("#query-mapbyWPID").click(function (e) { + mapByWPIDQueryView.render(); + }); + + $("#query-mapbyReactomeID").click(function (e) { + mapByReactomeIDQueryView.render(); + }); + $("#grid-properties").click(function (e) { gridPropertiesView.render(); }); @@ -1202,31 +1555,23 @@ module.exports = function() { viewUtilities.zoomToSelected(cy.$(':selected')); }); - $("#perform-layout, #perform-layout-icon").click(function (e) { - + $("#perform-layout, #perform-layout-icon").click( function (e) { // use active chise instance var chiseInstance = appUtilities.getActiveChiseInstance(); - // TODO think whether here is the right place to start the spinner - chiseInstance.startSpinner("layout-spinner"); - - setTimeout(() => { - - // use the associated cy instance - var cy = chiseInstance.getCy(); - // if there is no element in the cy instance, then return directly + var cy = chiseInstance.getCy(); if(cy.elements().length == 0) { return; } + chiseInstance.startSpinner("layout-spinner") + setTimeout(() => { // get current general properties for cy var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var preferences = { animate: (cy.nodes().length > 3000 || cy.edges().length > 3000) ? false : currentGeneralProperties.animateOnDrawingChanges }; - layoutPropertiesView.applyLayout(preferences); }, 0); }); @@ -1236,22 +1581,16 @@ module.exports = function() { // use active chise instance var chiseInstance = appUtilities.getActiveChiseInstance(); - // TODO think whether here is the right place to start the spinner - chiseInstance.startSpinner("layout-spinner"); - - setTimeout(() => { - - // use the associated cy instance - var cy = chiseInstance.getCy(); - // if there is no element in the cy instance, then return directly + var cy = chiseInstance.getCy(); if(cy.elements().length == 0) { return; } + chiseInstance.startSpinner("layout-spinner"); + + setTimeout(() => { // get current general properties for cy var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - - var preferences = { quality: (cy.nodes().length > 3000 || cy.edges().length > 3000) ? "draft" : "default", animate: (cy.nodes().length > 3000 || cy.edges().length > 3000) ? false : currentGeneralProperties.animateOnDrawingChanges, @@ -1279,33 +1618,15 @@ module.exports = function() { }); $("#save-as-png").click(function (evt) { - - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - var filename = document.getElementById('file-name').innerHTML; - filename = filename.substring(0,filename.lastIndexOf('.')) + ".png"; - chiseInstance.saveAsPng(filename); // the default filename is 'network.png' + fileSaveView.render("png", null, null); }); $("#save-as-jpg").click(function (evt) { - - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - var filename = document.getElementById('file-name').innerHTML; - filename = filename.substring(0,filename.lastIndexOf('.')) + ".jpg"; - chiseInstance.saveAsJpg(filename); // the default filename is 'network.jpg' + fileSaveView.render("jpg", null, null); }); $("#save-as-svg").click(function (evt) { - - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - var filename = document.getElementById('file-name').innerHTML; - filename = filename.substring(0,filename.lastIndexOf('.')) + ".svg"; - chiseInstance.saveAsSvg(filename); // the default filename is 'network.jpg' + fileSaveView.render("svg", null, null); }); $("#save-as-nwt, #save-icon").click(function (evt) { @@ -1351,17 +1672,11 @@ module.exports = function() { }); $("#export-to-sif-layout").click(function (evt) { - var chiseInstance = appUtilities.getActiveChiseInstance(); - var filename = document.getElementById('file-name').innerHTML; - filename = filename.substring(0,filename.lastIndexOf('.')) + ".txt"; - chiseInstance.exportLayoutData( filename, true ); + fileSaveView.render("sifLayout", null, null); }); $("#export-to-plain-sif").click(function (evt) { - var chiseInstance = appUtilities.getActiveChiseInstance(); - var filename = document.getElementById('file-name').innerHTML; - filename = filename.substring(0,filename.lastIndexOf('.')) + ".sif"; - chiseInstance.saveAsPlainSif( filename, true ); + fileSaveView.render("sif", null, null); }); $("#export-as-sbgnml-plain-file").click(function (evt) { @@ -1378,7 +1693,7 @@ module.exports = function() { $("#export-as-gpml").click(function (evt) { fileSaveView.render("gpml", null, null); - }); + }); $("#add-complex-for-selected").click(function (e) { @@ -1427,17 +1742,18 @@ module.exports = function() { inspectorUtilities.handleSBGNInspector(); }); - $("#create-reaction-template").click(function (e) { + $("#open-sbgn-bricks-modal").click(function (e) { var chiseInstance = appUtilities.getActiveChiseInstance(); var mapType = chiseInstance.getMapType(); - if(mapType == 'SIF' || mapType == 'AF'){ - return; + if(mapType != 'PD' && mapType != 'HybridSbgn' && mapType != 'HybridAny' ){ + exportErrorView.render(); + document.getElementById("export-error-message").innerText = "SBGN Bricks can only be used with PD maps!"; } - - reactionTemplateView.render(); + else + reactionTemplateView.render(); }); $("#clone-selected").click(function (e) { @@ -1533,7 +1849,8 @@ module.exports = function() { $(document).on('mousedown', '.node-palette img', function (e) { e.preventDefault(); // needed for dragging, otherwise the mouse release event cannot be fired on another element dragAndDropPlacement = true; - var imgPath = appUtilities.getDragImagePath( $(this).attr('value') ); + // var imgPath = appUtilities.getDragImagePath( $(this).attr('value') ); + var imgPath = $(this).attr('src'); appUtilities.addDragImage(imgPath, $(this).css('width'), $(this).css('height')); $('.node-palette img').removeClass('selected-mode'); // Make any image inside node palettes non selected @@ -1589,6 +1906,14 @@ module.exports = function() { $('#marquee-zoom-mode-icon').click(function(e){ modeHandler.setMarqueeZoomMode(); }); + + $('#lasso-mode-icon').click(function(e){ + modeHandler.setLassoMode(); + }); + + $('#sbgn-bricks-icon').click(function() { + reactionTemplateView.render(); + }); $('#add-node-mode-icon').click(function (e) { modeHandler.setAddNodeMode(); @@ -1669,10 +1994,8 @@ module.exports = function() { $(document).on("keydown", function (event){ if(!appUtilities.zoomShortcut){ if(event.shiftKey){ - //left command key code in webkit browsers (chrome, safari, opera) = 91 - //right command key code in webkit browsers = 93 - //command key code in firefox = 224 - if(event.ctrlKey || event.keyCode == "91" || event.keyCode == "93" || event.keyCode == "224"){ + // meta key for command key + if(event.ctrlKey || event.metaKey){ //variable toggle to prevent multiple calls at the same time appUtilities.zoomShortcut = true; //enable zoom shortcut mode @@ -1683,12 +2006,20 @@ module.exports = function() { }); + // Update inspector on tab change + $('#sbgn-inspector a[data-toggle="tab"]').on('shown.bs.tab', function () { + inspectorUtilities.handleSBGNInspector(); + }); + // on active network tab change $(document).on('shown.bs.tab', '#network-tabs-list a[data-toggle="tab"]', function (e) { var target = $(e.target).attr("href"); // activated tab - console.log(target); appUtilities.setActiveNetwork(target); inspectorUtilities.handleSBGNInspector(); }); + + $(document).on("changeMapTypeFromMenu", function(event, newMapType) { + updatePalette(newMapType); + }); } }; diff --git a/app/js/app-mode-handler.js b/app/js/app-mode-handler.js index 460012a57..519f6bc46 100644 --- a/app/js/app-mode-handler.js +++ b/app/js/app-mode-handler.js @@ -58,6 +58,10 @@ var modeHandler = { var viewUtilities = cy.viewUtilities('get'); viewUtilities.disableMarqueeZoom(); } + else if(modeProperties.mode == "lasso-mode") { + var viewUtilities = cy.viewUtilities('get') + viewUtilities.disableLassoMode(); + } if (modeProperties.mode != "add-node-mode") { cy.elements().unselect(); @@ -67,6 +71,7 @@ var modeHandler = { $('#add-edge-mode-icon').parent().removeClass('selected-mode'); $('#add-node-mode-icon').parent().addClass('selected-mode'); $('#marquee-zoom-mode-icon').parent().removeClass('selected-mode'); + $('#lasso-mode-icon').parent().removeClass('selected-mode'); $('.node-palette img').removeClass('inactive-palette-element'); $('.edge-palette img').addClass('inactive-palette-element'); @@ -121,6 +126,10 @@ var modeHandler = { var viewUtilities = cy.viewUtilities('get'); viewUtilities.disableMarqueeZoom(); } + else if(modeProperties.mode == "lasso-mode") { + var viewUtilities = cy.viewUtilities('get') + viewUtilities.disableLassoMode(); + } if (modeProperties.mode != "add-edge-mode") { cy.elements().unselect(); @@ -130,6 +139,7 @@ var modeHandler = { $('#add-edge-mode-icon').parent().addClass('selected-mode'); $('#add-node-mode-icon').parent().removeClass('selected-mode'); $('#marquee-zoom-mode-icon').parent().removeClass('selected-mode'); + $('#lasso-mode-icon').parent().removeClass('selected-mode'); $('.node-palette img').addClass('inactive-palette-element'); $('.edge-palette img').removeClass('inactive-palette-element'); @@ -169,12 +179,17 @@ var modeHandler = { var viewUtilities = cy.viewUtilities('get') viewUtilities.disableMarqueeZoom(); } + else if(modeProperties.mode == "lasso-mode") { + var viewUtilities = cy.viewUtilities('get') + viewUtilities.disableLassoMode(); + } if (modeProperties.mode != "selection-mode") { $('#select-mode-icon').parent().addClass('selected-mode'); $('#add-edge-mode-icon').parent().removeClass('selected-mode'); $('#add-node-mode-icon').parent().removeClass('selected-mode'); $('#marquee-zoom-mode-icon').parent().removeClass('selected-mode'); + $('#lasso-mode-icon').parent().removeClass('selected-mode'); $('.node-palette img').addClass('inactive-palette-element'); $('.edge-palette img').addClass('inactive-palette-element'); @@ -203,11 +218,17 @@ var modeHandler = { // access mode properties of the cy var modeProperties = appUtilities.getScratch(cy, 'modeProperties'); + if(modeProperties.mode == "lasso-mode") { + var viewUtilities = cy.viewUtilities('get') + viewUtilities.disableLassoMode(); + } + if(modeProperties.mode != "marquee-zoom-mode"){ $('#select-mode-icon').parent().removeClass('selected-mode'); $('#add-edge-mode-icon').parent().removeClass('selected-mode'); $('#add-node-mode-icon').parent().removeClass('selected-mode'); $('#marquee-zoom-mode-icon').parent().addClass('selected-mode'); + $('#lasso-mode-icon').parent().removeClass('selected-mode'); $('.node-palette img').addClass('inactive-palette-element'); $('.edge-palette img').addClass('inactive-palette-element'); @@ -234,7 +255,49 @@ var modeHandler = { // reset mode properties of cy appUtilities.setScratch(cy, 'modeProperties', modeProperties); }, + setLassoMode: function(_cy){ + // if _cy param is not set use the active cy instance + var cy = _cy || appUtilities.getActiveCy(); + $(cy.container()).find('canvas').removeClass('add-edge-cursor'); + $(cy.container()).find('canvas').removeClass('add-node-cursor'); + $(cy.container()).find('canvas').removeClass('zoom-cursor'); + + // access mode properties of the cy + var modeProperties = appUtilities.getScratch(cy, 'modeProperties'); + if(modeProperties.mode == "marquee-zoom-mode") { + var viewUtilities = cy.viewUtilities('get') + viewUtilities.disableMarqueeZoom(); + } + + if(modeProperties.mode != "lasso-mode"){ + $('#select-mode-icon').parent().removeClass('selected-mode'); + $('#add-edge-mode-icon').parent().removeClass('selected-mode'); + $('#add-node-mode-icon').parent().removeClass('selected-mode'); + $('#marquee-zoom-mode-icon').parent().removeClass('selected-mode'); + $('#lasso-mode-icon').parent().addClass('selected-mode'); + $('.node-palette img').addClass('inactive-palette-element'); + $('.edge-palette img').addClass('inactive-palette-element'); + + var callbackFunc = function(){ + modeHandler.setSelectionMode(cy); + } + + modeProperties.mode = "lasso-mode"; + var viewUtilities = cy.viewUtilities('get'); + viewUtilities.enableLassoMode(callbackFunc); + + + $('.selected-mode-sustainable').removeClass('selected-mode-sustainable'); + modeProperties.sustainMode = false; + } + else{ + modeHandler.setSelectionMode(cy); + } + + // reset mode properties of cy + appUtilities.setScratch(cy, 'modeProperties', modeProperties); + }, //function to set the mode to the previous mode setPreviousMode: function(){ if(modeHandler.perviousMode == 'selection-mode'){ @@ -243,128 +306,35 @@ var modeHandler = { modeHandler.setAddNodeMode(); }else if(modeHandler.perviousMode == 'add-edge-mode'){ modeHandler.setAddEdgeMode(); - }else{//marquee zoom mode + }else if(modeHandler.perviousMode == 'marquee-zoom-mode'){ //marquee zoom mode modeHandler.setMarqueeZoomMode(); + }else{ + modeHandler.setLassoMode(); //lasso mode } }, - //handlers for shortcut zoom mode - zoomShortcutTabStartHandler : undefined, - zoomShortcutTabEndHandler:undefined, - zoomShortcutKeyUpHandler:undefined, - perviousMode : 'selection-mode', + perviousMode : 'selection-mode', setShortcutZoomMode: function(_cy){ - //shift+control pressed tracking variable - var ctrlShiftKeyDown = true; - - //reset handlers - modeHandler.zoomShortcutTabStartHandler = undefined; - modeHandler.zoomShortcutTabEndHandler = undefined; - modeHandler.zoomShortcutKeyUpHandler = undefined; - - var rect_start_pos_x , rect_start_pos_y,rect_end_pos_x,rect_end_pos_y; var cy = _cy || appUtilities.getActiveCy(); //store the current mode to return to it after zoom shortcut terminates var modeProperties = appUtilities.getScratch(cy, 'modeProperties'); modeHandler.perviousMode = modeProperties.mode; modeHandler.setSelectionMode(); - //disable cytoscape shift+drage selection - cy.autounselectify(true); - //change the curser to zoom curser + $("#select-mode-icon").parent().removeClass("selected-mode"); + $("#marquee-zoom-mode-icon").parent().addClass("selected-mode"); + //change the cursor to zoom cursor $(cy.container()).find('canvas').removeClass('add-edge-cursor'); $(cy.container()).find('canvas').removeClass('add-node-cursor'); $(cy.container()).find('canvas').addClass('zoom-cursor'); - //handler to detect start coordinates of mouse drag - cy.one('tapstart', modeHandler.zoomShortcutTabStartHandler = function(event){ - if (ctrlShiftKeyDown) { - rect_start_pos_x = event.position.x; - rect_start_pos_y = event.position.y; - rect_end_pos_x = undefined; - } - }); - //handler to handle shift+ctrl key up, if shift or ctrl key is up then exit zoom shortcut mode document.addEventListener('keyup', modeHandler.zoomShortcutKeyUpHandler = function(event){ - if(event.shiftKey || event.ctrlKey || event.keyCode == "91" || event.keyCode == "93" || event.keyCode == "224") { - ctrlShiftKeyDown = false; - var cy = appUtilities.getActiveCy(); - cy.autounselectify(false); + if(event.shiftKey || event.ctrlKey || event.metaKey) { modeHandler.endShorcutZoomMode(); } - }); - - ////handler to detect end coordinates of mouse drag and apply the zooming action - cy.one('tapend', modeHandler.zoomShortcutTabEndHandler = function(event){ - var cy = appUtilities.getActiveCy(); - rect_end_pos_x = event.position.x; - rect_end_pos_y = event.position.y; - //check whether corners of rectangle is undefined - //abort shortcut zoom if one corner is undefined - if( rect_start_pos_x == undefined || rect_end_pos_x == undefined){ - cy.autounselectify(false); - modeHandler.endShorcutZoomMode(); - return; - } - //Reoder rectangle positions - //Top left of the rectangle (rect_start_pos_x, rect_start_pos_y) - //right bottom of the rectangle (rect_end_pos_x, rect_end_pos_y) - if(rect_start_pos_x > rect_end_pos_x){ - var temp = rect_start_pos_x; - rect_start_pos_x = rect_end_pos_x; - rect_end_pos_x = temp; - } - if(rect_start_pos_y > rect_end_pos_y){ - var temp = rect_start_pos_y; - rect_start_pos_y = rect_end_pos_y; - rect_end_pos_y = temp; - } - - //Extend sides of selected rectangle to 200px if less than 100px - if(rect_end_pos_x - rect_start_pos_x < 200){ - var extendPx = (200 - (rect_end_pos_x - rect_start_pos_x)) / 2; - rect_start_pos_x -= extendPx; - rect_end_pos_x += extendPx; - } - if(rect_end_pos_y - rect_start_pos_y < 200){ - var extendPx = (200 - (rect_end_pos_y - rect_start_pos_y)) / 2; - rect_start_pos_y -= extendPx; - rect_end_pos_y += extendPx; - } - - //Check whether rectangle intersects with bounding box of the graph - //if not abort shortcut zoom - if((rect_start_pos_x > cy.elements().boundingBox().x2) - ||(rect_end_pos_x < cy.elements().boundingBox().x1) - ||(rect_start_pos_y > cy.elements().boundingBox().y2) - ||(rect_end_pos_y < cy.elements().boundingBox().y1)){ - cy.autounselectify(false); - modeHandler.endShorcutZoomMode(); - return; - } - - //Calculate zoom level - var zoomLevel = Math.min( cy.width()/ ( Math.abs(rect_end_pos_x- rect_start_pos_x)), - cy.height() / Math.abs( rect_end_pos_y - rect_start_pos_y)); - - var diff_x = cy.width() / 2 - (cy.pan().x + zoomLevel * (rect_start_pos_x + rect_end_pos_x) / 2); - var diff_y = cy.height() / 2 - (cy.pan().y + zoomLevel * (rect_start_pos_y + rect_end_pos_y) / 2); - - cy.animate({ - panBy : {x: diff_x, y: diff_y}, - zoom : zoomLevel, - duration: options.zoomAnimationDuration, - complete: function(){ - modeHandler.endShorcutZoomMode(); - cy.autounselectify(false); - } - }); - }); - - - + }); }, //function to enable read mode @@ -382,10 +352,9 @@ var modeHandler = { }, //function to reset shortcut zoom mode resources and remove handlers endShorcutZoomMode : function(){ - var cy = appUtilities.getActiveCy(); - cy.removeListener('tapstart', modeHandler.zoomShortcutTabStartHandler ); - cy.removeListener('tapend', modeHandler.zoomShortcutTabEndHandler); document.removeEventListener('keyup', modeHandler.zoomShortcutKeyUpHandler); + $("#select-mode-icon").parent().addClass("selected-mode"); + $("#marquee-zoom-mode-icon").parent().removeClass("selected-mode"); modeHandler.setPreviousMode(); appUtilities.zoomShortcut = false; }, @@ -398,7 +367,8 @@ var modeHandler = { $("#perform-layout").parent("li").removeClass("disabled"); $("#delete-selected-simple").parent("li").removeClass("disabled"); $("#delete-selected-smart").parent("li").removeClass("disabled"); - $("#hide-selected").parent("li").removeClass("disabled"); + $("#hide-selected-simple").parent("li").removeClass("disabled"); + $("#hide-selected-smart").parent("li").removeClass("disabled"); $("#show-selected").parent("li").removeClass("disabled"); $("#show-all").parent("li").removeClass("disabled"); $("#make-compound-complex").parent("li").removeClass("disabled"); @@ -415,7 +385,8 @@ var modeHandler = { $("#perform-layout").parent("li").addClass("disabled"); $("#delete-selected-simple").parent("li").addClass("disabled"); $("#delete-selected-smart").parent("li").addClass("disabled"); - $("#hide-selected").parent("li").addClass("disabled"); + $("#hide-selected-simple").parent("li").addClass("disabled"); + $("#hide-selected-smart").parent("li").addClass("disabled"); $("#show-selected").parent("li").addClass("disabled"); $("#show-all").parent("li").addClass("disabled"); $("#make-compound-complex").parent("li").addClass("disabled"); diff --git a/app/js/app-undo-actions-factory.js b/app/js/app-undo-actions-factory.js index 4941dd71f..bb773f6e3 100644 --- a/app/js/app-undo-actions-factory.js +++ b/app/js/app-undo-actions-factory.js @@ -269,7 +269,7 @@ module.exports = function (cy) { appUndoActions.loadExperimentData = function (param){ var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); - var result = chiseInstance.parseData(param.data, param.fileName, param.errorCallback); + var result = chiseInstance.parseData(param.data, param.fileName, param.errorCallback, param.sampleExperiment); if(result != "Error"){ appUndoActions.changeMenu(param.self.params.experimentDescription); } @@ -361,16 +361,11 @@ module.exports = function (cy) { var highlightColor = $('#highlight-color').val(); var extraHighlightThickness = Number($('#highlight-thickness').val()); - viewUtilities.changeHighlightStyle(0, { - 'border-width' : function (ele) { - return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); - }, 'border-color': highlightColor - }, { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); }, - 'line-color': highlightColor, - 'source-arrow-color': highlightColor, - 'target-arrow-color': highlightColor - }); + viewUtilities.changeHighlightStyle( + 0, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} + ); } return result; diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js index f409c8522..9269962b4 100644 --- a/app/js/app-utilities.js +++ b/app/js/app-utilities.js @@ -25,8 +25,9 @@ appUtilities.mapTypesToViewableText = { 'PD': 'PD', 'AF': 'AF', 'SIF': 'SIF', - 'HybridSbgn' : 'Hybrid (PD,AF)' , - 'HybridAny' : 'Hybrid (PD,AF,SIF)' + 'SBML': 'SBML', + 'HybridSbgn' : 'PD+AF' , + 'HybridAny' : 'PD+AF+SIF+SBML' }; // Set a single property on scratchpad of an element or the core appUtilities.setScratch = function (cyOrEle, name, val) { @@ -113,6 +114,7 @@ appUtilities.adjustUIComponents = function (_cy) { $('#add-edge-mode-icon').parent().removeClass('selected-mode-sustainable'); $('#add-node-mode-icon').parent().removeClass('selected-mode-sustainable'); $('#marquee-zoom-mode-icon').parent().removeClass('selected-mode'); + $('#lasso-mode-icon').parent().removeClass('selected-mode'); $('.node-palette img').addClass('inactive-palette-element'); $('.edge-palette img').addClass('inactive-palette-element'); $('.selected-mode-sustainable').removeClass('selected-mode-sustainable'); @@ -160,6 +162,11 @@ appUtilities.adjustUIComponents = function (_cy) { $('#marquee-zoom-mode-icon').parent().addClass('selected-mode'); + } + else if( mode === 'lasso-mode'){ + + $('#lasso-mode-icon').parent().addClass('selected-mode'); + } // adjust status of grid guide related icons in toolbar @@ -195,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) { @@ -332,8 +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.getTabLabelName = function(mapName) { + if(mapName == "HybridAny") + return "ALL"; + return appUtilities.mapTypesToViewableText[mapName]; +} + // creates a new network and returns the new chise.js instance that is created for this network -appUtilities.createNewNetwork = function () { +appUtilities.createNewNetwork = function (networkName, networkDescription) { // id of the div panel associated with the new network var networkPanelId = appUtilities.getNetworkPanelId(appUtilities.nextNetworkId); @@ -341,8 +360,14 @@ appUtilities.createNewNetwork = function () { // id of the tab for the new network var networkTabId = appUtilities.getNetworkTabId(appUtilities.nextNetworkId); - // use the default map name for the given next network id - var mapName = appUtilities.getDefaultMapName(appUtilities.nextNetworkId); + // id of the div of the map type discriptor + var mapTypeDivId = appUtilities.getMapTypeDivId(appUtilities.nextNetworkId); + + var mapName; + if(networkName) + mapName = networkName; + else + mapName = appUtilities.getDefaultMapName(appUtilities.nextNetworkId); // create physical html components for the new network // use map name as the tab description @@ -358,7 +383,8 @@ appUtilities.createNewNetwork = function () { // update the map name with the default map name specific for network id currentGeneralProperties.mapName = mapName; - + if(networkDescription) + currentGeneralProperties.mapDescription = networkDescription; // Create a new chise.js instance var newInst = chise({ networkContainerSelector: networkPanelSelector, @@ -421,7 +447,7 @@ appUtilities.createNewNetwork = function () { appUtilities.setScratch(newInst.getCy(), 'currentLayoutProperties', currentLayoutProperties); appUtilities.setScratch(newInst.getCy(), 'currentGridProperties', currentGridProperties); appUtilities.setScratch(newInst.getCy(), 'currentGeneralProperties', currentGeneralProperties); - + // init the current file name for the map appUtilities.setScratch(newInst.getCy(), 'currentFileName', 'new_file.nwt'); @@ -459,6 +485,10 @@ appUtilities.createNewNetwork = function () { // adjust the visibility of network tabs appUtilities.adjustVisibilityOfNetworkTabs(); + // update the map type descriptor + var mapType = appUtilities.getActiveChiseInstance().getMapType(); + $('#' + mapTypeDivId).text(appUtilities.getTabLabelName(mapType)); + // return the new instance return newInst; }; @@ -579,9 +609,10 @@ appUtilities.createPhysicalNetworkComponents = function (panelId, tabId, tabDesc // the container that lists the network tabs var tabsList = $('#network-tabs-list'); - var newTabStr = '
  • \n\ + var newTabStr = '
  • \n\ \n\ - ' + tabDesc + '
    • '; + ' + tabDesc + '\n\ +
    '; $('ul').on('click', 'button.' + tabId +'closeTab', function() { var networkId = tabId.substring(17); @@ -1053,30 +1084,51 @@ appUtilities.showAll = function (_chiseInstance) { } }; +appUtilities.deleteNodesSmart = function(nodes) { + var chiseInstance = appUtilities.getActiveChiseInstance(); + var cy = chiseInstance.getCy(); + var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + + if (currentGeneralProperties.recalculateLayoutOnComplexityManagement ) + { + //Put them near node and perform incremental layout + chiseInstance.deleteAndPerformLayout(nodes, this.triggerLayout.bind(this, cy, false)); + } + else + { + //Just show them + chiseInstance.deleteNodesSmart(nodes); + } +}; + // Hides nodes and perform incremental layout afterward if Rearrange option is checked -appUtilities.hideNodesSmart = function(eles, _chiseInstance) { +appUtilities.hideNodesSmart = function(nodes, _chiseInstance) { // check _chiseInstance param if it is set use it else use recently active chise instance var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance(); - // get the associated cy instance var cy = chiseInstance.getCy(); - // get current general properties for cy instance var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); if (currentGeneralProperties.recalculateLayoutOnComplexityManagement ) { - //Put them near node and perform incremental layout - chiseInstance.hideAndPerformLayout(eles, this.triggerLayout.bind(this, cy, false)); + chiseInstance.hideAndPerformLayout(nodes, this.triggerLayout.bind(this, cy, false)); } else { - //Just show them - chiseInstance.hideNodesSmart(eles); + chiseInstance.hideNodesSmart(nodes); } }; +// Hides nodes and perform incremental layout afterward if Rearrange option is checked +appUtilities.hideElesSimple = function(eles, _chiseInstance) { + // check _chiseInstance param if it is set use it else use recently active chise instance + var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance(); + + chiseInstance.hideElesSimple(eles); +}; + appUtilities.colorCodeToGradientImage = colorCodeToGradientImage = { '#000000' : 'http://newteditor.org/color-scheme-images/bw2_gradient.png', '#80cdc1' : 'http://newteditor.org/color-scheme-images/gb5_gradient.png', @@ -1150,7 +1202,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#ffffff', 'nucleic acid feature': '#ffffff', 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', + 'empty set': '#ffffff', 'complex': '#ffffff', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1173,6 +1225,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#ffffff', 'submap': '#ffffff', + //SBML + 'gene' : '#ffffff', + 'rna': '#ffffff', + 'simple molecule': '#ffffff', + 'unknown molecule': '#ffffff', + 'phenotype sbml': '#ffffff', + 'drug': '#ffffff', + 'protein': '#ffffff', + 'truncated protein': '#ffffff', + 'ion channel': '#ffffff', + 'receptor': '#ffffff', + 'ion': '#ffffff', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#ffffff', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#ffffff', + 'compartment': '#ffffff', // AF 'BA plain': '#ffffff', 'BA unspecified entity': '#ffffff', @@ -1184,8 +1261,8 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#ffffff', - 'SIF simple chemical': '#ffffff' - } + 'SIF simple chemical': '#ffffff', + } }, 'greyscale': { 'name': 'Greyscale', @@ -1197,7 +1274,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#bdbdbd', 'nucleic acid feature': '#bdbdbd', 'perturbing agent': '#bdbdbd', - 'source and sink': '#ffffff', + 'empty set': '#ffffff', 'complex': '#d9d9d9', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1220,6 +1297,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f0f0f0', 'submap': '#f0f0f0', + //SBML + 'gene' : '#bdbdbd', + 'rna': '#bdbdbd', + 'simple molecule': '#bdbdbd', + 'unknown molecule': '#ffffff', + 'phenotype sbml': '#ffffff', + 'drug': '#bdbdbd', + 'protein': '#bdbdbd', + 'truncated protein': '#bdbdbd', + 'ion channel': '#bdbdbd', + 'receptor': '#bdbdbd', + 'ion': '#bdbdbd', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#ffffff', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#d9d9d9', + 'compartment': '#f0f0f0', // AF 'BA plain': '#ffffff', 'BA unspecified entity': '#ffffff', @@ -1231,7 +1333,8 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#d9d9d9', - 'SIF simple chemical': '#f0f0f0' + 'SIF simple chemical': '#f0f0f0', + } }, 'inverse_greyscale': { @@ -1244,7 +1347,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#f0f0f0', 'nucleic acid feature': '#f0f0f0', 'perturbing agent': '#f0f0f0', - 'source and sink': '#f0f0f0', + 'empty set': '#f0f0f0', 'complex': '#d9d9d9', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1267,6 +1370,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#bdbdbd', 'submap': '#bdbdbd', + //SBML + 'gene' : '#f0f0f0', + 'rna': '#f0f0f0', + 'simple molecule': '#f0f0f0', + 'unknown molecule': '#f0f0f0', + 'phenotype sbml': '#f0f0f0', + 'drug': '#f0f0f0', + 'protein': '#f0f0f0', + 'truncated protein': '#f0f0f0', + 'ion channel': '#f0f0f0', + 'receptor': '#f0f0f0', + 'ion': '#f0f0f0', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f0f0f0', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#d9d9d9', + 'compartment': '#bdbdbd', // AF 'BA plain': '#f0f0f0', 'BA unspecified entity': '#f0f0f0', @@ -1278,7 +1406,8 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#f0f0f0', - 'SIF simple chemical': '#d9d9d9' + 'SIF simple chemical': '#d9d9d9', + } }, 'blue_scale': { @@ -1291,7 +1420,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#9ecae1', 'nucleic acid feature': '#9ecae1', 'perturbing agent': '#9ecae1', - 'source and sink': '#9ecae1', + 'empty set': '#9ecae1', 'complex': '#c6dbef', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1314,6 +1443,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#eff3ff', 'submap': '#eff3ff', + //SBML + 'gene' : '#9ecae1', + 'rna': '#9ecae1', + 'simple molecule': '#9ecae1', + 'unknown molecule': '#9ecae1', + 'phenotype sbml': '#9ecae1', + 'drug': '#9ecae1', + 'protein': '#9ecae1', + 'truncated protein': '#9ecae1', + 'ion channel': '#9ecae1', + 'receptor': '#9ecae1', + 'ion': '#9ecae1', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#9ecae1', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#c6dbef', + 'compartment': '#eff3ff', // AF 'BA plain': '#9ecae1', 'BA unspecified entity': '#9ecae1', @@ -1325,7 +1479,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#c6dbef', - 'SIF simple chemical': '#eff3ff' + 'SIF simple chemical': '#eff3ff', } }, 'inverse_blue_scale': { @@ -1338,7 +1492,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#eff3ff', 'nucleic acid feature': '#eff3ff', 'perturbing agent': '#eff3ff', - 'source and sink': '#eff3ff', + 'empty set': '#eff3ff', 'complex': '#c6dbef', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1361,6 +1515,32 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#9ecae1', 'submap': '#9ecae1', + //SBML + 'gene' : '#eff3ff', + 'rna': '#eff3ff', + 'simple molecule': '#eff3ff', + 'unknown molecule': '#eff3ff', + 'phenotype sbml': '#eff3ff', + 'drug': '#eff3ff', + 'protein': '#eff3ff', + 'truncated protein': '#eff3ff', + 'ion channel': '#eff3ff', + 'receptor': '#eff3ff', + 'ion': '#eff3ff', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#eff3ff', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#c6dbef', + 'compartment': '#9ecae1', + // AF 'BA plain': '#eff3ff', 'BA unspecified entity': '#eff3ff', @@ -1372,7 +1552,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#eff3ff', - 'SIF simple chemical': '#c6dbef' + 'SIF simple chemical': '#c6dbef', } }, 'opposed_red_blue': { @@ -1385,7 +1565,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#92c5de', 'nucleic acid feature': '#f4a582', 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', + 'empty set': '#f7f7f7', 'complex': '#d1e5f0', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1408,6 +1588,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f7f7f7', 'submap': '#f7f7f7', + //SBML + 'gene' : '#f4a582', + 'rna': '#f4a582', + 'simple molecule': '#fddbc7', + 'unknown molecule': '#f7f7f7', + 'phenotype sbml': '#f7f7f7', + 'drug': '#f4a582', + 'protein': '#92c5de', + 'truncated protein': '#92c5de', + 'ion channel': '#92c5de', + 'receptor': '#92c5de', + 'ion': '#fddbc7', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f7f7f7', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#d1e5f0', + 'compartment': '#f7f7f7', // AF 'BA plain': '#f7f7f7', 'BA unspecified entity': '#f7f7f7', @@ -1419,7 +1624,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#92c5de', - 'SIF simple chemical': '#f4a582' + 'SIF simple chemical': '#f4a582', } }, 'opposed_red_blue2': { @@ -1432,7 +1637,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#f4a582', 'nucleic acid feature': '#92c5de', 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', + 'empty set': '#f7f7f7', 'complex': '#fddbc7', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1455,6 +1660,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f7f7f7', 'submap': '#f7f7f7', + //SBML + 'gene' : '#92c5de', + 'rna': '#92c5de', + 'simple molecule': '#d1e5f0', + 'unknown molecule': '#f7f7f7', + 'phenotype sbml': '#f7f7f7', + 'drug': '#92c5de', + 'protein': '#f4a582', + 'truncated protein': '#f4a582', + 'ion channel': '#f4a582', + 'receptor': '#f4a582', + 'ion': '#d1e5f0', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f7f7f7', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#fddbc7', + 'compartment': '#f7f7f7', // AF 'BA plain': '#f7f7f7', 'BA unspecified entity': '#f7f7f7', @@ -1466,7 +1696,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#f4a582', - 'SIF simple chemical': '#92c5de' + 'SIF simple chemical': '#92c5de', } }, 'opposed_green_brown': { @@ -1479,7 +1709,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#80cdc1', 'nucleic acid feature': '#dfc27d', 'perturbing agent': '#f5f5f5', - 'source and sink': '#f5f5f5', + 'empty set': '#f5f5f5', 'complex': '#c7eae5', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1502,6 +1732,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f5f5f5', 'submap': '#f5f5f5', + //SBML + 'gene' : '#dfc27d', + 'rna': '#dfc27d', + 'simple molecule': '#f6e8c3', + 'unknown molecule': '#f5f5f5', + 'phenotype sbml': '#f5f5f5', + 'drug': '#dfc27d', + 'protein': '#80cdc1', + 'truncated protein': '#80cdc1', + 'ion channel': '#80cdc1', + 'receptor': '#80cdc1', + 'ion': '#f6e8c3', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f5f5f5', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#c7eae5', + 'compartment': '#f5f5f5', // AF 'BA plain': '#f5f5f5', 'BA unspecified entity': '#f5f5f5', @@ -1513,7 +1768,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#80cdc1', - 'SIF simple chemical': '#dfc27d' + 'SIF simple chemical': '#dfc27d', } }, 'opposed_green_brown2': { @@ -1526,7 +1781,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#dfc27d', 'nucleic acid feature': '#80cdc1', 'perturbing agent': '#f5f5f5', - 'source and sink': '#f5f5f5', + 'empty set': '#f5f5f5', 'complex': '#f6e8c3', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1549,6 +1804,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f5f5f5', 'submap': '#f5f5f5', + //SBML + 'gene' : '#80cdc1', + 'rna': '#80cdc1', + 'simple molecule': '#c7eae5', + 'unknown molecule': '#f5f5f5', + 'phenotype sbml': '#f5f5f5', + 'drug': '#80cdc1', + 'protein': '#dfc27d', + 'truncated protein': '#dfc27d', + 'ion channel': '#dfc27d', + 'receptor': '#dfc27d', + 'ion': '#c7eae5', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f5f5f5', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#f6e8c3', + 'compartment': '#f5f5f5', // AF 'BA plain': '#f5f5f5', 'BA unspecified entity': '#f5f5f5', @@ -1560,7 +1840,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#dfc27d', - 'SIF simple chemical': '#80cdc1' + 'SIF simple chemical': '#80cdc1', } }, 'opposed_purple_brown': { @@ -1573,7 +1853,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#b2abd2', 'nucleic acid feature': '#fdb863', 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', + 'empty set': '#f7f7f7', 'complex': '#d8daeb', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1596,6 +1876,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f7f7f7', 'submap': '#f7f7f7', + //SBML + 'gene' : '#fdb863', + 'rna': '#fdb863', + 'simple molecule': '#fee0b6', + 'unknown molecule': '#f7f7f7', + 'phenotype sbml': '#f7f7f7', + 'drug': '#fdb863', + 'protein': '#b2abd2', + 'truncated protein': '#b2abd2', + 'ion channel': '#b2abd2', + 'receptor': '#b2abd2', + 'ion': '#fee0b6', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f7f7f7', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#d8daeb', + 'compartment': '#f7f7f7', // AF 'BA plain': '#f7f7f7', 'BA unspecified entity': '#f7f7f7', @@ -1607,7 +1912,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#b2abd2', - 'SIF simple chemical': '#fdb863' + 'SIF simple chemical': '#fdb863', } }, 'opposed_purple_brown2': { @@ -1620,7 +1925,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#fdb863', 'nucleic acid feature': '#b2abd2', 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', + 'empty set': '#f7f7f7', 'complex': '#fee0b6', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1643,6 +1948,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f7f7f7', 'submap': '#f7f7f7', + //SBML + 'gene' : '#b2abd2', + 'rna': '#b2abd2', + 'simple molecule': '#d8daeb', + 'unknown molecule': '#f7f7f7', + 'phenotype sbml': '#f7f7f7', + 'drug': '#b2abd2', + 'protein': '#fdb863', + 'truncated protein': '#fdb863', + 'ion channel': '#fdb863', + 'receptor': '#fdb863', + 'ion': '#d8daeb', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f7f7f7', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#fee0b6', + 'compartment': '#f7f7f7', // AF 'BA plain': '#f7f7f7', 'BA unspecified entity': '#f7f7f7', @@ -1654,7 +1984,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#fdb863', - 'SIF simple chemical': '#b2abd2' + 'SIF simple chemical': '#b2abd2', } }, 'opposed_purple_green': { @@ -1667,7 +1997,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#c2a5cf', 'nucleic acid feature': '#a6dba0', 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', + 'empty set': '#f7f7f7', 'complex': '#e7d4e8', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1690,6 +2020,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f7f7f7', 'submap': '#f7f7f7', + //SBML + 'gene' : '#a6dba0', + 'rna': '#a6dba0', + 'simple molecule': '#d9f0d3', + 'unknown molecule': '#f7f7f7', + 'phenotype sbml': '#f7f7f7', + 'drug': '#a6dba0', + 'protein': '#c2a5cf', + 'truncated protein': '#c2a5cf', + 'ion channel': '#c2a5cf', + 'receptor': '#c2a5cf', + 'ion': '#d9f0d3', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f7f7f7', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#e7d4e8', + 'compartment': '#f7f7f7', // AF 'BA plain': '#f7f7f7', 'BA unspecified entity': '#f7f7f7', @@ -1701,7 +2056,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#c2a5cf', - 'SIF simple chemical': '#a6dba0' + 'SIF simple chemical': '#a6dba0', } }, 'opposed_purple_green2': { @@ -1714,7 +2069,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#a6dba0', 'nucleic acid feature': '#c2a5cf', 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', + 'empty set': '#f7f7f7', 'complex': '#d9f0d3', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1737,6 +2092,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#f7f7f7', 'submap': '#f7f7f7', + //SBML + 'gene' : '#c2a5cf', + 'rna': '#c2a5cf', + 'simple molecule': '#e7d4e8', + 'unknown molecule': '#f7f7f7', + 'phenotype sbml': '#f7f7f7', + 'drug': '#c2a5cf', + 'protein': '#a6dba0', + 'truncated protein': '#a6dba0', + 'ion channel': '#a6dba0', + 'receptor': '#a6dba0', + 'ion': '#e7d4e8', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#f7f7f7', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#d9f0d3', + 'compartment': '#f7f7f7', // AF 'BA plain': '#f7f7f7', 'BA unspecified entity': '#f7f7f7', @@ -1748,7 +2128,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#a6dba0', - 'SIF simple chemical': '#c2a5cf' + 'SIF simple chemical': '#c2a5cf', } }, 'opposed_grey_red': { @@ -1761,7 +2141,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#f4a582', 'nucleic acid feature': '#bababa', 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', + 'empty set': '#ffffff', 'complex': '#fddbc7', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1784,6 +2164,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#ffffff', 'submap': '#ffffff', + //SBML + 'gene' : '#bababa', + 'rna': '#bababa', + 'simple molecule': '#e0e0e0', + 'unknown molecule': '#ffffff', + 'phenotype sbml': '#ffffff', + 'drug': '#bababa', + 'protein': '#f4a582', + 'truncated protein': '#f4a582', + 'ion channel': '#f4a582', + 'receptor': '#f4a582', + 'ion': '#e0e0e0', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#ffffff', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#fddbc7', + 'compartment': '#ffffff', // AF 'BA plain': '#ffffff', 'BA unspecified entity': '#ffffff', @@ -1795,7 +2200,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#f4a582', - 'SIF simple chemical': '#bababa' + 'SIF simple chemical': '#bababa', } }, 'opposed_grey_red2': { @@ -1808,7 +2213,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#bababa', 'nucleic acid feature': '#f4a582', 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', + 'empty set': '#ffffff', 'complex': '#e0e0e0', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1831,6 +2236,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#ffffff', 'submap': '#ffffff', + //SBML + 'gene' : '#f4a582', + 'rna': '#f4a582', + 'simple molecule': '#fddbc7', + 'unknown molecule': '#ffffff', + 'phenotype sbml': '#ffffff', + 'drug': '#f4a582', + 'protein': '#bababa', + 'truncated protein': '#bababa', + 'ion channel': '#bababa', + 'receptor': '#bababa', + 'ion': '#fddbc7', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#ffffff', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#e0e0e0', + 'compartment': '#ffffff', // AF 'BA plain': '#ffffff', 'BA unspecified entity': '#ffffff', @@ -1842,7 +2272,9 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#bababa', - 'SIF simple chemical': '#f4a582' + 'SIF simple chemical': '#f4a582', + //SBML + 'unknown molecule' : '#ffffff' } }, 'pure_white': { @@ -1854,7 +2286,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'macromolecule': '#ffffff', 'nucleic acid feature': '#ffffff', 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', + 'empty set': '#ffffff', 'complex': '#ffffff', 'process': '#ffffff', 'omitted process': '#ffffff', @@ -1877,6 +2309,31 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'not': '#ffffff', 'compartment': '#ffffff', 'submap': '#ffffff', + //SBML + 'gene' : '#ffffff', + 'rna': '#ffffff', + 'simple molecule': '#ffffff', + 'unknown molecule': '#ffffff', + 'phenotype sbml': '#ffffff', + 'drug': '#ffffff', + 'protein': '#ffffff', + 'truncated protein': '#ffffff', + 'ion channel': '#ffffff', + 'receptor': '#ffffff', + 'ion': '#ffffff', + 'process': '#ffffff', + 'omitted process': '#ffffff', + 'uncertain process': '#ffffff', + 'truncated process': '#ffffff', + 'dissociation': '#ffffff', + 'degradation': '#ffffff', + 'and': '#ffffff', + 'or': '#ffffff', + 'not': '#ffffff', + 'association': '#ffffff', + 'unknown logical operator': '#ffffff', + 'complex sbml': '#ffffff', + 'compartment': '#ffffff', // AF 'BA plain': '#ffffff', 'BA unspecified entity': '#ffffff', @@ -1888,7 +2345,7 @@ appUtilities.mapColorSchemes = mapColorSchemes = { 'delay': '#ffffff', // SIF 'SIF macromolecule': '#ffffff', - 'SIF simple chemical': '#ffffff' + 'SIF simple chemical': '#ffffff', } } }; @@ -1899,6 +2356,81 @@ for(var scheme in mapColorSchemes){ mapColorSchemes[scheme]['values']['macromolecule multimer'] = mapColorSchemes[scheme]['values']['macromolecule']; mapColorSchemes[scheme]['values']['simple chemical multimer'] = mapColorSchemes[scheme]['values']['simple chemical']; mapColorSchemes[scheme]['values']['complex multimer'] = mapColorSchemes[scheme]['values']['complex']; + + //For SBML + //Multimer + mapColorSchemes[scheme]['values']['gene multimer'] = mapColorSchemes[scheme]['values']['gene']; + mapColorSchemes[scheme]['values']['rna multimer'] = mapColorSchemes[scheme]['values']['rna']; + mapColorSchemes[scheme]['values']['simple molecule multimer'] = mapColorSchemes[scheme]['values']['simple molecule']; + mapColorSchemes[scheme]['values']['unkown molecule multimer'] = mapColorSchemes[scheme]['values']['unkown molecule']; + mapColorSchemes[scheme]['values']['phenotype sbml multimer'] = mapColorSchemes[scheme]['values']['phenotype sbml']; + mapColorSchemes[scheme]['values']['drug multimer'] = mapColorSchemes[scheme]['values']['drug']; + mapColorSchemes[scheme]['values']['protein multimer'] = mapColorSchemes[scheme]['values']['protein']; + mapColorSchemes[scheme]['values']['truncated protein multimer'] = mapColorSchemes[scheme]['values']['truncated protein']; + mapColorSchemes[scheme]['values']['ion channel multimer'] = mapColorSchemes[scheme]['values']['ion channel']; + mapColorSchemes[scheme]['values']['receptor multimer'] = mapColorSchemes[scheme]['values']['receptor']; + mapColorSchemes[scheme]['values']['ion multimer'] = mapColorSchemes[scheme]['values']['ion']; + mapColorSchemes[scheme]['values']['complex sbml multimer'] = mapColorSchemes[scheme]['values']['complex sbml']; + + + //Active + mapColorSchemes[scheme]['values']['active protein'] = mapColorSchemes[scheme]['values']['protein']; + mapColorSchemes[scheme]['values']['active truncated protein'] = mapColorSchemes[scheme]['values']['truncated protein']; + mapColorSchemes[scheme]['values']['active ion channel'] = mapColorSchemes[scheme]['values']['active ion channel']; + mapColorSchemes[scheme]['values']['active receptor'] = mapColorSchemes[scheme]['values']['receptor']; + mapColorSchemes[scheme]['values']['active complex sbml'] = mapColorSchemes[scheme]['values']['complex sbml']; + + + //Active and mutimer + mapColorSchemes[scheme]['values']['active protein multimer'] = mapColorSchemes[scheme]['values']['protein']; + mapColorSchemes[scheme]['values']['active truncated protein multimer'] = mapColorSchemes[scheme]['values']['truncated protein']; + mapColorSchemes[scheme]['values']['active ion channel multimer'] = mapColorSchemes[scheme]['values']['active ion channel']; + mapColorSchemes[scheme]['values']['active receptor multimer'] = mapColorSchemes[scheme]['values']['receptor']; + mapColorSchemes[scheme]['values']['active complex sbml multimer'] = mapColorSchemes[scheme]['values']['complex sbml']; + + //Hypothetical + mapColorSchemes[scheme]['values']['hypothetical gene'] = mapColorSchemes[scheme]['values']['gene']; + mapColorSchemes[scheme]['values']['hypothetical rna'] = mapColorSchemes[scheme]['values']['rna']; + mapColorSchemes[scheme]['values']['hypothetical simple molecule'] = mapColorSchemes[scheme]['values']['simple molecule']; + mapColorSchemes[scheme]['values']['hypothetical unkown molecule'] = mapColorSchemes[scheme]['values']['unkown molecule']; + mapColorSchemes[scheme]['values']['hypothetical phenotype sbml'] = mapColorSchemes[scheme]['values']['phenotype sbml']; + mapColorSchemes[scheme]['values']['hypothetical drug'] = mapColorSchemes[scheme]['values']['drug']; + mapColorSchemes[scheme]['values']['hypothetical protein'] = mapColorSchemes[scheme]['values']['protein']; + mapColorSchemes[scheme]['values']['hypothetical truncated protein'] = mapColorSchemes[scheme]['values']['truncated protein']; + mapColorSchemes[scheme]['values']['hypothetical ion channel'] = mapColorSchemes[scheme]['values']['ion channel']; + mapColorSchemes[scheme]['values']['hypothetical receptor'] = mapColorSchemes[scheme]['values']['receptor']; + mapColorSchemes[scheme]['values']['hypothetical ion'] = mapColorSchemes[scheme]['values']['ion']; + mapColorSchemes[scheme]['values']['hypothetical complex sbml'] = mapColorSchemes[scheme]['values']['complex sbml']; + + //Hypothetical and Multimer + mapColorSchemes[scheme]['values']['hypothetical gene multimer'] = mapColorSchemes[scheme]['values']['gene']; + mapColorSchemes[scheme]['values']['hypothetical rna multimer'] = mapColorSchemes[scheme]['values']['rna']; + mapColorSchemes[scheme]['values']['hypothetical simple molecule multimer'] = mapColorSchemes[scheme]['values']['simple molecule']; + mapColorSchemes[scheme]['values']['hypothetical unkown molecule multimer'] = mapColorSchemes[scheme]['values']['unkown molecule']; + mapColorSchemes[scheme]['values']['hypothetical phenotype sbml multimer'] = mapColorSchemes[scheme]['values']['phenotype sbml']; + mapColorSchemes[scheme]['values']['hypothetical drug multimer'] = mapColorSchemes[scheme]['values']['drug']; + mapColorSchemes[scheme]['values']['hypothetical protein multimer'] = mapColorSchemes[scheme]['values']['protein']; + mapColorSchemes[scheme]['values']['hypothetical truncated protein multimer'] = mapColorSchemes[scheme]['values']['truncated protein']; + mapColorSchemes[scheme]['values']['hypothetical ion channel multimer'] = mapColorSchemes[scheme]['values']['ion channel']; + mapColorSchemes[scheme]['values']['hypothetical receptor multimer'] = mapColorSchemes[scheme]['values']['receptor']; + mapColorSchemes[scheme]['values']['hypothetical ion multimer'] = mapColorSchemes[scheme]['values']['ion']; + mapColorSchemes[scheme]['values']['hypothetical complex sbml multimer'] = mapColorSchemes[scheme]['values']['complex sbml']; + + //Active and Hypothetical + mapColorSchemes[scheme]['values']['active hypothetical protein'] = mapColorSchemes[scheme]['values']['protein']; + mapColorSchemes[scheme]['values']['active hypothetical truncated protein'] = mapColorSchemes[scheme]['values']['truncated protein']; + mapColorSchemes[scheme]['values']['active hypothetical ion channel'] = mapColorSchemes[scheme]['values']['ion channel']; + mapColorSchemes[scheme]['values']['active hypothetical receptor'] = mapColorSchemes[scheme]['values']['receptor']; + mapColorSchemes[scheme]['values']['active hypothetical complex sbml'] = mapColorSchemes[scheme]['values']['complex sbml']; + + //Active, Hypothetical, and Multimer + mapColorSchemes[scheme]['values']['active hypothetical protein multimer'] = mapColorSchemes[scheme]['values']['protein']; + mapColorSchemes[scheme]['values']['active hypothetical truncated protein multimer'] = mapColorSchemes[scheme]['values']['truncated protein']; + mapColorSchemes[scheme]['values']['active hypothetical ion channel multimer'] = mapColorSchemes[scheme]['values']['ion channel']; + mapColorSchemes[scheme]['values']['active hypothetical receptor multimer'] = mapColorSchemes[scheme]['values']['receptor']; + mapColorSchemes[scheme]['values']['active hypothetical complex sbml multimer'] = mapColorSchemes[scheme]['values']['complex sbml']; + + } // go through eles, mapping the id of these elements to values that were mapped to their data().class @@ -1958,37 +2490,52 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t var cy = _cy || appUtilities.getActiveCy(); var eles = cy.nodes(); - if(scheme_type == 'solid'){ + var mapIdToValue = function(eles, value){ + result = {}; + for( var i = 0; i < eles.length; i++ ){ + ele = eles[i]; + result[ele.id()] = value; + } + return result; + }; + if(scheme_type == 'solid'){ var idMap = appUtilities.mapEleClassToId(eles, mapColorSchemes[newColorScheme]['values']); var collapsedChildren = cy.expandCollapse('get').getAllCollapsedChildrenRecursively().filter("node"); var collapsedIdMap = appUtilities.mapEleClassToId(collapsedChildren, mapColorSchemes[newColorScheme]['values']); var chiseInstance = appUtilities.getActiveChiseInstance(); - var clearBgImg = function(eles){ - result = {}; - for( var i = 0; i < eles.length; i++ ){ - ele = eles[i]; - result[ele.id()] = ''; - } - return result; - }; - var actions = []; // first clear the background images of already present elements - actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: clearBgImg(eles)}}); - // edit style of the current map elements + actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-fit', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-position-x', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-position-y', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-width', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-height', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-image-opacity', valueMap: mapIdToValue(eles, '')}}); + + // edit style of the current map elements, in solid scheme just change background-color actions.push({name: "changeData", param: {eles: eles, name: 'background-color', valueMap: idMap}}); - // first clear the background images of already present collapsed elements - actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: clearBgImg(collapsedChildren)}}); + // collapsed nodes' style should also be changed, special edge case actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedIdMap}}); + // if background-image isn't deleted from css, it is shown as soon as the node is expanded until the end of animation actions.push({name: "changeCss", param: {eles: collapsedChildren, name: 'background-image', valueMap: ""}}); actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}}); + // first clear the background images of already present collapsed elements + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-fit', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-x', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-y', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-width', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-height', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image-opacity', valueMap: mapIdToValue(collapsedChildren, '')}}); + // set to be the default as well for(var nodeClass in mapColorSchemes[newColorScheme]['values']){ classBgColor = mapColorSchemes[newColorScheme]['values'][nodeClass]; @@ -2000,7 +2547,8 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-y', value: ''}}); actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image', value: ''}}); actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-width', value: ''}}); - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-height', value:''}}); + actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-height', value:''}}); + actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image-opacity', value:''}}); } } @@ -2046,6 +2594,7 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t actions.push({name: "changeData", param: {eles: eles, name: 'background-position-y', valueMap: mapPercentToPosition(eles, 50)}}); actions.push({name: "changeData", param: {eles: eles, name: 'background-width', valueMap: mapPercentToPosition(eles, 100)}}); actions.push({name: "changeData", param: {eles: eles, name: 'background-height', valueMap: mapPercentToPosition(eles, 100)}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-image-opacity', valueMap: mapIdToValue(eles, '1')}}); // collapsed nodes' style should also be changed, special edge case actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedColorIDMap}}); @@ -2055,6 +2604,7 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-y', valueMap: mapPercentToPosition(collapsedChildren, 50)}}); actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-width', valueMap: mapPercentToPosition(collapsedChildren, 100)}}); actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-height', valueMap: mapPercentToPosition(collapsedChildren, 100)}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image-opacity', valueMap: mapIdToValue(eles, '1')}}); // if background-image isn't brought back into css, it isn't shown as soon as the node is expanded until the end of animation // the reason of for loop is that changeCss function cannot find collapsed nodes if valueMap is an object, but it works if it is a string for(var i = 0; i < collapsedChildren.length; i++){ @@ -2076,8 +2626,7 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image', value: classBgImg}}); actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-width', value: '100%'}}); actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-height', value:'100%'}}); - - + actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-image-opacity', value: '1'}}); } } } @@ -2138,7 +2687,6 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) { var nodePropertiesToXml = { 'background-color': 'fill', - 'background-opacity': 'background-opacity', // not an sbgnml XML attribute, but used with fill 'border-color': 'stroke', 'border-width': 'strokeWidth', 'font-size': 'fontSize', @@ -2202,7 +2750,8 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) { getFcn = _getFcn || getElementData; var props = {}; for(var cssProp in properties){ - if (getFcn(member, cssProp)) { + if (getFcn(member, cssProp) !== undefined || + getFcn(member, cssProp) !== null) { //if it is a color property, replace it with corresponding id if (cssProp == 'background-color' || cssProp == 'border-color' || cssProp == 'line-color') { var validColor = appUtilities.getValidColor(member, cssProp, getFcn); @@ -2430,16 +2979,11 @@ appUtilities.setMapProperties = function(mapProperties, _chiseInstance) { var highlightColor = currentGeneralProperties.highlightColor[0]; var extraHighlightThickness = currentGeneralProperties.extraHighlightThickness; - viewUtilities.changeHighlightStyle(0, { - 'border-width': function (ele) { - return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); - }, 'border-color': highlightColor - }, { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); }, - 'line-color': highlightColor, - 'source-arrow-color': highlightColor, - 'target-arrow-color': highlightColor - }); + viewUtilities.changeHighlightStyle( + 0, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} + ); } @@ -2487,6 +3031,10 @@ appUtilities.filterMapProperties = function(obj) { return mapProps; }; +appUtilities.filterMapTypeProperty = function(obj) +{ + return obj.sbmlMap; +} appUtilities.launchWithModelFile = function() { @@ -2516,9 +3064,9 @@ appUtilities.launchWithModelFile = function() { else tutorial.introduction(true); - function loadFromURL(filepath, chiseInstance, promptInvalidURLWarning){ + function loadFromURL(filepath, chiseInstance, promptInvalidURLWarning){ - chiseInstance.startSpinner('paths-byURL-spinner') + chiseInstance.startSpinner('paths-byURL-spinner'); var loadCallbackSBGNMLValidity = function (text) { $.ajax({ @@ -2560,7 +3108,7 @@ appUtilities.launchWithModelFile = function() { else fileExtension = 'txt'; - $.ajax({ + $.ajax({ type: 'get', url: "/utilities/testURL", data: {url: filepath}, @@ -2572,18 +3120,39 @@ appUtilities.launchWithModelFile = function() { { chiseInstance.showSpinnerText('paths-byURL-spinner') } - + if (!data.error && data.response.statusCode == 200 && data.response.body) { $(document).trigger('sbgnvizLoadFromURL', [filename, cyInstance]); - var fileToLoad = new File([data.response.body], filename, { + const fileContents = data.response.body; + const file = new File([fileContents], filename, { type: 'text/' + fileExtension, lastModified: Date.now() }); + const xmlObject = chiseInstance.textToXmlObject(fileContents); + + if (fileExtension === "sif") { + var loadFcn = function() { + var layoutBy = function() { + appUtilities.triggerLayout(cyInstance, true); + }; + chiseInstance.loadSIFFile(file, layoutBy, loadCallbackInvalidityWarning); + chiseInstance.endSpinner("paths-byURL-spinner"); + + }; + if (cyInstance.elements().length != 0) + { + promptConfirmationView.render( loadFcn ); + chiseInstance.endSpinner("paths-byURL-spinner"); + } + else + loadFcn(); + chiseInstance.endSpinner("paths-byURL-spinner"); + + } if (fileExtension === "gpml") { - chiseInstance.loadGpml(fileToLoad, success = async function (data) { - var cy = appUtilities.getActiveCy(); - if (cy.elements().length !== 0) { + chiseInstance.loadGpml(file, success = async function (data) { + if (cyInstance.elements().length !== 0) { promptConfirmationView.render( function () { chiseInstance.loadSBGNMLText(data, false, filename, cy, paramObj); chiseInstance.endSpinner('paths-byURL-spinner'); @@ -2596,43 +3165,86 @@ appUtilities.launchWithModelFile = function() { chiseInstance.endSpinner("paths-byURL-spinner"); } }); - } - else if (fileExtension === "xml" || fileExtension === "xml#" - || fileExtension === "sbml" || fileExtension === "sbml#") { - - await chiseInstance.loadSbml(fileToLoad, success = async function(data){ - var cy = appUtilities.getActiveCy(); - if (cy.elements().length !== 0) { - await promptConfirmationView.render(async function () { - await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj); - chiseInstance.endSpinner('paths-byURL-spinner'); + } + else if (fileExtension === "xml" || fileExtension === "sbml") { + // CD file + var loadFcn = function() { + var layoutBy = function() { + appUtilities.triggerLayout(cyInstance, true); + }; }; + var layoutBy = function() { + appUtilities.triggerLayout(cyInstance, true); + }; + if (xmlObject.children.item(0).getAttribute('xmlns:celldesigner')) { + await chiseInstance.loadCellDesigner(file, success = async function (data) { + if (cyInstance.elements().length !== 0) { + await promptConfirmationView.render(async function () { + await chiseInstance.loadSBGNMLText(data, false, filename, cy, paramObj); + }); + chiseInstance.endSpinner("paths-byURL-spinner"); + } + else { + await chiseInstance.loadSBGNMLText(data, false, filename, cy, paramObj); + loadFcn(); + chiseInstance.endSpinner("paths-byURL-spinner"); + } + }); + + } + else { + var sbmlProperty= appUtilities.getScratch(appUtilities.getActiveCy(), "sbmlProperty") + var sbgnOrSbml = sbmlProperty.sbmlMap; //True for sbml, false or undefined for sbgn + + // sbml file + if(sbgnOrSbml) + { + await chiseInstance.loadSbmlForSBML(file, success = async function (data){ + if (cyInstance.elements().length !== 0) { + await promptConfirmationView.render(async function () { + await chiseInstance.loadSBMLText(data.message, false, filename, cy, paramObj, layoutBy); + + }); + chiseInstance.endSpinner("paths-byURL-spinner"); + } + else { + await chiseInstance.loadSBMLText(data.message, false, filename, cy, paramObj, layoutBy); + chiseInstance.endSpinner("paths-byURL-spinner"); + } }); } - else { - await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj); - chiseInstance.endSpinner('paths-byURL-spinner'); - + else + { + await chiseInstance.loadSbml(file, success = async function (data){ + if (cyInstance.elements().length !== 0) { + await promptConfirmationView.render(async function () { + await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj); + }); + chiseInstance.endSpinner('paths-byURL-spinner'); + } + else { + await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj); + chiseInstance.endSpinner('paths-byURL-spinner'); + } + }); } - }); + + } } else { - chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj); - chiseInstance.endSpinner('paths-byURL-spinner'); + await chiseInstance.loadNwtFile(file, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj); + chiseInstance.endSpinner("paths-byURL-spinner"); } } else { - loadCallbackInvalidityWarning(); - chiseInstance.endSpinner('paths-byURL-spinner') - - } + await loadCallbackInvalidityWarning(); + chiseInstance.endSpinner("paths-byURL-spinner"); + } }, error: function(xhr, options, err){ loadCallbackInvalidityWarning(); - chiseInstance.endSpinner('paths-byURL-spinner') - + chiseInstance.endSpinner("paths-byURL-spinner"); } }); - } function loadFromURI(uri, chiseInstance, promptInvalidURIWarning){ @@ -3033,6 +3645,16 @@ appUtilities.getDefaultEmptyInfoboxObj = function( type ) { variable: "" }; break; + case 'residue variable': + obj.residue = { + variable: "" + }; + break; + case 'binding region': + obj.region = { + variable: "" + }; + break; } return obj; @@ -3089,18 +3711,17 @@ appUtilities.resizeNodesToContent = function(nodes){ collection = collection.difference(":parent,[class*='compartment'],[class*='submap']"); } chiseInstance.resizeNodesToContent(collection, false); - cy.nodeResize('get').refreshGrapples(); + cy.nodeEditing('get').refreshGrapples(); cy.expandCollapse('get').clearVisualCue(); // To redraw expand/collapse cue after resize to content if(collection.length == 1 && (collection[0].isParent() || collection[0].data('collapsedChildren')) && collection[0].selected()) { cy.$(':selected').trigger('select'); }; - }; appUtilities.transformClassInfo = function( classInfo ) { - var res = classInfo.replace(' multimer', ''); - if (res == 'and' || res == 'or' || res == 'not') { + var res = classInfo.replace(' multimer', '').replace('active ', '').replace('hypthetical ', ''); + if (res == 'and' || res == 'or' || res == 'not' || res == 'rna') { res = res.toUpperCase(); } else { @@ -3147,4 +3768,103 @@ appUtilities.transformClassInfo = function( classInfo ) { // console.log("inapputil"); // } +// unselect all elements and then select all elements with +// sbgn class matching the given element +appUtilities.selectAllElementsOfSameType = function(ele) { + var cy = appUtilities.getActiveCy(); + var sbgnclass = ele.data('class'); + cy.elements().unselect(); + cy.elements('[class="' + sbgnclass + '"]').select(); +}; + +appUtilities.removeDisconnectedNodesAfterQuery = function( querySeedGenes ){ + var isAggregateNode = function (node) { + return node.data("class") == "compartment" || node.data("class") == "submap" + || node.data("class") == "complex"; + } + + var lowerCaseQuerySeedGenes = querySeedGenes.map( (gene) => { + return gene.toLowerCase(); + }); + + var cy = appUtilities.getActiveCy(); + var chiseInstance = appUtilities.getActiveChiseInstance(); + var nodesToDelete = cy.collection(); + cy.nodes().forEach( (node, idx) => { + if(!isAggregateNode(node) && node.parent().length == 0 && node.connectedEdges().length == 0){ + nodesToDelete.merge(node); + } + + if(isAggregateNode(node) && node.children().connectedEdges().length != 0){ + node.children().forEach( (node, idx) => { + if(node.connectedEdges().length == 0 && !isAggregateNode(node)){ + var querySeedNode = false; + if(node.data("label")){ + var lowerCaseNodeLabel = node.data("label").toLowerCase(); + lowerCaseQuerySeedGenes.forEach( (gene) => { + if(lowerCaseNodeLabel.indexOf(gene) >= 0){ + querySeedNode = true; + } + }); + } + if(!querySeedNode) + nodesToDelete.merge(node); + } + }) + } + }); + chiseInstance.deleteElesSimple(nodesToDelete); +} + +appUtilities.removeDuplicateProcessesAfterQuery = function() { + var cy = appUtilities.getActiveCy(); + var chiseInstance = appUtilities.getActiveChiseInstance(); + + var appendFullNodeInformation = function (node, neighborhoodDescriptorString) { + while(node.length != 0){ + node.forEach( (node_) => { + neighborhoodDescriptorString += (node_.data("label") || node_.data("class")); + }); + node = node.parent(); + } + return neighborhoodDescriptorString; + } + + var processes = cy.filter('node[class="process"],[class="omitted process"],[class="uncertain process"],[class="association"],[class="dissociation"]'); + let processMap = new Map(); + var deletion = cy.collection(); + processes.forEach( (process) => { + let collectionArray = []; + let neighborhoodDescriptorString = ""; + var edges = process.connectedEdges(); + edges.forEach( (edge) => { + var node = edge.connectedNodes().difference(process); + collectionArray.push(node.union(edge)); + }) + collectionArray.sort( (first, second) => { + var firstNodeLabel = first.filter("node").data("label") || first.filter("node").data("class"); + var secondNodeLabel = second.filter("node").data("label") || second.filter("node").data("class"); + var compare = firstNodeLabel.localeCompare(secondNodeLabel); + if(compare != 0) + return compare; + var firstEdgeClass = first.filter("edge").data("label") || first.filter("edge").data("class"); + var secondEdgeClass = second.filter("edge").data("label") || second.filter("edge").data("class"); + return firstEdgeClass.localeCompare(secondEdgeClass); + }); + + collectionArray.forEach( (item) => { + neighborhoodDescriptorString = appendFullNodeInformation(item.filter("node"), neighborhoodDescriptorString); + neighborhoodDescriptorString += (item.filter("edge").data("label") || item.filter("edge").data("class")); + }) + neighborhoodDescriptorString = appendFullNodeInformation(process, neighborhoodDescriptorString); + if(processMap.has(neighborhoodDescriptorString)){ + deletion.merge(process); + } + else{ + processMap.set(neighborhoodDescriptorString, true); + } + }); + chiseInstance.deleteElesSimple(deletion); +} + module.exports = appUtilities; diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js index 2a74e2313..6c6f51d09 100644 --- a/app/js/backbone-views.js +++ b/app/js/backbone-views.js @@ -1,12 +1,14 @@ -var jquery = $ = require('jquery'); -var _ = require('underscore'); -var Backbone = require('backbone'); -var chroma = require('chroma-js'); -var FileSaver = require('file-saver'); - -var appUtilities = require('./app-utilities'); +var jquery = ($ = require("jquery")); +var _ = require("underscore"); +var Backbone = require("backbone"); +var chroma = require("chroma-js"); +var FileSaver = require("file-saver"); +var cytoscape = require("cytoscape"); +var chise = require("chise"); + +var appUtilities = require("./app-utilities"); var setFileContent = appUtilities.setFileContent.bind(appUtilities); -const colorPickerUtils = require('./color-picker-utils'); +const colorPickerUtils = require("./color-picker-utils"); //var annotationsHandler = require('./annotations-handler'); // since biogene service from PC is not available any more, we now give link to gene properties in My Cancer Genome organization @@ -186,65 +188,62 @@ const colorPickerUtils = require('./color-picker-utils'); * Backbone view for the Chemical information. */ var ChemicalView = Backbone.View.extend({ - render: function () { - // pass variables in using Underscore.js template - var variables = { - chemicalDescription: this.model.description[0], - chebiName: this.model.label, - chebiID: this.model.obo_id.substring(6, this.model.obo_id.length) //Gets only the nr from ChEBI:15422 format - }; + render: function () { + // pass variables in using Underscore.js template + var variables = { + chemicalDescription: this.model.description[0], + chebiName: this.model.label, + chebiID: this.model.obo_id.substring(6, this.model.obo_id.length), //Gets only the nr from ChEBI:15422 format + }; - // compile the template using underscore - var template = _.template($("#chemical-template").html()); - template = template(variables); + // compile the template using underscore + var template = _.template($("#chemical-template").html()); + template = template(variables); - // load the compiled HTML into the Backbone "el" - this.$el.html(template); + // load the compiled HTML into the Backbone "el" + this.$el.html(template); - // format after loading - this.format(this.model); + // format after loading + this.format(this.model); - return this; - }, - format: function () - { - // hide rows with undefined data - if (this.model.label == undefined) - this.$el.find(".chebi-name").hide(); - - if (this.model.description[0] == undefined) - this.$el.find(".chemical-description").hide(); - - if (this.model.obo_id == undefined) - this.$el.find(".chebi-id").hide(); - - var expanderOpts = {slicePoint: 150, - expandPrefix: ' ', - expandText: ' (...)', - userCollapseText: ' (show less)', - moreClass: 'expander-read-more', - lessClass: 'expander-read-less', - detailClass: 'expander-details', - // do not use default effects - // (see https://github.com/kswedberg/jquery-expander/issues/46) - expandEffect: 'fadeIn', - collapseEffect: 'fadeOut'}; - - $(".chemical-description .expandable").expander(expanderOpts); - - expanderOpts.slicePoint = 2; // show comma and the space - expanderOpts.widow = 0; // hide everything else in any case - } + return this; + }, + format: function () { + // hide rows with undefined data + if (this.model.label == undefined) this.$el.find(".chebi-name").hide(); + + if (this.model.description[0] == undefined) + this.$el.find(".chemical-description").hide(); + + if (this.model.obo_id == undefined) this.$el.find(".chebi-id").hide(); + + var expanderOpts = { + slicePoint: 150, + expandPrefix: " ", + expandText: " (...)", + userCollapseText: " (show less)", + moreClass: "expander-read-more", + lessClass: "expander-read-less", + detailClass: "expander-details", + // do not use default effects + // (see https://github.com/kswedberg/jquery-expander/issues/46) + expandEffect: "fadeIn", + collapseEffect: "fadeOut", + }; + + $(".chemical-description .expandable").expander(expanderOpts); + + expanderOpts.slicePoint = 2; // show comma and the space + expanderOpts.widow = 0; // hide everything else in any case + }, }); /** * SBGN Layout view for the Sample Application. */ var LayoutPropertiesView = Backbone.View.extend({ - initialize: function () { - }, + initialize: function () {}, copyProperties: function () { - // use active cy instance var cy = appUtilities.getActiveCy(); @@ -252,7 +251,7 @@ var LayoutPropertiesView = Backbone.View.extend({ var clonedProp = _.clone(appUtilities.defaultLayoutProperties); // reset current layout props - appUtilities.setScratch(cy, 'currentLayoutProperties', clonedProp); + appUtilities.setScratch(cy, "currentLayoutProperties", clonedProp); // return cloned props to make them accessible return clonedProp; @@ -264,7 +263,10 @@ var LayoutPropertiesView = Backbone.View.extend({ // get associated cy instance var cy = chiseInstance.getCy(); - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); // if preferences param is not set use an empty map not to override any layout option if (preferences === undefined) { @@ -276,7 +278,6 @@ var LayoutPropertiesView = Backbone.View.extend({ return options; }, applyLayout: function (preferences, notUndoable, _chiseInstance) { - // if chise instance param is not set use the recently active chise instance var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance(); var options = this.getLayoutOptions(preferences, _chiseInstance); @@ -289,61 +290,102 @@ var LayoutPropertiesView = Backbone.View.extend({ var cy = appUtilities.getActiveCy(); // get current layout props for cy - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); self.template = _.template($("#layout-settings-template").html()); self.template = self.template(currentLayoutProperties); $(self.el).html(self.template); - $(self.el).modal('show'); - - $(document).off("click", "#save-layout").on("click", "#save-layout", function (evt) { - - // use active cy instance - var cy = appUtilities.getActiveCy(); - - // get current layout props for cy - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - currentLayoutProperties.nodeRepulsion = Number(document.getElementById("node-repulsion").value); - currentLayoutProperties.idealEdgeLength = Number(document.getElementById("ideal-edge-length").value); - currentLayoutProperties.edgeElasticity = Number(document.getElementById("edge-elasticity").value); - currentLayoutProperties.nestingFactor = Number(document.getElementById("nesting-factor").value); - currentLayoutProperties.gravity = Number(document.getElementById("gravity").value); - currentLayoutProperties.numIter = Number(document.getElementById("num-iter").value); - currentLayoutProperties.tile = document.getElementById("tile").checked; - currentLayoutProperties.packComponents = document.getElementById("pack-components").checked ? true : false; - currentLayoutProperties.randomize = !document.getElementById("incremental").checked; - currentLayoutProperties.gravityRangeCompound = Number(document.getElementById("gravity-range-compound").value); - currentLayoutProperties.gravityCompound = Number(document.getElementById("gravity-compound").value); - currentLayoutProperties.gravityRange = Number(document.getElementById("gravity-range").value); - currentLayoutProperties.tilingPaddingVertical = Number(document.getElementById("tiling-padding-vertical").value); - currentLayoutProperties.tilingPaddingHorizontal = Number(document.getElementById("tiling-padding-horizontal").value); - currentLayoutProperties.initialEnergyOnIncremental = Number(document.getElementById("incremental-cooling-factor").value); - currentLayoutProperties.improveFlow = document.getElementById("improve-flow").checked; - // reset currentLayoutProperties in scratch pad - appUtilities.setScratch(cy, currentLayoutProperties, 'currentLayoutProperties'); - - $(self.el).modal('toggle'); - $(document).trigger('saveLayout', cy); - }); + $(self.el).modal("show"); + + $(document) + .off("click", "#save-layout") + .on("click", "#save-layout", function (evt) { + // use active cy instance + var cy = appUtilities.getActiveCy(); + + // get current layout props for cy + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); + + currentLayoutProperties.nodeRepulsion = Number( + document.getElementById("node-repulsion").value + ); + currentLayoutProperties.idealEdgeLength = Number( + document.getElementById("ideal-edge-length").value + ); + currentLayoutProperties.edgeElasticity = Number( + document.getElementById("edge-elasticity").value + ); + currentLayoutProperties.nestingFactor = Number( + document.getElementById("nesting-factor").value + ); + currentLayoutProperties.gravity = Number( + document.getElementById("gravity").value + ); + currentLayoutProperties.numIter = Number( + document.getElementById("num-iter").value + ); + currentLayoutProperties.tile = document.getElementById("tile").checked; + currentLayoutProperties.packComponents = document.getElementById( + "pack-components" + ).checked + ? true + : false; + currentLayoutProperties.randomize = + !document.getElementById("incremental").checked; + currentLayoutProperties.gravityRangeCompound = Number( + document.getElementById("gravity-range-compound").value + ); + currentLayoutProperties.gravityCompound = Number( + document.getElementById("gravity-compound").value + ); + currentLayoutProperties.gravityRange = Number( + document.getElementById("gravity-range").value + ); + currentLayoutProperties.tilingPaddingVertical = Number( + document.getElementById("tiling-padding-vertical").value + ); + currentLayoutProperties.tilingPaddingHorizontal = Number( + document.getElementById("tiling-padding-horizontal").value + ); + currentLayoutProperties.initialEnergyOnIncremental = Number( + document.getElementById("incremental-cooling-factor").value + ); + currentLayoutProperties.improveFlow = + document.getElementById("improve-flow").checked; + // reset currentLayoutProperties in scratch pad + appUtilities.setScratch( + cy, + currentLayoutProperties, + "currentLayoutProperties" + ); + + $(self.el).modal("toggle"); + $(document).trigger("saveLayout", cy); + }); - $(document).off("click", "#default-layout").on("click", "#default-layout", function (evt) { - // reset current layout props for active cy instance and get new props - var currentLayoutProperties = self.copyProperties(); + $(document) + .off("click", "#default-layout") + .on("click", "#default-layout", function (evt) { + // reset current layout props for active cy instance and get new props + var currentLayoutProperties = self.copyProperties(); - self.template = _.template($("#layout-settings-template").html()); - self.template = self.template(currentLayoutProperties); - $(self.el).html(self.template); - }); + self.template = _.template($("#layout-settings-template").html()); + self.template = self.template(currentLayoutProperties); + $(self.el).html(self.template); + }); return this; - } + }, }); - var ColorSchemeInspectorView = Backbone.View.extend({ - initialize: function () { var self = this; @@ -352,20 +394,21 @@ var ColorSchemeInspectorView = Backbone.View.extend({ var schemes_3D = Object.assign({}, schemes); var invertedScheme = {}; // key: scheme_id, value: scheme that is inverse of another scheme - for(var id in schemes) { + for (var id in schemes) { var previewColors = schemes[id].preview; - if(invertedScheme[id]) { // this scheme is the complement of a previous one + if (invertedScheme[id]) { + // this scheme is the complement of a previous one schemes[id].isDisplayed = false; - } - else if (schemes[id].invert) { // this scheme has a complement + } else if (schemes[id].invert) { + // this scheme has a complement invertedScheme[schemes[id].invert] = id; schemes[id].isDisplayed = true; - } - else if(schemes[id].name == 'Pure White'){ // pure white is not an option for color scheme selection + } else if (schemes[id].name == "Pure White") { + // pure white is not an option for color scheme selection continue; - } - else { // scheme has no complement, display it normally + } else { + // scheme has no complement, display it normally schemes[id].isDisplayed = true; } @@ -373,107 +416,168 @@ var ColorSchemeInspectorView = Backbone.View.extend({ schemes_3D[id] = Object.assign({}, schemes[id]); var colorCount = previewColors.length; - var htmlS = ""; - var htmlG = ""; + var htmlS = ""; + var htmlG = ""; var html3D = ""; - for(var i=0; i < colorCount; i++) { + for (var i = 0; i < colorCount; i++) { var color = chroma(previewColors[i]); // apply default alpha of elements backgrounds, to make it look more like reality color = color.alpha(0.5); - var prct = 100/colorCount; - htmlS += "
    "; - htmlG += ""; - html3D += ""; + var prct = 100 / colorCount; + htmlS += + "
    "; + htmlG += + ""; + html3D += + ""; } schemes[id].previewHtml = htmlS; schemes_gradient[id].previewHtml = htmlG; schemes_3D[id].previewHtml = html3D; - } this.schemes = schemes; this.schemes_gradient = schemes_gradient; this.schemes_3D = schemes_3D; + // clone markers that are background images (unspecified entity and perturbing agent) + // get removed when color scheme is updated + var updateCloneMarkers = function () { + var chiseInstance = appUtilities.getActiveChiseInstance(); + var cy = appUtilities.getActiveCy(); + var nodesThatNeedCloneMarkerUpdate = cy.nodes().filter(function (node) { + return ( + (node.data("class") === "unspecified entity" || + node.data("class") === "perturbing agent") && + node.data("clonemarker") + ); + }); + chiseInstance.redrawCloneMarkers(nodesThatNeedCloneMarkerUpdate, true); + }; + // attach events $(document).on("click", "div.color-scheme-choice", function (evt) { var cy = appUtilities.getActiveCy(); - var scheme_type = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorSchemeStyle; - var raw_id = $(this).attr('id'); + var scheme_type = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ).mapColorSchemeStyle; + var raw_id = $(this).attr("id"); var scheme_id = raw_id.replace("map-color-scheme_", ""); appUtilities.applyMapColorScheme(scheme_id, scheme_type, self); + updateCloneMarkers(); }); - $(document).on("change", "#color-scheme-inspector-style-select", function (event) { - var cy = appUtilities.getActiveCy(); - var current_scheme_id = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorScheme; - //change the currently displayed html element - var selected_style = $('#color-scheme-inspector-style-select').val(); - //change to the color scheme choice to match current style - appUtilities.applyMapColorScheme(current_scheme_id,selected_style,self); - }); + $(document).on( + "change", + "#color-scheme-inspector-style-select", + function (event) { + var cy = appUtilities.getActiveCy(); + var current_scheme_id = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ).mapColorScheme; + //change the currently displayed html element + var selected_style = $("#color-scheme-inspector-style-select").val(); + //change to the color scheme choice to match current style + appUtilities.applyMapColorScheme( + current_scheme_id, + selected_style, + self + ); + updateCloneMarkers(); + } + ); $(document).on("click", "div.color-scheme-invert-button", function (evt) { - var raw_id = $(this).attr('id'); + var raw_id = $(this).attr("id"); var cy = appUtilities.getActiveCy(); - var scheme_type = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorSchemeStyle; + var scheme_type = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ).mapColorSchemeStyle; var scheme_id = raw_id.replace("map-color-scheme_invert_", ""); var inverted_id = schemes[scheme_id].invert; appUtilities.applyMapColorScheme(inverted_id, scheme_type, self); + updateCloneMarkers(); }); $(document).on("click", "#map-color-scheme-default-button", function (evt) { var cy = appUtilities.getActiveCy(); - var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme; - var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle; - appUtilities.applyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, self); // default color scheme + var defaultColorScheme = + appUtilities.defaultGeneralProperties.mapColorScheme; + var defaultColorSchemeStyle = + appUtilities.defaultGeneralProperties.mapColorSchemeStyle; + appUtilities.applyMapColorScheme( + defaultColorScheme, + defaultColorSchemeStyle, + self + ); // default color scheme + updateCloneMarkers(); }); - }, - changeStyle: function(style) { - if(style == 'solid'){ - $('#solid-color-scheme-display').show(); - $('#gradient-color-scheme-display').hide(); - $('#3D-color-scheme-display').hide(); + changeStyle: function (style) { + if (style == "solid") { + $("#solid-color-scheme-display").show(); + $("#gradient-color-scheme-display").hide(); + $("#3D-color-scheme-display").hide(); $("#color-scheme-inspector-style-select").val("solid"); - } - else if(style == 'gradient'){ - $('#solid-color-scheme-display').hide(); - $('#gradient-color-scheme-display').show(); - $('#3D-color-scheme-display').hide(); + } else if (style == "gradient") { + $("#solid-color-scheme-display").hide(); + $("#gradient-color-scheme-display").show(); + $("#3D-color-scheme-display").hide(); $("#color-scheme-inspector-style-select").val("gradient"); - } - else if(style == '3D'){ - $('#solid-color-scheme-display').hide(); - $('#gradient-color-scheme-display').hide(); - $('#3D-color-scheme-display').show(); + } else if (style == "3D") { + $("#solid-color-scheme-display").hide(); + $("#gradient-color-scheme-display").hide(); + $("#3D-color-scheme-display").show(); $("#color-scheme-inspector-style-select").val("3D"); } }, render: function () { - - this.template = _.template($("#color-scheme-inspector-template").html()); var cy = appUtilities.getActiveCy(); // scheme_type and current_scheme are used to highlight the current color scheme with the javascript embedded to color-scheme-inspector-template div(line: 2337 in index.html) var scheme_type = $("#color-scheme-inspector-style-select").val(); - var current_scheme = appUtilities.getScratch(cy,'currentGeneralProperties').mapColorScheme; - + var current_scheme = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ).mapColorScheme; + this.$el.empty(); - this.$el.html(this.template({schemes: this.schemes, schemes_gradient: this.schemes_gradient, schemes_3D: this.schemes_3D, scheme_type: scheme_type, current_scheme: current_scheme})); - + this.$el.html( + this.template({ + schemes: this.schemes, + schemes_gradient: this.schemes_gradient, + schemes_3D: this.schemes_3D, + scheme_type: scheme_type, + current_scheme: current_scheme, + }) + ); + return this; - } + }, }); // provide common functions for different views tied to // inspector map panels var GeneralPropertiesParentView = Backbone.View.extend({ // Apply the properties as they are set - applyUpdate: function() { - + applyUpdate: function () { // use active chise instance var chiseInstance = appUtilities.getActiveChiseInstance(); @@ -481,7 +585,10 @@ var GeneralPropertiesParentView = Backbone.View.extend({ var cy = appUtilities.getActiveCy(); // get currentGeneralProperties for cy - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); // get topologyGrouping instance for cy var topologyGrouping = chiseInstance.sifTopologyGrouping; @@ -491,75 +598,106 @@ var GeneralPropertiesParentView = Backbone.View.extend({ if (currentGeneralProperties.enablePorts) { chiseInstance.enablePorts(); - } - else { + } else { chiseInstance.disablePorts(); } if (currentGeneralProperties.allowCompoundNodeResize) { chiseInstance.considerCompoundSizes(); - } - else { + } else { chiseInstance.omitCompoundSizes(); } // Refresh resize grapples - cy.nodeResize('get').refreshGrapples(); + cy.nodeEditing("get").refreshGrapples(); cy.style().update(); - $(document).trigger('saveGeneralProperties', cy); + $(document).trigger("saveGeneralProperties", cy); }, setPropertiesToDefault: function () { var cy = appUtilities.getActiveCy(); var clonedProps = _.clone(appUtilities.defaultGeneralProperties); - appUtilities.setScratch(cy, 'currentGeneralProperties', clonedProps); - } + appUtilities.setScratch(cy, "currentGeneralProperties", clonedProps); + }, }); // inherit from GeneralPropertiesParentView var MapTabGeneralPanel = GeneralPropertiesParentView.extend({ - initialize: function() { + initialize: function () { var self = this; // initialize undo-redo parameters self.params = {}; - self.params.compoundPadding = {id: "compound-padding", type: "text", - property: "currentGeneralProperties.compoundPadding", update: self.applyUpdate}; + self.params.compoundPadding = { + id: "compound-padding", + type: "text", + property: "currentGeneralProperties.compoundPadding", + update: self.applyUpdate, + }; + + self.params.arrowScale = { + id: "arrow-scale", + type: "range", + property: "currentGeneralProperties.arrowScale", + }; - self.params.arrowScale = {id: "arrow-scale", type: "range", - property: "currentGeneralProperties.arrowScale"}; + self.params.allowCompoundNodeResize = { + id: "allow-compound-node-resize", + type: "checkbox", + property: "currentGeneralProperties.allowCompoundNodeResize", + update: self.applyUpdate, + }; - self.params.allowCompoundNodeResize = {id: "allow-compound-node-resize", type: "checkbox", - property: "currentGeneralProperties.allowCompoundNodeResize", update: self.applyUpdate}; + self.params.inferNestingOnLoad = { + id: "infer-nesting-on-load", + type: "checkbox", + property: "currentGeneralProperties.inferNestingOnLoad", + }; - self.params.inferNestingOnLoad = {id: "infer-nesting-on-load", type: "checkbox", - property: "currentGeneralProperties.inferNestingOnLoad"}; + self.params.enablePorts = { + id: "enable-ports", + type: "checkbox", + property: "currentGeneralProperties.enablePorts", + update: self.applyUpdate, + }; - self.params.enablePorts = {id: "enable-ports", type: "checkbox", - property: "currentGeneralProperties.enablePorts", update: self.applyUpdate}; + self.params.enableSIFTopologyGrouping = { + id: "enable-sif-topology-grouping", + type: "checkbox", + property: "currentGeneralProperties.enableSIFTopologyGrouping", + update: self.applyUpdate, + }; - self.params.enableSIFTopologyGrouping = {id: "enable-sif-topology-grouping", type: "checkbox", - property: "currentGeneralProperties.enableSIFTopologyGrouping", update: self.applyUpdate}; + self.params.mapName = { + id: "map-name", + type: "text", + property: "currentGeneralProperties.mapName", + }; - self.params.mapName = {id: "map-name", type: "text", - property: "currentGeneralProperties.mapName"}; + self.params.mapDescription = { + id: "map-description", + type: "text", + property: "currentGeneralProperties.mapDescription", + }; - self.params.mapDescription = {id: "map-description", type: "text", - property: "currentGeneralProperties.mapDescription"}; + self.params.extraHighlightThickness = { + id: "highlight-thickness", + type: "range", + property: "currentGeneralProperties.extraHighlightThickness", + }; - self.params.extraHighlightThickness = {id: "highlight-thickness", type: "range", - property: "currentGeneralProperties.extraHighlightThickness"}; + self.params.highlightColor = { + id: "highlight-color", + type: "color", + property: "currentGeneralProperties.highlightColor", + }; - self.params.highlightColor = {id: "highlight-color", type: "color", - property: "currentGeneralProperties.highlightColor"}; - // general properties part $(document).on("change", "#map-name", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.mapName.value = $('#map-name').val(); + self.params.mapName.value = $("#map-name").val(); // TODO while making such calls appUtilities.undoable flag should be checked // if it is not true then the operation should not be undoable @@ -571,269 +709,331 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({ // update the network tab description as the map name is just changed appUtilities.updateNetworkTabDesc(networkKey); - $('#map-name').blur(); + $("#map-name").blur(); }); $(document).on("change", "#map-description", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.mapDescription.value = $('#map-description').val(); + self.params.mapDescription.value = $("#map-description").val(); cy.undoRedo().do("changeMenu", self.params.mapDescription); - $('#map-description').blur(); + $("#map-description").blur(); }); $(document).on("change", "#map-type", function (evt) { + //Added SBML map type here - var callback = function(){ - $('#map-type').val(chiseInstance.getMapType()); + var callback = function () { + $("#map-type").val(chiseInstance.getMapType()); + var activeChiseId = appUtilities.networkIdsStack[appUtilities.networkIdsStack.length-1]; + $('#' + appUtilities.getMapTypeDivId(activeChiseId)).text(appUtilities.getTabLabelName(chiseInstance.getMapType())); }; // use active cy instance var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); var elements = cy.elements(); - + var newMapType = $("#map-type").val(); - if(cy.elements().length == 0){ + if (cy.elements().length == 0) { //chiseInstance.elementUtilities.setMapType(newMapType); - cy.undoRedo().do("changeMapType", {mapType: newMapType, callback : callback}); + cy.undoRedo().do("changeMapType", { + mapType: newMapType, + callback: callback, + }); + $(document).trigger("changeMapTypeFromMenu", [newMapType]); return; } var currentMapType = chiseInstance.getMapType(); var validChange = false; - if((currentMapType == 'PD' || currentMapType == 'AF' || currentMapType =='SIF') && newMapType == 'HybridAny' && !validChange){ + if ( + (currentMapType == "PD" || + currentMapType == "AF" || + currentMapType == "SIF" || + currentMapType == "SBML") && + newMapType == "HybridAny" && + !validChange + ) { validChange = true; //ok - }else if((currentMapType == 'PD' || currentMapType == 'AF') && (newMapType == 'HybridAny' || newMapType == 'HybridSbgn')&& !validChange){ + } else if ( + (currentMapType == "PD" || currentMapType == "AF") && + (newMapType == "HybridAny" || newMapType == "HybridSbgn") && + !validChange + ) { validChange = true; //ok - }else if(currentMapType =='HybridSbgn' && newMapType == 'HybridAny' && !validChange){ + } else if ( + currentMapType == "HybridSbgn" && + newMapType == "HybridAny" && + !validChange + ) { validChange = true; - }else if(currentMapType =='HybridSbgn' && (newMapType == 'PD' || newMapType =='AF')){ - - if(newMapType == 'PD'){ - //check no AF elements in netwrok - var checkType = true; - for(var i = 0 ; i < elements.length && checkType ;i++){ - if(elements[i].data("language") == "AF"){ - checkType = false; + } else if ( + currentMapType == "HybridSbgn" && + (newMapType == "PD" || newMapType == "AF") + ) { + if (newMapType == "PD") { + //check no AF elements in netwrok + var checkType = true; + for (var i = 0; i < elements.length && checkType; i++) { + if (elements[i].data("language") == "AF") { + checkType = false; } } - validChange = checkType; - - - }else{ + validChange = checkType; + } else { //check no PD elements in netwrok - var checkType = true; - for(var i = 0 ; i < elements.length && checkType ;i++){ - if(elements[i].data("language") == "PD"){ - checkType = false; + var checkType = true; + for (var i = 0; i < elements.length && checkType; i++) { + if (elements[i].data("language") == "PD") { + checkType = false; } } - validChange = checkType; + validChange = checkType; } - }else if(currentMapType == 'HybridAny' && !validChange){ - if(newMapType == 'HybridSbgn'){ - //check no SIF elements in netwrok - var checkType = true; - for(var i = 0 ; i < elements.length && checkType ;i++){ - if(elements[i].data("language") == "SIF"){ - checkType = false; - } - } - validChange = checkType; - }else if(newMapType =='PD'){ - //check no AF OR SIF elements in netwrok - var checkType = true; - for(var i = 0 ; i < elements.length && checkType;i++){ - if(elements[i].data("language") == "AF" || elements[i].data("language") == "SIF"){ - checkType = false; + } else if (currentMapType == "HybridAny" && !validChange) { + if (newMapType == "HybridSbgn") { + //check no SIF elements in netwrok + var checkType = true; + for (var i = 0; i < elements.length && checkType; i++) { + if ( + elements[i].data("language") == "SIF" || + elements[i].data("language") == "SBML" + ) { + checkType = false; } } - validChange = checkType; - - }else if(newMapType == 'AF'){ + validChange = checkType; + } else if (newMapType == "PD") { + //check no AF OR SIF elements in netwrok + var checkType = true; + for (var i = 0; i < elements.length && checkType; i++) { + if ( + elements[i].data("language") == "AF" || + elements[i].data("language") == "SIF" || + elements[i].data("language") == "SBML" + ) { + checkType = false; + } + } + validChange = checkType; + } else if (newMapType == "AF") { //check no PD OR SIF elements in netwrok - var checkType = true; - for(var i = 0 ; i < elements.length && checkType ;i++){ - if(elements[i].data("language") == "PD" || elements[i].data("language") == "SIF"){ - checkType = false; + var checkType = true; + for (var i = 0; i < elements.length && checkType; i++) { + if ( + elements[i].data("language") == "PD" || + elements[i].data("language") == "SIF" || + elements[i].data("language") == "SBML" + ) { + checkType = false; } } - validChange = checkType; - - }else{ + validChange = checkType; + } else if (newMapType == "SBML") { + //check no PD AF or SIF elements in netwrok + var checkType = true; + for (var i = 0; i < elements.length && checkType; i++) { + if ( + elements[i].data("language") == "PD" || + elements[i].data("language") == "SIF" || + elements[i].data("language") == "AF" + ) { + checkType = false; + } + } + } else { //check no PD OR AF elements in netwrok - var checkType = true; - for(var i = 0 ; i < elements.length && checkType ;i++){ - if(elements[i].data("language") == "AF" || elements[i].data("language") == "PD"){ - checkType = false; + var checkType = true; + for (var i = 0; i < elements.length && checkType; i++) { + if ( + elements[i].data("language") == "AF" || + elements[i].data("language") == "PD" || + elements[i].data("language") == "SBML" + ) { + checkType = false; } } - validChange = checkType; + validChange = checkType; } } - if(validChange){ - cy.undoRedo().do("changeMapType", {mapType: newMapType, callback : callback}); - //chiseInstance.elementUtilities.setMapType(newMapType); - }else{ + if (validChange) { + cy.undoRedo().do("changeMapType", { + mapType: newMapType, + callback: callback, + }); + $(document).trigger("changeMapTypeFromMenu", [newMapType]); + } else { $("#map-type").val(currentMapType); - appUtilities.promptMapTypeView.render("You cannot change map type "+ appUtilities.mapTypesToViewableText[currentMapType] + " to a map of type "+appUtilities.mapTypesToViewableText[newMapType]+"!"); - - } - - $('#map-type').blur(); + appUtilities.promptMapTypeView.render( + "You cannot change map type " + + appUtilities.mapTypesToViewableText[currentMapType] + + " to a map of type " + + appUtilities.mapTypesToViewableText[newMapType] + + "!" + ); + } + + $("#map-type").blur(); }); $(document).on("change", "#compound-padding", function (evt) { - - var newValue = Number($('#compound-padding').val()); - if(newValue < 0 ){ + var newValue = Number($("#compound-padding").val()); + if (newValue < 0) { newValue = 0; } // use active cy instance var cy = appUtilities.getActiveCy(); self.params.compoundPadding.value = Number(newValue); - // var ur = cy.undoRedo(); + // var ur = cy.undoRedo(); //var actions = []; //actions.push({name:"changeMenu", param:self.params.compoundPadding}); //actions.push({name:"setCompoundPadding", param:self.params.compoundPadding}); - // ur.do("batch", actions); + // ur.do("batch", actions); cy.undoRedo().do("changeMenu", self.params.compoundPadding); - - $('#compound-padding').blur(); - }); + $("#compound-padding").blur(); + }); $(document).on("change", "#arrow-scale", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.arrowScale.value = Number($('#arrow-scale').val()); + self.params.arrowScale.value = Number($("#arrow-scale").val()); var ur = cy.undoRedo(); var actions = []; - actions.push({name: "changeMenu", param: self.params.arrowScale}); - actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale", - valueMap: self.params.arrowScale.value}}); + actions.push({ name: "changeMenu", param: self.params.arrowScale }); + actions.push({ + name: "changeCss", + param: { + eles: cy.edges(), + name: "arrow-scale", + valueMap: self.params.arrowScale.value, + }, + }); ur.do("batch", actions); - $('#arrow-scale').blur(); + $("#arrow-scale").blur(); }); $(document).on("change", "#allow-compound-node-resize", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.allowCompoundNodeResize.value = $('#allow-compound-node-resize').prop('checked'); + self.params.allowCompoundNodeResize.value = $( + "#allow-compound-node-resize" + ).prop("checked"); cy.undoRedo().do("changeMenu", self.params.allowCompoundNodeResize); - $('#allow-compound-node-resize').blur(); + $("#allow-compound-node-resize").blur(); }); $(document).on("change", "#infer-nesting-on-load", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.inferNestingOnLoad.value = $('#infer-nesting-on-load').prop('checked'); + self.params.inferNestingOnLoad.value = $("#infer-nesting-on-load").prop( + "checked" + ); cy.undoRedo().do("changeMenu", self.params.inferNestingOnLoad); - $('#infer-nesting-on-load').blur(); + $("#infer-nesting-on-load").blur(); }); $(document).on("change", "#enable-ports", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.enablePorts.value = $('#enable-ports').prop('checked'); + self.params.enablePorts.value = $("#enable-ports").prop("checked"); cy.undoRedo().do("changeMenu", self.params.enablePorts); - $('#enable-ports').blur(); + $("#enable-ports").blur(); }); $(document).on("change", "#enable-sif-topology-grouping", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); // get current general properties for cy - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); var actions = []; - self.params.enableSIFTopologyGrouping.value = $('#enable-sif-topology-grouping').prop('checked'); + self.params.enableSIFTopologyGrouping.value = $( + "#enable-sif-topology-grouping" + ).prop("checked"); var apply = self.params.enableSIFTopologyGrouping.value; - actions.push({name: "changeMenu", param: self.params.enableSIFTopologyGrouping}); - if ( chiseInstance.elementUtilities.mapType === 'SIF' ) { - actions.push({name: "applySIFTopologyGrouping", param: { apply }}); + actions.push({ + name: "changeMenu", + param: self.params.enableSIFTopologyGrouping, + }); + if (chiseInstance.elementUtilities.mapType === "SIF") { + actions.push({ name: "applySIFTopologyGrouping", param: { apply } }); - if ( currentGeneralProperties.recalculateLayoutOnComplexityManagement ) { + if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) { var preferences = { randomize: false }; - var layoutOptions = appUtilities.layoutPropertiesView.getLayoutOptions(preferences, chiseInstance); + var layoutOptions = + appUtilities.layoutPropertiesView.getLayoutOptions( + preferences, + chiseInstance + ); var layoutParam = { - options: layoutOptions + options: layoutOptions, }; - actions.push({name: "layout", param: layoutParam}); + actions.push({ name: "layout", param: layoutParam }); } } cy.undoRedo().do("batch", actions); // cy.undoRedo().do("changeMenu", self.params.enableSIFTopologyGrouping); - $('#enable-sif-topology-grouping').blur(); + $("#enable-sif-topology-grouping").blur(); }); - $(document).on("change", "#highlight-thickness", function(evt) { + $(document).on("change", "#highlight-thickness", function (evt) { var cy = appUtilities.getActiveCy(); - var viewUtilities = cy.viewUtilities('get'); - self.params.extraHighlightThickness.value = Number($('#highlight-thickness').val()); - self.params.highlightColor.value = $('#highlight-color').val(); + var viewUtilities = cy.viewUtilities("get"); + self.params.extraHighlightThickness.value = Number( + $("#highlight-thickness").val() + ); + self.params.highlightColor.value = $("#highlight-color").val(); var extraHighlightThickness = self.params.extraHighlightThickness.value; var highlightColor = self.params.highlightColor.value; - - viewUtilities.changeHighlightStyle(0, { - 'border-width' : function (ele) { - return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); - }, 'border-color': highlightColor - }, { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); }, - 'line-color': highlightColor, - 'source-arrow-color': highlightColor, - 'target-arrow-color': highlightColor - }); - + + viewUtilities.changeHighlightStyle( + 0, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} + ); + cy.undoRedo().do("changeMenu", self.params.extraHighlightThickness); - $('#highlight-thickness').blur(); + $("#highlight-thickness").blur(); }); - - $(document).on("change", "#highlight-color", function(evt) { + + $(document).on("change", "#highlight-color", function (evt) { var cy = appUtilities.getActiveCy(); - var viewUtilities = cy.viewUtilities('get'); - self.params.extraHighlightThickness.value = Number($('#highlight-thickness').val()); - self.params.highlightColor.value = $('#highlight-color').val(); + var viewUtilities = cy.viewUtilities("get"); + self.params.extraHighlightThickness.value = Number( + $("#highlight-thickness").val() + ); + self.params.highlightColor.value = $("#highlight-color").val(); var extraHighlightThickness = self.params.extraHighlightThickness.value; var highlightColor = self.params.highlightColor.value; - - viewUtilities.changeHighlightStyle(0, { - 'border-width': function (ele) { - return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); - }, - 'border-color': highlightColor - }, { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); }, - 'line-color': highlightColor, - 'source-arrow-color': highlightColor, - 'target-arrow-color': highlightColor - }); - + + viewUtilities.changeHighlightStyle( + 0, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} + ); + cy.undoRedo().do("changeMenu", self.params.highlightColor); - $('#highlight-color').blur(); + $("#highlight-color").blur(); }); - + $(document).on("click", "#inspector-map-tab", function (evt) { var chiseInstance = appUtilities.getActiveChiseInstance(); //document.getElementById('map-type').value = chiseInstance.getMapType() ? chiseInstance.getMapType() : "Unknown"; @@ -841,282 +1041,415 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({ $(document).on("shown.bs.tab", "#inspector-map-tab", function (evt) { var chiseInstance = appUtilities.getActiveChiseInstance(); - //document.getElementById('map-type').value = chiseInstance.getMapType() ? chiseInstance.getMapType() : "Unknown"; + if (chiseInstance.getMapType()) { + document.getElementById("map-type").value = chiseInstance.getMapType(); + } }); $(document).on("click", "#map-general-default-button", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); var ur = cy.undoRedo(); var actions = []; - self.params.allowCompoundNodeResize.value = appUtilities.defaultGeneralProperties.allowCompoundNodeResize; - self.params.inferNestingOnLoad.value = appUtilities.defaultGeneralProperties.inferNestingOnLoad; - self.params.enablePorts.value = appUtilities.defaultGeneralProperties.enablePorts; - self.params.enableSIFTopologyGrouping.value = appUtilities.defaultGeneralProperties.enableSIFTopologyGrouping; - self.params.compoundPadding.value = appUtilities.defaultGeneralProperties.compoundPadding; - self.params.arrowScale.value = appUtilities.defaultGeneralProperties.arrowScale; - self.params.extraHighlightThickness.value = appUtilities.defaultGeneralProperties.extraHighlightThickness; - self.params.highlightColor.value = appUtilities.defaultGeneralProperties.highlightColor; - actions.push({name: "changeMenu", param: self.params.allowCompoundNodeResize}); - actions.push({name: "changeMenu", param: self.params.inferNestingOnLoad}); - actions.push({name: "changeMenu", param: self.params.enablePorts}); - actions.push({name: "changeMenu", param: self.params.enableSIFTopologyGrouping}); - actions.push({name: "applySIFTopologyGrouping", param: { apply: self.params.enableSIFTopologyGrouping.value }}); - actions.push({name: "changeMenu", param: self.params.compoundPadding}); - actions.push({name: "changeMenu", param: self.params.arrowScale}); - actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale", - valueMap: self.params.arrowScale.value}}); - actions.push({name: "changeMenu", param: self.params.extraHighlightThickness}); - actions.push({name: "changeMenu", param: self.params.highlightColor}); + self.params.allowCompoundNodeResize.value = + appUtilities.defaultGeneralProperties.allowCompoundNodeResize; + self.params.inferNestingOnLoad.value = + appUtilities.defaultGeneralProperties.inferNestingOnLoad; + self.params.enablePorts.value = + appUtilities.defaultGeneralProperties.enablePorts; + self.params.enableSIFTopologyGrouping.value = + appUtilities.defaultGeneralProperties.enableSIFTopologyGrouping; + self.params.compoundPadding.value = + appUtilities.defaultGeneralProperties.compoundPadding; + self.params.arrowScale.value = + appUtilities.defaultGeneralProperties.arrowScale; + self.params.extraHighlightThickness.value = + appUtilities.defaultGeneralProperties.extraHighlightThickness; + self.params.highlightColor.value = + appUtilities.defaultGeneralProperties.highlightColor; + actions.push({ + name: "changeMenu", + param: self.params.allowCompoundNodeResize, + }); + actions.push({ + name: "changeMenu", + param: self.params.inferNestingOnLoad, + }); + actions.push({ name: "changeMenu", param: self.params.enablePorts }); + actions.push({ + name: "changeMenu", + param: self.params.enableSIFTopologyGrouping, + }); + actions.push({ + name: "applySIFTopologyGrouping", + param: { apply: self.params.enableSIFTopologyGrouping.value }, + }); + actions.push({ name: "changeMenu", param: self.params.compoundPadding }); + actions.push({ name: "changeMenu", param: self.params.arrowScale }); + actions.push({ + name: "changeCss", + param: { + eles: cy.edges(), + name: "arrow-scale", + valueMap: self.params.arrowScale.value, + }, + }); + actions.push({ + name: "changeMenu", + param: self.params.extraHighlightThickness, + }); + actions.push({ name: "changeMenu", param: self.params.highlightColor }); ur.do("batch", actions); }); }, - render: function() { - + render: function () { // use active cy instance var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); // get current general properties for cy - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); this.template = _.template($("#map-tab-general-template").html()); this.$el.empty(); this.$el.html(this.template(currentGeneralProperties)); - colorPickerUtils.bindPicker2Input('#highlight-color', function(evt) { - $('#highlight-color').trigger("change"); + colorPickerUtils.bindPicker2Input("#highlight-color", function (evt) { + $("#highlight-color").trigger("change"); }); $("#map-type").val(chiseInstance.elementUtilities.getMapType()); return this; - } + }, }); // inherit from GeneralPropertiesParentView var MapTabLabelPanel = GeneralPropertiesParentView.extend({ - initialize: function() { + initialize: function () { var self = this; // initialize undo-redo parameters self.params = {}; - self.params.dynamicLabelSize = {id: "dynamic-label-size-select", type: "select", - property: "currentGeneralProperties.dynamicLabelSize"}; - - self.params.showComplexName = {id: "show-complex-name", type: "checkbox", - property: "currentGeneralProperties.showComplexName", update: self.applyUpdate}; - - self.params.adjustNodeLabelFontSizeAutomatically = {id: "adjust-node-label-font-size-automatically", type: "checkbox", - property: "currentGeneralProperties.adjustNodeLabelFontSizeAutomatically"}; + self.params.dynamicLabelSize = { + id: "dynamic-label-size-select", + type: "select", + property: "currentGeneralProperties.dynamicLabelSize", + }; - self.params.fitLabelsToNodes = {id: "fit-labels-to-nodes", type: "checkbox", - property: "currentGeneralProperties.fitLabelsToNodes"}; + self.params.showComplexName = { + id: "show-complex-name", + type: "checkbox", + property: "currentGeneralProperties.showComplexName", + update: self.applyUpdate, + }; - self.params.fitLabelsToInfoboxes = {id: "fit-labels-to-infoboxes", type: "checkbox", - property: "currentGeneralProperties.fitLabelsToInfoboxes"}; + self.params.adjustNodeLabelFontSizeAutomatically = { + id: "adjust-node-label-font-size-automatically", + type: "checkbox", + property: "currentGeneralProperties.adjustNodeLabelFontSizeAutomatically", + }; - $(document).on("change", 'select[name="dynamic-label-size"]', function (evt) { + self.params.fitLabelsToNodes = { + id: "fit-labels-to-nodes", + type: "checkbox", + property: "currentGeneralProperties.fitLabelsToNodes", + }; - // use active cy instance - var cy = appUtilities.getActiveCy(); + self.params.fitLabelsToInfoboxes = { + id: "fit-labels-to-infoboxes", + type: "checkbox", + property: "currentGeneralProperties.fitLabelsToInfoboxes", + }; - self.params.dynamicLabelSize.value = $('#dynamic-label-size-select option:selected').val(); - cy.undoRedo().do("changeMenu", self.params.dynamicLabelSize); - $('#dynamic-label-size-select').blur(); - self.applyUpdate(); - }); + $(document).on( + "change", + 'select[name="dynamic-label-size"]', + function (evt) { + // use active cy instance + var cy = appUtilities.getActiveCy(); + + self.params.dynamicLabelSize.value = $( + "#dynamic-label-size-select option:selected" + ).val(); + cy.undoRedo().do("changeMenu", self.params.dynamicLabelSize); + $("#dynamic-label-size-select").blur(); + self.applyUpdate(); + } + ); $(document).on("change", "#show-complex-name", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.showComplexName.value = $('#show-complex-name').prop('checked'); + self.params.showComplexName.value = + $("#show-complex-name").prop("checked"); cy.undoRedo().do("changeMenu", self.params.showComplexName); - $('#show-complex-name').blur(); + $("#show-complex-name").blur(); }); - $(document).on("change", "#adjust-node-label-font-size-automatically", function (evt) { - - // use active cy instance - var cy = appUtilities.getActiveCy(); - - self.params.adjustNodeLabelFontSizeAutomatically.value = $('#adjust-node-label-font-size-automatically').prop('checked'); - cy.undoRedo().do("changeMenu", self.params.adjustNodeLabelFontSizeAutomatically); - $('#adjust-node-label-font-size-automatically').blur(); - self.applyUpdate(); - }); + $(document).on( + "change", + "#adjust-node-label-font-size-automatically", + function (evt) { + // use active cy instance + var cy = appUtilities.getActiveCy(); + + self.params.adjustNodeLabelFontSizeAutomatically.value = $( + "#adjust-node-label-font-size-automatically" + ).prop("checked"); + cy.undoRedo().do( + "changeMenu", + self.params.adjustNodeLabelFontSizeAutomatically + ); + $("#adjust-node-label-font-size-automatically").blur(); + self.applyUpdate(); + } + ); $(document).on("change", "#fit-labels-to-nodes", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.fitLabelsToNodes.value = $('#fit-labels-to-nodes').prop('checked'); + self.params.fitLabelsToNodes.value = $("#fit-labels-to-nodes").prop( + "checked" + ); cy.undoRedo().do("changeMenu", self.params.fitLabelsToNodes); - $('#fit-labels-to-nodes').blur(); + $("#fit-labels-to-nodes").blur(); self.applyUpdate(); }); $(document).on("change", "#fit-labels-to-infoboxes", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.fitLabelsToInfoboxes.value = $('#fit-labels-to-infoboxes').prop('checked'); + self.params.fitLabelsToInfoboxes.value = $( + "#fit-labels-to-infoboxes" + ).prop("checked"); cy.undoRedo().do("changeMenu", self.params.fitLabelsToInfoboxes); - $('#fit-labels-to-infoboxes').blur(); + $("#fit-labels-to-infoboxes").blur(); self.applyUpdate(); }); $(document).on("click", "#map-label-default-button", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); var ur = cy.undoRedo(); var actions = []; - self.params.dynamicLabelSize.value = appUtilities.defaultGeneralProperties.dynamicLabelSize; - self.params.adjustNodeLabelFontSizeAutomatically.value = appUtilities.defaultGeneralProperties.adjustNodeLabelFontSizeAutomatically; - self.params.fitLabelsToNodes.value = appUtilities.defaultGeneralProperties.fitLabelsToNodes; - self.params.fitLabelsToInfoboxes.value = appUtilities.defaultGeneralProperties.fitLabelsToInfoboxes; - self.params.showComplexName.value = appUtilities.defaultGeneralProperties.showComplexName; - - actions.push({name: "changeMenu", param: self.params.dynamicLabelSize}); - actions.push({name: "changeMenu", param: self.params.adjustNodeLabelFontSizeAutomatically}); - actions.push({name: "changeMenu", param: self.params.fitLabelsToNodes}); - actions.push({name: "changeMenu", param: self.params.fitLabelsToInfoboxes}); - actions.push({name: "changeMenu", param: self.params.showComplexName}); + self.params.dynamicLabelSize.value = + appUtilities.defaultGeneralProperties.dynamicLabelSize; + self.params.adjustNodeLabelFontSizeAutomatically.value = + appUtilities.defaultGeneralProperties.adjustNodeLabelFontSizeAutomatically; + self.params.fitLabelsToNodes.value = + appUtilities.defaultGeneralProperties.fitLabelsToNodes; + self.params.fitLabelsToInfoboxes.value = + appUtilities.defaultGeneralProperties.fitLabelsToInfoboxes; + self.params.showComplexName.value = + appUtilities.defaultGeneralProperties.showComplexName; + + actions.push({ name: "changeMenu", param: self.params.dynamicLabelSize }); + actions.push({ + name: "changeMenu", + param: self.params.adjustNodeLabelFontSizeAutomatically, + }); + actions.push({ name: "changeMenu", param: self.params.fitLabelsToNodes }); + actions.push({ + name: "changeMenu", + param: self.params.fitLabelsToInfoboxes, + }); + actions.push({ name: "changeMenu", param: self.params.showComplexName }); ur.do("batch", actions); }); }, - render: function() { - + render: function () { // use the active cy instance var cy = appUtilities.getActiveCy(); // get current general properties of cy - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); this.template = _.template($("#map-tab-label-template").html()); this.$el.empty(); this.$el.html(this.template(currentGeneralProperties)); return this; - } + }, }); // inherit from GeneralPropertiesParentView var MapTabRearrangementPanel = GeneralPropertiesParentView.extend({ - initialize: function() { + initialize: function () { var self = this; // initialize undo-redo parameters self.params = {}; - self.params.recalculateLayoutOnComplexityManagement = {id: "recalculate-layout-on-complexity-management", type: "checkbox", - property: "currentGeneralProperties.recalculateLayoutOnComplexityManagement"}; - - self.params.rearrangeOnComplexityManagement = {id: "rearrange-on-complexity-management", type: "checkbox", - property: "currentGeneralProperties.rearrangeOnComplexityManagement"}; - - self.params.animateOnDrawingChanges = {id: "animate-on-drawing-changes", type: "checkbox", - property: "currentGeneralProperties.animateOnDrawingChanges"}; - - $(document).on("change", "#recalculate-layout-on-complexity-management", function (evt) { - - // use active cy instance - var cy = appUtilities.getActiveCy(); - - self.params.recalculateLayoutOnComplexityManagement.value = $('#recalculate-layout-on-complexity-management').prop('checked'); - cy.undoRedo().do("changeMenu", self.params.recalculateLayoutOnComplexityManagement); - $('#recalculate-layout-on-complexity-management').blur(); - }); + self.params.recalculateLayoutOnComplexityManagement = { + id: "recalculate-layout-on-complexity-management", + type: "checkbox", + property: + "currentGeneralProperties.recalculateLayoutOnComplexityManagement", + }; - $(document).on("change", "#rearrange-on-complexity-management", function (evt) { + self.params.rearrangeOnComplexityManagement = { + id: "rearrange-on-complexity-management", + type: "checkbox", + property: "currentGeneralProperties.rearrangeOnComplexityManagement", + }; - // use active cy instance - var cy = appUtilities.getActiveCy(); + self.params.animateOnDrawingChanges = { + id: "animate-on-drawing-changes", + type: "checkbox", + property: "currentGeneralProperties.animateOnDrawingChanges", + }; - self.params.rearrangeOnComplexityManagement.value = $('#rearrange-on-complexity-management').prop('checked'); - cy.undoRedo().do("changeMenu", self.params.rearrangeOnComplexityManagement); - $('#rearrange-on-complexity-management').blur(); - }); + $(document).on( + "change", + "#recalculate-layout-on-complexity-management", + function (evt) { + // use active cy instance + var cy = appUtilities.getActiveCy(); + + self.params.recalculateLayoutOnComplexityManagement.value = $( + "#recalculate-layout-on-complexity-management" + ).prop("checked"); + cy.undoRedo().do( + "changeMenu", + self.params.recalculateLayoutOnComplexityManagement + ); + $("#recalculate-layout-on-complexity-management").blur(); + } + ); + + $(document).on( + "change", + "#rearrange-on-complexity-management", + function (evt) { + // use active cy instance + var cy = appUtilities.getActiveCy(); + + self.params.rearrangeOnComplexityManagement.value = $( + "#rearrange-on-complexity-management" + ).prop("checked"); + cy.undoRedo().do( + "changeMenu", + self.params.rearrangeOnComplexityManagement + ); + $("#rearrange-on-complexity-management").blur(); + } + ); $(document).on("change", "#animate-on-drawing-changes", function (evt) { - // use active cy instance var cy = appUtilities.getActiveCy(); - self.params.animateOnDrawingChanges.value = $('#animate-on-drawing-changes').prop('checked'); + self.params.animateOnDrawingChanges.value = $( + "#animate-on-drawing-changes" + ).prop("checked"); cy.undoRedo().do("changeMenu", self.params.animateOnDrawingChanges); - $('#animate-on-drawing-changes').blur(); + $("#animate-on-drawing-changes").blur(); }); - $(document).on("click", "#map-rearrangement-default-button", function (evt) { - - // use active cy instance - var cy = appUtilities.getActiveCy(); - - var ur = cy.undoRedo(); - var actions = []; - self.params.recalculateLayoutOnComplexityManagement.value = appUtilities.defaultGeneralProperties.recalculateLayoutOnComplexityManagement; - self.params.rearrangeOnComplexityManagement.value = appUtilities.defaultGeneralProperties.rearrangeOnComplexityManagement; - self.params.animateOnDrawingChanges.value = appUtilities.defaultGeneralProperties.animateOnDrawingChanges; - actions.push({name: "changeMenu", param: self.params.recalculateLayoutOnComplexityManagement}); - actions.push({name: "changeMenu", param: self.params.rearrangeOnComplexityManagement}); - actions.push({name: "changeMenu", param: self.params.animateOnDrawingChanges}); - ur.do("batch", actions); - }); + $(document).on( + "click", + "#map-rearrangement-default-button", + function (evt) { + // use active cy instance + var cy = appUtilities.getActiveCy(); + + var ur = cy.undoRedo(); + var actions = []; + self.params.recalculateLayoutOnComplexityManagement.value = + appUtilities.defaultGeneralProperties.recalculateLayoutOnComplexityManagement; + self.params.rearrangeOnComplexityManagement.value = + appUtilities.defaultGeneralProperties.rearrangeOnComplexityManagement; + self.params.animateOnDrawingChanges.value = + appUtilities.defaultGeneralProperties.animateOnDrawingChanges; + actions.push({ + name: "changeMenu", + param: self.params.recalculateLayoutOnComplexityManagement, + }); + actions.push({ + name: "changeMenu", + param: self.params.rearrangeOnComplexityManagement, + }); + actions.push({ + name: "changeMenu", + param: self.params.animateOnDrawingChanges, + }); + ur.do("batch", actions); + } + ); }, - render: function() { - + render: function () { // use the active cy instance var cy = appUtilities.getActiveCy(); // get current general properties of cy - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); this.template = _.template($("#map-tab-rearrangement-template").html()); this.$el.empty(); this.$el.html(this.template(currentGeneralProperties)); return this; - } + }, }); //The render functions for the experimental panel var experimentTabPanel = GeneralPropertiesParentView.extend({ - initialize: function() { + initialize: function () { var self = this; self.params = {}; - self.params.experimentDescription = {id: "map-experiment", type: "text", - property: "currentGeneralProperties.experimentDescription"}; - - $(document).on("click","#load-exp-data-util", function (evt) { - $("#overlay-data").trigger('click'); - }); + self.params.experimentDescription = { + id: "map-experiment", + type: "text", + property: "currentGeneralProperties.experimentDescription", + }; - $(document).on("click", "#experiment-remove-all, #experiment-data-remove-all", function (evt) { - var cy = appUtilities.getActiveCy(); - var param = {self}; - cy.undoRedo().do("updateRemoveAll", param); - self.render(); + $(document).on("click", "#load-exp-data-util", function (evt) { + $("#overlay-data").trigger("click"); }); - $(document).on("click", "#experiment-hide-all, #experiment-data-hide-all", function (evt) { - var chiseInstance = appUtilities.getActiveChiseInstance(); - var cy = appUtilities.getActiveCy(); - var params = {}; - params.self = self; - if(evt.target.value == 'true'){ - cy.undoRedo().do("hideAll", params); + $(document).on( + "click", + "#experiment-remove-all, #experiment-data-remove-all", + function (evt) { + var cy = appUtilities.getActiveCy(); + var param = { self }; + cy.undoRedo().do("updateRemoveAll", param); + self.render(); } - else{ - cy.undoRedo().do("unhideAll", params); + ); + + $(document).on( + "click", + "#experiment-hide-all, #experiment-data-hide-all", + function (evt) { + var chiseInstance = appUtilities.getActiveChiseInstance(); + var cy = appUtilities.getActiveCy(); + var params = {}; + params.self = self; + if (evt.target.value == "true") { + cy.undoRedo().do("hideAll", params); + } else { + cy.undoRedo().do("unhideAll", params); + } } - }); + ); // Make the DIV element draggable https://www.w3schools.com/howto/howto_js_draggable.asp function makeElementDraggable(elmnt) { - var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + var pos1 = 0, + pos2 = 0, + pos3 = 0, + pos4 = 0; if (document.getElementById(elmnt.id + "-header")) { // if present, the header is where you move the DIV from: - document.getElementById(elmnt.id + "-header").onmousedown = dragMouseDown; + document.getElementById(elmnt.id + "-header").onmousedown = + dragMouseDown; } else { // otherwise, move the DIV from anywhere inside the DIV: elmnt.onmousedown = dragMouseDown; @@ -1142,8 +1475,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: - elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; - elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; + elmnt.style.top = elmnt.offsetTop - pos2 + "px"; + elmnt.style.left = elmnt.offsetLeft - pos1 + "px"; } function closeDragElement() { @@ -1154,32 +1487,39 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ } $(document).on("click", "#show-experiment-data-as-table", function () { - var divId = 'draggable-exp-data-div'; - - if ($('#' + divId).is(':visible')) { + var divId = "draggable-exp-data-div"; + + if ($("#" + divId).is(":visible")) { return; } var chiseInstance = appUtilities.getActiveChiseInstance(); var data = chiseInstance.getExperimentalData().parsedDataMap; makeElementDraggable(document.getElementById(divId)); - $('#' + divId).show(); - fillTable4ExpData(document.getElementById('map-exp-table'), data); - - $(document).off('keyup', '#search-exp-table'); - $(document).on('keyup', '#search-exp-table', _.debounce(function () { - searchTable(document.getElementById('map-exp-table'), $('#search-exp-table').val()); - }, 250)); + $("#" + divId).show(); + fillTable4ExpData(document.getElementById("map-exp-table"), data); + + $(document).off("keyup", "#search-exp-table"); + $(document).on( + "keyup", + "#search-exp-table", + _.debounce(function () { + searchTable( + document.getElementById("map-exp-table"), + $("#search-exp-table").val() + ); + }, 250) + ); }); $(document).on("click", "#close-experiment-data-as-table", function () { - $('#draggable-exp-data-div').hide(); + $("#draggable-exp-data-div").hide(); }); function fillTable4ExpData(elem, data) { - var headers = ['Node']; + var headers = ["Node"]; var fileNames = {}; var experiments = {}; - var s = ''; + var s = ""; for (var node in data) { for (var exp in data[node]) { @@ -1188,31 +1528,31 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ } for (var h in experiments) { - var arr = h.split('?'); + var arr = h.split("?"); if (!fileNames[arr[0]]) { fileNames[arr[0]] = 1; // for colspan } else { fileNames[arr[0]] += 1; // for colspan } - headers.push(arr[arr.length-1]); + headers.push(arr[arr.length - 1]); } // insert file names as "headers" of html table - s += '' + s += ''; for (let i in fileNames) { s += `${i}`; } - s += '' + s += ""; - s += '' + s += ""; for (let i = 0; i < headers.length; i++) { - var centerer = ''; + var centerer = ""; if (i > 0) { centerer = 'class="text-center"'; } - s += `${headers[i]}` + s += `${headers[i]}`; } - s += '' + s += ""; // insert table columns var nodeCnt = 0; @@ -1221,33 +1561,43 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ nodeLabels.push(node); s += `${node}`; for (var exp in experiments) { - s += `${data[node][exp] || '-'}` + s += `${data[node][exp] || "-"}`; } - s += ''; + s += ""; } elem.innerHTML = s; - + var tableInitialOrderHtml = s; + var tableOrdering = "initialOrder"; // change `let i` to `var i` to see the difference for (let i = 0; i < headers.length; i++) { - $(document).off('click', '#sortable-table-header-' + i); - $(document).on('click', '#sortable-table-header-' + i, function () { - sortTable(document.getElementById('map-exp-table'), i); + $(document).off("click", "#sortable-table-header-" + i); + $(document).on("click", "#sortable-table-header-" + i, function () { + if (tableOrdering === "initialOrder") { + sortTable(document.getElementById("map-exp-table"), i, "asc"); + tableOrdering = "ascendingOrder"; + } else if (tableOrdering === "ascendingOrder") { + sortTable(document.getElementById("map-exp-table"), i, "desc"); + tableOrdering = "descendingOrder"; + } else if (tableOrdering === "descendingOrder") { + elem.innerHTML = tableInitialOrderHtml; + tableOrdering = "initialOrder"; + } }); } for (let i = 0; i < nodeCnt; i++) { - $(document).off('mouseenter', '#hoverable-table-row-' + i); - $(document).off('mouseleave', '#hoverable-table-row-' + i); - $(document).on('mouseenter', '#hoverable-table-row-' + i, () => { + $(document).off("mouseenter", "#hoverable-table-row-" + i); + $(document).off("mouseleave", "#hoverable-table-row-" + i); + $(document).on("mouseenter", "#hoverable-table-row-" + i, () => { var cy = appUtilities.getActiveCy(); - var vu = cy.viewUtilities('get'); - var eles = cy.nodes().filter(x => x.data('label') == nodeLabels[i]); + var vu = cy.viewUtilities("get"); + var eles = cy.nodes().filter((x) => x.data("label") == nodeLabels[i]); vu.highlight(eles, 2); }); - $(document).on('mouseleave', '#hoverable-table-row-' + i, () => { + $(document).on("mouseleave", "#hoverable-table-row-" + i, () => { var cy = appUtilities.getActiveCy(); - var vu = cy.viewUtilities('get'); - var eles = cy.nodes().filter(x => x.data('label') == nodeLabels[i]); + var vu = cy.viewUtilities("get"); + var eles = cy.nodes().filter((x) => x.data("label") == nodeLabels[i]); vu.removeHighlights(eles); }); } @@ -1258,18 +1608,18 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ searchIdxes = [0]; } filter = filter.toUpperCase(); - var rows = table.getElementsByTagName('tr'); + var rows = table.getElementsByTagName("tr"); // Loop through all table rows, and hide those who don't match the search query for (var i = 0; i < rows.length; i++) { for (var j = 0; j < searchIdxes.length; j++) { - var col = rows[i].getElementsByTagName('td')[searchIdxes[0]]; + var col = rows[i].getElementsByTagName("td")[searchIdxes[0]]; if (col) { var txt = col.textContent || col.innerText; if (txt.toUpperCase().indexOf(filter) > -1) { - rows[i].style.display = ''; + rows[i].style.display = ""; } else { - rows[i].style.display = 'none'; + rows[i].style.display = "none"; } } } @@ -1278,11 +1628,17 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ // makes bubble sort based on column index in specified direction function sortTable(table, colIdx, dir) { - var rows, switching, i, x, y, shouldSwitch, switchcount = 0; + var rows, + switching, + i, + x, + y, + shouldSwitch, + switchcount = 0; switching = true; // Set the sorting direction to ascending: if (!dir) { - dir = 'asc'; + dir = "asc"; } if (!colIdx) { colIdx = 0; @@ -1300,8 +1656,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ shouldSwitch = false; /* Get the two elements you want to compare, one from current row and one from the next: */ - x = rows[i].getElementsByTagName('td')[colIdx]; - y = rows[i + 1].getElementsByTagName('td')[colIdx]; + x = rows[i].getElementsByTagName("td")[colIdx]; + y = rows[i + 1].getElementsByTagName("td")[colIdx]; if (!x || !y) { continue; } @@ -1315,15 +1671,15 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ } /* Check if the two rows should switch place, based on the direction, asc or desc: */ - if (dir == 'asc') { + if (dir == "asc") { // "-" is special character to show emmptiness - if (v1 > v2 || (v1 != '-' && v2 == '-') ) { + if (v1 > v2 || (v1 != "-" && v2 == "-")) { // If so, mark as a switch and break the loop: shouldSwitch = true; break; } - } else if (dir == 'desc') { - if (v1 < v2 || (v1 == '-' && v2 != '-')) { + } else if (dir == "desc") { + if (v1 < v2 || (v1 == "-" && v2 != "-")) { // If so, mark as a switch and break the loop: shouldSwitch = true; break; @@ -1340,8 +1696,8 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ } else { /* If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. */ - if (switchcount == 0 && dir == 'asc') { - dir = 'desc'; + if (switchcount == 0 && dir == "asc") { + dir = "desc"; switching = true; } } @@ -1353,13 +1709,12 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ var cy = appUtilities.getActiveCy(); var fileName = this.id.substring(20); var subExperiments = $('[id^="experiment-vis-' + filename + '"]'); - var params = {fileName}; + var params = { fileName }; params.self = self; - if(this.value === "true"){ + if (this.value === "true") { cy.undoRedo().do("fileHide", params); - } - else{ + } else { cy.undoRedo().do("fileUnhide", params); } self.render(); @@ -1369,24 +1724,23 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); var fileName = evt.target.id.substring(23); - var param = {fileName, self, document}; - cy.undoRedo().do("deleteFile", param); + var param = { fileName, self, document }; + cy.undoRedo().do("deleteFile", param); }); //change experiment visibilty $(document).on("click", '[id^="experiment-vis-"]', function (evt) { var expRep = evt.target.id.substring(15); - var index = expRep.indexOf('?'); - var fileName = expRep.substring(0,index); - var expName = expRep.substring(index+1); - var params = {fileName, expName}; + var index = expRep.indexOf("?"); + var fileName = expRep.substring(0, index); + var expName = expRep.substring(index + 1); + var params = { fileName, expName }; params.evt = evt; - params.self=self; + params.self = self; var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); - if(evt.target.value === "true"){ + if (evt.target.value === "true") { cy.undoRedo().do("hideExperimentPanel", params); - } - else{ + } else { cy.undoRedo().do("unhideExperimentPanel", params); } }); @@ -1396,128 +1750,160 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ var chiseInstance = appUtilities.getActiveChiseInstance(); var expRep = evt.target.id.substring(18); var cy = appUtilities.getActiveCy(); - var index = expRep.indexOf('?'); - var fileName = expRep.substring(0,index); - var expName = expRep.substring(index+1); - var param = {self, fileName, expName, document} + var index = expRep.indexOf("?"); + var fileName = expRep.substring(0, index); + var expName = expRep.substring(index + 1); + var param = { self, fileName, expName, document }; cy.undoRedo().do("updateExperimentPanel", param); }); }, - recalculate: function(){ + recalculate: function () { var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); var self = this; var fileNames = chiseInstance.getGroupedDataMap(); param = self; - self.params.experimentDescription.value = fileNames; + self.params.experimentDescription.value = fileNames; cy.undoRedo().do("expOnLoad", param); }, - loadExperiment: function(params){ + loadExperiment: function (params) { $(".validation-mode-tab").removeClass("active"); - $('#inspector-map-tab a').tab('show'); - - var panels = $("#sbgn-inspector-map").find(".panel-heading"); - for(var i = 0 ; i < panels.length; i++ ){ - if(!$(panels[i]).hasClass("collapsed") && panels[i].id != "sbgn-inspector-map-properties-experiment-heading"){ + $("#inspector-map-tab a").tab("show"); + + var panels = $("#sbgn-inspector-map").find(".panel-heading"); + for (var i = 0; i < panels.length; i++) { + if ( + !$(panels[i]).hasClass("collapsed") && + panels[i].id != "sbgn-inspector-map-properties-experiment-heading" + ) { $(panels[i]).click(); } } - - if($("#sbgn-inspector-map-properties-experiment-heading").hasClass("collapsed")) { - $('#sbgn-inspector-map-properties-experiment-heading').click(); + + if ( + $("#sbgn-inspector-map-properties-experiment-heading").hasClass( + "collapsed" + ) + ) { + $("#sbgn-inspector-map-properties-experiment-heading").click(); } var cy = appUtilities.getActiveCy(); var chiseInstance = appUtilities.getActiveChiseInstance(); - var generalProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var generalProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); var firstExperiment = generalProperties.experimentDescription; var self = this; var fileNames = chiseInstance.getGroupedDataMap(); params.self = self; - self.params.experimentDescription.value = fileNames; + self.params.experimentDescription.value = fileNames; params.document = document; params.value = generalProperties.mapColorScheme; params.scheme_type = generalProperties.mapColorSchemeStyle; params.self2 = appUtilities.colorSchemeInspectorView; - + var ur = cy.undoRedo(); var actions = []; //after the deleting the first experiemnt color schme should come back - if(firstExperiment == undefined || Object.keys(firstExperiment).length == 0) - { - var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme; - var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle; - actions = appUtilities.getActionsToApplyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, appUtilities.colorSchemeInspectorView); - actions.push({name: "loadExperiment", param: params}); + if ( + firstExperiment == undefined || + Object.keys(firstExperiment).length == 0 || + params.sampleExperiment + ) { + var defaultColorScheme = + appUtilities.defaultGeneralProperties.mapColorScheme; + var defaultColorSchemeStyle = + appUtilities.defaultGeneralProperties.mapColorSchemeStyle; + actions = appUtilities.getActionsToApplyMapColorScheme( + defaultColorScheme, + defaultColorSchemeStyle, + appUtilities.colorSchemeInspectorView + ); + actions.push({ name: "loadExperiment", param: params }); ur.do("batch", actions); - } - else{ + } else { cy.undoRedo().do("loadMore", params); } }, - render: function() { - + render: function () { var cy = appUtilities.getActiveCy(); var self = this; var chiseInstance = appUtilities.getActiveChiseInstance(); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); self.template = _.template($("#map-tab-experiment-template").html()); - currentGeneralProperties.experimentDescription = chiseInstance.getGroupedDataMap(); + currentGeneralProperties.experimentDescription = + chiseInstance.getGroupedDataMap(); this.$el.html(this.template(currentGeneralProperties)); - var refreshButtons = function(param){ + var refreshButtons = function (param) { var document = param.document; var visibleDataMapByExp = param.visibleDataMapByExp; var visibleFiles = param.visibleFiles; var fileDescription = param.fileDescription; var allVis = param.allVis; var fileTitle = param.fileTitle; - for (let i in visibleDataMapByExp) - { - var index = i.indexOf('?'); - var fileName = i.substring(0,index); - var expName = i.substring(index+1); - var buttonName = "experiment-vis-"+ fileName+ "?" + expName; + for (let i in visibleDataMapByExp) { + var index = i.indexOf("?"); + var fileName = i.substring(0, index); + var expName = i.substring(index + 1); + var buttonName = "experiment-vis-" + fileName + "?" + expName; var button = document.getElementById(buttonName); - if(button != null){ - if(visibleDataMapByExp[i] == true ||visibleDataMapByExp[i] === true ){ + if (button != null) { + if ( + visibleDataMapByExp[i] == true || + visibleDataMapByExp[i] === true + ) { button.value = "true"; button.style.backgroundColor = ""; - } - else { + } else { button.value = "false"; button.style.backgroundColor = "#EAEAEA"; button.style.color = "#FFFFFF"; } } } - for (let i in visibleFiles){ - - var buttonName = "experiment-file-vis-"+ i; + for (let i in visibleFiles) { + var buttonName = "experiment-file-vis-" + i; var button = document.getElementById(buttonName); - - if(button != null){ - if(fileTitle[i] != undefined && fileDescription[i] != undefined) - { - button.title = button.title + i + " \x0A(" + fileTitle[i].replace(/(\r\n|\n|\r)/gm,"") + ":\x0A" + fileDescription[i].replace(/(\r\n|\n|\r)/gm,"") + ")"; - } - else if(fileDescription[i] != undefined){ - button.title = button.title + i + " \x0A(" + fileDescription[i].replace(/(\r\n|\n|\r)/gm,"") + ")"; - } - else if(fileTitle[i] != undefined) - { - button.title = button.title + i + " \x0A(" + fileTitle[i].replace(/(\r\n|\n|\r)/gm,"") + ")"; - } - else{ + + if (button != null) { + if (fileTitle[i] != undefined && fileDescription[i] != undefined) { + button.title = + button.title + + i + + " \x0A(" + + fileTitle[i].replace(/(\r\n|\n|\r)/gm, "") + + ":\x0A" + + fileDescription[i].replace(/(\r\n|\n|\r)/gm, "") + + ")"; + } else if (fileDescription[i] != undefined) { + button.title = + button.title + + i + + " \x0A(" + + fileDescription[i].replace(/(\r\n|\n|\r)/gm, "") + + ")"; + } else if (fileTitle[i] != undefined) { + button.title = + button.title + + i + + " \x0A(" + + fileTitle[i].replace(/(\r\n|\n|\r)/gm, "") + + ")"; + } else { button.title = button.title + i; } - - if(visibleFiles[i] == true ||visibleFiles[i] === true ){ + + if (visibleFiles[i] == true || visibleFiles[i] === true) { button.value = "true"; button.style.backgroundColor = ""; - } - else { + } else { button.value = "false"; button.style.backgroundColor = "#EAEAEA"; button.style.color = "#FFFFFF"; @@ -1528,12 +1914,11 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ var buttonName = "experiment-hide-all"; var button = document.getElementById(buttonName); - if(button != null){ - if(allVis){ + if (button != null) { + if (allVis) { button.value = "true"; button.style.backgroundColor = ""; - } - else { + } else { button.value = "false"; button.style.backgroundColor = "#EAEAEA"; button.style.color = "#FFFFFF"; @@ -1542,30 +1927,32 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ buttonName = "experiment-data-hide-all"; button = document.getElementById(buttonName); - if(button != null){ - if(allVis){ + if (button != null) { + if (allVis) { button.value = "true"; - - } - else { - button.value = "false"; + } else { + button.value = "false"; } } - } + }; var experimentalParams = chiseInstance.getExperimentalData(); experimentalParams.document = document; refreshButtons(experimentalParams); //chiseInstance.buttonUpdate(document); - if( currentGeneralProperties.experimentDescription.length > 0 || Object.entries(currentGeneralProperties.experimentDescription).length != 0){ - //document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "hidden"; - document.getElementById('sbgn-inspector-map-color-scheme').style.display = "none"; - } - else{ - document.getElementById('sbgn-inspector-map-color-scheme').style.display = ""; - // document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "initial"; + if ( + currentGeneralProperties.experimentDescription.length > 0 || + Object.entries(currentGeneralProperties.experimentDescription).length != 0 + ) { + //document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "hidden"; + document.getElementById("sbgn-inspector-map-color-scheme").style.display = + "none"; + } else { + document.getElementById("sbgn-inspector-map-color-scheme").style.display = + ""; + // document.getElementById('sbgn-inspector-map-color-scheme').style.visibility = "initial"; } return this; - } + }, }); /** @@ -1612,16 +1999,14 @@ var experimentTabPanel = GeneralPropertiesParentView.extend({ } });*/ +String.prototype.replaceAll = function (search, replace) { + //if replace is not sent, return original string otherwise it will + //replace search string with 'undefined'. + if (replace === undefined) { + return this.toString(); + } -String.prototype.replaceAll = function(search, replace) -{ - //if replace is not sent, return original string otherwise it will - //replace search string with 'undefined'. - if (replace === undefined) { - return this.toString(); - } - - return this.replace(new RegExp('[' + search + ']', 'g'), replace); + return this.replace(new RegExp("[" + search + "]", "g"), replace); }; //Global variable used to check which PathwayCommon dialog was open recently @@ -1634,7 +2019,7 @@ var PCdialog = ""; var NeighborhoodQueryView = Backbone.View.extend({ defaultQueryParameters: { geneSymbols: "", - lengthLimit: 1 + lengthLimit: 1, }, currentQueryParameters: null, initialize: function () { @@ -1647,689 +2032,1011 @@ var NeighborhoodQueryView = Backbone.View.extend({ this.currentQueryParameters = _.clone(this.defaultQueryParameters); }, render: function () { - var self = this; self.template = _.template($("#query-neighborhood-template").html()); self.template = self.template(self.currentQueryParameters); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); PCdialog = "Neighborhood"; - $(document).off("click", "#save-query-neighborhood").on("click", "#save-query-neighborhood", function (evt) { - - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - // use the associated cy instance - var cy = chiseInstance.getCy(); + $(document) + .off("click", "#save-query-neighborhood") + .on("click", "#save-query-neighborhood", async function (evt) { + // use active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); - self.currentQueryParameters.geneSymbols = document.getElementById("query-neighborhood-gene-symbols").value; - self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-neighborhood-length-limit").value); - - var geneSymbols = self.currentQueryParameters.geneSymbols.trim(); - if (geneSymbols.length === 0) { + // use the associated cy instance + var cy = chiseInstance.getCy(); + + self.currentQueryParameters.geneSymbols = document.getElementById( + "query-neighborhood-gene-symbols" + ).value; + self.currentQueryParameters.lengthLimit = Number( + document.getElementById("query-neighborhood-length-limit").value + ); + var removeDisconnected = document.getElementById( + "query-neighborhood-checkbox" + ).checked; + var removeRedundant = document.getElementById( + "query-neighborhood-redundant-checkbox" + ).checked; + + var geneSymbols = self.currentQueryParameters.geneSymbols.trim(); + if (geneSymbols.length === 0) { document.getElementById("query-neighborhood-gene-symbols").focus(); return; - } - // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string - geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); - if (geneSymbols.length === 0) { - $(self.el).modal('toggle'); - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - return; - } - if (self.currentQueryParameters.lengthLimit > 2) { - $(self.el).modal('toggle'); - new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render(); - document.getElementById("query-neighborhood-length-limit").focus(); - return; - } - - var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=NEIGHBORHOOD&limit=" - + self.currentQueryParameters.lengthLimit; - var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" "); - - var filename = ""; - var sources = ""; - for (var i = 0; i < geneSymbolsArray.length; i++) { - var currentGeneSymbol = geneSymbolsArray[i]; - if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' ' - || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') { - continue; } - sources = sources + "&source=" + currentGeneSymbol; - - if (filename == '') { - filename = currentGeneSymbol; - } else { - filename = filename + '_' + currentGeneSymbol; + // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); + if (geneSymbols.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + return; + } + if (self.currentQueryParameters.lengthLimit > 2) { + $(self.el).modal("toggle"); + new PromptInvalidLengthLimitView({ + el: "#prompt-invalidLengthLimit-table", + }).render(); + document.getElementById("query-neighborhood-length-limit").focus(); + return; } - } - filename = filename + '_NEIGHBORHOOD.nwt'; - queryURL = queryURL + sources; - - if(cy.nodes().length == 0){ - - chiseInstance.startSpinner('neighborhood-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('neighborhood-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('neighborhood-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('neighborhood-spinner'); + var geneSymbolsArray = geneSymbols + .replaceAll("\n", " ") + .replaceAll("\t", " ") + .split(" "); + // Check if duplicate symbols are given or not + if (handleDuplicateGenes(geneSymbolsArray)) { + return; + } + + var queryURL = + "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=NEIGHBORHOOD&limit=" + + self.currentQueryParameters.lengthLimit; + + var filename = ""; + var sources = ""; + for (var i = 0; i < geneSymbolsArray.length; i++) { + var currentGeneSymbol = geneSymbolsArray[i]; + if ( + currentGeneSymbol.length == 0 || + currentGeneSymbol == " " || + currentGeneSymbol == "\n" || + currentGeneSymbol == "\t" + ) { + continue; } - }); - - $(self.el).modal('toggle'); - - } - else{ - - new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){ - - chiseInstance.startSpinner('neighborhood-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); + sources = sources + "&source=" + currentGeneSymbol; + + if (filename == "") { + filename = currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } + } + filename = filename + "_NEIGHBORHOOD.nwt"; + queryURL = queryURL + sources; + + + var neighborhoodQueryHighlighting = function () { + eles = cy.collection(); + geneSymbolsArray.forEach(function (gene) { + eles.merge( + cy.nodes().filter(function (ele) { + if ( + ele.data("label") && + ele + .data("label") + .toLowerCase() + .indexOf(gene.toLowerCase()) >= 0 + ) { + return true; + } + return false; + }) + ); + }); + var x = cy + .elements() + .kNeighborhood( + eles, + self.currentQueryParameters.lengthLimit, + "BOTHSTREAM" + ); + cy.viewUtilities("get").highlight(x.neighborNodes, 2); + cy.viewUtilities("get").highlight(x.neighborEdges, 2); + cy.viewUtilities("get").highlight(eles, 3); + } + // Define this after the queryURL to make sure. + var sendNeighborhoodQuery = function () { + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + var currentInferNestingOnLoad = + currentGeneralProperties.inferNestingOnLoad; + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); + $.ajax({ - type: 'get', + type: "get", url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { + data: { url: queryURL }, + success: function (data) { + if ( + !data.error && + data.response.statusCode == 200 && + data.response.body + ) { var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); + $(document).trigger("sbgnvizLoadFile", [filename, cy]); currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('neighborhood-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); + chiseInstance.updateGraph( + chiseInstance.convertSbgnmlToJson(xml), + undefined, + currentLayoutProperties + ); + currentGeneralProperties.inferNestingOnLoad = + currentInferNestingOnLoad; + + if(removeRedundant) + appUtilities.removeDuplicateProcessesAfterQuery(); + if(removeDisconnected) + appUtilities.removeDisconnectedNodesAfterQuery(geneSymbolsArray); + neighborhoodQueryHighlighting(); + + $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); + } else if (data.error) { + let { code } = data.error; + if (code === "ESOCKETTIMEDOUT") { + new PromptRequestTimedOutView({ + el: "#prompt-requestTimedOut-table", + }).render(); + } + } else if (data.response.body === "") { + new PromptEmptyQueryResultView({ + el: "#prompt-emptyQueryResult-table", + }).render(); + } + else if (!data.error && data.response.statusCode == 500){ + new InternalServerError({ + el: "#prompt-internal-server-table", + }).render(); } else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('neighborhood-spinner'); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); } + chiseInstance.endSpinner("neighborhood-spinner"); + }, + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("neighborhood-spinner"); }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('neighborhood-spinner'); - } }); + } - $(self.el).modal('toggle'); - - }); - - } + var sendQueries = async function () { + $(self.el).modal("toggle"); + chiseInstance.startSpinner("neighborhood-spinner"); + // Check if the gene symbols that are added even exist in the database or not + if (await handleGeneDoesNotExist(geneSymbolsArray)) { + chiseInstance.endSpinner("neighborhood-spinner"); + return; + } + sendNeighborhoodQuery(); + } + // Ask for permission + if(cy.nodes().length != 0){ + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(sendQueries); + } + else{ + sendQueries(); + } }); - $(document).off("click", "#cancel-query-neighborhood").on("click", "#cancel-query-neighborhood", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#cancel-query-neighborhood") + .on("click", "#cancel-query-neighborhood", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); /** * Paths Between Query view for the Sample Application. */ var PathsBetweenQueryView = Backbone.View.extend({ - defaultQueryParameters: { - geneSymbols: "", - lengthLimit: 1 - }, - currentQueryParameters: null, - initialize: function () { - var self = this; - self.copyProperties(); - self.template = _.template($("#query-pathsbetween-template").html()); - self.template = self.template(self.currentQueryParameters); - }, - copyProperties: function () { - this.currentQueryParameters = _.clone(this.defaultQueryParameters); - }, - render: function () { - - var self = this; - self.template = _.template($("#query-pathsbetween-template").html()); - self.template = self.template(self.currentQueryParameters); - $(self.el).html(self.template); - - $(self.el).modal('show'); - PCdialog = "PathsBetween"; - - $(document).off("click", "#save-query-pathsbetween").on("click", "#save-query-pathsbetween", function (evt) { + defaultQueryParameters: { + geneSymbols: "", + lengthLimit: 1, + }, + currentQueryParameters: null, + initialize: function () { + var self = this; + self.copyProperties(); + self.template = _.template($("#query-pathsbetween-template").html()); + self.template = self.template(self.currentQueryParameters); + }, + copyProperties: function () { + this.currentQueryParameters = _.clone(this.defaultQueryParameters); + }, + render: function () { + var self = this; + self.template = _.template($("#query-pathsbetween-template").html()); + self.template = self.template(self.currentQueryParameters); + $(self.el).html(self.template); - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); + $(self.el).modal("show"); + PCdialog = "PathsBetween"; + + $(document) + .off("click", "#save-query-pathsbetween") + .on("click", "#save-query-pathsbetween", async function (evt) { + // use active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the associated cy instance + var cy = chiseInstance.getCy(); + + self.currentQueryParameters.geneSymbols = document.getElementById( + "query-pathsbetween-gene-symbols" + ).value; + self.currentQueryParameters.lengthLimit = Number( + document.getElementById("query-pathsbetween-length-limit").value + ); + var removeDisconnected = document.getElementById( + "query-pathsbetween-checkbox" + ).checked; + var removeRedundant = document.getElementById( + "query-pathsbetween-redundant-checkbox" + ).checked; + + var geneSymbols = self.currentQueryParameters.geneSymbols.trim(); + if (geneSymbols.length === 0) { + document.getElementById("query-pathsbetween-gene-symbols").focus(); + return; + } + // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); + if (geneSymbols.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + return; + } + if (self.currentQueryParameters.lengthLimit > 3) { + $(self.el).modal("toggle"); + new PromptInvalidLengthLimitView({ + el: "#prompt-invalidLengthLimit-table", + }).render(); + document.getElementById("query-pathsbetween-length-limit").focus(); + return; + } - // use the associated cy instance - var cy = chiseInstance.getCy(); + var geneSymbolsArray = geneSymbols + .replaceAll("\n", " ") + .replaceAll("\t", " ") + .split(" "); - self.currentQueryParameters.geneSymbols = document.getElementById("query-pathsbetween-gene-symbols").value; - self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-pathsbetween-length-limit").value); + // Check if duplicate symbols are given or not + if (handleDuplicateGenes(geneSymbolsArray)) { + return; + } - var geneSymbols = self.currentQueryParameters.geneSymbols.trim(); - if (geneSymbols.length === 0) { - document.getElementById("query-pathsbetween-gene-symbols").focus(); - return; - } - // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string - geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); - if (geneSymbols.length === 0) { - $(self.el).modal('toggle'); - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - return; - } - if (self.currentQueryParameters.lengthLimit > 3) { - $(self.el).modal('toggle'); - new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render(); - document.getElementById("query-pathsbetween-length-limit").focus(); - return; - } + var queryURL = + "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSBETWEEN&limit=" + + self.currentQueryParameters.lengthLimit; + var geneSymbolsArray = geneSymbols + .replaceAll("\n", " ") + .replaceAll("\t", " ") + .split(" "); + var filename = ""; + var sources = ""; + for (var i = 0; i < geneSymbolsArray.length; i++) { + var currentGeneSymbol = geneSymbolsArray[i]; + if ( + currentGeneSymbol.length == 0 || + currentGeneSymbol == " " || + currentGeneSymbol == "\n" || + currentGeneSymbol == "\t" + ) { + continue; + } + sources = sources + "&source=" + currentGeneSymbol; - var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSBETWEEN&limit=" - + self.currentQueryParameters.lengthLimit; - var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" "); - - var filename = ""; - var sources = ""; - for (var i = 0; i < geneSymbolsArray.length; i++) { - var currentGeneSymbol = geneSymbolsArray[i]; - if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' ' - || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') { - continue; + if (filename == "") { + filename = currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } + } + filename = filename + "_PATHSBETWEEN.nwt"; + queryURL = queryURL + sources; + + var pathsBetweenQueryHighlighting = function () { + eles = cy.collection(); + geneSymbolsArray.forEach(function (gene) { + eles.merge( + cy.nodes().filter(function (ele) { + if ( + ele.data("label") && + ele + .data("label") + .toLowerCase() + .indexOf(gene.toLowerCase()) >= 0 + ) { + return true; } - sources = sources + "&source=" + currentGeneSymbol; + return false; + }) + ); + }); + var x = cy + .elements() + .pathsBetween( + eles, + self.currentQueryParameters.lengthLimit, + "UNDIRECTED" + ); + cy.viewUtilities("get").highlight(x.resultEdges, 2); + cy.viewUtilities("get").highlight(x.resultNodes, 2); + cy.viewUtilities("get").highlight(eles, 3); + } + + var sendPathsBetweenQuery = function () { + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + var currentInferNestingOnLoad = + currentGeneralProperties.inferNestingOnLoad; + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); + + $.ajax({ + type: "get", + url: "/utilities/testURL", + data: { url: queryURL }, + success: function (data) { + if (!data.error && data.response.statusCode == 200) { + if (data.response.body !== "") { + var xml = $.parseXML(data.response.body); + $(document).trigger("sbgnvizLoadFile", [filename, cy]); + currentGeneralProperties.inferNestingOnLoad = false; + chiseInstance.updateGraph( + chiseInstance.convertSbgnmlToJson(xml), + undefined, + currentLayoutProperties + ); + currentGeneralProperties.inferNestingOnLoad = + currentInferNestingOnLoad; + + if(removeRedundant) + appUtilities.removeDuplicateProcessesAfterQuery(); + if(removeDisconnected) + appUtilities.removeDisconnectedNodesAfterQuery(geneSymbolsArray); + pathsBetweenQueryHighlighting(); - if (filename == '') { - filename = currentGeneSymbol; + $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); } else { - filename = filename + '_' + currentGeneSymbol; + new PromptEmptyQueryResultView({ + el: "#prompt-requestTimedOut-table", + }).render(); } - } - filename = filename + '_PATHSBETWEEN.nwt'; - queryURL = queryURL + sources; - - if(cy.nodes().length == 0){ - - chiseInstance.startSpinner('paths-between-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('paths-between-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-between-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-between-spinner'); + } else if (data.error) { + let { code } = data.error; + if (code === "ESOCKETTIMEDOUT") { + new PromptRequestTimedOutView({ + el: "#prompt-requestTimedOut-table", + }).render(); } - }); - - $(self.el).modal('toggle'); - - } - else{ - - new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){ - - chiseInstance.startSpinner('paths-between-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('paths-between-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-between-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-between-spinner'); - } - }); - - $(self.el).modal('toggle'); + } + else if (!data.error && data.response.statusCode == 500){ + new InternalServerError({ + el: "#prompt-internal-server-table", + }).render(); + } + else { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + } + chiseInstance.endSpinner("paths-between-spinner"); + }, + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("paths-between-spinner"); + }, + }); + } - }); + var sendQueries = async function() { + $(self.el).modal("toggle"); + chiseInstance.startSpinner("paths-between-spinner"); + // Check if the gene symbols that are added even exist in the database or not + if (await handleGeneDoesNotExist(geneSymbolsArray)) { + chiseInstance.endSpinner("paths-between-spinner"); + return; + } - } + sendPathsBetweenQuery(); + } - }); + if (cy.nodes().length != 0) { + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(sendQueries); + } else { + sendQueries(); + } + }); - $(document).off("click", "#cancel-query-pathsbetween").on("click", "#cancel-query-pathsbetween", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#cancel-query-pathsbetween") + .on("click", "#cancel-query-pathsbetween", function (evt) { + $(self.el).modal("toggle"); + }); - return this; - } + return this; + }, }); /** * Paths From To Query view for the Sample Application. */ var PathsFromToQueryView = Backbone.View.extend({ - defaultQueryParameters: { - sourceSymbols: "", - targetSymbols: "", - lengthLimit: 1 - }, - currentQueryParameters: null, - initialize: function () { - var self = this; - self.copyProperties(); - self.template = _.template($("#query-pathsfromto-template").html()); - self.template = self.template(self.currentQueryParameters); - }, - copyProperties: function () { - this.currentQueryParameters = _.clone(this.defaultQueryParameters); - }, - render: function () { - - var self = this; - self.template = _.template($("#query-pathsfromto-template").html()); - self.template = self.template(self.currentQueryParameters); - $(self.el).html(self.template); - - $(self.el).modal('show'); - PCdialog = "PathsFromTo"; - - $(document).off("click", "#save-query-pathsfromto").on("click", "#save-query-pathsfromto", function (evt) { - - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - // use the associated cy instance - var cy = chiseInstance.getCy(); - - self.currentQueryParameters.sourceSymbols = document.getElementById("query-pathsfromto-source-symbols").value; - self.currentQueryParameters.targetSymbols = document.getElementById("query-pathsfromto-target-symbols").value; - self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-pathsfromto-length-limit").value); - - var sourceSymbols = self.currentQueryParameters.sourceSymbols.trim(); - if (sourceSymbols.length === 0) { - document.getElementById("query-pathsfromto-source-symbols").focus(); - return; - } - // sourceSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string - sourceSymbols = sourceSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); - if (sourceSymbols.length === 0) { - $(self.el).modal('toggle'); - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - return; - } - - var targetSymbols = self.currentQueryParameters.targetSymbols.trim(); - if (targetSymbols.length === 0) { - document.getElementById("query-pathsfromto-target-symbols").focus(); - return; - } - // targetSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string - targetSymbols = targetSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); - if (targetSymbols.length === 0) { - $(self.el).modal('toggle'); - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - return; - } + defaultQueryParameters: { + sourceSymbols: "", + targetSymbols: "", + lengthLimit: 1, + }, + currentQueryParameters: null, + initialize: function () { + var self = this; + self.copyProperties(); + self.template = _.template($("#query-pathsfromto-template").html()); + self.template = self.template(self.currentQueryParameters); + }, + copyProperties: function () { + this.currentQueryParameters = _.clone(this.defaultQueryParameters); + }, + render: function () { + var self = this; + self.template = _.template($("#query-pathsfromto-template").html()); + self.template = self.template(self.currentQueryParameters); + $(self.el).html(self.template); - if (self.currentQueryParameters.lengthLimit > 3) { - $(self.el).modal('toggle'); - new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render(); - document.getElementById("query-pathsfromto-length-limit").focus(); - return; - } + $(self.el).modal("show"); + PCdialog = "PathsFromTo"; + + $(document) + .off("click", "#save-query-pathsfromto") + .on("click", "#save-query-pathsfromto", async function (evt) { + // use active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the associated cy instance + var cy = chiseInstance.getCy(); + + self.currentQueryParameters.sourceSymbols = document.getElementById( + "query-pathsfromto-source-symbols" + ).value; + self.currentQueryParameters.targetSymbols = document.getElementById( + "query-pathsfromto-target-symbols" + ).value; + self.currentQueryParameters.lengthLimit = Number( + document.getElementById("query-pathsfromto-length-limit").value + ); + var removeDisconnected = document.getElementById( + "query-pathsfromto-checkbox" + ).checked; + var removeRedundant = document.getElementById( + "query-pathsfromto-redundant-checkbox" + ).checked; + + var sourceSymbols = self.currentQueryParameters.sourceSymbols.trim(); + if (sourceSymbols.length === 0) { + document.getElementById("query-pathsfromto-source-symbols").focus(); + return; + } + // sourceSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + sourceSymbols = sourceSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); + if (sourceSymbols.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + return; + } - var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSFROMTO&limit=" - + self.currentQueryParameters.lengthLimit; - var sourceSymbolsArray = sourceSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" "); - var targetSymbolsArray = targetSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" "); - - var filename = ""; - var sources = ""; - var targets = ""; - for (var i = 0; i < sourceSymbolsArray.length; i++) { - var currentGeneSymbol = sourceSymbolsArray[i]; - if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' ' - || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') { - continue; - } - sources = sources + "&source=" + currentGeneSymbol; + var targetSymbols = self.currentQueryParameters.targetSymbols.trim(); + if (targetSymbols.length === 0) { + document.getElementById("query-pathsfromto-target-symbols").focus(); + return; + } + // targetSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + targetSymbols = targetSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); + if (targetSymbols.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + return; + } + + if (self.currentQueryParameters.lengthLimit > 3) { + $(self.el).modal("toggle"); + new PromptInvalidLengthLimitView({ + el: "#prompt-invalidLengthLimit-table", + }).render(); + document.getElementById("query-pathsfromto-length-limit").focus(); + return; + } + + var sourceSymbolsArray = sourceSymbols + .replaceAll("\n", " ") + .replaceAll("\t", " ") + .split(" "); + var targetSymbolsArray = targetSymbols + .replaceAll("\n", " ") + .replaceAll("\t", " ") + .split(" "); + + // Check if duplicate symbols are given or not + if (handleDuplicateGenes(sourceSymbolsArray)) { + chiseInstance.endSpinner("paths-fromto-spinner"); + return; + } - if (filename == '') { - filename = currentGeneSymbol; - } else { - filename = filename + '_' + currentGeneSymbol; + var queryURL = + "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=PATHSFROMTO&limit=" + + self.currentQueryParameters.lengthLimit; + + var filename = ""; + var sources = ""; + var targets = ""; + for (var i = 0; i < sourceSymbolsArray.length; i++) { + var currentGeneSymbol = sourceSymbolsArray[i]; + if ( + currentGeneSymbol.length == 0 || + currentGeneSymbol == " " || + currentGeneSymbol == "\n" || + currentGeneSymbol == "\t" + ) { + continue; + } + sources = sources + "&source=" + currentGeneSymbol; + + if (filename == "") { + filename = currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } + } + for (var i = 0; i < targetSymbolsArray.length; i++) { + var currentGeneSymbol = targetSymbolsArray[i]; + if ( + currentGeneSymbol.length == 0 || + currentGeneSymbol == " " || + currentGeneSymbol == "\n" || + currentGeneSymbol == "\t" + ) { + continue; + } + targets = targets + "&target=" + currentGeneSymbol; + if (filename == "") { + filename = currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } + } + filename = filename + "_PATHSFROMTO.nwt"; + queryURL = queryURL + sources + targets; + + var pathsFromToQueryHighlighting = function () { + source_eles = cy.collection(); + sourceSymbolsArray.forEach(function (gene) { + source_eles.merge( + cy.nodes().filter(function (ele) { + if ( + ele.data("label") && + ele + .data("label") + .toLowerCase() + .indexOf(gene.toLowerCase()) >= 0 + ) { + return true; } - } - for (var i = 0; i < targetSymbolsArray.length; i++) { - var currentGeneSymbol = targetSymbolsArray[i]; - if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' ' - || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') { - continue; + return false; + }) + ); + }); + target_eles = cy.collection(); + targetSymbolsArray.forEach(function (gene) { + target_eles.merge( + cy.nodes().filter(function (ele) { + if ( + ele.data("label") && + ele + .data("label") + .toLowerCase() + .indexOf(gene.toLowerCase()) >= 0 + ) { + return true; } - targets = targets + "&target=" + currentGeneSymbol; + return false; + }) + ); + }); + var x = cy + .elements() + .pathsFromTo( + source_eles, + target_eles, + self.currentQueryParameters.lengthLimit, + self.currentQueryParameters.lengthLimit, + "UNDIRECTED" + ); + cy.viewUtilities("get").highlight(x.edgesOnThePaths, 2); + // cy.viewUtilities('get').highlight(x.nodesOnThePaths, 2); + cy.viewUtilities('get').highlight(source_eles, 3); + cy.viewUtilities('get').highlight(target_eles, 1); + } + + var sendPathsFromToQuery = function () { + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + var currentInferNestingOnLoad = + currentGeneralProperties.inferNestingOnLoad; + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); + + $.ajax({ + type: "get", + url: "/utilities/testURL", + data: { url: queryURL }, + success: function (data) { + if (!data.error && data.response.statusCode == 200) { + if (data.response.body !== "") { + var xml = $.parseXML(data.response.body); + $(document).trigger("sbgnvizLoadFile", [filename, cy]); + currentGeneralProperties.inferNestingOnLoad = false; + chiseInstance.updateGraph( + chiseInstance.convertSbgnmlToJson(xml), + undefined, + currentLayoutProperties + ); + currentGeneralProperties.inferNestingOnLoad = + currentInferNestingOnLoad; + + if(removeRedundant) + appUtilities.removeDuplicateProcessesAfterQuery(); + if(removeDisconnected) + appUtilities.removeDisconnectedNodesAfterQuery(sourceSymbolsArray.concat(targetSymbolsArray)); + pathsFromToQueryHighlighting(); - if (filename == '') { - filename = currentGeneSymbol; + $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); } else { - filename = filename + '_' + currentGeneSymbol; + new PromptEmptyQueryResultView({ + el: "#prompt-emptyQueryResult-table", + }).render(); } - } - filename = filename + '_PATHSFROMTO.nwt'; - queryURL = queryURL + sources + targets; - - if(cy.nodes().length == 0){ - - chiseInstance.startSpinner('paths-fromto-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('paths-fromto-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-fromto-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-fromto-spinner'); + } else if (data.error) { + let { code } = data.error; + if (code === "ESOCKETTIMEDOUT") { + new PromptRequestTimedOutView({ + el: "#prompt-requestTimedOut-table", + }).render(); } - }); - - $(self.el).modal('toggle'); - - } - else{ - - new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){ - - chiseInstance.startSpinner('paths-fromto-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('paths-fromto-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-fromto-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('paths-fromto-spinner'); - } - }); - - $(self.el).modal('toggle'); - - }); + } + else if (!data.error && data.response.statusCode == 500){ + new InternalServerError({ + el: "#prompt-internal-server-table", + }).render(); + } + else { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + } + chiseInstance.endSpinner("paths-fromto-spinner"); + }, + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("paths-fromto-spinner"); + }, + }); + } - } + var sendQueries = async function () { + $(self.el).modal("toggle"); + // Check if the gene symbols that are added even exist in the database or not + chiseInstance.startSpinner("paths-fromto-spinner"); + if (await handleGeneDoesNotExist(sourceSymbolsArray)) { + chiseInstance.endSpinner("paths-fromto-spinner"); + return; + } + sendPathsFromToQuery(); + } - }); + if (cy.nodes().length != 0) { + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(sendQueries); + } else { + sendQueries(); + } + }); - $(document).off("click", "#cancel-query-pathsfromto").on("click", "#cancel-query-pathsfromto", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#cancel-query-pathsfromto") + .on("click", "#cancel-query-pathsfromto", function (evt) { + $(self.el).modal("toggle"); + }); - return this; - } + return this; + }, }); /** * Common Stream Query view for the Sample Application. */ var CommonStreamQueryView = Backbone.View.extend({ - defaultQueryParameters: { - geneSymbols: "", - lengthLimit: 1 - }, - currentQueryParameters: null, - initialize: function () { - var self = this; - self.copyProperties(); - self.template = _.template($("#query-commonstream-template").html()); - self.template = self.template(self.currentQueryParameters); - }, - copyProperties: function () { - this.currentQueryParameters = _.clone(this.defaultQueryParameters); - }, - render: function () { + defaultQueryParameters: { + geneSymbols: "", + lengthLimit: 1, + }, + currentQueryParameters: null, + initialize: function () { + var self = this; + self.copyProperties(); + self.template = _.template($("#query-commonstream-template").html()); + self.template = self.template(self.currentQueryParameters); + }, + copyProperties: function () { + this.currentQueryParameters = _.clone(this.defaultQueryParameters); + }, + render: function () { + var self = this; + self.template = _.template($("#query-commonstream-template").html()); + self.template = self.template(self.currentQueryParameters); + $(self.el).html(self.template); - var self = this; - self.template = _.template($("#query-commonstream-template").html()); - self.template = self.template(self.currentQueryParameters); - $(self.el).html(self.template); - - $(self.el).modal('show'); - PCdialog = "CommonStream"; - - $(document).off("click", "#save-query-commonstream").on("click", "#save-query-commonstream", function (evt) { - - - - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - // use the associated cy instance - var cy = chiseInstance.getCy(); + $(self.el).modal("show"); + PCdialog = "CommonStream"; + + $(document) + .off("click", "#save-query-commonstream") + .on("click", "#save-query-commonstream", async function (evt) { + // use active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the associated cy instance + var cy = chiseInstance.getCy(); + + self.currentQueryParameters.geneSymbols = document.getElementById( + "query-commonstream-gene-symbols" + ).value; + self.currentQueryParameters.lengthLimit = Number( + document.getElementById("query-commonstream-length-limit").value + ); + var removeDisconnected = document.getElementById( + "query-commonstream-checkbox" + ).checked; + var removeRedundant = document.getElementById( + "query-commonstream-redundant-checkbox" + ).checked; + + var geneSymbols = self.currentQueryParameters.geneSymbols.trim(); + if (geneSymbols.length === 0) { + document.getElementById("query-commonstream-gene-symbols").focus(); + return; + } + // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); + if (geneSymbols.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + return; + } + if (self.currentQueryParameters.lengthLimit > 3) { + $(self.el).modal("toggle"); + new PromptInvalidLengthLimitView({ + el: "#prompt-invalidLengthLimit-table", + }).render(); + document.getElementById("query-commonstream-length-limit").focus(); + return; + } - self.currentQueryParameters.geneSymbols = document.getElementById("query-commonstream-gene-symbols").value; - self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-commonstream-length-limit").value); + var geneSymbolsArray = geneSymbols + .replaceAll("\n", " ") + .replaceAll("\t", " ") + .split(" "); + + // Check if duplicate symbols are given or not + if (handleDuplicateGenes(geneSymbolsArray)) { + return; + } + + var queryURL = + "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=COMMONSTREAM&limit=" + + self.currentQueryParameters.lengthLimit; + var filename = ""; + var sources = ""; + for (var i = 0; i < geneSymbolsArray.length; i++) { + var currentGeneSymbol = geneSymbolsArray[i]; + if ( + currentGeneSymbol.length == 0 || + currentGeneSymbol == " " || + currentGeneSymbol == "\n" || + currentGeneSymbol == "\t" + ) { + continue; + } + sources = sources + "&source=" + currentGeneSymbol; - var geneSymbols = self.currentQueryParameters.geneSymbols.trim(); - if (geneSymbols.length === 0) { - document.getElementById("query-commonstream-gene-symbols").focus(); - return; - } - // geneSymbols is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string - geneSymbols = geneSymbols.replace(/[^a-zA-Z0-9\n\t ]/g, "").trim(); - if (geneSymbols.length === 0) { - $(self.el).modal('toggle'); - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - return; - } - if (self.currentQueryParameters.lengthLimit > 3) { - $(self.el).modal('toggle'); - new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render(); - document.getElementById("query-commonstream-length-limit").focus(); - return; - } + if (filename == "") { + filename = currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } + } + filename = filename + "_COMMONSTREAM.nwt"; + queryURL = queryURL + sources; + + var commonStreamHighlighting = function () { + eles = cy.collection(); + geneSymbolsArray.forEach(function (gene) { + eles.merge(cy.nodes().filter(function (ele) { + if(ele.data('label') && ele.data('label').toLowerCase().indexOf(gene.toLowerCase()) >= 0){ + return true; + } + return false; + })) + }) + var x = cy.elements().commonStream(eles, self.currentQueryParameters.lengthLimit, 'BOTHSTREAM'); + cy.viewUtilities('get').highlight(x.nodesOnPath, 2); + cy.viewUtilities('get').highlight(x.edgesOnPath, 2); + cy.viewUtilities('get').highlight(x.commonNodes, 1); + cy.viewUtilities('get').highlight(eles, 3); + } - var queryURL = "http://www.pathwaycommons.org/pc2/graph?format=SBGN&kind=COMMONSTREAM&limit=" - + self.currentQueryParameters.lengthLimit; - var geneSymbolsArray = geneSymbols.replaceAll("\n", " ").replaceAll("\t", " ").split(" "); - - var filename = ""; - var sources = ""; - for (var i = 0; i < geneSymbolsArray.length; i++) { - var currentGeneSymbol = geneSymbolsArray[i]; - if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' ' - || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') { - continue; - } - sources = sources + "&source=" + currentGeneSymbol; + var sendCommonStreamQuery = function () { + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + var currentInferNestingOnLoad = + currentGeneralProperties.inferNestingOnLoad; + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); + + $.ajax({ + type: "get", + url: "/utilities/testURL", + data: { url: queryURL }, + success: function (data) { + if (!data.error && data.response.statusCode == 200) { + if (data.response.body !== "") { + var xml = $.parseXML(data.response.body); + $(document).trigger("sbgnvizLoadFile", [filename, cy]); + currentGeneralProperties.inferNestingOnLoad = false; + chiseInstance.updateGraph( + chiseInstance.convertSbgnmlToJson(xml), + undefined, + currentLayoutProperties + ); + currentGeneralProperties.inferNestingOnLoad = + currentInferNestingOnLoad; + + if(removeRedundant) + appUtilities.removeDuplicateProcessesAfterQuery(); + if(removeDisconnected) + appUtilities.removeDisconnectedNodesAfterQuery(geneSymbolsArray); + commonStreamHighlighting(); - if (filename == '') { - filename = currentGeneSymbol; + $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); } else { - filename = filename + '_' + currentGeneSymbol; + new PromptEmptyQueryResultView({ + el: "#prompt-emptyQueryResult-table", + }).render(); } - } - filename = filename + '_COMMONSTREAM.nwt'; - queryURL = queryURL + sources; - - if(cy.nodes().length == 0){ - - chiseInstance.startSpinner('common-stream-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('common-stream-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('common-stream-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('common-stream-spinner'); + } else if (data.error) { + let { code } = data.error; + if (code === "ESOCKETTIMEDOUT") { + new PromptRequestTimedOutView({ + el: "#prompt-requestTimedOut-table", + }).render(); } - }); - - $(self.el).modal('toggle'); - - } - else{ - - new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){ - - chiseInstance.startSpinner('common-stream-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('common-stream-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('common-stream-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('common-stream-spinner'); - } - }); - - $(self.el).modal('toggle'); + } + else if (!data.error && data.response.statusCode == 500){ + new InternalServerError({ + el: "#prompt-internal-server-table", + }).render(); + } + else { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + } + chiseInstance.endSpinner("common-stream-spinner"); + }, + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("common-stream-spinner"); + }, + }); + } - }); + var sendQueries = async function () { + $(self.el).modal("toggle"); + chiseInstance.startSpinner("common-stream-spinner"); + // Check if the gene symbols that are added even exist in the database or not + if (await handleGeneDoesNotExist(geneSymbolsArray)) { + chiseInstance.endSpinner("common-stream-spinner"); + return; + } + sendCommonStreamQuery(); + } - } - }); + if (cy.nodes().length != 0) { + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(sendQueries); + } else { + sendQueries(); + } + }); - $(document).off("click", "#cancel-query-commonstream").on("click", "#cancel-query-commonstream", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#cancel-query-commonstream") + .on("click", "#cancel-query-commonstream", function (evt) { + $(self.el).modal("toggle"); + }); - return this; - } + return this; + }, }); + /** * Paths By URI Query view for the Sample Application. */ var PathsByURIQueryView = Backbone.View.extend({ defaultQueryParameters: { - URI: "" + URI: "", }, currentQueryParameters: null, initialize: function () { @@ -2347,129 +3054,418 @@ var PathsByURIQueryView = Backbone.View.extend({ self.template = self.template(self.currentQueryParameters); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); + + $(document) + .off("click", "#save-query-pathsbyURI") + .on("click", "#save-query-pathsbyURI", function (evt) { + // use the active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the associated cy instance + var cy = chiseInstance.getCy(); + + self.currentQueryParameters.URI = document.getElementById( + "query-pathsbyURI-URI" + ).value; + var uri = self.currentQueryParameters.URI.trim(); + var removeDisconnected = document.getElementById( + "query-pathsbyURI-checkbox" + ).checked; + var removeRedundant = document.getElementById( + "query-pathsbyURI-redundant-checkbox" + ).checked; + + if (uri.length === 0) { + document.getElementById("query-pathsbyURI-URI").focus(); + return; + } + // uri is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + uri = uri.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim(); + if (uri.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidURIView({ el: "#prompt-invalidURI-table" }).render(); + return; + } + + var queryURL = + "http://www.pathwaycommons.org/pc2/get?uri=" + uri + "&format=SBGN"; - $(document).off("click", "#save-query-pathsbyURI").on("click", "#save-query-pathsbyURI", function (evt) { + var filename = ""; + if (filename == "") { + filename = uri; + } else { + filename = filename + "_" + uri; + } + filename = filename + "_URI.nwt"; + var sendPathsByURIQuery = function () { + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; + var currentLayoutProperties = appUtilities.getScratch(cy, "currentLayoutProperties"); - // use the active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); + chiseInstance.startSpinner("paths-byURI-spinner"); + $.ajax({ + type: "get", + url: "/utilities/testURL", + data: { url: queryURL }, + success: function (data) { + if (!data.error && data.response.statusCode == 200) { + if (data.response.body !== "") { + var xml = $.parseXML(data.response.body); + $(document).trigger("sbgnvizLoadFile", [filename, cy]); + currentGeneralProperties.inferNestingOnLoad = false; + chiseInstance.updateGraph( + chiseInstance.convertSbgnmlToJson(xml), + undefined, + currentLayoutProperties + ); + currentGeneralProperties.inferNestingOnLoad = + currentInferNestingOnLoad; + if(removeRedundant) + appUtilities.removeDuplicateProcessesAfterQuery(); + if(removeDisconnected) + appUtilities.removeDisconnectedNodesAfterQuery([]); + $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); + } else { + new PromptEmptyQueryResultView({ + el: "#prompt-emptyQueryResult-table", + }).render(); + } + } else if (data.error) { + let { code } = data.error; + if (code === "ESOCKETTIMEDOUT") { + new PromptRequestTimedOutView({ + el: "#prompt-requestTimedOut-table", + }).render(); + } + } + else if (!data.error && data.response.statusCode == 500){ + new InternalServerError({ + el: "#prompt-internal-server-table", + }).render(); + } + else { + new PromptInvalidURIView({ + el: "#prompt-invalidURI-table", + }).render(); + + } + chiseInstance.endSpinner("paths-byURI-spinner"); + }, + error: function (xhr, options, err) { + new PromptInvalidURIView({ + el: "#prompt-invalidURI-table", + }).render(); + chiseInstance.endSpinner("paths-byURI-spinner"); + }, + }); - // use the associated cy instance - var cy = chiseInstance.getCy(); + $(self.el).modal("toggle"); + } - self.currentQueryParameters.URI = document.getElementById("query-pathsbyURI-URI").value; - var uri = self.currentQueryParameters.URI.trim(); + if (cy.nodes().length != 0) { + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(sendPathsByURIQuery); + } else { + sendPathsByURIQuery(); + } + + }); - if (uri.length === 0) { - document.getElementById("query-pathsbyURI-URI").focus(); - return; - } - // uri is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string - uri = uri.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim(); - if (uri.length === 0) { - $(self.el).modal('toggle'); - new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render(); - return; - } + $(document) + .off("click", "#cancel-query-pathsbyURI") + .on("click", "#cancel-query-pathsbyURI", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); - var queryURL = "http://www.pathwaycommons.org/pc2/get?uri=" - + uri + "&format=SBGN"; +/** + * Map By WPID Query view for the Sample Application. + */ +var MapByWPIDQueryView = Backbone.View.extend({ + defaultQueryParameters: { + WPID: "", + }, + currentQueryParameters: null, + initialize: function () { + var self = this; + self.copyProperties(); + self.template = _.template($("#query-mapbyWPID-template").html()); + self.template = self.template(self.currentQueryParameters); + }, + copyProperties: function () { + this.currentQueryParameters = _.clone(this.defaultQueryParameters); + }, + render: function () { + var self = this; + self.template = _.template($("#query-mapbyWPID-template").html()); + self.template = self.template(self.currentQueryParameters); + $(self.el).html(self.template); - var filename = ""; + $(self.el).modal("show"); - if (filename == '') { - filename = uri; - } else { - filename = filename + '_' + uri; - } + $(document) + .off("click", "#save-query-mapbyWPID") + .on("click", "#save-query-mapbyWPID", function (evt) { + // use the active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); - filename = filename + '_URI.nwt'; - - if(cy.nodes().length == 0){ - - chiseInstance.startSpinner('paths-byURI-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - $.ajax({ - type: 'get', - url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('paths-byURI-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render(); - chiseInstance.endSpinner('paths-byURI-spinner'); - } - }, - error: function(xhr, options, err){ - new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render(); - chiseInstance.endSpinner('paths-byURI-spinner'); - } - }); + // use the associated cy instance + var cy = chiseInstance.getCy(); - $(self.el).modal('toggle'); + self.currentQueryParameters.WPID = document.getElementById( + "query-mapbyWPID-WPID" + ).value; + var wpid = self.currentQueryParameters.WPID.trim(); - } - else{ + if (wpid.length === 0) { + document.getElementById("query-mapbyWPID-WPID").focus(); + return; + } + // wpid is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + wpid = wpid.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim(); + if (wpid.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidWPIDView({ el: "#prompt-invalidWPID-table" }).render(); + return; + } + + var queryURL = "https://www.wikipathways.org/wikipathways-assets/pathways/" + wpid + "/" + wpid + ".gpml"; - new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){ + var filename = ""; - chiseInstance.startSpinner('paths-byURI-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + if (filename == "") { + filename = wpid; + } else { + filename = filename + "_" + wpid; + } + filename = filename + ".nwt"; + + var sendMapByWPIDQuery = function () { + var currentGeneralProperties = appUtilities.getScratch(cy, "currentGeneralProperties"); var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); + chiseInstance.startSpinner("map-byWPID-spinner"); $.ajax({ - type: 'get', + type: "get", url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ - if (!data.error && data.response.statusCode == 200 && data.response.body) { - var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [ filename, cy ]); - currentGeneralProperties.inferNestingOnLoad = false; - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, currentLayoutProperties); - currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; - chiseInstance.endSpinner('paths-byURI-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); + data: { url: queryURL }, + success: function (data) { + if (!data.error && data.response.statusCode == 200) { + if (data.response.body !== "") { + $(document).trigger("sbgnvizLoadFile", [filename, cy]); + currentGeneralProperties.inferNestingOnLoad = false; + chiseInstance.convertGpmlToSbgnml(data.response.body, async function (data) { + chiseInstance.loadSBGNMLText(data.message, false, filename, cy); + chiseInstance.endSpinner("map-byWPID-spinner"); + }); + currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; + $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); + } else { + new PromptEmptyQueryResultView({ + el: "#prompt-emptyQueryResult-table", + }).render(); + } + } else if (data.error) { + let { code } = data.error; + if (code === "ESOCKETTIMEDOUT") { + new PromptRequestTimedOutView({ + el: "#prompt-requestTimedOut-table", + }).render(); + } + chiseInstance.endSpinner("map-byWPID-spinner"); + } + else if (!data.error && data.response.statusCode == 500){ + new InternalServerError({ + el: "#prompt-internal-server-table", + }).render(); + chiseInstance.endSpinner("map-byWPID-spinner"); } else { - new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render(); - chiseInstance.endSpinner('paths-byURI-spinner'); + new PromptInvalidWPIDView({ + el: "#prompt-invalidWPID-table", + }).render(); + chiseInstance.endSpinner("map-byWPID-spinner"); } }, - error: function(xhr, options, err){ - new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render(); - chiseInstance.endSpinner('paths-byURI-spinner'); - } + error: function (xhr, options, err) { + new PromptInvalidWPIDView({ + el: "#prompt-invalidWPID-table", + }).render(); + chiseInstance.endSpinner("map-byWPID-spinner"); + }, }); - $(self.el).modal('toggle'); + $(self.el).modal("toggle"); + } - }); + if (cy.nodes().length != 0) { + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(sendMapByWPIDQuery); + } else { + sendMapByWPIDQuery(); + } + + }); - } + $(document) + .off("click", "#cancel-query-mapbyWPID") + .on("click", "#cancel-query-mapbyWPID", function (evt) { + $(self.el).modal("toggle"); + }); - }); + return this; + }, +}); - $(document).off("click", "#cancel-query-pathsbyURI").on("click", "#cancel-query-pathsbyURI", function (evt) { - $(self.el).modal('toggle'); - }); +/** + * Map By Reactome ID Query view for the Sample Application. + */ +var MapByReactomeIDQueryView = Backbone.View.extend({ + defaultQueryParameters: { + ReactomeID: "", + }, + currentQueryParameters: null, + initialize: function () { + var self = this; + self.copyProperties(); + self.template = _.template($("#query-mapbyReactomeID-template").html()); + self.template = self.template(self.currentQueryParameters); + }, + copyProperties: function () { + this.currentQueryParameters = _.clone(this.defaultQueryParameters); + }, + render: function () { + var self = this; + self.template = _.template($("#query-mapbyReactomeID-template").html()); + self.template = self.template(self.currentQueryParameters); + $(self.el).html(self.template); + + $(self.el).modal("show"); + + $(document) + .off("click", "#save-query-mapbyReactomeID") + .on("click", "#save-query-mapbyReactomeID", function (evt) { + // use the active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the associated cy instance + var cy = chiseInstance.getCy(); + + self.currentQueryParameters.ReactomeID = document.getElementById( + "query-mapbyReactomeID-ReactomeID" + ).value; + var reactomeid = self.currentQueryParameters.ReactomeID.trim(); + + if (reactomeid.length === 0) { + document.getElementById("query-mapbyReactomeID-ReactomeID").focus(); + return; + } + // reactomeid is cleaned up from undesired characters such as #,$,! etc. and spaces put before and after the string + reactomeid = reactomeid.replace(/[^a-zA-Z0-9:/.\-\n\t ]/g, "").trim(); + if (reactomeid.length === 0) { + $(self.el).modal("toggle"); + new PromptInvalidReactomeIDView({ el: "#prompt-invalidReactomeID-table" }).render(); + return; + } + + var queryURL = "https://reactome.org/ContentService/exporter/event/" + reactomeid + ".sbgn"; + + var filename = ""; + + if (filename == "") { + filename = reactomeid; + } else { + filename = filename + "_" + reactomeid; + } + filename = filename + ".nwt"; + + var sendMapByReactomeIDQuery = function () { + var currentGeneralProperties = appUtilities.getScratch(cy, "currentGeneralProperties"); + var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; + var currentLayoutProperties = appUtilities.getScratch(cy, "currentLayoutProperties"); + + chiseInstance.startSpinner("map-byReactomeID-spinner"); + $.ajax({ + type: "get", + url: "/utilities/testURL", + data: { url: queryURL }, + success: function (data) { + if (!data.error && data.response.statusCode == 200) { + if (data.response.body !== "") { + var xml = $.parseXML(data.response.body); + $(document).trigger("sbgnvizLoadFile", [filename, cy]); + currentGeneralProperties.inferNestingOnLoad = true; + chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml), undefined, undefined); + currentGeneralProperties.inferNestingOnLoad = currentInferNestingOnLoad; + $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); + chiseInstance.endSpinner("map-byReactomeID-spinner"); + } else { + new PromptEmptyQueryResultView({ + el: "#prompt-emptyQueryResult-table", + }).render(); + } + } else if (data.error) { + let { code } = data.error; + if (code === "ESOCKETTIMEDOUT") { + new PromptRequestTimedOutView({ + el: "#prompt-requestTimedOut-table", + }).render(); + } + chiseInstance.endSpinner("map-byReactomeID-spinner"); + } + else if (!data.error && data.response.statusCode == 500){ + new InternalServerError({ + el: "#prompt-internal-server-table", + }).render(); + chiseInstance.endSpinner("map-byReactomeID-spinner"); + } + else { + new PromptInvalidReactomeIDView({ + el: "#prompt-invalidReactomeID-table", + }).render(); + chiseInstance.endSpinner("map-byReactomeID-spinner"); + } + }, + error: function (xhr, options, err) { + new PromptInvalidReactomeIDView({ + el: "#prompt-invalidReactomeID-table", + }).render(); + chiseInstance.endSpinner("map-byReactomeID-spinner"); + }, + }); + + $(self.el).modal("toggle"); + } + + if (cy.nodes().length != 0) { + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(sendMapByReactomeIDQuery); + } else { + sendMapByReactomeIDQuery(); + } + + }); + + $(document) + .off("click", "#cancel-query-mapbyReactomeID") + .on("click", "#cancel-query-mapbyReactomeID", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); /* @@ -2480,7 +3476,6 @@ var PathsByURIQueryView = Backbone.View.extend({ So this PromptSaveView isn't used for now, replaced by PromptConfirmationView. */ var PromptSaveView = Backbone.View.extend({ - initialize: function () { var self = this; self.template = _.template($("#prompt-save-template").html()); @@ -2490,25 +3485,31 @@ var PromptSaveView = Backbone.View.extend({ self.template = _.template($("#prompt-save-template").html()); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); - $(document).off("click", "#prompt-save-accept").on("click", "#prompt-save-accept", function (evt) { - $("#save-as-sbgnml").trigger('click'); - afterFunction(); - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-save-accept") + .on("click", "#prompt-save-accept", function (evt) { + $("#save-as-sbgnml").trigger("click"); + afterFunction(); + $(self.el).modal("toggle"); + }); - $(document).off("click", "#prompt-save-reject").on("click", "#prompt-save-reject", function (evt) { - afterFunction(); - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-save-reject") + .on("click", "#prompt-save-reject", function (evt) { + afterFunction(); + $(self.el).modal("toggle"); + }); - $(document).off("click", "#prompt-save-cancel").on("click", "#prompt-save-cancel", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-save-cancel") + .on("click", "#prompt-save-cancel", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); /* @@ -2528,146 +3529,252 @@ var FileSaveView = Backbone.View.extend({ var self = this; self.template = _.template($("#file-save-template").html()); - $(self.el).html(self.template); - $(self.el).modal('show'); + // Check for unsupported conversions + mapType = appUtilities.getActiveChiseInstance().elementUtilities.mapType; + var unsupportedConversions = { + "PD": ["sif", "sifLayout"], + "AF": ["sif", "sifLayout", "sbml", "celldesigner", "gpml"], + "HybridSbgn": ["sif", "sifLayout", "sbml", "celldesigner", "gpml"], + "SIF": ["sbgn", "sbml", "celldesigner", "gpml"], + "SBML": ["sif", "sifLayout", "gpml"], + "HybridAny": ["sbgn", "sif", "sifLayout", "sbml", "celldesigner", "gpml"] + }; + + if (unsupportedConversions[mapType] && unsupportedConversions[mapType].includes(fileformat)) { + var exportErrorView = new ExportErrorView({el: "#exportError-table",}); + exportErrorView.render(); + document.getElementById("export-error-message").innerText = "Not applicable for the current map type!"; + return; + } - $("#file-save-table").keyup(function(e){ - if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#file-save-accept").is(":focus") && !$("#file-save-cancel").is(":focus")){ + $(self.el).html(self.template); + $(self.el).modal("show"); + + $("#file-save-table").keyup(function (e) { + if ( + e.which == 13 && + $(self.el).data("bs.modal").isShown && + !$("#file-save-accept").is(":focus") && + !$("#file-save-cancel").is(":focus") + ) { $("#file-save-accept").click(); } }); - var filename = document.getElementById('file-name').innerHTML; + var filename = document.getElementById("file-name").innerHTML; var fExt; switch (fileformat) { - case 'nwt': - fExt = 'nwt'; + case "nwt": + fExt = "nwt"; + break; + case "sbgn": + fExt = "sbgn"; + break; + case "sbml": + fExt = "sbml"; + break; + case "gpml": + fExt = "gpml"; + break; + case "sif": + fExt = "sif"; + break; + case "sifLayout": + fExt = "txt"; break; - case 'sbgn': - fExt = 'sbgn' + case "png": + fExt = "png"; break; - case 'sbml': - fExt = 'sbml' + case "jpg": + fExt = "jpg"; break; - case 'gpml': - fExt = 'gpml' - break; - case 'celldesigner': + case "svg": + fExt = "svg"; + break; + case "celldesigner": default: - fExt = 'xml' + fExt = "xml"; break; } - filename = filename.substring(0, filename.lastIndexOf('.')).concat(".").concat(fExt); + filename = filename + .substring(0, filename.lastIndexOf(".")) + .concat(".") + .concat(fExt); $("#file-save-filename").val(filename); - $(document).off("click", "#file-save-accept").on("click", "#file-save-accept", function (evt) { + $(document) + .off("click", "#file-save-accept") + .on("click", "#file-save-accept", function (evt) { + // use the active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the assocated cy instance + var cy = chiseInstance.getCy(); + cy.elements().unselect(); + // get current general properties for cy + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + + filename = $("#file-save-filename").val(); + // sifLayout and image export should not change the file name in UI + if ( + fileformat != "sifLayout" && + fileformat != "png" && + fileformat != "jpg" && + fileformat != "svg" + ) { + appUtilities.setFileContent(filename); + } - // use the active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - // use the assocated cy instance - var cy = chiseInstance.getCy(); - cy.elements().unselect(); - // get current general properties for cy - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + if (fileformat === "sbgn" || fileformat === "nwt") { + var renderInfo; + var properties = jquery.extend(true, {}, currentGeneralProperties); + delete properties.mapType; // already stored in sbgn file, no need to store in extension as property + + var saveAsFcn = chiseInstance.saveAsNwt; + if (fileformat === "sbgn") { + if (chiseInstance.elementUtilities.mapType === "SBML") { + chiseInstance.saveAsSbgnmlForSBML(filename, function () { + var promptSbmlConversionErrorView = + new PromptSbmlConversionErrorView({ + el: "#prompt-sbmlConversionError-table", + }); + promptSbmlConversionErrorView.render(); + document.getElementById("file-conversion-error-message").innerText = + "Conversion failed!"; + }); + $(self.el).modal("toggle"); + return; + } + saveAsFcn = chiseInstance.saveAsSbgnml; + } - filename = $("#file-save-filename").val(); - appUtilities.setFileContent(filename); + var nodes, edges; - if(fileformat === "sbgn" || fileformat === "nwt") { - var renderInfo; - var properties = jquery.extend(true, {}, currentGeneralProperties); - delete properties.mapType; // already stored in sbgn file, no need to store in extension as property + if (fileformat === "sbgn") { + if (chiseInstance.elementUtilities.mapType === "SIF") { + properties.mapType = "Unknown"; + } - var saveAsFcn = chiseInstance.saveAsNwt; - if ( fileformat === "sbgn" ) { - saveAsFcn = chiseInstance.saveAsSbgnml; - } + nodes = cy.nodes().filter(function (node) { + return !chiseInstance.elementUtilities.isSIFNode(node); + }); + + edges = cy.edges().filter(function (edge) { + return ( + !chiseInstance.elementUtilities.isSIFEdge(edge) && + !chiseInstance.elementUtilities.isSIFNode( + edge.data("source") + ) && + !chiseInstance.elementUtilities.isSIFNode(edge.data("target")) + ); + }); + } else if ( + chiseInstance.elementUtilities.mapType === "SIF" && + properties.enableSIFTopologyGrouping + ) { + // get nodes and edges + + edges = cy.edges(); + var topologyGrouping = chiseInstance.sifTopologyGrouping; + var metaEdges = topologyGrouping.getMetaEdges(); + metaEdges.forEach(function (edge) { + edges = edges.union(edge.data("tg-to-restore")); + }); + + nodes = cy.nodes(); + } - var nodes, edges; + renderInfo = appUtilities.getAllStyles(cy, nodes, edges); - if ( fileformat === "sbgn" ) { - if (chiseInstance.elementUtilities.mapType === 'SIF') { - properties.mapType = 'Unknown'; + // If the version is plain, exclude all extensions + if (version === "plain") { + saveAsFcn(filename, version, undefined, undefined, nodes, edges); + } + // If the version is plain3, write renderInfo but not map properties + // which are specific to newt + else if (version === "plain3") { + saveAsFcn(filename, version, renderInfo, undefined, nodes, edges); + } else { + saveAsFcn(filename, version, renderInfo, properties, nodes, edges); + } + } else if (fileformat === "celldesigner") { + if(mapType == "SBML"){ + chiseInstance.saveSbmlForSBML(filename, function (data, errorMessage) { + var exportError = new ExportErrorView({el: "#exportError-table"}); + exportError.render(); + document.getElementById("export-error-message").innerText + = "SBML export failed. Please check if the map is valid!"; + }); + } else if(mapType == "PD"){ + chiseInstance.saveAsCellDesigner(filename, function () { + var promptFileConversionErrorView = + new PromptFileConversionErrorView({ + el: "#prompt-fileConversionError-table", + }); + promptFileConversionErrorView.render(); + document.getElementById("file-conversion-error-message").innerText = + "Conversion failed."; + }); } + } else if (fileformat === "sbml") { - nodes = cy.nodes().filter( function( node ) { - return !chiseInstance.elementUtilities.isSIFNode( node ); - } ); + if (mapType === "PD") { + chiseInstance.saveAsSbml(filename, function (data, errorMessage) { + var promptSbmlConversionErrorView = + new PromptSbmlConversionErrorView({ + el: "#prompt-sbmlConversionError-table", + }); + promptSbmlConversionErrorView.render(data, errorMessage); + }); + } else if (mapType === "SBML") { + chiseInstance.saveSbmlForSBML(filename, function (data, errorMessage) { + var exportError = new ExportErrorView({el: "#exportError-table"}); + exportError.render(); + document.getElementById("export-error-message").innerText + = "SBML export failed. Please check if the map is valid!"; + }); + } - edges = cy.edges().filter( function( edge ) { - return !chiseInstance.elementUtilities.isSIFEdge( edge ) - && !chiseInstance.elementUtilities.isSIFNode( edge.data('source') ) - && !chiseInstance.elementUtilities.isSIFNode( edge.data('target') ); - } ); - } - else if ( chiseInstance.elementUtilities.mapType === 'SIF' && properties.enableSIFTopologyGrouping ) { - // get topologyGrouping instance for cy - var topologyGrouping = chiseInstance.sifTopologyGrouping; - var compoundGroups = topologyGrouping.getGroupCompounds(); - var metaEdges = topologyGrouping.getMetaEdges(); - - nodes = cy.nodes().not( compoundGroups ); - edges = cy.edges().not( metaEdges ); - - metaEdges.forEach( function( edge ) { - edges = edges.union( edge.data('tg-to-restore') ); - } ); + } else if (fileformat === "gpml") { + chiseInstance.saveAsGpml(filename, function (data, errorMessage) { + var promptSbmlConversionErrorView = + new PromptSbmlConversionErrorView({ + el: "#prompt-sbmlConversionError-table", + }); + promptSbmlConversionErrorView.render(data, errorMessage); + }); + } else if (fileformat === "sif") { + chiseInstance.saveAsPlainSif(filename, true); + } else if (fileformat === "sifLayout") { + chiseInstance.exportLayoutData(filename, true); + } else if (fileformat === "png") { + chiseInstance.saveAsPng(filename); + } else if (fileformat === "jpg") { + chiseInstance.saveAsJpg(filename); + } else if (fileformat === "svg") { + chiseInstance.saveAsSvg(filename); + } else { + // invalid file format provided + console.error( + "FileSaveView received unsupported file format: " + fileformat + ); } - renderInfo = appUtilities.getAllStyles(cy, nodes, edges); + $(self.el).modal("toggle"); + }); - // Exclude extensions if the version is plain - if (version === "plain" || version === "plain3") { - saveAsFcn(filename, version, undefined, undefined, nodes, edges); - } - else { - saveAsFcn(filename, version, renderInfo, properties, nodes, edges); - } - } - else if(fileformat === "celldesigner") { - - chiseInstance.saveAsCellDesigner(filename, function(){ - var promptFileConversionErrorView = new PromptFileConversionErrorView({el: '#prompt-fileConversionError-table'}); - promptFileConversionErrorView.render(); - document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!"; - }); - - } - else if(fileformat === "sbml") - { - chiseInstance.saveAsSbml(filename, function(data,errorMessage){ - - var promptSbmlConversionErrorView = new PromptSbmlConversionErrorView({el: '#prompt-sbmlConversionError-table'}); - promptSbmlConversionErrorView.render(data,errorMessage); - //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!"; - }); - - } - else if(fileformat === "gpml") - { - chiseInstance.saveAsGpml(filename, function(data,errorMessage){ - - var promptSbmlConversionErrorView = new PromptSbmlConversionErrorView({el: '#prompt-sbmlConversionError-table'}); - promptSbmlConversionErrorView.render(data,errorMessage); - //document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!"; - }); - - } - else { // invalid file format provided - console.error("FileSaveView received unsupported file format: "+fileformat); - } - - $(self.el).modal('toggle'); - }); - - $(document).off("click", "#file-save-cancel").on("click", "#file-save-cancel", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#file-save-cancel") + .on("click", "#file-save-cancel", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); /* @@ -2678,353 +3785,557 @@ var SaveUserPreferencesView = Backbone.View.extend({ var self = this; self.template = _.template($("#save-user-preferences-template").html()); }, - + render: function () { var self = this; self.template = _.template($("#save-user-preferences-template").html()); - var param ={}; + var param = {}; var stagedObjects = []; - if (typeof appUtilities.stagedElementStyles !== 'undefined') { - appUtilities.stagedElementStyles.forEach(function(item, index){ - stagedObjects.push(item["element"]); + if (typeof appUtilities.stagedElementStyles !== "undefined") { + appUtilities.stagedElementStyles.forEach(function (item, index) { + stagedObjects.push(item["element"]); }); - } + } param.stagedObjects = stagedObjects; self.template = self.template(param); $(self.el).html(self.template); - $(self.el).modal('show'); - - $("#user-preferences-save-table").keyup(function(e){ - if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#save-user-preferences-accept").is(":focus") && !$("#save-user-preferences-cancel").is(":focus")){ + $(self.el).modal("show"); + + $("#user-preferences-save-table").keyup(function (e) { + if ( + e.which == 13 && + $(self.el).data("bs.modal").isShown && + !$("#save-user-preferences-accept").is(":focus") && + !$("#save-user-preferences-cancel").is(":focus") + ) { $("#save-user-preferences-accept").click(); } }); - var filename = document.getElementById('file-name').innerHTML; - if(filename.lastIndexOf('.') != -1){ - filename = filename.substring(0, filename.lastIndexOf('.')); - } + var filename = document.getElementById("file-name").innerHTML; + if (filename.lastIndexOf(".") != -1) { + filename = filename.substring(0, filename.lastIndexOf(".")); + } filename = filename.concat(".newtp"); $("#save-user-preferences-filename").val(filename); - $("#save-user-prefrences-object-check").off('change').on("change", function(){ - if(document.getElementById("save-user-prefrences-object-check").checked){ + $("#save-user-prefrences-object-check") + .off("change") + .on("change", function () { + if ( + document.getElementById("save-user-prefrences-object-check").checked + ) { $(".save-preferences-object-styles").prop("checked", true); - $(".save-preferences-object-styles").attr('disabled','disabled'); - }else{ - $(".save-preferences-object-styles").prop("checked", false); - - $(".save-preferences-object-styles").removeAttr('disabled'); - } - + $(".save-preferences-object-styles").attr("disabled", "disabled"); + } else { + $(".save-preferences-object-styles").prop("checked", false); - }); + $(".save-preferences-object-styles").removeAttr("disabled"); + } + }); - $(document).off("click", "#save-user-preferences-accept").on("click", "#save-user-preferences-accept", function (evt) { + $(document) + .off("click", "#save-user-preferences-accept") + .on("click", "#save-user-preferences-accept", function (evt) { + // use active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the associated cy instance + var cy = appUtilities.getActiveCy(); + var preferences = {}; + //get grid properties + if (document.getElementById("user-prefrences-grid-check").checked) { + var currentGridProperties = appUtilities.getScratch( + cy, + "currentGridProperties" + ); + preferences.currentGridProperties = currentGridProperties; + } - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); + // get currentGeneralProperties for cy + if (document.getElementById("user-prefrences-map-check").checked) { + preferences.currentGeneralProperties = {}; + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + + Object.keys(currentGeneralProperties).forEach(function (key, index) { + if ( + currentGeneralProperties[key] !== + appUtilities.defaultGeneralProperties[key] + ) { + preferences.currentGeneralProperties[key] = + currentGeneralProperties[key]; + } + }); - // use the associated cy instance - var cy = appUtilities.getActiveCy(); - var preferences = {}; - //get grid properties - if(document.getElementById("user-prefrences-grid-check").checked){ - var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties'); - preferences.currentGridProperties = currentGridProperties; - } + delete preferences.currentGeneralProperties.mapName; + delete preferences.currentGeneralProperties.mapDescription; + } - // get currentGeneralProperties for cy - if(document.getElementById("user-prefrences-map-check").checked){ - preferences.currentGeneralProperties = {} - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - - Object.keys(currentGeneralProperties).forEach(function(key,index) { - if(currentGeneralProperties[key] !== appUtilities.defaultGeneralProperties[key]){ - preferences.currentGeneralProperties[key] = currentGeneralProperties[key]; - } - }); + if (document.getElementById("user-prefrences-layout-check").checked) { + preferences.currentLayoutProperties = {}; + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); - delete preferences.currentGeneralProperties.mapName; - delete preferences.currentGeneralProperties.mapDescription; - } + Object.keys(currentLayoutProperties).forEach(function (key, index) { + preferences.currentLayoutProperties[key] = + currentLayoutProperties[key]; + }); + } - if(document.getElementById("user-prefrences-layout-check").checked){ - preferences.currentLayoutProperties = {} - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - - Object.keys(currentLayoutProperties).forEach(function(key,index) { - - preferences.currentLayoutProperties[key] = currentLayoutProperties[key]; - - }); - - - } + preferences.elementsStyles = []; + if (typeof appUtilities.stagedElementStyles !== "undefined") { + appUtilities.stagedElementStyles.forEach(function (element) { + if ( + document.getElementById( + "user-prefrences-object-" + element["element"] + "-check" + ).checked + ) { + preferences.elementsStyles.push(element); + } + }); + } - preferences.elementsStyles = []; - if (typeof appUtilities.stagedElementStyles !== 'undefined') { - - appUtilities.stagedElementStyles.forEach(function(element){ - if(document.getElementById("user-prefrences-object-"+element['element']+"-check").checked){ - preferences.elementsStyles.push(element); - } + var blob = new Blob([JSON.stringify(preferences, null, 2)], { + type: "application/json", }); - } - - var blob = new Blob([JSON.stringify(preferences, null, 2)], {type: "application/json"}); - filename = $("#save-user-preferences-filename").val(); - FileSaver.saveAs(blob, filename); - $(self.el).modal('toggle'); - }); + filename = $("#save-user-preferences-filename").val(); + FileSaver.saveAs(blob, filename); + $(self.el).modal("toggle"); + }); - $(document).off("click", "#save-user-preferences-cancel").on("click", "#save-user-preferences-cancel", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#save-user-preferences-cancel") + .on("click", "#save-user-preferences-cancel", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); var LoadUserPreferencesView = Backbone.View.extend({ initialize: function () { var self = this; self.template = _.template($("#load-user-preferences-template").html()); - }, + }, render: function (param) { var self = this; - self.template = _.template($("#load-user-preferences-template").html()); + self.template = _.template($("#load-user-preferences-template").html()); self.template = self.template(param); $(self.el).html(self.template); - $(self.el).modal('show'); - - $("#user-preferences-load-table").keyup(function(e){ - if (e.which == 13 && $(self.el).data('bs.modal').isShown && !$("#load-user-preferences-accept").is(":focus") && !$("#load-user-preferences-cancel").is(":focus")){ + $(self.el).modal("show"); + + $("#user-preferences-load-table").keyup(function (e) { + if ( + e.which == 13 && + $(self.el).data("bs.modal").isShown && + !$("#load-user-preferences-accept").is(":focus") && + !$("#load-user-preferences-cancel").is(":focus") + ) { $("#load-user-preferences-accept").click(); } - }); - $("#load-user-prefrences-object-check").off('change').on("change", function(){ - if(document.getElementById("load-user-prefrences-object-check").checked){ - $(".load-preferences-object-styles").prop("checked", true); - $(".load-preferences-object-styles").attr('disabled','disabled'); - }else{ - $(".load-preferences-object-styles").prop("checked", false); - - $(".load-preferences-object-styles").removeAttr('disabled'); - } }); - $(document).off("click", "#load-user-preferences-accept").on("click", "#load-user-preferences-accept", function (evt) { - var preferences = appUtilities.loadedUserPreferences; - var cy = appUtilities.getActiveCy(); - var chiseInstance = appUtilities.getActiveChiseInstance(); + $("#load-user-prefrences-object-check") + .off("change") + .on("change", function () { + if ( + document.getElementById("load-user-prefrences-object-check").checked + ) { + $(".load-preferences-object-styles").prop("checked", true); + $(".load-preferences-object-styles").attr("disabled", "disabled"); + } else { + $(".load-preferences-object-styles").prop("checked", false); - //apply grid properties if check - if(document.getElementById("load-user-prefrences-grid-check").checked){ - if(typeof preferences.currentGridProperties !== 'undefined'){ - var currentGridProperties = appUtilities.getScratch(cy, 'currentGridProperties'); - $.extend( currentGridProperties, preferences.currentGridProperties); - appUtilities.setScratch(cy, currentGridProperties, 'currentGridProperties'); - - cy.gridGuide({ - drawGrid: currentGridProperties.showGrid, - gridColor: currentGridProperties.gridColor, - snapToGridOnRelease: currentGridProperties.snapToGridOnRelease, - snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag, - snapToAlignmentLocationOnRelease: currentGridProperties.snapToAlignmentLocationOnRelease, - snapToAlignmentLocationDuringDrag: currentGridProperties.snapToAlignmentLocationDuringDrag, - gridSpacing: currentGridProperties.gridSize, - resize: currentGridProperties.autoResizeNodes, - geometricGuideline: currentGridProperties.showGeometricGuidelines, - distributionGuidelines: currentGridProperties.showDistributionGuidelines, - initPosAlignment: currentGridProperties.showInitPosAlignment, - guidelinesTolerance: currentGridProperties.guidelineTolerance, - guidelinesStyle: { - initPosAlignmentLine: currentGridProperties.initPosAlignmentLine, - lineDash: currentGridProperties.lineDash, - horizontalDistLine: currentGridProperties.horizontalDistLine, - verticalDistLine: currentGridProperties.verticalDistLine, - strokeStyle: currentGridProperties.guidelineColor, - horizontalDistColor: currentGridProperties.horizontalGuidelineColor, - verticalDistColor: currentGridProperties.verticalGuidelineColor, - initPosAlignmentColor: currentGridProperties.initPosAlignmentColor, - geometricGuidelineRange: currentGridProperties.geometricAlignmentRange, - range: currentGridProperties.distributionAlignmentRange - } - }); + $(".load-preferences-object-styles").removeAttr("disabled"); } - } - //apply layout properties if checked by user - if(document.getElementById("load-user-prefrences-layout-check").checked){ - if(typeof preferences.currentLayoutProperties !== 'undefined'){ - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); - $.extend( currentLayoutProperties, preferences.currentLayoutProperties); - appUtilities.setScratch(cy, currentLayoutProperties, 'currentLayoutProperties'); - $(document).trigger('saveLayout', cy); + }); + $(document) + .off("click", "#load-user-preferences-accept") + .on("click", "#load-user-preferences-accept", function (evt) { + var preferences = appUtilities.loadedUserPreferences; + var cy = appUtilities.getActiveCy(); + var chiseInstance = appUtilities.getActiveChiseInstance(); + + //apply grid properties if check + if ( + document.getElementById("load-user-prefrences-grid-check").checked + ) { + if (typeof preferences.currentGridProperties !== "undefined") { + var currentGridProperties = appUtilities.getScratch( + cy, + "currentGridProperties" + ); + $.extend(currentGridProperties, preferences.currentGridProperties); + appUtilities.setScratch( + cy, + currentGridProperties, + "currentGridProperties" + ); + + cy.gridGuide({ + drawGrid: currentGridProperties.showGrid, + gridColor: currentGridProperties.gridColor, + snapToGridOnRelease: currentGridProperties.snapToGridOnRelease, + snapToGridDuringDrag: currentGridProperties.snapToGridDuringDrag, + snapToAlignmentLocationOnRelease: + currentGridProperties.snapToAlignmentLocationOnRelease, + snapToAlignmentLocationDuringDrag: + currentGridProperties.snapToAlignmentLocationDuringDrag, + gridSpacing: currentGridProperties.gridSize, + resize: currentGridProperties.autoResizeNodes, + geometricGuideline: currentGridProperties.showGeometricGuidelines, + distributionGuidelines: + currentGridProperties.showDistributionGuidelines, + initPosAlignment: currentGridProperties.showInitPosAlignment, + guidelinesTolerance: currentGridProperties.guidelineTolerance, + guidelinesStyle: { + initPosAlignmentLine: + currentGridProperties.initPosAlignmentLine, + lineDash: currentGridProperties.lineDash, + horizontalDistLine: currentGridProperties.horizontalDistLine, + verticalDistLine: currentGridProperties.verticalDistLine, + strokeStyle: currentGridProperties.guidelineColor, + horizontalDistColor: + currentGridProperties.horizontalGuidelineColor, + verticalDistColor: currentGridProperties.verticalGuidelineColor, + initPosAlignmentColor: + currentGridProperties.initPosAlignmentColor, + geometricGuidelineRange: + currentGridProperties.geometricAlignmentRange, + range: currentGridProperties.distributionAlignmentRange, + }, + }); + } } - } - //apply map properties if checked by user - if(document.getElementById("load-user-prefrences-map-check").checked){ - if(typeof preferences.currentGeneralProperties !== 'undefined'){ - var ur = cy.undoRedo(); - var actions = []; - - Object.keys( mapTabGeneralPanel.params).forEach(function(key,index) { - if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){ - mapTabGeneralPanel.params[key].value = preferences.currentGeneralProperties[key]; - actions.push({name: "changeMenu", param: mapTabGeneralPanel.params[key]}); - - if(key == "arrowScale"){ - actions.push({name: "changeCss", param: { eles: cy.edges(), name: "arrow-scale", valueMap: mapTabGeneralPanel.params.arrowScale.value}}); - } - } - }); - - Object.keys( mapTabLabelPanel.params).forEach(function(key,index) { - if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){ - mapTabLabelPanel.params[key].value = preferences.currentGeneralProperties[key]; - actions.push({name: "changeMenu", param: mapTabLabelPanel.params[key]}); - } - }); - - - Object.keys( mapTabRearrangementPanel.params).forEach(function(key,index) { - if(typeof preferences.currentGeneralProperties[key] !== 'undefined'){ - mapTabRearrangementPanel.params[key].value = preferences.currentGeneralProperties[key]; - actions.push({name: "changeMenu", param: mapTabRearrangementPanel.params[key]}); - } - }); - - - var applyColorScheme = false; - var defaultColorScheme = appUtilities.defaultGeneralProperties.mapColorScheme; - var defaultColorSchemeStyle = appUtilities.defaultGeneralProperties.mapColorSchemeStyle; - if(typeof preferences.currentGeneralProperties.mapColorScheme !== 'undefined'){ - applyColorScheme = true; - defaultColorScheme = preferences.currentGeneralProperties.mapColorScheme; + //apply layout properties if checked by user + if ( + document.getElementById("load-user-prefrences-layout-check").checked + ) { + if (typeof preferences.currentLayoutProperties !== "undefined") { + var currentLayoutProperties = appUtilities.getScratch( + cy, + "currentLayoutProperties" + ); + $.extend( + currentLayoutProperties, + preferences.currentLayoutProperties + ); + appUtilities.setScratch( + cy, + currentLayoutProperties, + "currentLayoutProperties" + ); + $(document).trigger("saveLayout", cy); } + } + //apply map properties if checked by user + if (document.getElementById("load-user-prefrences-map-check").checked) { + if (typeof preferences.currentGeneralProperties !== "undefined") { + var ur = cy.undoRedo(); + var actions = []; + + Object.keys(mapTabGeneralPanel.params).forEach(function ( + key, + index + ) { + if ( + typeof preferences.currentGeneralProperties[key] !== "undefined" + ) { + mapTabGeneralPanel.params[key].value = + preferences.currentGeneralProperties[key]; + actions.push({ + name: "changeMenu", + param: mapTabGeneralPanel.params[key], + }); - if(typeof preferences.currentGeneralProperties.mapColorSchemeStyle !== 'undefined'){ - applyColorScheme = true; - defaultColorSchemeStyle = preferences.currentGeneralProperties.mapColorSchemeStyle; - } - if(applyColorScheme){ - appUtilities.applyMapColorScheme(defaultColorScheme, defaultColorSchemeStyle, colorSchemeInspectorView); // default color scheme - } - ur.do("batch", actions); - } - } - - - if(typeof preferences.elementsStyles !== 'undefined'){ - preferences.elementsStyles.forEach(function(item, index){ - var sbgnClass = item["element"]; - if(document.getElementById("load-user-prefrences-object-"+sbgnClass+"-check").checked){ - var targetNodes =cy.elements('[class="' + sbgnClass + '"]') - if(item.styles.length > 0){ - var nameToValue = {}; - item.styles.forEach(function(style, index){ - nameToValue[style.name] = style.value; - }); - - //apply changes to exisiting elements only if user check the option and there are elements on canvas of this sbgn class type - //else just set the styles as default values - if(targetNodes.length > 0 && document.getElementById("load-user-prefrences-apply-changes").checked) - { - - if(item['type'] == 'node') - { - // apply node width and height change to existing elements - targetNodes.forEach(function(node) { - cy.trigger('noderesize.resizestart', [null, node]); - chiseInstance.resizeNodes(node, nameToValue["width"], nameToValue["height"], false); - cy.trigger('noderesize.resizeend', [null, node]); - }); - - chiseInstance.changeData(targetNodes, "border-color", nameToValue["border-color"]); - chiseInstance.changeData(targetNodes, "border-width", nameToValue["border-width"]); - chiseInstance.changeData(targetNodes, "background-color", nameToValue["background-color"]); - - //hande opacity - chiseInstance.changeData(targetNodes, "background-opacity", nameToValue["background-opacity"]); - chiseInstance.changeData(targetNodes, "background-image-opacity", nameToValue["background-image-opacity"]); - - //handel font - var data = {}; - data['font-size'] = nameToValue['font-size'] != '' ? nameToValue['font-size'] : undefined; - data['font-family'] = nameToValue['font-sifamilyze'] != '' ? nameToValue['font-family'] : undefined; - data['font-weight'] = nameToValue['font-weight'] != '' ? nameToValue['font-weight'] : undefined; - data['font-style'] = nameToValue['font-style'] != '' ? nameToValue['font-style'] : undefined; - data['color'] = nameToValue['color'] != '' ? nameToValue['color'] : undefined; - chiseInstance.changeFontProperties(targetNodes, data); - - targetNodes.forEach(function(node) { - node.data('background-image', nameToValue['background-image']); - node.data('background-position-x', nameToValue['background-position-x']); - node.data('background-position-y', nameToValue['background-position-y']); - node.data('background-width', nameToValue['background-width']); - node.data('background-height', nameToValue['background-height']); - node.data('background-fit', nameToValue['background-fit']); - node.data('background-image-opacity', nameToValue['background-image-opacity']); + if (key == "arrowScale") { + actions.push({ + name: "changeCss", + param: { + eles: cy.edges(), + name: "arrow-scale", + valueMap: mapTabGeneralPanel.params.arrowScale.value, + }, }); - - chiseInstance.setMultimerStatus(targetNodes,nameToValue['multimer'] ); - chiseInstance.setCloneMarkerStatus(targetNodes,nameToValue['clonemarker'] ); } - else - { - //if type is edge only apply width and line-color - chiseInstance.changeData(targetNodes, "width", nameToValue['width']); - chiseInstance.changeData(targetNodes, "line-color", nameToValue['line-color']); - } } - //set the loaded styles as default values - chiseInstance.elementUtilities.setDefaultProperties( sbgnClass, nameToValue ); - - - - + }); + + Object.keys(mapTabLabelPanel.params).forEach(function (key, index) { + if ( + typeof preferences.currentGeneralProperties[key] !== "undefined" + ) { + mapTabLabelPanel.params[key].value = + preferences.currentGeneralProperties[key]; + actions.push({ + name: "changeMenu", + param: mapTabLabelPanel.params[key], + }); + } + }); + + Object.keys(mapTabRearrangementPanel.params).forEach(function ( + key, + index + ) { + if ( + typeof preferences.currentGeneralProperties[key] !== "undefined" + ) { + mapTabRearrangementPanel.params[key].value = + preferences.currentGeneralProperties[key]; + actions.push({ + name: "changeMenu", + param: mapTabRearrangementPanel.params[key], + }); + } + }); + + var applyColorScheme = false; + var defaultColorScheme = + appUtilities.defaultGeneralProperties.mapColorScheme; + var defaultColorSchemeStyle = + appUtilities.defaultGeneralProperties.mapColorSchemeStyle; + if ( + typeof preferences.currentGeneralProperties.mapColorScheme !== + "undefined" + ) { + applyColorScheme = true; + defaultColorScheme = + preferences.currentGeneralProperties.mapColorScheme; } - if(item.infoBoxStyles.length > 0){ - //set info boxes styles - var infoStyles = item.infoBoxStyles; - - - infoStyles.forEach(function(infoStyle){ - - var currentDefaults = chiseInstance.elementUtilities.getDefaultProperties( sbgnClass )[ infoStyle.clazz ]; - var infoboxStyle = $.extend( {}, currentDefaults, infoStyle.styles ); - chiseInstance.setDefaultProperty( sbgnClass, infoStyle.clazz, infoboxStyle ); - - //statesandinfos - - if(targetNodes.length > 0 && document.getElementById("load-user-prefrences-apply-changes").checked){ - targetNodes.forEach(function(node) { - var infoboxesIndices = node.data("statesandinfos").length; - for(var i = 0 ; i< infoboxesIndices ; i++){ - if(node.data('statesandinfos')[i].clazz == infoStyle.clazz){ - appUtilities.getActiveChiseInstance().updateInfoboxStyle(node, i, infoboxStyle); + if ( + typeof preferences.currentGeneralProperties + .mapColorSchemeStyle !== "undefined" + ) { + applyColorScheme = true; + defaultColorSchemeStyle = + preferences.currentGeneralProperties.mapColorSchemeStyle; + } + if (applyColorScheme) { + appUtilities.applyMapColorScheme( + defaultColorScheme, + defaultColorSchemeStyle, + colorSchemeInspectorView + ); // default color scheme + } + ur.do("batch", actions); + } + } + + if (typeof preferences.elementsStyles !== "undefined") { + preferences.elementsStyles.forEach(function (item, index) { + var sbgnClass = item["element"]; + if ( + document.getElementById( + "load-user-prefrences-object-" + sbgnClass + "-check" + ).checked + ) { + var targetNodes = cy.elements('[class="' + sbgnClass + '"]'); + if (item.styles.length > 0) { + var nameToValue = {}; + item.styles.forEach(function (style, index) { + nameToValue[style.name] = style.value; + }); + + //apply changes to exisiting elements only if user check the option and there are elements on canvas of this sbgn class type + //else just set the styles as default values + if ( + targetNodes.length > 0 && + document.getElementById("load-user-prefrences-apply-changes") + .checked + ) { + if (item["type"] == "node") { + // apply node width and height change to existing elements + targetNodes.forEach(function (node) { + cy.trigger("nodeediting.resizestart", [null, node]); + chiseInstance.resizeNodes( + node, + nameToValue["width"], + nameToValue["height"], + false + ); + cy.trigger("nodeediting.resizeend", [null, node]); + }); + + chiseInstance.changeData( + targetNodes, + "border-color", + nameToValue["border-color"] + ); + chiseInstance.changeData( + targetNodes, + "border-width", + nameToValue["border-width"] + ); + chiseInstance.changeData( + targetNodes, + "background-color", + nameToValue["background-color"] + ); + + //hande opacity + chiseInstance.changeData( + targetNodes, + "background-opacity", + nameToValue["background-opacity"] + ); + chiseInstance.changeData( + targetNodes, + "background-image-opacity", + nameToValue["background-image-opacity"] + ); + + //handel font + var data = {}; + data["font-size"] = + nameToValue["font-size"] != "" + ? nameToValue["font-size"] + : undefined; + data["font-family"] = + nameToValue["font-sifamilyze"] != "" + ? nameToValue["font-family"] + : undefined; + data["font-weight"] = + nameToValue["font-weight"] != "" + ? nameToValue["font-weight"] + : undefined; + data["font-style"] = + nameToValue["font-style"] != "" + ? nameToValue["font-style"] + : undefined; + data["color"] = + nameToValue["color"] != "" + ? nameToValue["color"] + : undefined; + chiseInstance.changeFontProperties(targetNodes, data); + + targetNodes.forEach(function (node) { + node.data( + "background-image", + nameToValue["background-image"] + ); + node.data( + "background-position-x", + nameToValue["background-position-x"] + ); + node.data( + "background-position-y", + nameToValue["background-position-y"] + ); + node.data( + "background-width", + nameToValue["background-width"] + ); + node.data( + "background-height", + nameToValue["background-height"] + ); + node.data( + "background-fit", + nameToValue["background-fit"] + ); + node.data( + "background-image-opacity", + nameToValue["background-image-opacity"] + ); + }); + + chiseInstance.setMultimerStatus( + targetNodes, + nameToValue["multimer"] + ); + chiseInstance.setCloneMarkerStatus( + targetNodes, + nameToValue["clonemarker"] + ); + chiseInstance.setActiveStatus( + targetNodes, + nameToValue["active"] + ); + } else { + //if type is edge only apply width and line-color + chiseInstance.changeData( + targetNodes, + "width", + nameToValue["width"] + ); + chiseInstance.changeData( + targetNodes, + "line-color", + nameToValue["line-color"] + ); + } + } + //set the loaded styles as default values + chiseInstance.elementUtilities.setDefaultProperties( + sbgnClass, + nameToValue + ); + } + + if (item.infoBoxStyles && item.infoBoxStyles.length > 0) { + //set info boxes styles + var infoStyles = item.infoBoxStyles; + + infoStyles.forEach(function (infoStyle) { + var currentDefaults = + chiseInstance.elementUtilities.getDefaultProperties( + sbgnClass + )[infoStyle.clazz]; + var infoboxStyle = $.extend( + {}, + currentDefaults, + infoStyle.styles + ); + chiseInstance.setDefaultProperty( + sbgnClass, + infoStyle.clazz, + infoboxStyle + ); + + //statesandinfos + + if ( + targetNodes.length > 0 && + document.getElementById( + "load-user-prefrences-apply-changes" + ).checked + ) { + targetNodes.forEach(function (node) { + var infoboxesIndices = node.data("statesandinfos").length; + for (var i = 0; i < infoboxesIndices; i++) { + if ( + node.data("statesandinfos")[i].clazz == + infoStyle.clazz + ) { + appUtilities + .getActiveChiseInstance() + .updateInfoboxStyle(node, i, infoboxStyle); + } } - - } - }); - } - }); - - } - + }); + } + }); + } + } + }); } - }); - } - - - $(self.el).modal('toggle'); - }); - $(document).off("click", "#load-user-preferences-cancel").on("click", "#load-user-preferences-cancel", function (evt) { - $(self.el).modal('toggle'); - }); + $(self.el).modal("toggle"); + }); + + $(document) + .off("click", "#load-user-preferences-cancel") + .on("click", "#load-user-preferences-cancel", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); /* @@ -3040,19 +4351,23 @@ var PromptConfirmationView = Backbone.View.extend({ self.template = _.template($("#prompt-confirmation-template").html()); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); - $(document).off("click", "#prompt-confirmation-accept").on("click", "#prompt-confirmation-accept", function (evt) { - afterFunction(); - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-confirmation-accept") + .on("click", "#prompt-confirmation-accept", function (evt) { + $(self.el).modal("toggle"); + afterFunction(); + }); - $(document).off("click", "#prompt-confirmation-cancel").on("click", "#prompt-confirmation-cancel", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-confirmation-cancel") + .on("click", "#prompt-confirmation-cancel", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); var PromptMapTypeView = Backbone.View.extend({ @@ -3060,514 +4375,1733 @@ var PromptMapTypeView = Backbone.View.extend({ var self = this; self.template = _.template($("#prompt-mapType-template").html()); }, - render: function (message,suggestion, afterFunction) { + render: function (message, suggestion, afterFunction) { var self = this; self.template = _.template($("#prompt-mapType-template").html()); var param = {}; param.message = message; - param.suggestion =suggestion; + param.suggestion = suggestion; self.template = self.template(param); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); - $(document).off("click", "#prompt-mapType-accept").on("click", "#prompt-mapType-accept", function (evt) { - //afterFunction(); - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-mapType-accept") + .on("click", "#prompt-mapType-accept", function (evt) { + //afterFunction(); + $(self.el).modal("toggle"); + }); - $(document).off("click", "#prompt-mapType-cancel").on("click", "#prompt-mapType-cancel", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-mapType-cancel") + .on("click", "#prompt-mapType-cancel", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); -var PromptInvalidQueryView = Backbone.View.extend({ +var InternalServerError = Backbone.View.extend({ initialize: function () { - var self = this; - self.template = _.template($("#prompt-invalidQuery-template").html()); + var self = this; + self.template = _.template($("#prompt-internal-server-template").html()); }, render: function () { - var self = this; - self.template = _.template($("#prompt-invalidQuery-template").html()); - - $(self.el).html(self.template); - $(self.el).modal('show'); - - $(document).off("click", "#prompt-invalidQuery-confirm").on("click", "#prompt-invalidQuery-confirm", function (evt) { - $(self.el).modal('toggle'); - if (PCdialog == "Neighborhood") - appUtilities.neighborhoodQueryView.render(); - else if (PCdialog == "PathsBetween") - appUtilities.pathsBetweenQueryView.render(); - else if (PCdialog == "PathsFromTo") - appUtilities.pathsFromToQueryView.render(); - else if (PCdialog == "CommonStream") - appUtilities.commonStreamQueryView.render(); + var self = this; + self.template = _.template($("#prompt-internal-server-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-internal-server-confirm") + .on("click", "#prompt-internal-server-confirm", function (evt) { + $(self.el).modal("toggle"); + if (PCdialog == "Neighborhood") + appUtilities.neighborhoodQueryView.render(); + else if (PCdialog == "PathsBetween") + appUtilities.pathsBetweenQueryView.render(); + else if (PCdialog == "PathsFromTo") + appUtilities.pathsFromToQueryView.render(); + else if (PCdialog == "CommonStream") + appUtilities.commonStreamQueryView.render(); }); - return this; - } + return this; + }, }); +var PromptInvalidQueryView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidQuery-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidQuery-template").html()); -var PromptInvalidLengthLimitView = Backbone.View.extend({ - initialize: function () { - var self = this; - self.template = _.template($("#prompt-invalidLengthLimit-template").html()); - }, - render: function () { - var self = this; - self.template = _.template($("#prompt-invalidLengthLimit-template").html()); + $(self.el).html(self.template); + $(self.el).modal("show"); - $(self.el).html(self.template); + $(document) + .off("click", "#prompt-invalidQuery-confirm") + .on("click", "#prompt-invalidQuery-confirm", function (evt) { + $(self.el).modal("toggle"); if (PCdialog == "Neighborhood") - document.getElementById("length-limit-constant").innerHTML = "Length limit can be at most 2."; - else - document.getElementById("length-limit-constant").innerHTML = "Length limit can be at most 3."; - $(self.el).modal('show'); - - $(document).off("click", "#prompt-invalidLengthLimit-confirm").on("click", "#prompt-invalidLengthLimit-confirm", function (evt) { - $(self.el).modal('toggle'); - if (PCdialog == "Neighborhood") - appUtilities.neighborhoodQueryView.render(); - else if (PCdialog == "PathsBetween") - appUtilities.pathsBetweenQueryView.render(); - else if (PCdialog == "PathsFromTo") - appUtilities.pathsFromToQueryView.render(); - else if (PCdialog == "CommonStream") - appUtilities.commonStreamQueryView.render(); - - }); + appUtilities.neighborhoodQueryView.render(); + else if (PCdialog == "PathsBetween") + appUtilities.pathsBetweenQueryView.render(); + else if (PCdialog == "PathsFromTo") + appUtilities.pathsFromToQueryView.render(); + else if (PCdialog == "CommonStream") + appUtilities.commonStreamQueryView.render(); + }); - return this; - } + return this; + }, }); +// var PromptRequestTimedOutView = Backbone.View.extend({ +// initialize: function () { +// var self = this; +// self.template = _.template($("#prompt-requestTimedOut-template").html()); +// }, +// render: function () { +// var self = this; +// self.template = _.template($("#prompt-requestTimedOut-template").html()); + +// $(self.el).html(self.template); +// $(self.el).modal("show"); + +// $(document) +// .off("click", "#prompt-requestTimedOut-confirm") +// .on("click", "#prompt-requestTimedOut-confirm", function (evt) { +// $(self.el).modal("toggle"); +// if (PCdialog == "Neighborhood") +// appUtilities.neighborhoodQueryView.render(); +// else if (PCdialog == "PathsBetween") +// appUtilities.pathsBetweenQueryView.render(); +// else if (PCdialog == "PathsFromTo") +// appUtilities.pathsFromToQueryView.render(); +// else if (PCdialog == "CommonStream") +// appUtilities.commonStreamQueryView.render(); +// }); + +// return this; +// }, +// }); + +var PromptRequestTimedOutView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-requestTimedOut-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-requestTimedOut-template").html()); + $(self.el).html(self.template); + $(self.el).modal("show"); -var PromptInvalidURIView = Backbone.View.extend({ - initialize: function () { - var self = this; - self.template = _.template($("#prompt-invalidURI-template").html()); - }, - render: function () { - var self = this; - self.template = _.template($("#prompt-invalidURI-template").html()); + $(document) + .off("click", "#prompt-requestTimedOut-confirm") + .on("click", "#prompt-requestTimedOut-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + return this; + }, +}); - $(self.el).html(self.template); - $(self.el).modal('show'); +var PromptEmptyQueryResultView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-emptyQueryResult-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-emptyQueryResult-template").html()); - $(document).off("click", "#prompt-invalidURI-confirm").on("click", "#prompt-invalidURI-confirm", function (evt) { - $(self.el).modal('toggle'); - appUtilities.pathsByURIQueryView.render(); - }); + $(self.el).html(self.template); + $(self.el).modal("show"); + $(document) + .off("click", "#prompt-emptyQueryResult-confirm") + .on("click", "#prompt-emptyQueryResult-confirm", function (evt) { + $(self.el).modal("toggle"); + }); - return this; - } + return this; + }, }); -var PromptInvalidURIWarning = Backbone.View.extend({ - initialize: function () { - var self = this; - self.template = _.template($("#prompt-invalidURI-template").html()); - }, - render: function () { - var self = this; - self.template = _.template($("#prompt-invalidURI-template").html()); +var DuplicateGeneGiven = Backbone.View.extend({ + initialize: function (options) { + var self = this; + self.template = _.template($("#prompt-duplicateGeneGiven-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-duplicateGeneGiven-template").html()); - $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).html(self.template); + $(self.el).modal("show"); + $(document) + .off("click", "#prompt-duplicateGeneGiven-confirm") + .on("click", "#prompt-duplicateGeneGiven-confirm", function (evt) { + $(self.el).modal("toggle"); + }); - $(document).off("click", "#prompt-invalidURI-confirm").on("click", "#prompt-invalidURI-confirm", function (evt) { - $(self.el).modal('toggle'); - }); + return this; + }, +}); - return this; - } + +var GeneNotExist = Backbone.View.extend({ + initialize: function (options) { + var self = this; + self.template = _.template($("#prompt-geneNotExist-template").html()); + this.gene = options.gene; + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-geneNotExist-template").html()); + + $(self.el).html(self.template({ gene: this.gene })); + $(self.el).modal("show"); + $(document) + .off("click", "#prompt-geneNotExist-confirm") + .on("click", "#prompt-geneNotExist-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, }); -var PromptInvalidFileView = Backbone.View.extend({ +var PromptInvalidLengthLimitView = Backbone.View.extend({ initialize: function () { var self = this; - self.template = _.template($("#prompt-invalidFile-template").html()); + self.template = _.template($("#prompt-invalidLengthLimit-template").html()); }, render: function () { var self = this; - self.template = _.template($("#prompt-invalidFile-template").html()); + self.template = _.template($("#prompt-invalidLengthLimit-template").html()); $(self.el).html(self.template); - $(self.el).modal('show'); - - $(document).off("click", "#prompt-invalidFile-confirm").on("click", "#prompt-invalidFile-confirm", function (evt) { - $(self.el).modal('toggle'); - }); + if (PCdialog == "Neighborhood") + document.getElementById("length-limit-constant").innerHTML = + "Length limit can be at most 2."; + else + document.getElementById("length-limit-constant").innerHTML = + "Length limit can be at most 3."; + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidLengthLimit-confirm") + .on("click", "#prompt-invalidLengthLimit-confirm", function (evt) { + $(self.el).modal("toggle"); + if (PCdialog == "Neighborhood") + appUtilities.neighborhoodQueryView.render(); + else if (PCdialog == "PathsBetween") + appUtilities.pathsBetweenQueryView.render(); + else if (PCdialog == "PathsFromTo") + appUtilities.pathsFromToQueryView.render(); + else if (PCdialog == "CommonStream") + appUtilities.commonStreamQueryView.render(); + }); return this; - } + }, }); -var PromptFileConversionErrorView = Backbone.View.extend({ - initialize: function () { - var self = this; - self.template = _.template($("#prompt-fileConversionError-template").html()); - }, - render: function() { - var self = this; - self.template = _.template($("#prompt-fileConversionError-template").html()); - - $(self.el).html(self.template); - $(self.el).modal('show'); - - $(document).off("click", "#prompt-fileConversionError-confirm").on("click", "#prompt-fileConversionError-confirm", function (evt) { - $(self.el).modal('toggle'); - }); - - return this; - } +var PromptInvalidURIView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidURI-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidURI-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidURI-confirm") + .on("click", "#prompt-invalidURI-confirm", function (evt) { + $(self.el).modal("toggle"); + appUtilities.pathsByURIQueryView.render(); + }); + + return this; + }, }); -var PromptSbmlConversionErrorView = Backbone.View.extend({ +var PromptInvalidWPIDView = Backbone.View.extend({ initialize: function () { var self = this; - self.template = _.template($("#prompt-sbmlConversionError-template").html()); + self.template = _.template($("#prompt-invalidWPID-template").html()); }, - render: function(data, errorMessage) { + render: function () { var self = this; - self.template = _.template($("#prompt-sbmlConversionError-template").html()); + self.template = _.template($("#prompt-invalidWPID-template").html()); $(self.el).html(self.template); - $(self.el).modal('show'); - - $(document).off("click", "#prompt-sbml-confirm").on("click", "#prompt-sbml-confirm", function (evt) { - var userAgreed = document.getElementById("sbml-coversion-user-agree").checked ? true : false; - - if(userAgreed){ - setTimeout(function(){ - $.ajax({ - type: 'post', - url: "/utilities/sendEmail", - headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}, - data: { fileContent: data , message: "Error message: "+ errorMessage}, - success: function( data ) { - }, - error: function(xhr, options, err){ - console.log( err ); - - } })} , 0); - }else{ - setTimeout(function(){ - $.ajax({ - type: 'post', - url: "/utilities/sendEmail", - headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"}, - data: { fileContent: "no-data" , message: "The user didn't consent to sharing their file." + "\nError message: " + errorMessage}, - success: function( data ) { - }, - error: function(xhr, options, err){ - console.log( err ); - - } })} , 0); - } - - $(self.el).modal('toggle'); - - }); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidWPID-confirm") + .on("click", "#prompt-invalidWPID-confirm", function (evt) { + $(self.el).modal("toggle"); + appUtilities.mapByWPIDQueryView.render(); + }); return this; - } + }, }); -var PromptInvalidURLWarning = Backbone.View.extend({ + +var PromptInvalidReactomeIDView = Backbone.View.extend({ initialize: function () { var self = this; - self.template = _.template($("#prompt-invalidURL-template").html()); + self.template = _.template($("#prompt-invalidReactomeID-template").html()); }, render: function () { var self = this; - self.template = _.template($("#prompt-invalidURL-template").html()); + self.template = _.template($("#prompt-invalidReactomeID-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidReactomeID-confirm") + .on("click", "#prompt-invalidReactomeID-confirm", function (evt) { + $(self.el).modal("toggle"); + appUtilities.mapByReactomeIDQueryView.render(); + }); + + return this; + }, +}); + +var PromptInvalidURIWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidURI-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidURI-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidURI-confirm") + .on("click", "#prompt-invalidURI-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var PromptInvalidWPIDWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidWPID-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidWPID-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidWPID-confirm") + .on("click", "#prompt-invalidWPID-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var PromptInvalidReactomeIDWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidReactomeID-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidReactomeID-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidReactomeID-confirm") + .on("click", "#prompt-invalidReactomeID-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var PromptInvalidFileView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidFile-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidFile-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidFile-confirm") + .on("click", "#prompt-invalidFile-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); +var PromptInvalidTypeWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-errorInvalidType-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-errorInvalidType-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-errorInvalidType-confirm") + .on("click", "#prompt-errorInvalidType-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var SifMapWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#sifMapWarning-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#sifMapWarning-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#sifMapWarning-confirm") + .on("click", "#sifMapWarning-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + + +var PromtErrorPD2AF = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-errorPD2AF-template").html()); + }, + render: function (message) { + var self = this; + self.template = _.template($("#prompt-errorPD2AF-template").html()); + + var param = {}; + param.message = message; + self.template = self.template(param); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-errorPD2AF-confirm") + .on("click", "#prompt-errorPD2AF-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + return this; + }, +}); +var PromptFileConversionErrorView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template( + $("#prompt-fileConversionError-template").html() + ); + }, + render: function () { + var self = this; + self.template = _.template( + $("#prompt-fileConversionError-template").html() + ); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-fileConversionError-confirm") + .on("click", "#prompt-fileConversionError-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var ExportErrorView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template( + $("#export-Error-template").html() + ); + }, + render: function () { + var self = this; + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#export-Error-confirm") + .on("click", "#export-Error-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var PromptSbmlConversionErrorView = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template( + $("#prompt-sbmlConversionError-template").html() + ); + }, + render: function (data, errorMessage) { + var self = this; + self.template = _.template( + $("#prompt-sbmlConversionError-template").html() + ); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-sbml-confirm") + .on("click", "#prompt-sbml-confirm", function (evt) { + var userAgreed = document.getElementById("sbml-coversion-user-agree") + .checked + ? true + : false; + + if (userAgreed) { + setTimeout(function () { + $.ajax({ + type: "post", + url: "/utilities/sendEmail", + headers: { + "Content-Type": + "application/x-www-form-urlencoded; charset=UTF-8", + }, + data: { + fileContent: data, + message: "Error message: " + errorMessage, + }, + success: function (data) {}, + error: function (xhr, options, err) { + console.log(err); + }, + }); + }, 0); + } else { + setTimeout(function () { + $.ajax({ + type: "post", + url: "/utilities/sendEmail", + headers: { + "Content-Type": + "application/x-www-form-urlencoded; charset=UTF-8", + }, + data: { + fileContent: "no-data", + message: + "The user didn't consent to sharing their file." + + "\nError message: " + + errorMessage, + }, + success: function (data) {}, + error: function (xhr, options, err) { + console.log(err); + }, + }); + }, 0); + } + + $(self.el).modal("toggle"); + }); + + return this; + }, +}); +var PromptInvalidURLWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidURL-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidURL-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidURL-confirm") + .on("click", "#prompt-invalidURL-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var PromptInvalidImageWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidImage-template").html()); + }, + render: function (msg) { + var self = this; + var tmp = $("#prompt-invalidImage-template").html(); + var spanText = ''; + var s = tmp.indexOf(spanText); + var e = tmp.indexOf(""); + tmp = tmp.substring(0, s + spanText.length) + msg + tmp.substring(e); + self.template = _.template(tmp); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidImage-confirm") + .on("click", "#prompt-invalidImage-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var PromptInvalidEdgeWarning = Backbone.View.extend({ + initialize: function () { + var self = this; + self.template = _.template($("#prompt-invalidEdge-template").html()); + }, + render: function () { + var self = this; + self.template = _.template($("#prompt-invalidEdge-template").html()); + + $(self.el).html(self.template); + $(self.el).modal("show"); + + $(document) + .off("click", "#prompt-invalidEdge-confirm") + .on("click", "#prompt-invalidEdge-confirm", function (evt) { + $(self.el).modal("toggle"); + }); + + return this; + }, +}); + +var ReactionTemplateView = Backbone.View.extend({ + updatePreview: function () { + let self = this; + const brickType = $("#brick-type-select").val(); + + if (previewTimeout) { + clearTimeout(previewTimeout); + } + var previewTimeout = setTimeout(function () { + self.cy.remove(self.cy.elements()); + + if (brickType === "metabolic-reaction") { + const params = self.getMetabolicReactionParameters(); + self.chiseInstance.createMetabolicReaction( + params.inputData, + params.outputData, + params.reversible, + params.regulator, + params.regulatorMultimer, + params.orientation + ); + } else if (brickType === "conversion") { + const params = self.getConversionParameters(); + self.chiseInstance.createConversion( + params.macromolecule, + params.regulator, + params.regulatorMultimer, + params.orientation, + params.inputInfoboxLabels, + params.outputInfoboxLabels + ); + } else if (brickType === "multimerization") { + const params = self.getMultimerizationParameters(); + self.chiseInstance.createMultimerization( + params.macromolecule, + params.regulator, + params.regulatorMultimer, + params.orientation + ); + } else if (brickType === "association") { + const params = self.getAssociationParameters(); + self.chiseInstance.createComplexProteinFormation( + params.inputLabels, + params.complexLabel, + params.regulator, + params.orientation, + params.reverse + ); + } else if (brickType === "dissociation") { + const params = self.getDissociationParameters(); + self.chiseInstance.createComplexProteinFormation( + params.inputLabels, + params.complexLabel, + params.regulator, + params.orientation, + params.reverse + ); + } else if (brickType === "degradation") { + const params = self.getDegradationParameters(); + self.chiseInstance.createDegradation( + params.macromolecule, + params.orientation + ); + } else if (brickType === "transcription") { + const params = self.getTranscriptionParameters(); + self.chiseInstance.createTranscription( + params.label, + params.orientation + ); + } else if (brickType === "translation") { + const params = self.getTranslationParameters(); + self.chiseInstance.createTranslation( + params.regulatorLabel, + params.outputLabel, + params.orientation + ); + } else { + console.error( + "SBGN Bricks Modal - updatePreview() - brick type not found" + ); + } + const padding = 5; + self.cy.fit(self.cy.elements(), padding); + }, 500); + }, + createDropdownElement: function ( + listOfOptionNames, + listOfCSSClasses, + listOfValues + ) { + const selectElement = document.createElement("select"); + listOfOptionNames.forEach(function (name, index) { + const optionElement = document.createElement("option"); + optionElement.innerHTML = name; + optionElement.value = listOfValues ? listOfValues[index] : name; + if (index === 0) { + optionElement.selected = true; + } + + selectElement.appendChild(optionElement); + }); + selectElement.classList = listOfCSSClasses.join(" "); + return selectElement; + }, + createInputFieldElement: function (listOfCSSClasses) { + const inputFieldElement = document.createElement("input"); + inputFieldElement.type = "text"; + inputFieldElement.classList = listOfCSSClasses.join(" "); + inputFieldElement.value = ""; + + return inputFieldElement; + }, + createImageElement: function (src, listOfCSSClasses) { + const imgElement = document.createElement("img"); + imgElement.src = src; + imgElement.classList = listOfCSSClasses.join(" "); + + return imgElement; + }, + createRowElement: function (listOfDropdownOptions) { + const tableRowElement = document.createElement("tr"); + const inputFieldTableDataElement = document.createElement("td"); + const dropdownTableDataElement = document.createElement("td"); + const imgTableDataElement = document.createElement("td"); + + const dropdownCSSClasses = [ + "template-reaction-molecule-type", + "dropdown-sbgn-bricks-molecule-type", + "layout-text", + ]; + const dropdownElement = this.createDropdownElement( + listOfDropdownOptions, + dropdownCSSClasses + ); + + const inputFieldCSSClasses = [ + "template-reaction-textbox", + "sbgn-input-medium", + " layout-text", + ]; + const inputFieldElement = + this.createInputFieldElement(inputFieldCSSClasses); + + const imgCSSClasses = ["icon-small", "template-reaction-delete-button"]; + const deleteImgSource = "app/img/toolbar/delete-simple.svg"; + const imgElement = this.createImageElement(deleteImgSource, imgCSSClasses); + + inputFieldTableDataElement.appendChild(inputFieldElement); + dropdownTableDataElement.appendChild(dropdownElement); + imgTableDataElement.appendChild(imgElement); + + tableRowElement.appendChild(inputFieldTableDataElement); + tableRowElement.appendChild(dropdownTableDataElement); + tableRowElement.appendChild(imgTableDataElement); + + return tableRowElement; + }, + addInputFieldForMetabolicReaction: function () { + const inputOptions = ["Simple Chemical"]; + const tableRowElement = this.createRowElement(inputOptions); + + const lastTableRowElement = $("#metabolic-reaction-input-table tr").last(); + $(tableRowElement).insertBefore(lastTableRowElement); + }, + addOutputFieldForMetabolicReaction: function () { + const outputOptions = ["Simple Chemical"]; + const tableRowElement = this.createRowElement(outputOptions); + + const lastTableRowElement = $("#metabolic-reaction-output-table tr").last(); + $(tableRowElement).insertBefore(lastTableRowElement); + }, + addModificationForConversion: function () { + const tableRowElement = document.createElement("tr"); + const tableDataElement = document.createElement("td"); + const dropdownCSSClasses = [ + "sbgn-output-medium", + "layout-text", + "conversion-type-dropdown", + ]; + const modificationTypes = [ + "Phosphorylation", + "Ubiquitination", + "Hydroxilation", + "Acetylation", + "Glycosylation", + "Myristoylation", + "Palmitoylation", + "Prenylation", + "Sulfation", + "Methylation", + "Protonation", + "Activation", + ]; + const dropdownOptions = []; + modificationTypes.forEach(function (type) { + dropdownOptions.push(type); + dropdownOptions.push("De" + type.toLowerCase()); + }); + + const modificationSymbols = [ + "P", + "Ub", + "OH", + "Ac", + "G", + "My", + "Pa", + "Pr", + "S", + "Me", + "H", + ]; + const dropdownValues = []; + modificationSymbols.forEach(function (symbol) { + dropdownValues.push(symbol + "-out"); + dropdownValues.push(symbol + "-in"); + }); + dropdownValues.push("activation"); + dropdownValues.push("deactivation"); + + const dropdownElement = this.createDropdownElement( + dropdownOptions, + dropdownCSSClasses, + dropdownValues + ); + + const labelElement = document.createElement("label"); + labelElement.classList = "layout-text conversion-residue-input-label"; + labelElement.innerHTML = "Residue:"; + + const inputFieldCSSClasses = [ + "conversion-modification-residue-name", + "sbgn-input-medium", + " layout-text", + "small-right-margin", + ]; + const inputFieldElement = + this.createInputFieldElement(inputFieldCSSClasses); + + const imgCSSClasses = ["icon-small", "template-reaction-delete-button"]; + const deleteImgSource = "app/img/toolbar/delete-simple.svg"; + const imgElement = this.createImageElement(deleteImgSource, imgCSSClasses); + + tableDataElement.appendChild(dropdownElement); + tableDataElement.appendChild(labelElement); + tableDataElement.appendChild(inputFieldElement); + tableDataElement.appendChild(imgElement); + + tableRowElement.appendChild(tableDataElement); + + const lastTableRowElement = $("#conversion-modification-table tr:last"); + $(tableRowElement).insertBefore(lastTableRowElement); + }, + addAssociationInput: function () { + const inputOptions = ["Macromolecule"]; + const tableRowElement = this.createRowElement(inputOptions); + + const lastTableRowElement = $("#association-input-table tr:last"); + $(tableRowElement).insertBefore(lastTableRowElement); + }, + addDissociationOutput: function () { + const inputOptions = ["Macromolecule"]; + const tableRowElement = this.createRowElement(inputOptions); + + const lastTableRowElement = $("#dissociation-output-table tr:last"); + $(tableRowElement).insertBefore(lastTableRowElement); + }, + changeTemplateHTMLContent: function (brickType) { + $("#reaction-template-left-td").html( + this.brickMetadata[brickType]["input-side-html"] + ); + $("#reaction-template-right-td").html( + this.brickMetadata[brickType]["output-side-html"] + ); + $("#sbgn-bricks-help-link").attr( + "href", + this.brickMetadata[brickType]["help-link"] + ); + $("#reaction-top-input-row").html( + this.brickMetadata[brickType]["top-input-row"] + ); + + ["conversion", "multimerization"].forEach(function (type) { + const bottomRowId = "#" + type + "-bottom-row"; + if (brickType === type) { + $(bottomRowId).removeClass("hide"); + } else { + $(bottomRowId).addClass("hide"); + } + }); + }, + getMetabolicReactionParameters: function () { + const inputNames = $( + "#metabolic-reaction-input-table :input.template-reaction-textbox" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const inputTypes = $( + "#metabolic-reaction-input-table :input.template-reaction-molecule-type :selected" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const outputNames = $( + "#metabolic-reaction-output-table :input.template-reaction-textbox" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const outputTypes = $( + "#metabolic-reaction-output-table :input.template-reaction-molecule-type :selected" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const inputData = []; + inputNames.forEach(function (name, index) { + inputData.push({ + name: name, + type: inputTypes[index], + }); + }); + + const outputData = []; + outputNames.forEach(function (name, index) { + outputData.push({ + name: name, + type: outputTypes[index], + }); + }); + + const reversible = $("#metabolic-reaction-reversible-checkbox").prop( + "checked" + ); + + const hasRegulator = $("#metabolic-reaction-regulator-checkbox").prop( + "checked" + ); + + const regulator = hasRegulator + ? { + name: $("#metabolic-reaction-regulator-name").val(), + type: $("#metabolic-reaction-regulator-type").val(), + } + : {}; + + const multimerCardinality = this.getMultimerCardinalityValue( + $("#metabolic-reaction-multimer-cardinality").val() + ); + + const multimer = { + enabled: + !$("#metabolic-reaction-multimer-checkbox").prop("disabled") && + $("#metabolic-reaction-multimer-checkbox").prop("checked"), + cardinality: multimerCardinality, + }; + + const orientation = $("#metabolic-reaction-orientation-select").val(); + + return { + inputData: inputData, + outputData: outputData, + reversible: reversible, + regulator: regulator, + regulatorMultimer: multimer, + orientation: orientation, + }; + }, + getMultimerCardinalityValue: function (value) { + const numberEquivalent = Number(value); + if ( + isNaN(numberEquivalent) || + Number(value) < 2 || + !Number.isInteger(numberEquivalent) + ) { + return ""; + } else { + return numberEquivalent.toString(); + } + }, + getConversionParameters: function () { + const macromoleculeName = $("#conversion-input-name").val(); // input and output have same name + const macromoleculeMultimer = $( + "#conversion-macromolecule-multimer-checkbox" + ).prop("checked"); + const macromoleculeCardinality = this.getMultimerCardinalityValue( + $("#conversion-macromolecule-multimer-cardinality").val() + ); + + const macromolecule = { + name: macromoleculeName, + multimer: { + enabled: macromoleculeMultimer, + cardinality: macromoleculeCardinality, + }, + }; + + const conversionTypes = $( + "#reaction-top-input-row select.conversion-type-dropdown" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const residueNames = $( + "#reaction-top-input-row :input.conversion-modification-residue-name" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const hasRegulator = $("#conversion-regulator-checkbox").prop("checked"); + + const regulator = hasRegulator + ? { + name: $("#conversion-regulator-name").val(), + type: $("#conversion-regulator-type").val(), + } + : {}; + + const multimerCardinality = this.getMultimerCardinalityValue( + $("#conversion-multimer-cardinality").val() + ); + + const multimer = { + enabled: + !$("#conversion-multimer-checkbox").prop("disabled") && + $("#conversion-multimer-checkbox").prop("checked"), + cardinality: multimerCardinality, + }; + + const orientation = $("#metabolic-reaction-orientation-select").val(); + + const inputInfoboxLabels = []; + const outputInfoboxLabels = []; + + conversionTypes.forEach(function (type, index) { + let inputInfoboxLabel = ""; + let outputInfoboxLabel = ""; + const infoboxData = type.split("-"); + if (infoboxData.length < 2) { + if (infoboxData[0] === "activation") { + inputInfoboxLabel = "inactive"; + outputInfoboxLabel = "active"; + } else { + inputInfoboxLabel = "active"; + outputInfoboxLabel = "inactive"; + } + } else { + const infoboxSymbolOnInputSide = infoboxData[1] === "in"; + const inputSymbol = infoboxSymbolOnInputSide ? infoboxData[0] : ""; + const outputSymbol = infoboxSymbolOnInputSide ? "" : infoboxData[0]; + + const residueEnabled = !$("#conversion-residue-name").prop("disabled"); + const residue = residueNames[index]; + const residueName = + residueEnabled && residue === "" ? "" : "@" + residue; + + inputInfoboxLabel = inputSymbol + residueName; + outputInfoboxLabel = outputSymbol + residueName; + } + + inputInfoboxLabels.push(inputInfoboxLabel); + outputInfoboxLabels.push(outputInfoboxLabel); + }); + + return { + macromolecule: macromolecule, + regulator: regulator, + regulatorMultimer: multimer, + orientation: orientation, + inputInfoboxLabels: inputInfoboxLabels, + outputInfoboxLabels: outputInfoboxLabels, + }; + }, + getMultimerizationParameters: function () { + const macromoleculeName = $("#multimerization-input-name").val(); // input and output have same name + const macromoleculeCardinality = this.getMultimerCardinalityValue( + $("#multimerization-macromolecule-multimer-cardinality").val() + ); + + const macromolecule = { + name: macromoleculeName, + cardinality: macromoleculeCardinality, + }; + + const hasRegulator = $("#multimerization-regulator-checkbox").prop( + "checked" + ); + + const regulator = hasRegulator + ? { + name: $("#multimerization-regulator-name").val(), + type: $("#multimerization-regulator-type").val(), + edgeType: $("#multimerization-regulator-edge-type").val(), + } + : {}; + + const multimerCardinality = this.getMultimerCardinalityValue( + $("#multimerization-multimer-cardinality").val() + ); + + const regulatorMultimer = { + enabled: + !$("#multimerization-multimer-checkbox").prop("disabled") && + $("#multimerization-multimer-checkbox").prop("checked"), + cardinality: multimerCardinality, + }; + + const orientation = $("#metabolic-reaction-orientation-select").val(); + + return { + macromolecule: macromolecule, + regulator: regulator, + regulatorMultimer: regulatorMultimer, + orientation: orientation, + }; + }, + getAssociationParameters: function () { + const inputLabels = $( + "#sbgn-brick-middle-row #association-input-table :input.template-reaction-textbox" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const complexLabel = $("#association-complex-name").val(); + + const hasRegulator = $("#association-regulator-checkbox").prop("checked"); + + const multimerCardinality = this.getMultimerCardinalityValue( + $("#association-multimer-cardinality").val() + ); + + const regulator = hasRegulator + ? { + name: $("#association-regulator-name").val(), + type: $("#association-regulator-type").val(), + edgeType: $("#association-regulator-edge-type").val(), + multimer: { + enabled: + !$("#association-multimer-checkbox").prop("disabled") && + $("#association-multimer-checkbox").prop("checked"), + cardinality: multimerCardinality, + }, + } + : {}; + + const orientation = $("#metabolic-reaction-orientation-select").val(); + + return { + inputLabels: inputLabels, + complexLabel: complexLabel, + regulator: regulator, + orientation: orientation, + reverse: false, + }; + }, + getDissociationParameters: function () { + const inputLabels = $( + "#sbgn-brick-middle-row #dissociation-output-table :input.template-reaction-textbox" + ) + .map(function () { + return $(this).val(); + }) + .toArray(); + + const complexLabel = $("#dissociation-complex-name").val(); + + const hasRegulator = $("#dissociation-regulator-checkbox").prop("checked"); + + const multimerCardinality = this.getMultimerCardinalityValue( + $("#dissociation-multimer-cardinality").val() + ); + + const regulator = hasRegulator + ? { + name: $("#dissociation-regulator-name").val(), + type: $("#dissociation-regulator-type").val(), + edgeType: $("#dissociation-regulator-edge-type").val(), + multimer: { + enabled: + !$("#dissociation-multimer-checkbox").prop("disabled") && + $("#dissociation-multimer-checkbox").prop("checked"), + cardinality: multimerCardinality, + }, + } + : {}; + + const orientation = $("#metabolic-reaction-orientation-select").val(); + + return { + inputLabels: inputLabels, + complexLabel: complexLabel, + regulator: regulator, + orientation: orientation, + reverse: true, + }; + }, + getDegradationParameters: function () { + const macromolecule = { + name: $("#degradation-input-name").val(), + }; + + const orientation = $("#metabolic-reaction-orientation-select").val(); + + return { + macromolecule: macromolecule, + orientation: orientation, + }; + }, + getTranscriptionParameters: function () { + const label = $("#transcription-regulator-name").val(); + const orientation = $("#metabolic-reaction-orientation-select").val(); + + return { + label: label, + orientation: orientation, + }; + }, + getTranslationParameters: function () { + const regulatorLabel = $("#translation-regulator-name").val(); + const outputLabel = $("#translation-output-name").val(); + const orientation = $("#metabolic-reaction-orientation-select").val(); + + return { + regulatorLabel: regulatorLabel, + outputLabel: outputLabel, + orientation: orientation, + }; + }, + enableImageButtons: function (jQueryElements) { + jQueryElements + .removeClass("image-button-disabled-appearance") + .addClass("image-button-enabled-appearance"); + }, + disableImageButtons: function (jQueryElements) { + jQueryElements + .removeClass("image-button-enabled-appearance") + .addClass("image-button-disabled-appearance"); + }, + setMultimerCheckboxEnabled: function (brickType, enabled) { + const multimerLabelId = "#" + brickType + "-multimer-label"; + const multimerCheckboxId = "#" + brickType + "-multimer-checkbox"; + + if (enabled) { + $(multimerLabelId) + .removeClass("checkbox-label-disabled") + .addClass("checkbox-label-enabled"); + $(multimerCheckboxId).prop("disabled", false); + } else { + $(multimerLabelId) + .removeClass("checkbox-label-enabled") + .addClass("checkbox-label-disabled"); + $(multimerCheckboxId).prop("disabled", true); + } + }, + isMultimerEnabledType: function (type) { + const multimerEnabledTypes = [ + "macromolecule", + "complex", + "simple chemical", + "nucleic acid feature", + ]; + return multimerEnabledTypes.indexOf(type) > -1; + }, + setResidueFieldEnabled: function (residueFieldElement, enabled) { + residueFieldElement.prop("disabled", !enabled); + }, + setInputElementStatus: function (elementId, status) { + const disabledClass = "text-input-disabled"; + const enabledClass = "text-input-enabled"; + + $(elementId).attr("disabled", !status); + + if (status) { + $(elementId).removeClass(disabledClass).addClass(enabledClass); + } else { + $(elementId).removeClass(enabledClass).addClass(disabledClass); + } + }, + setEventsToSyncInputValues(firstFieldId, secondFieldId) { + $(document).on("input", firstFieldId, function () { + const value = $(this).val(); + $(secondFieldId).val(value); + }); + + $(document).on("input", secondFieldId, function () { + const value = $(this).val(); + $(firstFieldId).val(value); + }); + }, + initialize: function () { + var self = this; + self.template = _.template($("#reaction-template-template").html()); + self.bricksWithOptionalRegulator = [ + "metabolic-reaction", + "conversion", + "multimerization", + "association", + "dissociation", + ]; + + self.setEventsToSyncInputValues( + "#conversion-input-name", + "#conversion-output-name" + ); + self.setEventsToSyncInputValues( + "#multimerization-input-name", + "#multimerization-output-name" + ); + self.setEventsToSyncInputValues( + "#transcription-regulator-name", + "#transcription-output-name" + ); + + self.bricksWithOptionalRegulator.forEach((type) => { + const regulatorCheckboxId = "#" + type + "-regulator-checkbox"; + const regulatorNameInputId = "#" + type + "-regulator-name"; + const regulatorTypeInputId = "#" + type + "-regulator-type"; + const multimerCheckboxId = "#" + type + "-multimer-checkbox"; + const inputTableId = "#" + type + "-input-table"; + const outputTableId = "#" + type + "-output-table"; + const multimerCardinalityFieldId = "#" + type + "-multimer-cardinality"; + + $(document).on("input", multimerCardinalityFieldId, function () { + self.updatePreview(); + }); + + $(document).on("click", regulatorCheckboxId, function (event) { + const checked = event.target.checked; + + $(regulatorTypeInputId).attr("disabled", !checked); + + hasRegulatorEdgeTypeSelector = + type === "multimerization" || + type === "association" || + type === "dissociation"; + if (hasRegulatorEdgeTypeSelector) { + const regulatorEdgeTypeSelectorId = + "#" + type + "-regulator-edge-type"; + $(regulatorEdgeTypeSelectorId).attr("disabled", !checked); + } + + self.setInputElementStatus(regulatorNameInputId, checked); + + // determine if multimer should be enabled + const selectedRegulatorType = $(regulatorTypeInputId).val(); + const multimerEnabled = + checked && self.isMultimerEnabledType(selectedRegulatorType); + + self.setMultimerCheckboxEnabled(type, multimerEnabled); + + self.updatePreview(); + }); + + $(document).on("click", multimerCheckboxId, function (event) { + const checked = event.target.checked; + self.setInputElementStatus(multimerCardinalityFieldId, checked); + self.updatePreview(); + }); + + $(document).on("input", regulatorNameInputId, function () { + self.updatePreview(); + }); + + $(document).on("change", regulatorTypeInputId, function () { + // determine if multimer should be enabled + const selectedRegulatorType = $(regulatorTypeInputId).val(); + const multimerEnabled = self.isMultimerEnabledType( + selectedRegulatorType + ); + self.setMultimerCheckboxEnabled(type, multimerEnabled); + + $(multimerCheckboxId).prop("checked", false); + self.setInputElementStatus(multimerCardinalityFieldId, false); + + self.updatePreview(); + }); + + const inputFieldSelector = ":input.template-reaction-textbox"; + const inputSelector = inputTableId + " " + inputFieldSelector; + $(document).on("input", inputSelector, function () { + self.updatePreview(); + }); - $(self.el).html(self.template); - $(self.el).modal('show'); + const outputSelector = outputTableId + " " + inputFieldSelector; + $(document).on("input", outputSelector, function () { + self.updatePreview(); + }); + }); + + $(document).on("click", "#conversion-residue-checkbox", function (event) { + const checked = event.target.checked; + const residueInputElement = $("#conversion-residue-name"); + const enabledClass = "text-input-enabled"; + const disabledClass = "text-input-disabled"; + residueInputElement.attr("disabled", !checked); + if (checked) { + residueInputElement.removeClass(disabledClass).addClass(enabledClass); + } else { + residueInputElement.removeClass(enabledClass).addClass(disabledClass); + } - $(document).off("click", "#prompt-invalidURL-confirm").on("click", "#prompt-invalidURL-confirm", function (evt) { - $(self.el).modal('toggle'); + self.updatePreview(); }); - return this; - } -}); + $(document).on("input", "#degradation-input-name", function () { + self.updatePreview(); + }); -var PromptInvalidImageWarning = Backbone.View.extend({ - initialize: function () { - var self = this; - self.template = _.template($("#prompt-invalidImage-template").html()); - }, - render: function (msg) { - var self = this; - var tmp = $("#prompt-invalidImage-template").html(); - var spanText = ''; - var s = tmp.indexOf(spanText) - var e = tmp.indexOf(''); - tmp = tmp.substring(0, s + spanText.length) + msg + tmp.substring(e); - self.template = _.template(tmp); + $(document).on("input", "#transcription-regulator-name", function () { + self.updatePreview(); + }); - $(self.el).html(self.template); - $(self.el).modal('show'); + $(document).on("input", "#transcription-output-name", function () { + self.updatePreview(); + }); - $(document).off("click", "#prompt-invalidImage-confirm").on("click", "#prompt-invalidImage-confirm", function (evt) { - $(self.el).modal('toggle'); + $(document).on("input", "#translation-regulator-name", function () { + self.updatePreview(); }); - return this; - } -}); + $(document).on("input", "#translation-output-name", function () { + self.updatePreview(); + }); -var PromptInvalidEdgeWarning = Backbone.View.extend({ - initialize: function () { - var self = this; - self.template = _.template($("#prompt-invalidEdge-template").html()); - }, - render: function () { - var self = this; - self.template = _.template($("#prompt-invalidEdge-template").html()); + $(document).on("change", "#conversion-reaction-selector", function () { + const conversionType = $(this).val(); - $(self.el).html(self.template); - $(self.el).modal('show'); + if ( + conversionType === "activation" || + conversionType === "deactivation" + ) { + self.setResidueFieldEnabled(false); + } else { + self.setResidueFieldEnabled(true); + } - $(document).off("click", "#prompt-invalidEdge-confirm").on("click", "#prompt-invalidEdge-confirm", function (evt) { - $(self.el).modal('toggle'); + self.updatePreview(); }); - return this; - } -}); + $(document).on( + "input", + "#reaction-top-input-row :input.conversion-modification-residue-name", + function () { + self.updatePreview(); + } + ); + + $(document).on( + "click", + "#conversion-macromolecule-multimer-checkbox", + function (event) { + const checked = event.target.checked; + self.setInputElementStatus( + "#conversion-macromolecule-multimer-cardinality", + checked + ); + self.updatePreview(); + } + ); -var ReactionTemplateView = Backbone.View.extend({ - addMacromolecule: function (type, i) { - var html = "" - + "" - + ""; - if( type == "reaction"){ - html += "" - + "" - + ""; - html += ""; - $('#template-reversible-input-table :input.template-reaction-textbox').last().closest('tr').after(html); - } - else{ - html += "'; - - return wrapToTd( html ); + var id = generateInputId(propName, selectorPrefix); + var html = + '"; + + return wrapToTd(html); } function generateIntegerInputBoxTd(selectorPrefix, propName, value) { - var html = ''; - - return wrapToTd( html ); + var html = + '"; + + return wrapToTd(html); } -function generateInputId( propName, selectorPrefix, selectorPostfix ) { - var pretext = selectorPrefix ? selectorPrefix + '-' : ''; - var posttext = selectorPostfix ? '-' + selectorPostfix : ''; +function generateInputId(propName, selectorPrefix, selectorPostfix) { + var pretext = selectorPrefix ? selectorPrefix + "-" : ""; + var posttext = selectorPostfix ? "-" + selectorPostfix : ""; return pretext + propName + posttext; } -function generateSelectBoxNameSelector( propName, selectorPrefix ) { - var id = generateInputId( propName, selectorPrefix, 'select-box' ); +function generateSelectBoxNameSelector(propName, selectorPrefix) { + var id = generateInputId(propName, selectorPrefix, "select-box"); var selector = 'select[name="' + id + '"] option:selected'; return selector; } -function generateSelectListTd(options, selectedVal, selectorPrefix, propName, optionStyle) { - var html = ''; - var selectboxId = generateInputId( propName, selectorPrefix, 'select-box' ); - var selectBoxOpenHtml = '"; html += selectBoxOpenHtml; - var getSelectedStr = function( optionVal ) { - return optionVal === selectedVal ? ' selected' : ''; + var getSelectedStr = function (optionVal) { + return optionVal === selectedVal ? " selected" : ""; }; - options.forEach( function( option ) { + options.forEach(function (option) { var optionVal = option.value; - var postfix = optionVal ? optionVal : 'none'; - postfix = sanitizeForHtml( postfix ); + var postfix = optionVal ? optionVal : "none"; + postfix = sanitizeForHtml(postfix); var optionLabel = option.label; - var styleStr = ''; + var styleStr = ""; - if ( optionStyle && optionStyle.length > 0 ) { + if (optionStyle && optionStyle.length > 0) { var styleStr = ' style="'; - optionStyle.forEach( function( style ) { - var val = typeof style.value == 'function' ? - style.value( optionVal ) : optionVal; - styleStr += ( style.name + ': ' + val + ';' ); - } ); + optionStyle.forEach(function (style) { + var val = + typeof style.value == "function" ? style.value(optionVal) : optionVal; + styleStr += style.name + ": " + val + ";"; + }); styleStr += '"'; } - var optionId = generateInputId( propName, selectorPrefix, postfix ); - var optionHtml = ''; + var optionId = generateInputId(propName, selectorPrefix, postfix); + var optionHtml = + '"; html += optionHtml; - } ); + }); - html += ''; + html += ""; - return wrapToTd( html ); + return wrapToTd(html); } function generateLabelTd(mainText, prefix, postfix) { - prefix = prefix ? prefix + ' ' : ''; - postfix = postfix ? ' ' + postfix : ''; + prefix = prefix ? prefix + " " : ""; + postfix = postfix ? " " + postfix : ""; label = prefix + mainText + postfix; - return wrapToTd( '' + label + '' ); + return wrapToTd('' + label + ""); } -function wrapToTd(innerHtml){ - var html = ''; +function wrapToTd(innerHtml) { + var html = ""; html += innerHtml; - html += ''; + html += ""; return html; } function wrapToTr(tdList) { - var html = ''; + var html = ""; - tdList.forEach( function( td ) { + tdList.forEach(function (td) { html += td; - } ); + }); - html += ''; + html += ""; return html; } @@ -3949,49 +6757,74 @@ var FontPropertiesView = Backbone.View.extend({ fontSize: "", fontWeight: "", fontStyle: "", - fontColor: "" + fontColor: "", }, currentFontProperties: undefined, - selectorPrefix: 'font-properties', + selectorPrefix: "font-properties", copyProperties: function () { this.currentFontProperties = _.clone(this.defaultFontProperties); }, initialize: function () { var self = this; self.copyProperties(); - self.defaultFontProperties.generateFontPropertiesRows = function() { - return generateFontPropertiesRows( self.selectorPrefix, '', self.currentFontProperties ); + self.defaultFontProperties.generateFontPropertiesRows = function () { + return generateFontPropertiesRows( + self.selectorPrefix, + "", + self.currentFontProperties + ); }; self.template = _.template($("#font-properties-template").html()); self.template = self.template(self.defaultFontProperties); }, extendProperties: function (eles) { - var chiseInstance = appUtilities.getActiveChiseInstance(); var self = this; var commonProperties = {}; // Get common properties. Note that we check the data field for labelsize property and css field for other properties. - var commonFontSize = parseInt(chiseInstance.elementUtilities.getCommonProperty(eles, "font-size", "data")); - var commonFontWeight = chiseInstance.elementUtilities.getCommonProperty(eles, "font-weight", "data"); - var commonFontFamily = chiseInstance.elementUtilities.getCommonProperty(eles, "font-family", "data"); - var commonFontStyle = chiseInstance.elementUtilities.getCommonProperty(eles, "font-style", "data"); - var commonFontColor = chiseInstance.elementUtilities.getCommonProperty(eles, "color", "data"); - - if( commonFontSize != null ) { + var commonFontSize = parseInt( + chiseInstance.elementUtilities.getCommonProperty( + eles, + "font-size", + "data" + ) + ); + var commonFontWeight = chiseInstance.elementUtilities.getCommonProperty( + eles, + "font-weight", + "data" + ); + var commonFontFamily = chiseInstance.elementUtilities.getCommonProperty( + eles, + "font-family", + "data" + ); + var commonFontStyle = chiseInstance.elementUtilities.getCommonProperty( + eles, + "font-style", + "data" + ); + var commonFontColor = chiseInstance.elementUtilities.getCommonProperty( + eles, + "color", + "data" + ); + + if (commonFontSize != null) { commonProperties.fontSize = commonFontSize; } - if( commonFontWeight != null ) { + if (commonFontWeight != null) { commonProperties.fontWeight = commonFontWeight; } - if( commonFontFamily != null ) { + if (commonFontFamily != null) { commonProperties.fontFamily = commonFontFamily; } - if( commonFontStyle != null ) { + if (commonFontStyle != null) { commonProperties.fontStyle = commonFontStyle; } @@ -3999,7 +6832,11 @@ var FontPropertiesView = Backbone.View.extend({ commonProperties.fontColor = commonFontColor; } - self.currentFontProperties = $.extend({}, this.defaultFontProperties, commonProperties); + self.currentFontProperties = $.extend( + {}, + this.defaultFontProperties, + commonProperties + ); }, render: function (eles) { var self = this; @@ -4007,306 +6844,365 @@ var FontPropertiesView = Backbone.View.extend({ self.template = _.template($("#font-properties-template").html()); self.template = self.template(self.currentFontProperties); $(self.el).html(self.template); - colorPickerUtils.bindPicker2Input('#' + generateInputId('font-color', self.selectorPrefix), null); - $(self.el).modal('show'); - - $(document).off("click", "#set-font-properties").on("click", "#set-font-properties", function (evt) { - - // use the active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - // use the associated cy instance - var cy = chiseInstance.getCy(); - - var data = {}; - - var fontsize = $( '#' + generateInputId( 'font-size', self.selectorPrefix ) ).val(); - var fontfamily = $( generateSelectBoxNameSelector( 'font-family', self.selectorPrefix ) ).val(); - var fontweight = $( generateSelectBoxNameSelector( 'font-weight', self.selectorPrefix ) ).val(); - var fontstyle = $( generateSelectBoxNameSelector( 'font-style', self.selectorPrefix ) ).val(); - var fontcolor = $( '#' + generateInputId( 'font-color', self.selectorPrefix ) ).val(); + colorPickerUtils.bindPicker2Input( + "#" + generateInputId("font-color", self.selectorPrefix), + null + ); + $(self.el).modal("show"); + + $(document) + .off("click", "#set-font-properties") + .on("click", "#set-font-properties", function (evt) { + // use the active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); + + // use the associated cy instance + var cy = chiseInstance.getCy(); + + var data = {}; + + var fontsize = $( + "#" + generateInputId("font-size", self.selectorPrefix) + ).val(); + var fontfamily = $( + generateSelectBoxNameSelector("font-family", self.selectorPrefix) + ).val(); + var fontweight = $( + generateSelectBoxNameSelector("font-weight", self.selectorPrefix) + ).val(); + var fontstyle = $( + generateSelectBoxNameSelector("font-style", self.selectorPrefix) + ).val(); + var fontcolor = $( + "#" + generateInputId("font-color", self.selectorPrefix) + ).val(); + + if (fontsize != "") { + data["font-size"] = parseInt(fontsize); + } - if ( fontsize != '' ) { - data['font-size'] = parseInt(fontsize); - } + if (fontfamily != "") { + data["font-family"] = fontfamily; + } - if ( fontfamily != '' ) { - data['font-family'] = fontfamily; - } + if (fontweight != "") { + data["font-weight"] = fontweight; + } - if ( fontweight != '' ) { - data['font-weight'] = fontweight; - } + if (fontstyle != "") { + data["font-style"] = fontstyle; + } - if ( fontstyle != '' ) { - data['font-style'] = fontstyle; - } + if (fontcolor != "") { + data["color"] = fontcolor; + } - if ( fontcolor != '') { - data['color'] = fontcolor; - } + var keys = Object.keys(data); - var keys = Object.keys(data); + if (keys.length === 0) { + return; + } - if(keys.length === 0) { - return; - } + var validAction = false; // If there is nothing to change the action is not valid - var validAction = false; // If there is nothing to change the action is not valid + for (var i = 0; i < eles.length; i++) { + var ele = eles[i]; - for ( var i = 0; i < eles.length; i++ ) { - var ele = eles[i]; + keys.forEach(function (key, idx) { + // If there is some property to change signal that the action is valid. + if (data[key] != ele.data(key)) { + validAction = true; + } + }); - keys.forEach(function(key, idx) { - // If there is some property to change signal that the action is valid. - if (data[key] != ele.data(key)){ - validAction = true; + if (validAction) { + break; } - }); - - if ( validAction ) { - break; } - } - - if ( validAction === false ) { - $(self.el).modal('toggle'); - return; - } - chiseInstance.changeFontProperties(eles, data); + if (validAction === false) { + $(self.el).modal("toggle"); + return; + } - self.copyProperties(); + chiseInstance.changeFontProperties(eles, data); + self.copyProperties(); - $(self.el).modal('toggle'); - $(document).trigger('saveFontProperties', cy); - }); + $(self.el).modal("toggle"); + $(document).trigger("saveFontProperties", cy); + }); return this; - } + }, }); var InfoboxPropertiesView = Backbone.View.extend({ currentProperties: null, - initialize: function () { - }, + initialize: function () {}, propsMap: { - 'fontFamily': 'font-family', - 'fontSize': 'font-size', - 'fontWeight': 'font-weight', - 'fontStyle': 'font-style', - 'fontColor': 'font-color', - 'borderColor': 'border-color', - 'fillColor': 'background-color', - 'borderWidth': 'border-width', - 'shapeName': 'shape-name' - }, - selectorPrefix: 'infobox-properties', - fontLabelPrefix: 'Font ', - updateCurrentProperties: function(infobox) { + fontFamily: "font-family", + fontSize: "font-size", + fontWeight: "font-weight", + fontStyle: "font-style", + fontColor: "font-color", + borderColor: "border-color", + fillColor: "background-color", + borderWidth: "border-width", + shapeName: "shape-name", + }, + selectorPrefix: "infobox-properties", + fontLabelPrefix: "Font ", + updateCurrentProperties: function (infobox) { var self = this; var infoboxStyle = infobox.style; self.currentProperties = {}; - for ( var prop in this.propsMap ) { - var mappedProp = this.propsMap[ prop ]; - self.currentProperties[ prop ] = infoboxStyle[ mappedProp ]; + for (var prop in this.propsMap) { + var mappedProp = this.propsMap[prop]; + self.currentProperties[prop] = infoboxStyle[mappedProp]; } - self.currentProperties.generateSelectShapeRow = function() { + self.currentProperties.generateSelectShapeRow = function () { var chiseInstance = appUtilities.getActiveChiseInstance(); var cy = appUtilities.getActiveCy(); var elementUtilities = chiseInstance.elementUtilities; - var parent = chiseInstance.classes.getAuxUnitClass(infobox).getParent(infobox, cy); + var parent = chiseInstance.classes + .getAuxUnitClass(infobox) + .getParent(infobox, cy); var shapeListFcn; switch (infobox.clazz) { - case 'state variable': + case "state variable": shapeListFcn = elementUtilities.getStateVarShapeOptions; break; - case 'unit of information': + case "unit of information": shapeListFcn = elementUtilities.getUnitOfInfoShapeOptions; break; + case "residue variable": + shapeListFcn = elementUtilities.getResidueShapeOptions; + break; + case "binding region": + shapeListFcn = elementUtilities.getBindingRegionShapeOptions; + break; } - shapeList = shapeListFcn( parent.data( 'class' ) ); + shapeList = shapeListFcn(parent.data("class")); - if ( shapeList.length <= 1 ) { + if (shapeList.length <= 1) { return ""; } var options = []; - shapeList.forEach( function( shapeName ) { - options.push( { + shapeList.forEach(function (shapeName) { + options.push({ value: shapeName, - label: shapeName - } ); - } ); + label: shapeName, + }); + }); - return wrapToTr( [ generateLabelTd( 'Shape', null ), - generateSelectListTd( options, self.currentProperties.shapeName, self.selectorPrefix, 'shape-name' ) ] ); + return wrapToTr([ + generateLabelTd("Shape", null), + generateSelectListTd( + options, + self.currentProperties.shapeName, + self.selectorPrefix, + "shape-name" + ), + ]); }; - self.currentProperties.generateFontPropertiesRows = function() { - return generateFontPropertiesRows( self.selectorPrefix, self.fontLabelPrefix, self.currentProperties ); + self.currentProperties.generateFontPropertiesRows = function () { + return generateFontPropertiesRows( + self.selectorPrefix, + self.fontLabelPrefix, + self.currentProperties + ); }; - self.currentProperties.generateSetAsDefaultText = function() { + self.currentProperties.generateSetAsDefaultText = function () { var chiseInstance = appUtilities.getActiveChiseInstance(); var cy = appUtilities.getActiveCy(); - var parent = chiseInstance.classes.getAuxUnitClass(infobox).getParent(infobox, cy); - var classInfo = appUtilities.transformClassInfo( parent.data('class') ); + var parent = chiseInstance.classes + .getAuxUnitClass(infobox) + .getParent(infobox, cy); + var classInfo = appUtilities.transformClassInfo(parent.data("class")); var infoboxInfoMap = { - 'state variable': 'State Variable', - 'unit of information': 'Unit of Information' + "state variable": "State Variable", + "unit of information": "Unit of Information", + "residue variable": "Residue Variable", + "binding region": "Binding Region", }; - var infoboxInfo = infoboxInfoMap[ infobox.clazz ]; + var infoboxInfo = infoboxInfoMap[infobox.clazz]; - return 'Set as Default for ' + infoboxInfo + ' of ' + classInfo; - } + return "Set as Default for " + infoboxInfo + " of " + classInfo; + }; }, render: function (node, index) { var self = this; - var infoboxObj = node.data('statesandinfos')[index]; + var infoboxObj = node.data("statesandinfos")[index]; var inputTypes = { - 'font-size': 'regular', - 'font-family': 'selectbox', - 'font-weight': 'selectbox', - 'font-style': 'selectbox', - 'font-color': 'regular', - 'border-color': 'regular', - 'background-color': 'regular', - 'border-width': 'regular', - 'shape-name': 'selectbox' + "font-size": "regular", + "font-family": "selectbox", + "font-weight": "selectbox", + "font-style": "selectbox", + "font-color": "regular", + "border-color": "regular", + "background-color": "regular", + "border-width": "regular", + "shape-name": "selectbox", }; self.updateCurrentProperties(infoboxObj); self.template = _.template($("#infobox-properties-template").html()); self.template = self.template(self.currentProperties); $(self.el).html(self.template); - colorPickerUtils.bindPicker2Input('#infobox-properties-border-color', null); - colorPickerUtils.bindPicker2Input('#infobox-properties-background-color', null); - colorPickerUtils.bindPicker2Input('#' + generateInputId('font-color', self.selectorPrefix), null); - - $(self.el).modal('show'); + colorPickerUtils.bindPicker2Input("#infobox-properties-border-color", null); + colorPickerUtils.bindPicker2Input( + "#infobox-properties-background-color", + null + ); + colorPickerUtils.bindPicker2Input( + "#" + generateInputId("font-color", self.selectorPrefix), + null + ); + + $(self.el).modal("show"); function readInfoboxProps() { var props = {}; - for ( prop in self.propsMap ) { - var mappedProp = self.propsMap[ prop ]; + for (prop in self.propsMap) { + var mappedProp = self.propsMap[prop]; var val; - if ( inputTypes[ mappedProp ] == 'regular' ) { - val = $( '#' + generateInputId( mappedProp, self.selectorPrefix ) ).val(); - } - else if ( inputTypes[ mappedProp ] == 'selectbox' ) { - val = $( generateSelectBoxNameSelector( mappedProp, self.selectorPrefix ) ).val(); + if (inputTypes[mappedProp] == "regular") { + val = $("#" + generateInputId(mappedProp, self.selectorPrefix)).val(); + } else if (inputTypes[mappedProp] == "selectbox") { + val = $( + generateSelectBoxNameSelector(mappedProp, self.selectorPrefix) + ).val(); } - props[ mappedProp ] = val; + props[mappedProp] = val; } return props; } - $(document).off("click", "#set-infobox-properties").on("click", "#set-infobox-properties", function( evt ) { - var newProps = readInfoboxProps(); + $(document) + .off("click", "#set-infobox-properties") + .on("click", "#set-infobox-properties", function (evt) { + var newProps = readInfoboxProps(); - appUtilities.getActiveChiseInstance().updateInfoboxStyle(node, index, newProps); + appUtilities + .getActiveChiseInstance() + .updateInfoboxStyle(node, index, newProps); - $(self.el).modal('toggle'); - }); - - $(document).off("click", "#set-as-default-infobox-properties").on("click", "#set-as-default-infobox-properties", function( evt ) { + $(self.el).modal("toggle"); + }); - if (typeof appUtilities.stagedElementStyles === 'undefined') { - appUtilities.stagedElementStyles = []; - } - - var chiseInstance = appUtilities.getActiveChiseInstance(); - var cy = appUtilities.getActiveCy(); - var parent = chiseInstance.classes.getAuxUnitClass(infoboxObj).getParent(infoboxObj, cy); - var parentClass = parent.data('class'); - - - var updates = readInfoboxProps(); - var currentDefaults = chiseInstance.elementUtilities.getDefaultProperties( parentClass )[ infoboxObj.clazz ]; - var infoboxStyle = $.extend( {}, currentDefaults, updates ); - chiseInstance.setDefaultProperty( parentClass, infoboxObj.clazz, infoboxStyle ); - - var stagedElement = appUtilities.stagedElementStyles.find(b => b.element == parentClass); - if(stagedElement) - { - var stagedElementInfoboxStyles = stagedElement.infoBoxStyles.find(b=>b.clazz == infoboxObj.clazz); - if(stagedElementInfoboxStyles) - { - stagedElementInfoboxStyles.styles = infoboxStyle; - } - else - { - stagedElement.infoBoxStyles.push({clazz:infoboxObj.clazz,styles:infoboxStyle}); + $(document) + .off("click", "#set-as-default-infobox-properties") + .on("click", "#set-as-default-infobox-properties", function (evt) { + if (typeof appUtilities.stagedElementStyles === "undefined") { + appUtilities.stagedElementStyles = []; } - } - else - { - appUtilities.stagedElementStyles.push({element : parentClass, type:'node',styles:[], infoBoxStyles:[{clazz:infoboxObj.clazz,styles:infoboxStyle}]}); - } - - }); - } + var chiseInstance = appUtilities.getActiveChiseInstance(); + var cy = appUtilities.getActiveCy(); + var parent = chiseInstance.classes + .getAuxUnitClass(infoboxObj) + .getParent(infoboxObj, cy); + var parentClass = parent.data("class"); + + var updates = readInfoboxProps(); + var currentDefaults = + chiseInstance.elementUtilities.getDefaultProperties(parentClass)[ + infoboxObj.clazz + ]; + var infoboxStyle = $.extend({}, currentDefaults, updates); + chiseInstance.setDefaultProperty( + parentClass, + infoboxObj.clazz, + infoboxStyle + ); + + var stagedElement = appUtilities.stagedElementStyles.find( + (b) => b.element == parentClass + ); + if (stagedElement) { + var stagedElementInfoboxStyles = stagedElement.infoBoxStyles.find( + (b) => b.clazz == infoboxObj.clazz + ); + if (stagedElementInfoboxStyles) { + stagedElementInfoboxStyles.styles = infoboxStyle; + } else { + stagedElement.infoBoxStyles.push({ + clazz: infoboxObj.clazz, + styles: infoboxStyle, + }); + } + } else { + appUtilities.stagedElementStyles.push({ + element: parentClass, + type: "node", + styles: [], + infoBoxStyles: [{ clazz: infoboxObj.clazz, styles: infoboxStyle }], + }); + } + }); + }, }); var AnnotationListView = Backbone.View.extend({ elements: [], - el: '#annotations-container', + el: "#annotations-container", initialize: function () { - this.listenTo(this.model, 'add', this.addAnnotationElementView); - this.listenTo(this.model, 'destroy', this.resetAndPopulate); + this.listenTo(this.model, "add", this.addAnnotationElementView); + this.listenTo(this.model, "destroy", this.resetAndPopulate); this.resetAndPopulate(); }, events: { - 'click #annotations-add-button': 'createAnnotation' + "click #annotations-add-button": "createAnnotation", }, - resetAndPopulate: function() { + resetAndPopulate: function () { this.elements = []; this.render(); // populate from the model var self = this; - this.model.forEach(function(item){ + this.model.forEach(function (item) { self.addAnnotationElementView(item); }); }, - createAnnotation: function(e) { - var newAnnot = this.model.create({cyParent: this.model.cyParent}); + createAnnotation: function (e) { + var newAnnot = this.model.create({ cyParent: this.model.cyParent }); }, - addAnnotationElementView: function(annotationModel) { - var view = new AnnotationElementView({model: annotationModel}); + addAnnotationElementView: function (annotationModel) { + var view = new AnnotationElementView({ model: annotationModel }); this.elements.push(view); - this.$el.find('p#annotations-small-helptext').remove(); - this.$el.children('div').first().append(view.render().el); + this.$el.find("p#annotations-small-helptext").remove(); + this.$el.children("div").first().append(view.render().el); }, render: function () { this.template = _.template($("#annotation-list-template").html()); this.$el.empty(); var renderedElement = []; - for(var i=0; i new Set(array).size !== array.length; + if (hasDuplicate(geneSymbolsArray)) { + new DuplicateGeneGiven({ + el: "#prompt-duplicateGeneGiven-table", + gene: "", + }).render(); + return true; + } + return false; +} + +async function handleGeneDoesNotExist(geneSymbolsArray) { + const chiseInstance = appUtilities.getActiveChiseInstance(); + for (gene of geneSymbolsArray) { + try { + let q = `https://www.pathwaycommons.org/pc2/search?q=${gene}`; + + const data = await $.ajax({ + type: "get", + url: "/utilities/testURL", + data: { url: q }, + }); + let { numHits } = JSON.parse(data.response.body); + if (numHits === 0) { + new GeneNotExist({ + el: "#prompt-geneNotExist-table", + gene, + }).render(); + return true; + } + } catch (error) { + new PromptRequestTimedOutView({ + el:'#prompt-requestTimedOut-table', + }).render(); + return true; + } + } + return false; +} + module.exports = { -// BioGeneView: BioGeneView, + // BioGeneView: BioGeneView, ChemicalView: ChemicalView, LayoutPropertiesView: LayoutPropertiesView, ColorSchemeInspectorView: ColorSchemeInspectorView, @@ -4459,14 +7411,20 @@ module.exports = { PathsFromToQueryView: PathsFromToQueryView, CommonStreamQueryView: CommonStreamQueryView, PathsByURIQueryView: PathsByURIQueryView, + MapByWPIDQueryView: MapByWPIDQueryView, + MapByReactomeIDQueryView: MapByReactomeIDQueryView, PromptSaveView: PromptSaveView, FileSaveView: FileSaveView, - SaveUserPreferencesView:SaveUserPreferencesView, - LoadUserPreferencesView:LoadUserPreferencesView, + SaveUserPreferencesView: SaveUserPreferencesView, + LoadUserPreferencesView: LoadUserPreferencesView, PromptConfirmationView: PromptConfirmationView, PromptMapTypeView: PromptMapTypeView, PromptInvalidFileView: PromptInvalidFileView, + PromptInvalidTypeWarning: PromptInvalidTypeWarning, + SifMapWarning: SifMapWarning, + PromtErrorPD2AF: PromtErrorPD2AF, PromptFileConversionErrorView: PromptFileConversionErrorView, + ExportErrorView: ExportErrorView, ReactionTemplateView: ReactionTemplateView, GridPropertiesView: GridPropertiesView, FontPropertiesView: FontPropertiesView, @@ -4474,9 +7432,13 @@ module.exports = { AnnotationListView: AnnotationListView, AnnotationElementView: AnnotationElementView, PromptInvalidURIView: PromptInvalidURIView, + PromptInvalidWPIDView: PromptInvalidWPIDView, + PromptInvalidReactomeIDView: PromptInvalidReactomeIDView, PromptInvalidURIWarning: PromptInvalidURIWarning, + PromptInvalidWPIDWarning: PromptInvalidWPIDWarning, + PromptInvalidReactomeIDWarning: PromptInvalidReactomeIDWarning, PromptInvalidURLWarning: PromptInvalidURLWarning, PromptInvalidImageWarning: PromptInvalidImageWarning, PromptInvalidEdgeWarning: PromptInvalidEdgeWarning, - PromptSbmlConversionErrorView : PromptSbmlConversionErrorView + PromptSbmlConversionErrorView: PromptSbmlConversionErrorView, }; diff --git a/app/js/color-picker-utils.js b/app/js/color-picker-utils.js index f097c793e..b18ed68c6 100644 --- a/app/js/color-picker-utils.js +++ b/app/js/color-picker-utils.js @@ -38,7 +38,6 @@ exports.bindPicker2Input = function (inputElemId, onModalClosed) { $(inputElemId).off('click'); $(inputElemId).on('click', function (e) { activeColorInputElemId = inputElemId; - debugger; picker[0].color = $(inputElemId).val(); // do not open OS dependent color picker e.preventDefault(); diff --git a/app/js/fill-chemical-container.js b/app/js/fill-chemical-container.js index b2e32fc34..4212feef8 100644 --- a/app/js/fill-chemical-container.js +++ b/app/js/fill-chemical-container.js @@ -3,7 +3,7 @@ var _ = require('underscore'); var ChemicalView = require('./backbone-views').ChemicalView; -var fillChemicalContainer = function (node) { +var fillChemicalContainer = function (node, dataFetchSuccessCallback) { var geneClass = node.data('class'); if (geneClass != 'simple chemical' && geneClass != 'BA simple chemical' && geneClass != 'SIF simple chemical') { $("#chemical-container").html(""); @@ -40,7 +40,11 @@ var fillChemicalContainer = function (node) { el: '#chemical-container', model: json.response.docs[0] }).render(); - } + } + else { + $('#chemical-container').html("No information found!"); + } + dataFetchSuccessCallback(); } else { $('#chemical-container').html("No additional information available for the selected node!"); diff --git a/app/js/inspector-utilities.js b/app/js/inspector-utilities.js index 54ed5c966..c535d9313 100644 --- a/app/js/inspector-utilities.js +++ b/app/js/inspector-utilities.js @@ -91,6 +91,8 @@ inspectorUtilities.fillInspectorStateAndInfos = function (nodes, stateAndInfos, //first empty the state variables and infos data in inspector $("#inspector-state-variables").html(""); $("#inspector-unit-of-informations").html(""); + $("#inspector-residue-variable").html(""); + $("#inspector-binding-region").html(""); function get_text_width(txt, font) { this.element = document.createElement('canvas'); @@ -153,6 +155,18 @@ inspectorUtilities.fillInspectorStateAndInfos = function (nodes, stateAndInfos, + i + "' class='pointer-button' src='app/img/toolbar/delete-simple.svg'>"; } + if (chiseInstance.elementUtilities.canHaveOneUnitOfInformation(nodes)) { + uioHtml += ""; + } + + /* + if (chiseInstance.elementUtilities.canHaveOneUnitOfInformation(nodes)) { + uioHtml += ""; + } + */ + uioHtml += ""; $('#inspector-unit-of-informations').append( uioHtml ); @@ -161,6 +175,51 @@ inspectorUtilities.fillInspectorStateAndInfos = function (nodes, stateAndInfos, chiseInstance.changeStateOrInfoBox(nodes[0], i, $(this).val()); }); } + else if (state.clazz == "residue variable") + { + $("#inspector-residue-variable").append( + "
    " + + // state variable - variable + + "" + + + getInfoboxDetailsBtnHtml( i ) + + + "" + + "
    " + ); + + $("#inspector-residue-variable-variable" + i).unbind('change').on('change', function () { + chiseInstance.changeStateOrInfoBox(nodes, i, $(this).val(), 'variable'); + }); + } + + else if (state.clazz == "binding region") + { + $("#inspector-binding-region").append( + "
    " + + // state variable - variable + + "" + + + getInfoboxDetailsBtnHtml( i ) + + + "" + + "
    " + ); + + $("#inspector-binding-region-value" + i).unbind('change').on('change', function () { + chiseInstance.changeStateOrInfoBox(nodes, i, $(this).val(), 'value'); + }); + + $("#inspector-binding-region-variable" + i).unbind('change').on('change', function () { + chiseInstance.changeStateOrInfoBox(nodes, i, $(this).val(), 'variable'); + }); + } + + $("#inspector-delete-state-and-info" + i).unbind('click').click(function (event) { chiseInstance.removeStateOrInfoBox(nodes, i); @@ -173,10 +232,27 @@ inspectorUtilities.fillInspectorStateAndInfos = function (nodes, stateAndInfos, })(i); } $("#inspector-state-variables").append(""); + $("#inspector-residue-variable").append(""); + $("#inspector-binding-region").append(""); + if (chiseInstance.elementUtilities.canHaveMultipleUnitOfInformation(nodes)){ $("#inspector-unit-of-informations").append(""); }; + + //Get number of unit information already added: + var unitOfInfoCount = 0 + for ( var i = 0; i < stateAndInfos.length; i++) + { + if( stateAndInfos[i].clazz === 'unit of information') + { + unitOfInfoCount++; + } + } + if (chiseInstance.elementUtilities.canHaveOneUnitOfInformation(nodes) && unitOfInfoCount == 0){ + $("#inspector-unit-of-informations").append(""); + }; + $("#inspector-add-state-variable").click(function () { var obj = appUtilities.getDefaultEmptyInfoboxObj( 'state variable' ); @@ -185,6 +261,20 @@ inspectorUtilities.fillInspectorStateAndInfos = function (nodes, stateAndInfos, inspectorUtilities.handleSBGNInspector(); }); + $("#inspector-add-residue-variable-variable").click(function () { + + var obj = appUtilities.getDefaultEmptyInfoboxObj( 'residue variable' ); + chiseInstance.addStateOrInfoBox(nodes, obj); + inspectorUtilities.handleSBGNInspector(); + }); + + $("#inspector-add-binding-region-variable").click(function () { + + var obj = appUtilities.getDefaultEmptyInfoboxObj( 'binding region' ); + chiseInstance.addStateOrInfoBox(nodes, obj); + inspectorUtilities.handleSBGNInspector(); + }); + $("#inspector-add-unit-of-information").click(function () { var obj = appUtilities.getDefaultEmptyInfoboxObj( 'unit of information' ); @@ -228,7 +318,7 @@ inspectorUtilities.handleSBGNInspector = function () { } var classInfo = chiseInstance.elementUtilities.getCommonProperty(selectedEles, function(ele) { - return ele.data('class').replace(' multimer', ''); + return ele.data('class').replace(' multimer', '').replace('active ', '').replace('hypothetical ', ''); }) || ""; classInfo = appUtilities.transformClassInfo( classInfo ); @@ -253,8 +343,11 @@ inspectorUtilities.handleSBGNInspector = function () { var fillSiteLocations; var multimerCheck; var clonedCheck; + var activeCheck; var commonIsMultimer; var commonIsCloned; + var commonIsActive; + var commonIsHypothetical; var commonStateAndInfos; var commonSBGNCardinality; var imageFromURL; @@ -285,12 +378,12 @@ inspectorUtilities.handleSBGNInspector = function () { if (chiseInstance.elementUtilities.trueForAllElements(selectedEles, chiseInstance.elementUtilities.canHaveSBGNLabel)) { html += "" + "Label" + "" - + "" + ""; + + "" + ""; } - // if at least one node is not a non-resizable parent node - if( selectedEles.filter(':parent').length != selectedEles.length ) { + // if at least one node is a parent node don't show width and height editing fields + if( selectedEles.filter(':parent').length < 1 ) { html += "" + "Width" + "" + "" + "Border Width" + "" + ""; } + if (chiseInstance.elementUtilities.trueForAllElements(selectedEles, chiseInstance.elementUtilities.canHaveResidueVariable)) { + fillStateAndInfos = true; + html += "
    "; + html += "" + "Residue Variables" + "" + + ""; + } + + if (chiseInstance.elementUtilities.trueForAllElements(selectedEles, chiseInstance.elementUtilities.canHaveBindingRegion)) { + fillStateAndInfos = true; + html += "
    "; + html += "" + "Binding Region" + "" + + ""; + } + if (chiseInstance.elementUtilities.canHaveUnitOfInformation(selectedEles)) { fillStateAndInfos = true; var unit = chiseInstance.elementUtilities.canHaveMultipleUnitOfInformation(selectedEles) ? "Units" : "Unit"; + var unit = chiseInstance.elementUtilities.canHaveOneUnitOfInformation(selectedEles) ? "Unit" : unit; html += "
    "; html += "" + "" + unit + " of Information" + "" + ""; @@ -424,12 +532,22 @@ inspectorUtilities.handleSBGNInspector = function () { commonIsCloned = chiseInstance.elementUtilities.getCommonProperty(selectedEles, function(ele){ return ele.data('clonemarker') === true; }); + commonIsActive = chiseInstance.elementUtilities.getCommonProperty(selectedEles, function(ele){ + return ele.data('class').startsWith('active '); + }); + + commonIsHypothetical = chiseInstance.elementUtilities.getCommonProperty(selectedEles, function(ele){ + return ele.data('class').includes('hypothetical'); + }); multimerCheck = chiseInstance.elementUtilities.trueForAllElements(selectedEles, chiseInstance.elementUtilities.canBeMultimer); clonedCheck = chiseInstance.elementUtilities.trueForAllElements(selectedEles, chiseInstance.elementUtilities.canBeCloned); + activeCheck = chiseInstance.elementUtilities.trueForAllElements(selectedEles, chiseInstance.elementUtilities.canBeActive); + hypotheticalCheck = chiseInstance.elementUtilities.trueForAllElements(selectedEles, chiseInstance.elementUtilities.canBeHypothetical); multimerCheck = multimerCheck?multimerCheck:false; clonedCheck = clonedCheck?clonedCheck:false; + activeCheck = activeCheck?activeCheck:false; if (multimerCheck || clonedCheck) { html += "
    "; @@ -440,11 +558,21 @@ inspectorUtilities.handleSBGNInspector = function () { + ""; } + if (activeCheck) { + html += "" + "Active" + "" + + ""; + } + if (clonedCheck) { html += "" + "Cloned" + "" + ""; } + if (hypotheticalCheck) { + html += "" + "Hypothetical" + "" + + ""; + } + /* * If all selected elements can have ports add a selectbox to enable setting their ports ordering. */ @@ -578,11 +706,18 @@ inspectorUtilities.handleSBGNInspector = function () { if (selectedEles.length === 1) { var geneClass = selectedEles[0]._private.data.class; - function addCollapsibleSection(identifier, title, hasSubtitleSection) { - html = ""+ - "
    "; + function addCollapsibleSection(identifier, title, hasSubtitleSection, openByDefault) { + + var panelHeadingClass = openByDefault ? "panel-heading" : "panel-heading collapsed"; + var panelHeadingId = identifier + "-heading"; + var collapsibleClass = openByDefault ? "panel-collapse collapse in" : "panel-collapse collapse"; + var collapsibleId = identifier + "-collapsible"; + + html = "
    " + + "

    " + title + "

    " + + "
    "; + if (hasSubtitleSection) { html += "
    "; } @@ -598,18 +733,22 @@ inspectorUtilities.handleSBGNInspector = function () { geneClass === 'BA macromolecule' || geneClass === 'BA nucleic acid feature' || geneClass === 'BA unspecified entity' || geneClass === 'SIF macromolecule') { - addCollapsibleSection("biogene", "Properties from GeneCards", true); + addCollapsibleSection("biogene", "Properties from GeneCards", true, true); fillBioGeneContainer(selectedEles[0]); } if (geneClass === 'simple chemical' || geneClass === 'BA simple chemical' || geneClass === 'SIF simple chemical') { - addCollapsibleSection("chemical", "Properties from ChEBI", true); - fillChemicalContainer(selectedEles[0]); + addCollapsibleSection("chemical", "Properties from ChEBI", true, false); + fillChemicalContainer(selectedEles[0], function () { //callback on successful fetch, auto open collapsed panel + $("#chemical-collapsible").removeClass("collapse"); + $("#chemical-collapsible").addClass("collapse in"); + $("#chemical-heading").removeClass("collapsed"); + }); } // annotations handling part - addCollapsibleSection("annotations", "Custom Properties", false); + addCollapsibleSection("annotations", "Custom Properties", false, false); annotHandler.fillAnnotationsContainer(selectedEles[0]); } @@ -626,6 +765,13 @@ inspectorUtilities.handleSBGNInspector = function () { $('#inspector-is-clone-marker').attr('checked', true); } + if (activeCheck && commonIsActive) { + $('#inspector-is-active').attr('checked', true); + } + if (hypotheticalCheck && commonIsHypothetical) { + $('#inspector-is-hypothetical').attr('checked', true); + } + if(imageFromURL){ $('#inspector-image-from-url').attr('checked', true); } @@ -726,7 +872,6 @@ inspectorUtilities.handleSBGNInspector = function () { type: 'GET', data: {url: url}, success: function(data){ - console.log(data); // here we can get 404 as well, for example, so there are still error cases to handle if (!data.error && data.response.statusCode == 200 && typeof applyBackground === 'function') applyBackground(node, bgObj); @@ -843,6 +988,8 @@ inspectorUtilities.handleSBGNInspector = function () { $('#inspector-set-as-default-button').on('click', function () { var multimer; + var active; + var hypothetical; var selected = selectedEles[0]; var sbgnclass = selected.data('class'); if (sbgnclass.endsWith(' multimer')) { @@ -853,6 +1000,22 @@ inspectorUtilities.handleSBGNInspector = function () { multimer = false; } + if (sbgnclass.startsWith('active ')) { + sbgnclass = sbgnclass.replace('active ', ''); + active = true; + } + else { + active = false; + } + + if (sbgnclass.includes('hypothetical')) { + sbgnclass = sbgnclass.replace('hypothetical ', ''); + hypothetical = true; + } + else { + hypothetical = false; + } + var nameToVal = { 'width': selected.width(), 'height': selected.height(), @@ -874,6 +1037,16 @@ inspectorUtilities.handleSBGNInspector = function () { nameToVal['multimer'] = multimer; } + // Push this action if the node can be active + if (chiseInstance.elementUtilities.canBeActive(sbgnclass)) { + nameToVal['active'] = active; + } + + // Push this action if the node can be hypothetical + if (chiseInstance.elementUtilities.canBeHypothetical(sbgnclass)) { + nameToVal['hypothetical'] = hypothetical; + } + // Push this action if the node can be cloned if (chiseInstance.elementUtilities.canBeCloned(sbgnclass)) { nameToVal['clonemarker'] = selected.data('clonemarker') ? true: false; @@ -937,14 +1110,9 @@ inspectorUtilities.handleSBGNInspector = function () { } var useAspectRatio = appUtilities.nodeResizeUseAspectRatio; - - // trigger resize event accordingly - selectedEles.forEach(function(node) { - cy.trigger('noderesize.resizestart', [null, node]); - chiseInstance.resizeNodes(node, w, h, useAspectRatio); - cy.trigger('noderesize.resizeend', [null, node]); - }); - + + chiseInstance.resizeNodes(selectedEles, w, h, useAspectRatio); + // if aspect ratio used, must correctly update the other side length if(useAspectRatio){ if( $(this).attr('id') === 'inspector-node-width' ) { @@ -985,7 +1153,7 @@ inspectorUtilities.handleSBGNInspector = function () { $(this).attr('title', title); //Refresh grapples when the lock icon is clicked - cy.nodeResize('get').refreshGrapples(); + cy.nodeEditing('get').refreshGrapples(); }); $('#inspector-is-multimer').on('click', function () { @@ -996,6 +1164,17 @@ inspectorUtilities.handleSBGNInspector = function () { chiseInstance.setCloneMarkerStatus(selectedEles, $('#inspector-is-clone-marker').prop('checked')); }); + $('#inspector-is-active').on('click', function () { + chiseInstance.setActiveStatus(selectedEles, $('#inspector-is-active').prop('checked')); + // console.log("inspector-is-active clicked") + //chiseInstance.setMultimerStatus(selectedEles, $('#inspector-is-active').prop('checked')); + }); + + $('#inspector-is-hypothetical').on('click', function () { + chiseInstance.setHypotheticalStatus(selectedEles, $('#inspector-is-hypothetical').prop('checked')); + //chiseInstance.setMultimerStatus(selectedEles, $('#inspector-is-active').prop('checked')); + }); + $("#inspector-label").on('change', function () { var lines = $(this).val().trim(); var current_label_data; @@ -1417,7 +1596,7 @@ inspectorUtilities.fixRadioButtons = function (errorCode,eles,cy) { html +="

    To fix, reverse the consumption arc:

    "; } */ else if(errors[currentPage].pattern == "pd10103") { - html += "

    To fix, split the source and sink glyph for each consumption arc:

    "; + html += "

    To fix, split the empty set glyph for each consumption arc:

    "; }else if(radioButtonRules.includes(errors[currentPage].pattern)) { var params = { handled: handled }; html= inspectorUtilities.handleRadioButtons(errors[currentPage].pattern,html,eles,cy,params); @@ -1431,7 +1610,7 @@ inspectorUtilities.fixRadioButtons = function (errorCode,eles,cy) { } else if(errors[currentPage].pattern == "pd10107") { - html += "

    To fix, split the source and sink glyph for each production arc:

    "; + html += "

    To fix, split the empty set glyph for each production arc:

    "; var connectedEdges = eles.connectedEdges().filter('[class="production"]'); for (var i = 0; i < connectedEdges.length; i++) { viewUtilitilesInstance.highlight(connectedEdges[i], 1); diff --git a/app/js/keyboard-shortcuts.js b/app/js/keyboard-shortcuts.js index b8a10b540..5222c94de 100644 --- a/app/js/keyboard-shortcuts.js +++ b/app/js/keyboard-shortcuts.js @@ -80,6 +80,15 @@ module.exports = function () { // when cy param is not specified uses active cy instance appUtilities.disableDragAndDropMode(); }, "keyup"); + + mt.bind("alt", function() { + appUtilities.altKeyDown = true; + }, "keydown"); + + mt.bind("alt", function () { + appUtilities.altKeyDown = null; + }, "keyup"); + mt.bind(["esc"], function () { // use active cy instance diff --git a/app/js/tutorial.js b/app/js/tutorial.js index 3706416a1..97ceeebf6 100644 --- a/app/js/tutorial.js +++ b/app/js/tutorial.js @@ -33,6 +33,12 @@ tutorial.introduction = function(checkCookie){

    Newt Basics

    ' }, + { + intro: '

    Welcome to

    \n\ +
    \n\ + \n\ +

    Newt Advanced

    ' + }, { intro: '

    Welcome to

    \n\
    \n\ @@ -90,7 +96,7 @@ tutorial.UIGuide = function(){ { element: document.getElementsByClassName('inside-menu')[0], intro: '

    This group is for file operations

    \n\ -

    - New File
    - Load File
    - Save File

    ' +

    - New File
    - Open File
    - Save File

    ' }, { element: document.getElementsByClassName('inside-menu')[1], @@ -99,8 +105,10 @@ tutorial.UIGuide = function(){ - Select/Edit: Select a particular object to edit its properties.
    \n\ - Add Node: Create a new node with type that is currently selected in the palette.
    \n\ - Add Edge: Create a new edge with type that is currently selected in the palette.
    \n\ - - Activate Marquee Zoom: Mark the zoom area by using Shift + left click and drag.

    \n\ + - Activate Marquee Zoom: Mark the zoom area by using Shift + left click and drag.
    \n\ + - Activate Lasso Tool: Mark the area of selection in free form. Start with a left click, end with another left click.

    \n\

    Remaining edit operations:
    \n\ + - SBGN Bricks: Add using SBGN Bricks.
    \n\ - Delete Selected Simple
    \n\ - Delete Selected Smart: Perform deletion on selected objects and associated neighbors, leaving the map intact w.r.t. the map type.
    \n\ - Validate Map
    \n\ diff --git a/app/main.js b/app/main.js index 8f3b59e97..97b18b32b 100644 --- a/app/main.js +++ b/app/main.js @@ -25,9 +25,10 @@ var cyViewUtilities = require('cytoscape-view-utilities'); var cyEdgehandles = require('cytoscape-edgehandles'); var cyGridGuide = require('cytoscape-grid-guide'); var cyAutopanOnDrag = require('cytoscape-autopan-on-drag'); -var cyNodeResize = require('cytoscape-node-resize'); +var cyNodeEditing = require('cytoscape-node-editing'); var cyPopper = require('cytoscape-popper'); var cyLayoutUtilities = require('cytoscape-layout-utilities'); +var cyGraphAlgos = require('cytoscape-graph-algos'); // Register cy extensions cyPanzoom( cytoscape, $ ); @@ -35,16 +36,17 @@ cyPanzoom( cytoscape, $ ); cyFcose( cytoscape ); cyUndoRedo( cytoscape ); cyClipboard( cytoscape, $ ); -cyContextMenus( cytoscape, $ ); -cyExpandCollapse( cytoscape, $ ); -cyEdgeEditing( cytoscape, $ ); -cyViewUtilities( cytoscape, $ ); +cyContextMenus( cytoscape ); +cyExpandCollapse( cytoscape ); +cyEdgeEditing( cytoscape, $, konva ); +cyViewUtilities( cytoscape ); cyEdgehandles( cytoscape ); -cyGridGuide( cytoscape, $ ); +cyGridGuide( cytoscape ); cyAutopanOnDrag( cytoscape ); -cyNodeResize( cytoscape, $, konva ); +cyNodeEditing( cytoscape, $, konva ); cyPopper( cytoscape ); cyLayoutUtilities( cytoscape ); +cyGraphAlgos( cytoscape ); // Libraries to pass sbgnviz var libs = {}; diff --git a/app/samples/PTK6_Activates_STAT3.nwt b/app/samples/PTK6_Activates_STAT3.nwt new file mode 100644 index 000000000..58f4f4ad0 --- /dev/null +++ b/app/samples/PTK6_Activates_STAT3.nwt @@ -0,0 +1,547 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + 14 + 10 + 1.25 + true + regular + false + false + false + true + true + true + false + true + false + true + opposed_red_blue + solid + PTK6 Activates STAT3 + + #0B9BCD + 2 + false + + + + + + 340.90775759776295 + 181.31795863479397 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + 73.25 + 43.25 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + 73.25 + 96.5 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + 758.2389330850008 + 383.95044206415537 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + + + 156.5 + 96.5 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + + + + + 73.25 + 43.25 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + + + 73.25 + 96.5 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + + + + + + + + + + + 73.25 + 96.5 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + + + 73.25 + 96.5 + 0 + 0 + 0 + 0 + 0 + 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + + bezier + + + + + + \ No newline at end of file diff --git a/app/samples/RTN4-controllers-and-binding-proteins.nwt b/app/samples/RTN4-controllers-and-binding-proteins.nwt index d51403794..d0394bd94 100644 --- a/app/samples/RTN4-controllers-and-binding-proteins.nwt +++ b/app/samples/RTN4-controllers-and-binding-proteins.nwt @@ -27,7 +27,8 @@ - + + 0 14 10 @@ -48,7 +49,7 @@ solid RTN4 controllers and binding proteins - +

    -
    - -
    - -
    -
    -
    - -
    - -
    - -
    -
    - -
    -
    - -
     
    -
    - -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    - - - -
    - -
     
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    - - - - -
    - -
    - - - -
    - -
     
    -
    -
    - - -
    - - -
    - + + + + + + + + Newt Editor + + + + + + + + + + + + + + + + + + + +
    +
    + +
    + +
    +
    +
    + +
    -
    -
    - +
    + +
    +
    + +
    +
    -
    -
    +
     
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
     
    -
    -
    - +
     
    +
    +
    + +
    -
    -
    - +
    + +
    -
    -
    - +
    + +
    +
    + +
    +
    + +
    -
    -
    + -
     
    -
    -
    - +
    + +
    + + +
    -
    -
    +
     
    +
    +
    + +
    + -
     
    -
    -
    - +
    + +
    +
    + +
    +
    -
    -
    - +
     
    +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -
    +
     
    +
    +
    + +
    +
    +
     
    +
    +
    + +
    +
    + +
    +
    +
    +
    + + + + + + + + - - - - + + + + + + + + + + + + + + +
    +
    +     		+
    + +
    +
    +
    +
    +
    +
    +
    +
    +

    General

    +
    +
    +
    +
    -
    - - - - - - - - - - -
    - - -
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +

    + Process Description +

    +
    +
    +
    +

    Entity Pool Nodes

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    - -
    		-
    - -
    -
    -
    +
    +

    Process Nodes

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -
    -
    -
    -

    General

    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    + +
    +

    Logical Operators

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -
    -
    -
    -

    - Process Description -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    + +
    +

    Other Nodes

    +
    +
    +
    + +
    +
    + +
    +
    + +
    - +
    +
    +
    +

    Connecting Arcs

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    -
    -
    -
    -
    -

    Validation Results

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - -
    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    + +
    + - - - -
    +

    +
    + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - +
    + + + + +
    + + + - - - + + + +
    +
    Output
    + + + + + +
    + + +
    +
    + + + + +
    + + + + + +
    + + + + +
    +
    Input
    + + + + + +
    + + +
    +
    + + + + + + +
    +
    Output
    + + + + + +
    + + +
    +
    + + + + + + Multimer + + + + + + + + + + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    + + +
    +
    + + + + + + + + + + + + - - - - + + + - - - - - - - - - + + + + + + + + <% if (vocabulary[selectedRelation].controlled){ %> + - + + - + + - - - - - - - -
    - -
    - - - - - + + diff --git a/libsbml.wasm b/libsbml.wasm new file mode 100644 index 000000000..2bf124a2e Binary files /dev/null and b/libsbml.wasm differ diff --git a/package.json b/package.json index b1013562c..d9abd516a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,7 @@ { "scripts": { + "e2e": "node e2e-test-runner.js", + "cypress": "cypress open", "test": "echo \"Error: no test specified\" && exit 1", "build-bundle-js": "browserify app/main.js -o app/bundle.js --debug", "watch-js": "nodemon -e js --watch app --ignore app/bundle.js -x \"npm run build-bundle-js\"", @@ -28,11 +30,12 @@ "cytoscape-context-menus": "3.1.0", "cytoscape-edge-editing": "2.0.1", "cytoscape-edgehandles": "~2.13.1", - "cytoscape-expand-collapse": "4.0.0", - "cytoscape-fcose": "1.2.3", - "cytoscape-grid-guide": "2.3.2", - "cytoscape-layout-utilities": "1.0.2", - "cytoscape-node-resize": "3.2.1", + "cytoscape-expand-collapse": "github:iVis-at-Bilkent/cytoscape.js-expand-collapse#unstable", + "cytoscape-fcose": "github:iVis-at-Bilkent/cytoscape.js-fcose#unstable", + "cytoscape-graph-algos": "github:iVis-at-Bilkent/cytoscape.js-graph-algos#master", + "cytoscape-grid-guide": "github:iVis-at-Bilkent/cytoscape.js-grid-guide#unstable", + "cytoscape-layout-utilities": "github:iVis-at-Bilkent/cytoscape.js-layout-utilities#unstable", + "cytoscape-node-editing": "github:iVis-at-Bilkent/cytoscape.js-node-editing#unstable", "cytoscape-panzoom": "~2.5.2", "cytoscape-popper": "^1.0.2", "cytoscape-undo-redo": "1.3.3", @@ -41,21 +44,26 @@ "intro.js": "2.9.3", "jquery": "~3.3.1", "jquery-expander": "1.7.0", - "konva": "^1.6.3", - "libxmljs": "0.19.7", + "jsdom": "^20.0.1", + "konva": "^7.0.3", + "libxmljs": "^1.0.11", "lodash.get": "^4.4.2", "lodash.set": "^4.3.2", "mousetrap": "^1.6.0", "multer": "^1.4.2", "natives": "^1.1.6", + "nodemailer": "6.4.5", "request": "^2.81.0", - "sbgnviz": "^6.0.6", - "tippy.js": "^3.4.0", - "nodemailer": "6.4.5" + "sbgnviz": "github:iVis-at-Bilkent/sbgnviz.js#unstable", + "tippy.js": "^3.4.0" }, "devDependencies": { - "express": "^4.14.0", + "body-parser": "^1.19.0", "browserify": "^11.2.0", + "cypress": "^7.3.0", + "cypress-file-upload": "^5.0.3", + "cypress-real-events": "^1.3.0", + "express": "^4.17.1", "nodemon": "1.11.0", "parallelshell": "3.0.1" } diff --git a/server.js b/server.js index 4cac44eb0..e8f077e69 100644 --- a/server.js +++ b/server.js @@ -3,7 +3,7 @@ var app = express(); var bodyParser = require('body-parser'); const multer = require('multer'); var server = require('http').createServer(app); -var port = process.env.port || 80; +var port = process.env.PORT || 80; app.use(bodyParser.urlencoded({ limit: "100mb", extended: false diff --git a/time-stamper.js b/time-stamper.js new file mode 100644 index 000000000..a13e0285c --- /dev/null +++ b/time-stamper.js @@ -0,0 +1,33 @@ +const fs = require('fs'); +const path = require('path'); +const {JSDOM} = require('jsdom'); + +const filePath = path.join(__dirname, 'index.html'); + +const buildDate = new Date(); +const timestampString = `Last Update: ${buildDate.toLocaleString('tr-TR', { timeZone: 'Europe/Athens' })} (Türkiye)`; + +fs.readFile(filePath, 'utf-8', (err, data) => { + if (err) { + console.error('Error reading the HTML file:', err); + return; + } + + const dom = new JSDOM(data); + const document = dom.window.document; + const timestampElement = document.getElementById('build-timestamp'); + if (timestampElement) { + timestampElement.textContent = timestampString; + } else { + console.error('Element with ID "build-timestamp" not found.'); + return; + } + const updatedHtml = dom.serialize(); + fs.writeFile(filePath, updatedHtml, 'utf8', (err) => { + if (err) { + console.error('Error writing the HTML file:', err); + return; + } + console.log('Timestamp added successfully!'); + }); +});