Merge pull request #70 from open-source-labs/development

Merge Dev with Master

.eslintrc.json

@@ -33,11 +33,12 @@
       "ignorePackages",
       { "js": "never", "jsx": "never", "ts": "never", "tsx": "never" }
     ],
+    // "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], **trying to resolve the electron issue 
     "jsx-a11y/label-has-associated-control": "off",
     // prevent wrong warning with typescript overloads
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": ["error"],
-    "no-dupe-class-members": "off",
+    "no-dupe-class-members": "off", 
     "@typescript-eslint/no-dupe-class-members": ["error"],
     "lines-between-class-members": "off",
     "@typescript-eslint/lines-between-class-members": [
@@ -52,5 +53,6 @@
     "react/jsx-props-no-spreading": "off",
     "camelcase": "off"
   },
+  // "settings": "import/core-modules: [ electron ]",  **trying to resolve the electron issue 
   "root": true
 }

README.md

@@ -30,7 +30,7 @@
 
 To get started on contributing to this project:
 
-1. Download and install [Postgres.app](https://postgresapp.com/) and start it before opening up SeeQR
+1. Download and install [Postgres.app](https://postgresapp.com/)(Mac)/[PGAdmin](https://www.pgadmin.org/download)(Windows) and start it before opening up SeeQR
 2. Ensure that psql is available in the `$PATH`
 3. Ensure that a 'postgres' role exists
 4. Download the latest version of [SeeQR](https://github.com/open-source-labs/seeqr/releases/latest)
@@ -85,7 +85,7 @@ To get started on contributing to this project:
 - Create/Edit Database <i>(currently in beta)</i>
 
   - Users can create a new database from scratch by clicking the `Create New Database` button at the bottom of the sidebar
-  - Once a the database is given a name, htiting the `Initialize Database` button will create new database on the users PostgreSQL instance
+  - Once a the database is given a name, hitting the `Initialize Database` button will create new database on the users PostgreSQL instance
   - Users can then input SQL commands and click `Update Database` to create and drop tables in the database
   - Users have the option to alter any existing databases as well by selecting the database on the sidebar and running any SQL commands they would like. 
   - The `Export` button will write a .sql file on the user's desktop of the selected database
@@ -99,13 +99,24 @@ To get started on contributing to this project:
 
   - In the 'QUERIES' view, the main panel is where the query input text field is located, utilizing CodeMirror. The paint button in the top right corner of the panel auto-formats the inputted query
   - Users can select the database to use in the 'Database' dropdown above the main panel
-  - Users also have the option to execute a labelled or unlabelled query — simply provide a label in the 'Label' field above the main panel to identify the query in later comparisons against other queries
+  - Users also have the option to execute a labelled/grouped or unlabelled/ungrouped query — simply provide a label/group in the 'Label'/'Group' field above the main panel to identify the query in later comparisons against other queries
     - Please note that only labelled queries will be saved in the current session for future references
   - To execute the query, simply select the 'RUN QUERY' button at the bottom of the panel or press 'Ctrl-Enter' on the keyboard
 
+   <br />
+  <div align="center">
+    <img src="./assets/readmeImages/gifs/Query_Execution.gif" width=800/>
+  </div>
+
+- Save/Load Queries
+
+  - In the 'QUERIES' view, the file upload icon will open a file explorer window to select a .JSON to import query data from
+  - The file icon to the right of the upload icon will designate the file path to save query data to if you press the save button on the queries
+  - To save individual query data press the save icon on the individual queries in the dropdowns 
+
   <br />
   <div align="center">
-    <img src="./assets/readmeImages/gifs/query.gif" width=800/>
+    <img src="./assets/readmeImages/gifs/Save_Load_Queries.gif" width=800/>
   </div>
 
 - Data
@@ -121,21 +132,22 @@ To get started on contributing to this project:
     - Clicking on a node will display additional details regarding that action as well
   - To execute a new query, simply select the '+' button in the sidebar. To go back to a previously saved query, just select it in the sidebar
 
+
   <br />
   <div align="center">
-    <img src="./assets/readmeImages/gifs/execution_plan.gif" width=800/>
+    <img src="./assets/readmeImages/gifs/Query_Exec_Plan.gif" width=800/>
   </div>
 
 - Compare
 
   - Click on the 'bar graph' icon at the top of the sidebar to get to the 'Compare Queries' view
   - The comparison table is flexible to the user’s preferences as the user selects which queries to compare side by side
   - Simply check or uncheck the box next to each saved query to add or remove the query from the graph
-  - Graph will be organized along the x-axis by label, and colored by schema
+  - Graph will be organized along the x-axis by group, and colored by schema
   - Aside from the visualized performance comparison of the selected queries, a table will display information about each selected query, including its total run time and performance relative to other queries with the same label, with the most performant query highlighted 
 
 <div align="center">
-  <img src="./assets/readmeImages/gifs/compare_view.gif" width=800/>
+  <img src="./assets/readmeImages/gifs/Comparing_Queries.gif" width=800/>
 </div>
 
 ## Application Architecture and Logic
@@ -152,7 +164,7 @@ We've released SeeQR because it's a useful tool to help optimize SQL databases.
 
 ## Core Team
 
-[Allison Le](https://github.com/allisonle1) | [Brandon Lee](https://github.com/BrandonW-Lee) | [Casey Escovedo](https://github.com/caseyescovedo) | [Casey Walker](https://github.com/cwalker3011) | [Catherine Chiu](https://github.com/catherinechiu) | [Chris Akinrinade](https://github.com/chrisakinrinade) | [Cindy Chau](https://github.com/cindychau) | [Claudio Santos](https://github.com/Claudiohbsantos) | [Faraz Akhtar](https://github.com/faraza22) | [Frank Norton](https://github.com/FrankNorton32) | [Harrison Nam](https://github.com/harrynam07) | [James Kolotouros](https://github.com/dkolotouros) | [Jennifer Courtner](https://github.com/jcourtner) | [Justin Dury-Agri](https://github.com/justinD-A) | [Katie Klochan](https://github.com/kklochan) | [Mercer Stronck](https://github.com/mercerstronck) | [Muhammad Trad](https://github.com/muhammadtrad) | [Richard Guo](https://github.com/richardguoo) | [Richard Lam](https://github.com/rlam108) | [Sam Frakes](https://github.com/frakes413) | [Serena Kuo](https://github.com/serenackuo) | [Timothy Sin](https://github.com/timothysin)
+[Allison Le](https://github.com/allisonle1) | [Brandon Lee](https://github.com/BrandonW-Lee) | [Casey Escovedo](https://github.com/caseyescovedo) | [Casey Walker](https://github.com/cwalker3011) | [Catherine Chiu](https://github.com/catherinechiu) | [Chris Akinrinade](https://github.com/chrisakinrinade) | [Cindy Chau](https://github.com/cindychau) | [Claudio Santos](https://github.com/Claudiohbsantos) | [Eric Han](https://github.com/ericJH92) | [Faraz Akhtar](https://github.com/faraza22) | [Frank Norton](https://github.com/FrankNorton32) | [Harrison Nam](https://github.com/harrynam07) | [James Kolotouros](https://github.com/dkolotouros) | [Jennifer Courtner](https://github.com/jcourtner) | [John Wagner](https://github.com/jwagner988) | [Justin Dury-Agri](https://github.com/justinD-A) | [Justin Hicks](https://github.com/JuiceBawks) | [Katie Klochan](https://github.com/kklochan) | [May Wirapa Boonyasurat](https://github.com/mimiwrp) | [Mercer Stronck](https://github.com/mercerstronck) | [Muhammad Trad](https://github.com/muhammadtrad) | [Richard Guo](https://github.com/richardguoo) | [Richard Lam](https://github.com/rlam108) | [Sam Frakes](https://github.com/frakes413) | [Serena Kuo](https://github.com/serenackuo) | [Timothy Sin](https://github.com/timothysin) | [Vincent Trang](https://github.com/vincentt114)
 
 
 ## License

__tests__/frontend/lib/queries.spec.ts

@@ -1,10 +1,29 @@
+window.require = ((str: string) => str) as any
 import * as queries from '../../../frontend/lib/queries';
-import type { QueryData } from '../../../frontend/types';
+import type { QueryData, ExplainJson } from '../../../frontend/types';
 
 const first: Partial<QueryData> = {
   label: 'firstQuery',
   db: 'firstDb',
+  group: 'group1',
   sqlString: 'select * from tests',
+  executionPlan: {
+    Plan: {
+      'Node Type': 'Seq Scan',
+      'Relation Name': 'users',
+      Alias: 'users',
+      'Startup Cost': 0,
+      'Total Cost': 0,
+      'Plan Rows': 0,
+      'Plan Width': 0,
+      'Actual Startup Time': 0,
+      'Actual Total Time': 0,
+      'Actual Rows': 0,
+      'Actual Loops': 0,
+    },
+    'Planning Time': 1,
+    'Execution Time': 1,
+  },
 };
 
 const second: Partial<QueryData> = {
@@ -15,15 +34,16 @@ const second: Partial<QueryData> = {
 
 describe('key generation', () => {
   it('should create key from label and db given as params', () => {
-    expect(queries.keyFromData('LABEL', 'DB')).toEqual('label:LABEL db:DB');
+    expect(queries.keyFromData('LABEL', 'DB', 'GROUP')).toEqual('label:LABEL db:DB group:GROUP');
   });
 
   it('should create key from query object', () => {
     const query = {
       label: 'query1',
       db: 'db1',
+      group: 'group1'
     };
-    expect(queries.key(query as QueryData)).toEqual('label:query1 db:db1');
+    expect(queries.key(query as QueryData)).toEqual('label:query1 db:db1 group:group1');
   });
 });
 
@@ -137,23 +157,28 @@ describe('setCompare', () => {
 
   it('should not mutate original collection', () => {
     expect(Object.keys(collection).length).toBe(0);
-    const newCollection = queries.setCompare({}, first as QueryData, true);
+    const newCollection = queries.setCompare({}, {}, first as QueryData, true);
     expect(Object.keys(collection).length).toBe(0);
     expect(newCollection).not.toBe(collection);
   });
 
   it('should add query to new collection if given true for isCompared', () => {
     expect(Object.keys(collection).length).toBe(0);
-    const newCollection = queries.setCompare({}, first as QueryData, true);
+    const newCollection = queries.setCompare({}, {}, first as QueryData, true);
     expect(Object.keys(newCollection).length).toBe(1);
     expect(newCollection[queries.key(first as QueryData)]).toEqual(first);
   });
 
-  it('should remove query from new collection if given false for isCompared', () => {
+  it('should set execution time to 0 if given false for isCompared', () => {
+    let qs:any = { [`${queries.key(first as QueryData)}`]: first };
     expect(Object.keys(collection).length).toBe(0);
-    const newCollection = queries.setCompare({}, first as QueryData, true);
+    const newCollection = queries.setCompare({}, qs, first as QueryData, true);
     expect(Object.keys(newCollection).length).toBe(1);
-    const clearedCollection = queries.setCompare({}, first as QueryData, false);
-    expect(Object.keys(clearedCollection).length).toBe(0);
+    expect(newCollection[queries.key(first as QueryData)].executionPlan['Planning Time']).toBe(1);
+    expect(newCollection[queries.key(first as QueryData)].executionPlan['Execution Time']).toBe(1);
+    const newSetCollection = queries.setCompare(newCollection, qs, first as QueryData, false);
+    expect(Object.keys(newSetCollection).length).toBe(1);
+    expect(newSetCollection[queries.key(first as QueryData)].executionPlan['Planning Time']).toBe(0);
+    expect(newSetCollection[queries.key(first as QueryData)].executionPlan['Execution Time']).toBe(0);
   });
 });

backend/main.ts

@@ -1,4 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
+import { FamilyRestroomRounded } from '@mui/icons-material';
 import { app, BrowserWindow, Menu } from 'electron';
 
 const dev: boolean = process.env.NODE_ENV === 'development';
@@ -71,7 +72,6 @@ if (dev) {
     installExtension(REACT_DEVELOPER_TOOLS);
   });
 }
-
 // Invoke createWindow to create browser windows after Electron has been initialized.
 app.on('ready', createWindow);
 

backend/models.ts

@@ -13,7 +13,6 @@ const { Pool } = require('pg');
 // Note: User must have a 'postgres' role set-up prior to initializing this connection. https://www.postgresql.org/docs/13/database-roles.html
 const PG_URI: string = 'postgres://postgres:postgres@localhost:5432';
 let pool = new Pool({ connectionString: PG_URI });
-// console.log('Connected to: ', PG_URI);
 
 
 // *********************************************************** HELPER FUNCTIONS ************************************************* //

frontend/components/App.tsx

@@ -50,13 +50,14 @@ const App = () => {
 
   const [selectedDb, setSelectedDb] = useState<AppState['selectedDb']>('');
   const [sidebarIsHidden, setSidebarHidden] = useState(false);
+  const [newFilePath, setFilePath] = useState<AppState['newFilePath']>('');
 
   /**
    * Hook to create new Query from data
    */
   const createNewQuery: CreateNewQuery = (query: QueryData) => {
     // Only save query to saved queries if it contains all minimum information
-    if (query.label && query.db && query.sqlString) {
+    if (query.label && query.db && query.sqlString && query.group) {
       const newQueries = createQuery(queries, query);
       setQueries(newQueries);
     }
@@ -115,6 +116,8 @@ const App = () => {
               setWorkingQuery,
               setSidebarHidden,
               sidebarIsHidden,
+              setFilePath,
+              newFilePath
             }}
           />
           <Main $fullwidth={sidebarIsHidden}>
@@ -130,6 +133,7 @@ const App = () => {
               setSelectedDb={setSelectedDb}
               createNewQuery={createNewQuery}
               show={shownView === 'queryView'}
+              queries={queries}
             />
             <QuickStartView show={shownView === 'quickStartView'} />
             <NewSchemaView 

frontend/components/sidebar/QueryEntry.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+
 import styled from 'styled-components';
 import {
   IconButton,
   ListItemSecondaryAction,
   Checkbox,
   Tooltip,
+  Button
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import {
@@ -13,13 +15,13 @@ import {
   textColor,
 } from '../../style-variables';
 import { QueryData } from '../../types';
+import SaveIcon from '@material-ui/icons/Save';
 
 const QueryText = styled(StyledListItemText)`
   & .MuiListItemText-secondary {
     color: ${textColor};
   }
 `;
-
 const CompareCheck = styled(Checkbox)`
   color: ${textColor};
 `;
@@ -31,6 +33,7 @@ interface QueryEntryProps {
   setComparison: (evt: React.ChangeEvent<HTMLInputElement>) => void;
   isCompared: boolean;
   deleteThisQuery: () => void;
+  saveThisQuery: () => void;
 }
 
 const QueryEntry = ({
@@ -40,13 +43,19 @@ const QueryEntry = ({
   setComparison,
   isCompared,
   deleteThisQuery,
+  saveThisQuery,
 }: QueryEntryProps) => (
   <SidebarListItem button $customSelected={isSelected} onClick={select}>
-    <QueryText primary={query.label} secondary={query.db} />
+    <QueryText primary={`${query.label} - ${query.db}`} />
     <ListItemSecondaryAction>
       <Tooltip title="View in Comparison">
         <CompareCheck onChange={setComparison} checked={isCompared} />
       </Tooltip>
+      <Tooltip title="Save Query">
+        <IconButton onClick={saveThisQuery}>
+          <SaveIcon fontSize='default' />
+        </IconButton>
+      </Tooltip>
       <Tooltip title="Forget Query">
         <IconButton edge="end" onClick={deleteThisQuery}>
           <CloseIcon />
@@ -56,4 +65,6 @@ const QueryEntry = ({
   </SidebarListItem>
 );
 
+
+
 export default QueryEntry;