Merge pull request #2 from emotionbug/main

fix: lint fallen on structuring assignment
diff --git a/frontend/package.json b/frontend/package.json
index 7a806cc..de46efd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,15 +28,14 @@
     "cytoscape-spread": "^3.0.0",
     "file-saver": "^2.0.5",
     "json2csv": "^5.0.6",
-    "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-bootstrap": "^1.4.3",
     "react-cookies": "^0.1.1",
     "react-cytoscapejs": "^1.2.1",
-    "react-dom": "^17.0.1",
-    "react-redux": "^7.2.2",
-    "react-scripts": "^4.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
+    "react-scripts": "^4.0.3",
     "react-uuid": "^1.0.2",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -62,18 +61,19 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.6.3",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.19.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "sass": "^1.38.2",
     "webpack-dev-server": "3.11.1"
   }
 }
diff --git a/frontend/src/components/cytoscape/CytoscapeStyleSheet.js b/frontend/src/components/cytoscape/CytoscapeStyleSheet.js
index 0559b50..691d64e 100644
--- a/frontend/src/components/cytoscape/CytoscapeStyleSheet.js
+++ b/frontend/src/components/cytoscape/CytoscapeStyleSheet.js
@@ -35,22 +35,22 @@
   {
     selector: 'node',
     style: {
-      width(ele) { return ele == null ? 55 : ele.data('size'); },
-      height(ele) { return ele == null ? 55 : ele.data('size'); },
+      width(ele) { return ele ? ele.data('size') : 55; },
+      height(ele) { return ele ? ele.data('size') : 55; },
       label(ele) {
         const captionProp = ele.data('caption');
         return getLabel(ele, captionProp);
       },
-      'background-color': function (ele) { return ele == null ? '#FFF' : ele.data('backgroundColor'); },
+      'background-color': function (ele) { return ele ? ele.data('backgroundColor') : '#FFF'; },
       'border-width': '3px',
-      'border-color': function (ele) { return ele == null ? '#FFF' : ele.data('borderColor'); },
+      'border-color': function (ele) { return ele ? ele.data('borderColor') : '#FFF'; },
       'border-opacity': 0.6,
       'text-valign': 'center',
       'text-halign': 'center',
-      color(ele) { return ele == null ? '#FFF' : ele.data('fontColor'); },
+      color(ele) { return ele ? ele.data('fontColor') : '#FFF'; },
       'font-size': '10px',
       'text-wrap': 'ellipsis',
-      'text-max-width': function (ele) { return ele == null ? 55 : ele.data('size'); },
+      'text-max-width': function (ele) { return ele ? ele.data('size') : 55; },
     },
   },
   {
@@ -70,16 +70,16 @@
   {
     selector: 'edge',
     style: {
-      width(ele) { return ele == null ? 1 : ele.data('size'); },
+      width(ele) { return ele ? ele.data('size') : 1; },
       label(ele) { const captionProp = ele.data('caption'); return getLabel(ele, captionProp); },
       'text-background-color': '#FFF',
       'text-background-opacity': 1,
       'text-background-padding': '3px',
-      'line-color': function (ele) { return ele == null ? '#FFF' : ele.data('backgroundColor'); },
-      'target-arrow-color': function (ele) { return ele == null ? '#FFF' : ele.data('backgroundColor'); },
+      'line-color': function (ele) { return ele ? ele.data('backgroundColor') : '#FFF'; },
+      'target-arrow-color': function (ele) { return ele ? ele.data('backgroundColor') : '#FFF'; },
       'target-arrow-shape': 'triangle',
       'curve-style': 'bezier',
-      color(ele) { return ele == null ? '#FFF' : ele.data('fontColor'); },
+      color(ele) { return ele ? ele.data('fontColor') : '#FFF'; },
       'font-size': '10px',
       'text-rotation': 'autorotate',
     },
@@ -87,7 +87,7 @@
   {
     selector: 'edge.highlight',
     style: {
-      width(ele) { return ele == null ? 1 : ele.data('size'); },
+      width(ele) { return ele ? ele.data('size') : 1; },
       'line-color': '#B2EBF4',
       'target-arrow-color': '#B2EBF4',
       'target-arrow-shape': 'triangle',
@@ -97,7 +97,7 @@
   {
     selector: 'edge:selected',
     style: {
-      width(ele) { return ele == null ? 1 : ele.data('size'); },
+      width(ele) { return ele ? ele.data('size') : 1; },
       'line-color': '#B2EBF4',
       'target-arrow-color': '#B2EBF4',
       'target-arrow-shape': 'triangle',