Git Product home page Git Product logo

open-source-labs / seeqr Goto Github PK

View Code? Open in Web Editor NEW
595.0 13.0 151.0 132.11 MB

A database analytic tool that allows developers to compare the efficiency of different schemas and queries on a granular level to make better informed architectural decisions regarding SQL databases at various scales.

Home Page: http://www.seeqrapp.com

License: MIT License

JavaScript 4.85% TypeScript 94.74% CSS 0.41%

seeqr's Introduction

PRs Welcome Release: 14.0.0 License: MIT Contributions Welcome Twitter Github stars

seeqrapp.com

SeeQR is a convenient one-stop shop for efficient SQL database manipulation and performance testing. SeeQR can be used throughout the database lifecycle, from creation to testing.

For the latest in-depth docs for v14.0.0, please visit our docs site.

Table of Contents

Getting Started

To get started on contributing and editing databases to this project:

  1. Download and install Postgres to access SeeQR's Postgres features and/or MySQL to access its MySQL features.
  2. Ensure that psql and/or mysql are available in the $PATH.
  3. Create users with passwords and permissions for both PostgreSQL and MySQL. Linked are instructions for Mac (Homebrew) and Linux/WSL.
  4. Download the latest version of SeeQR.

Built With

Interface & Features

  • Overview
    • Upon application launch, navigate to the config menu by clicking on the gear icon on the top left.
    • Ensure that your usernames, passwords, and ports are accurate in the SeeQR config.
    • Besides using the existing databases, the application also provides various options to create new databases:
      • Importing .sql or .tar files.
      • Navigating to the Create Database view at bottom of sidebar.
      • Copying an existing database (with or without original data).
    • Users can export any database onto their local machine.
    • Users can toggle between the 'DATABASES' view and the 'QUERIES' view.
    • Users can toggle between an 'ER DIAGRAM' view and the 'TABLES' view for each database.
  • Databases

    • In the 'DATABASES' view, an interactive Entity Relationship Diagram (ER DIAGRAM) is displayed for the selected database.

      • Users can now save table layout in version 13.

    • Users can select TABLE to see selected database in tabular form.

      • Users can select a table from a list of all the tables in the schema of the currently selected database.

        • Information about the selected table is then displayed.

        • The name and size of the selected database are also displayed at the top of the page.

        • Users can also generate large amounts of foreign-key compliant dummy data for the selected table in the current database. Currently supported data types are:

          • INT

          • BIGINT

          • VARCHAR

          • BOOLEAN

          • DATE



  • 3D Database Visualization

    • From the 'DATABASES' view, select the '3D View' tab on the far right of the sidebar to launch the brand new 3D database visualizer.
      • Individual table nodes are distinguished by their different colors
      • Column nodes are joined to table nodes and match their source table color
      • Individual tables related by foreign keys are connected through their respective foreign and primary keys
    • Navigate through the 3D space using left click to rotate, scroll wheel to zoom, and right click to pan.
    • Click and drag nodes to visually organize them
    • Click on a table or column node to quickly view the data stored within




  • Create/Edit Database

    • Users can create a new database from scratch by clicking the Create New Database button at the bottom of the sidebar.
    • Users can modify the newly created database as well as any existing databases using the ER Diagram to create/change/delete tables and columns.
    • The Export button will write a .sql file on the user's desktop of the selected database.

  • Queries

    • In the 'QUERIES' view, the main panel is where the query input text field is located, utilizing Monaco. 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/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.

    • Users have the option to run multiple queries, allowing users to obtain more reliable testing results.

    • Version 13 introduces a new feature that enables users to access and view previous queries. Upon selecting a previous query, it populates the query input field, allowing users to make edits before executing.


  • 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.

  • Data

    • Once executed, the query's output will be displayed. In addition, for eligible queries, users will be able to view the queries' planning time, execution time, total run time, and plan of execution.
      • Eligible queries include any SELECT, INSERT, UPDATE, DELETE, VALUES, EXECUTE, DECLARE, CREATE TABLE AS, or CREATE MATERIALIZED VIEW AS statement.
    • Users can toggle between the executed query's 'RESULTS' and 'EXECUTION PLAN'.
    • The 'RESULTS' view displays the executed query's returned results.
    • The 'EXECUTION PLAN' view displays the executed query's plan of execution.
      • Within the 'EXECUTION PLAN', users can adjust the thresholds of 'Percentage of Total Duration' and the 'Planner Rows Accuracy' that are used to highlight certain nodes in the tree.
        • The 'Percentage of Total Duration' threshold is used to highlight the nodes whose durations are higher than the set limit, indicating that these nodes may be areas of improvement.
        • The 'Planner Rows Accuracy' threshold is used to highlight the nodes for which the planner's estimate number of rows differs from the actual number of rows, indicating that the database might need vacuuming.
      • 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.

  • 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 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.

