fix warnings and errors

10 files changed, 519 insertions, 450 deletions

diff --git a/blocks/eda-frontend/.eslintrc.json b/blocks/eda-frontend/.eslintrc.json
index 96a1baf2..3bc59d02 100644
--- a/blocks/eda-frontend/.eslintrc.json
+++ b/blocks/eda-frontend/.eslintrc.json
@@ -25,6 +25,7 @@
     ],
     "rules": {
         "new-cap": "warn",
+        "no-new": "warn",
         "react/prop-types": "warn"
     },
     "settings": {
diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
index 777df535..b5bb3634 100644
--- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
+++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
@@ -85,13 +85,13 @@ export default function ProgressPanel () {
       <TabPanel value={value} index={0}>
         {schematics.length !== 0
           ? <Grid
-              container
-              direction='row'
-              justify='flex-start'
-              alignItems='flex-start'
-              alignContent='center'
-              spacing={3}
-            >
+            container
+            direction='row'
+            justify='flex-start'
+            alignItems='flex-start'
+            alignContent='center'
+            spacing={3}
+          >
             {schematics.slice(0, 4).map(
               (sch) => {
                 return (
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
index 6d2a0f97..ce073f75 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
@@ -58,7 +58,7 @@ function SimpleSnackbar ({ open, close, sch }) {
               NO
             </Button>
           </>
-      }
+        }
       >
         {'Delete ' + sch.name + ' ?'}
       </Alert>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Header.js b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
index e920bad2..b2b12588 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Header.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
@@ -229,9 +229,9 @@ function Header () {
         ? <>
           {(schSave.isSaved === true && schSave.details.save_time !== undefined)
             ? <Typography
-                variant='body2'
-                style={{ margin: '0px 15px 0px auto', paddingTop: '5px', color: '#8c8c8c' }}
-              >
+              variant='body2'
+              style={{ margin: '0px 15px 0px auto', paddingTop: '5px', color: '#8c8c8c' }}
+            >
               Last Saved : {getDate(schSave.details.save_time)} {/* Display last saved status for saved schematics */}
             </Typography>
             : <></>}
@@ -266,10 +266,10 @@ function Header () {
           <DialogContentText id='share-dialog-description'>
             {shared === true
               ? <input
-                  ref={textAreaRef}
-                  value={`${window.location.protocol}\\\\${window.location.host}/eda/#/editor?id=${schSave.details.save_id}`}
-                  readOnly
-                />
+                ref={textAreaRef}
+                value={`${window.location.protocol}\\\\${window.location.host}/eda/#/editor?id=${schSave.details.save_id}`}
+                readOnly
+              />
               : <> Turn On sharing </>}
           </DialogContentText>
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
index d630f87d..cf7349ad 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
@@ -59,14 +59,33 @@ export function getSvgMetadata (graph, parent, evt, target, x, y, component) {
     const yPos = 1 / 2 - blockport.port_y / defaultScale / height
 
     const portOrientation = blockport.port_orientation
-    let point = null
+    let pointX
+    let pointY
     switch (portOrientation) {
-      case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-portSize, -portSize / 2); break
-      case 'ControlPort': point = new mxPoint(-portSize / 2, -portSize); break
-      case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -portSize / 2); break
-      case 'CommandPort': point = new mxPoint(-portSize / 2, 0); break
-      default: point = new mxPoint(-portSize / 2, -portSize / 2); break
+      case 'ExplicitInputPort':
+      case 'ImplicitInputPort':
+        pointX = -portSize
+        pointY = -portSize / 2
+        break
+      case 'ControlPort':
+        pointX = -portSize / 2
+        pointY = -portSize
+        break
+      case 'ExplicitOutputPort':
+      case 'ImplicitOutputPort':
+        pointX = 0
+        pointY = -portSize / 2
+        break
+      case 'CommandPort':
+        pointX = -portSize / 2
+        pointY = 0
+        break
+      default:
+        pointX = -portSize / 2
+        pointY = -portSize / 2
+        break
     }
+    const point = new mxPoint(pointX, pointY)
 
     const vp = graph.insertVertex(v1, null, null, xPos, yPos, portSize, portSize, portOrientation)
     vp.geometry.relative = true
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
index 1ee8c91b..66cd44f8 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
@@ -388,7 +388,7 @@ function parseXmlToGraph (xmlDoc, graph) {
           for (let i = 0; i < parameterCount; i++) {
             const p = getParameter(i) + '_value'
             if (cellChildrenAttributes[p] !== undefined) {
-                parameterValues[p] = cellChildrenAttributes[p].value
+              parameterValues[p] = cellChildrenAttributes[p].value
             }
           }
         }
@@ -399,14 +399,33 @@ function parseXmlToGraph (xmlDoc, graph) {
         const geom = cellChildren[0].attributes
         const xPos = (geom.x !== undefined) ? Number(geom.x.value) : 0
         const yPos = (geom.y !== undefined) ? Number(geom.y.value) : 0
-        let point = null
+        let pointX
+        let pointY
         switch (style) {
-          case 'ExplicitInputPort': case 'ImplicitInputPort': point = new mxPoint(-portSize, -portSize / 2); break
-          case 'ControlPort': point = new mxPoint(-portSize / 2, -portSize); break
-          case 'ExplicitOutputPort': case 'ImplicitOutputPort': point = new mxPoint(0, -portSize / 2); break
-          case 'CommandPort': point = new mxPoint(-portSize / 2, 0); break
-          default: point = new mxPoint(-portSize / 2, -portSize / 2); break
+          case 'ExplicitInputPort':
+          case 'ImplicitInputPort':
+            pointX = -portSize
+            pointY = -portSize / 2
+            break
+          case 'ControlPort':
+            pointX = -portSize / 2
+            pointY = -portSize
+            break
+          case 'ExplicitOutputPort':
+          case 'ImplicitOutputPort':
+            pointX = 0
+            pointY = -portSize / 2
+            break
+          case 'CommandPort':
+            pointX = -portSize / 2
+            pointY = 0
+            break
+          default:
+            pointX = -portSize / 2
+            pointY = -portSize / 2
+            break
         }
+        const point = new mxPoint(pointX, pointY)
         const vp = graph.insertVertex(v1, vertexId, null, xPos, yPos, portSize, portSize, style)
         vp.geometry.relative = true
         vp.geometry.offset = point
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
index b2b4afee..88c0526f 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
@@ -137,11 +137,11 @@ export default function SimulationProperties () {
   return (
     <>
       <div className={classes.SimulationOptions}>
-      {
-        simulateOpen
-        ? <SimulationScreen2 open={simulateOpen} close={handleSimulateClose} />
-        : <div />
-      }
+        {
+          simulateOpen
+            ? <SimulationScreen2 open={simulateOpen} close={handleSimulateClose} />
+            : <div />
+        }
 
         {/* Simulation modes list */}
         <List>
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen2.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen2.js
index d1b4b9c1..03985a6a 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen2.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen2.js
@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme) => ({
 }))
 
 export function setGraphStatusDone () {
-    setStatusDone()
+  setStatusDone()
 }
 
 // Screen to display simulation result in graph or text format
@@ -65,24 +65,24 @@ export default function SimulationScreen2 ({ open, close }) {
   const chartIdList = useRef({})
 
   // Keep track of RANGE of each graph(chart)
-  const RANGE = [];
-  const name_values_colormap = new Map(); // for storing colormap values of cmatview and cmat3d block
+  const RANGE = []
+  const nameValuesColormap = new Map() // for storing colormap values of cmatview and cmat3d block
 
   const streamSimulationResult = useCallback((streamingUrl) => {
     // define variables for block event
     // pnts - Points list of the blocks
-    const pnts = [];
+    const pnts = []
 
     // Initialise variable for entry condition of creating chart for BARXY and
     // AFFICH_m
-    let cmatview_counter = 0; // counter to know how many line in log
-    let loglines = 0;
+    let cmatviewCounter = 0 // counter to know how many line in log
+    let loglines = 0
 
     const printloglines = () => {
-        if (loglines > 0) {
-            console.log(loglines, 'log lines');
-            loglines = 0;
-        }
+      if (loglines > 0) {
+        console.log(loglines, 'log lines')
+        loglines = 0
+      }
     }
 
     const addPointToGraph = (id, point) => {
@@ -95,459 +95,487 @@ export default function SimulationScreen2 ({ open, close }) {
     }
 
     // Function to create a new chart
-    const create_new_chart = (id, no_of_graph, xmin, xmax, ymin, ymax, type_chart, title_text, color_axis=null) => {
-        /*
-         * id - container id for graph(chart),
-         * no_of_graph - number of graphs in output of a block,
-         * xmin - minimum x-axis value,
-         * xmax - maximum x-axis value,
-         * ymin - minimum y-axis value,
-         * ymax - maximum y-axis value,
-         * type_chart - type of chart to be drawn,
-         * title_text - title to be given to the chart
-         */
-
-        // convert String values to desired datatype
-        xmin = parseFloat(xmin);
-        xmax = parseFloat(xmax);
-        ymin = parseFloat(ymin);
-        ymax = parseFloat(ymax);
-
-        // default value of pointpadding added for ceventscope
-        let pointWidth = 0.1;
-        let pointRange = null;
-
-        let lineWidth = 2;
-        if (title_text.substring(0, 5) === "BARXY") {
-            lineWidth = no_of_graph;
-            no_of_graph = 1;
-        } else if (title_text.substring(0, 7) === "CSCOPXY") {
-            // disable line by putting lineWidth as 0
-            lineWidth = 0
-        } else if (title_text.substring(0, 7) === "CANIMXY") {
-            // disable line by putting lineWidth as 0
-            lineWidth = 0
-        } else if (title_text.substring(0, 7) === "CEVSCPE") {
-            // To manipulate the graph width of ceventscope
-            pointWidth = 2;
-            pointRange = 0.05;
-        }
+    const createNewChart = (id, noOfGraph, xmin, xmax, ymin, ymax, typeChart, titleText, colorAxis = null) => {
+      /*
+       * id - container id for graph(chart),
+       * noOfGraph - number of graphs in output of a block,
+       * xmin - minimum x-axis value,
+       * xmax - maximum x-axis value,
+       * ymin - minimum y-axis value,
+       * ymax - maximum y-axis value,
+       * typeChart - type of chart to be drawn,
+       * titleText - title to be given to the chart
+       */
+
+      // convert String values to desired datatype
+      xmin = parseFloat(xmin)
+      xmax = parseFloat(xmax)
+      ymin = parseFloat(ymin)
+      ymax = parseFloat(ymax)
+
+      // default value of pointpadding added for ceventscope
+      let pointWidth = 0.1
+      let pointRange = null
+
+      let lineWidth = 2
+      if (titleText.substring(0, 5) === 'BARXY') {
+        lineWidth = noOfGraph
+        noOfGraph = 1
+      } else if (titleText.substring(0, 7) === 'CSCOPXY') {
+        // disable line by putting lineWidth as 0
+        lineWidth = 0
+      } else if (titleText.substring(0, 7) === 'CANIMXY') {
+        // disable line by putting lineWidth as 0
+        lineWidth = 0
+      } else if (titleText.substring(0, 7) === 'CEVSCPE') {
+        // To manipulate the graph width of ceventscope
+        pointWidth = 2
+        pointRange = 0.05
+      }
 
-        chartIdList.current[id] = chartIdCount.current
-        const datapoint = {
-          datapointId: id,
-          datapointType: type_chart,
-          datapointTitle: title_text,
-          datapointXMin: xmin,
-          datapointYMin: ymin,
-          datapointXMax: xmax,
-          datapointYMax: ymax,
-          datapointPointRange: pointRange,
-          datapointLineWidth: lineWidth,
-          datapointPointWidth: pointWidth,
-          datapointDataClasses: null
-        }
-        datapointsRef.current[chartIdCount.current] = datapoint
-        chartIdCount.current = chartIdCount.current + 1
-        setNoOfGraphs(nog => nog + 1)
+      chartIdList.current[id] = chartIdCount.current
+      const datapoint = {
+        datapointId: id,
+        datapointType: typeChart,
+        datapointTitle: titleText,
+        datapointXMin: xmin,
+        datapointYMin: ymin,
+        datapointXMax: xmax,
+        datapointYMax: ymax,
+        datapointPointRange: pointRange,
+        datapointLineWidth: lineWidth,
+        datapointPointWidth: pointWidth,
+        datapointDataClasses: colorAxis
+      }
+      datapointsRef.current[chartIdCount.current] = datapoint
+      chartIdCount.current = chartIdCount.current + 1
+      setNoOfGraphs(nog => nog + 1)
     }
 
     // Function to create a new 3d-chart
-    const create_new_chart_3d = (id, no_of_graph, xmin, xmax, ymin, ymax, zmin, zmax, type_chart, title_text, alpha, theta) => {
-        /*
-         * id - container id for graph(chart),
-         * no_of_graph - number of graphs in output of a block,
-         * ymin - minimum y-axis value,
-         * ymax - maximum y-axis value,
-         * xmin - minimum x-axis value,
-         * xmax - maximum x-axis value,
-         * zmin - minimum z-axis value,
-         * zmax - maximum z-axis value,
-         * type_chart - type of chart to be drawn,
-         * title_text - title to be given to the chart,
-         * alpha - Angle of rotation for graph for 3D chart
-         * theta - Angle of rotation for graph for 3D chart
-         */
-
-        // convert String values to desired datatype
-        xmin = parseFloat(xmin);
-        xmax = parseFloat(xmax);
-        ymin = parseFloat(ymin);
-        ymax = parseFloat(ymax);
-        zmin = parseFloat(zmin);
-        zmax = parseFloat(zmax);
-        // Assigning angle theta of 3D block to beta angle of highchart ( Can be
-        // modified later)
-        let beta = theta;
-        let lineWidth = 1;
-        let radius = 1;
-        if (title_text.substring(0, 9) === "CANIMXY3D") {
-            lineWidth = 0;
-            radius = 3;
-        }
-        $('#charts').append("<div id='chart-"+id.toString()+"' style = 'height:200px'></div>");
-
-        let elem = $('#chart-'+id.toString());
-        // change graph height if block has only 1 output graph
-        if (no_of_graph === 1)
-            elem.css('height', '400px');
-
-        elem.highcharts({
-            chart: {
-                type: type_chart,
-                zoomtype: 'xy',
-                options3d: {
-                    enabled: true,
-                    alpha: alpha,
-                    beta: beta,
-                    depth: 100,
-                    viewDistance: 100,
-                    frame: {
-                        bottom: {
-                            size: 0,
-                            color: '#FFFFFF'
-                        },
-                        back: {
-                            size: 0,
-                            color: '#FFFFFF'
-                        },
-                        side: {
-                            size: 0,
-                            color: '#FFFFFF'
-                        }
-                    }
-                }
-            },
-            title: {
-                text: title_text
-            },
-            tooltip: {
-                enabled: false
-            },
-            yAxis: {
-                // Manipulation for showing z axis vertically instead of Y axis
-                // (only for 3D graph).
-                min: zmin,
-                max: zmax,
-                gridLineWidth: 1,
-                tickInterval: 1,
-                title: {
-                    rotation: 0,
-                    style: {
-                        fontWeight: 'bold',
-                        fontSize: '15px'
-                    },
-                    text: 'z'
-                }
+    const createNewChart3d = (id, noOfGraph, xmin, xmax, ymin, ymax, zmin, zmax, typeChart, titleText, alpha, theta) => {
+      /*
+       * id - container id for graph(chart),
+       * noOfGraph - number of graphs in output of a block,
+       * ymin - minimum y-axis value,
+       * ymax - maximum y-axis value,
+       * xmin - minimum x-axis value,
+       * xmax - maximum x-axis value,
+       * zmin - minimum z-axis value,
+       * zmax - maximum z-axis value,
+       * typeChart - type of chart to be drawn,
+       * titleText - title to be given to the chart,
+       * alpha - Angle of rotation for graph for 3D chart
+       * theta - Angle of rotation for graph for 3D chart
+       */
+
+      // convert String values to desired datatype
+      xmin = parseFloat(xmin)
+      xmax = parseFloat(xmax)
+      ymin = parseFloat(ymin)
+      ymax = parseFloat(ymax)
+      zmin = parseFloat(zmin)
+      zmax = parseFloat(zmax)
+      // Assigning angle theta of 3D block to beta angle of highchart ( Can be
+      // modified later)
+      const beta = theta
+      let lineWidth = 1
+      let radius = 1
+      if (titleText.substring(0, 9) === 'CANIMXY3D') {
+        lineWidth = 0
+        radius = 3
+      }
+      $('#charts').append("<div id='chart-" + id.toString() + "' style = 'height:200px'></div>")
+
+      const elem = $('#chart-' + id.toString())
+      // change graph height if block has only 1 output graph
+      if (noOfGraph === 1) {
+        elem.css('height', '400px')
+      }
+
+      elem.highcharts({
+        chart: {
+          type: typeChart,
+          zoomtype: 'xy',
+          options3d: {
+            enabled: true,
+            alpha: alpha,
+            beta: beta,
+            depth: 100,
+            viewDistance: 100,
+            frame: {
+              bottom: {
+                size: 0,
+                color: '#FFFFFF'
+              },
+              back: {
+                size: 0,
+                color: '#FFFFFF'
+              },
+              side: {
+                size: 0,
+                color: '#FFFFFF'
+              }
+            }
+          }
+        },
+        title: {
+          text: titleText
+        },
+        tooltip: {
+          enabled: false
+        },
+        yAxis: {
+          // Manipulation for showing z axis vertically instead of Y axis
+          // (only for 3D graph).
+          min: zmin,
+          max: zmax,
+          gridLineWidth: 1,
+          tickInterval: 1,
+          title: {
+            rotation: 0,
+            style: {
+              fontWeight: 'bold',
+              fontSize: '15px'
             },
-            xAxis: {
-                min: xmin,
-                max: xmax,
-                tickInterval: 1,
-                gridLineWidth: 1,
-                title: {
-                    style: {
-                        fontWeight: 'bold',
-                        fontSize: '15px'
-                    },
-                    text: 'x' // title for X for differentiating axis
-                }
+            text: 'z'
+          }
+        },
+        xAxis: {
+          min: xmin,
+          max: xmax,
+          tickInterval: 1,
+          gridLineWidth: 1,
+          title: {
+            style: {
+              fontWeight: 'bold',
+              fontSize: '15px'
             },
-            zAxis: {
-                // Manipulation for showing y axis values in place of z axis (only
-                // for 3D graph).
-                min: ymin,
-                max: ymax,
-                tickInterval: 1,
-                gridLineWidth: 1,
-                title: {
-                    rotation: 300,
-                    margin: -30,
-                    style: {
-                        fontWeight: 'bold',
-                        fontSize: '15px'
-                    },
-                    text: 'y'
-                }
+            text: 'x' // title for X for differentiating axis
+          }
+        },
+        zAxis: {
+          // Manipulation for showing y axis values in place of z axis (only
+          // for 3D graph).
+          min: ymin,
+          max: ymax,
+          tickInterval: 1,
+          gridLineWidth: 1,
+          title: {
+            rotation: 300,
+            margin: -30,
+            style: {
+              fontWeight: 'bold',
+              fontSize: '15px'
             },
-            plotOptions: {
-                marker: {
-                    enabled: false
-                },
-                series: {
-                    lineWidth: lineWidth,
-                    states: {
-                        hover: {
-                            lineWidth: lineWidth
-                        }
-                    }
-                },
-                scatter: {
-                    marker: {
-                        radius: radius,
-                        states: {
-                            hover: {
-                                enabled: true,
-                                lineColor: 'rgb(100,100,100)'
-                            }
-                        }
-                    }
+            text: 'y'
+          }
+        },
+        plotOptions: {
+          marker: {
+            enabled: false
+          },
+          series: {
+            lineWidth: lineWidth,
+            states: {
+              hover: {
+                lineWidth: lineWidth
+              }
+            }
+          },
+          scatter: {
+            marker: {
+              radius: radius,
+              states: {
+                hover: {
+                  enabled: true,
+                  lineColor: 'rgb(100,100,100)'
                 }
-            },
-            series: []
-        });
+              }
+            }
+          }
+        },
+        series: []
+      })
     }
 
     // To create coloraxis array which will be passed to cmatview chart for heatmap creation
-    const get_color_axis_for_points = (block_uid) => {
-        const color_axis_array = [];
-        const get_hex_color_array = name_values_colormap.get(block_uid);
-        for (let i = 0; i < get_hex_color_array.length; i++) {
-            const color_values = {};
-            const temp = i;
-            color_values["from"] = temp + 1;
-            color_values["to"] = temp + 2;
-            color_values["color"] = get_hex_color_array[i];
-            color_axis_array.push(color_values);
-        }
-        return color_axis_array;
+    const getColorAxisForPoints = (blockUid) => {
+      const colorAxisArray = []
+      const getHexColorArray = nameValuesColormap.get(blockUid)
+      for (let i = 0; i < getHexColorArray.length; i++) {
+        const colorValues = {}
+        const temp = i
+        colorValues.from = temp + 1
+        colorValues.to = temp + 2
+        colorValues.color = getHexColorArray[i]
+        colorAxisArray.push(colorValues)
+      }
+      return colorAxisArray
     }
 
     const sse = new EventSource('/api/' + streamingUrl, { withCredentials: true })
     sse.addEventListener('log', e => {
-      ++loglines;
+      ++loglines
 
-      const data = e.data.split(' ');
+      const data = e.data.split(' ')
 
       // store block info. from the data line
-      const block = parseInt(data[0]);
-      const figure_id = (block === 2) ? data[4] : data[2]; // For CMSCOPE
-      let no_of_graph;
+      const block = parseInt(data[0])
+      const figureId = (block === 2) ? data[4] : data[2] // For CMSCOPE
+      let noOfGraph
       if (block === 5 || block === 10) { // For 3D-SCOPE blocks
-        no_of_graph = data[11];
+        noOfGraph = data[11]
       } else if (block === 11) { // For BARXY
-        no_of_graph = data[12];
+        noOfGraph = data[12]
       } else {
-        no_of_graph = data[10];
+        noOfGraph = data[10]
       }
-      let xmin, xmax, ymin, ymax, zmin = null, zmax = null;
+      let xmin
+      let xmax
+      let ymin
+      let ymax
+      let zmin = null
+      let zmax = null
       if (block === 4 || block === 9) { // For CSCOPXY or CANIMXY
-        xmin = data[11]; xmax = data[12]; ymin = data[13]; ymax = data[14];
+        xmin = data[11]
+        xmax = data[12]
+        ymin = data[13]
+        ymax = data[14]
       } else if (block === 5 || block === 10) { // For 3D-SCOPE blocks
-        xmin = data[12]; xmax = data[13]; ymin = data[14]; ymax = data[15]; zmin = data[16]; zmax = data[17];
+        xmin = data[12]
+        xmax = data[13]
+        ymin = data[14]
+        ymax = data[15]
+        zmin = data[16]
+        zmax = data[17]
       } else if (block === 11) { // For BARXY
-        xmin = data[8]; xmax = data[9]; ymin = data[10]; ymax = data[11];
+        xmin = data[8]
+        xmax = data[9]
+        ymin = data[10]
+        ymax = data[11]
       } else if (block === 12) { // For CMATVIEW
-        xmin = 0; xmax = data[8]; ymin = 0; ymax = data[10];
+        xmin = 0
+        xmax = data[8]
+        ymin = 0
+        ymax = data[10]
       } else if (block === 23) { // For CEVENTSCOPE
-        xmin = 0; xmax = data[11]; ymin = 0; ymax = 1;
+        xmin = 0
+        xmax = data[11]
+        ymin = 0
+        ymax = 1
       } else {
-        xmin = 0; xmax = data[13]; ymin = data[11]; ymax = data[12];
+        xmin = 0
+        xmax = data[13]
+        ymin = data[11]
+        ymax = data[12]
       }
-      let alpha = null, theta = null;
+      let alpha = null
+      let theta = null
       if (block === 5 || block === 10) { // For 3D-SCOPE blocks
-        alpha = data[18]; theta = data[19];
+        alpha = data[18]
+        theta = data[19]
       }
-      let color_axis = null;
+      let colorAxis = null
       if (block === 12) { // For CMATVIEW
-        color_axis = get_color_axis_for_points(figure_id);
+        colorAxis = getColorAxisForPoints(figureId)
       }
       // set default chart type
-      let type_chart;
+      let typeChart
       if (block === 4 || block === 5 || block === 9 || block === 10) { // For CSCOPXY or CANIMXY
-        type_chart = 'scatter';
+        typeChart = 'scatter'
       } else if (block === 12) { // For CMATVIEW
-        type_chart = 'heatmap';
+        typeChart = 'heatmap'
       } else if (block === 23) { // For CEVENTSCOPE
-        type_chart = 'column';
+        typeChart = 'column'
       } else {
-        type_chart = 'line';
+        typeChart = 'line'
       }
-      let title_text;
+      let titleText
       if (block === 4) { // For CSCOPXY
-        title_text = data[15] + '-' + data[2];
+        titleText = data[15] + '-' + data[2]
       } else if (block === 5) { // For 3D-SCOPE block
-        title_text = data[20] + '-' + data[2];
+        titleText = data[20] + '-' + data[2]
       } else if (block === 9) { // For CANIMXY
-        title_text = data[16] + '-' + data[2];
+        titleText = data[16] + '-' + data[2]
       } else if (block === 10) { // For 3D-SCOPE block
-        title_text = data[21] + '-' + data[2];
+        titleText = data[21] + '-' + data[2]
       } else if (block === 11) { // For BARXY
-        title_text = data[13] + '-' + figure_id;
+        titleText = data[13] + '-' + figureId
       } else if (block === 12) { // For CMATVIEW
-        title_text = data[data.length - 1] + '-' + figure_id;
+        titleText = data[data.length - 1] + '-' + figureId
       } else if (block === 23) { // For CEVENTSCOPE
-        title_text = data[12] + '-' + data[2];
+        titleText = data[12] + '-' + data[2]
       } else {
-        title_text = data[14] + '-' + data[2];
+        titleText = data[14] + '-' + data[2]
       }
 
-      if (chartIdList.current[figure_id] === undefined) {
+      if (chartIdList.current[figureId] === undefined) {
         if (block === 5 || block === 10) {
           // process data for 3D-SCOPE blocks
-          create_new_chart_3d(figure_id, no_of_graph, xmin, xmax, ymin, ymax, zmin, zmax, type_chart, title_text, alpha, theta);
+          createNewChart3d(figureId, noOfGraph, xmin, xmax, ymin, ymax, zmin, zmax, typeChart, titleText, alpha, theta)
         } else if (block < 5 || block === 9 || block === 11 || block === 12 || block === 23) {
           // sink block is not CSCOPXY
-          create_new_chart(figure_id, no_of_graph, xmin, xmax, ymin, ymax, type_chart, title_text, color_axis);
-          RANGE[chartIdList.current[figure_id]] = parseFloat(xmax);
+          createNewChart(figureId, noOfGraph, xmin, xmax, ymin, ymax, typeChart, titleText, colorAxis)
+          RANGE[chartIdList.current[figureId]] = parseFloat(xmax)
         }
       }
 
       // For BARXY
       if (block === 11) {
-        let x1 = parseFloat(data[4]);
-        let y1 = parseFloat(data[5]);
-        let x2 = parseFloat(data[6]);
-        let y2 = parseFloat(data[7]);
+        const x1 = parseFloat(data[4])
+        const y1 = parseFloat(data[5])
+        const x2 = parseFloat(data[6])
+        const y2 = parseFloat(data[7])
 
-        pnts.push([x1, y1]);
-        pnts.push([x2, y2]);
+        pnts.push([x1, y1])
+        pnts.push([x2, y2])
 
         // Ending condition for blocks not having a dataline for 'Ending'
-        if (pnts.length === (this.finalIntegrationTime*10-1)) {
-          let xhr = new XMLHttpRequest();
-          xhr.open("GET", "/endBlock/"+figure_id, true);
-          xhr.send();
+        if (pnts.length === this.finalIntegrationTime * 10 - 1) {
+          const xhr = new XMLHttpRequest()
+          xhr.open('GET', '/endBlock/' + figureId, true)
+          xhr.send()
         }
       } else if (block === 21 || block === 22) {
         // handle writec_f and writeau_f
         // create a form and add the filename to it
-        let form = new FormData()
-        form.append('path', data[4]);
-        let xhr = new XMLHttpRequest();
-        xhr.responseType = 'blob';
+        const form = new FormData()
+        form.append('path', data[4])
+        const xhr = new XMLHttpRequest()
+        xhr.responseType = 'blob'
         // sending form to get file for download
-        xhr.open("POST", "/downloadfile", true);
+        xhr.open('POST', '/downloadfile', true)
         xhr.onload = function () {
           if (this.status === 200) {
             // blob data type to receive the file
-            let blob = this.response;
-            let url = window.URL.createObjectURL(blob);
+            const blob = this.response
+            const url = window.URL.createObjectURL(blob)
             // popup for download option of the file
-            let anchor = document.createElement("a");
-            document.body.appendChild(anchor);
-            anchor.style = "display: none";
-            anchor.href = url;
+            const anchor = document.createElement('a')
+            document.body.appendChild(anchor)
+            anchor.style = 'display: none'
+            anchor.href = url
             if (block === 21) {
-              anchor.download = "writec-" + taskId + ".datas";
+              anchor.download = 'writec-' + taskId + '.datas'
             } else {
-              anchor.download = "audio-" + taskId + ".au";
+              anchor.download = 'audio-' + taskId + '.au'
             }
-            anchor.click();
-            document.body.removeChild(anchor);
-            window.URL.revokeObjectURL(url);
+            anchor.click()
+            document.body.removeChild(anchor)
+            window.URL.revokeObjectURL(url)
           }
-        };
-        xhr.send(form);
-        let xhr2 = new XMLHttpRequest();
-        xhr2.open("POST", "/deletefile");
+        }
+        xhr.send(form)
+        const xhr2 = new XMLHttpRequest()
+        xhr2.open('POST', '/deletefile')
         xhr2.onload = function () {
-        };
-        xhr2.send(form);
-      } else if (block < 5 ||block === 9 ||block === 23 ||block === 12) {
+        }
+        xhr2.send(form)
+      } else if (block < 5 || block === 9 || block === 23 || block === 12) {
         // added new condition for ceventscope
         // process data for 2D-SCOPE blocks
-        let line_id = parseInt(data[6]);
-        let x = parseFloat(data[8]);
-        let y = parseFloat(data[9]);
+        const lineId = parseInt(data[6])
+        const x = parseFloat(data[8])
+        const y = parseFloat(data[9])
         // store 2d-data
         if (block !== 12) {
-          addPointToGraph(figure_id, [line_id, x, y]);
+          addPointToGraph(figureId, [lineId, x, y])
         } else {
-          let values = get_points_for_data(data, data[8], data[10]);
-          cmatview_counter++; // to count lines from log
-          if (cmatview_counter === 1) {
+          const values = getPointsForData(data, data[8], data[10])
+          cmatviewCounter++ // to count lines from log
+          if (cmatviewCounter === 1) {
             // Only add points of line 1, so that no delay in chart appearance)
-            addPointToGraph(figure_id, [line_id, values]);
-          } else if (cmatview_counter < 16) {
+            addPointToGraph(figureId, [lineId, values])
+          } else if (cmatviewCounter < 16) {
             // Only add points of line which are multiple of 5, till 15 like 5 10 15 (this is to reduce load on browser)
-            let count = cmatview_counter % 5;
+            const count = cmatviewCounter % 5
             if (count === 0) {
-              addPointToGraph(figure_id, [line_id, values]);
+              addPointToGraph(figureId, [lineId, values])
             }
           } else {
             // Only add points of line which are multiple of 10 but after 16 like 20 30 ... (this is to reduce load on browser)
-            let count = cmatview_counter % 10;
+            const count = cmatviewCounter % 10
             if (count === 0) {
-              addPointToGraph(figure_id, [line_id, values]);
+              addPointToGraph(figureId, [lineId, values])
             }
           }
         }
         // store block number for chart creation
       } else if (block === 5 || block === 10) {
         // process data for 3D-SCOPE blocks
-        let line_id = parseInt(data[6]);
-        let x = parseFloat(data[8]);
-        let y = parseFloat(data[9]);
-        let z = parseFloat(data[10]);
+        const lineId = parseInt(data[6])
+        const x = parseFloat(data[8])
+        const y = parseFloat(data[9])
+        const z = parseFloat(data[10])
         // store 3d-data
-        addPointToGraph(figure_id, [line_id, x, y, z]);
+        addPointToGraph(figureId, [lineId, x, y, z])
         // store block number for chart creation
       } else if (block === 13) {
         // process data for CMAT3D blocks
-        // let block_uid = data[2];
-        // let m = data[8];
-        // let n = data[10];
-        // let xmin = data[12];
-        // let xmax = data[14];
-        // let ymin = data[16];
-        // let ymax = data[18];
-        // let zmin = data[20];
-        // let zmax = data[22];
-        // let alpha = data[24];
-        // let theta = data[26];
+        // const blockUid = data[2]
+        // const m = data[8]
+        // const n = data[10]
+        // const xmin = data[12]
+        // const xmax = data[14]
+        // const ymin = data[16]
+        // const ymax = data[18]
+        // const zmin = data[20]
+        // const zmax = data[22]
+        // const alpha = data[24]
+        // const theta = data[26]
         // Chart function need to be written
       } else if (block === 20) {
         // Process data for Affich_m block
 
         // store length of data for each line
-        let length_of_data = data.length;
-        let block_id = data[2]; // to store block id of affichm block
-        let columns = data[5]; // gets column of matrix
+        const lengthOfData = data.length
+        const blockId = data[2] // to store block id of affichm block
+        const columns = data[5] // gets column of matrix
 
         // below code creates a html code which is table with data in that
         // (To display it as matrix)
-        let p = "<b>Value of Block : " + data[length_of_data-1] + "-" + block_id + "</b> (Refer to label on block)<br><br><table style='width:100%'><tr>";
-        let count = 1;
-        for (let k = 6; k < (length_of_data-1); k++) {
+        let p = '<b>Value of Block : ' + data[lengthOfData - 1] + '-' + blockId + "</b> (Refer to label on block)<br><br><table style='width:100%'><tr>"
+        let count = 1
+        for (let k = 6; k < lengthOfData - 1; k++) {
           if (data[k].length !== 0) {
-            p += "<td>";
-            p += data[k];
-            if ((count % columns) === 0) {
+            p += '<td>'
+            p += data[k]
+            if (count % columns === 0) {
               // to break into new column of table
-              p += "</td></tr><tr>";
+              p += '</td></tr><tr>'
             } else {
-              p += "</td>";
+              p += '</td>'
             }
-            count++;
+            count++
           }
         }
-        p += "</table>";
+        p += '</table>'
         // to send data to display result
-        create_affich_displaytext(p, block_id);
+        createAffichDisplaytext(p, blockId)
       }
     }, false)
     sse.addEventListener('duplicate', e => {
-      printloglines();
-      console.log('duplicate', e);
+      printloglines()
+      console.log('duplicate', e)
     }, false)
     sse.addEventListener('DONE', () => {
-      printloglines();
-      console.log('DONE');
-      sse.close();
-      setGraphStatusDone();
+      printloglines()
+      console.log('DONE')
+      sse.close()
+      setGraphStatusDone()
     }, false)
     sse.addEventListener('ERROR', e => {
-      printloglines();
-      console.log('ERROR', e);
-      sse.close();
+      printloglines()
+      console.log('ERROR', e)
+      sse.close()
     }, false)
     sse.addEventListener('MESSAGE', e => {
-      printloglines();
-      console.log('MESSAGE', e);
-      sse.close();
+      printloglines()
+      console.log('MESSAGE', e)
+      sse.close()
     }, false)
-  }, [taskId, RANGE, chartIdList, name_values_colormap])
+  }, [taskId, RANGE, chartIdList, nameValuesColormap])
 
   // Get the simulation result with task_Id
   const simulationResult = useCallback((url, streamingUrl) => {
@@ -557,28 +585,28 @@ export default function SimulationScreen2 ({ open, close }) {
         switch (res.data.state) {
           case 'PROGRESS':
           case 'PENDING':
-          setIsResult(false)
-          timeoutRef.current = setTimeout(() => simulationResult(url, streamingUrl), 10000)
-          break
+            setIsResult(false)
+            timeoutRef.current = setTimeout(() => simulationResult(url, streamingUrl), 10000)
+            break
 
           case 'STREAMING':
           case 'SUCCESS':
-          streamSimulationResult(streamingUrl)
-          setIsResult(true)
-          dispatch(setResultGraph(null))
-          if (timeoutRef.current !== null) {
-            clearTimeout(timeoutRef.current)
-            timeoutRef.current = null
-          }
-          break
+            streamSimulationResult(streamingUrl)
+            setIsResult(true)
+            dispatch(setResultGraph(null))
+            if (timeoutRef.current !== null) {
+              clearTimeout(timeoutRef.current)
+              timeoutRef.current = null
+            }
+            break
 
           default:
-          console.log('unhandled case', res)
-          if (timeoutRef.current !== null) {
-            clearTimeout(timeoutRef.current)
-            timeoutRef.current = null
-          }
-          break
+            console.log('unhandled case', res)
+            if (timeoutRef.current !== null) {
+              clearTimeout(timeoutRef.current)
+              timeoutRef.current = null
+            }
+            break
         }
       })
       .catch(function (error) {
@@ -586,49 +614,51 @@ export default function SimulationScreen2 ({ open, close }) {
       })
   }, [dispatch, streamSimulationResult])
 
-  const getSimulationResult = useCallback((task_id) => {
-    if (task_id === '')
+  const getSimulationResult = useCallback((taskId) => {
+    if (taskId === '') {
       return
+    }
 
-    if (isResult)
+    if (isResult) {
       return
+    }
 
-    const getUrl = 'simulation/status/' + task_id
-    const getStreamingUrl = 'simulation/streaming/' + task_id
+    const getUrl = 'simulation/status/' + taskId
+    const getStreamingUrl = 'simulation/streaming/' + taskId
 
     simulationResult(getUrl, getStreamingUrl)
   }, [isResult, simulationResult])
 
   useEffect(() => getSimulationResult(taskId), [taskId, getSimulationResult])
 
-/*
- * Function to display values of all affich blocks
- * displayParameter : Contains the data which is display as data of affich
- * block
- * blockId : is used to get needed div according to affichm id
- */
-function create_affich_displaytext (displayParameter, blockId) {
+  /*
+   * Function to display values of all affich blocks
+   * displayParameter : Contains the data which is display as data of affich
+   * block
+   * blockId : is used to get needed div according to affichm id
+   */
+  function createAffichDisplaytext (displayParameter, blockId) {
     // updating html data of div html for each time change according to each
     // affich
-    $('#affichdata-'+blockId).html(displayParameter);
-};
-
-// Gets data (array with x , y and coloraxis values) to be passed to chart points
-function get_points_for_data (data, m, n) {
-    const array_data = [];
-    let i = 12;
-    for (let x = (m-2) ; x >= 0; x--) {
-        for (let y = 0 ; y < (n-1) ; y++) {
-            const data_values = [];
-            data_values[0] = x;
-            data_values[1] = y;
-            data_values[2] = parseInt(data[i]);
-            array_data.push(data_values);
-            i++;
-        }
+    $('#affichdata-' + blockId).html(displayParameter)
+  }
+
+  // Gets data (array with x , y and coloraxis values) to be passed to chart points
+  function getPointsForData (data, m, n) {
+    const arrayData = []
+    let i = 12
+    for (let x = m - 2; x >= 0; x--) {
+      for (let y = 0; y < n - 1; y++) {
+        const dataValues = []
+        dataValues[0] = x
+        dataValues[1] = y
+        dataValues[2] = parseInt(data[i])
+        arrayData.push(dataValues)
+        i++
+      }
     }
-    return array_data;
-}
+    return arrayData
+  }
 
   const typography1 = 'SOMETHING WENT WRONG. Please Check The Simulation Parameters.'
   const typography2 = 'SOMETHING WENT WRONG. Please Check The Simulation Parameters And ' + process.env.REACT_APP_DIAGRAM_NAME + '.'
@@ -689,7 +719,7 @@ function get_points_for_data (data, m, n) {
                           (noOfGraphs >= 1)
                             ? <Graph2
                               key={0}
-                              ref={el => graphsRef.current[0] = el}
+                              ref={el => { graphsRef.current[0] = el }}
                               datapoint={datapointsRef.current[0]}
                             />
                             : <div />
@@ -698,7 +728,7 @@ function get_points_for_data (data, m, n) {
                           (noOfGraphs >= 2)
                             ? <Graph2
                               key={1}
-                              ref={el => graphsRef.current[1] = el}
+                              ref={el => { graphsRef.current[1] = el }}
                               datapoint={datapointsRef.current[1]}
                             />
                             : <div />
diff --git a/blocks/eda-frontend/src/components/Shared/Graph2.js b/blocks/eda-frontend/src/components/Shared/Graph2.js
index fe28673b..34283b71 100644
--- a/blocks/eda-frontend/src/components/Shared/Graph2.js
+++ b/blocks/eda-frontend/src/components/Shared/Graph2.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
-import Highcharts from 'highcharts';
-import HighchartsReact from 'highcharts-react-official';
+import Highcharts from 'highcharts'
+import HighchartsReact from 'highcharts-react-official'
 import Chart from 'chart.js'
 import 'chartjs-plugin-colorschemes'
 import { Queue } from '../../utils/Queue'
@@ -8,57 +8,57 @@ import { Queue } from '../../utils/Queue'
 // Chart Style Options
 Chart.defaults.global.defaultFontColor = '#e6e6e6'
 
-let statusDone = false;
+let statusDone = false
 
 export function setStatusDone () {
-  statusDone = true;
+  statusDone = true
 }
 
 class Graph2 extends Component {
   pointList = new Queue();
 
   addPointToQueue = (id, point) => {
-    this.pointList.enqueue(point);
+    this.pointList.enqueue(point)
   }
 
-  constructor(props) {
+  constructor (props) {
     super(props)
-    const datapoint = props.datapoint;
-    const pointList = this.pointList;
+    const datapoint = props.datapoint
+    const pointList = this.pointList
     this.state = {
       options: {
         chart: {
           events: {
             load: function () {
               // set up the updating of the chart each second
-              let chart = this;
-              let series = this.series[0];
-              let starttime = Date.now();
+              const chart = this
+              const series = this.series[0]
+              const starttime = Date.now()
               function addPoints () {
                 while (!pointList.isEmpty()) {
-                  let point = pointList.peek();
-                  let x = parseFloat(point[1]);
-                  let timediff = (starttime + x * 1000) - Date.now();
+                  const point = pointList.peek()
+                  const x = parseFloat(point[1])
+                  let timediff = (starttime + x * 1000) - Date.now()
                   if (timediff > 0) {
                     if (timediff < 1000) {
-                      timediff *= 5;
-                      if (timediff > 1000)
-                        timediff = 1000;
+                      timediff *= 5
+                      if (timediff > 1000) {
+                        timediff = 1000
+                      }
                     }
-                    setTimeout(addPoints, timediff);
-                    return;
+                    setTimeout(addPoints, timediff)
+                    return
                   }
-                  let y = parseFloat(point[2]);
-                  series.addPoint([x, y]);
-                  pointList.dequeue();
+                  const y = parseFloat(point[2])
+                  series.addPoint([x, y])
+                  pointList.dequeue()
                 }
-                chart.redraw();
+                chart.redraw()
                 if (!pointList.isEmpty() || !statusDone) {
-                  setTimeout(addPoints, 1000);
-                  return;
+                  setTimeout(addPoints, 1000)
                 }
               }
-              addPoints();
+              addPoints()
             }
           },
           type: datapoint.datapointType,
diff --git a/blocks/eda-frontend/src/components/Shared/Navbar.js b/blocks/eda-frontend/src/components/Shared/Navbar.js
index 93af9fcc..ab96772c 100644
--- a/blocks/eda-frontend/src/components/Shared/Navbar.js
+++ b/blocks/eda-frontend/src/components/Shared/Navbar.js
@@ -162,7 +162,7 @@ export function Header () {
                 Simulator
               </Link>
             </>
-              )
+            )
           )
         }
       </nav>