diff --git a/app/js/app-cy.js b/app/js/app-cy.js index 84416c28..8060c40e 100644 --- a/app/js/app-cy.js +++ b/app/js/app-cy.js @@ -461,30 +461,25 @@ module.exports = function (chiseInstance) { cy.viewUtilities({ highlightStyles: [ { - node: { 'border-width': function (ele) { return Math.max(parseFloat(ele.data('border-width')) + 2, 3); }, 'border-color': '#0B9BCD' }, - edge: { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + 2, 3); }, - 'line-color': '#0B9BCD', - 'color': '#0B9BCD', - 'text-border-color': '#0B9BCD', - 'source-arrow-color': '#0B9BCD', - 'target-arrow-color': '#0B9BCD' - } + node: { 'overlay-color': '#0B9BCD', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#0B9BCD', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + }, + { + node: { 'overlay-color': '#bf0603', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#bf0603', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + }, + { + node: { 'overlay-color': '#d67614', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#d67614', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + }, + { + node: { 'overlay-color': '#04F06A', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#04F06A', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, }, - { node: { 'border-color': '#bf0603', 'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} }, - { node: { 'border-color': '#d67614', 'border-width': 3 }, edge: {'line-color': '#d67614', 'source-arrow-color': '#d67614', 'target-arrow-color': '#d67614', 'width' : 3} }, ], selectStyles: { - node: { - 'border-color': '#d67614', 'background-color': function (ele) { return ele.data('background-color'); } - }, - edge: { - 'line-color': '#d67614', - 'color': '#d67614', - 'text-border-color': '#d67614', - 'source-arrow-color': '#d67614', - 'target-arrow-color': '#d67614', - } + node: { 'overlay-color': '#89898a', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, + edge: { 'overlay-color': '#89898a', 'overlay-opacity': 0.2, 'overlay-padding': 5 }, }, neighbor: function(ele){ //select and return process-based neighbors if (ele.isNode()) { @@ -1390,8 +1385,15 @@ module.exports = function (chiseInstance) { 'background-position-x', 'background-position-y', 'background-height', 'background-width']; var opt = {}; - keys.forEach(function(key){ - opt[key] = node.data(key); + keys.forEach(function(key) { + var value = node.data(key); + var isSpecialClass = node.data('class') === 'unspecified entity' || node.data('class') === 'perturbing agent'; + + if (isNaN(value) && key !== 'background-image' && !isSpecialClass) { + opt[key] = undefined; + } else { + opt[key] = value; + } }); node.style(opt); @@ -1435,4 +1437,4 @@ module.exports = function (chiseInstance) { } } } -}; \ No newline at end of file +}; diff --git a/app/js/app-undo-actions-factory.js b/app/js/app-undo-actions-factory.js index 174c40db..bb773f6e 100644 --- a/app/js/app-undo-actions-factory.js +++ b/app/js/app-undo-actions-factory.js @@ -361,18 +361,11 @@ module.exports = function (cy) { var highlightColor = $('#highlight-color').val(); var extraHighlightThickness = Number($('#highlight-thickness').val()); - viewUtilities.changeHighlightStyle(0, { - 'border-width' : function (ele) { - return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); - }, 'border-color': highlightColor - }, { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); }, - 'line-color': highlightColor, - 'color': highlightColor, - 'text-border-color': highlightColor, - 'source-arrow-color': highlightColor, - 'target-arrow-color': highlightColor - }); + viewUtilities.changeHighlightStyle( + 0, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} + ); } return result; diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js index e1b8ebda..5a7ba734 100644 --- a/app/js/app-utilities.js +++ b/app/js/app-utilities.js @@ -2489,20 +2489,24 @@ appUtilities.getActionsToApplyMapColorScheme = function(newColorScheme, scheme_t // first clear the background images of already present elements actions.push({name: "changeData", param: {eles: eles, name: 'background-image', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-fit', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-position-x', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-position-y', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-width', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-height', valueMap: mapIdToValue(eles, '')}}); + actions.push({name: "changeData", param: {eles: eles, name: 'background-image-opacity', valueMap: mapIdToValue(eles, '')}}); // edit style of the current map elements, in solid scheme just change background-color actions.push({name: "changeData", param: {eles: eles, name: 'background-color', valueMap: idMap}}); // first clear the background images of already present collapsed elements actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image', valueMap: mapIdToValue(collapsedChildren, '')}}); - - // collapsed nodes' style should also be changed, special edge case - actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-color', valueMap: collapsedIdMap}}); - - // if background-image isn't deleted from css, it is shown as soon as the node is expanded until the end of animation - actions.push({name: "changeCss", param: {eles: collapsedChildren, name: 'background-image', valueMap: ""}}); - - actions.push({name: "refreshColorSchemeMenu", param: {value: newColorScheme, self: self, scheme_type: scheme_type}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-fit', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-x', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-position-y', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-width', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-height', valueMap: mapIdToValue(collapsedChildren, '')}}); + actions.push({name: "changeDataDirty", param: {eles: collapsedChildren, name: 'background-image-opacity', valueMap: mapIdToValue(collapsedChildren, '')}}); // set to be the default as well for(var nodeClass in mapColorSchemes[newColorScheme]['values']){ @@ -2947,18 +2951,11 @@ appUtilities.setMapProperties = function(mapProperties, _chiseInstance) { var highlightColor = currentGeneralProperties.highlightColor[0]; var extraHighlightThickness = currentGeneralProperties.extraHighlightThickness; - viewUtilities.changeHighlightStyle(0, { - 'border-width': function (ele) { - return Math.max(parseFloat(ele.data('border-width')) + extraHighlightThickness, 3); - }, 'border-color': highlightColor - }, { - 'width': function (ele) { return Math.max(parseFloat(ele.data('width')) + extraHighlightThickness, 3); }, - 'line-color': highlightColor, - 'color': highlightColor, - 'text-border-color': highlightColor, - 'source-arrow-color': highlightColor, - 'target-arrow-color': highlightColor - }); + viewUtilities.changeHighlightStyle( + 0, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} + ); } diff --git a/app/js/backbone-views.js b/app/js/backbone-views.js index 392c93f6..f3cc03f5 100644 --- a/app/js/backbone-views.js +++ b/app/js/backbone-views.js @@ -1004,28 +1004,8 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({ 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, - color: highlightColor, - "text-border-color": highlightColor, - "source-arrow-color": highlightColor, - "target-arrow-color": highlightColor, - } + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} ); cy.undoRedo().do("changeMenu", self.params.extraHighlightThickness); @@ -1044,28 +1024,8 @@ var MapTabGeneralPanel = GeneralPropertiesParentView.extend({ 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, - color: highlightColor, - "text-border-color": highlightColor, - "source-arrow-color": highlightColor, - "target-arrow-color": highlightColor, - } + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness }, + { 'overlay-color': highlightColor, 'overlay-opacity': 0.2, 'overlay-padding': 3+extraHighlightThickness/2.0} ); cy.undoRedo().do("changeMenu", self.params.highlightColor); @@ -2191,31 +2151,17 @@ var NeighborhoodQueryView = Backbone.View.extend({ // Highlighting feature eles = cy.collection(); geneSymbolsArray.forEach(function (gene) { - eles.merge( - cy.nodes().filter(function (ele) { - if ( - ele.data("label") && - ele - .data("label") - .toLowerCase() - .indexOf(gene.toLowerCase()) >= 0 - ) { - return true; - } - return false; - }) - ); - }); - var x = cy - .elements() - .kNeighborhood( - eles, - self.currentQueryParameters.lengthLimit, - "BOTHSTREAM" - ); - cy.viewUtilities("get").highlight(x.neighborNodes, 2); - cy.viewUtilities("get").highlight(x.neighborEdges, 2); - cy.viewUtilities("get").highlight(eles, 0); + eles.merge(cy.nodes().filter(function (ele) { + if(ele.data('label') && ele.data('label').toLowerCase().indexOf(gene.toLowerCase()) >= 0){ + return true; + } + return false; + })) + }) + var x = cy.elements().kNeighborhood(eles, self.currentQueryParameters.lengthLimit, 'BOTHSTREAM'); + cy.viewUtilities('get').highlight(x.neighborNodes, 2); + cy.viewUtilities('get').highlight(x.neighborEdges, 2); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2311,7 +2257,7 @@ var NeighborhoodQueryView = Backbone.View.extend({ ); cy.viewUtilities("get").highlight(x.neighborNodes, 2); cy.viewUtilities("get").highlight(x.neighborEdges, 2); - cy.viewUtilities("get").highlight(eles, 0); + cy.viewUtilities("get").highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2521,7 +2467,7 @@ var PathsBetweenQueryView = Backbone.View.extend({ ); cy.viewUtilities("get").highlight(x.resultEdges, 2); cy.viewUtilities("get").highlight(x.resultNodes, 2); - cy.viewUtilities("get").highlight(eles, 0); + cy.viewUtilities("get").highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2617,7 +2563,7 @@ var PathsBetweenQueryView = Backbone.View.extend({ ); cy.viewUtilities("get").highlight(x.resultEdges, 2); cy.viewUtilities("get").highlight(x.resultNodes, 2); - cy.viewUtilities("get").highlight(eles, 0); + cy.viewUtilities("get").highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2901,8 +2847,8 @@ var PathsFromToQueryView = Backbone.View.extend({ ); cy.viewUtilities("get").highlight(x.edgesOnThePaths, 2); // cy.viewUtilities('get').highlight(x.nodesOnThePaths, 2); - cy.viewUtilities("get").highlight(source_eles, 0); - cy.viewUtilities("get").highlight(target_eles, 1); + cy.viewUtilities('get').highlight(source_eles, 3); + cy.viewUtilities('get').highlight(target_eles, 1); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2991,33 +2937,18 @@ var PathsFromToQueryView = Backbone.View.extend({ }); target_eles = cy.collection(); targetSymbolsArray.forEach(function (gene) { - target_eles.merge( - cy.nodes().filter(function (ele) { - if ( - ele.data("label") && - ele - .data("label") - .toLowerCase() - .indexOf(gene.toLowerCase()) >= 0 - ) { - return true; - } - return false; - }) - ); - }); - cy.viewUtilities("get").highlight(source_eles, 0); - cy.viewUtilities("get").highlight(target_eles, 1); - var x = cy - .elements() - .pathsFromTo( - source_eles, - target_eles, - self.currentQueryParameters.lengthLimit, - 1, - "UNDIRECTED" - ); - cy.viewUtilities("get").highlight(x.edgesOnThePaths, 2); + target_eles.merge(cy.nodes().filter(function (ele) { + if(ele.data('label') && ele.data('label').toLowerCase().indexOf(gene.toLowerCase()) >= 0){ + return true; + } + return false; + })) + }) + var x = cy.elements().pathsFromTo(source_eles, target_eles, self.currentQueryParameters.lengthLimit, self.currentQueryParameters.lengthLimit, 'UNDIRECTED'); + cy.viewUtilities('get').highlight(x.edgesOnThePaths, 2); + // cy.viewUtilities('get').highlight(x.nodesOnThePaths, 2); + cy.viewUtilities('get').highlight(source_eles, 3); + cy.viewUtilities('get').highlight(target_eles, 1); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); } else { @@ -3200,32 +3131,18 @@ var CommonStreamQueryView = Backbone.View.extend({ // Highlighting feature eles = cy.collection(); geneSymbolsArray.forEach(function (gene) { - eles.merge( - cy.nodes().filter(function (ele) { - if ( - ele.data("label") && - ele - .data("label") - .toLowerCase() - .indexOf(gene.toLowerCase()) >= 0 - ) { - return true; - } - return false; - }) - ); - }); - var x = cy - .elements() - .commonStream( - eles, - self.currentQueryParameters.lengthLimit, - "BOTHSTREAM" - ); - cy.viewUtilities("get").highlight(x.nodesOnPath, 2); - cy.viewUtilities("get").highlight(x.edgesOnPath, 2); - cy.viewUtilities("get").highlight(x.commonNodes, 1); - cy.viewUtilities("get").highlight(eles, 0); + eles.merge(cy.nodes().filter(function (ele) { + if(ele.data('label') && ele.data('label').toLowerCase().indexOf(gene.toLowerCase()) >= 0){ + return true; + } + return false; + })) + }) + var x = cy.elements().commonStream(eles, self.currentQueryParameters.lengthLimit, 'BOTHSTREAM'); + cy.viewUtilities('get').highlight(x.nodesOnPath, 2); + cy.viewUtilities('get').highlight(x.edgesOnPath, 2); + cy.viewUtilities('get').highlight(x.commonNodes, 1); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -3293,32 +3210,18 @@ var CommonStreamQueryView = Backbone.View.extend({ // Highlighting feature eles = cy.collection(); geneSymbolsArray.forEach(function (gene) { - eles.merge( - cy.nodes().filter(function (ele) { - if ( - ele.data("label") && - ele - .data("label") - .toLowerCase() - .indexOf(gene.toLowerCase()) >= 0 - ) { - return true; - } - return false; - }) - ); - }); - var x = cy - .elements() - .commonStream( - eles, - self.currentQueryParameters.lengthLimit, - "BOTHSTREAM" - ); - cy.viewUtilities("get").highlight(x.nodesOnPath, 2); - cy.viewUtilities("get").highlight(x.edgesOnPath, 2); - cy.viewUtilities("get").highlight(x.commonNodes, 1); - cy.viewUtilities("get").highlight(eles, 0); + eles.merge(cy.nodes().filter(function (ele) { + if(ele.data('label') && ele.data('label').toLowerCase().indexOf(gene.toLowerCase()) >= 0){ + return true; + } + return false; + })) + }) + var x = cy.elements().commonStream(eles, self.currentQueryParameters.lengthLimit, 'BOTHSTREAM'); + cy.viewUtilities('get').highlight(x.nodesOnPath, 2); + cy.viewUtilities('get').highlight(x.edgesOnPath, 2); + cy.viewUtilities('get').highlight(x.commonNodes, 1); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); diff --git a/package.json b/package.json index f3187c69..ee464ab8 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "backbone": "1.3.3", "body-parser": "^1.19.0", "bootstrap": "3.3.7", - "chroma-js": "^1.3.4", "chise": "github:iVis-at-Bilkent/chise.js#unstable", + "chroma-js": "^1.3.4", "cytoscape": "github:iVis-at-Bilkent/cytoscape.js#unstable", "cytoscape-autopan-on-drag": "github:iVis-at-Bilkent/cytoscape.js-autopan-on-drag#unstable", "cytoscape-clipboard": "github:iVis-at-Bilkent/cytoscape.js-clipboard#unstable", @@ -45,7 +45,7 @@ "jquery": "~3.3.1", "jquery-expander": "1.7.0", "konva": "^7.0.3", - "libxmljs": "^0.19.10", + "libxmljs": "^1.0.11", "lodash.get": "^4.4.2", "lodash.set": "^4.3.2", "mousetrap": "^1.6.0",