• Stars
    star
    594
  • Rank 75,329 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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.

PRs Welcome Release: 11.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 v11.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 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


  • NEW 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 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/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.
    • The 11th version now includes the functionality to run multiple queries, allowing users to obtain more reliable testing results.

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

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.

More Repositories

1

Svelvet

🎛 A Svelte library for building dynamic, infinitely customizable node-based user interfaces and flowcharts
Svelte
2,540
star
2

OverVue

Prototyping Tool For Vue Devs 适用于Vue的原型工具
Vue
2,463
star
3

Reactime

Developer tool for time travel debugging and performance monitoring in React applications.
TypeScript
2,165
star
4

PreVue

🎨 All in One Prototyping Tool For Vue Developers.
Vue
1,389
star
5

Spearmint

Testing, simplified. || An inclusive, accessibility-first GUI for generating clean, semantic Javascript tests in only a few clicks of a button.
TypeScript
1,289
star
6

SvelteStorm

SvelteStorm is an open-source IDE with a built-in Debugging window for viewing and debugging your Svelte project in real-time
Svelte
1,007
star
7

Swell

Swell: API development tool that enables developers to test endpoints served over streaming technologies including Server-Sent Events (SSE), WebSockets, HTTP2, GraphQL, gRPC, and tRPC..
JavaScript
980
star
8

Docketeer

A Docker & Kubernetes developer tool to manage containers & visualize both cluster and container metrics
TypeScript
862
star
9

Chronos

📊 📊 📊 Monitors the health and web traffic of servers, microservices, Kubernetes/Kafka clusters, containers, and AWS services with real-time data monitoring and receive automated notifications over Slack or email.
TypeScript
829
star
10

obsidian

GraphQL, built for Deno - a native GraphQL caching client and server module
TypeScript
751
star
11

Recoilize

A Chrome Dev tool for debugging applications built with the experimental Recoil.js state management library.
TypeScript
604
star
12

Quell

Quell is an easy-to-use, lightweight JavaScript library providing a client- and server-side caching solution for GraphQL. Use Quell to prevent redundant client-side API requests and to minimize costly server-side response latency.
TypeScript
578
star
13

vno

a build tool for compiling and bundling Vue single-file components
TypeScript
432
star
14

ReacType

Prototyping Tool for exporting React/Typescript Applications!
TypeScript
429
star
15

Chromogen

UI-driven Jest test-generation package for Recoil selectors and Zustand store hooks
TypeScript
280
star
16

dbSpy

Visualize, modify, and build your database with dbSpy! An open-source data modeling tool to facilitate relational database development.
TypeScript
263
star
17

DenoGres

Deno + PostgreSQL = DenoGres
TypeScript
212
star
18

obsidian-developer-tool

Developer tool for monitoring client cache performance for Obsidian 8.0
TypeScript
49
star
19

SeeQR-Web

A web-based database analytic tool that allows a developer to compare the efficiency of different queries on a granular level to make better informed architectural decisions regarding Postgres databases at various scales.
TypeScript
15
star
20

Sveltestorm-Website

SvelteStorm website
Svelte
10
star
21

QuellDemo

Demo for Quell written in React utilizing Material UI, chartJS, redis, and graphQL.
TypeScript
7
star
22

reactime-web

Web page for Reactime
JavaScript
6
star
23

Reactype-web

This is the ReacType Website created with Next.js and Typescript
TypeScript
5
star
24

SeeQR-Website

SeeQR's Website
TypeScript
3
star