diff --git a/app/js/app-menu.js b/app/js/app-menu.js index 2caa19858..ee509214c 100644 --- a/app/js/app-menu.js +++ b/app/js/app-menu.js @@ -363,9 +363,11 @@ module.exports = function() { $("#import-experimental-data").click(function () { $("#overlay-data").trigger('click'); }); + $("#import-SBML-file").click(function () { $("#sbml-file").trigger('click'); }); + $("#import-simple-af-file").click(function () { $("#simple-af-file-input").trigger('click'); }); @@ -382,6 +384,10 @@ module.exports = function() { $("#sif-layout-input").trigger('click'); }); + $("#import-GPML-file").click(function () { + $("#gpml-file-input").trigger('click'); + }); + $("#overlay-data").change(function () { var chiseInstance = appUtilities.getActiveChiseInstance(); var cy = appUtilities.getActiveCy(); @@ -461,6 +467,34 @@ module.exports = function() { $(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.loadGpml(file, success = function(data){ + if (cy.elements().length !== 0) { + promptConfirmationView.render(function () { + chiseInstance.loadSBGNMLText(data.message, false, file.name, cy); + }); + } + else { + chiseInstance.loadSBGNMLText(data.message, false, file.name, cy); + } + }, + error = function(data){ + promptFileConversionErrorView.render(); + document.getElementById("file-conversion-error-message").innerText = "Conversion service is not available!"; + + }); + + $(this).val(""); + } + }); + $("#simple-af-file-input").change(function () { var chiseInstance = appUtilities.getActiveChiseInstance(); @@ -1333,14 +1367,19 @@ module.exports = function() { $("#export-as-sbgnml-plain-file").click(function (evt) { fileSaveView.render("sbgn", "plain"); }); + $("#export-as-sbgnml3-plain-file").click(function (evt) { fileSaveView.render("sbgn", "plain3"); }); - $("#export-as-sbml").click(function (evt) { - fileSaveView.render("sbml", null, null); - + $("#export-as-sbml").click(function (evt) { + fileSaveView.render("sbml", null, null); }); + + $("#export-as-gpml").click(function (evt) { + fileSaveView.render("gpml", null, null); + }); + $("#add-complex-for-selected").click(function (e) { // use active chise instance diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js index f0505839d..e5994e4b8 100644 --- a/app/js/app-utilities.js +++ b/app/js/app-utilities.js @@ -3,35 +3,35 @@ * Common utilities for sample application. Includes functions and variables. * You can directly utilize this object also you can use this object to set a variable in a file and access it in another file. */ -var jquery = $ = require('jquery'); -var chroma = require('chroma-js'); -var chise = require('chise'); -var tutorial = require('./tutorial'); +var jquery = ($ = require("jquery")); +var chroma = require("chroma-js"); +var chise = require("chise"); +var tutorial = require("./tutorial"); var appUtilities = {}; // Get the whole scratchpad reserved for newt (on an element or core) or get a single property of it appUtilities.getScratch = function (cyOrEle, name) { - if (cyOrEle.scratch('_newt') === undefined) { - cyOrEle.scratch('_newt', {}); + if (cyOrEle.scratch("_newt") === undefined) { + cyOrEle.scratch("_newt", {}); } - var scratch = cyOrEle.scratch('_newt'); - var retVal = ( name === undefined ) ? scratch : scratch[name]; + var scratch = cyOrEle.scratch("_newt"); + var retVal = name === undefined ? scratch : scratch[name]; return retVal; -} +}; appUtilities.mapTypesToViewableText = { - 'PD': 'PD', - 'AF': 'AF', - 'SIF': 'SIF', - 'HybridSbgn' : 'Hybrid (PD,AF)' , - 'HybridAny' : 'Hybrid (PD,AF,SIF)' + PD: "PD", + AF: "AF", + SIF: "SIF", + HybridSbgn: "Hybrid (PD,AF)", + HybridAny: "Hybrid (PD,AF,SIF)", }; // Set a single property on scratchpad of an element or the core appUtilities.setScratch = function (cyOrEle, name, val) { this.getScratch(cyOrEle)[name] = val; -} +}; // id for the next network to be created, starts by 0 // a unique div selector is to be created using this id @@ -49,7 +49,6 @@ appUtilities.networkIdsStack = []; appUtilities.networkIdToChiseInstance = {}; appUtilities.adjustUIComponents = function (_cy) { - // if _cy param is not set use the active cy instance var cy = _cy || appUtilities.getActiveCy(); @@ -63,17 +62,24 @@ appUtilities.adjustUIComponents = function (_cy) { // needing an appUndoActions instance here is something unexpected // but since appUndoActions.refreshColorSchemeMenu is used below in an unfortunate way we need an instance of it // that uses the active cy instance - var appUndoActionsFactory = require('./app-undo-actions-factory'); + var appUndoActionsFactory = require("./app-undo-actions-factory"); var appUndoActions = appUndoActionsFactory(appUtilities.getActiveCy()); // get current general properties for cy - var generalProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var generalProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); // refresh color schema menu - appUndoActions.refreshColorSchemeMenu({value: generalProperties.mapColorScheme, self: appUtilities.colorSchemeInspectorView, scheme_type: generalProperties.mapColorSchemeStyle}); + appUndoActions.refreshColorSchemeMenu({ + value: generalProperties.mapColorScheme, + self: appUtilities.colorSchemeInspectorView, + scheme_type: generalProperties.mapColorSchemeStyle, + }); // set the file content by the current file name for cy - var fileName = appUtilities.getScratch(cy, 'currentFileName'); + var fileName = appUtilities.getScratch(cy, "currentFileName"); appUtilities.setFileContent(fileName); // reset the status of undo redo buttons @@ -82,133 +88,138 @@ appUtilities.adjustUIComponents = function (_cy) { // adjust UI components related to mode properties // access the mode properties of cy - var modeProperties = appUtilities.getScratch(cy, 'modeProperties'); + var modeProperties = appUtilities.getScratch(cy, "modeProperties"); // html values to select - var nodeVal = modeProperties.selectedNodeType.replace(/ /gi, '-'); // Html values includes '-' instead of ' ' - var edgeVal = modeProperties.selectedEdgeType.replace(/ /gi, '-'); // Html values includes '-' instead of ' ' + var nodeVal = modeProperties.selectedNodeType.replace(/ /gi, "-"); // Html values includes '-' instead of ' ' + var edgeVal = modeProperties.selectedEdgeType.replace(/ /gi, "-"); // Html values includes '-' instead of ' ' var mode = modeProperties.mode; var sustainMode = modeProperties.sustainMode; var nodeLang = modeProperties.selectedNodeLanguage; var edgeLang = modeProperties.selectedEdgeLanguage; - $('.node-palette img').removeClass('selected-mode'); - $('.edge-palette img').removeClass('selected-mode'); + $(".node-palette img").removeClass("selected-mode"); + $(".edge-palette img").removeClass("selected-mode"); // Get images for node/edge palettes - var nodeImg = $('.node-palette img[value="'+nodeVal+'"][language="' + nodeLang + '"]'); - var edgeImg = $('.edge-palette img[value="'+edgeVal+'"][language="' + edgeLang + '"]'); + var nodeImg = $( + '.node-palette img[value="' + nodeVal + '"][language="' + nodeLang + '"]' + ); + var edgeImg = $( + '.edge-palette img[value="' + edgeVal + '"][language="' + edgeLang + '"]' + ); // also set the icons in toolbar accordingly - $('#add-node-mode-icon').attr('src', nodeImg.attr('src')); - $('#add-node-mode-icon').attr('title', "Create a new " + nodeImg.attr('title')); - $('#add-edge-mode-icon').attr('src', edgeImg.attr('src')); - $('#add-edge-mode-icon').attr('title', "Create a new " + edgeImg.attr('title')); + $("#add-node-mode-icon").attr("src", nodeImg.attr("src")); + $("#add-node-mode-icon").attr( + "title", + "Create a new " + nodeImg.attr("title") + ); + $("#add-edge-mode-icon").attr("src", edgeImg.attr("src")); + $("#add-edge-mode-icon").attr( + "title", + "Create a new " + edgeImg.attr("title") + ); // unactivate all UI components - $('#select-mode-icon').parent().removeClass('selected-mode'); - $('#add-edge-mode-icon').parent().removeClass('selected-mode'); - $('#add-node-mode-icon').parent().removeClass('selected-mode'); - $('#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'); - $('.node-palette img').addClass('inactive-palette-element'); - $('.edge-palette img').addClass('inactive-palette-element'); - $('.selected-mode-sustainable').removeClass('selected-mode-sustainable'); + $("#select-mode-icon").parent().removeClass("selected-mode"); + $("#add-edge-mode-icon").parent().removeClass("selected-mode"); + $("#add-node-mode-icon").parent().removeClass("selected-mode"); + $("#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"); + $(".node-palette img").addClass("inactive-palette-element"); + $(".edge-palette img").addClass("inactive-palette-element"); + $(".selected-mode-sustainable").removeClass("selected-mode-sustainable"); // Node/edge palettes should be initialized according to default nodeVal and edgeVal - nodeImg.addClass('selected-mode'); - edgeImg.addClass('selected-mode'); + nodeImg.addClass("selected-mode"); + edgeImg.addClass("selected-mode"); - var modeHandler = require('./app-mode-handler'); + var modeHandler = require("./app-mode-handler"); // adjust UI components according to the params - if ( mode === 'selection-mode' ) { - - $('#select-mode-icon').parent().addClass('selected-mode'); + if (mode === "selection-mode") { + $("#select-mode-icon").parent().addClass("selected-mode"); modeHandler.autoEnableMenuItems(true); - } - else if ( mode === 'add-node-mode' ) { - - $('#add-node-mode-icon').parent().addClass('selected-mode'); - $('.node-palette img').removeClass('inactive-palette-element'); + } else if (mode === "add-node-mode") { + $("#add-node-mode-icon").parent().addClass("selected-mode"); + $(".node-palette img").removeClass("inactive-palette-element"); modeHandler.autoEnableMenuItems(false); - if ( sustainMode ) { - $('#add-node-mode-icon').parent().addClass('selected-mode-sustainable'); - $('.node-palette .selected-mode').addClass('selected-mode-sustainable'); + if (sustainMode) { + $("#add-node-mode-icon").parent().addClass("selected-mode-sustainable"); + $(".node-palette .selected-mode").addClass("selected-mode-sustainable"); } - - } - else if ( mode === 'add-edge-mode' ) { - - $('#add-edge-mode-icon').parent().addClass('selected-mode'); - $('.edge-palette img').removeClass('inactive-palette-element'); + } else if (mode === "add-edge-mode") { + $("#add-edge-mode-icon").parent().addClass("selected-mode"); + $(".edge-palette img").removeClass("inactive-palette-element"); modeHandler.autoEnableMenuItems(false); - if ( sustainMode ) { - $('#add-edge-mode-icon').parent().addClass('selected-mode-sustainable'); - $('.edge-palette .selected-mode').addClass('selected-mode-sustainable'); + if (sustainMode) { + $("#add-edge-mode-icon").parent().addClass("selected-mode-sustainable"); + $(".edge-palette .selected-mode").addClass("selected-mode-sustainable"); } - - } - else if( mode === 'marquee-zoom-mode'){ - - $('#marquee-zoom-mode-icon').parent().addClass('selected-mode'); - + } else if (mode === "marquee-zoom-mode") { + $("#marquee-zoom-mode-icon").parent().addClass("selected-mode"); } // adjust status of grid guide related icons in toolbar // get the current status of related variables for cy - var toggleEnableGuidelineAndSnap = appUtilities.getScratch(cy, 'toggleEnableGuidelineAndSnap'); - var toggleShowGridEnableSnap = appUtilities.getScratch(cy, 'toggleShowGridEnableSnap'); + var toggleEnableGuidelineAndSnap = appUtilities.getScratch( + cy, + "toggleEnableGuidelineAndSnap" + ); + var toggleShowGridEnableSnap = appUtilities.getScratch( + cy, + "toggleShowGridEnableSnap" + ); // adjust toggle-guidelines-snapping-icon icons accordingly - if (toggleEnableGuidelineAndSnap){ - $('#toggle-guidelines-snapping-icon').addClass('toggle-mode-sustainable'); - } - else{ - $('#toggle-guidelines-snapping-icon').removeClass('toggle-mode-sustainable'); + if (toggleEnableGuidelineAndSnap) { + $("#toggle-guidelines-snapping-icon").addClass("toggle-mode-sustainable"); + } else { + $("#toggle-guidelines-snapping-icon").removeClass( + "toggle-mode-sustainable" + ); } // adjust oggle-grid-snapping-icon accordingly - if (toggleShowGridEnableSnap){ - $('#toggle-grid-snapping-icon').addClass('toggle-mode-sustainable'); - } - else{ - $('#toggle-grid-snapping-icon').removeClass('toggle-mode-sustainable'); + if (toggleShowGridEnableSnap) { + $("#toggle-grid-snapping-icon").addClass("toggle-mode-sustainable"); + } else { + $("#toggle-grid-snapping-icon").removeClass("toggle-mode-sustainable"); } }; // get id of the div panel for the given network id appUtilities.getNetworkPanelId = function (networkId) { - return 'sbgn-network-container-' + networkId; + return "sbgn-network-container-" + networkId; }; // get id of the tab for the the given network id appUtilities.getNetworkTabId = function (networkId) { - return 'sbgn-network-tab-' + networkId; + return "sbgn-network-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) { - // if the networkKey is a number it must already be the network id, so no need to process - if (typeof networkKey === 'number') { + if (typeof networkKey === "number") { return networkKey; } // get the last index of '-' - var index = networkKey.lastIndexOf("-"); + var index = networkKey.lastIndexOf("-"); // get the remaining part of string after the last occurance of '-' - var rem = networkKey.substring(index+1); + var rem = networkKey.substring(index + 1); // id is the integer representation of the remaining string var id = parseInt(rem); @@ -220,25 +231,23 @@ appUtilities.getNetworkId = function (networkKey) { // get selector of the div panel for the given network id // it is basically '#' + panelId appUtilities.getNetworkPanelSelector = function (networkId) { - return '#' + this.getNetworkPanelId(networkId); + return "#" + this.getNetworkPanelId(networkId); }; // selector of the tab for the the given network id // it is basically '#' + tabId appUtilities.getNetworkTabSelector = function (networkId) { - return '#' + this.getNetworkTabId(networkId); + return "#" + this.getNetworkTabId(networkId); }; // get the default map name for a network with the given id // basically like "Pathway #X" appUtilities.getDefaultMapName = function (networkId) { - - return 'Pathway #' + networkId; + return "Pathway #" + networkId; }; // update the string that represents the tab for the given networkKey appUtilities.updateNetworkTabDesc = function (networkKey) { - // get network id for the given network key (would be networkId, networkTabId, networkPanelId) var networkId = this.getNetworkId(networkKey); @@ -255,8 +264,7 @@ appUtilities.updateNetworkTabDesc = function (networkKey) { var mapName = this.getScratch(cy).currentGeneralProperties.mapName; // if mapName is empty set it to "Pathway" #219 - if (!mapName) - mapName = "Pathway"; + if (!mapName) mapName = "Pathway"; // update the content of 'a' element that is contained by the related tab var relatedTab = document.getElementById(tabId).childNodes[1]; @@ -267,16 +275,15 @@ appUtilities.updateNetworkTabDesc = function (networkKey) { // map given chise instance to the given network id // if key param is a cy instance or tab/panel id/selector use the actual network id appUtilities.putToChiseInstances = function (key, chiseInstance) { - // if key is a cy instance go for its container id - var networkId = typeof key === 'object' ? key.container().id : key; + var networkId = typeof key === "object" ? key.container().id : key; // if the network id parameter is the network tab/panel id/selector get the actual network id networkId = this.getNetworkId(networkId); // Throw error if there is already an instance mapped for the networkId - if ( this.networkIdToChiseInstance[networkId] ) { - throw 'A chise instance is already mapped for network id ' + networkId; + if (this.networkIdToChiseInstance[networkId]) { + throw "A chise instance is already mapped for network id " + networkId; } // perfrom the actual mapping @@ -286,16 +293,15 @@ appUtilities.putToChiseInstances = function (key, chiseInstance) { // remove the chise instance mapped to the given key // if key param is a cy instance or tab/panel id/selector use the actual network id appUtilities.removeFromChiseInstances = function (key) { - // if key is a cy instance go for its container id - var networkId = typeof key === 'object' ? key.container().id : key; + var networkId = typeof key === "object" ? key.container().id : key; // if the network id parameter is the network tab/panel id/selector get the actual network id networkId = this.getNetworkId(networkId); // Throw error if there is no instance mapped for the networkId - if ( !this.networkIdToChiseInstance[networkId] ) { - throw 'No chise instance is mapped for network id ' + networkId; + if (!this.networkIdToChiseInstance[networkId]) { + throw "No chise instance is mapped for network id " + networkId; } // perform the actual removal @@ -305,9 +311,8 @@ appUtilities.removeFromChiseInstances = function (key) { // get the chise instance mapped to the given key // if key param is a cy instance or tab/panel id/selector use the actual network id appUtilities.getChiseInstance = function (key) { - // if key is a cy instance go for its container id - var networkId = typeof key === 'object' ? key.container().id : key; + var networkId = typeof key === "object" ? key.container().id : key; // if the network id parameter is the network tab/panel id/selector get the actual network id networkId = this.getNetworkId(networkId); @@ -319,24 +324,22 @@ appUtilities.getChiseInstance = function (key) { // If there is just one network then network tabs should not be rendered. // This function is to adjust that. appUtilities.adjustVisibilityOfNetworkTabs = function () { - - var tabsContainer = $('#network-tabs-list-container'); + var tabsContainer = $("#network-tabs-list-container"); // if there is just one tab hide tabs container else show it - if ( this.networkIdsStack.length === 1 ) { + if (this.networkIdsStack.length === 1) { tabsContainer.hide(); - } - else { + } else { tabsContainer.show(); } - }; // creates a new network and returns the new chise.js instance that is created for this network appUtilities.createNewNetwork = function () { - // id of the div panel associated with the new network - var networkPanelId = appUtilities.getNetworkPanelId(appUtilities.nextNetworkId); + var networkPanelId = appUtilities.getNetworkPanelId( + appUtilities.nextNetworkId + ); // id of the tab for the new network var networkTabId = appUtilities.getNetworkTabId(appUtilities.nextNetworkId); @@ -346,16 +349,34 @@ appUtilities.createNewNetwork = function () { // create physical html components for the new network // use map name as the tab description - appUtilities.createPhysicalNetworkComponents(networkPanelId, networkTabId, mapName); + appUtilities.createPhysicalNetworkComponents( + networkPanelId, + networkTabId, + mapName + ); // generate network panel selector from the network panel id - var networkPanelSelector = appUtilities.getNetworkPanelSelector(appUtilities.nextNetworkId); + var networkPanelSelector = appUtilities.getNetworkPanelSelector( + appUtilities.nextNetworkId + ); // initialize current properties for the new instance by copying the default properties - var currentLayoutProperties = jquery.extend(true, {}, appUtilities.defaultLayoutProperties); - var currentGridProperties = jquery.extend(true, {}, appUtilities.defaultGridProperties); - var currentGeneralProperties = jquery.extend(true, {}, appUtilities.defaultGeneralProperties); - + var currentLayoutProperties = jquery.extend( + true, + {}, + appUtilities.defaultLayoutProperties + ); + var currentGridProperties = jquery.extend( + true, + {}, + appUtilities.defaultGridProperties + ); + var currentGeneralProperties = jquery.extend( + true, + {}, + appUtilities.defaultGeneralProperties + ); + // update the map name with the default map name specific for network id currentGeneralProperties.mapName = mapName; @@ -364,34 +385,48 @@ appUtilities.createNewNetwork = function () { networkContainerSelector: networkPanelSelector, // whether to fit label to nodes fitLabelsToNodes: function () { - var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + newInst.getCy(), + "currentGeneralProperties" + ); return currentGeneralProperties.fitLabelsToNodes; }, // whether to fit label to nodes fitLabelsToInfoboxes: function () { - var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + newInst.getCy(), + "currentGeneralProperties" + ); return currentGeneralProperties.fitLabelsToInfoboxes; }, // dynamic label size it may be 'small', 'regular', 'large' dynamicLabelSize: function () { - var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + newInst.getCy(), + "currentGeneralProperties" + ); return currentGeneralProperties.dynamicLabelSize; }, // Whether to infer nesting on load inferNestingOnLoad: function () { - var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + newInst.getCy(), + "currentGeneralProperties" + ); return currentGeneralProperties.inferNestingOnLoad; }, // percentage used to calculate compound paddings - compoundPadding: currentGeneralProperties.compoundPadding - + compoundPadding: currentGeneralProperties.compoundPadding, + /* function () { var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties'); return currentGeneralProperties.compoundPadding; - } */, - // arrow size changed by a slider on a scale from 0.5-2 + } */ // arrow size changed by a slider on a scale from 0.5-2 arrowScale: function () { - var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + newInst.getCy(), + "currentGeneralProperties" + ); return currentGeneralProperties.arrowScale; }, extraCompartmentPadding: currentGeneralProperties.extraCompartmentPadding, @@ -400,36 +435,54 @@ appUtilities.createNewNetwork = function () { // Whether to adjust node label font size automatically. // If this option return false do not adjust label sizes according to node height uses node.data('labelsize') // instead of doing it. - adjustNodeLabelFontSizeAutomatically: function() { - var currentGeneralProperties = appUtilities.getScratch(newInst.getCy(), 'currentGeneralProperties'); + adjustNodeLabelFontSizeAutomatically: function () { + var currentGeneralProperties = appUtilities.getScratch( + newInst.getCy(), + "currentGeneralProperties" + ); return currentGeneralProperties.adjustNodeLabelFontSizeAutomatically; }, // whether to improve flow (swap nodes) improveFlow: function () { - var currentLayoutProperties = appUtilities.getScratch(newInst.getCy(), 'currentLayoutProperties'); + var currentLayoutProperties = appUtilities.getScratch( + newInst.getCy(), + "currentLayoutProperties" + ); return currentLayoutProperties.improveFlow; }, undoable: appUtilities.undoable, - undoableDrag: function() { + undoableDrag: function () { return appUtilities.ctrlKeyDown !== true; }, highlightColor: currentGeneralProperties.highlightColor, - extraHighlightThickness: currentGeneralProperties.extraHighlightThickness + extraHighlightThickness: currentGeneralProperties.extraHighlightThickness, }); - + // set scracth pad of the related cy instance with these properties - appUtilities.setScratch(newInst.getCy(), 'currentLayoutProperties', currentLayoutProperties); - appUtilities.setScratch(newInst.getCy(), 'currentGridProperties', currentGridProperties); - appUtilities.setScratch(newInst.getCy(), 'currentGeneralProperties', currentGeneralProperties); - + 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'); + appUtilities.setScratch(newInst.getCy(), "currentFileName", "new_file.nwt"); // register cy extensions, bind cy events etc. - var appCy = require('./app-cy'); + var appCy = require("./app-cy"); appCy(newInst); - var modeHandler = require('./app-mode-handler'); + var modeHandler = require("./app-mode-handler"); modeHandler.initModeProperties(newInst.getCy()); // maintain networkIdToChiseInstance map @@ -448,9 +501,9 @@ appUtilities.createNewNetwork = function () { appUtilities.chooseNetworkTab(appUtilities.nextNetworkId); // activate palette tab - if (!$('#inspector-palette-tab').hasClass('active')) { - $('#inspector-palette-tab a').tab('show'); - $('#inspector-style-tab a').blur(); + if (!$("#inspector-palette-tab").hasClass("active")) { + $("#inspector-palette-tab a").tab("show"); + $("#inspector-style-tab a").blur(); } // increment new network id @@ -465,7 +518,6 @@ appUtilities.createNewNetwork = function () { // close the active network appUtilities.closeActiveNetwork = function () { - // active network id is the one that is at the top of the stack // pop and get it var activeNetworkId = this.networkIdsStack.pop(); @@ -478,15 +530,13 @@ appUtilities.closeActiveNetwork = function () { // If there is no other network after closing the active one create a new network // otherwise just select the tab for the new active network - if ( this.networkIdsStack.length === 0 ) { - + if (this.networkIdsStack.length === 0) { // create a new network this.createNewNetwork(); - } - else { - + } else { // get the new active network id from the top of the stack - var newActiveNetworkId = this.networkIdsStack[this.networkIdsStack.length - 1]; + var newActiveNetworkId = + this.networkIdsStack[this.networkIdsStack.length - 1]; // choose the network tab for the new active network this.chooseNetworkTab(newActiveNetworkId); @@ -494,12 +544,10 @@ appUtilities.closeActiveNetwork = function () { // adjust the visibility of network tabs this.adjustVisibilityOfNetworkTabs(); - }; // removes physical html components for the network that is represented by given networkKey appUtilities.removePhysicalNetworkComponents = function (networkKey) { - // use the actual network id (network key may not be equal to it) var networkId = appUtilities.getNetworkId(networkKey); @@ -515,7 +563,6 @@ appUtilities.removePhysicalNetworkComponents = function (networkKey) { }; appUtilities.dropHandler = function (ev) { - // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); @@ -523,7 +570,7 @@ appUtilities.dropHandler = function (ev) { // Use DataTransferItemList interface to access the file(s) for (var i = 0; i < ev.originalEvent.dataTransfer.items.length; i++) { // If dropped items aren't files, reject them - if (ev.originalEvent.dataTransfer.items[i].kind === 'file') { + if (ev.originalEvent.dataTransfer.items[i].kind === "file") { var file = ev.originalEvent.dataTransfer.items[i].getAsFile(); $("#file-input").trigger("change", [file]); } @@ -544,7 +591,6 @@ appUtilities.dragOverHandler = function (ev) { }; function removeDragData(ev) { - if (ev.originalEvent.dataTransfer.items) { // Use DataTransferItemList interface to remove the drag data ev.originalEvent.dataTransfer.items.clear(); @@ -554,46 +600,59 @@ function removeDragData(ev) { } } -appUtilities.createPhysicalNetworkComponents = function (panelId, tabId, tabDesc) { - +appUtilities.createPhysicalNetworkComponents = function ( + panelId, + tabId, + tabDesc +) { // the component that includes the tab panels - var panelsParent = $('#network-panels-container'); + var panelsParent = $("#network-panels-container"); - var newPanelStr = '
'; + var newPanelStr = + '
'; // create new panel inside the panels parent panelsParent.append(newPanelStr); - $("#" + panelId).on("drop", function(event){ + $("#" + panelId).on("drop", function (event) { appUtilities.dropHandler(event); $("#network-panels-container").removeClass("drag-and-drop-file"); }); - $("#" + panelId).on("dragover", function(event){ + $("#" + panelId).on("dragover", function (event) { appUtilities.dragOverHandler(event); $("#network-panels-container").addClass("drag-and-drop-file"); }); - $("#" + panelId).on("dragleave", function(event){ + $("#" + panelId).on("dragleave", function (event) { $("#network-panels-container").removeClass("drag-and-drop-file"); }); // the container that lists the network tabs - var tabsList = $('#network-tabs-list'); - - var newTabStr = '
  • \n\ - \n\ - ' + tabDesc + '
    • '; - - $('ul').on('click', 'button.' + tabId +'closeTab', function() { + var tabsList = $("#network-tabs-list"); + + var newTabStr = + '
  • \n\ + \n\ + ' + + tabDesc + + "
    • "; + + $("ul").on("click", "button." + tabId + "closeTab", function () { var networkId = tabId.substring(17); appUtilities.setActiveNetwork(networkId); appUtilities.closeActiveNetwork(); }); - $('ul').on('mousedown', '#' + tabId, function(e) { - if( e.which == 2 ) { - var networkId = tabId.substring(17); - appUtilities.setActiveNetwork(networkId); - appUtilities.closeActiveNetwork(); + $("ul").on("mousedown", "#" + tabId, function (e) { + if (e.which == 2) { + var networkId = tabId.substring(17); + appUtilities.setActiveNetwork(networkId); + appUtilities.closeActiveNetwork(); } }); // create new tab inside the list of network tabs @@ -602,7 +661,6 @@ appUtilities.createPhysicalNetworkComponents = function (panelId, tabId, tabDesc // basically get the active chise instance appUtilities.getActiveChiseInstance = function () { - // get the networkId of the active network that is at the top of networkIdsStack var activeNetworkId = this.networkIdsStack[this.networkIdsStack.length - 1]; @@ -612,7 +670,6 @@ appUtilities.getActiveChiseInstance = function () { // sets the active network through the network key to be activated appUtilities.setActiveNetwork = function (networkKey) { - // get chise instance for network key var chiseInstance = this.getChiseInstance(networkKey); @@ -623,8 +680,8 @@ appUtilities.setActiveNetwork = function (networkKey) { var oldIndex = this.networkIdsStack.indexOf(networkId); // if there is no existing network with this id throw an error - if ( oldIndex === -1 ) { - throw 'Network with id ' + networkId + ' cannot be found'; + if (oldIndex === -1) { + throw "Network with id " + networkId + " cannot be found"; } // remove the network from the old index @@ -635,7 +692,6 @@ appUtilities.setActiveNetwork = function (networkKey) { // adjust UI components for †he activated network this.adjustUIComponents(); - }; // chooses a network tab programatically @@ -647,14 +703,13 @@ appUtilities.chooseNetworkTab = function (networkKey) { var networkTabId = this.getNetworkTabId(networkId); // if network tab is not activated activate it - if (!$('#' + networkTabId).hasClass('active')) { - $('#' + networkTabId + ' a').tab('show'); + if (!$("#" + networkTabId).hasClass("active")) { + $("#" + networkTabId + " a").tab("show"); } }; // returns the sbgnviz.js instance associated with the currently active netwrok appUtilities.getActiveSbgnvizInstance = function () { - var chiseInstance = this.getActiveChiseInstance(); return chiseInstance ? chiseInstance.getSbgnvizInstance() : false; @@ -662,7 +717,6 @@ appUtilities.getActiveSbgnvizInstance = function () { // returns the cy instance associated with the currently active network appUtilities.getActiveCy = function () { - var chiseInstance = this.getActiveChiseInstance(); return chiseInstance ? chiseInstance.getCy() : false; @@ -670,19 +724,18 @@ appUtilities.getActiveCy = function () { // returns active network panel appUtilities.getActiveNetworkPanel = function () { - var activeCy = this.getActiveCy(); return activeCy ? activeCy.container() : false; }; appUtilities.defaultLayoutProperties = { - name: 'fcose', + name: "fcose", quality: "default", samplingType: true, sampleSize: 25, nodeSeparation: 75, - piTol: 0.0000001, + piTol: 0.0000001, nodeDimensionsIncludeLabels: false, nodeRepulsion: 2000, idealEdgeLength: 30, @@ -690,13 +743,13 @@ appUtilities.defaultLayoutProperties = { nestingFactor: 0.1, gravity: 0.25, numIter: 2500, - fit: true, + fit: true, padding: 20, - animationEasing: 'cubic-bezier(0.17,0.72,0.41,0.98)', - animate: 'end', + animationEasing: "cubic-bezier(0.17,0.72,0.41,0.98)", + animate: "end", animationDuration: 2000, randomize: false, - tile: true, + tile: true, tilingPaddingVertical: 12, tilingPaddingHorizontal: 12, gravityRangeCompound: 1.5, @@ -704,7 +757,7 @@ appUtilities.defaultLayoutProperties = { gravityRange: 3.8, initialEnergyOnIncremental: 0.3, improveFlow: true, - packComponents: true + packComponents: true, }; appUtilities.defaultGridProperties = { @@ -735,12 +788,12 @@ appUtilities.defaultGridProperties = { }; appUtilities.defaultGeneralProperties = { - compoundPadding: 0, // intial compound padding for all compound nodes + compoundPadding: 0, // intial compound padding for all compound nodes extraCompartmentPadding: 14, // extra padding for compound nodes except for complexes - extraComplexPadding: 10, //extra padding for complex compound nodes, refer to sbgnviz elementUtilities.getComplexPadding() function to see details + extraComplexPadding: 10, //extra padding for complex compound nodes, refer to sbgnviz elementUtilities.getComplexPadding() function to see details arrowScale: 1.25, showComplexName: true, - dynamicLabelSize: 'regular', + dynamicLabelSize: "regular", inferNestingOnLoad: false, fitLabelsToNodes: false, fitLabelsToInfoboxes: false, @@ -751,19 +804,21 @@ appUtilities.defaultGeneralProperties = { enablePorts: true, enableSIFTopologyGrouping: false, allowCompoundNodeResize: true, - mapColorScheme: 'black_white', - mapColorSchemeStyle: 'solid', - mapType: function() {return (appUtilities.getActiveChiseInstance().getMapType() || "Unknown");}, + mapColorScheme: "black_white", + mapColorSchemeStyle: "solid", + mapType: function () { + return appUtilities.getActiveChiseInstance().getMapType() || "Unknown"; + }, mapName: "", mapDescription: "", experimentDescription: "", - highlightColor: '#0B9BCD', //the color code used when initializing viewUtilities in app-cy.js - extraHighlightThickness: 2 + highlightColor: "#0B9BCD", //the color code used when initializing viewUtilities in app-cy.js + extraHighlightThickness: 2, }; appUtilities.setFileContent = function (fileName) { - var span = document.getElementById('file-name'); - var displayedSpan = document.getElementById('displayed-file-name'); + var span = document.getElementById("file-name"); + var displayedSpan = document.getElementById("displayed-file-name"); while (span.firstChild) { span.removeChild(span.firstChild); } @@ -773,42 +828,49 @@ appUtilities.setFileContent = function (fileName) { span.appendChild(document.createTextNode(fileName)); if (fileName.length <= 40) { displayedSpan.appendChild(document.createTextNode(fileName)); + } else { + displayedSpan.appendChild( + document.createTextNode( + fileName.substring(0, 34) + + "..." + + fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length) + ) + ); } - else { - displayedSpan.appendChild(document.createTextNode(fileName.substring(0, 34) + "..." + fileName.substring(fileName.lastIndexOf('.')+1, fileName.length))); - }; - displayedSpan.style.display = 'block'; - span.style.display = 'none'; + displayedSpan.style.display = "block"; + span.style.display = "none"; }; appUtilities.triggerLayout = function (_cy, randomize) { - // use parametrized cy if exists. Otherwise use the recently active cy var cy = _cy || this.getActiveCy(); // access the current general properties of cy - var currentGeneralProperties = this.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = this.getScratch( + cy, + "currentGeneralProperties" + ); // access the current layout properties of cy - var currentLayoutProperties = this.getScratch(cy, 'currentLayoutProperties'); + var currentLayoutProperties = this.getScratch(cy, "currentLayoutProperties"); // If 'animate-on-drawing-changes' is true then animate option must be true instead of false var preferences = { - animate: currentGeneralProperties.animateOnDrawingChanges ? true : false + animate: currentGeneralProperties.animateOnDrawingChanges ? true : false, }; // if randomize parameter is defined set it as a preference // 'fit' preference must be the same of 'randomize' parameter // in that case - if ( randomize !== undefined ) { + if (randomize !== undefined) { preferences.randomize = randomize; preferences.fit = randomize; } -// if (currentLayoutProperties.animate === 'during') { -// delete preferences.animate; -// } + // if (currentLayoutProperties.animate === 'during') { + // delete preferences.animate; + // } // access chise instance related to cy var chiseInstance = appUtilities.getChiseInstance(cy); @@ -818,61 +880,75 @@ appUtilities.triggerLayout = function (_cy, randomize) { }; appUtilities.getExpandCollapseOptions = function (_cy) { - var self = this; return { fisheye: function () { - // use parametrized cy if exists. Otherwise use the recently active cy var cy = _cy || self.getActiveCy(); - return self.getScratch(cy, 'currentGeneralProperties').rearrangeOnComplexityManagement; + return self.getScratch(cy, "currentGeneralProperties") + .rearrangeOnComplexityManagement; }, animate: function () { - // use parametrized cy if exists. Otherwise use the recently active cy var cy = _cy || self.getActiveCy(); - return self.getScratch(cy, 'currentGeneralProperties').animateOnDrawingChanges; + return self.getScratch(cy, "currentGeneralProperties") + .animateOnDrawingChanges; }, layoutBy: function () { - // use parametrized cy if exists. Otherwise use the recently active cy var cy = _cy || self.getActiveCy(); - if ( !self.getScratch(cy, 'currentGeneralProperties').recalculateLayoutOnComplexityManagement ) { -// cy.trigger('fit-units-after-expandcollapse'); + if ( + !self.getScratch(cy, "currentGeneralProperties") + .recalculateLayoutOnComplexityManagement + ) { + // cy.trigger('fit-units-after-expandcollapse'); return; } self.triggerLayout(cy, false); -// cy.trigger('fit-units-after-expandcollapse'); + // cy.trigger('fit-units-after-expandcollapse'); }, expandCollapseCueSize: 12, expandCollapseCuePosition: function (node) { + // use parametrized cy if exists. Otherwise use the recently active cy + var cy = _cy || self.getActiveCy(); - // use parametrized cy if exists. Otherwise use the recently active cy - var cy = _cy || self.getActiveCy(); - - var offset = 1, rectSize = 12; // this is the expandCollapseCueSize; - var size = cy.zoom() < 1 ? rectSize / (2*cy.zoom()) : rectSize / 2; - var x = node.position('x') - node.width() / 2 - parseFloat(node.css('padding-left')) - + parseFloat(node.css('border-width')) + size + offset; - if (node.data("class") == "compartment"){ - var y = node.position('y') - node.outerHeight() / 2 + Math.min(15, node.outerHeight()*0.05) - + parseFloat(node.css('border-width'))+ size; - } else { - var y = node.position('y') - node.height() / 2 - parseFloat(node.css('padding-top')) - + parseFloat(node.css('border-width')) + size + offset; - }; - - return {'x': x, 'y': y}; + var offset = 1, + rectSize = 12; // this is the expandCollapseCueSize; + var size = cy.zoom() < 1 ? rectSize / (2 * cy.zoom()) : rectSize / 2; + var x = + node.position("x") - + node.width() / 2 - + parseFloat(node.css("padding-left")) + + parseFloat(node.css("border-width")) + + size + + offset; + if (node.data("class") == "compartment") { + var y = + node.position("y") - + node.outerHeight() / 2 + + Math.min(15, node.outerHeight() * 0.05) + + parseFloat(node.css("border-width")) + + size; + } else { + var y = + node.position("y") - + node.height() / 2 - + parseFloat(node.css("padding-top")) + + parseFloat(node.css("border-width")) + + size + + offset; + } + + return { x: x, y: y }; }, }; }; appUtilities.dynamicResize = function () { - // get window inner width and inner height that includes scrollbars when they are rendered // using $(window).width() would be problematic when scrolls are visible // please see: https://stackoverflow.com/questions/19582862/get-browser-window-width-including-scrollbar @@ -883,29 +959,27 @@ appUtilities.dynamicResize = function () { var canvasWidth = 1000; var canvasHeight = 680; - if (windowWidth > canvasWidth) - { + if (windowWidth > canvasWidth) { //This is the margin on left and right of the main content when the page is //displayed var mainContentMargin = 10; - $("#network-panels-container").width(windowWidth * 0.8 - mainContentMargin); - $("#sbgn-inspector").width(windowWidth * 0.2 - mainContentMargin); + $("#network-panels-container").width(windowWidth * 0.8 - mainContentMargin); + $("#sbgn-inspector").width(windowWidth * 0.2 - mainContentMargin); var w = $("#sbgn-inspector-and-canvas").width(); $(".nav-menu").width(w); $(".navbar").width(w); -// $("#sbgn-info-content").width(windowWidth * 0.85); + // $("#sbgn-info-content").width(windowWidth * 0.85); $("#sbgn-toolbar").width(w); $("#network-tabs-list-container").width(w); } - if (windowHeight > canvasHeight) - { + if (windowHeight > canvasHeight) { $("#network-panels-container").height(windowHeight * 0.85); $("#sbgn-inspector").height(windowHeight * 0.85); } // trigger an event to notify that newt components are dynamically resized - $(document).trigger('newtAfterDynamicResize'); + $(document).trigger("newtAfterDynamicResize"); }; /* appUtilities.nodeQtipFunction = function (node) { @@ -944,7 +1018,6 @@ appUtilities.nodeQtipFunction = function (node) { }; */ appUtilities.refreshUndoRedoButtonsStatus = function (_cy) { - // use _cy param if it is set else use the recently active cy instance var cy = _cy || appUtilities.getActiveCy(); @@ -954,16 +1027,14 @@ appUtilities.refreshUndoRedoButtonsStatus = function (_cy) { // refresh status of undo button accordingly if (ur.isUndoStackEmpty()) { $("#undo-last-action").parent("li").addClass("disabled"); - } - else { + } else { $("#undo-last-action").parent("li").removeClass("disabled"); } // refresh status of redo button accordingly if (ur.isRedoStackEmpty()) { $("#redo-last-action").parent("li").addClass("disabled"); - } - else { + } else { $("#redo-last-action").parent("li").removeClass("disabled"); } }; @@ -975,938 +1046,945 @@ appUtilities.resetUndoRedoButtons = function () { // Enable drag and drop mode appUtilities.enableDragAndDropMode = function (_cy) { - // use _cy param if it is set else use the recently active cy instance var cy = _cy || appUtilities.getActiveCy(); - appUtilities.setScratch(cy, 'dragAndDropModeEnabled', true); + appUtilities.setScratch(cy, "dragAndDropModeEnabled", true); - $(cy.container()).find('canvas').addClass("target-cursor"); + $(cy.container()).find("canvas").addClass("target-cursor"); cy.autolock(true); cy.autounselectify(true); - cy.boxSelectionEnabled( false ); + cy.boxSelectionEnabled(false); }; // Disable drag and drop mode appUtilities.disableDragAndDropMode = function (_cy) { - // use _cy param if it is set else use the recently active cy instance var cy = _cy || appUtilities.getActiveCy(); - appUtilities.setScratch(cy, 'dragAndDropModeEnabled', null); - appUtilities.setScratch(cy, 'nodesToDragAndDrop', null); + appUtilities.setScratch(cy, "dragAndDropModeEnabled", null); + appUtilities.setScratch(cy, "nodesToDragAndDrop", null); - $(cy.container()).find('canvas').removeClass("target-cursor"); + $(cy.container()).find("canvas").removeClass("target-cursor"); cy.autolock(false); cy.autounselectify(false); - cy.boxSelectionEnabled( true ); + cy.boxSelectionEnabled(true); }; // Show neighbors of given eles and perform incremental layout afterward if Rearrange option is checked appUtilities.showHiddenNeighbors = function (eles, _chiseInstance) { + // check _chiseInstance param if it is set use it else use recently active chise instance + var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance(); - // 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 assocated cy instance - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + // get the associated cy instance + var cy = chiseInstance.getCy(); - var extendedList = chiseInstance.elementUtilities.extendNodeList(eles); - if (currentGeneralProperties.recalculateLayoutOnComplexityManagement ) - { - //Put them near node, show and perform incremental layout - chiseInstance.showAndPerformLayout(eles, extendedList, this.triggerLayout.bind(this, cy, false)); - } - else - { - //Just show them - chiseInstance.showEles(extendedList); - } + // get current general properties for assocated cy instance + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); + + var extendedList = chiseInstance.elementUtilities.extendNodeList(eles); + if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) { + //Put them near node, show and perform incremental layout + chiseInstance.showAndPerformLayout( + eles, + extendedList, + this.triggerLayout.bind(this, cy, false) + ); + } else { + //Just show them + chiseInstance.showEles(extendedList); + } }; // Show neighbors of given eles and perform incremental layout afterward if Rearrange option is checked appUtilities.showAll = function (_chiseInstance) { + // check _chiseInstance param if it is set use it else use recently active chise instance + var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance(); - // 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 the associated cy instance + var cy = chiseInstance.getCy(); - // get current general properties for cy instance - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + // get current general properties for cy instance + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); - if (currentGeneralProperties.recalculateLayoutOnComplexityManagement ) - { - //Show all and perform incremental layout - chiseInstance.showAllAndPerformLayout(this.triggerLayout.bind(this, cy, false)); - } - else - { - //Just show them all - chiseInstance.showAll(); - } + if (currentGeneralProperties.recalculateLayoutOnComplexityManagement) { + //Show all and perform incremental layout + chiseInstance.showAllAndPerformLayout( + this.triggerLayout.bind(this, cy, false) + ); + } else { + //Just show them all + chiseInstance.showAll(); + } }; // Hides nodes and perform incremental layout afterward if Rearrange option is checked -appUtilities.hideNodesSmart = function(eles, _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(); +appUtilities.hideNodesSmart = function (eles, _chiseInstance) { + // check _chiseInstance param if it is set use it else use recently active chise instance + var chiseInstance = _chiseInstance || appUtilities.getActiveChiseInstance(); - // get current general properties for cy instance - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + // get the associated cy instance + var cy = chiseInstance.getCy(); - if (currentGeneralProperties.recalculateLayoutOnComplexityManagement ) - { - //Put them near node and perform incremental layout - chiseInstance.hideAndPerformLayout(eles, this.triggerLayout.bind(this, cy, false)); - } - else - { - //Just show them - chiseInstance.hideNodesSmart(eles); - } + // 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) + ); + } else { + //Just show them + chiseInstance.hideNodesSmart(eles); + } }; appUtilities.colorCodeToGradientImage = colorCodeToGradientImage = { - '#000000' : 'http://newteditor.org/color-scheme-images/bw2_gradient.png', - '#80cdc1' : 'http://newteditor.org/color-scheme-images/gb5_gradient.png', - '#92c5de' : 'http://newteditor.org/color-scheme-images/rb5_gradient.png', - '#9ecae1' : 'http://newteditor.org/color-scheme-images/blue4_gradient.png', - '#a6dba0' : 'http://newteditor.org/color-scheme-images/pg1_gradient.png', - '#b2abd2' : 'http://newteditor.org/color-scheme-images/pb5_gradient.png', - '#bababa' : 'http://newteditor.org/color-scheme-images/gr1_gradient.png', - '#bdbdbd' : 'http://newteditor.org/color-scheme-images/grey4_gradient.png', - '#c2a5cf' : 'http://newteditor.org/color-scheme-images/pg5_gradient.png', - '#c6dbef' : 'http://newteditor.org/color-scheme-images/blue3_gradient.png', - '#c7eae5' : 'http://newteditor.org/color-scheme-images/gb4_gradient.png', - '#d1e5f0' : 'http://newteditor.org/color-scheme-images/rb4_gradient.png', - '#d8daeb' : 'http://newteditor.org/color-scheme-images/pb4_gradient.png', - '#d9d9d9' : 'http://newteditor.org/color-scheme-images/grey3_gradient.png', - '#d9f0d3' : 'http://newteditor.org/color-scheme-images/pg2_gradient.png', - '#dfc27d' : 'http://newteditor.org/color-scheme-images/gb1_gradient.png', - '#e0e0e0' : 'http://newteditor.org/color-scheme-images/gr2_gradient.png', - '#e7d4e8' : 'http://newteditor.org/color-scheme-images/pg4_gradient.png', - '#eff3ff' : 'http://newteditor.org/color-scheme-images/blue2_gradient.png', - '#f0f0f0' : 'http://newteditor.org/color-scheme-images/grey2_gradient.png', - '#f4a582' : 'http://newteditor.org/color-scheme-images/rb1_gradient.png', - '#f5f5f5' : 'http://newteditor.org/color-scheme-images/gb3_gradient.png', - '#f6e8c3' : 'http://newteditor.org/color-scheme-images/gb2_gradient.png', - '#f7f7f7' : 'http://newteditor.org/color-scheme-images/rb3_gradient.png', - '#fdb863' : 'http://newteditor.org/color-scheme-images/pb1_gradient.png', - '#fddbc7' : 'http://newteditor.org/color-scheme-images/rb2_gradient.png', - '#fee0b6' : 'http://newteditor.org/color-scheme-images/pb2_gradient.png', - '#ffffff' : 'http://newteditor.org/color-scheme-images/bw1_gradient.png', -}; - -appUtilities.colorCodeTo3DImage = colorCodeTo3DImage ={ - '#000000' : 'http://newteditor.org/color-scheme-images/bw2_3d.png', - '#80cdc1' : 'http://newteditor.org/color-scheme-images/gb5_3d.png', - '#92c5de' : 'http://newteditor.org/color-scheme-images/rb5_3d.png', - '#9ecae1' : 'http://newteditor.org/color-scheme-images/blue4_3d.png', - '#a6dba0' : 'http://newteditor.org/color-scheme-images/pg1_3d.png', - '#b2abd2' : 'http://newteditor.org/color-scheme-images/pb5_3d.png', - '#bababa' : 'http://newteditor.org/color-scheme-images/gr1_3d.png', - '#bdbdbd' : 'http://newteditor.org/color-scheme-images/grey4_3d.png', - '#c2a5cf' : 'http://newteditor.org/color-scheme-images/pg5_3d.png', - '#c6dbef' : 'http://newteditor.org/color-scheme-images/blue3_3d.png', - '#c7eae5' : 'http://newteditor.org/color-scheme-images/gb4_3d.png', - '#d1e5f0' : 'http://newteditor.org/color-scheme-images/rb4_3d.png', - '#d8daeb' : 'http://newteditor.org/color-scheme-images/pb4_3d.png', - '#d9d9d9' : 'http://newteditor.org/color-scheme-images/grey3_3d.png', - '#d9f0d3' : 'http://newteditor.org/color-scheme-images/pg2_3d.png', - '#dfc27d' : 'http://newteditor.org/color-scheme-images/gb1_3d.png', - '#e0e0e0' : 'http://newteditor.org/color-scheme-images/gr2_3d.png', - '#e7d4e8' : 'http://newteditor.org/color-scheme-images/pg4_3d.png', - '#eff3ff' : 'http://newteditor.org/color-scheme-images/blue2_3d.png', - '#f0f0f0' : 'http://newteditor.org/color-scheme-images/grey2_3d.png', - '#f4a582' : 'http://newteditor.org/color-scheme-images/rb1_3d.png', - '#f5f5f5' : 'http://newteditor.org/color-scheme-images/gb3_3d.png', - '#f6e8c3' : 'http://newteditor.org/color-scheme-images/gb2_3d.png', - '#f7f7f7' : 'http://newteditor.org/color-scheme-images/rb3_3d.png', - '#fdb863' : 'http://newteditor.org/color-scheme-images/pb1_3d.png', - '#fddbc7' : 'http://newteditor.org/color-scheme-images/rb2_3d.png', - '#fee0b6' : 'http://newteditor.org/color-scheme-images/pb2_3d.png', - '#ffffff' : 'http://newteditor.org/color-scheme-images/bw1_3d.png', + "#000000": "http://newteditor.org/color-scheme-images/bw2_gradient.png", + "#80cdc1": "http://newteditor.org/color-scheme-images/gb5_gradient.png", + "#92c5de": "http://newteditor.org/color-scheme-images/rb5_gradient.png", + "#9ecae1": "http://newteditor.org/color-scheme-images/blue4_gradient.png", + "#a6dba0": "http://newteditor.org/color-scheme-images/pg1_gradient.png", + "#b2abd2": "http://newteditor.org/color-scheme-images/pb5_gradient.png", + "#bababa": "http://newteditor.org/color-scheme-images/gr1_gradient.png", + "#bdbdbd": "http://newteditor.org/color-scheme-images/grey4_gradient.png", + "#c2a5cf": "http://newteditor.org/color-scheme-images/pg5_gradient.png", + "#c6dbef": "http://newteditor.org/color-scheme-images/blue3_gradient.png", + "#c7eae5": "http://newteditor.org/color-scheme-images/gb4_gradient.png", + "#d1e5f0": "http://newteditor.org/color-scheme-images/rb4_gradient.png", + "#d8daeb": "http://newteditor.org/color-scheme-images/pb4_gradient.png", + "#d9d9d9": "http://newteditor.org/color-scheme-images/grey3_gradient.png", + "#d9f0d3": "http://newteditor.org/color-scheme-images/pg2_gradient.png", + "#dfc27d": "http://newteditor.org/color-scheme-images/gb1_gradient.png", + "#e0e0e0": "http://newteditor.org/color-scheme-images/gr2_gradient.png", + "#e7d4e8": "http://newteditor.org/color-scheme-images/pg4_gradient.png", + "#eff3ff": "http://newteditor.org/color-scheme-images/blue2_gradient.png", + "#f0f0f0": "http://newteditor.org/color-scheme-images/grey2_gradient.png", + "#f4a582": "http://newteditor.org/color-scheme-images/rb1_gradient.png", + "#f5f5f5": "http://newteditor.org/color-scheme-images/gb3_gradient.png", + "#f6e8c3": "http://newteditor.org/color-scheme-images/gb2_gradient.png", + "#f7f7f7": "http://newteditor.org/color-scheme-images/rb3_gradient.png", + "#fdb863": "http://newteditor.org/color-scheme-images/pb1_gradient.png", + "#fddbc7": "http://newteditor.org/color-scheme-images/rb2_gradient.png", + "#fee0b6": "http://newteditor.org/color-scheme-images/pb2_gradient.png", + "#ffffff": "http://newteditor.org/color-scheme-images/bw1_gradient.png", }; +appUtilities.colorCodeTo3DImage = colorCodeTo3DImage = { + "#000000": "http://newteditor.org/color-scheme-images/bw2_3d.png", + "#80cdc1": "http://newteditor.org/color-scheme-images/gb5_3d.png", + "#92c5de": "http://newteditor.org/color-scheme-images/rb5_3d.png", + "#9ecae1": "http://newteditor.org/color-scheme-images/blue4_3d.png", + "#a6dba0": "http://newteditor.org/color-scheme-images/pg1_3d.png", + "#b2abd2": "http://newteditor.org/color-scheme-images/pb5_3d.png", + "#bababa": "http://newteditor.org/color-scheme-images/gr1_3d.png", + "#bdbdbd": "http://newteditor.org/color-scheme-images/grey4_3d.png", + "#c2a5cf": "http://newteditor.org/color-scheme-images/pg5_3d.png", + "#c6dbef": "http://newteditor.org/color-scheme-images/blue3_3d.png", + "#c7eae5": "http://newteditor.org/color-scheme-images/gb4_3d.png", + "#d1e5f0": "http://newteditor.org/color-scheme-images/rb4_3d.png", + "#d8daeb": "http://newteditor.org/color-scheme-images/pb4_3d.png", + "#d9d9d9": "http://newteditor.org/color-scheme-images/grey3_3d.png", + "#d9f0d3": "http://newteditor.org/color-scheme-images/pg2_3d.png", + "#dfc27d": "http://newteditor.org/color-scheme-images/gb1_3d.png", + "#e0e0e0": "http://newteditor.org/color-scheme-images/gr2_3d.png", + "#e7d4e8": "http://newteditor.org/color-scheme-images/pg4_3d.png", + "#eff3ff": "http://newteditor.org/color-scheme-images/blue2_3d.png", + "#f0f0f0": "http://newteditor.org/color-scheme-images/grey2_3d.png", + "#f4a582": "http://newteditor.org/color-scheme-images/rb1_3d.png", + "#f5f5f5": "http://newteditor.org/color-scheme-images/gb3_3d.png", + "#f6e8c3": "http://newteditor.org/color-scheme-images/gb2_3d.png", + "#f7f7f7": "http://newteditor.org/color-scheme-images/rb3_3d.png", + "#fdb863": "http://newteditor.org/color-scheme-images/pb1_3d.png", + "#fddbc7": "http://newteditor.org/color-scheme-images/rb2_3d.png", + "#fee0b6": "http://newteditor.org/color-scheme-images/pb2_3d.png", + "#ffffff": "http://newteditor.org/color-scheme-images/bw1_3d.png", +}; appUtilities.mapColorSchemes = mapColorSchemes = { - 'black_white': { - 'name': 'Black and white', - 'preview': ['#ffffff', '#000000'], - 'values': { - 'unspecified entity': '#ffffff', - 'simple chemical': '#ffffff', - 'macromolecule': '#ffffff', - 'nucleic acid feature': '#ffffff', - 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', - 'complex': '#ffffff', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#ffffff', - 'tag': '#ffffff', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#ffffff', - 'submap': '#ffffff', + black_white: { + name: "Black and white", + preview: ["#ffffff", "#000000"], + values: { + "unspecified entity": "#ffffff", + "simple chemical": "#ffffff", + macromolecule: "#ffffff", + "nucleic acid feature": "#ffffff", + "perturbing agent": "#ffffff", + "source and sink": "#ffffff", + complex: "#ffffff", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#ffffff", + tag: "#ffffff", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#ffffff", + submap: "#ffffff", // AF - 'BA plain': '#ffffff', - 'BA unspecified entity': '#ffffff', - 'BA simple chemical': '#ffffff', - 'BA macromolecule': '#ffffff', - 'BA nucleic acid feature': '#ffffff', - 'BA perturbing agent': '#ffffff', - 'BA complex': '#ffffff', - 'delay': '#ffffff', + "BA plain": "#ffffff", + "BA unspecified entity": "#ffffff", + "BA simple chemical": "#ffffff", + "BA macromolecule": "#ffffff", + "BA nucleic acid feature": "#ffffff", + "BA perturbing agent": "#ffffff", + "BA complex": "#ffffff", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#ffffff', - 'SIF simple chemical': '#ffffff' - } + "SIF macromolecule": "#ffffff", + "SIF simple chemical": "#ffffff", + }, }, - 'greyscale': { - 'name': 'Greyscale', - 'preview': ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd'], - 'invert': 'inverse_greyscale', - 'values': { - 'unspecified entity': '#ffffff', - 'simple chemical': '#bdbdbd', - 'macromolecule': '#bdbdbd', - 'nucleic acid feature': '#bdbdbd', - 'perturbing agent': '#bdbdbd', - 'source and sink': '#ffffff', - 'complex': '#d9d9d9', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#ffffff', - 'tag': '#ffffff', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f0f0f0', - 'submap': '#f0f0f0', + greyscale: { + name: "Greyscale", + preview: ["#ffffff", "#f0f0f0", "#d9d9d9", "#bdbdbd"], + invert: "inverse_greyscale", + values: { + "unspecified entity": "#ffffff", + "simple chemical": "#bdbdbd", + macromolecule: "#bdbdbd", + "nucleic acid feature": "#bdbdbd", + "perturbing agent": "#bdbdbd", + "source and sink": "#ffffff", + complex: "#d9d9d9", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#ffffff", + tag: "#ffffff", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f0f0f0", + submap: "#f0f0f0", // AF - 'BA plain': '#ffffff', - 'BA unspecified entity': '#ffffff', - 'BA simple chemical': '#bdbdbd', - 'BA macromolecule': '#bdbdbd', - 'BA nucleic acid feature': '#bdbdbd', - 'BA perturbing agent': '#bdbdbd', - 'BA complex': '#d9d9d9', - 'delay': '#ffffff', + "BA plain": "#ffffff", + "BA unspecified entity": "#ffffff", + "BA simple chemical": "#bdbdbd", + "BA macromolecule": "#bdbdbd", + "BA nucleic acid feature": "#bdbdbd", + "BA perturbing agent": "#bdbdbd", + "BA complex": "#d9d9d9", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#d9d9d9', - 'SIF simple chemical': '#f0f0f0' - } + "SIF macromolecule": "#d9d9d9", + "SIF simple chemical": "#f0f0f0", + }, }, - 'inverse_greyscale': { - 'name': 'Inverse greyscale', - 'preview': ['#bdbdbd', '#d9d9d9', '#f0f0f0', '#ffffff'], - 'invert': 'greyscale', - 'values': { - 'unspecified entity': '#f0f0f0', - 'simple chemical': '#f0f0f0', - 'macromolecule': '#f0f0f0', - 'nucleic acid feature': '#f0f0f0', - 'perturbing agent': '#f0f0f0', - 'source and sink': '#f0f0f0', - 'complex': '#d9d9d9', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f0f0f0', - 'tag': '#f0f0f0', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#bdbdbd', - 'submap': '#bdbdbd', + inverse_greyscale: { + name: "Inverse greyscale", + preview: ["#bdbdbd", "#d9d9d9", "#f0f0f0", "#ffffff"], + invert: "greyscale", + values: { + "unspecified entity": "#f0f0f0", + "simple chemical": "#f0f0f0", + macromolecule: "#f0f0f0", + "nucleic acid feature": "#f0f0f0", + "perturbing agent": "#f0f0f0", + "source and sink": "#f0f0f0", + complex: "#d9d9d9", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f0f0f0", + tag: "#f0f0f0", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#bdbdbd", + submap: "#bdbdbd", // AF - 'BA plain': '#f0f0f0', - 'BA unspecified entity': '#f0f0f0', - 'BA simple chemical': '#f0f0f0', - 'BA macromolecule': '#f0f0f0', - 'BA nucleic acid feature': '#f0f0f0', - 'BA perturbing agent': '#f0f0f0', - 'BA complex': '#d9d9d9', - 'delay': '#ffffff', + "BA plain": "#f0f0f0", + "BA unspecified entity": "#f0f0f0", + "BA simple chemical": "#f0f0f0", + "BA macromolecule": "#f0f0f0", + "BA nucleic acid feature": "#f0f0f0", + "BA perturbing agent": "#f0f0f0", + "BA complex": "#d9d9d9", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#f0f0f0', - 'SIF simple chemical': '#d9d9d9' - } + "SIF macromolecule": "#f0f0f0", + "SIF simple chemical": "#d9d9d9", + }, }, - 'blue_scale': { - 'name': 'Blue scale', - 'preview': ['#ffffff', '#eff3ff', '#c6dbef', '#9ecae1'], - 'invert': 'inverse_blue_scale', - 'values': { - 'unspecified entity': '#9ecae1', - 'simple chemical': '#9ecae1', - 'macromolecule': '#9ecae1', - 'nucleic acid feature': '#9ecae1', - 'perturbing agent': '#9ecae1', - 'source and sink': '#9ecae1', - 'complex': '#c6dbef', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#9ecae1', - 'tag': '#9ecae1', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#eff3ff', - 'submap': '#eff3ff', + blue_scale: { + name: "Blue scale", + preview: ["#ffffff", "#eff3ff", "#c6dbef", "#9ecae1"], + invert: "inverse_blue_scale", + values: { + "unspecified entity": "#9ecae1", + "simple chemical": "#9ecae1", + macromolecule: "#9ecae1", + "nucleic acid feature": "#9ecae1", + "perturbing agent": "#9ecae1", + "source and sink": "#9ecae1", + complex: "#c6dbef", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#9ecae1", + tag: "#9ecae1", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#eff3ff", + submap: "#eff3ff", // AF - 'BA plain': '#9ecae1', - 'BA unspecified entity': '#9ecae1', - 'BA simple chemical': '#9ecae1', - 'BA macromolecule': '#9ecae1', - 'BA nucleic acid feature': '#9ecae1', - 'BA perturbing agent': '#9ecae1', - 'BA complex': '#c6dbef', - 'delay': '#ffffff', + "BA plain": "#9ecae1", + "BA unspecified entity": "#9ecae1", + "BA simple chemical": "#9ecae1", + "BA macromolecule": "#9ecae1", + "BA nucleic acid feature": "#9ecae1", + "BA perturbing agent": "#9ecae1", + "BA complex": "#c6dbef", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#c6dbef', - 'SIF simple chemical': '#eff3ff' - } + "SIF macromolecule": "#c6dbef", + "SIF simple chemical": "#eff3ff", + }, }, - 'inverse_blue_scale': { - 'name': 'Inverse blue scale', - 'preview': ['#9ecae1', '#c6dbef', '#eff3ff', '#ffffff'], - 'invert': 'blue_scale', - 'values': { - 'unspecified entity': '#eff3ff', - 'simple chemical': '#eff3ff', - 'macromolecule': '#eff3ff', - 'nucleic acid feature': '#eff3ff', - 'perturbing agent': '#eff3ff', - 'source and sink': '#eff3ff', - 'complex': '#c6dbef', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#eff3ff', - 'tag': '#eff3ff', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#9ecae1', - 'submap': '#9ecae1', + inverse_blue_scale: { + name: "Inverse blue scale", + preview: ["#9ecae1", "#c6dbef", "#eff3ff", "#ffffff"], + invert: "blue_scale", + values: { + "unspecified entity": "#eff3ff", + "simple chemical": "#eff3ff", + macromolecule: "#eff3ff", + "nucleic acid feature": "#eff3ff", + "perturbing agent": "#eff3ff", + "source and sink": "#eff3ff", + complex: "#c6dbef", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#eff3ff", + tag: "#eff3ff", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#9ecae1", + submap: "#9ecae1", // AF - 'BA plain': '#eff3ff', - 'BA unspecified entity': '#eff3ff', - 'BA simple chemical': '#eff3ff', - 'BA macromolecule': '#eff3ff', - 'BA nucleic acid feature': '#eff3ff', - 'BA perturbing agent': '#eff3ff', - 'BA complex': '#c6dbef', - 'delay': '#ffffff', + "BA plain": "#eff3ff", + "BA unspecified entity": "#eff3ff", + "BA simple chemical": "#eff3ff", + "BA macromolecule": "#eff3ff", + "BA nucleic acid feature": "#eff3ff", + "BA perturbing agent": "#eff3ff", + "BA complex": "#c6dbef", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#eff3ff', - 'SIF simple chemical': '#c6dbef' - } + "SIF macromolecule": "#eff3ff", + "SIF simple chemical": "#c6dbef", + }, }, - 'opposed_red_blue': { - 'name': 'Red blue', - 'preview': ['#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de'], - 'invert': 'opposed_red_blue2', - 'values': { - 'unspecified entity': '#f7f7f7', - 'simple chemical': '#fddbc7', - 'macromolecule': '#92c5de', - 'nucleic acid feature': '#f4a582', - 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', - 'complex': '#d1e5f0', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f7f7f7', - 'tag': '#f7f7f7', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f7f7f7', - 'submap': '#f7f7f7', + opposed_red_blue: { + name: "Red blue", + preview: ["#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de"], + invert: "opposed_red_blue2", + values: { + "unspecified entity": "#f7f7f7", + "simple chemical": "#fddbc7", + macromolecule: "#92c5de", + "nucleic acid feature": "#f4a582", + "perturbing agent": "#f7f7f7", + "source and sink": "#f7f7f7", + complex: "#d1e5f0", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f7f7f7", + tag: "#f7f7f7", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f7f7f7", + submap: "#f7f7f7", // AF - 'BA plain': '#f7f7f7', - 'BA unspecified entity': '#f7f7f7', - 'BA simple chemical': '#fddbc7', - 'BA macromolecule': '#92c5de', - 'BA nucleic acid feature': '#f4a582', - 'BA perturbing agent': '#f7f7f7', - 'BA complex': '#d1e5f0', - 'delay': '#ffffff', + "BA plain": "#f7f7f7", + "BA unspecified entity": "#f7f7f7", + "BA simple chemical": "#fddbc7", + "BA macromolecule": "#92c5de", + "BA nucleic acid feature": "#f4a582", + "BA perturbing agent": "#f7f7f7", + "BA complex": "#d1e5f0", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#92c5de', - 'SIF simple chemical': '#f4a582' - } + "SIF macromolecule": "#92c5de", + "SIF simple chemical": "#f4a582", + }, }, - 'opposed_red_blue2': { - 'name': 'Red blue 2', - 'preview': ['#92c5de', '#d1e5f0', '#f7f7f7', '#fddbc7', '#f4a582'], - 'invert': 'opposed_red_blue', - 'values': { - 'unspecified entity': '#f7f7f7', - 'simple chemical': '#d1e5f0', - 'macromolecule': '#f4a582', - 'nucleic acid feature': '#92c5de', - 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', - 'complex': '#fddbc7', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f7f7f7', - 'tag': '#f7f7f7', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f7f7f7', - 'submap': '#f7f7f7', + opposed_red_blue2: { + name: "Red blue 2", + preview: ["#92c5de", "#d1e5f0", "#f7f7f7", "#fddbc7", "#f4a582"], + invert: "opposed_red_blue", + values: { + "unspecified entity": "#f7f7f7", + "simple chemical": "#d1e5f0", + macromolecule: "#f4a582", + "nucleic acid feature": "#92c5de", + "perturbing agent": "#f7f7f7", + "source and sink": "#f7f7f7", + complex: "#fddbc7", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f7f7f7", + tag: "#f7f7f7", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f7f7f7", + submap: "#f7f7f7", // AF - 'BA plain': '#f7f7f7', - 'BA unspecified entity': '#f7f7f7', - 'BA simple chemical': '#d1e5f0', - 'BA macromolecule': '#f4a582', - 'BA nucleic acid feature': '#92c5de', - 'BA perturbing agent': '#f7f7f7', - 'BA complex': '#fddbc7', - 'delay': '#ffffff', + "BA plain": "#f7f7f7", + "BA unspecified entity": "#f7f7f7", + "BA simple chemical": "#d1e5f0", + "BA macromolecule": "#f4a582", + "BA nucleic acid feature": "#92c5de", + "BA perturbing agent": "#f7f7f7", + "BA complex": "#fddbc7", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#f4a582', - 'SIF simple chemical': '#92c5de' - } + "SIF macromolecule": "#f4a582", + "SIF simple chemical": "#92c5de", + }, }, - 'opposed_green_brown': { - 'name': 'Green brown', - 'preview': ['#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1'], - 'invert': 'opposed_green_brown2', - 'values': { - 'unspecified entity': '#f5f5f5', - 'simple chemical': '#f6e8c3', - 'macromolecule': '#80cdc1', - 'nucleic acid feature': '#dfc27d', - 'perturbing agent': '#f5f5f5', - 'source and sink': '#f5f5f5', - 'complex': '#c7eae5', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f5f5f5', - 'tag': '#f5f5f5', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f5f5f5', - 'submap': '#f5f5f5', + opposed_green_brown: { + name: "Green brown", + preview: ["#dfc27d", "#f6e8c3", "#f5f5f5", "#c7eae5", "#80cdc1"], + invert: "opposed_green_brown2", + values: { + "unspecified entity": "#f5f5f5", + "simple chemical": "#f6e8c3", + macromolecule: "#80cdc1", + "nucleic acid feature": "#dfc27d", + "perturbing agent": "#f5f5f5", + "source and sink": "#f5f5f5", + complex: "#c7eae5", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f5f5f5", + tag: "#f5f5f5", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f5f5f5", + submap: "#f5f5f5", // AF - 'BA plain': '#f5f5f5', - 'BA unspecified entity': '#f5f5f5', - 'BA simple chemical': '#f6e8c3', - 'BA macromolecule': '#80cdc1', - 'BA nucleic acid feature': '#dfc27d', - 'BA perturbing agent': '#f5f5f5', - 'BA complex': '#c7eae5', - 'delay': '#ffffff', + "BA plain": "#f5f5f5", + "BA unspecified entity": "#f5f5f5", + "BA simple chemical": "#f6e8c3", + "BA macromolecule": "#80cdc1", + "BA nucleic acid feature": "#dfc27d", + "BA perturbing agent": "#f5f5f5", + "BA complex": "#c7eae5", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#80cdc1', - 'SIF simple chemical': '#dfc27d' - } + "SIF macromolecule": "#80cdc1", + "SIF simple chemical": "#dfc27d", + }, }, - 'opposed_green_brown2': { - 'name': 'Green brown 2', - 'preview': ['#80cdc1', '#c7eae5', '#f5f5f5', '#f6e8c3', '#dfc27d'], - 'invert': 'opposed_green_brown', - 'values': { - 'unspecified entity': '#f5f5f5', - 'simple chemical': '#c7eae5', - 'macromolecule': '#dfc27d', - 'nucleic acid feature': '#80cdc1', - 'perturbing agent': '#f5f5f5', - 'source and sink': '#f5f5f5', - 'complex': '#f6e8c3', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f5f5f5', - 'tag': '#f5f5f5', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f5f5f5', - 'submap': '#f5f5f5', + opposed_green_brown2: { + name: "Green brown 2", + preview: ["#80cdc1", "#c7eae5", "#f5f5f5", "#f6e8c3", "#dfc27d"], + invert: "opposed_green_brown", + values: { + "unspecified entity": "#f5f5f5", + "simple chemical": "#c7eae5", + macromolecule: "#dfc27d", + "nucleic acid feature": "#80cdc1", + "perturbing agent": "#f5f5f5", + "source and sink": "#f5f5f5", + complex: "#f6e8c3", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f5f5f5", + tag: "#f5f5f5", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f5f5f5", + submap: "#f5f5f5", // AF - 'BA plain': '#f5f5f5', - 'BA unspecified entity': '#f5f5f5', - 'BA simple chemical': '#c7eae5', - 'BA macromolecule': '#dfc27d', - 'BA nucleic acid feature': '#80cdc1', - 'BA perturbing agent': '#f5f5f5', - 'BA complex': '#f6e8c3', - 'delay': '#ffffff', + "BA plain": "#f5f5f5", + "BA unspecified entity": "#f5f5f5", + "BA simple chemical": "#c7eae5", + "BA macromolecule": "#dfc27d", + "BA nucleic acid feature": "#80cdc1", + "BA perturbing agent": "#f5f5f5", + "BA complex": "#f6e8c3", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#dfc27d', - 'SIF simple chemical': '#80cdc1' - } + "SIF macromolecule": "#dfc27d", + "SIF simple chemical": "#80cdc1", + }, }, - 'opposed_purple_brown': { - 'name': 'Purple brown', - 'preview': ['#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2'], - 'invert': 'opposed_purple_brown2', - 'values': { - 'unspecified entity': '#f7f7f7', - 'simple chemical': '#fee0b6', - 'macromolecule': '#b2abd2', - 'nucleic acid feature': '#fdb863', - 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', - 'complex': '#d8daeb', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f7f7f7', - 'tag': '#f7f7f7', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f7f7f7', - 'submap': '#f7f7f7', + opposed_purple_brown: { + name: "Purple brown", + preview: ["#fdb863", "#fee0b6", "#f7f7f7", "#d8daeb", "#b2abd2"], + invert: "opposed_purple_brown2", + values: { + "unspecified entity": "#f7f7f7", + "simple chemical": "#fee0b6", + macromolecule: "#b2abd2", + "nucleic acid feature": "#fdb863", + "perturbing agent": "#f7f7f7", + "source and sink": "#f7f7f7", + complex: "#d8daeb", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f7f7f7", + tag: "#f7f7f7", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f7f7f7", + submap: "#f7f7f7", // AF - 'BA plain': '#f7f7f7', - 'BA unspecified entity': '#f7f7f7', - 'BA simple chemical': '#fee0b6', - 'BA macromolecule': '#b2abd2', - 'BA nucleic acid feature': '#fdb863', - 'BA perturbing agent': '#f7f7f7', - 'BA complex': '#d8daeb', - 'delay': '#ffffff', + "BA plain": "#f7f7f7", + "BA unspecified entity": "#f7f7f7", + "BA simple chemical": "#fee0b6", + "BA macromolecule": "#b2abd2", + "BA nucleic acid feature": "#fdb863", + "BA perturbing agent": "#f7f7f7", + "BA complex": "#d8daeb", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#b2abd2', - 'SIF simple chemical': '#fdb863' - } + "SIF macromolecule": "#b2abd2", + "SIF simple chemical": "#fdb863", + }, }, - 'opposed_purple_brown2': { - 'name': 'Purple brown 2', - 'preview': ['#b2abd2', '#d8daeb', '#f7f7f7', '#fee0b6', '#fdb863'], - 'invert': 'opposed_purple_brown', - 'values': { - 'unspecified entity': '#f7f7f7', - 'simple chemical': '#d8daeb', - 'macromolecule': '#fdb863', - 'nucleic acid feature': '#b2abd2', - 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', - 'complex': '#fee0b6', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f7f7f7', - 'tag': '#f7f7f7', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f7f7f7', - 'submap': '#f7f7f7', + opposed_purple_brown2: { + name: "Purple brown 2", + preview: ["#b2abd2", "#d8daeb", "#f7f7f7", "#fee0b6", "#fdb863"], + invert: "opposed_purple_brown", + values: { + "unspecified entity": "#f7f7f7", + "simple chemical": "#d8daeb", + macromolecule: "#fdb863", + "nucleic acid feature": "#b2abd2", + "perturbing agent": "#f7f7f7", + "source and sink": "#f7f7f7", + complex: "#fee0b6", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f7f7f7", + tag: "#f7f7f7", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f7f7f7", + submap: "#f7f7f7", // AF - 'BA plain': '#f7f7f7', - 'BA unspecified entity': '#f7f7f7', - 'BA simple chemical': '#d8daeb', - 'BA macromolecule': '#fdb863', - 'BA nucleic acid feature': '#b2abd2', - 'BA perturbing agent': '#f7f7f7', - 'BA complex': '#fee0b6', - 'delay': '#ffffff', + "BA plain": "#f7f7f7", + "BA unspecified entity": "#f7f7f7", + "BA simple chemical": "#d8daeb", + "BA macromolecule": "#fdb863", + "BA nucleic acid feature": "#b2abd2", + "BA perturbing agent": "#f7f7f7", + "BA complex": "#fee0b6", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#fdb863', - 'SIF simple chemical': '#b2abd2' - } + "SIF macromolecule": "#fdb863", + "SIF simple chemical": "#b2abd2", + }, }, - 'opposed_purple_green': { - 'name': 'Purple green', - 'preview': ['#a6dba0', '#d9f0d3', '#f7f7f7', '#e7d4e8', '#c2a5cf'], - 'invert': 'opposed_purple_green2', - 'values': { - 'unspecified entity': '#f7f7f7', - 'simple chemical': '#d9f0d3', - 'macromolecule': '#c2a5cf', - 'nucleic acid feature': '#a6dba0', - 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', - 'complex': '#e7d4e8', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f7f7f7', - 'tag': '#f7f7f7', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f7f7f7', - 'submap': '#f7f7f7', + opposed_purple_green: { + name: "Purple green", + preview: ["#a6dba0", "#d9f0d3", "#f7f7f7", "#e7d4e8", "#c2a5cf"], + invert: "opposed_purple_green2", + values: { + "unspecified entity": "#f7f7f7", + "simple chemical": "#d9f0d3", + macromolecule: "#c2a5cf", + "nucleic acid feature": "#a6dba0", + "perturbing agent": "#f7f7f7", + "source and sink": "#f7f7f7", + complex: "#e7d4e8", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f7f7f7", + tag: "#f7f7f7", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f7f7f7", + submap: "#f7f7f7", // AF - 'BA plain': '#f7f7f7', - 'BA unspecified entity': '#f7f7f7', - 'BA simple chemical': '#d9f0d3', - 'BA macromolecule': '#c2a5cf', - 'BA nucleic acid feature': '#a6dba0', - 'BA perturbing agent': '#f7f7f7', - 'BA complex': '#e7d4e8', - 'delay': '#ffffff', + "BA plain": "#f7f7f7", + "BA unspecified entity": "#f7f7f7", + "BA simple chemical": "#d9f0d3", + "BA macromolecule": "#c2a5cf", + "BA nucleic acid feature": "#a6dba0", + "BA perturbing agent": "#f7f7f7", + "BA complex": "#e7d4e8", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#c2a5cf', - 'SIF simple chemical': '#a6dba0' - } + "SIF macromolecule": "#c2a5cf", + "SIF simple chemical": "#a6dba0", + }, }, - 'opposed_purple_green2': { - 'name': 'Purple green 2', - 'preview': ['#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0'], - 'invert': 'opposed_purple_green', - 'values': { - 'unspecified entity': '#f7f7f7', - 'simple chemical': '#e7d4e8', - 'macromolecule': '#a6dba0', - 'nucleic acid feature': '#c2a5cf', - 'perturbing agent': '#f7f7f7', - 'source and sink': '#f7f7f7', - 'complex': '#d9f0d3', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#f7f7f7', - 'tag': '#f7f7f7', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#f7f7f7', - 'submap': '#f7f7f7', + opposed_purple_green2: { + name: "Purple green 2", + preview: ["#c2a5cf", "#e7d4e8", "#f7f7f7", "#d9f0d3", "#a6dba0"], + invert: "opposed_purple_green", + values: { + "unspecified entity": "#f7f7f7", + "simple chemical": "#e7d4e8", + macromolecule: "#a6dba0", + "nucleic acid feature": "#c2a5cf", + "perturbing agent": "#f7f7f7", + "source and sink": "#f7f7f7", + complex: "#d9f0d3", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#f7f7f7", + tag: "#f7f7f7", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#f7f7f7", + submap: "#f7f7f7", // AF - 'BA plain': '#f7f7f7', - 'BA unspecified entity': '#f7f7f7', - 'BA simple chemical': '#e7d4e8', - 'BA macromolecule': '#a6dba0', - 'BA nucleic acid feature': '#c2a5cf', - 'BA perturbing agent': '#f7f7f7', - 'BA complex': '#d9f0d3', - 'delay': '#ffffff', + "BA plain": "#f7f7f7", + "BA unspecified entity": "#f7f7f7", + "BA simple chemical": "#e7d4e8", + "BA macromolecule": "#a6dba0", + "BA nucleic acid feature": "#c2a5cf", + "BA perturbing agent": "#f7f7f7", + "BA complex": "#d9f0d3", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#a6dba0', - 'SIF simple chemical': '#c2a5cf' - } + "SIF macromolecule": "#a6dba0", + "SIF simple chemical": "#c2a5cf", + }, }, - 'opposed_grey_red': { - 'name': 'Grey red', - 'preview': ['#bababa', '#e0e0e0', '#ffffff', '#fddbc7', '#f4a582'], - 'invert': 'opposed_grey_red2', - 'values': { - 'unspecified entity': '#ffffff', - 'simple chemical': '#e0e0e0', - 'macromolecule': '#f4a582', - 'nucleic acid feature': '#bababa', - 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', - 'complex': '#fddbc7', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#ffffff', - 'tag': '#ffffff', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#ffffff', - 'submap': '#ffffff', + opposed_grey_red: { + name: "Grey red", + preview: ["#bababa", "#e0e0e0", "#ffffff", "#fddbc7", "#f4a582"], + invert: "opposed_grey_red2", + values: { + "unspecified entity": "#ffffff", + "simple chemical": "#e0e0e0", + macromolecule: "#f4a582", + "nucleic acid feature": "#bababa", + "perturbing agent": "#ffffff", + "source and sink": "#ffffff", + complex: "#fddbc7", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#ffffff", + tag: "#ffffff", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#ffffff", + submap: "#ffffff", // AF - 'BA plain': '#ffffff', - 'BA unspecified entity': '#ffffff', - 'BA simple chemical': '#e0e0e0', - 'BA macromolecule': '#f4a582', - 'BA nucleic acid feature': '#bababa', - 'BA perturbing agent': '#ffffff', - 'BA complex': '#fddbc7', - 'delay': '#ffffff', + "BA plain": "#ffffff", + "BA unspecified entity": "#ffffff", + "BA simple chemical": "#e0e0e0", + "BA macromolecule": "#f4a582", + "BA nucleic acid feature": "#bababa", + "BA perturbing agent": "#ffffff", + "BA complex": "#fddbc7", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#f4a582', - 'SIF simple chemical': '#bababa' - } + "SIF macromolecule": "#f4a582", + "SIF simple chemical": "#bababa", + }, }, - 'opposed_grey_red2': { - 'name': 'Grey red 2', - 'preview': ['#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa'], - 'invert': 'opposed_grey_red', - 'values': { - 'unspecified entity': '#ffffff', - 'simple chemical': '#fddbc7', - 'macromolecule': '#bababa', - 'nucleic acid feature': '#f4a582', - 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', - 'complex': '#e0e0e0', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#ffffff', - 'tag': '#ffffff', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#ffffff', - 'submap': '#ffffff', + opposed_grey_red2: { + name: "Grey red 2", + preview: ["#f4a582", "#fddbc7", "#ffffff", "#e0e0e0", "#bababa"], + invert: "opposed_grey_red", + values: { + "unspecified entity": "#ffffff", + "simple chemical": "#fddbc7", + macromolecule: "#bababa", + "nucleic acid feature": "#f4a582", + "perturbing agent": "#ffffff", + "source and sink": "#ffffff", + complex: "#e0e0e0", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#ffffff", + tag: "#ffffff", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#ffffff", + submap: "#ffffff", // AF - 'BA plain': '#ffffff', - 'BA unspecified entity': '#ffffff', - 'BA simple chemical': '#fddbc7', - 'BA macromolecule': '#bababa', - 'BA nucleic acid feature': '#f4a582', - 'BA perturbing agent': '#ffffff', - 'BA complex': '#e0e0e0', - 'delay': '#ffffff', + "BA plain": "#ffffff", + "BA unspecified entity": "#ffffff", + "BA simple chemical": "#fddbc7", + "BA macromolecule": "#bababa", + "BA nucleic acid feature": "#f4a582", + "BA perturbing agent": "#ffffff", + "BA complex": "#e0e0e0", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#bababa', - 'SIF simple chemical': '#f4a582' - } + "SIF macromolecule": "#bababa", + "SIF simple chemical": "#f4a582", + }, }, - 'pure_white': { - 'name': 'Pure White', - 'preview': ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#ffffff'], - 'values': { - 'unspecified entity': '#ffffff', - 'simple chemical': '#ffffff', - 'macromolecule': '#ffffff', - 'nucleic acid feature': '#ffffff', - 'perturbing agent': '#ffffff', - 'source and sink': '#ffffff', - 'complex': '#ffffff', - 'process': '#ffffff', - 'omitted process': '#ffffff', - 'uncertain process': '#ffffff', - 'association': '#ffffff', - 'dissociation': '#ffffff', - 'phenotype': '#ffffff', - 'tag': '#ffffff', - 'consumption': '#ffffff', - 'production': '#ffffff', - 'modulation': '#ffffff', - 'stimulation': '#ffffff', - 'catalysis': '#ffffff', - 'inhibition': '#ffffff', - 'necessary stimulation': '#ffffff', - 'logic arc': '#ffffff', - 'equivalence arc': '#ffffff', - 'and': '#ffffff', - 'or': '#ffffff', - 'not': '#ffffff', - 'compartment': '#ffffff', - 'submap': '#ffffff', + pure_white: { + name: "Pure White", + preview: ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"], + values: { + "unspecified entity": "#ffffff", + "simple chemical": "#ffffff", + macromolecule: "#ffffff", + "nucleic acid feature": "#ffffff", + "perturbing agent": "#ffffff", + "source and sink": "#ffffff", + complex: "#ffffff", + process: "#ffffff", + "omitted process": "#ffffff", + "uncertain process": "#ffffff", + association: "#ffffff", + dissociation: "#ffffff", + phenotype: "#ffffff", + tag: "#ffffff", + consumption: "#ffffff", + production: "#ffffff", + modulation: "#ffffff", + stimulation: "#ffffff", + catalysis: "#ffffff", + inhibition: "#ffffff", + "necessary stimulation": "#ffffff", + "logic arc": "#ffffff", + "equivalence arc": "#ffffff", + and: "#ffffff", + or: "#ffffff", + not: "#ffffff", + compartment: "#ffffff", + submap: "#ffffff", // AF - 'BA plain': '#ffffff', - 'BA unspecified entity': '#ffffff', - 'BA simple chemical': '#ffffff', - 'BA macromolecule': '#ffffff', - 'BA nucleic acid feature': '#ffffff', - 'BA perturbing agent': '#ffffff', - 'BA complex': '#ffffff', - 'delay': '#ffffff', + "BA plain": "#ffffff", + "BA unspecified entity": "#ffffff", + "BA simple chemical": "#ffffff", + "BA macromolecule": "#ffffff", + "BA nucleic acid feature": "#ffffff", + "BA perturbing agent": "#ffffff", + "BA complex": "#ffffff", + delay: "#ffffff", // SIF - 'SIF macromolecule': '#ffffff', - 'SIF simple chemical': '#ffffff' - } - } + "SIF macromolecule": "#ffffff", + "SIF simple chemical": "#ffffff", + }, + }, }; // set multimers to be the same as their original elements // just to avoid typing it manually in the mapColorSchemes dictionary -for(var scheme in mapColorSchemes){ - mapColorSchemes[scheme]['values']['nucleic acid feature multimer'] = mapColorSchemes[scheme]['values']['nucleic acid feature']; - 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 (var scheme in mapColorSchemes) { + mapColorSchemes[scheme]["values"]["nucleic acid feature multimer"] = + mapColorSchemes[scheme]["values"]["nucleic acid feature"]; + 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"]; } // go through eles, mapping the id of these elements to values that were mapped to their data().class // classMap is of the form: {ele.data().class: value} // return object of the form: {ele.id: value} -appUtilities.mapEleClassToId = function(eles, classMap) { +appUtilities.mapEleClassToId = function (eles, classMap) { result = {}; - for( var i = 0; i < eles.length; i++ ){ + for (var i = 0; i < eles.length; i++) { ele = eles[i]; result[ele.id()] = classMap[ele.data().class]; } @@ -1918,58 +1996,83 @@ appUtilities.mapEleClassToId = function(eles, classMap) { // not have a default background image. // classMap is of the form: {ele.data().class: value} // return object of the form: {ele.id: value} -appUtilities.mapEleClassToBackgroundImage = function(eles, classMap, scheme_type){ +appUtilities.mapEleClassToBackgroundImage = function ( + eles, + classMap, + scheme_type +) { result = {}; - if(scheme_type == 'gradient'){ - for( var i = 0; i < eles.length; i++ ){ + if (scheme_type == "gradient") { + for (var i = 0; i < eles.length; i++) { ele = eles[i]; - result[ele.id()] = colorCodeToGradientImage[ classMap[ele.data().class] ]; + result[ele.id()] = colorCodeToGradientImage[classMap[ele.data().class]]; } - } - else if (scheme_type == '3D'){ - for( var i = 0; i < eles.length; i++ ){ + } else if (scheme_type == "3D") { + for (var i = 0; i < eles.length; i++) { ele = eles[i]; - result[ele.id()] = colorCodeTo3DImage[ classMap[ele.data().class ]]; + result[ele.id()] = colorCodeTo3DImage[classMap[ele.data().class]]; } } return result; -} +}; -appUtilities.mapBgImgCoverToEle = function(){ +appUtilities.mapBgImgCoverToEle = function () { result = {}; - for( var i = 0; i < eles.length; i++ ){ + for (var i = 0; i < eles.length; i++) { ele = eles[i]; result[ele.id()] = classMap[ele.data().class]; } return result; -} +}; // use this function to change the global style of the map by applying the current color scheme -appUtilities.applyMapColorScheme = function(newColorScheme, scheme_type, self, _cy) { - var actions = appUtilities.getActionsToApplyMapColorScheme(newColorScheme, scheme_type, self, _cy); +appUtilities.applyMapColorScheme = function ( + newColorScheme, + scheme_type, + self, + _cy +) { + var actions = appUtilities.getActionsToApplyMapColorScheme( + newColorScheme, + scheme_type, + self, + _cy + ); var cy = _cy || appUtilities.getActiveCy(); cy.undoRedo().do("batch", actions); -} +}; // get the actions required to change the global style of the map by applying the current color scheme -appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_type, self, _cy) { - +appUtilities.getActionsToApplyMapColorScheme = function ( + newColorScheme, + scheme_type, + self, + _cy +) { // if _cy param is set use it else use the recently active cy instance var cy = _cy || appUtilities.getActiveCy(); var eles = cy.nodes(); - 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']); + 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){ + var clearBgImg = function (eles) { result = {}; - for( var i = 0; i < eles.length; i++ ){ + for (var i = 0; i < eles.length; i++) { ele = eles[i]; - result[ele.id()] = ''; + result[ele.id()] = ""; } return result; }; @@ -1977,60 +2080,134 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t var actions = []; // first clear the background images of already present elements - actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: clearBgImg(eles)}}); + 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-color', valueMap: idMap}}); + 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)}}); + 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}}); + 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: "changeCss", + param: { + eles: collapsedChildren, + name: "background-image", + valueMap: "", + }, + }); - actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}}); + actions.push({ + name: "refreshColorSchemeMenu", + param: { value: newColorScheme, self: self, scheme_type: scheme_type }, + }); // set to be the default as well - for(var nodeClass in mapColorSchemes[newColorScheme]['values']){ - classBgColor = mapColorSchemes[newColorScheme]['values'][nodeClass]; + for (var nodeClass in mapColorSchemes[newColorScheme]["values"]) { + classBgColor = mapColorSchemes[newColorScheme]["values"][nodeClass]; // nodeClass may not be defined in the defaultProperties (for edges, for example) - if(nodeClass in chiseInstance.elementUtilities.getDefaultProperties()){ - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-color', value: classBgColor}}); - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-fit', value: ''}}); - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-x', value: ''}}); - 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:''}}); + if (nodeClass in chiseInstance.elementUtilities.getDefaultProperties()) { + actions.push({ + name: "setDefaultProperty", + param: { + class: nodeClass, + name: "background-color", + value: classBgColor, + }, + }); + actions.push({ + name: "setDefaultProperty", + param: { class: nodeClass, name: "background-fit", value: "" }, + }); + actions.push({ + name: "setDefaultProperty", + param: { class: nodeClass, name: "background-position-x", value: "" }, + }); + 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: "" }, + }); } } - } // no need to handle 3D and Gradient color schemes separately else { - - var colorIDMap = appUtilities.mapEleClassToId(eles, mapColorSchemes[newColorScheme]['values']); - var backgroundImgMap = appUtilities.mapEleClassToBackgroundImage(eles, mapColorSchemes[newColorScheme]['values'], scheme_type); - var collapsedChildren = cy.expandCollapse('get').getAllCollapsedChildrenRecursively().filter("node"); - var collapsedColorIDMap = appUtilities.mapEleClassToId(collapsedChildren, mapColorSchemes[newColorScheme]['values']); - var collapsedBackgroundImgMap = appUtilities.mapEleClassToBackgroundImage(collapsedChildren, mapColorSchemes[newColorScheme]['values'], scheme_type); + var colorIDMap = appUtilities.mapEleClassToId( + eles, + mapColorSchemes[newColorScheme]["values"] + ); + var backgroundImgMap = appUtilities.mapEleClassToBackgroundImage( + eles, + mapColorSchemes[newColorScheme]["values"], + scheme_type + ); + var collapsedChildren = cy + .expandCollapse("get") + .getAllCollapsedChildrenRecursively() + .filter("node"); + var collapsedColorIDMap = appUtilities.mapEleClassToId( + collapsedChildren, + mapColorSchemes[newColorScheme]["values"] + ); + var collapsedBackgroundImgMap = appUtilities.mapEleClassToBackgroundImage( + collapsedChildren, + mapColorSchemes[newColorScheme]["values"], + scheme_type + ); var chiseInstance = appUtilities.getActiveChiseInstance(); //utility functions to set background image Properties - var mapCovertoBgFit = function(eles){ + var mapCovertoBgFit = function (eles) { result = {}; - for( var i = 0; i < eles.length; i++ ){ + for (var i = 0; i < eles.length; i++) { ele = eles[i]; - result[ele.id()] = 'none'; + result[ele.id()] = "none"; } return result; }; - var mapPercentToPosition = function(eles,percent){ + var mapPercentToPosition = function (eles, percent) { result = {}; - for( var i = 0; i < eles.length; i++ ){ + for (var i = 0; i < eles.length; i++) { ele = eles[i]; - result[ele.id()] = percent + '%'; + result[ele.id()] = percent + "%"; } return result; }; @@ -2039,56 +2216,202 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t // edit style of the current map elements // change background color of the current map elements to #ffffff - actions.push({name: "changeData", param: {eles: eles, name: 'background-color', valueMap: colorIDMap}}); - actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: backgroundImgMap}}); - actions.push({name: "changeData", param: {eles: eles, name: 'background-fit', valueMap: mapCovertoBgFit(eles)}}); - actions.push({name: "changeData", param: {eles: eles, name: 'background-position-x', valueMap: mapPercentToPosition(eles, 50)}}); - 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-color", valueMap: colorIDMap }, + }); + actions.push({ + name: "changeData", + param: { + eles: eles, + name: "background-image", + valueMap: backgroundImgMap, + }, + }); + actions.push({ + name: "changeData", + param: { + eles: eles, + name: "background-fit", + valueMap: mapCovertoBgFit(eles), + }, + }); + actions.push({ + name: "changeData", + param: { + eles: eles, + name: "background-position-x", + valueMap: mapPercentToPosition(eles, 50), + }, + }); + 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), + }, + }); // collapsed nodes' style should also be changed, special edge case - actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedColorIDMap}}); - actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: collapsedBackgroundImgMap}}); - actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-fit', valueMap: mapCovertoBgFit(collapsedChildren)}}); - actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-x', valueMap: mapPercentToPosition(collapsedChildren, 50)}}); - 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-color", + valueMap: collapsedColorIDMap, + }, + }); + actions.push({ + name: "changeDataDirty", + param: { + eles: collapsedChildren, + name: "background-image", + valueMap: collapsedBackgroundImgMap, + }, + }); + actions.push({ + name: "changeDataDirty", + param: { + eles: collapsedChildren, + name: "background-fit", + valueMap: mapCovertoBgFit(collapsedChildren), + }, + }); + actions.push({ + name: "changeDataDirty", + param: { + eles: collapsedChildren, + name: "background-position-x", + valueMap: mapPercentToPosition(collapsedChildren, 50), + }, + }); + 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), + }, + }); // 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++){ - actions.push({name: "changeCss", param: {eles: collapsedChildren[i], name: 'background-image', valueMap: collapsedBackgroundImgMap[collapsedChildren[i].id()]}}); + // 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++) { + actions.push({ + name: "changeCss", + param: { + eles: collapsedChildren[i], + name: "background-image", + valueMap: collapsedBackgroundImgMap[collapsedChildren[i].id()], + }, + }); } - - actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}}); + + actions.push({ + name: "refreshColorSchemeMenu", + param: { value: newColorScheme, self: self, scheme_type: scheme_type }, + }); // set to be the default as well - for(var nodeClass in mapColorSchemes[newColorScheme]['values']){ - classBgColor = mapColorSchemes[newColorScheme]['values'][nodeClass]; - classBgImg = scheme_type == 'gradient' ? colorCodeToGradientImage[mapColorSchemes[newColorScheme]['values'][nodeClass]] : colorCodeTo3DImage[mapColorSchemes[newColorScheme]['values'][nodeClass]]; + for (var nodeClass in mapColorSchemes[newColorScheme]["values"]) { + classBgColor = mapColorSchemes[newColorScheme]["values"][nodeClass]; + classBgImg = + scheme_type == "gradient" + ? colorCodeToGradientImage[ + mapColorSchemes[newColorScheme]["values"][nodeClass] + ] + : colorCodeTo3DImage[ + mapColorSchemes[newColorScheme]["values"][nodeClass] + ]; // nodeClass may not be defined in the defaultProperties (for edges, for example) - if(nodeClass in chiseInstance.elementUtilities.getDefaultProperties()){ - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-color', value: classBgColor}}); - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-fit', value: 'cover'}}); - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-x', value: '50%'}}); - actions.push({name: "setDefaultProperty", param: {class: nodeClass, name: 'background-position-y', value: '50%'}}); - 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%'}}); - - + if (nodeClass in chiseInstance.elementUtilities.getDefaultProperties()) { + actions.push({ + name: "setDefaultProperty", + param: { + class: nodeClass, + name: "background-color", + value: classBgColor, + }, + }); + actions.push({ + name: "setDefaultProperty", + param: { class: nodeClass, name: "background-fit", value: "cover" }, + }); + actions.push({ + name: "setDefaultProperty", + param: { + class: nodeClass, + name: "background-position-x", + value: "50%", + }, + }); + actions.push({ + name: "setDefaultProperty", + param: { + class: nodeClass, + name: "background-position-y", + value: "50%", + }, + }); + 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%" }, + }); } } } - + return actions; }; // the 3 following functions are related to the handling of the dynamic image // used during drag and drop of palette nodes appUtilities.dragImageMouseMoveHandler = function (e) { - $("#drag-image").css({left:e.pageX, top:e.pageY}); + $("#drag-image").css({ left: e.pageX, top: e.pageY }); }; // get drag image for the given html value @@ -2096,20 +2419,28 @@ appUtilities.dragImageMouseMoveHandler = function (e) { // replaced by '-' char appUtilities.getDragImagePath = function (htmlValue) { var imgNameMap = { - 'SIF-macromolecule': 'macromolecule', - 'SIF-simple-chemical': 'simple-chemical' + "SIF-macromolecule": "macromolecule", + "SIF-simple-chemical": "simple-chemical", }; - var imgName = imgNameMap[ htmlValue ] || htmlValue; - var imgPath = 'app/img/nodes/' + imgName + '.svg'; + var imgName = imgNameMap[htmlValue] || htmlValue; + var imgPath = "app/img/nodes/" + imgName + ".svg"; return imgPath; -} +}; -appUtilities.addDragImage = function (imgPath, width, height){ +appUtilities.addDragImage = function (imgPath, width, height) { // see: http://stackoverflow.com/questions/38838508/make-a-dynamic-image-follow-mouse - $(document.body).append(''); + $(document.body).append( + '' + ); $(document).on("mousemove", appUtilities.dragImageMouseMoveHandler); }; @@ -2119,14 +2450,14 @@ appUtilities.removeDragImage = function () { }; appUtilities.getAllStyles = function (_cy, _nodes, _edges) { - // use _cy param if it is set else use the recently active cy instance var cy = _cy || appUtilities.getActiveCy(); var elementUtilities = this.getChiseInstance(cy).elementUtilities; var nodes = _nodes || cy.nodes(); var edges = _edges || cy.edges(); - var collapsedChildren = elementUtilities.getAllCollapsedChildrenRecursively(nodes); + var collapsedChildren = + elementUtilities.getAllCollapsedChildrenRecursively(nodes); var collapsedChildrenNodes = collapsedChildren.filter("node"); var allNodes = nodes.union(collapsedChildrenNodes); var collapsedChildrenEdges = collapsedChildren.filter("edge"); @@ -2137,84 +2468,87 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) { var imagesUsed = appUtilities.getImagesFromElements(nodes); 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', - 'font-weight': 'fontWeight', - 'font-style': 'fontStyle', - 'font-family': 'fontFamily', - 'color': 'fontColor', - 'background-image': 'backgroundImage', - 'background-fit': 'backgroundFit', - 'background-position-x': 'backgroundPosX', - 'background-position-y': 'backgroundPosY', - 'background-height': 'backgroundHeight', - 'background-width': 'backgroundWidth', - 'background-image-opacity': 'backgroundImageOpacity', - 'background-opacity': 'backgroundOpacity', + "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", + "font-weight": "fontWeight", + "font-style": "fontStyle", + "font-family": "fontFamily", + color: "fontColor", + "background-image": "backgroundImage", + "background-fit": "backgroundFit", + "background-position-x": "backgroundPosX", + "background-position-y": "backgroundPosY", + "background-height": "backgroundHeight", + "background-width": "backgroundWidth", + "background-image-opacity": "backgroundImageOpacity", + "background-opacity": "backgroundOpacity", }; var edgePropertiesToXml = { - 'line-color': 'stroke', - 'width': 'strokeWidth' + "line-color": "stroke", + width: "strokeWidth", }; var infoboxPropertiesToXml = { - 'background-color': 'fill', - 'border-color': 'stroke', - 'border-width': 'strokeWidth', - 'font-size': 'fontSize', - 'font-weight': 'fontWeight', - 'font-style': 'fontStyle', - 'font-family': 'fontFamily', - 'font-color': 'fontColor', - 'shape-name': 'shapeName' + "background-color": "fill", + "border-color": "stroke", + "border-width": "strokeWidth", + "font-size": "fontSize", + "font-weight": "fontWeight", + "font-style": "fontStyle", + "font-family": "fontFamily", + "font-color": "fontColor", + "shape-name": "shapeName", }; - function getInfoboxStyle( infobox, propName ) { - return infobox.style && infobox.style[ propName ]; + function getInfoboxStyle(infobox, propName) { + return infobox.style && infobox.style[propName]; } - function getElementData( ele, propName ) { + function getElementData(ele, propName) { return ele.data(propName); } - function getStyleHash (member, properties, _getFcn) { + function getStyleHash(member, properties, _getFcn) { var getFcn = _getFcn || getElementData; var hash = ""; - for(var cssProp in properties){ + for (var cssProp in properties) { if (getFcn(member, cssProp)) { - if(cssProp === 'background-image'){ + if (cssProp === "background-image") { var imgs = appUtilities.getValidImages(member); hash += appUtilities.getValidImageIDs(imgs, imagesUsed); - } - else - hash += getFcn(member, cssProp).toString(); - } - else { + } else hash += getFcn(member, cssProp).toString(); + } else { hash += ""; } } return hash; } - function getStyleProperties (member, properties, _getFcn) { + function getStyleProperties(member, properties, _getFcn) { getFcn = _getFcn || getElementData; var props = {}; - for(var cssProp in properties){ + for (var cssProp in properties) { if (getFcn(member, cssProp)) { //if it is a color property, replace it with corresponding id - if (cssProp == 'background-color' || cssProp == 'border-color' || cssProp == 'line-color') { + if ( + cssProp == "background-color" || + cssProp == "border-color" || + cssProp == "line-color" + ) { var validColor = appUtilities.getValidColor(member, cssProp, getFcn); var colorID = colorUsed[validColor]; props[properties[cssProp]] = colorID; } //if it is background image property, replace it with corresponding id - else if(cssProp == 'background-image'){ + else if (cssProp == "background-image") { var imgs = appUtilities.getValidImages(member); - props[properties[cssProp]] = appUtilities.getValidImageIDs(imgs, imagesUsed); - } - else{ + props[properties[cssProp]] = appUtilities.getValidImageIDs( + imgs, + imagesUsed + ); + } else { props[properties[cssProp]] = getFcn(member, cssProp); } } @@ -2228,39 +2562,40 @@ appUtilities.getAllStyles = function (_cy, _nodes, _edges) { return type; } - var getFcn = type === 'infobox' ? getInfoboxStyle : undefined; + var getFcn = type === "infobox" ? getInfoboxStyle : undefined; - for(var i=0; i 0){ + if (imgs && imagesUsed && imgs.length > 0) { var ids = []; - imgs.forEach(function(img){ + imgs.forEach(function (img) { ids.push(imagesUsed[img]); }); return ids.join(" "); - } - else{ + } else { return undefined; } -} +}; /* returns: { @@ -2340,63 +2677,61 @@ appUtilities.getColorsFromElements = function (nodes, edges) { var colorHash = {}; var colorID = 0; - var nodePropNames = ['background-color', 'border-color']; - var edgePropNames = ['line-color']; - var infoboxPropNames = ['background-color', 'border-color']; - var infoboxGetFcn = function( infobox, propName ) { - return infobox && infobox.style && infobox.style[ propName ]; + var nodePropNames = ["background-color", "border-color"]; + var edgePropNames = ["line-color"]; + var infoboxPropNames = ["background-color", "border-color"]; + var infoboxGetFcn = function (infobox, propName) { + return infobox && infobox.style && infobox.style[propName]; }; - nodes.forEach( function( n ) { - processMember( n, nodePropNames ); - var infoboxes = n.data('statesandinfos'); - infoboxes.forEach( function( i ) { - processMember( i, infoboxPropNames, infoboxGetFcn ); - } ); - } ); + nodes.forEach(function (n) { + processMember(n, nodePropNames); + var infoboxes = n.data("statesandinfos"); + infoboxes.forEach(function (i) { + processMember(i, infoboxPropNames, infoboxGetFcn); + }); + }); - edges.forEach( function( e ) { - processMember( e, edgePropNames ); - } ); + edges.forEach(function (e) { + processMember(e, edgePropNames); + }); function processMember(m, propNames, getFcn) { - propNames.forEach( function( propName ) { + propNames.forEach(function (propName) { var validColor = appUtilities.getValidColor(m, propName, getFcn); if (!colorHash[validColor]) { colorID++; - colorHash[validColor] = 'color_' + colorID; + colorHash[validColor] = "color_" + colorID; } - } ); + }); } return colorHash; -} +}; appUtilities.getImagesFromElements = function (nodes) { var imageHash = {}; var imageID = 0; - for(var i=0; i 0) - filename = filename[filename.length - 1]; - else - filename = 'remote'; + var filename = filepath.split("/"); + if (filename.length > 0) filename = filename[filename.length - 1]; + else filename = "remote"; - var fileExtension = filename.split('.'); - if(fileExtension.length > 0 && filename.indexOf('.') > -1) + var fileExtension = filename.split("."); + if (fileExtension.length > 0 && filename.indexOf(".") > -1) fileExtension = fileExtension[fileExtension.length - 1]; - else - fileExtension = 'txt'; + else fileExtension = "txt"; $.ajax({ - type: 'get', + type: "get", url: "/utilities/testURL", - data: {url: filepath}, - success: async function(data){ + data: { url: filepath }, + success: async function (data) { // here we can get 404 as well, for example, so there are still error cases to handle - var dataSize = data.response.body.length - if(dataSize>250000 && (fileExtension === "sbml" || fileExtension === "xml") ) - { - chiseInstance.showSpinnerText('paths-byURL-spinner') + var dataSize = data.response.body.length; + if ( + dataSize > 250000 && + (fileExtension === "sbml" || fileExtension === "xml") + ) { + chiseInstance.showSpinnerText("paths-byURL-spinner"); } - - if (!data.error && data.response.statusCode == 200 && data.response.body) { - $(document).trigger('sbgnvizLoadFromURL', [filename, cyInstance]); + + if ( + !data.error && + data.response.statusCode == 200 && + data.response.body + ) { + $(document).trigger("sbgnvizLoadFromURL", [filename, cyInstance]); var fileToLoad = new File([data.response.body], filename, { - type: 'text/' + fileExtension, - lastModified: Date.now() + type: "text/" + fileExtension, + lastModified: Date.now(), }); - 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 { - await chiseInstance.loadSBGNMLText(data.message, false, filename, cy, paramObj); - chiseInstance.endSpinner('paths-byURL-spinner') - - } - }); + if ( + fileExtension === "xml" || + fileExtension === "xml#" || + fileExtension === "sbml" || + fileExtension === "sbml#" + ) { } - else { - chiseInstance.loadNwtFile(fileToLoad, loadCallbackSBGNMLValidity, loadCallbackInvalidityWarning, paramObj); - chiseInstance.endSpinner('paths-byURL-spinner') + if (fileExtension === "gpml") { + 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"); + }); + + chiseInstance.endSpinner("paths-byURL-spinner"); + } else { + await chiseInstance.loadSBGNMLText( + data.message, + false, + filename, + cy, + paramObj + ); + chiseInstance.endSpinner("paths-byURL-spinner"); + } + }) + ); + } else if (fileExtension === "xml" || fileExtension === "sbml") { + // CD file + if (xmlObject.children.item(0).getAttribute("xmlns:celldesigner")) { + chiseInstance.loadCellDesigner( + 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"); + }); + + chiseInstance.endSpinner("paths-byURL-spinner"); + } else { + await chiseInstance.loadSBGNMLText( + data, + false, + filename, + cy, + paramObj + ); + chiseInstance.endSpinner("paths-byURL-spinner"); + } + }) + ); + } else { + // sbml file + 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"); } - } - else { + } else { loadCallbackInvalidityWarning(); - chiseInstance.endSpinner('paths-byURL-spinner') - + chiseInstance.endSpinner("paths-byURL-spinner"); } }, - error: function(xhr, options, err){ + error: function (xhr, options, err) { loadCallbackInvalidityWarning(); - chiseInstance.endSpinner('paths-byURL-spinner') - - } + chiseInstance.endSpinner("paths-byURL-spinner"); + }, }); - } - function loadFromURI(uri, chiseInstance, promptInvalidURIWarning){ - - var queryURL = "http://www.pathwaycommons.org/pc2/get?uri=" - + uri + "&format=SBGN"; + function loadFromURI(uri, chiseInstance, promptInvalidURIWarning) { + var queryURL = + "http://www.pathwaycommons.org/pc2/get?uri=" + uri + "&format=SBGN"; - var filename = uri + '.nwt'; + var filename = uri + ".nwt"; var cyInstance = chiseInstance.getCy(); - chiseInstance.startSpinner('paths-byURI-spinner'); + chiseInstance.startSpinner("paths-byURI-spinner"); - var currentLayoutProperties = appUtilities.getScratch(cyInstance, 'currentLayoutProperties'); + var currentLayoutProperties = appUtilities.getScratch( + cyInstance, + "currentLayoutProperties" + ); $.ajax({ - type: 'get', + type: "get", url: "/utilities/testURL", - data: {url: queryURL}, - success: function(data){ + data: { url: queryURL }, + success: function (data) { // here we can get 404 as well, for example, so there are still error cases to handle if (data.response.statusCode == 200 && data.response.body) { var xml = $.parseXML(data.response.body); - $(document).trigger('sbgnvizLoadFile', [filename, cyInstance]); - $(document).trigger('sbgnvizLoadFromURI', [filename, cyInstance]); - chiseInstance.updateGraph(chiseInstance.convertSbgnmlToJson(xml, paramObj), undefined, currentLayoutProperties); - chiseInstance.endSpinner('paths-byURI-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [filename, cyInstance]); - } - else { - chiseInstance.endSpinner('paths-byURI-spinner'); + $(document).trigger("sbgnvizLoadFile", [filename, cyInstance]); + $(document).trigger("sbgnvizLoadFromURI", [filename, cyInstance]); + chiseInstance.updateGraph( + chiseInstance.convertSbgnmlToJson(xml, paramObj), + undefined, + currentLayoutProperties + ); + chiseInstance.endSpinner("paths-byURI-spinner"); + $(document).trigger("sbgnvizLoadFileEnd", [filename, cyInstance]); + } else { + chiseInstance.endSpinner("paths-byURI-spinner"); promptInvalidURIWarning.render(); } }, - error: function(xhr, options, err){ - chiseInstance.endSpinner('paths-byURI-spinner'); - promptInvalidURIWarning.render(); } + error: function (xhr, options, err) { + chiseInstance.endSpinner("paths-byURI-spinner"); + promptInvalidURIWarning.render(); + }, }); } // returns an object that contains name-value pairs of query parameters function getQueryParameters(url) { - if (!url){ + if (!url) { url = window.location.href; } @@ -2665,26 +3105,25 @@ appUtilities.launchWithModelFile = function() { // Parse the query sting into an object please see: // https://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/ url.replace( - new RegExp("([^?=&]+)(=([^&#]*))?", "g"), - function($0, name, $2, value) { - if (value !== undefined) { - var lowerCaseName = name.toLowerCase(); - // for 'uri' and 'url' parameters provide case insensitivity by converting to lower case - if (lowerCaseName === 'url' || lowerCaseName === 'uri') { - name = lowerCaseName; - } - queryParams[name] = value; + new RegExp("([^?=&]+)(=([^&#]*))?", "g"), + function ($0, name, $2, value) { + if (value !== undefined) { + var lowerCaseName = name.toLowerCase(); + // for 'uri' and 'url' parameters provide case insensitivity by converting to lower case + if (lowerCaseName === "url" || lowerCaseName === "uri") { + name = lowerCaseName; } + queryParams[name] = value; } + } ); return queryParams; } -} - -appUtilities.navigateToOtherEnd = function(edge, mouse_rend, mouse_normal) { +}; - if(!edge.isEdge()){ +appUtilities.navigateToOtherEnd = function (edge, mouse_rend, mouse_normal) { + if (!edge.isEdge()) { return; } @@ -2694,41 +3133,54 @@ appUtilities.navigateToOtherEnd = function(edge, mouse_rend, mouse_normal) { var source_node = edge.source(); var target_node = edge.target(); - var source_position = {x: edge_pts[0], y: edge_pts[1]}; - var target_position = {x: edge_pts[edge_pts.length-2], y: edge_pts[edge_pts.length-1]}; + var source_position = { x: edge_pts[0], y: edge_pts[1] }; + var target_position = { + x: edge_pts[edge_pts.length - 2], + y: edge_pts[edge_pts.length - 1], + }; - var source_loc = Math.pow((mouse_normal.x - source_position.x), 2) + Math.pow((mouse_normal.y - source_position.y), 2); - var target_loc = Math.pow((mouse_normal.x - target_position.x), 2) + Math.pow((mouse_normal.y - target_position.y), 2); + var source_loc = + Math.pow(mouse_normal.x - source_position.x, 2) + + Math.pow(mouse_normal.y - source_position.y, 2); + var target_loc = + Math.pow(mouse_normal.x - target_position.x, 2) + + Math.pow(mouse_normal.y - target_position.y, 2); // Animation direction var source_to_target = source_loc < target_loc; // Change direction of points according to animation direction - if(!source_to_target){ + if (!source_to_target) { var new_edge_pts = []; - for(var i = edge_pts.length-1; i > 0; i=i-2){ - new_edge_pts.push(edge_pts[i-1], edge_pts[i]); + for (var i = edge_pts.length - 1; i > 0; i = i - 2) { + new_edge_pts.push(edge_pts[i - 1], edge_pts[i]); } edge_pts = new_edge_pts; } var starting_point = 0; var minimum; - for(var i = 0; i < edge_pts.length-3; i=i+2){ - var a_b = Math.pow((mouse_normal.x-edge_pts[i]), 2) + Math.pow((mouse_normal.y-edge_pts[i+1]), 2); + for (var i = 0; i < edge_pts.length - 3; i = i + 2) { + var a_b = + Math.pow(mouse_normal.x - edge_pts[i], 2) + + Math.pow(mouse_normal.y - edge_pts[i + 1], 2); a_b = Math.sqrt(a_b); - var b_c = Math.pow((mouse_normal.x-edge_pts[i+2]), 2) + Math.pow((mouse_normal.y-edge_pts[i+3]), 2); + var b_c = + Math.pow(mouse_normal.x - edge_pts[i + 2], 2) + + Math.pow(mouse_normal.y - edge_pts[i + 3], 2); b_c = Math.sqrt(b_c); - var a_c = Math.pow((edge_pts[i+2]-edge_pts[i]), 2) + Math.pow((edge_pts[i+3]-edge_pts[i+1]), 2); + var a_c = + Math.pow(edge_pts[i + 2] - edge_pts[i], 2) + + Math.pow(edge_pts[i + 3] - edge_pts[i + 1], 2); a_c = Math.sqrt(a_c); var difference = Math.abs(a_c - a_b - b_c); - if(minimum === undefined || minimum > difference){ + if (minimum === undefined || minimum > difference) { minimum = difference; - starting_point = i+2; + starting_point = i + 2; } } @@ -2736,29 +3188,26 @@ appUtilities.navigateToOtherEnd = function(edge, mouse_rend, mouse_normal) { var s_normal = start_node.position(); var s_rendered = start_node.renderedPosition(); var zoom_level = cy.zoom(); - var finished = (edge_pts.length-starting_point-1)/2; + var finished = (edge_pts.length - starting_point - 1) / 2; start_node.select(); // Animate for each bend point - for(var i = starting_point; i < edge_pts.length-1; i=i+2){ + for (var i = starting_point; i < edge_pts.length - 1; i = i + 2) { // Convert normal position into rendered position var rend_x = (edge_pts[i] - s_normal.x) * zoom_level + s_rendered.x; - var rend_y = (edge_pts[i+1] - s_normal.y) * zoom_level + s_rendered.y; + var rend_y = (edge_pts[i + 1] - s_normal.y) * zoom_level + s_rendered.y; cy.animate({ - duration: 1400, - panBy: {x: (mouse_rend.x-rend_x), y: (mouse_rend.y-rend_y)}, - easing: 'ease', - complete: function(){ - finished--; - if(finished <= 0) - (source_to_target ? target_node : source_node).select(); - } + duration: 1400, + panBy: { x: mouse_rend.x - rend_x, y: mouse_rend.y - rend_y }, + easing: "ease", + complete: function () { + finished--; + if (finished <= 0) + (source_to_target ? target_node : source_node).select(); + }, }); } - - - -} +}; //Info-box drag handlers appUtilities.relocationDragHandler; @@ -2767,11 +3216,15 @@ appUtilities.RelocationHandler; var relocatedNode; //Enables info-box relocation if a node is selected -appUtilities.relocateInfoBoxes = function(node){ +appUtilities.relocateInfoBoxes = function (node) { var cy = this.getActiveCy(); this.disableInfoBoxRelocation(); //Abort if node has no info-boxes or selected ele is not a node - if (node.data("auxunitlayouts") === undefined || node.data("statesandinfos").length === 0 || !node.isNode()) { + if ( + node.data("auxunitlayouts") === undefined || + node.data("statesandinfos").length === 0 || + !node.isNode() + ) { this.disableInfoBoxRelocation(); return; } @@ -2780,21 +3233,29 @@ appUtilities.relocateInfoBoxes = function(node){ relocatedNode = node; //Call undo-redo relocate function - cy.undoRedo().do("relocateInfoBoxes", {node}); - -} + cy.undoRedo().do("relocateInfoBoxes", { node }); +}; //Checks whether a info-box is selected in a given mouse position -appUtilities.checkMouseContainsInfoBox = function(cy, unit, mouse_down_x, mouse_down_y){ +appUtilities.checkMouseContainsInfoBox = function ( + cy, + unit, + mouse_down_x, + mouse_down_y +) { var box = unit.bbox; var instance = this.getActiveSbgnvizInstance(); var coords = instance.classes.AuxiliaryUnit.getAbsoluteCoord(unit, cy); - return ((mouse_down_x >= coords.x - box.w / 2) && (mouse_down_x <= coords.x + box.w / 2)) - && ( (mouse_down_y >= coords.y - box.h / 2) && (mouse_down_y <= coords.y + box.h / 2)); -} + return ( + mouse_down_x >= coords.x - box.w / 2 && + mouse_down_x <= coords.x + box.w / 2 && + mouse_down_y >= coords.y - box.h / 2 && + mouse_down_y <= coords.y + box.h / 2 + ); +}; //Enables info-box appUtilities.RelocationHandler -appUtilities.enableInfoBoxRelocation = function(node){ +appUtilities.enableInfoBoxRelocation = function (node) { var cy = this.getActiveCy(); //Disable box movements var oldColor = node.data("border-color"); @@ -2803,13 +3264,15 @@ appUtilities.enableInfoBoxRelocation = function(node){ node.data("border-width", Math.max(1, oldWidth)); var selectedBox; var anchorSide; - $(document).on('mousedown', appUtilities.RelocationHandler = function(event){ + $(document).on( + "mousedown", + (appUtilities.RelocationHandler = function (event) { //Check whether event contained by infobox of a node //Lock the node so that it won't change position when //Info boxes are dragged cy.autounselectify(true); cy.autolock(true); - var statesandinfos = node.data('statesandinfos'); + var statesandinfos = node.data("statesandinfos"); //Check if event is on cy canvas var containerPos = $(cy.container()).position(); @@ -2817,12 +3280,25 @@ appUtilities.enableInfoBoxRelocation = function(node){ var containerHeight = $(cy.container()).height(); //Get mouse positions - var mouse_down_x = (event.pageX - containerPos.left - cy.pan().x)/cy.zoom(); - var mouse_down_y = (event.pageY - containerPos.top - cy.pan().y)/cy.zoom(); + var mouse_down_x = + (event.pageX - containerPos.left - cy.pan().x) / cy.zoom(); + var mouse_down_y = + (event.pageY - containerPos.top - cy.pan().y) / cy.zoom(); var instance = appUtilities.getActiveSbgnvizInstance(); var oldAnchorSide; //Hold old anchor side to modify units - for (var i = 0; i < statesandinfos.length && selectedBox === undefined; i++) { - if(appUtilities.checkMouseContainsInfoBox(cy, statesandinfos[i], mouse_down_x, mouse_down_y)) { + for ( + var i = 0; + i < statesandinfos.length && selectedBox === undefined; + i++ + ) { + if ( + appUtilities.checkMouseContainsInfoBox( + cy, + statesandinfos[i], + mouse_down_x, + mouse_down_y + ) + ) { selectedBox = statesandinfos[i]; oldAnchorSide = selectedBox.anchorSide; break; @@ -2830,7 +3306,8 @@ appUtilities.enableInfoBoxRelocation = function(node){ } //If no info-box found abort - if (selectedBox === undefined || event.which !== 1) { //If event is not a right left click disable relocation + if (selectedBox === undefined || event.which !== 1) { + //If event is not a right left click disable relocation appUtilities.disableInfoBoxRelocation(); node.data("border-color", oldColor); node.data("border-width", oldWidth); @@ -2846,174 +3323,262 @@ appUtilities.enableInfoBoxRelocation = function(node){ var parentWidth = node.width(); var parentHeight = node.height(); var padding = node.padding(); - var parentX1 = position.x - parentWidth/2 - padding; - var parentX2 = position.x + parentWidth/2 + padding; - var parentY1 = position.y - parentHeight/2 - padding; - var parentY2 = position.y + parentHeight/2 + padding; - cy.on("mousemove", appUtilities.relocationDragHandler = function(event){ - if (selectedBox === undefined) { //If selected box is undefined somehow abort - appUtilities.disableInfoBoxRelocation(); - node.data("border-color", oldColor); - node.data("border-width", oldWidth); - relocatedNode = undefined; - return; - } - //Clear visual cues during relocation - cy.expandCollapse('get').clearVisualCue(node); - var drag_x = event.position.x; - var drag_y = event.position.y; - var anchorSide = selectedBox.anchorSide; - - - //If anchor side is top or bottom only move in x direction - if (anchorSide === "top" || anchorSide === "bottom") { - - - //Get absolute position - var newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, drag_x, selectedBox.bbox.y, cy); - if (newRelativeCoords.x < 0) { - selectedBox.bbox.x = 0; - } - else if (newRelativeCoords.x > 100) { //Box cannot go futher than parentBox - margin on right side - selectedBox.bbox.x = 100; - } - else { //Else it is already relative - selectedBox.bbox.x = newRelativeCoords.x; + var parentX1 = position.x - parentWidth / 2 - padding; + var parentX2 = position.x + parentWidth / 2 + padding; + var parentY1 = position.y - parentHeight / 2 - padding; + var parentY2 = position.y + parentHeight / 2 + padding; + cy.on( + "mousemove", + (appUtilities.relocationDragHandler = function (event) { + if (selectedBox === undefined) { + //If selected box is undefined somehow abort + appUtilities.disableInfoBoxRelocation(); + node.data("border-color", oldColor); + node.data("border-width", oldWidth); + relocatedNode = undefined; + return; } - //If box is at margin points allow it to change anchor side - //If it on left it can pass left anchor side - var absoluteCoords = instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(selectedBox, selectedBox.bbox.x, selectedBox.bbox.y, cy); //Get current absolute coords - if (Number(absoluteCoords.x.toFixed(2))=== Number(parentX1.toFixed(2))) { //If it is on the left margin allow it to change anchor sides - //If it is in the top and mouse moves bottom it can go left anchor - if (last_mouse_y < drag_y && anchorSide === "top") { - selectedBox.anchorSide = "left"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), - (parentY1), cy); + //Clear visual cues during relocation + cy.expandCollapse("get").clearVisualCue(node); + var drag_x = event.position.x; + var drag_y = event.position.y; + var anchorSide = selectedBox.anchorSide; + + //If anchor side is top or bottom only move in x direction + if (anchorSide === "top" || anchorSide === "bottom") { + //Get absolute position + var newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + drag_x, + selectedBox.bbox.y, + cy + ); + if (newRelativeCoords.x < 0) { + selectedBox.bbox.x = 0; + } else if (newRelativeCoords.x > 100) { + //Box cannot go futher than parentBox - margin on right side + selectedBox.bbox.x = 100; + } else { + //Else it is already relative selectedBox.bbox.x = newRelativeCoords.x; - selectedBox.bbox.y = newRelativeCoords.y; } - else if (last_mouse_y > drag_y && anchorSide === "bottom") { //If it is in the bottom and mouse moves up it can go left anchor side - selectedBox.anchorSide = "left"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), - (parentY2), cy); - selectedBox.bbox.x = newRelativeCoords.x; - selectedBox.bbox.y = newRelativeCoords.y; + //If box is at margin points allow it to change anchor side + //If it on left it can pass left anchor side + var absoluteCoords = + instance.classes.AuxiliaryUnit.convertToAbsoluteCoord( + selectedBox, + selectedBox.bbox.x, + selectedBox.bbox.y, + cy + ); //Get current absolute coords + if ( + Number(absoluteCoords.x.toFixed(2)) === + Number(parentX1.toFixed(2)) + ) { + //If it is on the left margin allow it to change anchor sides + //If it is in the top and mouse moves bottom it can go left anchor + if (last_mouse_y < drag_y && anchorSide === "top") { + selectedBox.anchorSide = "left"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX1, + parentY1, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } else if (last_mouse_y > drag_y && anchorSide === "bottom") { + //If it is in the bottom and mouse moves up it can go left anchor side + selectedBox.anchorSide = "left"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX1, + parentY2, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } } - } - //If it on right it can pass right anchor side - else if (Number(absoluteCoords.x.toFixed(2)) === Number(parentX2.toFixed(2))) { - if (last_mouse_y < drag_y && anchorSide === "top") { - selectedBox.anchorSide = "right"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), - (parentY1), cy); - selectedBox.bbox.x = newRelativeCoords.x; - selectedBox.bbox.y = newRelativeCoords.y; + //If it on right it can pass right anchor side + else if ( + Number(absoluteCoords.x.toFixed(2)) === + Number(parentX2.toFixed(2)) + ) { + if (last_mouse_y < drag_y && anchorSide === "top") { + selectedBox.anchorSide = "right"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX2, + parentY1, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } else if (last_mouse_y > drag_y && anchorSide === "bottom") { + //If it is in the bottom and mouse moves up it can go left anchor side + selectedBox.anchorSide = "right"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX2, + parentY2, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } } - else if (last_mouse_y > drag_y && anchorSide === "bottom") { //If it is in the bottom and mouse moves up it can go left anchor side - selectedBox.anchorSide = "right"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), - (parentY2), cy); - selectedBox.bbox.x = newRelativeCoords.x; + } else { + //If anchor side left or right only move in y direction + + //Get absolute position + var newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + selectedBox.bbox.x, + drag_y, + cy + ); + + if (newRelativeCoords.y < 0) { + //Box cannot go futher than parentBox + margin on left side + + selectedBox.bbox.y = 0; + } else if (newRelativeCoords.y > 100) { + //Box cannot go futher than parentBox - margin on right side + + selectedBox.bbox.y = 100; + } else { + //Else it is already relative selectedBox.bbox.y = newRelativeCoords.y; } - } - } - else { - //If anchor side left or right only move in y direction - - - //Get absolute position - var newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, selectedBox.bbox.x, drag_y, cy); - - if (newRelativeCoords.y< 0) { //Box cannot go futher than parentBox + margin on left side - - selectedBox.bbox.y = 0; - } - else if (newRelativeCoords.y > 100) { //Box cannot go futher than parentBox - margin on right side - - selectedBox.bbox.y = 100; - } - else { //Else it is already relative - selectedBox.bbox.y = newRelativeCoords.y; - } - var absoluteCoords = instance.classes.AuxiliaryUnit.convertToAbsoluteCoord(selectedBox, selectedBox.bbox.x, selectedBox.bbox.y, cy); - //Set anchor side changes - if (Number(absoluteCoords.y.toFixed(2)) === Number(parentY1.toFixed(2))) { //If it is on the top margin allow it to change anchor sides - //If it is in the top and mouse moves bottom it can go left anchor - if (last_mouse_x < drag_x && anchorSide === "left") { - selectedBox.anchorSide = "top"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), (parentY1), cy); - selectedBox.bbox.x = newRelativeCoords.x; - selectedBox.bbox.y = newRelativeCoords.y; - } - else if (last_mouse_x > drag_x && anchorSide === "right") { //If it is in the right and mouse moves up it can go top anchor side - selectedBox.anchorSide = "top"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), (parentY1), cy); - selectedBox.bbox.x = newRelativeCoords.x; - selectedBox.bbox.y = newRelativeCoords.y; - } - } - //If it on right it can pass right anchor side - else if (Number(absoluteCoords.y.toFixed(2)) === Number(parentY2.toFixed(2))) { - if (last_mouse_x < drag_x && anchorSide === "left") { - selectedBox.anchorSide = "bottom"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX1), (parentY2), cy); - selectedBox.bbox.x = newRelativeCoords.x; - selectedBox.bbox.y = newRelativeCoords.y; + var absoluteCoords = + instance.classes.AuxiliaryUnit.convertToAbsoluteCoord( + selectedBox, + selectedBox.bbox.x, + selectedBox.bbox.y, + cy + ); + //Set anchor side changes + if ( + Number(absoluteCoords.y.toFixed(2)) === + Number(parentY1.toFixed(2)) + ) { + //If it is on the top margin allow it to change anchor sides + //If it is in the top and mouse moves bottom it can go left anchor + if (last_mouse_x < drag_x && anchorSide === "left") { + selectedBox.anchorSide = "top"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX1, + parentY1, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } else if (last_mouse_x > drag_x && anchorSide === "right") { + //If it is in the right and mouse moves up it can go top anchor side + selectedBox.anchorSide = "top"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX2, + parentY1, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } } - else if (last_mouse_x > drag_x && anchorSide === "right") { //If it is in the bottom and mouse moves up it can go left anchor side - selectedBox.anchorSide = "bottom"; //Set new anchor side - newRelativeCoords = instance.classes.AuxiliaryUnit.convertToRelativeCoord(selectedBox, (parentX2), (parentY2), cy); - selectedBox.bbox.x = newRelativeCoords.x; - selectedBox.bbox.y = newRelativeCoords.y; + //If it on right it can pass right anchor side + else if ( + Number(absoluteCoords.y.toFixed(2)) === + Number(parentY2.toFixed(2)) + ) { + if (last_mouse_x < drag_x && anchorSide === "left") { + selectedBox.anchorSide = "bottom"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX1, + parentY2, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } else if (last_mouse_x > drag_x && anchorSide === "right") { + //If it is in the bottom and mouse moves up it can go left anchor side + selectedBox.anchorSide = "bottom"; //Set new anchor side + newRelativeCoords = + instance.classes.AuxiliaryUnit.convertToRelativeCoord( + selectedBox, + parentX2, + parentY2, + cy + ); + selectedBox.bbox.x = newRelativeCoords.x; + selectedBox.bbox.y = newRelativeCoords.y; + } } } + last_mouse_x = drag_x; + last_mouse_y = drag_y; + + //TODO find a way to elimate this redundancy to update info-box positions + node.data("border-width", node.data("border-width")); + }) + ); + + cy.on("mouseup", function (event) { + appUtilities.disableInfoBoxRelocationDrag(); + if (selectedBox !== undefined && oldAnchorSide !== undefined) { + selectedBox.style.dashed = false; + instance.classes.AuxUnitLayout.modifyUnits( + node, + selectedBox, + oldAnchorSide, + cy + ); //Modify aux unit layouts + selectedBox = undefined; + anchorSide = undefined; + oldAnchorSide = undefined; + cy.autolock(false); } + }); + }) + ); +}; - last_mouse_x = drag_x; - last_mouse_y = drag_y; - - //TODO find a way to elimate this redundancy to update info-box positions - node.data('border-width', node.data('border-width')); - - }); - - cy.on("mouseup", function(event){ - appUtilities.disableInfoBoxRelocationDrag(); - if (selectedBox !== undefined && oldAnchorSide !== undefined) { - selectedBox.style.dashed = false; - instance.classes.AuxUnitLayout.modifyUnits(node, selectedBox, oldAnchorSide, cy); //Modify aux unit layouts - selectedBox = undefined; - anchorSide = undefined; - oldAnchorSide = undefined; - cy.autolock(false); - } - }); - - }); -} - -appUtilities.getDefaultEmptyInfoboxObj = function( type ) { +appUtilities.getDefaultEmptyInfoboxObj = function (type) { var cy = appUtilities.getActiveCy(); // access current general properties for active instance - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); + var currentGeneralProperties = appUtilities.getScratch( + cy, + "currentGeneralProperties" + ); var obj = {}; obj.clazz = type; switch (type) { - case 'unit of information': + case "unit of information": obj.label = { - text: "" + text: "", }; break; - case 'state variable': + case "state variable": obj.state = { value: "", - variable: "" + variable: "", }; break; } @@ -3022,11 +3587,11 @@ appUtilities.getDefaultEmptyInfoboxObj = function( type ) { }; //Disables info-box relocation -appUtilities.disableInfoBoxRelocation = function(color){ +appUtilities.disableInfoBoxRelocation = function (color) { var cy = this.getActiveCy(); if (appUtilities.RelocationHandler !== undefined) { //Remove listerners - $(document).off('mousedown', appUtilities.RelocationHandler); + $(document).off("mousedown", appUtilities.RelocationHandler); appUtilities.disableInfoBoxRelocationDrag(); if (relocatedNode !== undefined) { relocatedNode.data("border-color", color); @@ -3037,72 +3602,72 @@ appUtilities.disableInfoBoxRelocation = function(color){ } cy.autolock(false); //Make the nodes moveable again cy.autounselectify(false); //Make the nodes selectable - }; //Disables info-box dragging -appUtilities.disableInfoBoxRelocationDrag = function(){ +appUtilities.disableInfoBoxRelocationDrag = function () { if (appUtilities.relocationDragHandler !== undefined) { var cy = this.getActiveCy(); //Remove listerners - cy.off('mousemove', appUtilities.relocationDragHandler); + cy.off("mousemove", appUtilities.relocationDragHandler); appUtilities.relocationDragHandler = undefined; } }; appUtilities.modifyUnits = function (node, ele, anchorSide) { - var cy = this.getActiveCy(); - var instance = appUtilities.getActiveSbgnvizInstance(); - instance.classes.AuxUnitLayout.modifyUnits(node, ele, anchorSide, cy); //Modify aux unit layouts + var cy = this.getActiveCy(); + var instance = appUtilities.getActiveSbgnvizInstance(); + instance.classes.AuxUnitLayout.modifyUnits(node, ele, anchorSide, cy); //Modify aux unit layouts }; -appUtilities.resizeNodesToContent = function(nodes){ - +appUtilities.resizeNodesToContent = function (nodes) { var chiseInstance = appUtilities.getActiveChiseInstance(); var cy = appUtilities.getActiveCy(); var collection; - if(nodes.length == 1){ - collection = cy.collection(); - collection = collection.add(nodes[0]); - }else{ + if (nodes.length == 1) { + collection = cy.collection(); + collection = collection.add(nodes[0]); + } else { collection = nodes; - } + } - if(!chiseInstance.areCompoundSizesConsidered()){ - collection = collection.difference(":parent,[class*='compartment'],[class*='submap']"); + if (!chiseInstance.areCompoundSizesConsidered()) { + collection = collection.difference( + ":parent,[class*='compartment'],[class*='submap']" + ); } chiseInstance.resizeNodesToContent(collection, false); - cy.nodeResize('get').refreshGrapples(); - cy.expandCollapse('get').clearVisualCue(); + cy.nodeResize("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'); - }; - + 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') { +appUtilities.transformClassInfo = function (classInfo) { + var res = classInfo.replace(" multimer", ""); + if (res == "and" || res == "or" || res == "not") { res = res.toUpperCase(); - } - else { + } else { res = res.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); - res = res.replace(' Of ', ' of '); - res = res.replace(' And ', ' and '); - res = res.replace(' Or ', ' or '); - res = res.replace(' Not ', ' not '); + res = res.replace(" Of ", " of "); + res = res.replace(" And ", " and "); + res = res.replace(" Or ", " or "); + res = res.replace(" Not ", " not "); } - if (res == "Ba Plain"){ + if (res == "Ba Plain") { res = "BA"; - } - else if (res.includes("Ba ")){ + } else if (res.includes("Ba ")) { res = "BA " + res.substr(3); - } - else if (res.includes("Sif ")) { + } else if (res.includes("Sif ")) { res = "SIF " + res.substr(3); } @@ -3115,14 +3680,12 @@ appUtilities.transformClassInfo = function( classInfo ) { // var experimentNames = chiseInstance.getGroupedDataMap(); // //console.log(experimentNames.length()); - - // return experimentNames; // }; // appUtilities.setExperimentNames = function(files) // { // console.log("experiment names in set experimentNames"); - + // // currentExperimentProperties.experimentDescription = files; // appUtilities.experimentTabPanel.render(); // } diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js index 2e3fc98a6..5f84fdcc3 100644 --- a/app/js/backbone-views.js +++ b/app/js/backbone-views.js @@ -1,12 +1,12 @@ -var jquery = $ = require('jquery'); -var _ = require('underscore'); -var Backbone = require('backbone'); -var chroma = require('chroma-js'); -var FileSaver = require('file-saver'); +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 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 +186,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 +249,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 +261,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 +276,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 +288,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 +392,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,24 +414,38 @@ 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; @@ -400,25 +455,42 @@ var ColorSchemeInspectorView = Backbone.View.extend({ // 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); }); - $(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 + ); + } + ); $(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); @@ -426,54 +498,65 @@ var ColorSchemeInspectorView = Backbone.View.extend({ $(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 }); - }, - 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 +564,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 +577,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.nodeResize("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 +688,343 @@ 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) { - - var callback = function(){ - $('#map-type').val(chiseInstance.getMapType()); + var callback = function () { + $("#map-type").val(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, + }); 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") && + 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") { + 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" + ) { + 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" + ) { + checkType = false; } } - validChange = checkType; - - }else{ + validChange = checkType; + } 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" + ) { + 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, + }); + //chiseInstance.elementUtilities.setMapType(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, + { + "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, + } + ); + 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, + { + "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, + } + ); + 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"; @@ -845,278 +1036,409 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({ }); $(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 +1464,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 +1476,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 +1517,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 +1550,33 @@ 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; // 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 () { + sortTable(document.getElementById("map-exp-table"), i); }); } 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 +1587,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 +1607,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 +1635,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 +1650,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 +1675,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 +1688,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 +1703,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 +1729,159 @@ 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 + ) { + 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 +1892,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 +1905,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 +1977,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 +1997,7 @@ var PCdialog = ""; var NeighborhoodQueryView = Backbone.View.extend({ defaultQueryParameters: { geneSymbols: "", - lengthLimit: 1 + lengthLimit: 1, }, currentQueryParameters: null, initialize: function () { @@ -1647,689 +2010,899 @@ 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(); + $(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(); + // 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); + 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) { + 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(" "); + } + // 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 filename = ""; - var sources = ""; - for (var i = 0; i < geneSymbolsArray.length; i++) { - var currentGeneSymbol = geneSymbolsArray[i]; - if (currentGeneSymbol.length == 0 || currentGeneSymbol == ' ' - || currentGeneSymbol == '\n' || currentGeneSymbol == '\t') { + 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; + } + sources = sources + "&source=" + currentGeneSymbol; - if (filename == '') { + if (filename == "") { filename = currentGeneSymbol; - } else { - filename = filename + '_' + currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } } - } - 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'); - } - }); - - $(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'); + 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', + 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 ]); - } - else { - new PromptInvalidQueryView({el: '#prompt-invalidQuery-table'}).render(); - chiseInstance.endSpinner('neighborhood-spinner'); + 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'); - } + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("neighborhood-spinner"); + }, }); - $(self.el).modal('toggle'); - - }); - - } - - }); + $(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" + ); + + $.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"); + }, + }); + + $(self.el).modal("toggle"); + }); + } + }); - $(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 () { + 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); - 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"; - $(self.el).modal('show'); - PCdialog = "PathsBetween"; + $(document) + .off("click", "#save-query-pathsbetween") + .on("click", "#save-query-pathsbetween", function (evt) { + // use active chise instance + var chiseInstance = appUtilities.getActiveChiseInstance(); - $(document).off("click", "#save-query-pathsbetween").on("click", "#save-query-pathsbetween", function (evt) { + // use the associated cy instance + var cy = chiseInstance.getCy(); - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); + self.currentQueryParameters.geneSymbols = document.getElementById( + "query-pathsbetween-gene-symbols" + ).value; + self.currentQueryParameters.lengthLimit = Number( + document.getElementById("query-pathsbetween-length-limit").value + ); - // use the associated cy instance - var cy = chiseInstance.getCy(); + 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; + } - self.currentQueryParameters.geneSymbols = document.getElementById("query-pathsbetween-gene-symbols").value; - self.currentQueryParameters.lengthLimit = Number(document.getElementById("query-pathsbetween-length-limit").value); + 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 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; - } + if (filename == "") { + filename = currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } + } + 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" + ); - 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; + $.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"); + }, + }); - if (filename == '') { - filename = currentGeneSymbol; + $(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 { - filename = filename + '_' + currentGeneSymbol; - } - } - 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'); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("paths-between-spinner"); } - }); - - $(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'); - - }); - - } - - }); + }, + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("paths-between-spinner"); + }, + }); + + $(self.el).modal("toggle"); + }); + } + }); - $(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(); + 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); - // use the associated cy instance - var cy = chiseInstance.getCy(); + $(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; + } - 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 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; + } - 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; - } + 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 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; - } + 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; - if (self.currentQueryParameters.lengthLimit > 3) { - $(self.el).modal('toggle'); - new PromptInvalidLengthLimitView({el: '#prompt-invalidLengthLimit-table'}).render(); - document.getElementById("query-pathsfromto-length-limit").focus(); - return; - } + 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; - 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; + if (filename == "") { + filename = currentGeneSymbol; + } else { + filename = filename + "_" + currentGeneSymbol; + } + } + 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" + ); - 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; + $.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"); + }, + }); - if (filename == '') { - filename = currentGeneSymbol; + $(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 { - filename = filename + '_' + currentGeneSymbol; - } - } - 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'); + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("paths-fromto-spinner"); } - }); - - $(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'); - - }); - - } - - }); + }, + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("paths-fromto-spinner"); + }, + }); + + $(self.el).modal("toggle"); + }); + } + }); - $(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 () { - - 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"; + 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); - $(document).off("click", "#save-query-commonstream").on("click", "#save-query-commonstream", function (evt) { + $(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(); - // use active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); + self.currentQueryParameters.geneSymbols = document.getElementById( + "query-commonstream-gene-symbols" + ).value; + self.currentQueryParameters.lengthLimit = Number( + document.getElementById("query-commonstream-length-limit").value + ); - // use the associated cy instance - var cy = chiseInstance.getCy(); + 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 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 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; + + 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" + ); - 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; + $.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"); + }, + }); - if (filename == '') { - filename = currentGeneSymbol; + $(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 { - filename = filename + '_' + currentGeneSymbol; + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("common-stream-spinner"); } - } - 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'); - } - }); - - $(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'); - - }); - - } - }); + }, + error: function (xhr, options, err) { + new PromptInvalidQueryView({ + el: "#prompt-invalidQuery-table", + }).render(); + chiseInstance.endSpinner("common-stream-spinner"); + }, + }); + + $(self.el).modal("toggle"); + }); + } + }); - $(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 +2920,164 @@ var PathsByURIQueryView = Backbone.View.extend({ self.template = self.template(self.currentQueryParameters); $(self.el).html(self.template); - $(self.el).modal('show'); - - $(document).off("click", "#save-query-pathsbyURI").on("click", "#save-query-pathsbyURI", function (evt) { - + $(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 active chise instance - var chiseInstance = appUtilities.getActiveChiseInstance(); - - // use the associated cy instance - var cy = chiseInstance.getCy(); + // use the associated cy instance + var cy = chiseInstance.getCy(); - self.currentQueryParameters.URI = document.getElementById("query-pathsbyURI-URI").value; - var uri = self.currentQueryParameters.URI.trim(); + self.currentQueryParameters.URI = document.getElementById( + "query-pathsbyURI-URI" + ).value; + var uri = self.currentQueryParameters.URI.trim(); - if (uri.length === 0) { + 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(); + } + // 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"; + var queryURL = + "http://www.pathwaycommons.org/pc2/get?uri=" + uri + "&format=SBGN"; - var filename = ""; + var filename = ""; - if (filename == '') { + if (filename == "") { filename = uri; - } else { - filename = filename + '_' + uri; - } - - 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'); - } - }); - - $(self.el).modal('toggle'); - - } - else{ - - new PromptConfirmationView({el: '#prompt-confirmation-table'}).render(function(){ + } else { + filename = filename + "_" + uri; + } - chiseInstance.startSpinner('paths-byURI-spinner'); - var currentGeneralProperties = appUtilities.getScratch(cy, 'currentGeneralProperties'); - var currentInferNestingOnLoad = currentGeneralProperties.inferNestingOnLoad; - var currentLayoutProperties = appUtilities.getScratch(cy, 'currentLayoutProperties'); + 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', + 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('paths-byURI-spinner'); - $(document).trigger('sbgnvizLoadFileEnd', [ filename, cy ]); - } - else { - new PromptInvalidURIView({el: '#prompt-invalidURI-table'}).render(); - chiseInstance.endSpinner('paths-byURI-spinner'); + 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'); - } + error: function (xhr, options, err) { + new PromptInvalidURIView({ + el: "#prompt-invalidURI-table", + }).render(); + chiseInstance.endSpinner("paths-byURI-spinner"); + }, }); - $(self.el).modal('toggle'); - - }); - - } - - }); + $(self.el).modal("toggle"); + } else { + new PromptConfirmationView({ + el: "#prompt-confirmation-table", + }).render(function () { + 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"); + }, + }); + + $(self.el).modal("toggle"); + }); + } + }); - $(document).off("click", "#cancel-query-pathsbyURI").on("click", "#cancel-query-pathsbyURI", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#cancel-query-pathsbyURI") + .on("click", "#cancel-query-pathsbyURI", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); /* @@ -2480,7 +3088,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 +3097,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; - } + }, }); /* @@ -2529,132 +3142,190 @@ var FileSaveView = Backbone.View.extend({ self.template = _.template($("#file-save-template").html()); $(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")){ + $(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 'sbgn': - fExt = 'sbgn' + case "sif": + fExt = "sif"; break; - case 'sbml': - fExt = 'sbml' + case "sifLayout": + fExt = "txt"; break; - case 'celldesigner': + case "png": + fExt = "png"; + break; + case "jpg": + fExt = "jpg"; + break; + 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) { - - // 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(); - appUtilities.setFileContent(filename); + $(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(); + appUtilities.setFileContent(filename); + + 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") { + saveAsFcn = chiseInstance.saveAsSbgnml; + } - 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 nodes, edges; - var saveAsFcn = chiseInstance.saveAsNwt; - if ( fileformat === "sbgn" ) { - saveAsFcn = chiseInstance.saveAsSbgnml; - } - - var nodes, edges; + if (fileformat === "sbgn") { + if (chiseInstance.elementUtilities.mapType === "SIF") { + properties.mapType = "Unknown"; + } - if ( fileformat === "sbgn" ) { - if (chiseInstance.elementUtilities.mapType === 'SIF') { - properties.mapType = 'Unknown'; + 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 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")); + }); } - nodes = cy.nodes().filter( function( node ) { - return !chiseInstance.elementUtilities.isSIFNode( node ); - } ); + renderInfo = appUtilities.getAllStyles(cy, nodes, edges); - 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') ); - } ); + // 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 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); - - // 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 { // invalid file format provided - console.error("FileSaveView received unsupported file format: "+fileformat); - } - - $(self.el).modal('toggle'); - }); + $(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; - } + }, }); /* @@ -2665,353 +3336,553 @@ 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("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"] + ); + }); + + 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 + ); + } + + 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); + } } - - } - }); - } - }); - - } - + }); + } + }); + } + } + }); } - }); - } - - - $(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; - } + }, }); /* @@ -3027,19 +3898,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) { + afterFunction(); + $(self.el).modal("toggle"); + }); - $(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({ @@ -3047,131 +3922,144 @@ 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({ initialize: function () { - var self = this; - self.template = _.template($("#prompt-invalidQuery-template").html()); + var self = this; + self.template = _.template($("#prompt-invalidQuery-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-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(); }); - return this; - } + return this; + }, }); 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()); + 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).html(self.template); + 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") - 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 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()); + 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'); + $(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(); - }); + $(document) + .off("click", "#prompt-invalidURI-confirm") + .on("click", "#prompt-invalidURI-confirm", function (evt) { + $(self.el).modal("toggle"); + appUtilities.pathsByURIQueryView.render(); + }); - 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()); + 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'); + $(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'); - }); + $(document) + .off("click", "#prompt-invalidURI-confirm") + .on("click", "#prompt-invalidURI-confirm", function (evt) { + $(self.el).modal("toggle"); + }); - return this; - } + return this; + }, }); var PromptInvalidFileView = Backbone.View.extend({ @@ -3184,85 +4072,116 @@ var PromptInvalidFileView = Backbone.View.extend({ self.template = _.template($("#prompt-invalidFile-template").html()); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); - $(document).off("click", "#prompt-invalidFile-confirm").on("click", "#prompt-invalidFile-confirm", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-invalidFile-confirm") + .on("click", "#prompt-invalidFile-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; - } + 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 PromptSbmlConversionErrorView = Backbone.View.extend({ initialize: function () { var self = this; - self.template = _.template($("#prompt-sbmlConversionError-template").html()); + self.template = _.template( + $("#prompt-sbmlConversionError-template").html() + ); }, - render: function(data, errorMessage) { + render: function (data, errorMessage) { var self = this; - self.template = _.template($("#prompt-sbmlConversionError-template").html()); + 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'); - - }); + $(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 () { @@ -3274,14 +4193,16 @@ var PromptInvalidURLWarning = Backbone.View.extend({ self.template = _.template($("#prompt-invalidURL-template").html()); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); - $(document).off("click", "#prompt-invalidURL-confirm").on("click", "#prompt-invalidURL-confirm", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-invalidURL-confirm") + .on("click", "#prompt-invalidURL-confirm", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); var PromptInvalidImageWarning = Backbone.View.extend({ @@ -3293,20 +4214,22 @@ var PromptInvalidImageWarning = Backbone.View.extend({ var self = this; var tmp = $("#prompt-invalidImage-template").html(); var spanText = ''; - var s = tmp.indexOf(spanText) - var e = tmp.indexOf(''); + 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'); + $(self.el).modal("show"); - $(document).off("click", "#prompt-invalidImage-confirm").on("click", "#prompt-invalidImage-confirm", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-invalidImage-confirm") + .on("click", "#prompt-invalidImage-confirm", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); var PromptInvalidEdgeWarning = Backbone.View.extend({ @@ -3319,127 +4242,191 @@ var PromptInvalidEdgeWarning = Backbone.View.extend({ self.template = _.template($("#prompt-invalidEdge-template").html()); $(self.el).html(self.template); - $(self.el).modal('show'); + $(self.el).modal("show"); - $(document).off("click", "#prompt-invalidEdge-confirm").on("click", "#prompt-invalidEdge-confirm", function (evt) { - $(self.el).modal('toggle'); - }); + $(document) + .off("click", "#prompt-invalidEdge-confirm") + .on("click", "#prompt-invalidEdge-confirm", function (evt) { + $(self.el).modal("toggle"); + }); return this; - } + }, }); 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 += "" + + ""; + 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; } @@ -3936,49 +5132,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; } @@ -3986,7 +5207,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; @@ -3994,306 +5219,357 @@ 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' + 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) { + 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; } - 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", }; - 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