Application Architecture and Logic

Cross-Database Comparisons
One of the key features of SeeQR is to compare the efficiency of executing user-inputted queries against different databases. This allows customization of table scale, relationship, type, and the queries themselves within the context of each database. This flexibility affords the user granular adjustments for testing every desired scenario. Please refer to “Interface & Features” for more details on execution.

Session-based Result Caching
The outcome results from each query, both retrieved data and analytics, are stored in the application’s state, which can be viewed and compared in table and visualizer formats. Note that these results’ persistence is session-based and will be cleared upon quitting the application.

Contributing

We've released SeeQR because it's a useful tool to help optimize SQL databases. Additional features, extensions, and improvements will continue to be introduced. Please refer to the DEV_README for a list of improvements we are looking to implement and that are open to contributors.

We are thankful for any contributions from the community and we encourage you to try SeeQR out to make or suggest improvements where you see fit! If you encounter any issues with the application, please report them in the issues tab or submit a PR. Thank you for your interest!

Core Team

Zhijiao Li | Ting Li | Michael Ma | Ivan Navarro | Joseph Cho | Kevin Chou |Zoren Labrador |Elaine Wong | Cathy Luong | Derek Koh | Peter Zepf | Tony Gao | Ching-Yuan Lai (Eric) | Jamie Zhang | Julian Macalalag | Nathan Chong | Junaid Ahmed | Chase Sizemore | Oscar Romero | Anthony Deng | Aya Moosa | Trevor Ferguson | Pauline Nguyen | Utkarsh Uppal | Fred Jeong | Gabriel Kime | Chris Fryer | Ian Grepo | Michelle Chang | Jake Bradbeer | Bryan Santos | William Trey Lewis | Brandon Lee | Casey Escovedo | Casey Walker | Catherine Chiu | Chris Akinrinade | Cindy Chau | Claudio Santos | Eric Han | Faraz Akhtar | Frank Norton | Harrison Nam | James Kolotouros | Jennifer Courtner | John Wagner | Justin Dury-Agri | Justin Hicks | Katie Klochan | May Wirapa Boonyasurat | Mercer Stronck | Muhammad Trad | Richard Guo | Richard Lam | Sam Frakes | Serena Kuo | Timothy Sin | Vincent Trang

License

SeeQR is MIT licensed.

seeqr's People

Contributors

annni11 avatar anthonyadeng avatar catherinechiu avatar choukevin612 avatar cindychau avatar claudiohbsantos avatar cwalker3011 avatar derekoko avatar faraza22 avatar franknorton32 avatar frynoceros avatar haemie avatar jbradbeer avatar jcourtner avatar junaid-ahmed7 avatar justind-a avatar juzi3 avatar langrape avatar lovelyjoy1991 avatar michaelma7 avatar muhammadtrad avatar paranoidfrappe avatar peterzepf avatar rlam108 avatar santosb93 avatar serenackuo avatar tgao17 avatar treyfrog128 avatar user-byte123 avatar zorenal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

seeqr's Issues

How to launch the app

Hi, it's not really a bug, maybe a missing point in he doc.
I've downloaded the latest release for linux
I got a ZIP file, i unzip it.
And then... i get a bunch of files
No README, no sh files
I finally try to launch several files and
./electron-tutorial-app
did in fact launch the app :)

May be add a line in the "get started" page to save some time for others people ?
Best regards

Cannot modify columns on imported or created PSQL databases

Description

Cannot delete tables or modify column data of existing or created PSQL databases. Buttons and forms seem to respond but do not properly update the table with new columns or deleting columns. Imported tables still have access to change existing column data but columns cannot be removed or added.

Reproduction

2024-06-0711-32-33-ezgif com-video-to-gif-converter
2024-06-0711-32-59-ezgif com-video-to-gif-converter

Win10 App D/L for v14.0
https://github.com/open-source-labs/SeeQR/releases/download/v14.0.0/SeeQR-14.0.0-win.zip

System information

