diff --git a/adasd b/adasd deleted file mode 100644 index cb4bc320..00000000 --- a/adasd +++ /dev/null @@ -1,243 +0,0 @@ -commit 6b83cb376cef486b62be2275b701259dcf212ab4 (HEAD -> master, origin/feature-css, feature-css) -Author: Muhammad Trad -Date: Tue Sep 1 01:27:00 2020 -0700 - - add scrollbar heights - -commit 6d784f31f0bd136de9741bffd24049907a6ed989 (upstream/master) -Merge: 7283c30 c557da8 -Author: Catherine Chiu <44789786+catherinechiu@users.noreply.github.com> -Date: Mon Aug 31 19:39:52 2020 -0700 - - Merge pull request #31 from oslabs-beta/staging - - Compare Table - -commit c557da8320ad660c6fc3f29e6c7d4268a4177c54 -Merge: 7b06e6c a96a79c -Author: Frank Norton <66151971+FrankNorton32@users.noreply.github.com> -Date: Mon Aug 31 19:46:08 2020 -0400 - - Merge pull request #26 from muhammadtrad/feature - - Compare Table Feature & Results Fix - -commit a96a79ce063a340bd9764d9600db5f9da43ea3b9 (origin/feature, feature) -Merge: 29ea578 7283c30 -Author: Muhammad Trad -Date: Mon Aug 31 16:02:19 2020 -0700 - - merge latest master to feature - -commit 7283c304f647c9d2590dd214e2267ac0a2257c3a -Merge: 199e3bd 7b06e6c -Author: mstronck <59625624+mstronck@users.noreply.github.com> -Date: Mon Aug 31 15:34:54 2020 -0700 - - Merge pull request #30 from oslabs-beta/staging - - Enable schema modal, sending db file/sql data to backend, retrieving db/table list from backend - -commit 7b06e6c664a4117a49d8532724ddafe8a3c69d47 -Merge: 3308fc1 b431e12 -Author: Catherine Chiu <44789786+catherinechiu@users.noreply.github.com> -Date: Mon Aug 31 15:32:44 2020 -0700 - - Merge pull request #27 from serenackuo/backend-mercer - - Enable schema modal, sending db file/sql data to backend, retrieving db/table list from backend - -commit b431e1232ad0a92bafba3315c6137aa43bd2aa9d -Author: serenackuo -Date: Mon Aug 31 18:30:32 2020 -0400 - - change slice to trim for sql data entry - -commit 119769dfc90fe672d57d7a49f0d2be2b0a8604ca (serena/backend-mercer, mercer-serena) -Merge: c708362 199e3bd -Author: serenackuo -Date: Mon Aug 31 18:11:47 2020 -0400 - - resolve merge conflicts - -commit 199e3bd5aa32635409f4b155e871f7fd508b99d2 (mercer-feature) -Merge: e6f1e6a 3308fc1 -Author: Catherine Chiu <44789786+catherinechiu@users.noreply.github.com> -Date: Mon Aug 31 14:55:04 2020 -0700 - - Merge pull request #29 from oslabs-beta/staging - - DataTable Component Renders Dynamically - -commit 3308fc18e36ebd8d5896cc1085870ad12ebaffb0 -Merge: de79a94 f838907 -Author: Catherine Chiu <44789786+catherinechiu@users.noreply.github.com> -Date: Mon Aug 31 14:51:50 2020 -0700 - - Merge pull request #28 from catherinechiu/dataTable - - DataTable Component Renders Dynamically - -commit f8389073f35df9ea70103f6a802048d3c4e19692 -Merge: cba5460 e6f1e6a -Author: Catherine -Date: Mon Aug 31 14:51:32 2020 -0700 - - settle merge conflicts in sass files - -commit cba54605e9984fd6b2628e007722c3c7b4ec7764 -Author: Catherine -Date: Mon Aug 31 14:40:10 2020 -0700 - - remove console logs - -commit a6b848a6758d0c3d2a8c864ea81a17588ddf0428 (catherine/dataTable) -Author: Catherine -Date: Mon Aug 31 14:18:20 2020 -0700 - - fix bug in RenderRow component in DataTable component - -commit 427c1ac7e5155350f83b6b5f4dbddddc5f7dea4b -Author: Catherine -Date: Mon Aug 31 14:04:05 2020 -0700 - - clean up comments - -commit 5c123a09cb77e82a1bcf229a7ab43bae964237d0 -Author: Catherine -Date: Mon Aug 31 14:01:52 2020 -0700 - - remove side effects in DataTable component - -commit 7033f2b080967e0d85547119057152203d6c7ab4 -Author: Catherine -Date: Mon Aug 31 13:58:01 2020 -0700 - - data table works - -commit c708362d92e93370c154b57b94b203e7ca54767a -Author: serenackuo -Date: Mon Aug 31 15:38:22 2020 -0400 - - data and table lists sending to frontend - -commit 29ea5785440be0812ad0bac9b2d36eb38aae7943 -Author: Muhammad Trad -Date: Mon Aug 31 12:07:17 2020 -0700 - - fix results bug - -commit aa88acfc794e1e7030845673e0b2587754792e4d -Author: Muhammad Trad -Date: Mon Aug 31 11:03:53 2020 -0700 - - clean compare component - -commit 9e62a6331075f39bf117ff4a912547617205764a -Merge: 06d007c c777d31 -Author: serenackuo -Date: Mon Aug 31 13:58:23 2020 -0400 - - merged code with Mercer table and database list backend - -commit cbc5cacb8b006174681acaeb61445f93b56eb9b3 -Author: Muhammad Trad -Date: Sun Aug 30 22:06:31 2020 -0700 - - change compare table - -commit c24ab9b82709d918c684ac882f99f72a99f3217a -Author: Muhammad Trad -Date: Sun Aug 30 21:27:38 2020 -0700 - - add compare query remove - -commit bfbf871a91d2182f706f9515457011391de855ed -Author: Muhammad Trad -Date: Sun Aug 30 20:40:42 2020 -0700 - - dynamic queries in compare - -commit 234f0fd2f155d78b7d764815e770c49bd091015f -Author: Muhammad Trad -Date: Sat Aug 29 20:59:09 2020 -0700 - - add-query dropdown - -commit c777d3103b7f448048593e560faea9ea6bb97d77 -Author: Mercer Stronck -Date: Sat Aug 29 16:04:21 2020 -0700 - - Finished gathering and sending lists to frontend - -commit 06d007cc1b06957d322adeb0eca314c0317a70be -Author: serenackuo -Date: Sat Aug 29 18:01:38 2020 -0400 - - fully realize add schema by type or script still need error catching and user prompts - -commit 92e5d1adab0ad48a1eaf508cbbbb88550ae430f6 -Author: Muhammad Trad -Date: Sat Aug 29 14:48:35 2020 -0700 - - add compare props - -commit a18073ccc504b19992e03b9a31d58547e28241e5 -Author: Mercer Stronck -Date: Sat Aug 29 14:24:33 2020 -0700 - - Created table and database list. Not sending to frontend correctly though - -commit 2b63153e783e0b2a8047dcd8a2bfdbba80e3d779 -Author: serenackuo -Date: Sat Aug 29 15:01:41 2020 -0400 - - schema modal can submit file path to spin up new database in backend - -commit 6fdf965dac8e7a680ebc0a26044f99d374081661 -Merge: 4076fd7 4b6ae94 -Author: Muhammad Trad -Date: Sat Aug 29 11:40:56 2020 -0700 - - Merge branch 'dataTable' of https://github.com/catherinechiu/SeeQR into feature - -commit 4b6ae94a123710cac26e303b5a2d4ec31a44431a -Author: Catherine -Date: Sat Aug 29 11:40:34 2020 -0700 - - debugged exponential queries in History panel by moving listener to cDM in MainPanel - -commit 4076fd7f8e6bcd8b535df8b36e8090ab2210bd18 (serena/backend) -Author: serenackuo -Date: Fri Aug 28 23:31:34 2020 -0400 - - schema modal updates nama, filepath, and schema string to send to main process - -commit 374000ff011d543adafbdb596f9a9fe8edb72926 -Author: serenackuo -Date: Fri Aug 28 21:52:05 2020 -0400 - - fix label input and reactivate schema modal for sending schema to backend, work-in-progress - -commit 5db584c5f2cbcb24265b81970fd0e48ae33f8689 -Author: serenackuo -Date: Fri Aug 28 18:40:24 2020 -0400 - - re-enable schema component for backend testing only - -commit 3da7530076dec0676a7ecb1e5526c910e9158467 -Author: serenackuo -Date: Fri Aug 28 18:22:27 2020 -0400 - - change alert window to dialog menu to address electron incompatibility - -commit e6f1e6abdbbf1ab3e7a82705679519fdc274c7f5 -Merge: bbaf8b3 de79a94 -Author: Muhammad Trad -Date: Thu Aug 27 20:07:58 2020 -0700 - - Merge pull request #25 from oslabs-beta/staging - - Dialog menu file extension verification, app icon, and splash page refactor - -[33 \ No newline at end of file diff --git a/backend/main.ts b/backend/main.ts index f92fbe09..18445b97 100644 --- a/backend/main.ts +++ b/backend/main.ts @@ -186,6 +186,12 @@ interface QueryType { queryStatistics: string; } +//Listens for database changes sent from the renderer + ipcMain.on('change-db', (event, db_name) => { + db.changeDB(db_name); + event.sender.send('return-change-db', db_name); + }); + // Listen for queries being sent from renderer ipcMain.on('execute-query', (event, data: QueryType) => { // ---------Refactor------------------- @@ -203,6 +209,7 @@ ipcMain.on('execute-query', (event, data: QueryType) => { lists: {}, }; + // Run select * from actors; db.query(queryString) .then((queryData) => { diff --git a/frontend/assets/stylesheets/css/components.css b/frontend/assets/stylesheets/css/components.css index 57b4301f..75798e9c 100644 --- a/frontend/assets/stylesheets/css/components.css +++ b/frontend/assets/stylesheets/css/components.css @@ -68,7 +68,7 @@ textarea { table.scroll-box { border: 0.5px solid #444c50; background: none; - overflow: scroll; + overflow-y: scroll; padding: 5px; font-size: 1em; line-height: 1.5em; @@ -99,7 +99,7 @@ input *:focus { } #data-table { - overflow-y: auto; + overflow: auto; height: 300px; } @@ -111,6 +111,14 @@ input *:focus { padding: 15px 0; } +#data-table::-webkit-scrollbar-track { + background: #c6d2d5; +} + +#data-table::-webkit-scrollbar-thumb { + background-color: #444c50; +} + .input-schema-button { padding: 10px; width: 50px; diff --git a/frontend/assets/stylesheets/css/layout.css b/frontend/assets/stylesheets/css/layout.css index c8a6ac21..8d30575a 100644 --- a/frontend/assets/stylesheets/css/layout.css +++ b/frontend/assets/stylesheets/css/layout.css @@ -19,10 +19,6 @@ align-items: center; height: 100vh; color: #c6d2d5; - background-image: url("../../images/logo_color.png"); - background-repeat: no-repeat; - background-position-y: 25vh; - background-position-x: center; } #splash-page .splash-prompt { @@ -33,7 +29,7 @@ -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - margin-top: 300px; + margin-top: 30px; text-align: center; } @@ -71,6 +67,12 @@ margin-bottom: 30px; } +#splash-page .logo { + background-image: url("../../images/logo_color.png"); + width: 360px; + height: 362px; +} + #main-panel { display: -webkit-box; display: -ms-flexbox; @@ -181,7 +183,7 @@ -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - height: 500px; + height: 50%; z-index: 1000; } diff --git a/frontend/assets/stylesheets/css/style.css b/frontend/assets/stylesheets/css/style.css index 403d9a42..769b5709 100644 --- a/frontend/assets/stylesheets/css/style.css +++ b/frontend/assets/stylesheets/css/style.css @@ -74,7 +74,7 @@ textarea { table.scroll-box { border: 0.5px solid #444c50; background: none; - overflow: scroll; + overflow-y: scroll; padding: 5px; font-size: 1em; line-height: 1.5em; @@ -105,7 +105,7 @@ input *:focus { } #data-table { - overflow-y: auto; + overflow: auto; height: 300px; } @@ -117,6 +117,14 @@ input *:focus { padding: 15px 0; } +#data-table::-webkit-scrollbar-track { + background: #c6d2d5; +} + +#data-table::-webkit-scrollbar-thumb { + background-color: #444c50; +} + .input-schema-button { padding: 10px; width: 50px; @@ -166,10 +174,6 @@ input *:focus { align-items: center; height: 100vh; color: #c6d2d5; - background-image: url("../../images/logo_color.png"); - background-repeat: no-repeat; - background-position-y: 25vh; - background-position-x: center; } #splash-page .splash-prompt { @@ -180,7 +184,7 @@ input *:focus { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - margin-top: 300px; + margin-top: 30px; text-align: center; } @@ -218,6 +222,12 @@ input *:focus { margin-bottom: 30px; } +#splash-page .logo { + background-image: url("../../images/logo_color.png"); + width: 360px; + height: 362px; +} + #main-panel { display: -webkit-box; display: -ms-flexbox; @@ -328,7 +338,7 @@ input *:focus { -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; - height: 500px; + height: 50%; z-index: 1000; } @@ -514,14 +524,6 @@ h4 { height: 200px; } -.compare-box { - border: 0.5px solid #444c50; - background: none; - padding: 5px; - font-size: 14px; - line-height: 1.5em; -} - #add-query-button { width: 120px; margin-bottom: 15px; @@ -582,6 +584,34 @@ h4 { display: block; } +.tab-list { + border-bottom: 2px solid #c6d2d5; + padding-left: 0; +} + +.tab-list-item { + display: inline-block; + list-style: none; + margin-bottom: -1px; + padding: 0.5rem 0.75rem; + font-weight: 500; + letter-spacing: 0.5px; +} + +.tab-list-item:hover { + cursor: pointer; + background-color: #c6d2d5; + color: #6cbba9; +} + +.tab-list-active { + background-color: #6cbba9; + border: solid #ccc; + border-width: 1px 1px 0 1px; + font-weight: 600; + color: #292a30; +} + .close-button { top: 20px; right: 30px; diff --git a/frontend/assets/stylesheets/scss/components.scss b/frontend/assets/stylesheets/scss/components.scss index 45e820fe..c5c7c174 100644 --- a/frontend/assets/stylesheets/scss/components.scss +++ b/frontend/assets/stylesheets/scss/components.scss @@ -1,16 +1,19 @@ @import './variables.scss'; + #query-window { .text-field { width: 100%; height: 200px; } } + .label-field, .schema-label { font-family: $font-input; color: $mint-green; margin-left: 8px; } + #splash-menu { button { border: 0.5px $border-darkmode solid; @@ -25,6 +28,7 @@ background-color: $primary-color-darkmode; } } + #query-panel { button { border: 0.5px $border-darkmode solid; @@ -63,14 +67,16 @@ textarea { color: $mint-green; font-family: $font-input; } + table.scroll-box { border: 0.5px solid $border-darkmode; background: none; - overflow: scroll; + overflow-y: scroll; padding: 5px; font-size: $default-text; line-height: 1.5em; } + tbody { .top-row { border-bottom: 1px solid $border-darkmode; @@ -79,6 +85,7 @@ tbody { } } } + input { border-top-style: hidden; border-right-style: hidden; @@ -93,17 +100,25 @@ input { outline: none; } } + #data-table { - overflow-y: auto; + overflow: auto; height: 300px; } + .query-data { width: 1000px; } + #codemirror { padding: 15px 0; } - +#data-table::-webkit-scrollbar-track { + background: $primary-color-darkmode; +} +#data-table::-webkit-scrollbar-thumb { + background-color: $border-darkmode; +} .input-schema-button { padding: 10px; width: 50px; diff --git a/frontend/assets/stylesheets/scss/layout.scss b/frontend/assets/stylesheets/scss/layout.scss index 5c414eab..f9431c30 100644 --- a/frontend/assets/stylesheets/scss/layout.scss +++ b/frontend/assets/stylesheets/scss/layout.scss @@ -9,14 +9,10 @@ height: 100vh; // overflow: hidden; color: $primary-color-darkmode; - background-image: url('../../images/logo_color.png'); - background-repeat: no-repeat; - background-position-y: 25vh; - background-position-x: center; .splash-prompt { display: flex; flex-direction: column; - margin-top: 300px; + margin-top: 30px; text-align: center; } .splash-buttons { @@ -44,6 +40,11 @@ height: auto; margin-bottom: 30px; } + .logo { + background-image: url('../../images/logo_color.png'); + width: 360px; + height: 362px; + } } #main-panel { @@ -106,7 +107,7 @@ #query-panel { display: flex; flex-direction: column; - height: 500px; + height: 50%; z-index: 1000; } #data-panel { diff --git a/frontend/assets/stylesheets/scss/style.scss b/frontend/assets/stylesheets/scss/style.scss index 880cf281..6924eaab 100644 --- a/frontend/assets/stylesheets/scss/style.scss +++ b/frontend/assets/stylesheets/scss/style.scss @@ -60,13 +60,6 @@ h4 { height: 200px; } -.compare-box { - border: 0.5px solid #444c50; - background: none; - padding: 5px; - font-size: 14px; - line-height: 1.5em; -} #add-query-button { width: 120px; @@ -126,6 +119,33 @@ h4 { display: block; } +.tab-list { border-bottom: 2px solid #c6d2d5; + padding-left: 0; + +} + +.tab-list-item { + display: inline-block; + list-style: none; + margin-bottom: -1px; + padding: 0.5rem 0.75rem; + font-weight: 500; + letter-spacing: 0.5px; +} + +.tab-list-item:hover{ + cursor: pointer; + background-color: $primary-color-darkmode; + color:rgb(108, 187, 169); +} + +.tab-list-active { + background-color:rgb(108, 187, 169); + border: solid #ccc; + border-width: 1px 1px 0 1px; + font-weight: 600; + color: $background-darkmode-darker; +} .close-button { top: 20px; right: 30px; diff --git a/frontend/components/App.tsx b/frontend/components/App.tsx index d3e47d5f..c80c7e83 100644 --- a/frontend/components/App.tsx +++ b/frontend/components/App.tsx @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import { Splash } from './Splash'; import MainPanel from './MainPanel'; -// import '../assets/stylesheets/css/style.css'; const { dialog } = require('electron').remote; const { ipcRenderer } = window.require('electron'); @@ -24,11 +23,6 @@ export class App extends Component { }; handleFileClick(event: ClickEvent) { - // event.preventDefault(); - // alert('event triggered'); - // const options = { - // filters: [{ name: 'Custom File Type', extensions: ['tar', 'sql'] }], - // }; dialog .showOpenDialog( { @@ -36,18 +30,8 @@ export class App extends Component { filters: [{ name: 'Custom File Type', extensions: ['tar', 'sql'] }], message: 'Please upload .sql or .tar database file' }, - // (files: string) => { - // if (files !== undefined) { - // // handle files - // console.log('cancelled'); - // } - // } ) .then((result: object) => { - console.log('file uploaded', result); - // const ifCancelled = Object.keys(result) - // console.log(ifCancelled) - // console.log(result["canceled"]) const filePathArr = result["filePaths"]; // send via channel to main process if (!result["canceled"]){ @@ -66,9 +50,6 @@ export class App extends Component { } render() { - // ipcRenderer.on('open-splash', (event: any, splashState: object) => { - // this.setState(splashState); - // }); // listen for menu to invoke handleFileClick ipcRenderer.on('menu-upload-file', () => { this.handleFileClick; @@ -88,5 +69,3 @@ export class App extends Component { ); } } - -// export default App; diff --git a/frontend/components/MainPanel.tsx b/frontend/components/MainPanel.tsx index 5ca8f875..ef083502 100644 --- a/frontend/components/MainPanel.tsx +++ b/frontend/components/MainPanel.tsx @@ -22,24 +22,19 @@ type MainProps = {}; class MainPanel extends Component { constructor(props: MainProps) { super(props); - this.updateCurrentSchema = this.updateCurrentSchema.bind(this); + this.onClickTabItem = this.onClickTabItem.bind(this); } state: MainState = { queries: [], // currentSchema will change depending on which Schema Tab user selects currentSchema: 'defaultDB', dbLists: { - databaseList: [], + databaseList: ['defaultDB'], tableList: [], } }; componentDidMount() { - // ipcRenderer.on('db-lists', (event: any, listObj: any) => { - // console.log('db_name', db_name); - // this.setState() - // }) - // Listening for returnedData from executing Query // Update state with new object (containing query data, query statistics, query schema // inside of state.queries array @@ -60,21 +55,19 @@ class MainPanel extends Component { // push new query object into copy of queries array queries.push(newQuery) this.setState({ queries }) - console.log('state after receiving data: ', this.state); }); - ipcRenderer.on('db-lists', (event: any, returnedLists: any) => { - // let newList = returnedLists.databaseList.slice(1); - // console.log('newList', newList); - - // this.setState({ dbLists: newList }) - console.log('returnedLists', returnedLists); + ipcRenderer.on('db-lists', (event: any, returnedLists: any) => { this.setState({ dbLists: returnedLists }) + console.log('DB LIST CHECK !', this.state.dbLists); }) } - updateCurrentSchema(tabName) { - this.setState({ currentSchema: tabName }); + onClickTabItem(tabName) { + ipcRenderer.send('change-db', tabName); + ipcRenderer.on('return-change-db', (event: any, db_name: string) => { + this.setState({ currentSchema: tabName }); + }); } render() { @@ -84,8 +77,7 @@ class MainPanel extends Component { - - {/* */} + ); } diff --git a/frontend/components/Splash.tsx b/frontend/components/Splash.tsx index e217ddfc..7db7dc88 100644 --- a/frontend/components/Splash.tsx +++ b/frontend/components/Splash.tsx @@ -17,10 +17,9 @@ export class Splash extends Component { } render() { - const imgPath = '../../frontend/assets/images/logo_color.png'; return (
- {/* */} +

