Fixed the bug for spinner not stopping #709

iVis-at-Bilkent · Jun 18, 2024 · 9cdd447 · 9cdd447
2 parents 031a887 + c43812e
commit 9cdd447
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 211 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()) {
@@ -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) {
       }
     }
   }
-};
+};
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
@@ -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}
+      );
     }