System:
OS: Windows 10 10.0.19045
CPU: (16) x64 AMD Ryzen 7 7700X 8-Core Processor
Memory: 31.21 GB
Binaries:
Node: 20.13.1 - ~\nodejs\node.EXE
npm: 10.8.0 - ~\repos\SeeQR\node_modules.bin\npm.CMD
Browsers:
Chrome: 125.0.6422.142
Edge: Chromium (125.0.2535.85)
Internet Explorer: 11.0.19041.4355
npmPackages:
@babel/core: ^7.22.10 => 7.24.5
@babel/preset-env: ^7.22.10 => 7.24.5
@babel/preset-react: ^7.22.5 => 7.24.1
@babel/preset-typescript: ^7.24.1 => 7.24.1
@electron/packager: ^18.3.2 => 18.3.2
@emotion/react: ^11.11.1 => 11.11.4
@emotion/styled: ^11.11.0 => 11.11.5
@eslint/js: ^9.2.0 => 9.3.0
@faker-js/faker: ^8.0.2 => 8.4.1
@fontsource/roboto: ^5.0.13 => 5.0.13
@mui/icons-material: ^5.15.6 => 5.15.18
@mui/material: ^5.14.5 => 5.15.18
@pmmmwh/react-refresh-webpack-plugin: ^0.5.11 => 0.5.13
@reduxjs/toolkit: ^2.2.4 => 2.2.5
@testing-library/jest-dom: ^6.4.5 => 6.4.5
@testing-library/react: ^15.0.7 => 15.0.7
@types/chart.js: ^2.9.37 => 2.9.41
@types/debounce: ^1.2.1 => 1.2.4
@types/enzyme: ^3.10.13 => 3.10.18
@types/enzyme-adapter-react-16: ^1.0.6 => 1.0.9
@types/jest: ^29.5.12 => 29.5.12
@types/ms: ^0.7.31 => 0.7.34
@types/mysql2: github:types/mysql2 => 1.0.0
@types/node: ^20.5.2 => 20.12.12
@types/pg: ^8.10.2 => 8.11.6
@types/react: ^18.2.20 => 18.3.2
@types/react-dom: ^18.2.7 => 18.3.0
@types/styled-components: ^5.1.26 => 5.1.34
@types/three: ^0.164.0 => 0.164.0
@types/webpack: ^5.28.5 => 5.28.5
@typescript-eslint/eslint-plugin: ^7.9.0 => 7.9.0
@typescript-eslint/parser: ^7.9.0 => 7.9.0
babel-loader: ^9.1.3 => 9.1.3
chart.js: ^4.3.3 => 4.4.3
concurrently: ^8.2.1 => 8.2.2
cross-env: ^7.0.3 => 7.0.3
css-loader: ^7.1.1 => 7.1.1
d3: ^7.8.5 => 7.9.0
dagre: ^0.8.5 => 0.8.5
debounce: ^2.0.0 => 2.0.0
electron: ^30.0.4 => 30.0.6
electron-builder: ^24.13.3 => 24.13.3
electron-reloader: ^1.2.3 => 1.2.3
electron-store: 9.0 => 9.0.0
enzyme: ^3.11.0 => 3.11.0
eslint: ^8.57.0 => 8.57.0
eslint-config-airbnb: ^19.0.4 => 19.0.4
eslint-config-prettier: ^9.1.0 => 9.1.0
eslint-import-resolver-typescript: ^3.6.1 => 3.6.1
eslint-plugin-import: ^2.29.1 => 2.29.1
eslint-plugin-jsx-a11y: ^6.8.0 => 6.8.0
eslint-plugin-react: ^7.34.1 => 7.34.1
eslint-plugin-react-hooks: ^4.6.2 => 4.6.2
file-loader: ^6.2.0 => 6.2.0
fix-path: 3.0 => 3.0.0
fork-ts-checker-webpack-plugin: ^9.0.2 => 9.0.2
html-webpack-plugin: ^5.5.3 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
immer: ^10.1.1 => 10.1.1
jest: ^29.7.0 => 29.7.0
jest-environment-jsdom: ^29.6.3 => 29.7.0
monaco-editor: ^0.48.0 => 0.48.0
ms: ^2.1.3 => 2.1.3
mysql: ^2.18.1 => 2.18.1
mysql2: ^3.6.0 => 3.9.7
nodemon: ^3.0.1 => 3.1.0
npm: ^10.7.0 => 10.8.0
npm-run-all: ^4.1.5 => 4.1.5
pg: ^8.11.3 => 8.11.5
postcss: ^8.4.28 => 8.4.38
postcss-loader: ^8.1.1 => 8.1.1
react: ^18.2.0 => 18.3.1
react-chartjs-2: ^5.2.0 => 5.2.0
react-dom: ^18.2.0 => 18.3.1
react-force-graph: ^1.43.0 => 1.44.3
react-redux: ^9.1.2 => 9.1.2
react-refresh: ^0.14.0 => 0.14.2
reactflow: ^11.8.3 => 11.11.3
sass: ^1.66.1 => 1.77.2
sass-loader: ^14.2.1 => 14.2.1
sql-formatter: ^15.3.1 => 15.3.1
sqlite3: 5.1.6 => 5.1.6
style-loader: ^4.0.0 => 4.0.0
styled-components: ^6.0.7 => 6.1.11
text-encoding: ^0.7.0 => 0.7.0
three: ^0.164.1 => 0.164.1
three-spritetext: ^1.8.1 => 1.8.2
ts-jest: ^29.1.3 => 29.1.2
ts-loader: ^9.4.4 => 9.5.1
ts-node: ^10.9.2 => 10.9.2
typescript: ^5.4.5 => 5.4.5
typescript-eslint: ^7.9.0 => 7.9.0
webpack: ^5.88.2 => 5.91.0
webpack-bundle-analyzer: ^4.9.0 => 4.10.2
webpack-cli: ^5.1.4 => 5.1.4
webpack-dev-server: ^5.0.4 => 5.0.4

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

