The seeqr_web from olivia-code

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

Beta Phase
Getting Started
Built With
Interface & Features
- Schema import methods
- Query input
- Data
- History
- Results
- Compare
- Visualized Analytics
Application Architecture and Logic
Core Team

Beta Phase

SeeQR is still in BETA. Additional features, extensions, and improvements will continue to be introduced. If you encounter any issues with the application, please report them in the issues tab or submit a PR. Thank you for your interest!

Getting Started

To get started on contributing to this project:

Fork or clone this repository
Npm install
1. Run npm install for application-specific dependencies.
2. Run global install for: 'typescript'.
Install Live Sass Compile VSCode extension (settings are configured in the .vscode file in this repo), or set up your preferred Sass compiler
To run application during development
1. npm run dev to launch SeeQR in localhost 3000 and webpack-dev-server.

Built With

Interface & Features

The whole interface in a nutshell

Input Schema
- New schemas can be imported into the application by pasting the contents of your .sql file into the query panel on the UI of the app.
- Once you've imported the contents of the .sql file, you're ready to make queries!
Query input
- The center panel is where the query input text field is located, utilizing CodeMirror for SQL styling.
- Users have option to execute a tracked or untracked query—simply check the box and provide a label to identify the query in later comparisons against other queries.
- Toggle the submit button in the bottom left to send the query to the selected database.
Data
- The data table displays data returned by the inputted query.
History
- The history table shows the latest queries the user submitted irrespective of the database.
- The history table also displays the total rows returned by the query and the total query execution time.
Compare
- The comparison table is flexible to the user’s preferences.
- The user selects which queries they want to compare side by side from the ‘Add Query Data’ drop down.
- They can add and remove queries as they see fit.

Visualized Analytics
- Upon each query execution, query runtime displays under the "Query Label vs Query Runtime" graph. Graph automatically interpolates as results enumerate.
- User may toggle on specific query analytics results with the Comparisons panel to compare query performances.
- Graph will be organized on x-axis by label, and colored by schema.

Application Architecture and Logic

Sandbox Environment
SeeQR streamlines the process of instantiating postgres databases by leveraging elephantSQL to import a copy of your database on the web. This means instances of databases are automatically created every time new schema data is inputted via the SeeQR GUI.

Query Runtime Comparisons
One of the key features of SeeQR is to compare the efficiency of executing user-inputted queries. The SeeQR web app allows for you to see and compare the runtimes for each query you've tracked.

Database Architecture
As of right now, the SeeQR web app allows for one database to be inputted and queried. We intend to add functionality for multiple schemas to be added for comparison purposes at a later time.

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.