diff options
author | Sunil Shetye | 2022-01-11 20:36:33 +0530 |
---|---|---|
committer | Sunil Shetye | 2022-01-12 00:38:02 +0530 |
commit | 7202634e4656522f8255d2b35cf1a2ec6c6b1ffd (patch) | |
tree | 2ebace532408f05edf0c6df101cb1aca1ee61c3e | |
parent | 257520d422f7657309ee9614b5a010b405f3aeab (diff) | |
download | Common-Interface-Project-7202634e4656522f8255d2b35cf1a2ec6c6b1ffd.tar.gz Common-Interface-Project-7202634e4656522f8255d2b35cf1a2ec6c6b1ffd.tar.bz2 Common-Interface-Project-7202634e4656522f8255d2b35cf1a2ec6c6b1ffd.zip |
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> |