SQLite Implementation

Problem

SQLite databases are officially supported but the way SQLite is different enough from other SQL databases that there needs to be a proper integration so that the application will be able to edit SQLite databases. For example Alter Table is not fully supported by SQLite only a subset of commands are allowed. SQLite is different in that it stores the schema in the sqlite_schema table as the original text of the CREATE statements that define the schema. Hence ALTER TABLE needs to revise the text of the CREATE statement. Doing so can be tricky for certain "creative" schema designs.

Solution

My recommendation is to read up on all the SQLite documentation in regards to alter table to then edit how the ERDiagram works specifically for SQLite.
https://sqlite.org/lang_altertable.html
image

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

SeeQR 8.0 Issues

MySQL

  • Unable to import files into SeeQR directly
  • --MySQL error prevents import without direct install of brew of all MySQL.
  • No export option available.
  • --Need to fine-tune the query for MySQL.
  • Unable to duplicate databases
  • --Need Query adjustment and fix of copy query.
  • Drop database after switching to postgres will sometimes cause issue where unable to delete selected database.
  • --Most likely has to do with current and last database being reassigned incorrectly.
  • MySQL execution query doesn’t function consistently.
    -- Need to see how data is being returned from query to correctly translate it to the frontend.

ERD

  • Easier viewing options. Pan to scroll or click to move options.
  • --Difficult to navigate around the ERD when the database is large.
  • MySQL tables don’t populate in the correct location when being imported.
  • --Top table node doesn’t connect to corresponding columns causing tables to look separated.
    --- Need to see how data is being returned from query and translated to frontend.
  • MiniMap receives greater functionality and allows for faster movement.
  • --Needs click to navigate feature and pan to scroll for fast movement.
  • --Zoomed very far out with MySQL and difficult to see tables.
  • Optimized query to load database quicker.
  • --Large databases will take awhile to load. Can benefit from optimized query.
  • Saving ERD when using MySQL is inconsistent.
  • --Additional tables fail to save after multiple tables have been added and saved.

Table View

  • DummyData button doesn’t work
  • --Query doesn’t provide dummy data.
  • --Needs to be functional with MySQL
  • Table viewing from the table view needs dropdown view
  • --Difficult to navigate around when there are a lot of tables

Quality of life

  • Delete button doesn’t ask for confirmation
  • -- Seen in both column and sidebar view.
  • Export icon next to duplicate and trash icon
  • Dependency issues when doing NPM install for Mac.
  • --Need to move on from deprecated MUI.
  • Scrollbar for sidebar when lots of databases are connected.

Async event emitters between front/back-end

Problem

Sub-issue #1: Currently, the way the feedback modal works is by handling events that are emitted from both the frontend and the backend.

Sub-issue #2: The main roadblock in the way of finalizing the transfer of event handlers out of the frontend is the way the dblist (list of databases in the sidebar) gets updated. Many event handlers in the backend send a dblist update event out to update the front end.

Sub-issue #3: There are still some filesystem read/write calls in the front end.

Solution

Sub-issue #1: Ideally, this should be refactored to be state dependent rather than event dependent, as it controls the display of the modal. This can be tied into the centralized async event emitter added to frontend/components/app.tsx, in conjunction with migration to reducers from state variables. The goal will be to house modal messages in the store tied to the main app reducer. From there, the async handler can send new messages to the state via main app dispatch, and any other front end feedback can do the same.