Welcome!

Import database in .sql or .tar?

diff --git a/frontend/components/leftPanel/Compare.tsx b/frontend/components/leftPanel/Compare.tsx index d52f14a1..20c62431 100644 --- a/frontend/components/leftPanel/Compare.tsx +++ b/frontend/components/leftPanel/Compare.tsx @@ -7,7 +7,7 @@ import { Bar, defaults } from "react-chartjs-2"; defaults.global.defaultFontColor = 'rgb(198,210,213)'; type CompareProps = { - queries: { + queries: { queryLabel: string; queryStatistics: any; querySchema: string; @@ -16,30 +16,30 @@ type CompareProps = { }; export const Compare = (props: CompareProps) => { - let initial: any = {...props, compareList: [] }; + let initial: any = { ...props, compareList: [] }; - const [ queryInfo, setCompare ] = useState(initial); + const [queryInfo, setCompare] = useState(initial); const addCompareQuery = (event) => { let compareList = queryInfo.compareList; props.queries.forEach((query) => { - if (query.queryLabel === event.target.text){ + if (query.queryLabel === event.target.text) { compareList.push(query); } }); - setCompare({...queryInfo, compareList}); + setCompare({ ...queryInfo, compareList }); } const deleteCompareQuery = (event) => { let compareList: any = queryInfo.compareList.filter( (query) => query.queryLabel !== event.target.id); - setCompare({...queryInfo, compareList}); - } + setCompare({ ...queryInfo, compareList }); + } - const dropDownList = () => { - return props.queries.map((query, index) => {query.queryLabel}); - }; + const dropDownList = () => { + return props.queries.map((query, index) => {query.queryLabel}); + }; - const renderCompare = () => { + const renderCompare = () => { return queryInfo.compareList.map((query, index) => { const { queryString, queryData, queryStatistics, querySchema, queryLabel } = query; const { ['QUERY PLAN']: queryPlan } = queryStatistics[0]; @@ -68,7 +68,7 @@ export const Compare = (props: CompareProps) => { {/* {planningTime} {executionTime} {actualStartupTime} */} - {actualTotalTime} + {actualTotalTime} {/* {loops} */} @@ -76,31 +76,30 @@ export const Compare = (props: CompareProps) => { }); }; - const { compareList } = queryInfo; - const labelData = () => compareList.map((query) => query.queryLabel); - const runtimeData = () => compareList.map( - (query) => query.queryStatistics[0]["QUERY PLAN"][0]["Execution Time"] + query.queryStatistics[0]["QUERY PLAN"][0]["Planning Time"]); - console.log('labelData', labelData()); - const data = { - labels: labelData(), - datasets: [ - { - label: 'Runtime', - backgroundColor: 'rgb(108, 187, 169)', - borderColor: 'rgba(247,247,247,247)', - borderWidth: 2, - data: runtimeData(), - } - ] - }; + const { compareList } = queryInfo; + const labelData = () => compareList.map((query) => query.queryLabel); + const runtimeData = () => compareList.map( + (query) => query.queryStatistics[0]["QUERY PLAN"][0]["Execution Time"] + query.queryStatistics[0]["QUERY PLAN"][0]["Planning Time"]); + const data = { + labels: labelData(), + datasets: [ + { + label: 'Runtime', + backgroundColor: 'rgb(108, 187, 169)', + borderColor: 'rgba(247,247,247,247)', + borderWidth: 2, + data: runtimeData(), + } + ] + }; return (

Comparisons

- - {dropDownList()} - -
+ + {dropDownList()} + +
@@ -117,19 +116,19 @@ export const Compare = (props: CompareProps) => { {renderCompare()}
-
+
diff --git a/frontend/components/rightPanel/SchemaContainer.tsx b/frontend/components/rightPanel/SchemaContainer.tsx index 5e726739..8bf319c1 100644 --- a/frontend/components/rightPanel/SchemaContainer.tsx +++ b/frontend/components/rightPanel/SchemaContainer.tsx @@ -7,12 +7,6 @@ const { dialog } = require('electron').remote; import SchemaModal from './schemaChildren/SchemaModal'; type SchemaContainerProps = { - // queries: { - // queryString: string; - // queryData: object[]; - // queryStatistics: any; - // querySchema: string; - // }[]; queries: any; currentSchema: string; }; @@ -40,9 +34,6 @@ export class SchemaContainer extends Component { render() { return (
- -
{/*
Schema Tabs Here
*/}
-
diff --git a/frontend/components/rightPanel/Tabs.tsx b/frontend/components/rightPanel/Tabs.tsx index 4242c9fc..af7ab7d1 100644 --- a/frontend/components/rightPanel/Tabs.tsx +++ b/frontend/components/rightPanel/Tabs.tsx @@ -5,11 +5,11 @@ import { SchemaContainer } from './SchemaContainer'; import SchemaModal from './schemaChildren/SchemaModal'; type TabsProps = { - activeTab: string; - tabList: string[]; - queries: any; - onClickTabItem: any; -}; + currentSchema: string, + tabList: string[], + queries: any, + onClickTabItem: any, +} type state = { show: boolean; @@ -19,7 +19,6 @@ export class Tabs extends Component { super(props); this.showModal = this.showModal.bind(this); } - state: state = { show: false, }; @@ -28,22 +27,31 @@ export class Tabs extends Component { }; render() { - const { onClickTabItem, tabList, activeTab, queries } = this.props; + const { + onClickTabItem, + tabList, + currentSchema, + queries, + } = this.props; - const activeTabQueries = queries.filter((query) => query.querySchema === activeTab); + const activeTabQueries = queries.filter((query) => query.querySchema === currentSchema); - console.log('tabList', tabList); + console.log('QUERIES IN TABS COMPONENT (AFTER FILTER)', queries); return ( -
+
    {tabList.map((tab, index) => { return ( - + ); })}
-
-
- {tabList.map((tab) => { - if (tab !== activeTab) return undefined; - return ; - })} -
+
+ {tabList.map((tab, index) => { + if (tab !== currentSchema) return undefined; + return ; + })}
); } } + + + + //
+ //
    + // {tabList.map((tab, index) => { + // return ( + // + // ); + // })} + //
+ // + // + //
+ // {tabList.map((tab, index) => { + // if (tab !== currentSchema) return undefined; + // return ; + // })} + //
+ //
+ + + // state: state = { + // show: false, + // }; + // showModal = (event: any) => { + // this.setState({ show: !this.state.show }); + // }; \ No newline at end of file diff --git a/frontend/components/rightPanel/schemaChildren/Query.tsx b/frontend/components/rightPanel/schemaChildren/Query.tsx index db431ccf..57406267 100644 --- a/frontend/components/rightPanel/schemaChildren/Query.tsx +++ b/frontend/components/rightPanel/schemaChildren/Query.tsx @@ -31,7 +31,6 @@ type QueryProps = { currentSchema: string }; type state = { queryString: string; - currentSchema: string; queryLabel: string; show: boolean; }; @@ -49,7 +48,6 @@ class Query extends Component { state: state = { queryString: '', queryLabel: '', - currentSchema: 'Schema A', show: false, }; @@ -76,13 +74,11 @@ class Query extends Component { // if input fields for query label or query string are empty, then // send alert to input both fields if (!this.state.queryLabel || !this.state.queryString) { - // alert('Please enter a Label and a Query.') const noInputAlert = dialog.showErrorBox('Please enter a Label and a Query.', ''); - console.log(noInputAlert); } else { const queryAndSchema = { queryString: this.state.queryString, - queryCurrentSchema: this.state.currentSchema, + queryCurrentSchema: this.props.currentSchema, queryLabel: this.state.queryLabel, }; ipcRenderer.send('execute-query', queryAndSchema); diff --git a/frontend/components/rightPanel/schemaChildren/Results.tsx b/frontend/components/rightPanel/schemaChildren/Results.tsx index f74aee63..0a2867f6 100644 --- a/frontend/components/rightPanel/schemaChildren/Results.tsx +++ b/frontend/components/rightPanel/schemaChildren/Results.tsx @@ -2,44 +2,44 @@ import React, { Component } from 'react'; import { Line, defaults } from "react-chartjs-2"; type ResultsProps = { - queries: any; - }; + queries: any; +}; - defaults.global.defaultFontColor = 'rgb(198,210,213)'; +defaults.global.defaultFontColor = 'rgb(198,210,213)'; - export class Results extends Component { - constructor(props: ResultsProps) { - super(props); - } - renderTableData() { +export class Results extends Component { + constructor(props: ResultsProps) { + super(props); + } + renderTableData() { - return this.props.queries.map((query, index) => { - // destructure state from mainPanel, including destructuring object returned from Postgres - const { queryString, queryData, queryStatistics, querySchema, queryLabel } = query; - const { ['QUERY PLAN']: queryPlan } = queryStatistics[0]; - const { - Plan, - ['Planning Time']: planningTime, - ['Execution Time']: executionTime, - } = queryPlan[0]; - const { - ['Node Type']: scanType, - ['Actual Rows']: actualRows, - ['Actual Startup Time']: actualStartupTime, - ['Actual Total Time']: actualTotalTime, - ['Actual Loops']: loops, - } = Plan; - const runtime = (planningTime + executionTime).toFixed(3); - return ( - + return this.props.queries.map((query, index) => { + // destructure state from mainPanel, including destructuring object returned from Postgres + const { queryString, queryData, queryStatistics, querySchema, queryLabel } = query; + const { ['QUERY PLAN']: queryPlan } = queryStatistics[0]; + const { + Plan, + ['Planning Time']: planningTime, + ['Execution Time']: executionTime, + } = queryPlan[0]; + const { + ['Node Type']: scanType, + ['Actual Rows']: actualRows, + ['Actual Startup Time']: actualStartupTime, + ['Actual Total Time']: actualTotalTime, + ['Actual Loops']: loops, + } = Plan; + const runtime = (planningTime + executionTime).toFixed(3); + return ( + {queryLabel} {queryString} {/* {scanType} */} {planningTime} {runtime} - {/* {executionTime} + {/* {executionTime} {actualStartupTime} */} - {/* {actualTotalTime} */} + {/* {actualTotalTime} */} {/* {actualRows} */} {loops} {/* {'Notes'} */} @@ -53,7 +53,6 @@ type ResultsProps = { const labelData = () => queries.map((query) => query.queryLabel); const runtimeData = () => queries.map( (query) => query.queryStatistics[0]["QUERY PLAN"][0]["Execution Time"] + query.queryStatistics[0]["QUERY PLAN"][0]["Planning Time"]); - console.log('labelData', labelData()); const data = { labels: labelData(), datasets: [ @@ -72,41 +71,41 @@ type ResultsProps = {

Results

- - - - - - {/* */} - - - {/* +
{'Query Label'}{'Query'}{'Scan Type'}{'Planning Time'}{'Runtime (ms)'}{'Execution Time'}
+ + + + + {/* */} + + + {/* */} - {/* */} - {/* */} - - {/* */} - - {this.renderTableData()} - -
{'Query Label'}{'Query'}{'Scan Type'}{'Planning Time'}{'Runtime (ms)'}{'Execution Time'} {'Time: First Line (ms)'} {'Time: All Lines (ms)'}{'Returned Rows'}{'Total Time (ms)'}{'Loops'}{'Notes'}
+ {/* {'Returned Rows'} */} + {/* {'Total Time (ms)'} */} + {'Loops'} + {/* {'Notes'} */} + + {this.renderTableData()} + +
- +
); diff --git a/frontend/components/rightPanel/tabsChildren/Tab.tsx b/frontend/components/rightPanel/tabsChildren/Tab.tsx index bcd63ac0..3cf9fb1e 100644 --- a/frontend/components/rightPanel/tabsChildren/Tab.tsx +++ b/frontend/components/rightPanel/tabsChildren/Tab.tsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; type TabProps = { onClickTabItem: any, - activeTab: string, + currentSchema: string, label: string, }; export class Tab extends Component { @@ -11,13 +11,13 @@ export class Tab extends Component { render() { const { onClickTabItem, - activeTab, + currentSchema, label, } = this.props; let className = "tab-list-item"; - if (activeTab === label) { + if (currentSchema === label) { className += " tab-list-active"; } diff --git a/webpack.build.config.js b/webpack.build.config.js deleted file mode 100644 index 403fdba7..00000000 --- a/webpack.build.config.js +++ /dev/null @@ -1,90 +0,0 @@ -const webpack = require('webpack'); -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); - -module.exports = { - entry: './frontend/index.js', - output: { - path: path.resolve(__dirname, "dist"), - filename: "bundle.js", - publicPath: "./", - }, - devtool: "nosources-source-map", - module: { - rules: [ - { - test: /\.(scss)$/, - use: [ - { - loader: 'style-loader', // inject CSS to page - }, - { - loader: 'css-loader', // translates CSS into CommonJS modules - }, - { - loader: 'postcss-loader', // Run postcss actions - options: { - plugins() { - // postcss plugins, can be exported to postcss.config.js - return [require('autoprefixer')]; - }, - }, - }, - { - loader: 'sass-loader', // compiles Sass to CSS - }, - ], - }, - { - test: /\.jsx?/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env', '@babel/preset-react'], - }, - }, - }, - { - test: /\.ts(x)?$/, - exclude: /node_modules/, - loader: 'ts-loader', - }, - ], - }, - resolve: { - // Enable importing JS / JSX files without specifying their extension - modules: [path.resolve(__dirname, 'node_modules')], - extensions: ['.js', '.jsx', '.json', '.scss', '.less', '.css', '.tsx', '.ts'], - }, - target: 'electron-renderer', - plugins: [ - new HtmlWebpackPlugin({ - // template: './frontend/index.html', - filename: "index.html", - title: "SeeQR", - cspPlugin: { - enabled: true, - policy: { - "base-uri": "'self'", - "object-src": "'none'", - "script-src": ["'self'"], - "style-src": ["'self'"], - }, - hashEnabled: { - "script-src": true, - "style-src": true, - }, - nonceEnabled: { - "script-src": true, - "style-src": true, - }, - }, - }), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('production'), - }), - ], -}; diff --git a/webpack.dev.config.js b/webpack.dev.config.js deleted file mode 100644 index 939ea6ae..00000000 --- a/webpack.dev.config.js +++ /dev/null @@ -1,113 +0,0 @@ -const webpack = require('webpack'); -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const CspHtmlWebpackPlugin = require("csp-html-webpack-plugin"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); -const { spawn } = require('child_process'); - -module.exports = { - entry: ['./frontend/index.js'], - mode: 'development', - devtool: 'source-map', - output: { - filename: 'bundle.js', - path: path.resolve(__dirname, 'dist'), - }, - module: { - rules: [ - { - test: /\.(scss)$/, - use: [ - { - loader: 'style-loader', // inject CSS to page - }, - { - loader: 'css-loader', // translates CSS into CommonJS modules - }, - { - loader: 'postcss-loader', // Run postcss actions - options: { - plugins() { - // postcss plugins, can be exported to postcss.config.js - return [require('autoprefixer')]; - }, - }, - }, - { - loader: 'sass-loader', // compiles Sass to CSS - }, - ], - }, - { - test: /\.jsx?/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env', '@babel/preset-react'], - }, - }, - }, - { - test: /\.ts(x)?$/, - exclude: /node_modules/, - loader: 'ts-loader', - }, - ], - }, - resolve: { - // Enable importing JS / JSX files without specifying their extension - modules: [path.resolve(__dirname, 'node_modules')], - extensions: ['.js', '.jsx', '.json', '.scss', '.less', '.css', '.tsx', '.ts'], - }, - target: 'electron-renderer', - devServer: { - contentBase: path.resolve(__dirname, 'dist'), - host: 'localhost', - port: '8080', - hot: true, - compress: true, - watchContentBase: true, - watchOptions: { - ignored: /node_modules/, - }, - before() { - spawn('electron', ['.', 'dev'], { - shell: true, - env: process.env, - stdio: 'inherit', - }) - .on('close', (code) => process.exit(0)) - .on('error', (spawnError) => console.error(spawnError)); - }, - }, - plugins: [ - new MiniCssExtractPlugin({}), - new HtmlWebpackPlugin({ - // template: './frontend/index.html', - filename: "index.html", - title: "SeeQR", - cspPlugin: { - enabled: true, - policy: { - "base-uri": "'self'", - "object-src": "'none'", - "script-src": ["'self'"], - "style-src": ["'self'"], - }, - hashEnabled: { - "script-src": true, - "style-src": true, - }, - nonceEnabled: { - "script-src": true, - "style-src": true, - }, - }, - }), - new CspHtmlWebpackPlugin(), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('development'), - }), - ], -};