Skip to content

Commit 6a673f2

Browse files
mcummings190mcummings190
authored
Merge pull request #125 from open-source-labs/dev7.3
Final dev branch of dpSpy7.0
2 parents 5b8f018 + 6d52a1a commit 6a673f2

File tree

85 files changed

+6959
-1944
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+6959
-1944
lines changed

‎.DS_Store

2 KB
Binary file not shown.

‎Contributors.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,31 @@
22

33
Below is a list of features and improvements to which you can contribute. If you have any additional ideas, please raise an issue or implement them as well!
44

5-
- When a user clicks "Show Data" in build database after creating a table, it will immediately crash the display page if the table does not have a primary and foreign key connected to another table. This is due to it not have its "nodes and edges" not being rendered in the "Flow.tsx" file. A future iteration team should consider making a conditional statement that will alert the user that they currently have no Entity Relationship establish within their schema. (see first bug in known bugs/issue)
5+
- Testing library is VERY outdated; would need a lot of work to bring tests up to speed with most recent version(s).
6+
- Adding the ability to better export queries when not connected to a live database
7+
- Adding the ability to idenitfy the current user, and give feedback when an opperation is not allowed by a user when connected to a database
68
- Logging needs a default settings list and direct reimport into live database.
79
- The SQL code to import has been placed into the DB_Schemas folder along with SQL Schema dumps. Also, log setting functionality is currently limited to Postgres databases and the code needs to be expanded to query and display log setting info from MySQL databases.
810
- Increasing compatibility with other SQL-based databases: Although PostgreSQL and MySQL databases are perfectly compatible, dbSpy is currently not optimized to work with other SQL databases like Oracle SQL and Microsoft SQL.
9-
- Saving multiple databases per user: dbSpy allows users to save and load one database per account, but allowing users to store multiple databases would make the application more functional.
10-
- Allow users to delete one or more of their saved databases
1111
- Add additional themes and graphical options to canvas and tables
1212
- Live query feedback so users can see what their changes to the canvas look like as queries.
1313
- As the ability to manipulate data has been recently added, there are not as many safe guards to prevent users from performing actions that are not allowed for some databases.
1414
- Limiting the data types to only those possible for the database the user is currently working on.
1515
- TypeORM has been implemented to connect to multiple databases but can be modified to further universal database functions
16+
-UI element to indicate connection status to database incase anything happens to connection.
1617

17-
Known bugs/issues
18+
--- Known bugs/issues ---
1819

19-
- Clicking show data after building a database by adding tables causes the app to crash. *-Urgent Fix Needed*
20+
- Adding data to a newly created table will not display changes until refresh (Show Schema and then back to Show Data again). Data is successfully added, likely just a state-display bug
21+
- Adding data to a table is not restricted by table's schema input-type (integer fields can accept strings, etc). Type-checking for inputs should be implemented (also numbers input as data are being input as strings).
22+
- Loading in a database through user profile (not connecting through sql string) and then adding data to tables causes the Save and Load database buttons to lock up and be un-usable.
23+
- Current database won't display when you Connect Database, only when you Load Database.
24+
- Large Data Entries don't render in the data windows. A good example is loading in dbSpys Schema data column, and seeing it bug out.
25+
- Certain cases of adding data have the ability to crash React-Flow (rare edge cases).
2026
- Clearing canvas after connecting a database and attempting to create a new table without refreshing causes the website to crash (blank screen).
27+
--> Above bug no longer crashes dbySpy, but the Show Data portion of the program is not up to date with changes (Show Data will still show data from connected database and not the newly created table)
28+
--> Likely due to schemaStore and dataStore not being fully connected (??)
2129
- Undo function will not revert the state of the canvas to the point where it is empty.
22-
- When creating a new foreign key on a column, if you click submit while there is no table selected, the display area will shrink to a very small square in the top left corner of the page.
30+
- When creating a new foreign key on a column, if you click submit while there is no table selected, the display area will shrink to a very small square in the top left corner of the page.
2331
- Exporting your query has been affected in the course of adding additional databases and needs to be reorganized
2432
- The webpage reverts back to dark mode when it is refreshed even when if it is already in light mode
25-

