fix: Corrected Generation Of Entity Relationship Diagram #138

* Corrected inverted relationships

* Generated correct Entity Relationship Diagram

* Used Linux to generate vsix file / extension to generate ERDs

* Used includes instead of indexOf and improved docs

* Possibly corrected inverted cardinality per https://mermaid.js.org/syntax/entityRelationshipDiagram.html#relationship-syntax

* Removed backend/yarn.lock to allow CI

* Updated TypeScript and VSCode types

* Revised tests of relationships

* Deleted files named package-lock.json

* Update docs.md

backend/package.json

@@ -44,17 +44,17 @@
     "test": "jest --config=jest.config.js"
   },
   "devDependencies": {
+    "@types/azdata": "1.33.0",
     "@types/jest": "^26.0.20",
     "@types/node": "^13.9.3",
-    "@types/vscode": "^1.63.0",
-    "@types/azdata": "1.33.0",
+    "@types/vscode": "^1.92.0",
+    "azdata-test": "^1.2.0",
     "jest": "^26.6.3",
     "ts-jest": "^26.5.4",
     "tslint": "^6.1.0",
-    "typescript": "^3.8.3",
+    "typescript": "^5.5.4",
     "vsce": "^1.71.0",
-    "vscode-test": "^1.6.1",
-    "azdata-test": "^1.2.0"
+    "vscode-test": "^1.6.1"
   },
   "dependencies": {
     "svg-to-pdfkit": "^0.1.8"

backend/src/services/builder.service.spec.ts

@@ -70,11 +70,11 @@ describe("chartBuilder", () => {
   });
 
   [
-    { kind: "one to many", md: "||--|{", replaceColumn: {} },
-    { kind: "zero to many", md: "|o--|{", replaceColumn: { nullable: true } },
+    { kind: "one to many", md: "}|--||", replaceColumn: {} },
+    { kind: "zero to many", md: "|}--o|", replaceColumn: { nullable: true } },
     {
       kind: "one to one",
-      md: "||--||",
+      md: "||--|{",
       replaceColumn: { constraints: ["PRIMARY KEY", "FOREIGN KEY", "UNIQUE"] },
     },
   ].forEach((element) => {

backend/src/services/builder.service.ts

@@ -47,15 +47,21 @@ export const chartBuilder = (tables: DatabaseTable[]) => {
 };
 
 const getRelation = (column: DatabaseColumn) => {
+  const constraints = column.constraints;
+
+  if (column.nullable && constraints.includes("UNIQUE")) {
+    return "|o--||";
+  }
+
   if (column.nullable) {
-    return "|o--|{";
+    return "|}--o|";
   }
 
-  if (column.constraints.includes("UNIQUE")) {
-    return "||--||";
+  if (constraints.includes("UNIQUE")) {
+    return "||--|{";
   }
 
-  return "||--|{";
+  return "}|--||";
 };
 
 const formatConstraints = (element?: string[]) =>

docs/docs.md

@@ -1,19 +1,23 @@
-# Schema Visualization
+# Generating vsix File / Extension For Azure Data Studio
 
-This page is for developers that want to run the project locally.
+This page is for developers that want to use a local version of this repository to create a vsix file that can be installed as an extension in Azure Data Studio and used to create Entity Relationship Diagrams.
 
-## Prerequisites
-- A recent version of node.js
-- yarn or npm
+## Notes
+
+- You might consider generating a vsix file on an operating system like Ubuntu 22.04.3 LTS (GNU/Linux 5.15.153.1-microsoft-standard-WSL2 x86_64) or Windows 11 Home, Version 22H2, OS build 22621.3880, Windows Feature Experience Pack 1000.22700.1020.0.
+
+## Prerequisites For Generating vsix File
+
+- A recent version of node.js. You might consider installing `nvm` and Node.js version 20.16.0 per [How To Set Up NVM](https://github.com/tslever/React/blob/main/How_To_Set_Up_NVM.md).
+- yarn, or npm and yarn. You might consider installing yarn by running `npm install --global yarn`.
 
 To be able to use a debugger:
 - vscode - for the development
 - [Azure Data Studio Debug](https://marketplace.visualstudio.com/items?itemName=ms-mssql.sqlops-debug) extension
 
-## Installation
-In a terminal:
+## Installing This Node.js Project
 
-### Yarn:
+### yarn
 
 Backend
 ```sh
@@ -25,49 +29,86 @@ Frontend
 cd frontend && yarn
 ```
 
-### Npm
+### npm
+
+Ensure you are using your installed version of Node.js (e.g., 20.16.0) by running `node --version`.
+
+Navigate to the root of this repository.
+
+Run `cd backend`.
+
+Run `npm i`.
+
+Run `mkdir out`.
+
+Run `cd ../frontend`.
+
+Run `npm i`.
+
+## Compile 
+
+### yarn
 
-Backend
 ```sh
-cd backend && npm i && mkdir out
+cd frontend && yarn run build && cd ../backend && yarn run compile
 ```
 
-Frontend
+### npm
+
+Run `cd ../frontend`.
+
+Run `npm run build`.
+
+Run `cd ../backend`.
+
+Run `npm run compile`.
+
+## Pack
+
+### yarn
+
 ```sh
-cd frontend && npm i
+cd backend && yarn run
 ```
 
-## Compile and pack
-### Yarn
-Compile:
- ```sh
-    cd frontend && yarn run build && cd ../backend && yarn run compile
- ```
-Pack:
-  ```sh
-    cd backend && yarn run
- ```
-
-### Npm
-Compile:
- ```sh
-    cd frontend && npm run build && cd ../backend && npm run compile
- ```
-Pack:
-  ```sh
-    cd backend && npm run pack
- ```
-
-
-This will generate an vsix that can be installed in azure data studio.
+### npm
+
+Run `cd ../backend`.
+
+Run `npm run pack`.
+
+Move `<ROOT OF THIS REPOSITORY>/backend/schema-visualization-<MAJOR VERSION NUMBER>.<MINOR VERSION NUMBER>.<PATCH NUMBER>.vsix` to a desired location for installation as an extension in Azure Data Studio.
+
+## Install vsix File In Azure Data Studio
+
+Install Azure Data Studio (e.g., Azure Data Studio for User version 1.49.0).
+
+Open Azure Data Studio.
+
+Open Extensions.
+
+Click the ellipsis and Install from VSIX...
+
+Install the above vsix file.
+
+On the Welcome screen click "Create a connection".
+
+Connect to a database server.
+
+Right click the database server and click Manage.
+
+Click Schema Visualization.
 
 ## Debug
+
 By using vscode as editor with the extension [Azure Data Studio Debug](https://marketplace.visualstudio.com/items?itemName=ms-mssql.sqlops-debug) you are able to set breakpoints in the backend code. Start in debug mode by pressing f5.
 
 ## Frontend
+
 The frontend is based on Angular and can be runned without the backend in the browser by:
 
 ```sh
 cd frontend && yarn start
 ```
-Then it's possible to run a mocked environment in the browser at `localhost:4200`
+
+Then it's possible to run a mocked environment in the browser at `localhost:4200`

frontend/package.json

@@ -12,14 +12,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.1",
-    "@angular/common": "^16.2.1",
-    "@angular/compiler": "^16.2.1",
-    "@angular/core": "^16.2.1",
-    "@angular/forms": "^16.2.1",
-    "@angular/platform-browser": "^16.2.1",
-    "@angular/platform-browser-dynamic": "^16.2.1",
-    "@angular/router": "^16.2.1",
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
     "d3": "^7.8.5",
     "mermaid": "^9.1.2",
     "ng": "^0.0.0",
@@ -29,22 +29,22 @@
     "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.0",
-    "@angular-eslint/builder": "16.1.0",
-    "@angular-eslint/eslint-plugin": "16.1.0",
-    "@angular-eslint/eslint-plugin-template": "16.1.0",
-    "@angular-eslint/schematics": "16.1.0",
-    "@angular-eslint/template-parser": "16.1.0",
-    "@angular/cli": "^16.2.0",
-    "@angular/compiler-cli": "^16.2.1",
+    "@angular-devkit/build-angular": "^16.2.12",
+    "@angular-eslint/builder": "^16.2.12",
+    "@angular-eslint/eslint-plugin": "^16.2.12",
+    "@angular-eslint/eslint-plugin-template": "^16.2.12",
+    "@angular-eslint/schematics": "^16.2.12",
+    "@angular-eslint/template-parser": "^16.2.12",
+    "@angular/cli": "^16.2.12",
+    "@angular/compiler-cli": "^16.2.12",
     "@types/d3": "^7.4.0",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",
     "eslint": "^8.39.0",
     "html-inline": "^1.2.0",
-    "jasmine-core": "~3.6.0",
+    "jasmine-core": "^3.8.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.16",
     "karma-chrome-launcher": "~3.1.0",