Merge pull request #716 from umut-er/unstable

Underlay Highlighting
iVis-at-Bilkent · Jun 17, 2024 · c43812e · c43812e
2 parents efce680 + 3b5b7d6
commit c43812e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 102 deletions.
diff --git 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) {
       }
     }
   }
-};
+};
diff --git 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
@@ -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
@@ -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
@@ -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",