‎README(Chinese).md

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
<div align="center">
2+
3+
<a href="https://makeapullrequest.com">![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)</a>
4+
<a href="https://img.shields.io/badge/version-1.0.1-blue">![Version](https://img.shields.io/badge/version-6.0.0-blue)</a>
5+
![GitHub Stars](https://img.shields.io/github/stars/oslabs-beta/JAKT?color=%23fb7182)
6+
![MIT License](https://img.shields.io/badge/license-MIT-yellow)
7+
8+
</div>
9+
10+
<div align="center">
11+
12+
![logo](https://user-images.githubusercontent.com/101940529/198836631-31a657f7-feaa-4247-8abc-cedb86540e21.png)
13+
14+
</div>
15+
16+
<h1 align="center">使用 <i>dbSpy</i> 可视化、修改和构建您的数据库！</h1>
17+
<p align="center">使关联式数据库开发更便利的开源数据建模工具</p>
18+
<!-- <p align="center">dbSpy是一个促进关系数据库开发的开源数据建模工具。</p> -->
19+
20+
### 7.0 版本的新功能
21+
22+
- UI 现在是全宽屏，带有下拉式选单，可提供更多显示与操作空间。
23+
- 「储存」、「载入」和「删除」功能现在采用档案名，并且可以储存资料库结构和数据。
24+
- 删除表当中的某些元素现在可以定位，并且还可以正确删除连接到其他表上的元素。
25+
- 实现了一种演算法来显示连接到当前所选表格所有连接的线。
26+
- 修正了无法从连接的资料库中删除某些元素的几个问题。
27+
- 修正了显示数据按钮会导致网页崩溃的几个问题。
28+
- 修正了连接线重复渲染导致拖影且未成功删除的几个问题。
29+
30+
### 实例
31+
32+
- 连接到现有的远程 PostgreSQL、MySQL、MicroSoftSQL、OracleSQL 数据库
33+
- 为现有数据库的架構和數據生成 ER 图，并为用户提供一个界面，既可以修改现有表格，也可以创建新表格。更改的日志被存储起来，用户随时可以生成包含这些更改的查询，以便这些更改反映在现有数据库中。
34+
- 上传您的数据库 SQL 文件
35+
- 上傳的 SQL 文件（数据库转储）生成 ER 图，并为用户提供一个界面，既可以修改现有表格，也可以创建新表格。更改被转换为相应的查询，用户可以在 dbSpy 外部的自己的数据库上查看并执行这些查询。
36+
- 无缝可视化关系数据库（包括架構和數據）
37+
- 在相互连接数据库表之后，用户可以通过点击表格来渲染个别表的关系连接。
38+
- 从头开始创建数据库+ER 图
39+
- 提供一个画布，用户可以使用 ER 图创建数据库，从而为工程数据库结构创建蓝图。
40+
41+
---
42+
43+
### 主要功能
44+
45+
1. **数据库上传：** 连接远程 SQL 数据库或上传本地 SQL 文件
46+
47+
2. **ER 图视觉效果：** 通过动态句柄放置来可视化数据库的实体关系图
48+
49+
3. **表格关系视觉效果** 单击表格时可以轻松识别各个表格的关系
50+
51+
4. **架构修改：** 单击按钮即可轻松在架构和数据之间切换
52+
53+
5. **数据/架构修改：** 通过简单的 UI 轻松修改数据库的架构或数据
54+
55+
6. **引导数据库构建：** 使用实体关系图从头开始创建新数据库，以确保数据库的完整性
56+
57+
7. **数据库撤消/重做：** 提供编辑历史记录，以便于回溯（尚未修復幾個 Bug）
58+
59+
8. **查询生成器：** 查询生成器生成可执行的 SQL 查询
60+
61+
9. **用户会话：** 使用 Google/Github OAuth 或 JWT/Bcrypt 安全地注册/登录
62+
63+
10. **保存/加载：** 通过您的用户帐户存储和重新加载过去的数据库会话
64+
65+
11. **深色模式：** 视觉设置，在弱光环境下提供更舒适的观看体验
66+
67+
## <img src="images/ConnectedToDB.png">
68+
69+
### Getting started
70+
71+
You will need your own MySQL database for backend functions.
72+
73+
- Fork and clone this repo
74+
- Add a db_schemas folder in server directory
75+
- Add a .env file to the root directory with the information below:
76+
77+
```bash
78+
# production environment variables
79+
USER_DB_URL = <MySQL url for storing user data>
80+
USER_DB_USER = <user string from USER_DB_URL>
81+
USER_DB_PW = <password string from USER_DB_URL>
82+
TOKEN_KEY = <any string>
83+
84+
# testing environment variables
85+
## encoded SSL data required for GitHub Actions
86+
SSL_KEY = <base64 encoded SSL key (see SSL Configuration)>
87+
SSL_CERT = <base64 encoded SSL cert>
88+
## MySQL and Postgres databases to test remote connection functionality
89+
MYSQL_TEST_URL = <MySQL url for a test database>
90+
MYSQL_TEST_USERNAME = <user string from MYSQL_TEST_URL>
91+
MYSQL_TEST_PW = <password string from MYSQL_TEST_URL>
92+
PG_TEST_URL = <PostgreSQL url for a test database>
93+
PG_TEST_USERNAME = <user string from PG_TEST_URL>
94+
PG_TEST_PW = <password string from PG_TEST_URL>
95+
## test user with saved schema to test save/load functionality
96+
TEST_USER_EMAIL = <email string>
97+
TEST_USER_PW = <password string>
98+
99+
GOOGLE_OAUTH_CLIENT_ID = <Google Oauth client id>
100+
GOOGLE_OAUTH_CLIENT_SECRET= <Google Oauth client id>
101+
GOOGLE_OAUTH_REDIRECT_URI = 'http://localhost:8080/display'
102+
103+
GITHUB_OAUTH_CLIENT_ID = <Github Oauth client id>
104+
GITHUB_OAUTH_CLIENT_SECRET= <Github Oauth client id>
105+
GITHUB_OAUTH_REDIRECT_URI = 'http://localhost:8080/display'
106+
107+
```
108+
109+
- Run the following below:
110+
111+
```bash
112+
$ npm install
113+
```
114+
115+
- Execute the following command to populate your mySql database with a users table:
116+
117+
```bash
118+
$ npm run seed
119+
```
120+
121+
- Run the project in development mode:
122+
123+
```bash
124+
$ npm run dev
125+
```
126+
127+
---
128+
129+
### SSL Configuration
130+
131+
To connect with the SQL database, we must create and configure SSL certificates.
132+
133+
### Mac
134+
135+
1. Install mkcert; you can learn more about mkcert [here](https://github.com/FiloSottile/mkcert)
136+
137+
```bash
138+
npm install -g mkcert
139+
```
140+
141+
2. Run the following script
142+
143+
```bash
144+
npm run cert
145+
```
146+
147+
### Linux
148+
149+
1. Check mkcert is up to date (v1.5.1 as of publishing)
150+
151+
```bash
152+
mkcert --version
153+
```
154+
155+
2. Run the following script
156+
157+
```bash
158+
npm run cert:linux
159+
```
160+
161+
---
162+
163+
# How to Use
164+
165+
### Connecting to an existing database
166+
167+
1. Click on the "Connect Database" button under the Action section on the left side of the page. This will open a sidebar on the right side of the page.
168+
2. Select the database type from the dropdown.
169+
3. Input your database URI information OR database connection credentials and click on "Connect".
170+
4. Once the connection to your database is established, the canvas will render and generate the tables and their relationships.
171+
- OracleSQL requires the download of the OCI - [here](https://www.oracle.com/cloud/free/)
172+
173+
### Uploading your database's SQL file
174+
175+
1. Locate and click on the "Upload SQL File" button under the Action section on the left side of the page. This will open a dialog box for you to select the SQL file you wish to upload.
176+
2. Once the file uploads, the canvas will render and generate the tables and their relationships.
177+
178+
### Starting an ER diagram from scratch
179+
180+
1. Locate and click on the "Build Database" button under the Action section on the left side of the page. This will render the canvas for you to create your database schema.
181+
2. Click on "Add Table" to name the first table and start building your database.
182+
183+
## Adding column(s) to a SCHEMA table or row(s) to a DATA table
184+
185+
1. To add a new column/row in a table, click on the add/plus icon on the top right of the table node.
186+
2. This will render a new column/row in the table in edit mode.
187+
3. Add in the data you would like in each column/row.
188+
4. Click on the confirm icon to save the column/row.
189+
5. The changes made in DATA table will be updated in your database.
190+
6. Click on the cancel icon to cancel the addition.
191+
192+
<img src="images/zuckOverWaz.png">
193+
194+
<img src="images/zuckTables.png">
195+
196+
### Editing an existing row of a DATA table
197+
198+
1. Click on the edit icon of the specific column that you want to edit.
199+
2. You can make changes to column fields based on the selections provided.
200+
3. Click on the save icon to keep your changes.
201+
4. Click on the cancel icon to cancel your changes.
202+
203+
### Deleting a column to a SCHEMA table or row of a DATA table
204+
205+
1. Click on the delete icon of the specific column that you want to delete.
206+
2. Click on the confirm icon to delete the column.
207+
3. Click on the cancel icon to cancel the deletion.
208+
209+
## <img src="images/DbSpy Gif.gif">
210+
211+
### Adding a foreign key reference to a column
212+
213+
1. While editing a column, if setting Foreign Key (FK) to "true", the Foreign Key Reference sidebar will appear on the right side of the screen.
214+
2. In the Foreign Key Reference sidebar, use the displayed dropdowns to create references between tables.
215+
3. Click save or cancel to proceed.
216+
4. Click on the save icon to keep your changes or click on the cancel icon to cancel your changes.
217+
218+
### Adding a table to a database
219+
220+
1. When on the display page, click the 'Add Table' icon after you have either connected to a database or clicked 'Build Database'.
221+
2. Fill in the required information about the first column of your table along with a name.
222+
3. If you would like to include additional columns, click the 'Add Column' button in the top right corner.
223+
4. Click confirm to create your table.
224+
225+
### Deleting a table from a database
226+
227+
1. After you have either connected to a database or started a new database, the 'Delete Table' icon will appear on the left side of the display page
228+
2. This will open a pop out with a list of tables from the database.
229+
3. Select which table that you would like to have removed, and confirm to have it deleted.
230+
231+
### Navigating the canvas
232+
233+
1. Located on the bottom left corner of the canvas, you will find the canvas control panel.
234+
- Zoom On [+] - this button zooms into the canvas.
235+
- Zoom Out [-] - this button zooms out of the canvas.
236+
- Fit View [[]] - this button zooms to fit all the tables in focus.
237+
- Toggle Interactivity [lock] - this button toggles on and off all table and column interactivity.
238+
- Screenshot [camera] - this button saves a .png file of the current canvas view.
239+
240+
---
241+
242+
### Future contributions and requests
243+
244+
- If you'd like to contribute, please find a list of possible contributions [here](Contributors.md)
245+
- If you have any requests, please submit an appropriately tagged GitHub issue
246+
- PRs are welcome otherwise
247+
248+
---
249+
250+
### Credits/Contributors
251+
252+
- David Jones • [LinkedIn](http://www.linkedin.com/in/davidjonesswe/) • [Github](https://github.com/david-jones-git)
253+
- John Ruiz • [LinkedIn](https://www.linkedin.com/in/john-ruiz-profile/) • [Github](https://github.com/johnruiz17)
254+
- Minh Chang • [LinkedIn](https://www.linkedin.com/in/minh-chang/) • [Github](https://github.com/miha-cha)
255+
- Darius Okafor • [LinkedIn](https://www.linkedin.com/in/dariusokafor/) • [Github](https://github.com/DE7741)
256+
- Parwinder Singh • [LinkedIn](http://www.linkedin.com/in/singh-parwinder/) • [Github](https://github.com/PintaAE86)
257+
- Yichung Chiu • [LinkedIn](https://www.linkedin.com/in/yichung-chiu-b14a94272/) • [Github](https://github.com/ychiu5896)
258+
- Joseph Tejeda • [LinkedIn](https://www.linkedin.com/in/atxjtejeda/) • [Github](https://github.com/JosephTejeda)
259+
- Stephen Havig • [LinkedIn](https://www.linkedin.com/in/stephen-havig-199340145/) • [Github](https://github.com/Stephen-Havig)
260+
- Das Kang • [LinkedIn](https://www.linkedin.com/in/das-kang/) • [Github](https://github.com/dahae0309)
261+
- Alexander Tu • [LinkedIn](https://www.linkedin.com/in/atu816/) • [Github](http://github.com/atu816)
262+
- Michael Costello • [LinkedIn](https://www.linkedin.com/in/mcostello-swe/) • [Github](https://github.com/neighbor-peace)
263+
- Steven Geiger • [LinkedIn](https://www.linkedin.com/in/sgeiger9/) • [Github](https://github.com/geistnine)
264+
- Yufa Li • [LinkedIn](https://www.linkedin.com/in/yufa-li/) • [Github](https://github.com/01001101CK)
265+
- Angel Giron • [LinkedIn](https://www.linkedin.com/in/acgiron/) • [Github](https://github.com/g94angel)
266+
- John Paul Adigwu • [LinkedIn](https://www.linkedin.com/in/johnpaul-adigwu/) • [Github](https://github.com/engineerous)
267+
- Kevin Park-Lee • [LinkedIn](https://www.linkedin.com/in/kevin38424/) • [Github](https://github.com/kevin38424)
268+
- Tarik Mokhtech • [LinkedIn](http://linkedin.com/in/tarik-mokhtech) • [Github](https://github.com/MockTech)
269+
- Brett Guidry • [LinkedIn](https://www.linkedin.com/in/brett-guidry504/) • [Github](https://github.com/BrettGuidryDev)
270+
- Emil Mebasser• [LinkedIn](https://www.linkedin.com/in/emil-mebasser-a1a2a815/) • [Github](https://github.com/ejmebasser)
271+
- Mimi Le • [LinkedIn](https://www.linkedin.com/in/my-le-a94575226/) • [Github](https://github.com/kawaiiyummy14)
272+
- Samson Lam • [LinkedIn](https://www.linkedin.com/in/samson-lam-455846219/) • [Github](https://github.com/sflam2013)
273+
- Adrian Reczek • [LinkedIn](https://www.linkedin.com/in/adrian-reczek/) • [Github](https://github.com/adziu1234)
274+
- Anthony Al-Rifai • [LinkedIn](https://www.linkedin.com/in/anthony-al-rifai-31677a100/) • [Github](https://github.com/AnthonyAl-Rifai)
275+
- Kevin Wang • [LinkedIn](https://www.linkedin.com/in/kevin-w-b841b13/) • [Github](https://github.com/kwang929)
276+
- Kris Magat • [LinkedIn](https://www.linkedin.com/in/kmag/) • [Github](https://github.com/KrisMagat)
277+
- Santiago Gil Maya • [LinkedIn](https://www.linkedin.com/in/santiago-gil-929721121/) • [Github](https://github.com/santiago-gil)
278+
test
279+
280+
---
281+
282+
### License
283+
284+
dbSpy is developed under the MIT license.

0 commit comments

Comments
 (0)