Merge branch 'xcosblocks' into xcosblocks

36 files changed, 365 insertions, 134 deletions

diff --git a/blocks/eda-frontend/eslint.config.mjs b/blocks/eda-frontend/eslint.config.mjs
index 9edf59b8..81c5b943 100644
--- a/blocks/eda-frontend/eslint.config.mjs
+++ b/blocks/eda-frontend/eslint.config.mjs
@@ -1,11 +1,11 @@
 // eslint.config.mjs
-import js from '@eslint/js'
 import babelParser from '@babel/eslint-parser'
-import reactPlugin from 'eslint-plugin-react'
-import reactHooksPlugin from 'eslint-plugin-react-hooks'
+import js from '@eslint/js'
 import importPlugin from 'eslint-plugin-import'
 import nPlugin from 'eslint-plugin-n'
 import promisePlugin from 'eslint-plugin-promise'
+import reactPlugin from 'eslint-plugin-react'
+import reactHooksPlugin from 'eslint-plugin-react-hooks'
 import globals from 'globals'
 
 export default [
@@ -69,7 +69,39 @@ export default [
       'react/jsx-uses-vars': 'error',
       'react/react-in-jsx-scope': 'off',
       'react-hooks/exhaustive-deps': 'warn',
-      'react-hooks/rules-of-hooks': 'error'
+      'react-hooks/rules-of-hooks': 'error',
+
+      // Import order
+      'import/order': ['warn', {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'object',
+          'type'
+        ],
+        pathGroups: [
+          {
+            pattern: '{react,react-dom,react-loader-spinner,react-redux,react-router-dom}',
+            group: 'external',
+            position: 'before'
+          },
+          {
+            pattern: '{@material-ui/**,@mui/**}',
+            group: 'external',
+            position: 'after'
+          }
+        ],
+        pathGroupsExcludedImportTypes: ['builtin'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true
+        }
+      }]
     }
   }
 ]
diff --git a/blocks/eda-frontend/src/App.js b/blocks/eda-frontend/src/App.js
index 6c0eb017..d28c1296 100644
--- a/blocks/eda-frontend/src/App.js
+++ b/blocks/eda-frontend/src/App.js
@@ -1,19 +1,19 @@
 import { useEffect } from 'react'
-import PropTypes from 'prop-types'
+import { useSelector, useDispatch } from 'react-redux'
 import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
+
+import PropTypes from 'prop-types'
+
 import CircularProgress from '@material-ui/core/CircularProgress'
 
 import Navbar from './components/Shared/Navbar'
+import Dashboard from './pages/Dashboard'
+import Gallery from './pages/Gallery'
 import Home from './pages/Home'
 import Login from './pages/Login'
 import NotFound from './pages/NotFound'
 import SchematicEditor from './pages/SchematicEditor'
-
-import Gallery from './pages/Gallery'
-import Dashboard from './pages/Dashboard'
 import SignUp from './pages/signUp'
-
-import { useSelector, useDispatch } from 'react-redux'
 import { loadUser } from './redux/authSlice'
 
 // Controls Private routes, this are accessible for authenticated users.  [ e.g : dashboard ]
diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
index 93e245e6..52f7c4ed 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardHome.js
@@ -1,7 +1,8 @@
+import { useSelector } from 'react-redux'
+import { Link as RouterLink } from 'react-router-dom'
+
 import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { Link as RouterLink } from 'react-router-dom'
-import { useSelector } from 'react-redux'
 
 import ProgressPanel from './ProgressPanel'
 
diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
index 5a81905f..f05203e2 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
@@ -1,9 +1,21 @@
 import { useEffect } from 'react'