Sub-issue #2: Ideally, this should be handled by returning the new dblist changes out of the handler and using that resolved value to update state whenever an action would cause a dblist change. Right now, app.tsx has a useEffect running that listens for those dblist updates every frame. This is inefficient as a frontend concern.

Sub-issue #3: This should be refactored to an async call that requests the backend handle the file system read/write for proper separation of concerns.

Additional information

The spinner currently works in a similar way to feedback. Once all async is completely migrated (including dblist update changes), this spinner can simply be tied to the loading property in the main app state.

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

ERD Logic needs refactoring

Problem

Currently, the frontend is sending 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 logic was BAD.

Solution

Need 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 SAVE works.
Previous team has illustrated the problem below. The current backend has been written out already. Next step, need to make sure the frontend is sending back the appropriate logic.
image
This is written at backend/src/ipcHandlers/dbCRUDHandlerERD.ts and will replace backend/src/ipcHandlers/dbCRUDHandler.ts when this is ready

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

New Query Button does not work

Description

Pressing the New Query button without a database selected does not do anything. Importing Queries and designating save buttons still seem to work.

Reproduction

2024-06-0712-03-00-ezgif com-video-to-gif-converter

Win 10 on v14 win.zip
https://github.com/open-source-labs/SeeQR/releases/download/v14.0.0/SeeQR-14.0.0-win.zip

System information

System:
OS: Windows 10 10.0.19045
CPU: (16) x64 AMD Ryzen 7 7700X 8-Core Processor
Memory: 14.29 GB / 31.21 GB
Binaries:
Node: 20.13.1 - ~\nodejs\node.EXE
npm: 10.8.0 - ~\repos\SeeQR\node_modules.bin\npm.CMD
Browsers:
Chrome: 125.0.6422.142
Edge: Chromium (125.0.2535.85)
Internet Explorer: 11.0.19041.4355
npmPackages:
@babel/core: ^7.22.10 => 7.24.5
@babel/preset-env: ^7.22.10 => 7.24.5
@babel/preset-react: ^7.22.5 => 7.24.1
@babel/preset-typescript: ^7.24.1 => 7.24.1
@electron/packager: ^18.3.2 => 18.3.2
@emotion/react: ^11.11.1 => 11.11.4
@emotion/styled: ^11.11.0 => 11.11.5
@eslint/js: ^9.2.0 => 9.3.0
@faker-js/faker: ^8.0.2 => 8.4.1
@fontsource/roboto: ^5.0.13 => 5.0.13
@mui/icons-material: ^5.15.6 => 5.15.18
@mui/material: ^5.14.5 => 5.15.18
@pmmmwh/react-refresh-webpack-plugin: ^0.5.11 => 0.5.13
@reduxjs/toolkit: ^2.2.4 => 2.2.5
@testing-library/jest-dom: ^6.4.5 => 6.4.5
@testing-library/react: ^15.0.7 => 15.0.7
@types/chart.js: ^2.9.37 => 2.9.41
@types/debounce: ^1.2.1 => 1.2.4
@types/enzyme: ^3.10.13 => 3.10.18
@types/enzyme-adapter-react-16: ^1.0.6 => 1.0.9
@types/jest: ^29.5.12 => 29.5.12
@types/ms: ^0.7.31 => 0.7.34
@types/mysql2: github:types/mysql2 => 1.0.0
@types/node: ^20.5.2 => 20.12.12
@types/pg: ^8.10.2 => 8.11.6
@types/react: ^18.2.20 => 18.3.2
@types/react-dom: ^18.2.7 => 18.3.0
@types/styled-components: ^5.1.26 => 5.1.34
@types/three: ^0.164.0 => 0.164.0
@types/webpack: ^5.28.5 => 5.28.5
@typescript-eslint/eslint-plugin: ^7.9.0 => 7.9.0
@typescript-eslint/parser: ^7.9.0 => 7.9.0
babel-loader: ^9.1.3 => 9.1.3
chart.js: ^4.3.3 => 4.4.3
concurrently: ^8.2.1 => 8.2.2
cross-env: ^7.0.3 => 7.0.3
css-loader: ^7.1.1 => 7.1.1
d3: ^7.8.5 => 7.9.0
dagre: ^0.8.5 => 0.8.5
debounce: ^2.0.0 => 2.0.0
electron: ^30.0.4 => 30.0.6
electron-builder: ^24.13.3 => 24.13.3
electron-reloader: ^1.2.3 => 1.2.3
electron-store: 9.0 => 9.0.0
enzyme: ^3.11.0 => 3.11.0
eslint: ^8.57.0 => 8.57.0
eslint-config-airbnb: ^19.0.4 => 19.0.4
eslint-config-prettier: ^9.1.0 => 9.1.0
eslint-import-resolver-typescript: ^3.6.1 => 3.6.1
eslint-plugin-import: ^2.29.1 => 2.29.1
eslint-plugin-jsx-a11y: ^6.8.0 => 6.8.0
eslint-plugin-react: ^7.34.1 => 7.34.1
eslint-plugin-react-hooks: ^4.6.2 => 4.6.2
file-loader: ^6.2.0 => 6.2.0
fix-path: 3.0 => 3.0.0
fork-ts-checker-webpack-plugin: ^9.0.2 => 9.0.2
html-webpack-plugin: ^5.5.3 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
immer: ^10.1.1 => 10.1.1
jest: ^29.7.0 => 29.7.0
jest-environment-jsdom: ^29.6.3 => 29.7.0
monaco-editor: ^0.48.0 => 0.48.0
ms: ^2.1.3 => 2.1.3
mysql: ^2.18.1 => 2.18.1
mysql2: ^3.6.0 => 3.9.7
nodemon: ^3.0.1 => 3.1.0
npm: ^10.7.0 => 10.8.0
npm-run-all: ^4.1.5 => 4.1.5
pg: ^8.11.3 => 8.11.5
postcss: ^8.4.28 => 8.4.38
postcss-loader: ^8.1.1 => 8.1.1
react: ^18.2.0 => 18.3.1
react-chartjs-2: ^5.2.0 => 5.2.0
react-dom: ^18.2.0 => 18.3.1
react-force-graph: ^1.43.0 => 1.44.3
react-redux: ^9.1.2 => 9.1.2
react-refresh: ^0.14.0 => 0.14.2
reactflow: ^11.8.3 => 11.11.3
sass: ^1.66.1 => 1.77.2
sass-loader: ^14.2.1 => 14.2.1
sql-formatter: ^15.3.1 => 15.3.1
sqlite3: 5.1.6 => 5.1.6
style-loader: ^4.0.0 => 4.0.0
styled-components: ^6.0.7 => 6.1.11
text-encoding: ^0.7.0 => 0.7.0
three: ^0.164.1 => 0.164.1
three-spritetext: ^1.8.1 => 1.8.2
ts-jest: ^29.1.3 => 29.1.2
ts-loader: ^9.4.4 => 9.5.1
ts-node: ^10.9.2 => 10.9.2
typescript: ^5.4.5 => 5.4.5
typescript-eslint: ^7.9.0 => 7.9.0
webpack: ^5.88.2 => 5.91.0
webpack-bundle-analyzer: ^4.9.0 => 4.10.2
webpack-cli: ^5.1.4 => 5.1.4
webpack-dev-server: ^5.0.4 => 5.0.4

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

