From 6eb70b51e61068081638899cab2a2418efb0ee90 Mon Sep 17 00:00:00 2001 From: okg21 Date: Fri, 14 Jun 2024 14:43:08 +0300 Subject: [PATCH 1/3] Further fixes for Solid color scheme not loading #689, solution for clone marker bug --- app/js/app-cy.js | 6 ++++-- app/js/app-utilities.js | 20 ++++++++++++-------- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/app/js/app-cy.js b/app/js/app-cy.js index 84416c280..6a7df99ab 100644 --- a/app/js/app-cy.js +++ b/app/js/app-cy.js @@ -1390,8 +1390,10 @@ 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) { + if (!isNaN(node.data(key)) || key === 'background-image' || (node.data('class') === 'unspecified entity' || node.data('class') === 'perturbing agent')) { + opt[key] = node.data(key); + } }); node.style(opt); diff --git a/app/js/app-utilities.js b/app/js/app-utilities.js index e1b8ebdac..3f91d4ec7 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']){ From efce68068e24513c832b5a692c016c977c49d362 Mon Sep 17 00:00:00 2001 From: okg21 Date: Fri, 14 Jun 2024 15:09:29 +0300 Subject: [PATCH 2/3] fix for Solid color scheme not loading #689 special cases --- app/js/app-cy.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/js/app-cy.js b/app/js/app-cy.js index 6a7df99ab..a997e5806 100644 --- a/app/js/app-cy.js +++ b/app/js/app-cy.js @@ -1391,8 +1391,13 @@ module.exports = function (chiseInstance) { var opt = {}; keys.forEach(function(key) { - if (!isNaN(node.data(key)) || key === 'background-image' || (node.data('class') === 'unspecified entity' || node.data('class') === 'perturbing agent')) { - opt[key] = node.data(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; } }); From 3b5b7d663e15583924c653fe9b01cb5f516ad8d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Umut=20Utku=20ER=C5=9EAH=C4=B0NCE?= Date: Mon, 17 Jun 2024 19:38:29 +0300 Subject: [PATCH 3/3] new highlighting sytle complete #713 --- app/js/app-cy.js | 39 ++++++++--------- app/js/app-undo-actions-factory.js | 17 +++----- app/js/app-utilities.js | 17 +++----- app/js/backbone-views.js | 69 +++++++----------------------- package.json | 4 +- 5 files changed, 44 insertions(+), 102 deletions(-) diff --git a/app/js/app-cy.js b/app/js/app-cy.js index a997e5806..8060c40e7 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()) { @@ -1442,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 174c40dbc..bb773f6e3 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 3f91d4ec7..5a7ba734a 100644 --- a/app/js/app-utilities.js +++ b/app/js/app-utilities.js @@ -2951,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 075df22ac..e61ab4284 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); @@ -2203,7 +2163,7 @@ var NeighborhoodQueryView = Backbone.View.extend({ 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); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2288,7 +2248,7 @@ var NeighborhoodQueryView = Backbone.View.extend({ 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); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2491,7 +2451,7 @@ var PathsBetweenQueryView = Backbone.View.extend({ var x = cy.elements().pathsBetween(eles, self.currentQueryParameters.lengthLimit, 'UNDIRECTED'); cy.viewUtilities('get').highlight(x.resultEdges, 2); cy.viewUtilities('get').highlight(x.resultNodes, 2); - cy.viewUtilities('get').highlight(eles, 0); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2573,7 +2533,7 @@ var PathsBetweenQueryView = Backbone.View.extend({ var x = cy.elements().pathsBetween(eles, self.currentQueryParameters.lengthLimit, 'UNDIRECTED'); cy.viewUtilities('get').highlight(x.resultEdges, 2); cy.viewUtilities('get').highlight(x.resultNodes, 2); - cy.viewUtilities('get').highlight(eles, 0); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -2830,7 +2790,7 @@ var PathsFromToQueryView = Backbone.View.extend({ 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, 0); + cy.viewUtilities('get').highlight(source_eles, 3); cy.viewUtilities('get').highlight(target_eles, 1); // Highlighting feature end @@ -2919,10 +2879,11 @@ var PathsFromToQueryView = Backbone.View.extend({ 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'); + 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]); @@ -3120,7 +3081,7 @@ var CommonStreamQueryView = Backbone.View.extend({ 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); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); @@ -3203,7 +3164,7 @@ var CommonStreamQueryView = Backbone.View.extend({ 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); + cy.viewUtilities('get').highlight(eles, 3); // Highlighting feature end $(document).trigger("sbgnvizLoadFileEnd", [filename, cy]); diff --git a/package.json b/package.json index f3187c695..ee464ab8a 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",