From 73518e3e860fd3ee97d1702ee8375d001d21a027 Mon Sep 17 00:00:00 2001 From: claudiohbsantos Date: Mon, 1 Feb 2021 10:59:44 -0500 Subject: [PATCH 1/3] chore: install node type --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5cddb318..2ba6864a 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "@types/enzyme": "^3.10.7", "@types/enzyme-adapter-react-16": "^1.0.6", "@types/jest": "^26.0.14", - "@types/node": "^14.6.0", + "@types/node": "^14.14.22", "@types/react": "^16.9.46", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", From f881691f49be0cbf0f4235df4931fe4b75d7e0dd Mon Sep 17 00:00:00 2001 From: claudiohbsantos Date: Mon, 1 Feb 2021 11:37:47 -0500 Subject: [PATCH 2/3] chore: install linters and formatters --- .eslintrc.json | 26 ++++++++++++++++++++++++++ .prettierrc.json | 5 +++++ package.json | 10 ++++++++++ 3 files changed, 41 insertions(+) create mode 100644 .eslintrc.json create mode 100644 .prettierrc.json diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..4f180023 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,26 @@ +{ + "env": { + "browser": true, + "es2021": true, + "node": true + }, + "extends": [ + "plugin:react/recommended", + "airbnb", + "prettier" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": [ + "react", + "@typescript-eslint" + ], + "rules": { + } +} diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..85b1406c --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,5 @@ +{ + "singleQuote": true, + "tabWidth": 2, + "useTabs": false +} diff --git a/package.json b/package.json index 2ba6864a..bae17019 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,8 @@ "@types/react": "^16.9.46", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", + "@typescript-eslint/eslint-plugin": "^4.14.1", + "@typescript-eslint/parser": "^4.14.1", "babel-loader": "^8.1.0", "babel-minify-webpack-plugin": "^0.3.1", "csp-html-webpack-plugin": "^4.0.0", @@ -69,6 +71,13 @@ "electron-reloader": "^1.1.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", + "eslint": "^7.19.0", + "eslint-config-airbnb": "^18.2.1", + "eslint-config-prettier": "^7.2.0", + "eslint-plugin-import": "^2.22.1", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-react": "^7.22.0", + "eslint-plugin-react-hooks": "^4.2.0", "file-loader": "^6.0.0", "html-webpack-plugin": "^4.3.0", "image-webpack-loader": "^6.0.0", @@ -76,6 +85,7 @@ "mini-css-extract-plugin": "^0.9.0", "nodemon": "^2.0.4", "postcss-loader": "^3.0.0", + "prettier": "^2.2.1", "react-router-dom": "^5.2.0", "sass-loader": "^9.0.2", "source-map-loader": "^1.0.1", From 41f244fefb346cc8a5bdf7a434fd9bdd4f309633 Mon Sep 17 00:00:00 2001 From: claudiohbsantos Date: Mon, 1 Feb 2021 11:38:08 -0500 Subject: [PATCH 3/3] apply formatting rules --- backend/channels.ts | 64 ++---- backend/main.ts | 9 +- backend/mainMenu.ts | 46 ++-- backend/models.ts | 13 +- frontend/components/LoadingModal.tsx | 11 +- frontend/components/Splash.tsx | 27 ++- .../leftPanel/schemaChildren/Data.tsx | 9 +- .../schemaChildren/DummyDataPanel.tsx | 208 +++++++++--------- .../leftPanel/schemaChildren/SchemaModal.tsx | 15 +- frontend/components/rightPanel/Compare.tsx | 98 +++++---- frontend/components/rightPanel/History.tsx | 2 +- 11 files changed, 242 insertions(+), 260 deletions(-) diff --git a/backend/channels.ts b/backend/channels.ts index 436caa7b..6eb4eb62 100644 --- a/backend/channels.ts +++ b/backend/channels.ts @@ -70,11 +70,9 @@ let listObj: any; ipcMain.on('return-db-list', (event, dbName) => { // DB query to get the database size let dbSize: string; - db.query(`SELECT pg_size_pretty(pg_database_size('${dbName}'));`).then( - (queryStats) => { - dbSize = queryStats.rows[0].pg_size_pretty; - } - ); + db.query(`SELECT pg_size_pretty(pg_database_size('${dbName}'));`).then((queryStats) => { + dbSize = queryStats.rows[0].pg_size_pretty; + }); db.getLists().then((data) => event.sender.send('db-lists', data, dbSize)); }); @@ -93,15 +91,9 @@ ipcMain.on('upload-file', (event, filePath: string) => { let dbName: string; if (process.platform === 'darwin') { - dbName = filePath[0].slice( - filePath[0].lastIndexOf('/') + 1, - filePath[0].lastIndexOf('.') - ); + dbName = filePath[0].slice(filePath[0].lastIndexOf('/') + 1, filePath[0].lastIndexOf('.')); } else { - dbName = filePath[0].slice( - filePath[0].lastIndexOf('\\') + 1, - filePath[0].lastIndexOf('.') - ); + dbName = filePath[0].slice(filePath[0].lastIndexOf('\\') + 1, filePath[0].lastIndexOf('.')); } const createDB: string = createDBFunc(dbName); @@ -134,11 +126,9 @@ ipcMain.on('upload-file', (event, filePath: string) => { execute(runCmd, sendLists); // DB query to get the database size - db.query(`SELECT pg_size_pretty(pg_database_size('${dbName}'));`).then( - (queryStats) => { - dbSize = queryStats.rows[0].pg_size_pretty; - } - ); + db.query(`SELECT pg_size_pretty(pg_database_size('${dbName}'));`).then((queryStats) => { + dbSize = queryStats.rows[0].pg_size_pretty; + }); }; // Step 3: Import database file from file path into docker container @@ -315,19 +305,17 @@ ipcMain.on('execute-query-tracked', (event, data: QueryType) => { frontendData.queryData = queryData.rows; if (!queryString.match(/create/i)) { // Run EXPLAIN (FORMAT JSON, ANALYZE) - db.query('EXPLAIN (FORMAT JSON, ANALYZE) ' + queryString).then( - (queryStats) => { - frontendData.queryStatistics = queryStats.rows; - - (async function getListAsync() { - listObj = await db.getLists(); - frontendData.lists = listObj; - event.sender.send('db-lists', listObj); - event.sender.send('return-execute-query', frontendData); - event.sender.send('async-complete'); - })(); - } - ); + db.query('EXPLAIN (FORMAT JSON, ANALYZE) ' + queryString).then((queryStats) => { + frontendData.queryStatistics = queryStats.rows; + + (async function getListAsync() { + listObj = await db.getLists(); + frontendData.lists = listObj; + event.sender.send('db-lists', listObj); + event.sender.send('return-execute-query', frontendData); + event.sender.send('async-complete'); + })(); + }); } else { // Handling for tracking a create table query, can't run explain/analyze on create statements (async function getListAsync() { @@ -365,21 +353,11 @@ ipcMain.on('generate-dummy-data', (event: any, data: dummyDataRequest) => { db.getSchemaLayout().then((result) => { schemaLayout = result; // generate the dummy data and save it into matrices associated with table names - tableMatricesArray = generateDummyData( - schemaLayout, - dummyDataRequest, - keyObject - ); + tableMatricesArray = generateDummyData(schemaLayout, dummyDataRequest, keyObject); //iterate through tableMatricesArray to write individual .csv files for (const tableObject of tableMatricesArray) { // write all entries in tableMatrix to csv file - writeCSVFile( - tableObject, - schemaLayout, - keyObject, - dummyDataRequest, - event - ); + writeCSVFile(tableObject, schemaLayout, keyObject, dummyDataRequest, event); } }); }); diff --git a/backend/main.ts b/backend/main.ts index 6c454ded..dacb1281 100644 --- a/backend/main.ts +++ b/backend/main.ts @@ -30,10 +30,7 @@ let pruned: boolean = false; let mainMenu = Menu.buildFromTemplate(require('./mainMenu')); // Keep a reference for dev mode let dev = false; -if ( - process.env.NODE_ENV !== undefined && - process.env.NODE_ENV === 'development' -) { +if (process.env.NODE_ENV !== undefined && process.env.NODE_ENV === 'development') { dev = true; } @@ -51,9 +48,7 @@ function createWindow() { }); if (process.platform === 'darwin') { - app.dock.setIcon( - path.join(__dirname, '../../frontend/assets/images/seeqr_dock.png') - ); + app.dock.setIcon(path.join(__dirname, '../../frontend/assets/images/seeqr_dock.png')); } // Load index.html of the app diff --git a/backend/mainMenu.ts b/backend/mainMenu.ts index c6ddf295..7f176dad 100644 --- a/backend/mainMenu.ts +++ b/backend/mainMenu.ts @@ -6,21 +6,21 @@ module.exports = [ // { role: 'appMenu' } ...(isMac ? [ - { - label: app.name, - submenu: [ - { role: 'about' }, - { type: 'separator' }, - { role: 'services' }, - { type: 'separator' }, - { role: 'hide' }, - { role: 'hideothers' }, - { role: 'unhide' }, - { type: 'separator' }, - { role: 'quit' }, - ], - }, - ] + { + label: app.name, + submenu: [ + { role: 'about' }, + { type: 'separator' }, + { role: 'services' }, + { type: 'separator' }, + { role: 'hide' }, + { role: 'hideothers' }, + { role: 'unhide' }, + { type: 'separator' }, + { role: 'quit' }, + ], + }, + ] : []), // { role: 'fileMenu' } { @@ -39,14 +39,14 @@ module.exports = [ { role: 'paste' }, ...(isMac ? [ - { role: 'delete' }, - { role: 'selectAll' }, - { type: 'separator' }, - { - label: 'Speech', - submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }], - }, - ] + { role: 'delete' }, + { role: 'selectAll' }, + { type: 'separator' }, + { + label: 'Speech', + submenu: [{ role: 'startspeaking' }, { role: 'stopspeaking' }], + }, + ] : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]), ], }, diff --git a/backend/models.ts b/backend/models.ts index 0a753849..cdb34c37 100644 --- a/backend/models.ts +++ b/backend/models.ts @@ -37,11 +37,7 @@ const getDBNames = () => { let dbList: any = []; for (let i = 0; i < databases.rows.length; ++i) { let curName = databases.rows[i].datname; - if ( - curName !== 'postgres' && - curName !== 'template0' && - curName !== 'template1' - ) + if (curName !== 'postgres' && curName !== 'template0' && curName !== 'template1') dbList.push(databases.rows[i].datname); } resolve(dbList); @@ -270,11 +266,8 @@ module.exports = { let count: number = 0; for (const fk in keyObject[tableName].foreignKeyColumns) { - let primaryTable: string = - keyObject[tableName].foreignKeyColumns[fk]; - let primaryKey: any = Object.keys( - keyObject[primaryTable].primaryKeyColumns - )[0]; + let primaryTable: string = keyObject[tableName].foreignKeyColumns[fk]; + let primaryKey: any = Object.keys(keyObject[primaryTable].primaryKeyColumns)[0]; if (count > 0) queryString += `, `; queryString += `ADD CONSTRAINT "${tableName}_fk${count}" FOREIGN KEY ("${fk}") REFERENCES ${primaryTable}("${primaryKey}")`; count += 1; diff --git a/frontend/components/LoadingModal.tsx b/frontend/components/LoadingModal.tsx index 20d78148..24876257 100644 --- a/frontend/components/LoadingModal.tsx +++ b/frontend/components/LoadingModal.tsx @@ -4,14 +4,13 @@ import ReactLoading from 'react-loading'; // "Loading" pop up renders whenever async functions are called const LoadingModal = (props) => { if (props.show) { - return( + return (

LOADING...

- +
); - } - else return null; -} + } else return null; +}; -export default LoadingModal; \ No newline at end of file +export default LoadingModal; diff --git a/frontend/components/Splash.tsx b/frontend/components/Splash.tsx index 72fae97d..aeff51cb 100644 --- a/frontend/components/Splash.tsx +++ b/frontend/components/Splash.tsx @@ -16,19 +16,22 @@ export class Splash extends Component { return (
- -

Welcome!

-
-
-

Create custom schema

- -
-
-

Import database in .sql or .tar

- -
+ +

Welcome!

+
+
+

Create custom schema

+ +
+
+

Import database in .sql or .tar

+
- +
); } diff --git a/frontend/components/leftPanel/schemaChildren/Data.tsx b/frontend/components/leftPanel/schemaChildren/Data.tsx index 75cad1b6..69f3658d 100644 --- a/frontend/components/leftPanel/schemaChildren/Data.tsx +++ b/frontend/components/leftPanel/schemaChildren/Data.tsx @@ -5,7 +5,7 @@ type DataProps = { queries: { queryString: string; queryData: {}[]; - queryStatistics: any + queryStatistics: any; querySchema: string; queryLabel: string; }[]; @@ -23,11 +23,8 @@ export class Data extends Component { return (

Data Table

-
- {queries.length === 0 ? null : } - - +
{queries.length === 0 ? null :
} ); } -} \ No newline at end of file +} diff --git a/frontend/components/leftPanel/schemaChildren/DummyDataPanel.tsx b/frontend/components/leftPanel/schemaChildren/DummyDataPanel.tsx index 5402c971..c9c0d3ef 100644 --- a/frontend/components/leftPanel/schemaChildren/DummyDataPanel.tsx +++ b/frontend/components/leftPanel/schemaChildren/DummyDataPanel.tsx @@ -8,18 +8,17 @@ const { ipcRenderer } = window.require('electron'); type ClickEvent = React.MouseEvent; type DummyDataPanelProps = { - currentSchema: string; - tableList: string[]; + currentSchema: string; + tableList: string[]; }; type state = { - currentTable: string, - dataInfo: {}, - rowNumber: string -} + currentTable: string; + dataInfo: {}; + rowNumber: string; +}; class DummyDataPanel extends Component { - constructor(props: DummyDataPanelProps) { super(props); this.dropDownList = this.dropDownList.bind(this); @@ -33,13 +32,13 @@ class DummyDataPanel extends Component { state: state = { currentTable: 'select table', dataInfo: {}, - rowNumber: '' - } + rowNumber: '', + }; //handler to change the dropdown display to the selected table name selectHandler = (eventKey, e: React.SyntheticEvent) => { if (eventKey !== 'none') { - this.setState({currentTable: eventKey}); + this.setState({ currentTable: eventKey }); } }; @@ -51,14 +50,22 @@ class DummyDataPanel extends Component { // Allows user to choose a specific table, or to write dummy data to all tables. if (this.props.tableList.length > 0) { for (let i = 0; i <= this.props.tableList.length; i++) { - if(this.props.tableList[i]) tableName = this.props.tableList[i]; + if (this.props.tableList[i]) tableName = this.props.tableList[i]; else tableName = 'all'; - result.push({tableName}); + result.push( + + {tableName} + + ); } } else { - // Adds message in dropdown list to show that not tables are available - // Went this route because we couldn't get the dropdown to disappear if there were no tables in tableList - result.push(No tables available!); + // Adds message in dropdown list to show that not tables are available + // Went this route because we couldn't get the dropdown to disappear if there were no tables in tableList + result.push( + + No tables available! + + ); } return result; }; @@ -77,67 +84,70 @@ class DummyDataPanel extends Component { else { let table = this.state.currentTable; let number = Number(this.state.rowNumber); - if (table !== 'all') { - this.setState(prevState => ({ - ...prevState, - currentTable: 'select table', - rowNumber: '', - dataInfo: { - ...prevState.dataInfo, - [table]: number - } - })) - } - else { - const dataInfo = {}; - this.props.tableList.forEach(table => { - if (table !== 'all') { - dataInfo[table] = number; - } - }) - this.setState(prevState => ({ - ...prevState, - currentTable: 'select table', - rowNumber: '', - dataInfo - })) - } + if (table !== 'all') { + this.setState((prevState) => ({ + ...prevState, + currentTable: 'select table', + rowNumber: '', + dataInfo: { + ...prevState.dataInfo, + [table]: number, + }, + })); + } else { + const dataInfo = {}; + this.props.tableList.forEach((table) => { + if (table !== 'all') { + dataInfo[table] = number; + } + }); + this.setState((prevState) => ({ + ...prevState, + currentTable: 'select table', + rowNumber: '', + dataInfo, + })); } - } + } + }; //onclick listener to delete row from table deleteRow = (event: any) => { let name = event.target.id; - this.setState(prevState => ({ + this.setState((prevState) => ({ ...prevState, dataInfo: { ...prevState.dataInfo, - [name]: undefined - } - })) - } + [name]: undefined, + }, + })); + }; //onchange listener to update the rowNumber string in state changeRowNumber = (event: any) => { - this.setState({ rowNumber: event.target.value }) - } + this.setState({ rowNumber: event.target.value }); + }; createRow = () => { //once state updates on click, render the table row from the object const newRows: JSX.Element[] = []; - for (let key in this.state.dataInfo) { - if (this.state.dataInfo[key]) { - newRows.push( - - - - - - ) - } + for (let key in this.state.dataInfo) { + if (this.state.dataInfo[key]) { + newRows.push( + + + + + + ); } + } return newRows; - } + }; submitDummyData = (event: any) => { //check if there are requested dummy data values @@ -145,57 +155,53 @@ class DummyDataPanel extends Component { //creates a dummyDataRequest object with schema name and table name/rows const dummyDataRequest = { schemaName: this.props.currentSchema, - dummyData: this.state.dataInfo - } + dummyData: this.state.dataInfo, + }; ipcRenderer.send('generate-dummy-data', dummyDataRequest); //reset state to clear the dummy data panel's table - this.setState({dataInfo: {}}); - } - else dialog.showErrorBox('Please add table and row numbers', ''); - } + this.setState({ dataInfo: {} }); + } else dialog.showErrorBox('Please add table and row numbers', ''); + }; render() { - return (

Generate Dummy Data

Select table and number of rows:

-
- - - {this.state.currentTable} - - - {this.dropDownList()} - - - - - -
-
-
{key}{this.state.dataInfo[key]}
{key}{this.state.dataInfo[key]} + +
- - - - - - - {this.createRow()} - -
table# of rowsdelete
-
-
- -
+
+ + {this.state.currentTable} + {this.dropDownList()} + + + +
+
+ + + + + + + + {this.createRow()} + +
table# of rowsdelete
+
+
+ +
- ) + ); } } -export default DummyDataPanel; \ No newline at end of file +export default DummyDataPanel; diff --git a/frontend/components/leftPanel/schemaChildren/SchemaModal.tsx b/frontend/components/leftPanel/schemaChildren/SchemaModal.tsx index bfa961ef..5574a868 100644 --- a/frontend/components/leftPanel/schemaChildren/SchemaModal.tsx +++ b/frontend/components/leftPanel/schemaChildren/SchemaModal.tsx @@ -85,10 +85,7 @@ class SchemaModal extends Component { }) .catch((err: object) => { - console.log( - 'Error in handleSchemaFilePath method of SchemaModal.tsx.', - err - ); + console.log('Error in handleSchemaFilePath method of SchemaModal.tsx.', err); }); } @@ -176,20 +173,14 @@ class SchemaModal extends Component {
-

- With Data? -

+

With Data?

-
diff --git a/frontend/components/rightPanel/Compare.tsx b/frontend/components/rightPanel/Compare.tsx index 0c5607dc..c2fd17a7 100644 --- a/frontend/components/rightPanel/Compare.tsx +++ b/frontend/components/rightPanel/Compare.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown'; -import { Bar, defaults } from "react-chartjs-2"; +import { Bar, defaults } from 'react-chartjs-2'; defaults.global.defaultFontColor = 'rgb(198,210,213)'; @@ -9,21 +9,20 @@ type CompareProps = { queries: { queryString: string; queryData: {}[]; - queryStatistics: any + queryStatistics: any; querySchema: string; queryLabel: string; }[]; - currentSchema: string + currentSchema: string; }; export const Compare = (props: CompareProps) => { - // ------------------------------------------------------------------------------------------------------------- // ------------------------------------ logic for setting state -------------------------------------------- // vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv // declaring initial state - let initial: any = { ...props, compareList: [] }; + let initial: any = { ...props, compareList: [] }; const [queryInfo, setCompare] = useState(initial); const addCompareQuery = (event) => { @@ -33,14 +32,14 @@ export const Compare = (props: CompareProps) => { // if the query is clicked in the dropdown menu if (query.queryLabel === event.target.text) { // only allow the addition of queries that aren't already being compared - if (!compareList.includes(query)){ + if (!compareList.includes(query)) { compareList.push(query); } } }); // reset state to account for the change in queries being tracked setCompare({ ...queryInfo, compareList }); - } + }; // ------------------------------------------------------------------------------------------------------------- // ------------------------------------ logic for the compare query table -------------------------------------- @@ -49,13 +48,18 @@ export const Compare = (props: CompareProps) => { const deleteCompareQuery = (event) => { // reset comparelist so that the query that is chosen is not included any more let compareList: any = queryInfo.compareList.filter( - (query) => query.queryLabel !== event.target.id); + (query) => query.queryLabel !== event.target.id + ); setCompare({ ...queryInfo, compareList }); - } + }; const dropDownList = () => { // for each query on the query list, make a dropdown item in the menu - return props.queries.map((query, index) => {query.queryLabel}); + return props.queries.map((query, index) => ( + + {query.queryLabel} + + )); }; // Rendering the compare table with selected queries from dropdown list @@ -81,7 +85,7 @@ export const Compare = (props: CompareProps) => { // To display additional analytics, comment back in JSX elements in the return statement below. return ( - {queryLabel} + {queryLabel} {querySchema} {/* {queryString} */} {/* {scanType} */} @@ -90,9 +94,13 @@ export const Compare = (props: CompareProps) => { {/* {planningTime} {executionTime} {actualStartupTime} */} - {actualTotalTime} + {actualTotalTime} {/* {loops} */} - + + + ); }); @@ -108,43 +116,56 @@ export const Compare = (props: CompareProps) => { // first we create an object with all of the comparelist data organized in a way that enables us to render our graph easily const compareDataObject: any = {}; // then we populate that object - for (const query of compareList){ + for (const query of compareList) { const { queryLabel, querySchema, queryStatistics } = query; - if (!compareDataObject[querySchema]){ + if (!compareDataObject[querySchema]) { compareDataObject[querySchema] = { - [queryLabel.toString()] : queryStatistics[0]["QUERY PLAN"][0]["Execution Time"] + queryStatistics[0]["QUERY PLAN"][0]["Planning Time"] - } + [queryLabel.toString()]: + queryStatistics[0]['QUERY PLAN'][0]['Execution Time'] + + queryStatistics[0]['QUERY PLAN'][0]['Planning Time'], + }; } else { - compareDataObject[querySchema][queryLabel.toString()] = queryStatistics[0]["QUERY PLAN"][0]["Execution Time"] + queryStatistics[0]["QUERY PLAN"][0]["Planning Time"] + compareDataObject[querySchema][queryLabel.toString()] = + queryStatistics[0]['QUERY PLAN'][0]['Execution Time'] + + queryStatistics[0]['QUERY PLAN'][0]['Planning Time']; } - }; + } // then we generate a labelData array to store all unique query labels const labelDataArray: any = []; - for (const schema in compareDataObject){ + for (const schema in compareDataObject) { for (const label in compareDataObject[schema]) { - if (!labelDataArray.includes(label)){ + if (!labelDataArray.includes(label)) { labelDataArray.push(label); - } + } } } - // then we generate an array of data for each schema, storing data for each unique query according to the schema const runTimeDataArray: any = []; - for (const schema in compareDataObject){ + for (const schema in compareDataObject) { const schemaArray: any = []; - for(const label of labelDataArray){ - schemaArray.push(compareDataObject[schema][label] ? compareDataObject[schema][label] : 0) + for (const label of labelDataArray) { + schemaArray.push(compareDataObject[schema][label] ? compareDataObject[schema][label] : 0); } - runTimeDataArray.push({[schema]: schemaArray}); + runTimeDataArray.push({ [schema]: schemaArray }); } // creating a list of possible colors for the graph const schemaColors = { nextColor: 0, - colorList: ['#006C67', '#F194B4', '#FFB100', '#FFEBC6', '#A4036F', '#048BA8', '#16DB93', '#EFEA5A', '#F29E4C'] - } + colorList: [ + '#006C67', + '#F194B4', + '#FFB100', + '#FFEBC6', + '#A4036F', + '#048BA8', + '#16DB93', + '#EFEA5A', + '#F29E4C', + ], + }; // then we generate datasets for each schema for the bar chart const datasets = runTimeDataArray.map((schemaDataObject) => { @@ -156,16 +177,16 @@ export const Compare = (props: CompareProps) => { backgroundColor: color, borderColor: color, borderWidth: 1, - data: schemaDataObject[schemaLabel] - } - }) + data: schemaDataObject[schemaLabel], + }; + }); //then we combine the label array and the data arrays for each schema into a data object to pass to our bar graph return { labels: labelDataArray, - datasets: datasets - } - } + datasets: datasets, + }; + }; // ------------------------------------------------------------------------------------------------------------- // ------------------------------------ rendering the elements ------------------------------------------------- @@ -202,17 +223,16 @@ export const Compare = (props: CompareProps) => { title: { display: true, text: 'QUERY LABEL VS RUNTIME (ms)', - fontSize: 16 + fontSize: 16, }, legend: { display: true, - position: 'right' + position: 'right', }, - maintainAspectRatio: false + maintainAspectRatio: false, }} /> ); }; - diff --git a/frontend/components/rightPanel/History.tsx b/frontend/components/rightPanel/History.tsx index 2506667c..31149281 100644 --- a/frontend/components/rightPanel/History.tsx +++ b/frontend/components/rightPanel/History.tsx @@ -4,7 +4,7 @@ type HistoryProps = { queries: { queryString: string; queryData: {}[]; - queryStatistics: any + queryStatistics: any; querySchema: string; queryLabel: string; }[];