some tests continue failing

Description

After migration to redux toolkit some of the tests start failing and was tests that was passing before redux the problem needs to be something related to redux or wrong path directions related with moved or eliminated files. the tests are commented to make it easy to follow.

Reproduction

[ npm test -- --findRelatedTests path/to/your-test-file.test.js ] run this tests in any file with the code commented to check what is the error.

System information

System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i3-1005G1 CPU @ 1.20GHz
Memory: 2.24 GB / 3.74 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
npm: 10.8.0 - ~/SeeQR/node_modules/.bin/npm

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

Isolating each Database type

Problem

The current application has multiple "if...else" statement which it not best practice. For example, when checking database type, using multiple if statements:

if (database === DBType.postgres) {...}
else if (database === DBType.mysql) {...}
else (database === DBType.sqlite) {...}

Solution

Use switch statements to preemptively throw operations into separate functions to completely silo cases for Postgres, Mysql, and SqLite.
This is a task for both the FRONTEND and BACKEND, and the FRONTEND is much harder.
The work for backend is actually done and it is illustrated in the picture below.
image
The road map is finish connecting the siloed pieces for postgres, then moving on to mysql.

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

Migrating the Remaining Reducers from Context API to Redux Toolkit

Problem

The existing frontend codebase is partially migrated from the Context API to Redux Toolkit. While the appview, menu, and query components have been successfully migrated, the remaining components including DatabaseReducers, ERDReducers, and related actions, still use the Context API. This partial migration creates inconsistency in state management, making the codebase harder to maintain and scale.