-import { Avatar, Divider, Hidden, InputBase, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@material-ui/core'
+import { useDispatch, useSelector } from 'react-redux'
 import { Link as RouterLink } from 'react-router-dom'
-import { makeStyles } from '@material-ui/core/styles'
+
+import {
+  Avatar,
+  Divider,
+  Hidden,
+  InputBase,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Typography
+} from '@material-ui/core'
 import { deepPurple } from '@material-ui/core/colors'
-import { useDispatch, useSelector } from 'react-redux'
+import { makeStyles } from '@material-ui/core/styles'
+
 import { fetchSchematics } from '../../redux/dashboardSlice'
 import { getUppercaseInitial } from '../../utils/GalleryUtils'
 
diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
index e7830400..908b4054 100644
--- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
+++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import PropTypes from 'prop-types'
+
 import { Tab, Box, Tabs, AppBar, Typography, Grid } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import PropTypes from 'prop-types'
 
-import SchematicCard from './SchematicCard'
-import { useDispatch, useSelector } from 'react-redux'
 import { fetchSchematics } from '../../redux/dashboardSlice'
 
+import SchematicCard from './SchematicCard'
+
 const useStyles = makeStyles((theme) => ({
   root: {
     flexGrow: 1,
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
index f07c3974..e4807111 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
@@ -1,13 +1,27 @@
 import { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { Link as RouterLink } from 'react-router-dom'
+
 import PropTypes from 'prop-types'
-import { Button, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Snackbar, Tooltip, Typography } from '@material-ui/core'
-import ShareIcon from '@material-ui/icons/Share'
+
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Snackbar,
+  Tooltip,
+  Typography
+} from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { Link as RouterLink } from 'react-router-dom'
 import DeleteIcon from '@material-ui/icons/Delete'
-import { useDispatch } from 'react-redux'
-import { deleteSchematic } from '../../redux/dashboardSlice'
+import ShareIcon from '@material-ui/icons/Share'
 import MuiAlert from '@material-ui/lab/Alert'
+
+import { deleteSchematic } from '../../redux/dashboardSlice'
 import { getDate } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
index e0c8ea40..91c19dc9 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
@@ -1,12 +1,14 @@
 import { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Link as RouterLink } from 'react-router-dom'
+
 import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { Link as RouterLink } from 'react-router-dom'
 
-import SchematicCard from './SchematicCard'
-import { useDispatch, useSelector } from 'react-redux'
 import { fetchSchematics } from '../../redux/dashboardSlice'
 
+import SchematicCard from './SchematicCard'
+
 const useStyles = makeStyles({
   mainHead: {
     width: '100%',
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
index 8575e5e7..ecf8ae74 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
@@ -1,11 +1,14 @@
 /* eslint new-cap: ["error", {"newIsCapExceptionPattern": "^mx"}] */
 import { useEffect, useState } from 'react'
+import { TailSpin } from 'react-loader-spinner'
 import { useSelector, useDispatch } from 'react-redux'
+
 import mxGraphFactory from 'mxgraph'
+
 import { ListItem, ListItemText, Button, TextField } from '@material-ui/core'
-import { TailSpin } from 'react-loader-spinner'
 
 import { setCompProperties } from '../../redux/componentPropertiesSlice'
+
 import { graph } from './Helper/ComponentDrag'
 import { portSize } from './Helper/SvgParser'
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
index 16ffe2b7..e7afc227 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
@@ -1,20 +1,39 @@
 import { useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import api from '../../utils/Api'
-import { Collapse, Hidden, IconButton, InputAdornment, List, ListItem, ListItemIcon, TextField, Tooltip } from '@material-ui/core'
 import { TailSpin } from 'react-loader-spinner'
-import SearchIcon from '@material-ui/icons/Search'
+import { useDispatch, useSelector } from 'react-redux'
 
+import PropTypes from 'prop-types'
+
+import {
+  Collapse,
+  Hidden,
+  IconButton,
+  InputAdornment,
+  List,
+  ListItem,
+  ListItemIcon,
+  TextField,
+  Tooltip
+} from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import CloseIcon from '@material-ui/icons/Close'
 import ExpandLess from '@material-ui/icons/ExpandLess'
 import ExpandMore from '@material-ui/icons/ExpandMore'
-import CloseIcon from '@material-ui/icons/Close'
+import SearchIcon from '@material-ui/icons/Search'
+
+import {
+  fetchComponents,
+  fetchComponentImages,
+  fetchLibraries,
+  toggleCollapse,
+  toggleSimulate
+} from '../../redux/schematicEditorSlice'
+import api from '../../utils/Api'
 
 import './Helper/SchematicEditor.css'
-import { useDispatch, useSelector } from 'react-redux'
-import { fetchLibraries, toggleCollapse, fetchComponents, fetchComponentImages, toggleSimulate } from '../../redux/schematicEditorSlice'
 import SideComp from './SideComp'
 import SimulationProperties from './SimulationProperties'
+
 const COMPONENTS_PER_ROW = 3
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Header.js b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
index 5780973e..78cdd329 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Header.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
+import { useSelector, useDispatch } from 'react-redux'
 import { useHistory, Link as RouterLink } from 'react-router-dom'
+
+import PropTypes from 'prop-types'
+
 import {
   Avatar,
   Button,
@@ -23,15 +26,14 @@ import {
   Toolbar,
   Typography
 } from '@material-ui/core'
-import { useSelector, useDispatch } from 'react-redux'
-import ShareIcon from '@material-ui/icons/Share'
-import CloseIcon from '@material-ui/icons/Close'
-import { makeStyles } from '@material-ui/core/styles'
 import { deepPurple } from '@material-ui/core/colors'
+import { makeStyles } from '@material-ui/core/styles'
+import CloseIcon from '@material-ui/icons/Close'
+import ShareIcon from '@material-ui/icons/Share'
 
-import logo from '../../static/favicon.ico'
-import { setSchTitle, setSchShared } from '../../redux/saveSchematicSlice'
 import { logout } from '../../redux/authSlice'
+import { setSchTitle, setSchShared } from '../../redux/saveSchematicSlice'
+import logo from '../../static/favicon.ico'
 import { getDateTime as getDate, getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
index d222e7e3..9c84e3ba 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
@@ -2,15 +2,16 @@
 import 'mxgraph/javascript/src/css/common.css'
 
 import mxGraphFactory from 'mxgraph'
+
+import { getCompProperties, closeCompProperties } from '../../../redux/componentPropertiesSlice'
 import store from '../../../redux/store'
 import dot from '../../../static/dot.gif'
 import blockstyle from '../../../static/style.json'
-import { getCompProperties, closeCompProperties } from '../../../redux/componentPropertiesSlice'
-
 import { styleToObject } from '../../../utils/GalleryUtils'
-import toolbarTools, { editorZoomAct } from './ToolbarTools'
+
 import keyboardShortcuts from './KeyboardShortcuts'
 import { sideBar } from './SideBar'
+import toolbarTools, { editorZoomAct } from './ToolbarTools'
 import { renderGalleryXML } from './ToolbarTools'
 
 export let graph
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShortcuts.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShortcuts.js
index 06affdbe..bd69d7c4 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShortcuts.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/KeyboardShortcuts.js
@@ -2,7 +2,14 @@
 import 'mxgraph/javascript/src/css/common.css'
 
 import mxGraphFactory from 'mxgraph'
-import { editorUndo, editorRedo, editorZoomIn, editorZoomOut, editorZoomAct } from './ToolbarTools'
+
+import {
+  editorRedo,
+  editorUndo,
+  editorZoomAct,
+  editorZoomIn,
+  editorZoomOut
+} from './ToolbarTools'
 
 const {
   mxKeyHandler,
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js
index bba0960c..ecf62eec 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SideBar.js
@@ -2,6 +2,7 @@
 import 'mxgraph/javascript/src/css/common.css'
 
 import mxGraphFactory from 'mxgraph'
+
 import { defaultScale, getSvgMetadata } from './SvgParser'
 
 const {
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
index 37eb18f6..8c0e5ef5 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/SvgParser.js
@@ -3,9 +3,15 @@ import 'mxgraph/javascript/src/css/common.css'
 
 import mxGraphFactory from 'mxgraph'
 
-import { getRotationParameters, getPins, getPointXY, getSuperBlockDiagram } from './ToolbarTools'
 import { updateMxGraphXML } from '../../../utils/GalleryUtils'
 
+import {
+  getPins,
+  getPointXY,
+  getRotationParameters,
+  getSuperBlockDiagram
+} from './ToolbarTools'
+
 const {
   mxPoint
 } = new mxGraphFactory()
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
index 48c26199..73e3a1ac 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js
@@ -2,12 +2,14 @@
 import 'mxgraph/javascript/src/css/common.css'
 
 import { useSelector } from 'react-redux'
+
 import mxGraphFactory from 'mxgraph'
 
-import { portSize, getParameter } from './SvgParser'
-import { getPortType, InputPort, OutputPort } from './ComponentDrag'
 import { styleToObject } from '../../../utils/GalleryUtils'
 
+import { getPortType, InputPort, OutputPort } from './ComponentDrag'
+import { portSize, getParameter } from './SvgParser'
+
 let graph
 let undoManager
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
index eadfbe20..0e7194b7 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
@@ -1,11 +1,23 @@
 import { useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
 import PropTypes from 'prop-types'
-import { Hidden, List, ListItem, ListItemText, TextField, MenuItem, TextareaAutosize } from '@material-ui/core'
+
+import {
+  Hidden,
+  List,
+  ListItem,
+  ListItemText,
+  MenuItem,
+  TextField,
+  TextareaAutosize
+} from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import ComponentProperties from './ComponentProperties'
-import { useSelector, useDispatch } from 'react-redux'
+
 import { setSchDescription } from '../../redux/saveSchematicSlice'
 
+import ComponentProperties from './ComponentProperties'
+
 import './Helper/SchematicEditor.css'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
index fea06f10..7120e6ff 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/RightSidebar.js
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types'
+
 import { Drawer, Hidden, IconButton } from '@material-ui/core'
-import HighlightOffIcon from '@material-ui/icons/HighlightOff'
 import { makeStyles } from '@material-ui/core/styles'
+import HighlightOffIcon from '@material-ui/icons/HighlightOff'
 
 const drawerWidth = 250
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index 6d78dc66..b992db10 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -1,45 +1,79 @@
 /* eslint new-cap: ["error", {"newIsCapExceptionPattern": "^mx"}] */
 import { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
+import { useSelector, useDispatch } from 'react-redux'
+import { Link as RouterLink } from 'react-router-dom'
+
 import { Canvg } from 'canvg'
+import mxGraphFactory from 'mxgraph'
+import PropTypes from 'prop-types'
+import beautify from 'xml-beautifier'
+
 import {
-  IconButton, Tooltip, Drawer, List, ListItem, ListItemIcon, ListItemText, Divider, useMediaQuery, Snackbar
+  Divider,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Snackbar,
+  Tooltip,
+  useMediaQuery
 } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
 import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined'
-import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline'
+import ClearAllIcon from '@material-ui/icons/ClearAll'
+import CloseIcon from '@material-ui/icons/Close'
+import CreateNewFolderOutlinedIcon from '@material-ui/icons/CreateNewFolderOutlined'
+import DeleteIcon from '@material-ui/icons/Delete'
 import DescriptionIcon from '@material-ui/icons/Description'
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
-import UndoIcon from '@material-ui/icons/Undo'
-import RedoIcon from '@material-ui/icons/Redo'
-import ZoomInIcon from '@material-ui/icons/ZoomIn'
-import ZoomOutIcon from '@material-ui/icons/ZoomOut'
-import DeleteIcon from '@material-ui/icons/Delete'
-import SettingsOverscanIcon from '@material-ui/icons/SettingsOverscan'
+import ImageOutlinedIcon from '@material-ui/icons/ImageOutlined'
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'
+import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline'
 import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined'
+import RedoIcon from '@material-ui/icons/Redo'
 import RotateRightIcon from '@material-ui/icons/RotateRight'
-// import BorderClearIcon from '@material-ui/icons/BorderClear'
-import { makeStyles } from '@material-ui/core/styles'
-import CloseIcon from '@material-ui/icons/Close'
 import SaveOutlinedIcon from '@material-ui/icons/SaveOutlined'
-import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser'
-import ClearAllIcon from '@material-ui/icons/ClearAll'
-import CreateNewFolderOutlinedIcon from '@material-ui/icons/CreateNewFolderOutlined'
-import ImageOutlinedIcon from '@material-ui/icons/ImageOutlined'
+import SettingsOverscanIcon from '@material-ui/icons/SettingsOverscan'
 import SystemUpdateAltOutlinedIcon from '@material-ui/icons/SystemUpdateAltOutlined'
-import { Link as RouterLink } from 'react-router-dom'
-import beautify from 'xml-beautifier'
-import mxGraphFactory from 'mxgraph'
+import UndoIcon from '@material-ui/icons/Undo'
+import ZoomInIcon from '@material-ui/icons/ZoomIn'
+import ZoomOutIcon from '@material-ui/icons/ZoomOut'
 
-import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog, ScriptScreen } from './ToolbarExtension'
-import { editorZoomIn, editorZoomOut, editorZoomAct, deleteComp, PrintPreview, Rotate, editorUndo, editorRedo, saveXml, ClearGrid, renderGalleryXML } from './Helper/ToolbarTools'
-import { useSelector, useDispatch } from 'react-redux'
-import store from '../../redux/store'
 import { closeCompProperties } from '../../redux/componentPropertiesSlice'
-import { setSchXmlData, saveSchematic, openLocalSch, setLoadingDiagram } from '../../redux/saveSchematicSlice'
+import {
+  openLocalSch,
+  saveSchematic,
+  setLoadingDiagram,
+  setSchXmlData
+} from '../../redux/saveSchematicSlice'
 import { toggleSimulate } from '../../redux/schematicEditorSlice'
+import store from '../../redux/store'
 import api from '../../utils/Api'
 import { transformXcos, saveToFile } from '../../utils/GalleryUtils'
 
+import {
+  ClearGrid,
+  PrintPreview,
+  Rotate,
+  deleteComp,
+  editorRedo,
+  editorUndo,
+  editorZoomAct,
+  editorZoomIn,
+  editorZoomOut,
+  renderGalleryXML,
+  saveXml
+} from './Helper/ToolbarTools'
+import {
+  HelpScreen,
+  ImageExportDialog,
+  NetlistModal,
+  OpenSchDialog,
+  ScriptScreen
+} from './ToolbarExtension'
+
 const {
   mxUtils
 } = new mxGraphFactory()
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
index 3fe75e5f..c1ffa265 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SideComp.js
@@ -1,5 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
+
 import PropTypes from 'prop-types'
+
 import { List, ListItemText, Tooltip, Popover } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
index 9a01b8ab..70bfadd7 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationProperties.js
@@ -1,4 +1,6 @@
 import { useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
 import {
   Accordion,
   AccordionDetails,
@@ -11,17 +13,17 @@ import {
   TextField,
   Typography
 } from '@material-ui/core'
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import { makeStyles } from '@material-ui/core/styles'
-import { useSelector, useDispatch } from 'react-redux'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 
-import store from '../../redux/store'
 import { setResultTitle, setResultTaskId, resetResult } from '../../redux/simulationSlice'
-import { saveXml } from './Helper/ToolbarTools'
-import SimulationScreen, { setGraphStatusClosed } from './SimulationScreen'
-import { isStatusDone } from '../Shared/Graph'
+import store from '../../redux/store'
 import api from '../../utils/Api'
 import { sanitizeTitle } from '../../utils/GalleryUtils'
+import { isStatusDone } from '../Shared/Graph'
+
+import { saveXml } from './Helper/ToolbarTools'
+import SimulationScreen, { setGraphStatusClosed } from './SimulationScreen'
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
index 0159e158..cd018de9 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SimulationScreen.js
@@ -1,14 +1,27 @@
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
+import { useSelector, useDispatch } from 'react-redux'
+
 import Highcharts from 'highcharts'
-import { AppBar, Button, Container, Dialog, Grid, IconButton, Paper, Slide, Toolbar, Typography } from '@material-ui/core'
+import PropTypes from 'prop-types'
+
+import {
+  AppBar,
+  Button,
+  Container,
+  Dialog,
+  Grid,
+  IconButton,
+  Paper,
+  Slide,
+  Toolbar,
+  Typography
+} from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import CloseIcon from '@material-ui/icons/Close'
-import { useSelector, useDispatch } from 'react-redux'
 
-import Graph, { setStatusDone, setStatusClosed } from '../Shared/Graph'
 import { setResultGraph, setSimulating, setErrorMessage } from '../../redux/simulationSlice'
 import api from '../../utils/Api'
+import Graph, { setStatusDone, setStatusClosed } from '../Shared/Graph'
 
 let sse = null
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
index 1904edb3..0c6cc51c 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
@@ -1,5 +1,8 @@
 import { forwardRef, useCallback, useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+
 import PropTypes from 'prop-types'
+
 import {
   AppBar,
   Avatar,
@@ -32,18 +35,28 @@ import {
   Box,
   TextField
 } from '@material-ui/core'
-
+import { blue } from '@material-ui/core/colors'
 import { makeStyles } from '@material-ui/core/styles'
 import CloseIcon from '@material-ui/icons/Close'
-import { useSelector, useDispatch } from 'react-redux'
-import store from '../../redux/store'
-import { fetchSchematic, fetchDiagram, setSchScriptDump, setShowDot } from '../../redux/saveSchematicSlice'
+
 import { fetchSchematics, fetchGallery } from '../../redux/dashboardSlice'
+import {
+  fetchDiagram,
+  fetchSchematic,
+  setSchScriptDump,
+  setShowDot
+} from '../../redux/saveSchematicSlice'
 import { setScriptTaskId } from '../../redux/simulationSlice'
-import { blue } from '@material-ui/core/colors'
-import { getDateTime as getDate, getUppercaseInitial, saveToFile, sanitizeTitle } from '../../utils/GalleryUtils'
-import { renderGalleryXML } from './Helper/ToolbarTools'
+import store from '../../redux/store'
 import api from '../../utils/Api'
+import {
+  getDateTime as getDate,
+  getUppercaseInitial,
+  sanitizeTitle,
+  saveToFile
+} from '../../utils/GalleryUtils'
+
+import { renderGalleryXML } from './Helper/ToolbarTools'
 
 const Transition = forwardRef(function Transition (props, ref) {
   return <Slide direction='up' ref={ref} {...props} />
diff --git a/blocks/eda-frontend/src/components/Shared/Graph.js b/blocks/eda-frontend/src/components/Shared/Graph.js
index ae39c448..28571997 100644
--- a/blocks/eda-frontend/src/components/Shared/Graph.js
+++ b/blocks/eda-frontend/src/components/Shared/Graph.js
@@ -1,7 +1,9 @@
 import { Component } from 'react'
-import PropTypes from 'prop-types'
+
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
+import PropTypes from 'prop-types'
+
 import { Queue } from '../../utils/Queue'
 
 let statusDone = false
diff --git a/blocks/eda-frontend/src/components/Shared/Layout.js b/blocks/eda-frontend/src/components/Shared/Layout.js
index 563befc0..fb2d5afe 100644
--- a/blocks/eda-frontend/src/components/Shared/Layout.js
+++ b/blocks/eda-frontend/src/components/Shared/Layout.js
@@ -1,5 +1,7 @@
 import { useState } from 'react'
+
 import PropTypes from 'prop-types'
+
 import { AppBar, IconButton, Toolbar } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import MenuIcon from '@material-ui/icons/Menu'
diff --git a/blocks/eda-frontend/src/components/Shared/LayoutMain.js b/blocks/eda-frontend/src/components/Shared/LayoutMain.js
index 5db03e97..e347e959 100644
--- a/blocks/eda-frontend/src/components/Shared/LayoutMain.js
+++ b/blocks/eda-frontend/src/components/Shared/LayoutMain.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types'
+
 import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
index aaf94d19..9cc147a3 100644
--- a/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
+++ b/blocks/eda-frontend/src/components/Shared/LayoutSidebar.js
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types'
+
 import { Drawer, Hidden, IconButton } from '@material-ui/core'
-import HighlightOffIcon from '@material-ui/icons/HighlightOff'
 import { makeStyles } from '@material-ui/core/styles'
+import HighlightOffIcon from '@material-ui/icons/HighlightOff'
 
 const drawerWidth = 250
 
diff --git a/blocks/eda-frontend/src/components/Shared/Navbar.js b/blocks/eda-frontend/src/components/Shared/Navbar.js
index 23b87053..58d0ae24 100644
--- a/blocks/eda-frontend/src/components/Shared/Navbar.js
+++ b/blocks/eda-frontend/src/components/Shared/Navbar.js
@@ -1,12 +1,25 @@
 import { useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
+import { Link as RouterLink, useHistory } from 'react-router-dom'
 
-import { AppBar, Avatar, Button, Fade, IconButton, Link, ListItemText, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import {
+  AppBar,
+  Avatar,
+  Button,
+  Fade,
+  IconButton,
+  Link,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Typography
+} from '@material-ui/core'
 import { deepPurple } from '@material-ui/core/colors'
-import { Link as RouterLink, useHistory } from 'react-router-dom'
-import logo from '../../static/favicon.ico'
+import { makeStyles } from '@material-ui/core/styles'
+
 import { logout } from '../../redux/authSlice'
+import logo from '../../static/favicon.ico'
 import { getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/index.js b/blocks/eda-frontend/src/index.js
index eeeb3940..896fee7e 100644
--- a/blocks/eda-frontend/src/index.js
+++ b/blocks/eda-frontend/src/index.js
@@ -1,13 +1,16 @@
 // This is the JavaScript entry point of react application.
 import ReactDOM from 'react-dom'
-import * as serviceWorker from './serviceWorker'
+import { Provider } from 'react-redux'
+
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { ThemeProvider } from '@material-ui/core/styles'
-import theme from './theme'
-import './index.css'
+
 import App from './App'
-import { Provider } from 'react-redux'
 import store from './redux/store'
+import * as serviceWorker from './serviceWorker'
+import theme from './theme'
+import './index.css'
+
 ReactDOM.render(
   <ThemeProvider theme={theme}>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
diff --git a/blocks/eda-frontend/src/pages/Dashboard.js b/blocks/eda-frontend/src/pages/Dashboard.js
index f50c13c1..6ab62a86 100644
--- a/blocks/eda-frontend/src/pages/Dashboard.js
+++ b/blocks/eda-frontend/src/pages/Dashboard.js
@@ -1,15 +1,16 @@
 // Main Layout for user dashboard.
 import { useEffect } from 'react'
 import { Switch, Route } from 'react-router-dom'
+
 import { CssBaseline } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 
-import { Header } from '../components/Shared/Navbar'
-import Layout from '../components/Shared/Layout'
-import LayoutMain from '../components/Shared/LayoutMain'
-import DashboardSidebar from '../components/Dashboard/DashboardSidebar'
 import DashboardHome from '../components/Dashboard/DashboardHome'
+import DashboardSidebar from '../components/Dashboard/DashboardSidebar'
 import SchematicsList from '../components/Dashboard/SchematicsList'
+import Layout from '../components/Shared/Layout'
+import LayoutMain from '../components/Shared/LayoutMain'
+import { Header } from '../components/Shared/Navbar'
 
 const useStyles = makeStyles((_theme) => ({
   root: {
diff --git a/blocks/eda-frontend/src/pages/Gallery.js b/blocks/eda-frontend/src/pages/Gallery.js
index 2d5173eb..83d9e967 100644
--- a/blocks/eda-frontend/src/pages/Gallery.js
+++ b/blocks/eda-frontend/src/pages/Gallery.js
@@ -1,12 +1,31 @@
 // Main layout for gallery page.
 import { useCallback, useEffect, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Link as RouterLink } from 'react-router-dom'
+
 import PropTypes from 'prop-types'
-import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Container, CssBaseline, Grid, Typography, FormControl, InputLabel, Select, MenuItem, Input } from '@material-ui/core'
+
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Container,
+  CssBaseline,
+  FormControl,
+  Grid,
+  Input,
+  InputLabel,
+  MenuItem,
+  Select,
+  Typography
+} from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { Link as RouterLink } from 'react-router-dom'
-import { useDispatch, useSelector } from 'react-redux'
-import api from '../utils/Api'
+
 import { fetchGallery } from '../redux/dashboardSlice'
+import api from '../utils/Api'
 
 const useStyles = makeStyles((theme) => ({
   mainHead: {
diff --git a/blocks/eda-frontend/src/pages/Home.js b/blocks/eda-frontend/src/pages/Home.js
index ee952809..dab79c2e 100644
--- a/blocks/eda-frontend/src/pages/Home.js
+++ b/blocks/eda-frontend/src/pages/Home.js
@@ -1,11 +1,12 @@
 // Main layout for home page.
 import { useEffect } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
 
 import Button from '@material-ui/core/Button'
-import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
 import Container from '@material-ui/core/Container'
-import { Link as RouterLink } from 'react-router-dom'
+import { makeStyles } from '@material-ui/core/styles'
+import Typography from '@material-ui/core/Typography'
+
 import logo from '../static/favicon.ico'
 
 const useStyles = makeStyles((theme) => ({
diff --git a/blocks/eda-frontend/src/pages/Login.js b/blocks/eda-frontend/src/pages/Login.js
index 2a2677b4..e7ca5eac 100644
--- a/blocks/eda-frontend/src/pages/Login.js
+++ b/blocks/eda-frontend/src/pages/Login.js
@@ -1,5 +1,8 @@
 // User Login / Sign In page.
 import { useEffect, useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { Link as RouterLink } from 'react-router-dom'
+
 import PropTypes from 'prop-types'
 
 import {
@@ -20,11 +23,10 @@ import { makeStyles } from '@material-ui/core/styles'
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
-import { Link as RouterLink } from 'react-router-dom'
-import { useSelector, useDispatch } from 'react-redux'
+
 import { login, authDefault, googleLogin, githubLogin } from '../redux/authSlice'
-import google from '../static/google.png'
 import github from '../static/github-mark.png'
+import google from '../static/google.png'
 
 const useStyles = makeStyles((theme) => ({
   paper: {
diff --git a/blocks/eda-frontend/src/pages/SchematicEditor.js b/blocks/eda-frontend/src/pages/SchematicEditor.js
index 40c516b4..429ef1dc 100644
--- a/blocks/eda-frontend/src/pages/SchematicEditor.js
+++ b/blocks/eda-frontend/src/pages/SchematicEditor.js
@@ -1,27 +1,27 @@
 // Main Layout for Schematic Editor page.
 import { useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
 import { TailSpin } from 'react-loader-spinner'
+import { useDispatch, useSelector } from 'react-redux'
+
+import PropTypes from 'prop-types'
+
 import { CssBaseline } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 
-import Layout from '../components/Shared/Layout'
-import Header from '../components/SchematicEditor/Header'
+import { changePorts } from '../components/SchematicEditor/ComponentProperties'
 import ComponentSidebar, { ComponentImages } from '../components/SchematicEditor/ComponentSidebar'
-import LayoutMain from '../components/Shared/LayoutMain'
-import SchematicToolbar from '../components/SchematicEditor/SchematicToolbar'
-import RightSidebar from '../components/SchematicEditor/RightSidebar'
-import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
-import LoadGrid from '../components/SchematicEditor/Helper/ComponentDrag'
-
-import { renderGalleryXML, getSuperBlockDiagram } from '../components/SchematicEditor/Helper/ToolbarTools'
+import Header from '../components/SchematicEditor/Header'
+import LoadGrid, { graph, getCurrentDiagramXML } from '../components/SchematicEditor/Helper/ComponentDrag'
 import '../components/SchematicEditor/Helper/SchematicEditor.css'
+import { renderGalleryXML, getSuperBlockDiagram } from '../components/SchematicEditor/Helper/ToolbarTools'
+import PropertiesSidebar from '../components/SchematicEditor/PropertiesSidebar'
+import RightSidebar from '../components/SchematicEditor/RightSidebar'
+import SchematicToolbar from '../components/SchematicEditor/SchematicToolbar'
+import Layout from '../components/Shared/Layout'
+import LayoutMain from '../components/Shared/LayoutMain'
 import { fetchDiagram, fetchSchematic } from '../redux/saveSchematicSlice'
-import { useDispatch, useSelector } from 'react-redux'
 import store from '../redux/store'
 import { styleToObject } from '../utils/GalleryUtils'
-import { changePorts } from '../components/SchematicEditor/ComponentProperties'
-import { graph, getCurrentDiagramXML } from '../components/SchematicEditor/Helper/ComponentDrag'
 
 const useStyles = makeStyles((_theme) => ({
   root: {
diff --git a/blocks/eda-frontend/src/pages/signUp.js b/blocks/eda-frontend/src/pages/signUp.js
index a2adbd76..40a25a87 100644
--- a/blocks/eda-frontend/src/pages/signUp.js
+++ b/blocks/eda-frontend/src/pages/signUp.js
@@ -1,5 +1,8 @@
 // User Sign Up / Register page.
 import { useEffect, useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { Link as RouterLink } from 'react-router-dom'
+
 import {
   Avatar,
   Button,
@@ -18,11 +21,10 @@ import { makeStyles } from '@material-ui/core/styles'
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
-import { Link as RouterLink } from 'react-router-dom'
-import { useSelector, useDispatch } from 'react-redux'
+
 import { signUp, authDefault, googleLogin, githubLogin } from '../redux/authSlice'
-import google from '../static/google.png'
 import github from '../static/github-mark.png'
+import google from '../static/google.png'
 
 const useStyles = makeStyles((theme) => ({
   paper: {
diff --git a/blocks/eda-frontend/src/redux/store.js b/blocks/eda-frontend/src/redux/store.js
index b5975920..be95ef7a 100644
--- a/blocks/eda-frontend/src/redux/store.js
+++ b/blocks/eda-frontend/src/redux/store.js
@@ -1,4 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit'
+
 import authReducer from './authSlice'
 import componentPropertiesReducer from './componentPropertiesSlice'
 import dashboardReducer from './dashboardSlice'
diff --git a/blocks/eda-frontend/src/utils/Sigbuilder-graph.js b/blocks/eda-frontend/src/utils/Sigbuilder-graph.js
index 8f3c81dd..63b6162a 100644
--- a/blocks/eda-frontend/src/utils/Sigbuilder-graph.js
+++ b/blocks/eda-frontend/src/utils/Sigbuilder-graph.js
@@ -1,5 +1,6 @@
-import mxGraphFactory from 'mxgraph'
 import Highcharts from 'highcharts'
+import mxGraphFactory from 'mxgraph'
+
 import { getmethod, showModalWindow } from './dependencies'
 
 const {