microsoft · aasimkhan30 · Jan 9, 2025 · Dec 13, 2024 · Dec 15, 2024 · Jan 7, 2025
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
 
       - name: Install yarn
         run: npm install -g yarn

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "22"
 
       - name: Install yarn
         run: npm install -g yarn

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -4,23 +4,14 @@ import tseslint from 'typescript-eslint';
 export default [
     {
         files: ['src/ts/**/*.ts'],
-        ignores: ['src/ts/mxtypings/**/*.d.ts'],
+        ignores: ['src/ts/mxtypings/**/*.d.ts', 'dist/**/*.js'],
         languageOptions: {
             parser: tseslint.parser,
         },
         plugins: {
             'license-header': licenseHeader,
         },
         rules: {
-            "license-header/header": [
-                "error",
-                [
-                    "/*---------------------------------------------------------------------------------------------",
-                    " *  Copyright (c) Microsoft Corporation. All rights reserved.",
-                    " *  Licensed under the Source EULA.See License.txt in the project root for license information.",
-                    " * --------------------------------------------------------------------------------------------*/",
-                ]
-            ],
             "no-var": "error",
             "prefer-const": "error",
             "eqeqeq": "error",

diff --git a/index.html b/index.html
@@ -6,7 +6,9 @@
     <body>
         <h1>Examples</h1>
         <ul>
-            <li><a href="ts-examples/helloWorld.html">Hello World</a></li>
+            <li><a href="ts-examples/helloWorld.html">Hello World</a> - A simple example that loads mxgraph with 2 cells and a connection between them.</li>
+            <li><a href="ts-examples/bigSchema.html">Schema Designer with a big schema loaded</a> - Creates a schemaDesigner with using the world wide importers schema</li>
+            <li><a href="ts-examples/smallSchema.html">Schema Designer with an small schema</a> - Creates a small demo schema</li>
         </ul>
     </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "azdataGraph",
   "description": "azdataGraph is a derivative of mxGraph, which is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.",
-  "version": "0.0.70",
+  "version": "0.0.71",
   "homepage": "https://github.com/microsoft/azdataGraph",
   "author": "Microsoft",
   "license": "Apache-2.0",
@@ -19,19 +19,28 @@
     "build": "yarn compile-mxgraph && npx tsc && node build.js",
     "watch": "yarn compile-mxgraph && node build.js --watch",
     "examples": "http-server -p 4000",
-    "lint": "eslint"
+    "lint": "eslint",
+    "dev": "vite"
   },
   "devDependencies": {
     "@jgoz/esbuild-plugin-typecheck": "^4.0.2",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
     "esbuild": "^0.24.0",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-license-header": "^0.6.1",
     "grunt": "^1.6.1",
     "grunt-contrib-concat": "^2.1.0",
     "grunt-contrib-copy": "^1.0.0",
     "http-server": "^14.1.1",
     "load-grunt-tasks": "^3.5.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.0"
+    "typescript-eslint": "^8.18.0",
+    "vite": "^6.0.7"
   }
 }
diff --git a/src/js/azdata/azdataQueryPlan.js b/src/js/azdata/azdataQueryPlan.js
@@ -1,8 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
 const GRAPH_PADDING_RIGHT = 40;
 const GRAPH_PADDING_TOP = 0;
 const GRAPH_PADDING_BOTTOM = 80;

diff --git a/src/js/azdata/view/azDataGraph.js b/src/js/azdata/view/azDataGraph.js
@@ -1,8 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
 /**
  * Class: azdataGraph
  * 

diff --git a/src/ts/index.ts b/src/ts/index.ts
@@ -1,9 +1,5 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA.See License.txt in the project root for license information.
- * --------------------------------------------------------------------------------------------*/
-
 /// <reference path="./mxtypings/index.d.ts" />
 import mx from 'mxgraph';
 export * from 'mxgraph';
+export * from './schemaDesigner/schemaDesigner';
 export { mx };
diff --git a/src/ts/mx.ts b/src/ts/mx.ts
@@ -1,8 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA.See License.txt in the project root for license information.
- * --------------------------------------------------------------------------------------------*/
-
 import factory, { mxGraphExportObject } from 'mxgraph';
 
 declare global {

diff --git a/src/ts/schemaDesigner/schemaDesigner.css b/src/ts/schemaDesigner/schemaDesigner.css
@@ -0,0 +1,182 @@
+:root {
+  --sd-z-base: 1;
+  --sd-z-graph: calc(var(--sd-z-base) + 1);
+  --sd-z-toolbar: calc(var(--sd-z-base) + 2);
+}
+
+.sd-toolbar-belt {
+    position: fixed;
+    bottom: 22px;
+    z-index: var(--sd-z-toolbar);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  .sd-toolbar {
+    height: 48px;
+    width: fit-content;
+    gap: 0.5rem;
+    display: flex;
+    background-color: var(--color-toolbar-bg);
+    color: var(--color-toolbar-text);
+    padding: 5px;
+    border-radius: 0.8rem;
+    vertical-align: middle;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
+      inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
+      inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
+  }
+
+  .sd-toolbar-button {
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    background-size: 25px 25px;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 4px;
+    border-radius: 0.5rem;
+  }
+
+  .sd-toolbar-button:hover {
+    background-color: var(--color-toolbar-button-hover);
+  }
+
+  .sd-toolbar-divider {
+    height: 100%;
+    width: 1px;
+    background-color: var(--color-toolbar-divider);
+  }
+
+  #graphContainer {
+    width: 100%;
+    height: 100%;
+    z-index: var(--sd-z-base);
+    background-image: radial-gradient(
+      circle,
+      var(--color-graph-gridLines) 10%,
+      transparent 10%
+    );
+    background-size: 20px 20px;
+    background-repeat: repeat;
+    overflow: auto;
+  }
+
+  .sd-outline {
+    position: fixed;
+    right: 10px;
+    bottom: 10px;
+    border-radius: 0.3rem;
+    z-index: var(--sd-z-toolbar);
+    border: 1px solid var(--color-border);
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
+      inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
+      inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
+    background-color: var(--color-graph-outline-background);
+    width: 200px;
+    height: 100px;
+  }
+
+  .sd-table {
+    width: 260px;
+    height: 100%;
+    border-radius: 2px;
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
+    inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
+    inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-graph-background);
+  }
+
+  .sd-table-color-indicator {
+    width: 100%;
+    height: 6px;
+    background-color: var(--color-graph-table-indicator);
+    border-radius: 2px 2px 0 0;
+  }
+
+  .sd-table-header {
+    display: flex;
+    gap: 10px;
+    height: 40px;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+
+  .sd-table-header-icon {
+    width: 24px;
+    height: 100%;
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-left: 10px;
+  }
+
+  .sd-table-header-text {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-table-header-text);
+    align-self: center;
+    text-align: left;
+    flex: 1;
+    user-select: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .sd-table-columns {
+    display: flex;
+    flex-direction: column;
+    max-height: 280px;
+    overflow-y: auto;
+    margin-top: 5px;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .sd-table-column {
+    display: flex;
+    gap: 10px;
+    height: 28px;
+    min-height: 28px;
+    box-sizing: border-box;
+  }
+
+  .sd-table-column:hover{
+    background-color: var(--color-graph-node-hover);
+  }
+
+  .sd-table-column-icon {
+    width: 26px;
+    height: 100%;
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-left: 10px;
+  }
+
+  .sd-table-column-text {
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 400;
+    align-self: center;
+    text-align: left;
+    user-select: none;
+    flex: 1;
+  }
+
+  .sd-table-column-constraints {
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 400;
+    align-self: center;
+    text-align: left;
+    margin-right: 10px;
+    user-select: none;
+  }
+