Solution

  1. Create slice file for DatabaseReducers and ERDReducers
  2. Define the Initial State and Reducers by moving the logic from DatabaseActions.ts, ERDMySqlActions.ts, ERDPsqlActions.ts, and ERDSqLiteActions.ts into the slices.
  3. Add the slices to the store configuration in store.ts.
  4. For each component using DatabaseActions and ERDActions, update to use useSelector and useDispatch.
  5. Remove the old related actions, contexts and reducers

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

Add cloud database instructions for the quick start page of application

Suggestion

After support for cloud database is fully implemented, the instruction for setting up the cloud database should be added to the quick start page.

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to improve these docs!

can't execute queries in v. 10 or 11 on Windows 10

Hi: i've downloaded v. 10 and 11 latest from github, and am able to establish an RDS connection to a postgres server on my network, but when I try to execute a query (any query) I get an error "TypeError: Cannot read property 'label' of undefined". I am guessing that there is a permissions issue reading or writing the settings file, but even if I try to run the app as administrator, I still get the same error?

I see that if I try to designate the save location for the json settings, it defaults to the "documents" folder of the current user, but it doesn't create the file. If I try to specify a different unprivileged location, it doesn't create the settings file there either. It DOES remember the database configuration when I exit and restart the app.

Typescript needs to be enforced in the entire code base

Problem

There are certain parts of the codebase that do not use Typescript typing.
image

Solution

The types should be enforced and "any" type should be minimized in the refactoring.

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

UI is not responsive!

UI is breaking on my 1920x1080px 22-inch LG monitor. There is also other UI issue I experienced all the pages

Query view for individual database crashes application

Description

After selecting a database to view, navigating to the queries via the Queries button on the sidebar causes the application to crash. You can reload the application via the top menu -> View -> Reload or Force Reload to bring the application back.

Reproduction

2024-06-0711-12-57-ezgif com-video-to-gif-converter

On Windows 10 using v14.0 d/l listed below.
https://github.com/open-source-labs/SeeQR/releases/download/v14.0.0/SeeQR-14.0.0-win.zip

System information

