Merge branch 'main' into main

DEV_README.md

@@ -27,10 +27,12 @@ Run npm run dev twice if you do not manually run tsc to compile the files first.
 
 <p><b> WHAT NEEDS TO BE DONE: </b></p>
 
+
 <p>1. Refactor tableTabBar Component</p>
 
 - Migrated ERTabling to tableTabBar component to access the ERD because it lacked a parent compartment for prop drilling, hindering the addition of new features. Going forward, a more maintainable solution should be implemented like Redux or Zustand.
 
+
 <p><b>2. Isolating Database</b> <br> One of the biggest tasks that we tried but <b>did not finish</b> is isolating the concerns of each database type (DBType). The current application has multiple</p>
 <code>if (database === DBType.postgres) {}<br>
 else if (database === DBType.mysql) {}<br>
@@ -41,8 +43,10 @@ else (database === DBType.sqlite) {}<br>
 
 <img src="./assets/readmeImages/erdArchitecture.png" height=500/>
 
+
 <p>The road map is finish connecting the siloed pieces for postgres, then moving on to mysql <br><br> <b>***Important*** <br> There is no entry for this system yet, but this file frontend/components/iews/ERTables/ERDisplayWindow.tsx will be the entry once completed</b></p>
 
+
 <p><b>3. ERD Logic Update</b><br>Currently, previous wrote the frontend to send back a big bundle of all the operations done in the frontend ERD Table. This ERD table object is divided by add, drop, and alter. All the add operations will execute first then drop, then alter. This is <b>BAD</b>. <br><br> We need to redesign frontend to send back "sequental" operations instead of bundling operations by add, drop, alter because it takes care of multiple edge cases and users in the front can do as many operations they want to ensure <b>SAVE</b> works. I illustrated the problem below. The current backend is written out already. We just need to make sure the frontend is send back the appropriate logic</p>
 
 <img src="./assets/readmeImages/ERD_before_after.png" height=500/>

README.md

@@ -151,7 +151,9 @@ To get started on contributing and editing databases to this project:
   </br>
   <br>
   <div align="center">
-    <img src="./assets/readmeImages/gifs/querySearch.gif" width=800/>
+
+    <img src="./assets/readmeImages/gifs/query.gif" width=800/>
+
   </div>
    <br />
 

config.json

@@ -1 +1 @@
-{"mysql_options":{"user":"root","password":"","port":"3306"},"pg_options":{"user":"postgres","password":"test","port":"5434"},"rds_mysql_options":{"user":"","password":"","port":"","host":""},"rds_pg_options":{"user":"","password":"","port":"","host":""},"sqlite_options":{"filename":""},"directPGURI_options":{"connectionString":""}}
+{"mysql_options":{"user":"root","password":"","port":"3306"},"pg_options":{"user":"postgres","password":"Skittle5$s","port":"5434"},"rds_mysql_options":{"user":"","password":"","port":"","host":""},"rds_pg_options":{"user":"","password":"","port":"","host":""},"sqlite_options":{"filename":""},"directPGURI_options":{"connectionString":""}}

frontend/components/views/QueryView/QuerySqlInput.tsx

@@ -131,110 +131,3 @@ function QuerySqlInput({ sql, onChange }: QuerySqlInputProps) {
 }
 
 export default QuerySqlInput;