System:
OS: Windows 10 10.0.19045
CPU: (16) x64 AMD Ryzen 7 7700X 8-Core Processor
Memory: 31.21 GB
Binaries:
Node: 20.13.1 - ~\nodejs\node.EXE
npm: 10.8.0 - ~\repos\SeeQR\node_modules.bin\npm.CMD
Browsers:
Chrome: 125.0.6422.142
Edge: Chromium (125.0.2535.85)
Internet Explorer: 11.0.19041.4355
npmPackages:
@babel/core: ^7.22.10 => 7.24.5
@babel/preset-env: ^7.22.10 => 7.24.5
@babel/preset-react: ^7.22.5 => 7.24.1
@babel/preset-typescript: ^7.24.1 => 7.24.1
@electron/packager: ^18.3.2 => 18.3.2
@emotion/react: ^11.11.1 => 11.11.4
@emotion/styled: ^11.11.0 => 11.11.5
@eslint/js: ^9.2.0 => 9.3.0
@faker-js/faker: ^8.0.2 => 8.4.1
@fontsource/roboto: ^5.0.13 => 5.0.13
@mui/icons-material: ^5.15.6 => 5.15.18
@mui/material: ^5.14.5 => 5.15.18
@pmmmwh/react-refresh-webpack-plugin: ^0.5.11 => 0.5.13
@reduxjs/toolkit: ^2.2.4 => 2.2.5
@testing-library/jest-dom: ^6.4.5 => 6.4.5
@testing-library/react: ^15.0.7 => 15.0.7
@types/chart.js: ^2.9.37 => 2.9.41
@types/debounce: ^1.2.1 => 1.2.4
@types/enzyme: ^3.10.13 => 3.10.18
@types/enzyme-adapter-react-16: ^1.0.6 => 1.0.9
@types/jest: ^29.5.12 => 29.5.12
@types/ms: ^0.7.31 => 0.7.34
@types/mysql2: github:types/mysql2 => 1.0.0
@types/node: ^20.5.2 => 20.12.12
@types/pg: ^8.10.2 => 8.11.6
@types/react: ^18.2.20 => 18.3.2
@types/react-dom: ^18.2.7 => 18.3.0
@types/styled-components: ^5.1.26 => 5.1.34
@types/three: ^0.164.0 => 0.164.0
@types/webpack: ^5.28.5 => 5.28.5
@typescript-eslint/eslint-plugin: ^7.9.0 => 7.9.0
@typescript-eslint/parser: ^7.9.0 => 7.9.0
babel-loader: ^9.1.3 => 9.1.3
chart.js: ^4.3.3 => 4.4.3
concurrently: ^8.2.1 => 8.2.2
cross-env: ^7.0.3 => 7.0.3
css-loader: ^7.1.1 => 7.1.1
d3: ^7.8.5 => 7.9.0
dagre: ^0.8.5 => 0.8.5
debounce: ^2.0.0 => 2.0.0
electron: ^30.0.4 => 30.0.6
electron-builder: ^24.13.3 => 24.13.3
electron-reloader: ^1.2.3 => 1.2.3
electron-store: 9.0 => 9.0.0
enzyme: ^3.11.0 => 3.11.0
eslint: ^8.57.0 => 8.57.0
eslint-config-airbnb: ^19.0.4 => 19.0.4
eslint-config-prettier: ^9.1.0 => 9.1.0
eslint-import-resolver-typescript: ^3.6.1 => 3.6.1
eslint-plugin-import: ^2.29.1 => 2.29.1
eslint-plugin-jsx-a11y: ^6.8.0 => 6.8.0
eslint-plugin-react: ^7.34.1 => 7.34.1
eslint-plugin-react-hooks: ^4.6.2 => 4.6.2
file-loader: ^6.2.0 => 6.2.0
fix-path: 3.0 => 3.0.0
fork-ts-checker-webpack-plugin: ^9.0.2 => 9.0.2
html-webpack-plugin: ^5.5.3 => 5.6.0
identity-obj-proxy: ^3.0.0 => 3.0.0
immer: ^10.1.1 => 10.1.1
jest: ^29.7.0 => 29.7.0
jest-environment-jsdom: ^29.6.3 => 29.7.0
monaco-editor: ^0.48.0 => 0.48.0
ms: ^2.1.3 => 2.1.3
mysql: ^2.18.1 => 2.18.1
mysql2: ^3.6.0 => 3.9.7
nodemon: ^3.0.1 => 3.1.0
npm: ^10.7.0 => 10.8.0
npm-run-all: ^4.1.5 => 4.1.5
pg: ^8.11.3 => 8.11.5
postcss: ^8.4.28 => 8.4.38
postcss-loader: ^8.1.1 => 8.1.1
react: ^18.2.0 => 18.3.1
react-chartjs-2: ^5.2.0 => 5.2.0
react-dom: ^18.2.0 => 18.3.1
react-force-graph: ^1.43.0 => 1.44.3
react-redux: ^9.1.2 => 9.1.2
react-refresh: ^0.14.0 => 0.14.2
reactflow: ^11.8.3 => 11.11.3
sass: ^1.66.1 => 1.77.2
sass-loader: ^14.2.1 => 14.2.1
sql-formatter: ^15.3.1 => 15.3.1
sqlite3: 5.1.6 => 5.1.6
style-loader: ^4.0.0 => 4.0.0
styled-components: ^6.0.7 => 6.1.11
text-encoding: ^0.7.0 => 0.7.0
three: ^0.164.1 => 0.164.1
three-spritetext: ^1.8.1 => 1.8.2
ts-jest: ^29.1.3 => 29.1.2
ts-loader: ^9.4.4 => 9.5.1
ts-node: ^10.9.2 => 10.9.2
typescript: ^5.4.5 => 5.4.5
typescript-eslint: ^7.9.0 => 7.9.0
webpack: ^5.88.2 => 5.91.0
webpack-bundle-analyzer: ^4.9.0 => 4.10.2
webpack-cli: ^5.1.4 => 5.1.4
webpack-dev-server: ^5.0.4 => 5.0.4

Additional information

No response

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!

3D visualization refactoring

Problem

When using the 3D visualization refactoring, I want to be able to switch directly between different databases and have the selected database render on the 3D page. Currently on the 3D page, appears the existing databases are viewable/listed on the sidebar; however, these databases cannot be selected and users need to leave the 3D page before switching to a new database.

Solution

Review the existing directory (ThreeDView) and files (ThreeDUniverse.jsx and ThreeDView.jsx) to understand how the database is being rendered on the 3D page.
For instance, the function ThreeDView below returns the component "ThreeDUniverse"
image

The file "ThreeDUniverse" includes the logic for rendering the 3D page, including the database/nodes. Need to pinpoint the logic for rendering a selected database and ideate on how to handle re-rendering another database selected from the sidebar.

Additional information

Additional related features regarding 3D visualization refactoring:

  • Have the camera rotate when initially opening the 3D page
  • Better cache/memory management to speed up animations and rendering
  • Make the green table in 3D view always face the user's camera
  • Implement ER table functions

👨‍👧‍👦 Contributing

  • 🙋‍♂️ Yes, I'd love to make a PR to implement this feature!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.