-
-// ... other imports and code ...
-// ... other imports and code ...
-
-// function QuerySqlInput({ sql, onChange, runQuery }: QuerySqlInputProps) {
-//   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
-//   const [userChangedValue, setUserChangedValue] = useState(false);
-
-//   useEffect(() => {
-//     const container = document.getElementById('editor-container');
-
-//     const initializeEditor = () => {
-//       if (container && !editorRef.current) {
-//         editorRef.current = monaco.editor.create(container, {
-//           value: sql,
-//           language: 'sql',
-//           theme: 'sql-theme',
-//         });
-
-//         editorRef.current.onDidChangeModelContent(() => {
-//           const newSql = editorRef.current?.getValue();
-//           if (userChangedValue) {
-//             onChange(newSql || '');
-//           } else {
-//             setUserChangedValue(true);
-//           }
-//         });
-
-//         // Set focus and cursor at the end of the editor after initialization
-//         const lastLine = editorRef.current.getModel()?.getLineCount() || 1;
-//         const lastColumn = editorRef.current.getModel()?.getLineMaxColumn(lastLine) || 1;
-//         editorRef.current.setSelection(new monaco.Selection(lastLine, lastColumn, lastLine, lastColumn));
-//       } else if (editorRef.current && sql !== editorRef.current.getValue()) {
-//         // Update the value when the sql prop changes
-//         const currentPosition = editorRef.current.getPosition();
-//         editorRef.current.setValue(sql);
-//         setUserChangedValue(false);
-
-//         // Set the cursor to the previous position or at the end if it was at the end
-//         if (currentPosition) {
-//           const lastLine = editorRef.current.getModel()?.getLineCount() || 1;
-//           const lastColumn = editorRef.current.getModel()?.getLineMaxColumn(lastLine) || 1;
-//           editorRef.current.setPosition(new monaco.Position(
-//             currentPosition.lineNumber <= lastLine ? currentPosition.lineNumber : lastLine,
-//             currentPosition.column <= lastColumn ? currentPosition.column : lastColumn
-//           ));
-//         }
-//       }
-//     };
-
-//     const loaderScript = document.createElement('script');
-//     loaderScript.src =
-//       'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs/loader.min.js';
-//     loaderScript.async = true;
-//     loaderScript.onload = initializeEditor;
-
-//     document.body.appendChild(loaderScript);
-
-//     return () => {
-//       // Cleanup function to dispose of the editor when the component unmounts
-//       if (editorRef.current) {
-//         editorRef.current.dispose();
-//         editorRef.current = null;
-//       }
-//     };
-//   }, [sql, onChange, userChangedValue]);
-
-//   const formatQuery = () => {
-//     const formatted = formatDialect(sql, {
-//       dialect: postgresql,
-//       keywordCase: 'upper',
-//     });
-//     onChange(formatted);
-//     setUserChangedValue(true);
-
-//     // Set focus and cursor at the end of the editor after calling onChange
-//     if (editorRef.current) {
-//       const lastLine = editorRef.current.getModel()?.getLineCount() || 1;
-//       const lastColumn = editorRef.current.getModel()?.getLineMaxColumn(lastLine) || 1;
-//       editorRef.current.setSelection(new monaco.Selection(lastLine, lastColumn, lastLine, lastColumn));
-//       editorRef.current.focus();
-//     }
-//   };
-
-//   return (
-//     <Container>
-//       <Toolbar>
-//         <ButtonGroup variant="contained">
-//           <Tooltip title="Auto-Format Query">
-//             <SquareBtn onClick={formatQuery}>
-//               <FormatPaintIcon />
-//             </SquareBtn>
-//           </Tooltip>
-//         </ButtonGroup>
-//       </Toolbar>
-//       <div
-//         id="editor-container"
-//         style={{
-//           width: '100%',
-//           height: '300px',
-//         }}
-//       />
-//     </Container>
-//   );
-// }
-
-// export default QuerySqlInput;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "seeqr",
   "productName": "SeeQR App",
-  "version": "12.0.0",
+  "version": "13.0.0",
   "description": "SQL Toolbox - Model Implementer, Execution Plan Visualizer and Query Comparison Tool",
   "main": "./tsCompiled/backend/main.js",
   "babel": {
@@ -19,7 +19,7 @@
     "electron-dev": "nodemon --watch tsCompiled/backend --exec \"npx cross-env NODE_ENV=development electron --no-sandbox .\"",
     "tsc-dev": "tsc --watch",
     "test": "jest --verbose",
-    "electron-build": "npm run build && electron-builder"
+    "electron-build": "npm run build && electron-builder --linux"
   },
   "repository": {
     "type": "git",